@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;900&family=Roboto:wght@300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&family=Outfit:wght@100..900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap);@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap);@import url(https://use.typekit.net/pcp6abb.css);@import url(https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho&display=swap);@import url(https://fonts.cdnfonts.com/css/post-no-bills-colombo);@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap&family=Zen+Old+Mincho&display=swap&family=Inter:wght@100..900&display=swap);@import url(https://fonts.cdnfonts.com/css/post-no-bills-colombo);@import url(https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap);@import url(https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap);@import url(https://use.typekit.net/tik4gli.css);@import url(https://use.typekit.net/yeg1bmt.css);@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap);@import url(https://use.typekit.net/faz0ttr.css);@import url(https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap);@import url(https://use.typekit.net/ikm7woc.css);@import url(https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&family=BIZ+UDPGothic:wght@400;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ultra&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Paytone+One&display=swap);@import url(https://use.typekit.net/oun5ykw.css);@import url(https://fonts.googleapis.com/css2?family=Gasoek+One&display=swap);@import url(https://fonts.googleapis.com/css2?family=Fredoka:wdth,wght@75..125,300..700&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap);.app-footer { background-color: #ffffff; letter-spacing: 1px; font-family: 'Founders Grotesk', sans-serif; } .app-footer-top { padding: 60px 0; background-color: #fafafa; } .app-footer-top__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .app-footer-nav__block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .app-footer-nav__title { margin-bottom: 20px; font-size: 12px; line-height: 14px; color: #000000; font-weight: 400; font-family: 'Founders Grotesk', sans-serif; text-transform: uppercase; } .app-footer-nav__link { margin-bottom: 10px; font-size: 12px; line-height: 12px; color: #999; cursor: pointer; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; font-weight: 400; } .app-footer-nav__link:hover { color: #666; text-decoration: none; } .app-footer-nav__link:last-child { margin-bottom: 0; } .app-footer-contact { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .app-footer-contact__title { margin-bottom: 18px; font-size: 10px; line-height: 12px; text-align: left; color: #000000; } .app-footer-contact__call-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 37px; } .app-footer-contact__phone { margin-bottom: 0; font-size: 26px; line-height: 31px; color: #000000; } .app-footer-contact__hours { margin-bottom: 0; font-size: 10px; line-height: 12px; color: #000000; } .app-footer-info { padding: 40px 0; } .app-footer-info__copyright { font-size: 10px; line-height: 12px; letter-spacing: 0em; color: #000000; opacity: 0.7; } .app-footer-info__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; } .app-footer-info__link { text-decoration: underline; } .app-footer-info__link, .app-footer-info__divider { font-size: 10px; line-height: 12px; letter-spacing: 0em; color: #000000; opacity: 0.5; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .app-footer-info__link:hover, .app-footer-info__divider:hover { color: #000000; opacity: 0.3; } .app-footer-info__country { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; cursor: pointer; } .app-footer-info__country-img { width: 25px; } .app-footer-info__country__toggle { width: 8px; height: 5px; } .app-footer-info__country span { font-size: 10px; line-height: 12px; letter-spacing: 0em; color: #000000; opacity: 0.5; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .app-footer-info__country span:hover { color: #000000; opacity: 0.3; } .auth-panel { position: relative; } .auth-panel:hover .auth-panel__dropdown-menu { display: block; } .auth-panel:hover .auth-panel__dropdown-toggler { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .auth-panel__dropdown-menu { display: none; padding: 10px; margin: 0; position: absolute; z-index: 21; } .auth-panel__dropdown-menu--top { bottom: 100%; } .auth-panel__dropdown-menu--bottom { top: 100%; } .auth-panel__dropdown-menu--center { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .auth-panel__dropdown-menu--left { right: -30px; } .auth-panel__dropdown-menu--right { left: -30px; } .auth-panel__dropdown-content { width: 170px; background: #fff; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23); box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23); } .auth-panel__dropdown-list { display: block; padding: 10px; color: #000000; -webkit-transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; } .auth-panel__dropdown-list:hover { color: #000000; background-color: #fafafa; opacity: 30%; } .auth-panel__dropdown-toggler { margin-left: 3px; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .lang-popup-wrapper { max-width: 790px; } .lang-popup-wrapper .lang-popup { padding: 0 25px; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 790px; margin: 0 auto; } .lang-popup-wrapper .lang-popup__cross { top: 20px; right: 20px; margin: 0; opacity: 0.5; } .lang-popup-wrapper .lang-popup__title { width: 100%; text-align: center; font-size: 18px; font-family: 'Founders Grotesk', sans-serif; color: #000; padding: 40px 0 30px; line-height: 1.5; font-weight: 400; letter-spacing: .04em; } .lang-popup-wrapper .lang-popup__columns { height: 100%; padding-bottom: 40px; overflow-y: auto; } .lang-popup-wrapper .lang-popup .country-item__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 16px 20px 0; background-color: #fff; border-width: 1px 0; border-style: solid; border-color: #e3e3e3; cursor: pointer; width: 100%; margin-top: -1px; } .lang-popup-wrapper .lang-popup .country-item__content__btn { background: none; border: none; cursor: pointer; font-family: 'Founders Grotesk', sans-serif; color: #000; font-size: 14px; line-height: 1.25; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 13px; padding: 0; } .lang-popup-wrapper .lang-popup .country-item__content__btn img { width: 25px; height: 16px; border: 1px solid #e3e3e3; aspect-ratio: 25/12; -o-object-fit: cover; object-fit: cover; } .lang-popup-wrapper .lang-popup .country-item__content__toggle-img { opacity: .25; width: 18px; height: 18px; -o-object-fit: contain; object-fit: contain; } .lang-popup-wrapper .lang-popup .country-item__content.active .country-item__content__btn { color: #0094c8; } .lang-popup-wrapper .lang-popup .country-item__language-list { padding: 8px 0; background-color: #f8f8f8; } .lang-popup-wrapper .lang-popup .country-item__language-list ul { margin: 0; padding: 0; list-style: none; } .lang-popup-wrapper .lang-popup .country-item__language-list ul li { padding: 8px 16px; cursor: pointer; font-size: 15px; line-height: 1.5; color: #666; } .lang-popup-wrapper .lang-popup .country-item__language-list ul li.active { color: #0094c8; } @media screen and (min-width: 768px) { .lang-popup-wrapper .lang-popup { top: 50%; bottom: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: auto; border: 1px solid rgba(0, 0, 0, .2); background-clip: padding-box; padding: 0 40px 40px; } .lang-popup-wrapper .lang-popup__title { padding: 50px 0 35px; } .lang-popup-wrapper .lang-popup__columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; padding-bottom: 0; } .lang-popup-wrapper .lang-popup__column { margin-top: 1px; } } @-webkit-keyframes slideIn { from { max-height: 0; } to { max-height: 1000px; } } @keyframes slideIn { from { max-height: 0; } to { max-height: 1000px; } } @-webkit-keyframes slideOut { from { max-height: 1000px; } to { max-height: 0; } } @keyframes slideOut { from { max-height: 1000px; } to { max-height: 0; } } .country-item__language-list.open { -webkit-animation: slideIn 0.3s ease-in-out forwards; animation: slideIn 0.3s ease-in-out forwards; } .country-item__language-list.lang-close { -webkit-animation: slideOut 0.3s ease-in-out forwards; animation: slideOut 0.3s ease-in-out forwards; } .navigation-drawer-sidenav { height: 100vh; width: 0; position: fixed; z-index: 1001; top: 0; right: 0; background-color: #ffffff; overflow-x: hidden; overflow-y: scroll; -webkit-transition: fadeIn 1.2s ease-in-out; transition: fadeIn 1.2s ease-in-out; } #navigation-drawer-backdrop { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; background-color: rgba(0, 0, 0, .4); -webkit-animation: fadeIn 1.2s ease-in-out; animation: fadeIn 1.2s ease-in-out; } .closeicon { margin: 20px; cursor: pointer; position: fixed; right: 0; z-index: 1234; } @media screen and (max-height: 700px) { .navigation-drawer-sidenav { overflow-y: scroll; } } .social-media-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 28px; padding: 15px 0 0 0; } .social-media-links-mweb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 28px; margin: 0; padding: 15px 0 15px 0; list-style-type: none; width: 100%; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; } /* * Define scss variables here. */ /* Toast Classes */ .message-toast { z-index: 999999999999; width: 100vw; bottom: -999px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .toast-text { color: white; padding: 8px 15px; max-width: 95vw; } .white-space-pre { white-space: pre-wrap; } .background-dark_grey_blue { background: #27394e; } .background-green { background: #61ab44; } .background-orange { background: #fd6b0b; } .background-red { background: #ff0000; } /* Only used on old payment page */ .custom-btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #333; background-color: #fff; border-color: #ccc; } .custom-btn:hover { background-color: #e6e6e6; } .custom-btn.outlined { background-color: white; border: 1px solid #ccc; } .custom-btn.outlined:hover { background-color: #e0dfdf; } .custom-btn.danger { color: #fff; background-color: #d9534f; } .custom-btn.danger:hover { background-color: #c9302c; } .custom-btn.outlined-blue { color: #000042; border: 1px solid #737397; background-color: #ffffff; -webkit-transition: 150ms ease all; transition: 150ms ease all; } .custom-btn.outlined-blue:hover { background-color: #eeeeee; } .custom-btn.green { color: #000042; background-color: #11DAAC; -webkit-transition: 150ms ease all; transition: 150ms ease all; } .custom-btn.green:hover { background-color: #00C99B; } .modal { position: fixed; display: block; margin: 0 auto; top: 0; left: 0; padding-top: 10px; z-index: 1200 !important; overflow-x: hidden; overflow-y: hidden; height: 100vh; } .animate-top { -webkit-animation: animatetop .5s; animation: animatetop .5s; } .animate-left { -webkit-animation: animateleft 0.5s; animation: animateleft 0.5s; } .modal-backdrop { z-index: 1040; background-color: #000; opacity: 1; } .fade { opacity: 0; -webkit-transition: opacity .15s linear; transition: opacity .15s linear; } .sgBookAppointment-height { height: 87vh; overflow: auto; } .thank-you-height { height: 52vh; overflow: auto; } .modal-body { position: relative; padding: 15px; height: 100%; } @media (min-width: 992px) { .modal-lg { width: 900px; } } .modal-header { min-height: 55px; } .modal-header .close { color: #939393; position: absolute; right: 20px; opacity: .9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modal-header .close:hover { color: #333; } .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4 { font-size: 18px; margin-top: 0; margin-bottom: 0; } button.close { padding: 0; cursor: pointer; background: 0 0; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .title { font-size: 14px; font-family: Roboto, sans-serif; line-height: 143%; letter-spacing: .15px; cursor: pointer; } @-webkit-keyframes animatetop { from { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animatetop { from { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes animateleft { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateleft { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .lkModal.modal-title { font-weight: 700; } .lkModal.modal-dialog { position: absolute; left: 50%; top: 45%; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; } .theme-button { background-color: #00b9c6; color: #fff; } .flex-direction-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .lk-exchange-modal .modal { height: auto; margin: 0; } .cookies-modal__button { width: auto; font-family: "Founders Grotesk", sans-serif; font-weight: 700 !important; font-size: 13px; line-height: 13px; letter-spacing: .195px; margin: 0; border-radius: 0; padding: 8px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; border: 1px solid #666; } .cookies-modal__button--white { color: #666; background-color: white; border: 1px solid #666; } .cookies-modal__button--gray { background-color: #516075; border-color: #516075; color: white; } @media (min-width: 1024px) { .cookies-modal__button { padding: 16px; letter-spacing: .195px; } .cookies-modal__button--white:hover { -webkit-transition: 0.5s; transition: 0.5s; background-color: #666; color: white; } .cookies-modal__button--gray:hover { -webkit-transition: 0.5s; transition: 0.5s; opacity: .8; } } .cookies-modal__popup { position: fixed; left: 8px; right: 8px; bottom: 12px; z-index: 9999999; } .cookies-modal__popup__container { width: 100%; max-width: 467px; height: auto; background-color: rgba(255, 255, 255, .9); padding: 12px 16px; margin: 0 auto; -webkit-box-shadow: 0 0.625em 1.875em rgba(2, 2, 3, .28); box-shadow: 0 0.625em 1.875em rgba(2, 2, 3, .28); position: relative; } .cookies-modal__popup__close { position: absolute; top: 12px; right: 16px; width: 16px; height: 16px; border: none; background-color: transparent; } .cookies-modal__popup__close::before { content: ''; background-image: url("https://static.lenskart.com/owndays/img/cookies-modal/close-icon.svg"); position: absolute; width: 100%; height: 100%; background-size: 100% 100%; top: 0; left: 0; } .cookies-modal__popup__title { font-family: "Founders Grotesk", sans-serif; font-weight: 600 !important; font-size: 11.5px; line-height: 17px; letter-spacing: .173px; color: black; margin-bottom: 2px; } .cookies-modal__popup__desc { font-family: "Founders Grotesk", sans-serif; font-weight: 300 !important; font-size: 11px; line-height: normal; color: black; margin-bottom: 0; } .cookies-modal__popup__desc a { font-family: "Founders Grotesk", sans-serif; font-weight: 600 !important; color: #0094c8; border-color: #0094c8; text-decoration: underline; text-underline-offset: 2px; } .cookies-modal__popup__desc a:hover { color: #0094c8; border-color: #0094c8; } @media (min-width: 1024px) { .cookies-modal__popup__desc a:hover { cursor: pointer; } } .cookies-modal__popup__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 3px; gap: 12px; } @media (min-width: 520px) { .cookies-modal__popup__title { text-align: center; } } @media (min-width: 768px) { .cookies-modal__popup__title { font-size: 12px; margin-bottom: 4px; } } @media (min-width: 1024px) { .cookies-modal__popup__container { max-width: 890px; padding-left: 19px; padding-right: 48px; } .cookies-modal__popup__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; } .cookies-modal__popup__close { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cookies-modal__popup__title { text-align: left; font-size: 16px; line-height: 24px; margin-top: 0; margin-bottom: 3px; } .cookies-modal__popup__desc { text-align: left; margin-bottom: 0; font-size: 13px; line-height: 20px; letter-spacing: .195px; } .cookies-modal__popup__buttons { margin-top: 0; } } .cookies-modal__settings { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999999; } .cookies-modal__settings__layout { width: 100%; height: 100%; } .cookies-modal__settings__content { width: 100%; max-width: 600px; height: 100%; background-color: white; } .cookies-modal__settings__header { width: 100%; height: 60px; padding: 0 1.3em 0 30px; position: relative; } .cookies-modal__settings__title { font-family: "Founders Grotesk", sans-serif; font-weight: 600 !important; font-size: 16px; letter-spacing: 0; color: black; margin: 0; padding-top: 40px; } .cookies-modal__settings__close { position: absolute; width: 21px; height: 21px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 1.3em; border: none; background: transparent; } .cookies-modal__settings__close::before { content: ''; background-image: url("https://static.lenskart.com/owndays/img/cookies-modal/close-icon.svg"); position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .cookies-modal__settings__body { width: 100%; height: calc(100% - 147px); padding: 22px 30px 50px; overflow-x: hidden; overflow-y: scroll; } .cookies-modal__settings__desc p { color: black; line-height: 20px; font-family: "Founders Grotesk", sans-serif; font-weight: lighter !important; letter-spacing: 0; line-height: 20px; font-size: 14px; margin-bottom: 0; } .cookies-modal__settings__desc p:nth-child(2) { margin-top: 10px; padding-bottom: 20px; } .cookies-modal__settings__desc a { color: black; text-decoration: underline; } .cookies-modal__settings__desc a:hover { color: black; } @media (min-width: 1024px) { .cookies-modal__settings__desc a:hover { cursor: pointer; } } .cookies-modal__settings__list { list-style-type: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px; } .cookies-modal__settings__item__header, .cookies-modal__settings__item__desc { background-color: #f4f4f4; border-radius: .35em; } .cookies-modal__settings__item__header { padding: 0 10px 0 0; letter-spacing: 0; position: relative; } .cookies-modal__settings__item__name { position: relative; width: 88%; height: auto; padding: 20px 0 20px 35px; } @media (min-width: 1024px) { .cookies-modal__settings__item__name { cursor: pointer; } } .cookies-modal__settings__item__name::before { content: ''; position: absolute; border: solid #2d4156; border-width: 0 2px 2px 0; top: 48%; left: 17px; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); margin-right: 15px; padding: .2em; } .cookies-modal__settings__item__name h3 { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; margin: 0; font-family: "Founders Grotesk", sans-serif; font-size: 13.3px; letter-spacing: 0; color: black; } .cookies-modal__settings__item__desc { border-top-left-radius: 0; border-top-right-radius: 0; } .cookies-modal__settings__item__desc p { font-family: "Founders Grotesk", sans-serif; font-size: 12px; line-height: 20px; margin-top: 0; padding: .2em 15px 27px; letter-spacing: 0; color: black; margin-bottom: 0; } .cookies-modal__settings__item__toggle { position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); width: 52px; height: 24px; border-radius: 4em; } .cookies-modal__settings__item__toggle input { opacity: 0; width: 0; height: 0; } @media (min-width: 1024px) { .cookies-modal__settings__item__toggle input { cursor: pointer; } } .cookies-modal__settings__item__toggle--slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 34px; background-color: #adadad; } @media (min-width: 1024px) { .cookies-modal__settings__item__toggle--slider { cursor: pointer; } } .cookies-modal__settings__item__toggle--slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 4px; bottom: 3px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 50%; z-index: 1; } .cookies-modal__settings__item__toggle input:checked + .cookies-modal__settings__item__toggle--slider { background-color: #516075; } .cookies-modal__settings__item__toggle input:checked + .cookies-modal__settings__item__toggle--slider:before { -webkit-transform: translateX(26px); transform: translateX(26px); } .cookies-modal__settings__item__toggle input:disabled + .cookies-modal__settings__item__toggle--slider { cursor: not-allowed; background-color: #d9d9d9; } .cookies-modal__settings__item__toggle--on { position: relative; } .cookies-modal__settings__item__toggle--on::before { content: ""; margin: 0 auto; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: solid #ecf2fa; border-width: 0 2px 2px 0; display: inline-block; left: .75em; padding: .1em .1em .45em; top: 6px; font-size: 16px; } .cookies-modal__settings__item__toggle--off { position: relative; right: -90%; } @supports (-webkit-backdrop-filter: blur(0)) { .cookies-modal__settings__item__toggle--off { right: -45%; } } .cookies-modal__settings__item__toggle--off::before, .cookies-modal__settings__item__toggle--off::after { background: #ecf2fa; content: " "; display: block; margin: 0 auto; position: absolute; right: .7em; top: .42em; -webkit-transform-origin: center; transform-origin: center; width: 1.4px; height: 12px; } .cookies-modal__settings__item__toggle--off::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .cookies-modal__settings__item__toggle--off::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .cookies-modal__settings__footer { width: 100%; max-width: 758px; height: 87px; padding: 20px 35px; display: block; margin: 0 auto; } .cookies-modal__settings__footer > .cookies-modal__button { width: 100%; height: 100%; } @media (min-width: 512px) { .cookies-modal__settings { background-color: rgba(0, 0, 0, .5); } .cookies-modal__settings__content { height: calc(100% - 2.5em); max-height: 530px; position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cookies-modal__settings__footer { max-width: 300px; margin: 0; padding: 20px 30px; } } .cookies-modal__remove-border-bottom-radius { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .cookies-modal__expand .cookies-modal__settings__item__name::before { top: 54%; -webkit-transform: translateY(-50%) rotate(224deg); transform: translateY(-50%) rotate(224deg); left: 17px; } @charset "UTF-8"; [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{-webkit-transition-duration:50ms;transition-duration:50ms} [data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{-webkit-transition-delay:50ms;transition-delay:50ms} [data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{-webkit-transition-duration:.1s;transition-duration:.1s} [data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{-webkit-transition-delay:.1s;transition-delay:.1s} [data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{-webkit-transition-duration:.15s;transition-duration:.15s} [data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{-webkit-transition-delay:.15s;transition-delay:.15s} [data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{-webkit-transition-duration:.2s;transition-duration:.2s} [data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{-webkit-transition-delay:.2s;transition-delay:.2s} [data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{-webkit-transition-duration:.25s;transition-duration:.25s} [data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{-webkit-transition-delay:.25s;transition-delay:.25s} [data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{-webkit-transition-duration:.3s;transition-duration:.3s} [data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{-webkit-transition-delay:.3s;transition-delay:.3s} [data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{-webkit-transition-duration:.35s;transition-duration:.35s} [data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{-webkit-transition-delay:.35s;transition-delay:.35s} [data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{-webkit-transition-duration:.4s;transition-duration:.4s} [data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{-webkit-transition-delay:.4s;transition-delay:.4s} [data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{-webkit-transition-duration:.45s;transition-duration:.45s} [data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{-webkit-transition-delay:.45s;transition-delay:.45s} [data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{-webkit-transition-duration:.5s;transition-duration:.5s} [data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{-webkit-transition-delay:.5s;transition-delay:.5s} [data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{-webkit-transition-duration:.55s;transition-duration:.55s} [data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{-webkit-transition-delay:.55s;transition-delay:.55s} [data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{-webkit-transition-duration:.6s;transition-duration:.6s} [data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{-webkit-transition-delay:.6s;transition-delay:.6s} [data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{-webkit-transition-duration:.65s;transition-duration:.65s} [data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{-webkit-transition-delay:.65s;transition-delay:.65s} [data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{-webkit-transition-duration:.7s;transition-duration:.7s} [data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{-webkit-transition-delay:.7s;transition-delay:.7s} [data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{-webkit-transition-duration:.75s;transition-duration:.75s} [data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{-webkit-transition-delay:.75s;transition-delay:.75s} [data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{-webkit-transition-duration:.8s;transition-duration:.8s} [data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{-webkit-transition-delay:.8s;transition-delay:.8s} [data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{-webkit-transition-duration:.85s;transition-duration:.85s} [data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{-webkit-transition-delay:.85s;transition-delay:.85s} [data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{-webkit-transition-duration:.9s;transition-duration:.9s} [data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{-webkit-transition-delay:.9s;transition-delay:.9s} [data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{-webkit-transition-duration:.95s;transition-duration:.95s} [data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{-webkit-transition-delay:.95s;transition-delay:.95s} [data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{-webkit-transition-duration:1s;transition-duration:1s} [data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{-webkit-transition-delay:1s;transition-delay:1s} [data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{-webkit-transition-duration:1.05s;transition-duration:1.05s} [data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{-webkit-transition-delay:1.05s;transition-delay:1.05s} [data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{-webkit-transition-duration:1.1s;transition-duration:1.1s} [data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{-webkit-transition-delay:1.1s;transition-delay:1.1s} [data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{-webkit-transition-duration:1.15s;transition-duration:1.15s} [data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{-webkit-transition-delay:1.15s;transition-delay:1.15s} [data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{-webkit-transition-duration:1.2s;transition-duration:1.2s} [data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{-webkit-transition-delay:1.2s;transition-delay:1.2s} [data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{-webkit-transition-duration:1.25s;transition-duration:1.25s} [data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{-webkit-transition-delay:1.25s;transition-delay:1.25s} [data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{-webkit-transition-duration:1.3s;transition-duration:1.3s} [data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{-webkit-transition-delay:1.3s;transition-delay:1.3s} [data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{-webkit-transition-duration:1.35s;transition-duration:1.35s} [data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{-webkit-transition-delay:1.35s;transition-delay:1.35s} [data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{-webkit-transition-duration:1.4s;transition-duration:1.4s} [data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{-webkit-transition-delay:1.4s;transition-delay:1.4s} [data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{-webkit-transition-duration:1.45s;transition-duration:1.45s} [data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{-webkit-transition-delay:1.45s;transition-delay:1.45s} [data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{-webkit-transition-duration:1.5s;transition-duration:1.5s} [data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{-webkit-transition-delay:1.5s;transition-delay:1.5s} [data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{-webkit-transition-duration:1.55s;transition-duration:1.55s} [data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{-webkit-transition-delay:1.55s;transition-delay:1.55s} [data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{-webkit-transition-duration:1.6s;transition-duration:1.6s} [data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{-webkit-transition-delay:1.6s;transition-delay:1.6s} [data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{-webkit-transition-duration:1.65s;transition-duration:1.65s} [data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{-webkit-transition-delay:1.65s;transition-delay:1.65s} [data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{-webkit-transition-duration:1.7s;transition-duration:1.7s} [data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{-webkit-transition-delay:1.7s;transition-delay:1.7s} [data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{-webkit-transition-duration:1.75s;transition-duration:1.75s} [data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{-webkit-transition-delay:1.75s;transition-delay:1.75s} [data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{-webkit-transition-duration:1.8s;transition-duration:1.8s} [data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{-webkit-transition-delay:1.8s;transition-delay:1.8s} [data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{-webkit-transition-duration:1.85s;transition-duration:1.85s} [data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{-webkit-transition-delay:1.85s;transition-delay:1.85s} [data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{-webkit-transition-duration:1.9s;transition-duration:1.9s} [data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{-webkit-transition-delay:1.9s;transition-delay:1.9s} [data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{-webkit-transition-duration:1.95s;transition-duration:1.95s} [data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{-webkit-transition-delay:1.95s;transition-delay:1.95s} [data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{-webkit-transition-duration:2s;transition-duration:2s} [data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{-webkit-transition-delay:2s;transition-delay:2s} [data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{-webkit-transition-duration:2.05s;transition-duration:2.05s} [data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{-webkit-transition-delay:2.05s;transition-delay:2.05s} [data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{-webkit-transition-duration:2.1s;transition-duration:2.1s} [data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{-webkit-transition-delay:2.1s;transition-delay:2.1s} [data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{-webkit-transition-duration:2.15s;transition-duration:2.15s} [data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{-webkit-transition-delay:2.15s;transition-delay:2.15s} [data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{-webkit-transition-duration:2.2s;transition-duration:2.2s} [data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{-webkit-transition-delay:2.2s;transition-delay:2.2s} [data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{-webkit-transition-duration:2.25s;transition-duration:2.25s} [data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{-webkit-transition-delay:2.25s;transition-delay:2.25s} [data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{-webkit-transition-duration:2.3s;transition-duration:2.3s} [data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{-webkit-transition-delay:2.3s;transition-delay:2.3s} [data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{-webkit-transition-duration:2.35s;transition-duration:2.35s} [data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{-webkit-transition-delay:2.35s;transition-delay:2.35s} [data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{-webkit-transition-duration:2.4s;transition-duration:2.4s} [data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{-webkit-transition-delay:2.4s;transition-delay:2.4s} [data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{-webkit-transition-duration:2.45s;transition-duration:2.45s} [data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{-webkit-transition-delay:2.45s;transition-delay:2.45s} [data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{-webkit-transition-duration:2.5s;transition-duration:2.5s} [data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{-webkit-transition-delay:2.5s;transition-delay:2.5s} [data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{-webkit-transition-duration:2.55s;transition-duration:2.55s} [data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{-webkit-transition-delay:2.55s;transition-delay:2.55s} [data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{-webkit-transition-duration:2.6s;transition-duration:2.6s} [data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{-webkit-transition-delay:2.6s;transition-delay:2.6s} [data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{-webkit-transition-duration:2.65s;transition-duration:2.65s} [data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{-webkit-transition-delay:2.65s;transition-delay:2.65s} [data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{-webkit-transition-duration:2.7s;transition-duration:2.7s} [data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{-webkit-transition-delay:2.7s;transition-delay:2.7s} [data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{-webkit-transition-duration:2.75s;transition-duration:2.75s} [data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{-webkit-transition-delay:2.75s;transition-delay:2.75s} [data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{-webkit-transition-duration:2.8s;transition-duration:2.8s} [data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{-webkit-transition-delay:2.8s;transition-delay:2.8s} [data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{-webkit-transition-duration:2.85s;transition-duration:2.85s} [data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{-webkit-transition-delay:2.85s;transition-delay:2.85s} [data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{-webkit-transition-duration:2.9s;transition-duration:2.9s} [data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{-webkit-transition-delay:2.9s;transition-delay:2.9s} [data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{-webkit-transition-duration:2.95s;transition-duration:2.95s} [data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{-webkit-transition-delay:2.95s;transition-delay:2.95s} [data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{-webkit-transition-duration:3s;transition-duration:3s} [data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{-webkit-transition-delay:0;transition-delay:0} [data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{-webkit-transition-delay:3s;transition-delay:3s} [data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.25,.25,.75,.75);transition-timing-function:cubic-bezier(.25,.25,.75,.75)} [data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{-webkit-transition-timing-function:ease;transition-timing-function:ease} [data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in} [data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out} [data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out} [data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.6,-.28,.735,.045);transition-timing-function:cubic-bezier(.6,-.28,.735,.045)} [data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);transition-timing-function:cubic-bezier(.175,.885,.32,1.275)} [data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)} [data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.47,0,.745,.715);transition-timing-function:cubic-bezier(.47,0,.745,.715)} [data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.39,.575,.565,1);transition-timing-function:cubic-bezier(.39,.575,.565,1)} [data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.445,.05,.55,.95);transition-timing-function:cubic-bezier(.445,.05,.55,.95)} [data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.55,.085,.68,.53);transition-timing-function:cubic-bezier(.55,.085,.68,.53)} [data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94)} [data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.455,.03,.515,.955);transition-timing-function:cubic-bezier(.455,.03,.515,.955)} [data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.55,.085,.68,.53);transition-timing-function:cubic-bezier(.55,.085,.68,.53)} [data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94)} [data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.455,.03,.515,.955);transition-timing-function:cubic-bezier(.455,.03,.515,.955)} [data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.55,.085,.68,.53);transition-timing-function:cubic-bezier(.55,.085,.68,.53)} [data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94)} [data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{-webkit-transition-timing-function:cubic-bezier(.455,.03,.515,.955);transition-timing-function:cubic-bezier(.455,.03,.515,.955)} [data-aos^=fade][data-aos^=fade]{opacity:0;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform} [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)} [data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)} [data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)} [data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)} [data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)} [data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)} [data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)} [data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)} [data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)} [data-aos^=zoom][data-aos^=zoom]{opacity:0;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform} [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)} [data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)} [data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)} [data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)} [data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)} [data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)} [data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)} [data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)} [data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)} [data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)} [data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)} [data-aos^=slide][data-aos^=slide]{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform} [data-aos^=slide][data-aos^=slide].aos-animate{-webkit-transform:translateZ(0);transform:translateZ(0)} [data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} [data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} [data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} [data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform} [data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)} [data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)} [data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)} [data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)} [data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)} [data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)} [data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)} [data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)} * { font-display: swap; } @font-face { font-family: 'HiraginoMinchoPro'; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/Hiragino-Mincho-ProN-W3.otf") format("otf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'NeuzeitGroBold'; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/NeuzeitGro-Bol.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'NeuzeitGroLig'; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/NeuzeitGro-Lig/NeuzeitGro-Lig.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'NeuzeitGroReg'; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/NeuzeitGro-Reg/NeuzeitGro-Reg.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'SourceSansProRegular'; src: url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.eot"); src: url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.ttf") format("truetype"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.svg#SourceSansProRegular") format("svg"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'SourceSansProSemibold'; src: url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.eot"); src: url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.ttf") format("truetype"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.svg#SourceSansProSemibold") format("svg"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansRegular'; src: url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.eot"); src: url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Heavy'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Heavy.woff") format("woff"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Heavy.otf") format("otf"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Heavy.eot") format("eot"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Heavy.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Medium'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Medium.woff") format("woff"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Medium.otf") format("otf"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Medium.eot") format("eot"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Medium.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Book'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Book.woff") format("woff"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Book.otf") format("otf"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Book.eot") format("eot"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Book.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Conv_FuturaStd-Light'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Light.eot"); src: local("☺"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Light.woff") format("woff"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Light.ttf") format("truetype"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Light.svg") format("svg"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Rajdhani-Medium'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/Rajdhani-Medium.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Rajdhani-Regular'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/Rajdhani-Regular.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Black'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Black.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Black.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Black.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Black.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Bold'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Bold.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Bold.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Bold.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Bold.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Extrablack'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Extrablack.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Extrablack.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Extrablack.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Extrablack.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Hairline'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Hairline.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Hairline.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Hairline.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Hairline.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Medium'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Medium.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Medium.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Medium.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Medium.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Regular'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Regular.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Regular.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Regular.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Regular.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Lenskart-Serif-Book'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Lenskart-Serif-Normal'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Lenskart-Serif-UltraLight'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSerif-Book'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSerif-Normal'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSerif-UltraLight'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Light.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Regular.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Medium.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Semibold.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Bold.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'AXIS Std'; src: url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Light.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Light.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'AXIS Std'; src: url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Regular.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'AXIS Std'; src: url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Medium.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ @font-face { font-family: 'FontAwesome'; src: url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.eot?v=4.7.0"); src: url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; font-display: swap; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-lg { font-size: 1.33333333em; line-height: .75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.28571429em; text-align: center; } .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: .14285714em; text-align: center; } .fa-li.fa-lg { left: -1.85714286em; } .fa-border { padding: .2em .25em .15em; border: solid .08em #eee; border-radius: .1em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right { margin-left: .3em; } .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { -webkit-filter: none; filter: none; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } .fa-glass:before { content: "\f000"; } .fa-music:before { content: "\f001"; } .fa-search:before { content: "\f002"; } .fa-envelope-o:before { content: "\f003"; } .fa-heart:before { content: "\f004"; } .fa-star:before { content: "\f005"; } .fa-star-o:before { content: "\f006"; } .fa-user:before { content: "\f007"; } .fa-film:before { content: "\f008"; } .fa-th-large:before { content: "\f009"; } .fa-th:before { content: "\f00a"; } .fa-th-list:before { content: "\f00b"; } .fa-check:before { content: "\f00c"; } .fa-remove:before, .fa-close:before, .fa-times:before { content: "\f00d"; } .fa-search-plus:before { content: "\f00e"; } .fa-search-minus:before { content: "\f010"; } .fa-power-off:before { content: "\f011"; } .fa-signal:before { content: "\f012"; } .fa-gear:before, .fa-cog:before { content: "\f013"; } .fa-trash-o:before { content: "\f014"; } .fa-home:before { content: "\f015"; } .fa-file-o:before { content: "\f016"; } .fa-clock-o:before { content: "\f017"; } .fa-road:before { content: "\f018"; } .fa-download:before { content: "\f019"; } .fa-arrow-circle-o-down:before { content: "\f01a"; } .fa-arrow-circle-o-up:before { content: "\f01b"; } .fa-inbox:before { content: "\f01c"; } .fa-play-circle-o:before { content: "\f01d"; } .fa-rotate-right:before, .fa-repeat:before { content: "\f01e"; } .fa-refresh:before { content: "\f021"; } .fa-list-alt:before { content: "\f022"; } .fa-lock:before { content: "\f023"; } .fa-flag:before { content: "\f024"; } .fa-headphones:before { content: "\f025"; } .fa-volume-off:before { content: "\f026"; } .fa-volume-down:before { content: "\f027"; } .fa-volume-up:before { content: "\f028"; } .fa-qrcode:before { content: "\f029"; } .fa-barcode:before { content: "\f02a"; } .fa-tag:before { content: "\f02b"; } .fa-tags:before { content: "\f02c"; } .fa-book:before { content: "\f02d"; } .fa-bookmark:before { content: "\f02e"; } .fa-print:before { content: "\f02f"; } .fa-camera:before { content: "\f030"; } .fa-font:before { content: "\f031"; } .fa-bold:before { content: "\f032"; } .fa-italic:before { content: "\f033"; } .fa-text-height:before { content: "\f034"; } .fa-text-width:before { content: "\f035"; } .fa-align-left:before { content: "\f036"; } .fa-align-center:before { content: "\f037"; } .fa-align-right:before { content: "\f038"; } .fa-align-justify:before { content: "\f039"; } .fa-list:before { content: "\f03a"; } .fa-dedent:before, .fa-outdent:before { content: "\f03b"; } .fa-indent:before { content: "\f03c"; } .fa-video-camera:before { content: "\f03d"; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: "\f03e"; } .fa-pencil:before { content: "\f040"; } .fa-map-marker:before { content: "\f041"; } .fa-adjust:before { content: "\f042"; } .fa-tint:before { content: "\f043"; } .fa-edit:before, .fa-pencil-square-o:before { content: "\f044"; } .fa-share-square-o:before { content: "\f045"; } .fa-check-square-o:before { content: "\f046"; } .fa-arrows:before { content: "\f047"; } .fa-step-backward:before { content: "\f048"; } .fa-fast-backward:before { content: "\f049"; } .fa-backward:before { content: "\f04a"; } .fa-play:before { content: "\f04b"; } .fa-pause:before { content: "\f04c"; } .fa-stop:before { content: "\f04d"; } .fa-forward:before { content: "\f04e"; } .fa-fast-forward:before { content: "\f050"; } .fa-step-forward:before { content: "\f051"; } .fa-eject:before { content: "\f052"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-plus-circle:before { content: "\f055"; } .fa-minus-circle:before { content: "\f056"; } .fa-times-circle:before { content: "\f057"; } .fa-check-circle:before { content: "\f058"; } .fa-question-circle:before { content: "\f059"; } .fa-info-circle:before { content: "\f05a"; } .fa-crosshairs:before { content: "\f05b"; } .fa-times-circle-o:before { content: "\f05c"; } .fa-check-circle-o:before { content: "\f05d"; } .fa-ban:before { content: "\f05e"; } .fa-arrow-left:before { content: "\f060"; } .fa-arrow-right:before { content: "\f061"; } .fa-arrow-up:before { content: "\f062"; } .fa-arrow-down:before { content: "\f063"; } .fa-mail-forward:before, .fa-share:before { content: "\f064"; } .fa-expand:before { content: "\f065"; } .fa-compress:before { content: "\f066"; } .fa-plus:before { content: "\f067"; } .fa-minus:before { content: "\f068"; } .fa-asterisk:before { content: "\f069"; } .fa-exclamation-circle:before { content: "\f06a"; } .fa-gift:before { content: "\f06b"; } .fa-leaf:before { content: "\f06c"; } .fa-fire:before { content: "\f06d"; } .fa-eye:before { content: "\f06e"; } .fa-eye-slash:before { content: "\f070"; } .fa-warning:before, .fa-exclamation-triangle:before { content: "\f071"; } .fa-plane:before { content: "\f072"; } .fa-calendar:before { content: "\f073"; } .fa-random:before { content: "\f074"; } .fa-comment:before { content: "\f075"; } .fa-magnet:before { content: "\f076"; } .fa-chevron-up:before { content: "\f077"; } .fa-chevron-down:before { content: "\f078"; } .fa-retweet:before { content: "\f079"; } .fa-shopping-cart:before { content: "\f07a"; } .fa-folder:before { content: "\f07b"; } .fa-folder-open:before { content: "\f07c"; } .fa-arrows-v:before { content: "\f07d"; } .fa-arrows-h:before { content: "\f07e"; } .fa-bar-chart-o:before, .fa-bar-chart:before { content: "\f080"; } .fa-twitter-square:before { content: "\f081"; } .fa-facebook-square:before { content: "\f082"; } .fa-camera-retro:before { content: "\f083"; } .fa-key:before { content: "\f084"; } .fa-gears:before, .fa-cogs:before { content: "\f085"; } .fa-comments:before { content: "\f086"; } .fa-thumbs-o-up:before { content: "\f087"; } .fa-thumbs-o-down:before { content: "\f088"; } .fa-star-half:before { content: "\f089"; } .fa-heart-o:before { content: "\f08a"; } .fa-sign-out:before { content: "\f08b"; } .fa-linkedin-square:before { content: "\f08c"; } .fa-thumb-tack:before { content: "\f08d"; } .fa-external-link:before { content: "\f08e"; } .fa-sign-in:before { content: "\f090"; } .fa-trophy:before { content: "\f091"; } .fa-github-square:before { content: "\f092"; } .fa-upload:before { content: "\f093"; } .fa-lemon-o:before { content: "\f094"; } .fa-phone:before { content: "\f095"; } .fa-square-o:before { content: "\f096"; } .fa-bookmark-o:before { content: "\f097"; } .fa-phone-square:before { content: "\f098"; } .fa-twitter:before { content: "\f099"; } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } .fa-github:before { content: "\f09b"; } .fa-unlock:before { content: "\f09c"; } .fa-credit-card:before { content: "\f09d"; } .fa-feed:before, .fa-rss:before { content: "\f09e"; } .fa-hdd-o:before { content: "\f0a0"; } .fa-bullhorn:before { content: "\f0a1"; } .fa-bell:before { content: "\f0f3"; } .fa-certificate:before { content: "\f0a3"; } .fa-hand-o-right:before { content: "\f0a4"; } .fa-hand-o-left:before { content: "\f0a5"; } .fa-hand-o-up:before { content: "\f0a6"; } .fa-hand-o-down:before { content: "\f0a7"; } .fa-arrow-circle-left:before { content: "\f0a8"; } .fa-arrow-circle-right:before { content: "\f0a9"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-arrow-circle-down:before { content: "\f0ab"; } .fa-globe:before { content: "\f0ac"; } .fa-wrench:before { content: "\f0ad"; } .fa-tasks:before { content: "\f0ae"; } .fa-filter:before { content: "\f0b0"; } .fa-briefcase:before { content: "\f0b1"; } .fa-arrows-alt:before { content: "\f0b2"; } .fa-group:before, .fa-users:before { content: "\f0c0"; } .fa-chain:before, .fa-link:before { content: "\f0c1"; } .fa-cloud:before { content: "\f0c2"; } .fa-flask:before { content: "\f0c3"; } .fa-cut:before, .fa-scissors:before { content: "\f0c4"; } .fa-copy:before, .fa-files-o:before { content: "\f0c5"; } .fa-paperclip:before { content: "\f0c6"; } .fa-save:before, .fa-floppy-o:before { content: "\f0c7"; } .fa-square:before { content: "\f0c8"; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: "\f0c9"; } .fa-list-ul:before { content: "\f0ca"; } .fa-list-ol:before { content: "\f0cb"; } .fa-strikethrough:before { content: "\f0cc"; } .fa-underline:before { content: "\f0cd"; } .fa-table:before { content: "\f0ce"; } .fa-magic:before { content: "\f0d0"; } .fa-truck:before { content: "\f0d1"; } .fa-pinterest:before { content: "\f0d2"; } .fa-pinterest-square:before { content: "\f0d3"; } .fa-google-plus-square:before { content: "\f0d4"; } .fa-google-plus:before { content: "\f0d5"; } .fa-money:before { content: "\f0d6"; } .fa-caret-down:before { content: "\f0d7"; } .fa-caret-up:before { content: "\f0d8"; } .fa-caret-left:before { content: "\f0d9"; } .fa-caret-right:before { content: "\f0da"; } .fa-columns:before { content: "\f0db"; } .fa-unsorted:before, .fa-sort:before { content: "\f0dc"; } .fa-sort-down:before, .fa-sort-desc:before { content: "\f0dd"; } .fa-sort-up:before, .fa-sort-asc:before { content: "\f0de"; } .fa-envelope:before { content: "\f0e0"; } .fa-linkedin:before { content: "\f0e1"; } .fa-rotate-left:before, .fa-undo:before { content: "\f0e2"; } .fa-legal:before, .fa-gavel:before { content: "\f0e3"; } .fa-dashboard:before, .fa-tachometer:before { content: "\f0e4"; } .fa-comment-o:before { content: "\f0e5"; } .fa-comments-o:before { content: "\f0e6"; } .fa-flash:before, .fa-bolt:before { content: "\f0e7"; } .fa-sitemap:before { content: "\f0e8"; } .fa-umbrella:before { content: "\f0e9"; } .fa-paste:before, .fa-clipboard:before { content: "\f0ea"; } .fa-lightbulb-o:before { content: "\f0eb"; } .fa-exchange:before { content: "\f0ec"; } .fa-cloud-download:before { content: "\f0ed"; } .fa-cloud-upload:before { content: "\f0ee"; } .fa-user-md:before { content: "\f0f0"; } .fa-stethoscope:before { content: "\f0f1"; } .fa-suitcase:before { content: "\f0f2"; } .fa-bell-o:before { content: "\f0a2"; } .fa-coffee:before { content: "\f0f4"; } .fa-cutlery:before { content: "\f0f5"; } .fa-file-text-o:before { content: "\f0f6"; } .fa-building-o:before { content: "\f0f7"; } .fa-hospital-o:before { content: "\f0f8"; } .fa-ambulance:before { content: "\f0f9"; } .fa-medkit:before { content: "\f0fa"; } .fa-fighter-jet:before { content: "\f0fb"; } .fa-beer:before { content: "\f0fc"; } .fa-h-square:before { content: "\f0fd"; } .fa-plus-square:before { content: "\f0fe"; } .fa-angle-double-left:before { content: "\f100"; } .fa-angle-double-right:before { content: "\f101"; } .fa-angle-double-up:before { content: "\f102"; } .fa-angle-double-down:before { content: "\f103"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-angle-down:before { content: "\f107"; } .fa-desktop:before { content: "\f108"; } .fa-laptop:before { content: "\f109"; } .fa-tablet:before { content: "\f10a"; } .fa-mobile-phone:before, .fa-mobile:before { content: "\f10b"; } .fa-circle-o:before { content: "\f10c"; } .fa-quote-left:before { content: "\f10d"; } .fa-quote-right:before { content: "\f10e"; } .fa-spinner:before { content: "\f110"; } .fa-circle:before { content: "\f111"; } .fa-mail-reply:before, .fa-reply:before { content: "\f112"; } .fa-github-alt:before { content: "\f113"; } .fa-folder-o:before { content: "\f114"; } .fa-folder-open-o:before { content: "\f115"; } .fa-smile-o:before { content: "\f118"; } .fa-frown-o:before { content: "\f119"; } .fa-meh-o:before { content: "\f11a"; } .fa-gamepad:before { content: "\f11b"; } .fa-keyboard-o:before { content: "\f11c"; } .fa-flag-o:before { content: "\f11d"; } .fa-flag-checkered:before { content: "\f11e"; } .fa-terminal:before { content: "\f120"; } .fa-code:before { content: "\f121"; } .fa-mail-reply-all:before, .fa-reply-all:before { content: "\f122"; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: "\f123"; } .fa-location-arrow:before { content: "\f124"; } .fa-crop:before { content: "\f125"; } .fa-code-fork:before { content: "\f126"; } .fa-unlink:before, .fa-chain-broken:before { content: "\f127"; } .fa-question:before { content: "\f128"; } .fa-info:before { content: "\f129"; } .fa-exclamation:before { content: "\f12a"; } .fa-superscript:before { content: "\f12b"; } .fa-subscript:before { content: "\f12c"; } .fa-eraser:before { content: "\f12d"; } .fa-puzzle-piece:before { content: "\f12e"; } .fa-microphone:before { content: "\f130"; } .fa-microphone-slash:before { content: "\f131"; } .fa-shield:before { content: "\f132"; } .fa-calendar-o:before { content: "\f133"; } .fa-fire-extinguisher:before { content: "\f134"; } .fa-rocket:before { content: "\f135"; } .fa-maxcdn:before { content: "\f136"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-html5:before { content: "\f13b"; } .fa-css3:before { content: "\f13c"; } .fa-anchor:before { content: "\f13d"; } .fa-unlock-alt:before { content: "\f13e"; } .fa-bullseye:before { content: "\f140"; } .fa-ellipsis-h:before { content: "\f141"; } .fa-ellipsis-v:before { content: "\f142"; } .fa-rss-square:before { content: "\f143"; } .fa-play-circle:before { content: "\f144"; } .fa-ticket:before { content: "\f145"; } .fa-minus-square:before { content: "\f146"; } .fa-minus-square-o:before { content: "\f147"; } .fa-level-up:before { content: "\f148"; } .fa-level-down:before { content: "\f149"; } .fa-check-square:before { content: "\f14a"; } .fa-pencil-square:before { content: "\f14b"; } .fa-external-link-square:before { content: "\f14c"; } .fa-share-square:before { content: "\f14d"; } .fa-compass:before { content: "\f14e"; } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: "\f150"; } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: "\f151"; } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: "\f152"; } .fa-euro:before, .fa-eur:before { content: "\f153"; } .fa-gbp:before { content: "\f154"; } .fa-dollar:before, .fa-usd:before { content: "\f155"; } .fa-rupee:before, .fa-inr:before { content: "\f156"; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: "\f157"; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: "\f158"; } .fa-won:before, .fa-krw:before { content: "\f159"; } .fa-bitcoin:before, .fa-btc:before { content: "\f15a"; } .fa-file:before { content: "\f15b"; } .fa-file-text:before { content: "\f15c"; } .fa-sort-alpha-asc:before { content: "\f15d"; } .fa-sort-alpha-desc:before { content: "\f15e"; } .fa-sort-amount-asc:before { content: "\f160"; } .fa-sort-amount-desc:before { content: "\f161"; } .fa-sort-numeric-asc:before { content: "\f162"; } .fa-sort-numeric-desc:before { content: "\f163"; } .fa-thumbs-up:before { content: "\f164"; } .fa-thumbs-down:before { content: "\f165"; } .fa-youtube-square:before { content: "\f166"; } .fa-youtube:before { content: "\f167"; } .fa-xing:before { content: "\f168"; } .fa-xing-square:before { content: "\f169"; } .fa-youtube-play:before { content: "\f16a"; } .fa-dropbox:before { content: "\f16b"; } .fa-stack-overflow:before { content: "\f16c"; } .fa-instagram:before { content: "\f16d"; } .fa-flickr:before { content: "\f16e"; } .fa-adn:before { content: "\f170"; } .fa-bitbucket:before { content: "\f171"; } .fa-bitbucket-square:before { content: "\f172"; } .fa-tumblr:before { content: "\f173"; } .fa-tumblr-square:before { content: "\f174"; } .fa-long-arrow-down:before { content: "\f175"; } .fa-long-arrow-up:before { content: "\f176"; } .fa-long-arrow-left:before { content: "\f177"; } .fa-long-arrow-right:before { content: "\f178"; } .fa-apple:before { content: "\f179"; } .fa-windows:before { content: "\f17a"; } .fa-android:before { content: "\f17b"; } .fa-linux:before { content: "\f17c"; } .fa-dribbble:before { content: "\f17d"; } .fa-skype:before { content: "\f17e"; } .fa-foursquare:before { content: "\f180"; } .fa-trello:before { content: "\f181"; } .fa-female:before { content: "\f182"; } .fa-male:before { content: "\f183"; } .fa-gittip:before, .fa-gratipay:before { content: "\f184"; } .fa-sun-o:before { content: "\f185"; } .fa-moon-o:before { content: "\f186"; } .fa-archive:before { content: "\f187"; } .fa-bug:before { content: "\f188"; } .fa-vk:before { content: "\f189"; } .fa-weibo:before { content: "\f18a"; } .fa-renren:before { content: "\f18b"; } .fa-pagelines:before { content: "\f18c"; } .fa-stack-exchange:before { content: "\f18d"; } .fa-arrow-circle-o-right:before { content: "\f18e"; } .fa-arrow-circle-o-left:before { content: "\f190"; } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: "\f191"; } .fa-dot-circle-o:before { content: "\f192"; } .fa-wheelchair:before { content: "\f193"; } .fa-vimeo-square:before { content: "\f194"; } .fa-turkish-lira:before, .fa-try:before { content: "\f195"; } .fa-plus-square-o:before { content: "\f196"; } .fa-space-shuttle:before { content: "\f197"; } .fa-slack:before { content: "\f198"; } .fa-envelope-square:before { content: "\f199"; } .fa-wordpress:before { content: "\f19a"; } .fa-openid:before { content: "\f19b"; } .fa-institution:before, .fa-bank:before, .fa-university:before { content: "\f19c"; } .fa-mortar-board:before, .fa-graduation-cap:before { content: "\f19d"; } .fa-yahoo:before { content: "\f19e"; } .fa-google:before { content: "\f1a0"; } .fa-reddit:before { content: "\f1a1"; } .fa-reddit-square:before { content: "\f1a2"; } .fa-stumbleupon-circle:before { content: "\f1a3"; } .fa-stumbleupon:before { content: "\f1a4"; } .fa-delicious:before { content: "\f1a5"; } .fa-digg:before { content: "\f1a6"; } .fa-pied-piper-pp:before { content: "\f1a7"; } .fa-pied-piper-alt:before { content: "\f1a8"; } .fa-drupal:before { content: "\f1a9"; } .fa-joomla:before { content: "\f1aa"; } .fa-language:before { content: "\f1ab"; } .fa-fax:before { content: "\f1ac"; } .fa-building:before { content: "\f1ad"; } .fa-child:before { content: "\f1ae"; } .fa-paw:before { content: "\f1b0"; } .fa-spoon:before { content: "\f1b1"; } .fa-cube:before { content: "\f1b2"; } .fa-cubes:before { content: "\f1b3"; } .fa-behance:before { content: "\f1b4"; } .fa-behance-square:before { content: "\f1b5"; } .fa-steam:before { content: "\f1b6"; } .fa-steam-square:before { content: "\f1b7"; } .fa-recycle:before { content: "\f1b8"; } .fa-automobile:before, .fa-car:before { content: "\f1b9"; } .fa-cab:before, .fa-taxi:before { content: "\f1ba"; } .fa-tree:before { content: "\f1bb"; } .fa-spotify:before { content: "\f1bc"; } .fa-deviantart:before { content: "\f1bd"; } .fa-soundcloud:before { content: "\f1be"; } .fa-database:before { content: "\f1c0"; } .fa-file-pdf-o:before { content: "\f1c1"; } .fa-file-word-o:before { content: "\f1c2"; } .fa-file-excel-o:before { content: "\f1c3"; } .fa-file-powerpoint-o:before { content: "\f1c4"; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: "\f1c5"; } .fa-file-zip-o:before, .fa-file-archive-o:before { content: "\f1c6"; } .fa-file-sound-o:before, .fa-file-audio-o:before { content: "\f1c7"; } .fa-file-movie-o:before, .fa-file-video-o:before { content: "\f1c8"; } .fa-file-code-o:before { content: "\f1c9"; } .fa-vine:before { content: "\f1ca"; } .fa-codepen:before { content: "\f1cb"; } .fa-jsfiddle:before { content: "\f1cc"; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: "\f1cd"; } .fa-circle-o-notch:before { content: "\f1ce"; } .fa-ra:before, .fa-resistance:before, .fa-rebel:before { content: "\f1d0"; } .fa-ge:before, .fa-empire:before { content: "\f1d1"; } .fa-git-square:before { content: "\f1d2"; } .fa-git:before { content: "\f1d3"; } .fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before { content: "\f1d4"; } .fa-tencent-weibo:before { content: "\f1d5"; } .fa-qq:before { content: "\f1d6"; } .fa-wechat:before, .fa-weixin:before { content: "\f1d7"; } .fa-send:before, .fa-paper-plane:before { content: "\f1d8"; } .fa-send-o:before, .fa-paper-plane-o:before { content: "\f1d9"; } .fa-history:before { content: "\f1da"; } .fa-circle-thin:before { content: "\f1db"; } .fa-header:before { content: "\f1dc"; } .fa-paragraph:before { content: "\f1dd"; } .fa-sliders:before { content: "\f1de"; } .fa-share-alt:before { content: "\f1e0"; } .fa-share-alt-square:before { content: "\f1e1"; } .fa-bomb:before { content: "\f1e2"; } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: "\f1e3"; } .fa-tty:before { content: "\f1e4"; } .fa-binoculars:before { content: "\f1e5"; } .fa-plug:before { content: "\f1e6"; } .fa-slideshare:before { content: "\f1e7"; } .fa-twitch:before { content: "\f1e8"; } .fa-yelp:before { content: "\f1e9"; } .fa-newspaper-o:before { content: "\f1ea"; } .fa-wifi:before { content: "\f1eb"; } .fa-calculator:before { content: "\f1ec"; } .fa-paypal:before { content: "\f1ed"; } .fa-google-wallet:before { content: "\f1ee"; } .fa-cc-visa:before { content: "\f1f0"; } .fa-cc-mastercard:before { content: "\f1f1"; } .fa-cc-discover:before { content: "\f1f2"; } .fa-cc-amex:before { content: "\f1f3"; } .fa-cc-paypal:before { content: "\f1f4"; } .fa-cc-stripe:before { content: "\f1f5"; } .fa-bell-slash:before { content: "\f1f6"; } .fa-bell-slash-o:before { content: "\f1f7"; } .fa-trash:before { content: "\f1f8"; } .fa-copyright:before { content: "\f1f9"; } .fa-at:before { content: "\f1fa"; } .fa-eyedropper:before { content: "\f1fb"; } .fa-paint-brush:before { content: "\f1fc"; } .fa-birthday-cake:before { content: "\f1fd"; } .fa-area-chart:before { content: "\f1fe"; } .fa-pie-chart:before { content: "\f200"; } .fa-line-chart:before { content: "\f201"; } .fa-lastfm:before { content: "\f202"; } .fa-lastfm-square:before { content: "\f203"; } .fa-toggle-off:before { content: "\f204"; } .fa-toggle-on:before { content: "\f205"; } .fa-bicycle:before { content: "\f206"; } .fa-bus:before { content: "\f207"; } .fa-ioxhost:before { content: "\f208"; } .fa-angellist:before { content: "\f209"; } .fa-cc:before { content: "\f20a"; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: "\f20b"; } .fa-meanpath:before { content: "\f20c"; } .fa-buysellads:before { content: "\f20d"; } .fa-connectdevelop:before { content: "\f20e"; } .fa-dashcube:before { content: "\f210"; } .fa-forumbee:before { content: "\f211"; } .fa-leanpub:before { content: "\f212"; } .fa-sellsy:before { content: "\f213"; } .fa-shirtsinbulk:before { content: "\f214"; } .fa-simplybuilt:before { content: "\f215"; } .fa-skyatlas:before { content: "\f216"; } .fa-cart-plus:before { content: "\f217"; } .fa-cart-arrow-down:before { content: "\f218"; } .fa-diamond:before { content: "\f219"; } .fa-ship:before { content: "\f21a"; } .fa-user-secret:before { content: "\f21b"; } .fa-motorcycle:before { content: "\f21c"; } .fa-street-view:before { content: "\f21d"; } .fa-heartbeat:before { content: "\f21e"; } .fa-venus:before { content: "\f221"; } .fa-mars:before { content: "\f222"; } .fa-mercury:before { content: "\f223"; } .fa-intersex:before, .fa-transgender:before { content: "\f224"; } .fa-transgender-alt:before { content: "\f225"; } .fa-venus-double:before { content: "\f226"; } .fa-mars-double:before { content: "\f227"; } .fa-venus-mars:before { content: "\f228"; } .fa-mars-stroke:before { content: "\f229"; } .fa-mars-stroke-v:before { content: "\f22a"; } .fa-mars-stroke-h:before { content: "\f22b"; } .fa-neuter:before { content: "\f22c"; } .fa-genderless:before { content: "\f22d"; } .fa-facebook-official:before { content: "\f230"; } .fa-pinterest-p:before { content: "\f231"; } .fa-whatsapp:before { content: "\f232"; } .fa-server:before { content: "\f233"; } .fa-user-plus:before { content: "\f234"; } .fa-user-times:before { content: "\f235"; } .fa-hotel:before, .fa-bed:before { content: "\f236"; } .fa-viacoin:before { content: "\f237"; } .fa-train:before { content: "\f238"; } .fa-subway:before { content: "\f239"; } .fa-medium:before { content: "\f23a"; } .fa-yc:before, .fa-y-combinator:before { content: "\f23b"; } .fa-optin-monster:before { content: "\f23c"; } .fa-opencart:before { content: "\f23d"; } .fa-expeditedssl:before { content: "\f23e"; } .fa-battery-4:before, .fa-battery:before, .fa-battery-full:before { content: "\f240"; } .fa-battery-3:before, .fa-battery-three-quarters:before { content: "\f241"; } .fa-battery-2:before, .fa-battery-half:before { content: "\f242"; } .fa-battery-1:before, .fa-battery-quarter:before { content: "\f243"; } .fa-battery-0:before, .fa-battery-empty:before { content: "\f244"; } .fa-mouse-pointer:before { content: "\f245"; } .fa-i-cursor:before { content: "\f246"; } .fa-object-group:before { content: "\f247"; } .fa-object-ungroup:before { content: "\f248"; } .fa-sticky-note:before { content: "\f249"; } .fa-sticky-note-o:before { content: "\f24a"; } .fa-cc-jcb:before { content: "\f24b"; } .fa-cc-diners-club:before { content: "\f24c"; } .fa-clone:before { content: "\f24d"; } .fa-balance-scale:before { content: "\f24e"; } .fa-hourglass-o:before { content: "\f250"; } .fa-hourglass-1:before, .fa-hourglass-start:before { content: "\f251"; } .fa-hourglass-2:before, .fa-hourglass-half:before { content: "\f252"; } .fa-hourglass-3:before, .fa-hourglass-end:before { content: "\f253"; } .fa-hourglass:before { content: "\f254"; } .fa-hand-grab-o:before, .fa-hand-rock-o:before { content: "\f255"; } .fa-hand-stop-o:before, .fa-hand-paper-o:before { content: "\f256"; } .fa-hand-scissors-o:before { content: "\f257"; } .fa-hand-lizard-o:before { content: "\f258"; } .fa-hand-spock-o:before { content: "\f259"; } .fa-hand-pointer-o:before { content: "\f25a"; } .fa-hand-peace-o:before { content: "\f25b"; } .fa-trademark:before { content: "\f25c"; } .fa-registered:before { content: "\f25d"; } .fa-creative-commons:before { content: "\f25e"; } .fa-gg:before { content: "\f260"; } .fa-gg-circle:before { content: "\f261"; } .fa-tripadvisor:before { content: "\f262"; } .fa-odnoklassniki:before { content: "\f263"; } .fa-odnoklassniki-square:before { content: "\f264"; } .fa-get-pocket:before { content: "\f265"; } .fa-wikipedia-w:before { content: "\f266"; } .fa-safari:before { content: "\f267"; } .fa-chrome:before { content: "\f268"; } .fa-firefox:before { content: "\f269"; } .fa-opera:before { content: "\f26a"; } .fa-internet-explorer:before { content: "\f26b"; } .fa-tv:before, .fa-television:before { content: "\f26c"; } .fa-contao:before { content: "\f26d"; } .fa-500px:before { content: "\f26e"; } .fa-amazon:before { content: "\f270"; } .fa-calendar-plus-o:before { content: "\f271"; } .fa-calendar-minus-o:before { content: "\f272"; } .fa-calendar-times-o:before { content: "\f273"; } .fa-calendar-check-o:before { content: "\f274"; } .fa-industry:before { content: "\f275"; } .fa-map-pin:before { content: "\f276"; } .fa-map-signs:before { content: "\f277"; } .fa-map-o:before { content: "\f278"; } .fa-map:before { content: "\f279"; } .fa-commenting:before { content: "\f27a"; } .fa-commenting-o:before { content: "\f27b"; } .fa-houzz:before { content: "\f27c"; } .fa-vimeo:before { content: "\f27d"; } .fa-black-tie:before { content: "\f27e"; } .fa-fonticons:before { content: "\f280"; } .fa-reddit-alien:before { content: "\f281"; } .fa-edge:before { content: "\f282"; } .fa-credit-card-alt:before { content: "\f283"; } .fa-codiepie:before { content: "\f284"; } .fa-modx:before { content: "\f285"; } .fa-fort-awesome:before { content: "\f286"; } .fa-usb:before { content: "\f287"; } .fa-product-hunt:before { content: "\f288"; } .fa-mixcloud:before { content: "\f289"; } .fa-scribd:before { content: "\f28a"; } .fa-pause-circle:before { content: "\f28b"; } .fa-pause-circle-o:before { content: "\f28c"; } .fa-stop-circle:before { content: "\f28d"; } .fa-stop-circle-o:before { content: "\f28e"; } .fa-shopping-bag:before { content: "\f290"; } .fa-shopping-basket:before { content: "\f291"; } .fa-hashtag:before { content: "\f292"; } .fa-bluetooth:before { content: "\f293"; } .fa-bluetooth-b:before { content: "\f294"; } .fa-percent:before { content: "\f295"; } .fa-gitlab:before { content: "\f296"; } .fa-wpbeginner:before { content: "\f297"; } .fa-wpforms:before { content: "\f298"; } .fa-envira:before { content: "\f299"; } .fa-universal-access:before { content: "\f29a"; } .fa-wheelchair-alt:before { content: "\f29b"; } .fa-question-circle-o:before { content: "\f29c"; } .fa-blind:before { content: "\f29d"; } .fa-audio-description:before { content: "\f29e"; } .fa-volume-control-phone:before { content: "\f2a0"; } .fa-braille:before { content: "\f2a1"; } .fa-assistive-listening-systems:before { content: "\f2a2"; } .fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before { content: "\f2a3"; } .fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before { content: "\f2a4"; } .fa-glide:before { content: "\f2a5"; } .fa-glide-g:before { content: "\f2a6"; } .fa-signing:before, .fa-sign-language:before { content: "\f2a7"; } .fa-low-vision:before { content: "\f2a8"; } .fa-viadeo:before { content: "\f2a9"; } .fa-viadeo-square:before { content: "\f2aa"; } .fa-snapchat:before { content: "\f2ab"; } .fa-snapchat-ghost:before { content: "\f2ac"; } .fa-snapchat-square:before { content: "\f2ad"; } .fa-pied-piper:before { content: "\f2ae"; } .fa-first-order:before { content: "\f2b0"; } .fa-yoast:before { content: "\f2b1"; } .fa-themeisle:before { content: "\f2b2"; } .fa-google-plus-circle:before, .fa-google-plus-official:before { content: "\f2b3"; } .fa-fa:before, .fa-font-awesome:before { content: "\f2b4"; } .fa-handshake-o:before { content: "\f2b5"; } .fa-envelope-open:before { content: "\f2b6"; } .fa-envelope-open-o:before { content: "\f2b7"; } .fa-linode:before { content: "\f2b8"; } .fa-address-book:before { content: "\f2b9"; } .fa-address-book-o:before { content: "\f2ba"; } .fa-vcard:before, .fa-address-card:before { content: "\f2bb"; } .fa-vcard-o:before, .fa-address-card-o:before { content: "\f2bc"; } .fa-user-circle:before { content: "\f2bd"; } .fa-user-circle-o:before { content: "\f2be"; } .fa-user-o:before { content: "\f2c0"; } .fa-id-badge:before { content: "\f2c1"; } .fa-drivers-license:before, .fa-id-card:before { content: "\f2c2"; } .fa-drivers-license-o:before, .fa-id-card-o:before { content: "\f2c3"; } .fa-quora:before { content: "\f2c4"; } .fa-free-code-camp:before { content: "\f2c5"; } .fa-telegram:before { content: "\f2c6"; } .fa-thermometer-4:before, .fa-thermometer:before, .fa-thermometer-full:before { content: "\f2c7"; } .fa-thermometer-3:before, .fa-thermometer-three-quarters:before { content: "\f2c8"; } .fa-thermometer-2:before, .fa-thermometer-half:before { content: "\f2c9"; } .fa-thermometer-1:before, .fa-thermometer-quarter:before { content: "\f2ca"; } .fa-thermometer-0:before, .fa-thermometer-empty:before { content: "\f2cb"; } .fa-shower:before { content: "\f2cc"; } .fa-bathtub:before, .fa-s15:before, .fa-bath:before { content: "\f2cd"; } .fa-podcast:before { content: "\f2ce"; } .fa-window-maximize:before { content: "\f2d0"; } .fa-window-minimize:before { content: "\f2d1"; } .fa-window-restore:before { content: "\f2d2"; } .fa-times-rectangle:before, .fa-window-close:before { content: "\f2d3"; } .fa-times-rectangle-o:before, .fa-window-close-o:before { content: "\f2d4"; } .fa-bandcamp:before { content: "\f2d5"; } .fa-grav:before { content: "\f2d6"; } .fa-etsy:before { content: "\f2d7"; } .fa-imdb:before { content: "\f2d8"; } .fa-ravelry:before { content: "\f2d9"; } .fa-eercast:before { content: "\f2da"; } .fa-microchip:before { content: "\f2db"; } .fa-snowflake-o:before { content: "\f2dc"; } .fa-superpowers:before { content: "\f2dd"; } .fa-wpexplorer:before { content: "\f2de"; } .fa-meetup:before { content: "\f2e0"; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } .button { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; border-width: 1px; border-style: solid; border-color: #000; color: #000; min-height: 50px; max-height: 50px; font-family: 'Founders Grotesk', sans-serif; font-size: 14px; font-weight: 500; -webkit-transition: all .3s ease; transition: all .3s ease; text-decoration: none; } .button:hover, .button:focus { text-decoration: none; color: #000; border-color: #000; outline: none; } .button--primary, .button--primary:focus { background-color: #000; color: #fff; } .button--primary:hover { background-color: #999; color: #fff; border-color: transparent; } .button--secondary, .button--secondary:hover, .button--secondary:focus { color: #666; border-color: #666; background-color: #fff; } @media (min-width: 1024px) { .button--primdary:hover { color: #fff; background-color: #999; border-color: #999; } .button--primdary:focus { background-color: #000; color: #fff; } .button--secondary:hover { background-color: #666; color: #fff; } .button--secondary:focus { color: #666; background-color: #fff; } } .button-group { display: grid; gap: 16px; } @media (min-width: 768px) { .button-group--2 { grid-template-columns: repeat(2, 1fr); } .button-group--3 { grid-template-columns: repeat(3, 1fr); } .button-group--4 { grid-template-columns: repeat(4, 1fr); } } html { height: 100%; } .btn-focus { outline: none !important; -webkit-box-shadow: none; box-shadow: none; } body { font-family: 'Founders Grotesk', sans-serif; font-size: 13px; line-height: 1.42857; color: #333; background-color: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .seller-label { letter-spacing: 0.8px; } .seller-label { letter-spacing: 0.8px; } .default-filters { max-width: 255px; } .padding--5 { padding: -5px; } .padding-l-5 { padding-left: -5px; } .padding-t-5 { padding-top: -5px; } .padding-r-5 { padding-right: -5px; } .padding-b-5 { padding-bottom: -5px; } .margin--5 { margin: -5px; } .margin-r-5 { margin-right: -5px; } .margin-t-5 { margin-top: -5px; } .margin-b-5 { margin-bottom: -5px; } .margin-l-5 { margin-left: -5px; } .padding--4 { padding: -4px; } .padding-l-4 { padding-left: -4px; } .padding-t-4 { padding-top: -4px; } .padding-r-4 { padding-right: -4px; } .padding-b-4 { padding-bottom: -4px; } .margin--4 { margin: -4px; } .margin-r-4 { margin-right: -4px; } .margin-t-4 { margin-top: -4px; } .margin-b-4 { margin-bottom: -4px; } .margin-l-4 { margin-left: -4px; } .padding--3 { padding: -3px; } .padding-l-3 { padding-left: -3px; } .padding-t-3 { padding-top: -3px; } .padding-r-3 { padding-right: -3px; } .padding-b-3 { padding-bottom: -3px; } .margin--3 { margin: -3px; } .margin-r-3 { margin-right: -3px; } .margin-t-3 { margin-top: -3px; } .margin-b-3 { margin-bottom: -3px; } .margin-l-3 { margin-left: -3px; } .padding--2 { padding: -2px; } .padding-l-2 { padding-left: -2px; } .padding-t-2 { padding-top: -2px; } .padding-r-2 { padding-right: -2px; } .padding-b-2 { padding-bottom: -2px; } .margin--2 { margin: -2px; } .margin-r-2 { margin-right: -2px; } .margin-t-2 { margin-top: -2px; } .margin-b-2 { margin-bottom: -2px; } .margin-l-2 { margin-left: -2px; } .padding--1 { padding: -1px; } .padding-l-1 { padding-left: -1px; } .padding-t-1 { padding-top: -1px; } .padding-r-1 { padding-right: -1px; } .padding-b-1 { padding-bottom: -1px; } .margin--1 { margin: -1px; } .margin-r-1 { margin-right: -1px; } .margin-t-1 { margin-top: -1px; } .margin-b-1 { margin-bottom: -1px; } .margin-l-1 { margin-left: -1px; } .padding-0 { padding: 0px; } .padding-l0 { padding-left: 0px; } .padding-t0 { padding-top: 0px; } .padding-r0 { padding-right: 0px; } .padding-b0 { padding-bottom: 0px; } .margin-0 { margin: 0px; } .margin-r0 { margin-right: 0px; } .margin-t0 { margin-top: 0px; } .margin-b0 { margin-bottom: 0px; } .margin-l0 { margin-left: 0px; } .padding-1 { padding: 1px; } .padding-l1 { padding-left: 1px; } .padding-t1 { padding-top: 1px; } .padding-r1 { padding-right: 1px; } .padding-b1 { padding-bottom: 1px; } .margin-1 { margin: 1px; } .margin-r1 { margin-right: 1px; } .margin-t1 { margin-top: 1px; } .margin-b1 { margin-bottom: 1px; } .margin-l1 { margin-left: 1px; } .padding-2 { padding: 2px; } .padding-l2 { padding-left: 2px; } .padding-t2 { padding-top: 2px; } .padding-r2 { padding-right: 2px; } .padding-b2 { padding-bottom: 2px; } .margin-2 { margin: 2px; } .margin-r2 { margin-right: 2px; } .margin-t2 { margin-top: 2px; } .margin-b2 { margin-bottom: 2px; } .margin-l2 { margin-left: 2px; } .padding-3 { padding: 3px; } .padding-l3 { padding-left: 3px; } .padding-t3 { padding-top: 3px; } .padding-r3 { padding-right: 3px; } .padding-b3 { padding-bottom: 3px; } .margin-3 { margin: 3px; } .margin-r3 { margin-right: 3px; } .margin-t3 { margin-top: 3px; } .margin-b3 { margin-bottom: 3px; } .margin-l3 { margin-left: 3px; } .padding-4 { padding: 4px; } .padding-l4 { padding-left: 4px; } .padding-t4 { padding-top: 4px; } .padding-r4 { padding-right: 4px; } .padding-b4 { padding-bottom: 4px; } .margin-4 { margin: 4px; } .margin-r4 { margin-right: 4px; } .margin-t4 { margin-top: 4px; } .margin-b4 { margin-bottom: 4px; } .margin-l4 { margin-left: 4px; } .padding-5 { padding: 5px; } .padding-l5 { padding-left: 5px; } .padding-t5 { padding-top: 5px; } .padding-r5 { padding-right: 5px; } .padding-b5 { padding-bottom: 5px; } .margin-5 { margin: 5px; } .margin-r5 { margin-right: 5px; } .margin-t5 { margin-top: 5px; } .margin-b5 { margin-bottom: 5px; } .margin-l5 { margin-left: 5px; } .padding-6 { padding: 6px; } .padding-l6 { padding-left: 6px; } .padding-t6 { padding-top: 6px; } .padding-r6 { padding-right: 6px; } .padding-b6 { padding-bottom: 6px; } .margin-6 { margin: 6px; } .margin-r6 { margin-right: 6px; } .margin-t6 { margin-top: 6px; } .margin-b6 { margin-bottom: 6px; } .margin-l6 { margin-left: 6px; } .padding-7 { padding: 7px; } .padding-l7 { padding-left: 7px; } .padding-t7 { padding-top: 7px; } .padding-r7 { padding-right: 7px; } .padding-b7 { padding-bottom: 7px; } .margin-7 { margin: 7px; } .margin-r7 { margin-right: 7px; } .margin-t7 { margin-top: 7px; } .margin-b7 { margin-bottom: 7px; } .margin-l7 { margin-left: 7px; } .padding-8 { padding: 8px; } .padding-l8 { padding-left: 8px; } .padding-t8 { padding-top: 8px; } .padding-r8 { padding-right: 8px; } .padding-b8 { padding-bottom: 8px; } .margin-8 { margin: 8px; } .margin-r8 { margin-right: 8px; } .margin-t8 { margin-top: 8px; } .margin-b8 { margin-bottom: 8px; } .margin-l8 { margin-left: 8px; } .padding-9 { padding: 9px; } .padding-l9 { padding-left: 9px; } .padding-t9 { padding-top: 9px; } .padding-r9 { padding-right: 9px; } .padding-b9 { padding-bottom: 9px; } .margin-9 { margin: 9px; } .margin-r9 { margin-right: 9px; } .margin-t9 { margin-top: 9px; } .margin-b9 { margin-bottom: 9px; } .margin-l9 { margin-left: 9px; } .padding-10 { padding: 10px; } .padding-l10 { padding-left: 10px; } .padding-t10 { padding-top: 10px; } .padding-r10 { padding-right: 10px; } .padding-b10 { padding-bottom: 10px; } .margin-10 { margin: 10px; } .margin-r10 { margin-right: 10px; } .margin-t10 { margin-top: 10px; } .margin-b10 { margin-bottom: 10px; } .margin-l10 { margin-left: 10px; } .padding-11 { padding: 11px; } .padding-l11 { padding-left: 11px; } .padding-t11 { padding-top: 11px; } .padding-r11 { padding-right: 11px; } .padding-b11 { padding-bottom: 11px; } .margin-11 { margin: 11px; } .margin-r11 { margin-right: 11px; } .margin-t11 { margin-top: 11px; } .margin-b11 { margin-bottom: 11px; } .margin-l11 { margin-left: 11px; } .padding-12 { padding: 12px; } .padding-l12 { padding-left: 12px; } .padding-t12 { padding-top: 12px; } .padding-r12 { padding-right: 12px; } .padding-b12 { padding-bottom: 12px; } .margin-12 { margin: 12px; } .margin-r12 { margin-right: 12px; } .margin-t12 { margin-top: 12px; } .margin-b12 { margin-bottom: 12px; } .margin-l12 { margin-left: 12px; } .padding-13 { padding: 13px; } .padding-l13 { padding-left: 13px; } .padding-t13 { padding-top: 13px; } .padding-r13 { padding-right: 13px; } .padding-b13 { padding-bottom: 13px; } .margin-13 { margin: 13px; } .margin-r13 { margin-right: 13px; } .margin-t13 { margin-top: 13px; } .margin-b13 { margin-bottom: 13px; } .margin-l13 { margin-left: 13px; } .padding-14 { padding: 14px; } .padding-l14 { padding-left: 14px; } .padding-t14 { padding-top: 14px; } .padding-r14 { padding-right: 14px; } .padding-b14 { padding-bottom: 14px; } .margin-14 { margin: 14px; } .margin-r14 { margin-right: 14px; } .margin-t14 { margin-top: 14px; } .margin-b14 { margin-bottom: 14px; } .margin-l14 { margin-left: 14px; } .padding-15 { padding: 15px; } .padding-l15 { padding-left: 15px; } .padding-t15 { padding-top: 15px; } .padding-r15 { padding-right: 15px; } .padding-b15 { padding-bottom: 15px; } .margin-15 { margin: 15px; } .margin-r15 { margin-right: 15px; } .margin-t15 { margin-top: 15px; } .margin-b15 { margin-bottom: 15px; } .margin-l15 { margin-left: 15px; } .padding-16 { padding: 16px; } .padding-l16 { padding-left: 16px; } .padding-t16 { padding-top: 16px; } .padding-r16 { padding-right: 16px; } .padding-b16 { padding-bottom: 16px; } .margin-16 { margin: 16px; } .margin-r16 { margin-right: 16px; } .margin-t16 { margin-top: 16px; } .margin-b16 { margin-bottom: 16px; } .margin-l16 { margin-left: 16px; } .padding-17 { padding: 17px; } .padding-l17 { padding-left: 17px; } .padding-t17 { padding-top: 17px; } .padding-r17 { padding-right: 17px; } .padding-b17 { padding-bottom: 17px; } .margin-17 { margin: 17px; } .margin-r17 { margin-right: 17px; } .margin-t17 { margin-top: 17px; } .margin-b17 { margin-bottom: 17px; } .margin-l17 { margin-left: 17px; } .padding-18 { padding: 18px; } .padding-l18 { padding-left: 18px; } .padding-t18 { padding-top: 18px; } .padding-r18 { padding-right: 18px; } .padding-b18 { padding-bottom: 18px; } .margin-18 { margin: 18px; } .margin-r18 { margin-right: 18px; } .margin-t18 { margin-top: 18px; } .margin-b18 { margin-bottom: 18px; } .margin-l18 { margin-left: 18px; } .padding-19 { padding: 19px; } .padding-l19 { padding-left: 19px; } .padding-t19 { padding-top: 19px; } .padding-r19 { padding-right: 19px; } .padding-b19 { padding-bottom: 19px; } .margin-19 { margin: 19px; } .margin-r19 { margin-right: 19px; } .margin-t19 { margin-top: 19px; } .margin-b19 { margin-bottom: 19px; } .margin-l19 { margin-left: 19px; } .padding-20 { padding: 20px; } .padding-l20 { padding-left: 20px; } .padding-t20 { padding-top: 20px; } .padding-r20 { padding-right: 20px; } .padding-b20 { padding-bottom: 20px; } .margin-20 { margin: 20px; } .margin-r20 { margin-right: 20px; } .margin-t20 { margin-top: 20px; } .margin-b20 { margin-bottom: 20px; } .margin-l20 { margin-left: 20px; } .padding-21 { padding: 21px; } .padding-l21 { padding-left: 21px; } .padding-t21 { padding-top: 21px; } .padding-r21 { padding-right: 21px; } .padding-b21 { padding-bottom: 21px; } .margin-21 { margin: 21px; } .margin-r21 { margin-right: 21px; } .margin-t21 { margin-top: 21px; } .margin-b21 { margin-bottom: 21px; } .margin-l21 { margin-left: 21px; } .padding-22 { padding: 22px; } .padding-l22 { padding-left: 22px; } .padding-t22 { padding-top: 22px; } .padding-r22 { padding-right: 22px; } .padding-b22 { padding-bottom: 22px; } .margin-22 { margin: 22px; } .margin-r22 { margin-right: 22px; } .margin-t22 { margin-top: 22px; } .margin-b22 { margin-bottom: 22px; } .margin-l22 { margin-left: 22px; } .padding-23 { padding: 23px; } .padding-l23 { padding-left: 23px; } .padding-t23 { padding-top: 23px; } .padding-r23 { padding-right: 23px; } .padding-b23 { padding-bottom: 23px; } .margin-23 { margin: 23px; } .margin-r23 { margin-right: 23px; } .margin-t23 { margin-top: 23px; } .margin-b23 { margin-bottom: 23px; } .margin-l23 { margin-left: 23px; } .padding-24 { padding: 24px; } .padding-l24 { padding-left: 24px; } .padding-t24 { padding-top: 24px; } .padding-r24 { padding-right: 24px; } .padding-b24 { padding-bottom: 24px; } .margin-24 { margin: 24px; } .margin-r24 { margin-right: 24px; } .margin-t24 { margin-top: 24px; } .margin-b24 { margin-bottom: 24px; } .margin-l24 { margin-left: 24px; } .padding-25 { padding: 25px; } .padding-l25 { padding-left: 25px; } .padding-t25 { padding-top: 25px; } .padding-r25 { padding-right: 25px; } .padding-b25 { padding-bottom: 25px; } .margin-25 { margin: 25px; } .margin-r25 { margin-right: 25px; } .margin-t25 { margin-top: 25px; } .margin-b25 { margin-bottom: 25px; } .margin-l25 { margin-left: 25px; } .padding-26 { padding: 26px; } .padding-l26 { padding-left: 26px; } .padding-t26 { padding-top: 26px; } .padding-r26 { padding-right: 26px; } .padding-b26 { padding-bottom: 26px; } .margin-26 { margin: 26px; } .margin-r26 { margin-right: 26px; } .margin-t26 { margin-top: 26px; } .margin-b26 { margin-bottom: 26px; } .margin-l26 { margin-left: 26px; } .padding-27 { padding: 27px; } .padding-l27 { padding-left: 27px; } .padding-t27 { padding-top: 27px; } .padding-r27 { padding-right: 27px; } .padding-b27 { padding-bottom: 27px; } .margin-27 { margin: 27px; } .margin-r27 { margin-right: 27px; } .margin-t27 { margin-top: 27px; } .margin-b27 { margin-bottom: 27px; } .margin-l27 { margin-left: 27px; } .padding-28 { padding: 28px; } .padding-l28 { padding-left: 28px; } .padding-t28 { padding-top: 28px; } .padding-r28 { padding-right: 28px; } .padding-b28 { padding-bottom: 28px; } .margin-28 { margin: 28px; } .margin-r28 { margin-right: 28px; } .margin-t28 { margin-top: 28px; } .margin-b28 { margin-bottom: 28px; } .margin-l28 { margin-left: 28px; } .padding-29 { padding: 29px; } .padding-l29 { padding-left: 29px; } .padding-t29 { padding-top: 29px; } .padding-r29 { padding-right: 29px; } .padding-b29 { padding-bottom: 29px; } .margin-29 { margin: 29px; } .margin-r29 { margin-right: 29px; } .margin-t29 { margin-top: 29px; } .margin-b29 { margin-bottom: 29px; } .margin-l29 { margin-left: 29px; } .padding-30 { padding: 30px; } .padding-l30 { padding-left: 30px; } .padding-t30 { padding-top: 30px; } .padding-r30 { padding-right: 30px; } .padding-b30 { padding-bottom: 30px; } .margin-30 { margin: 30px; } .margin-r30 { margin-right: 30px; } .margin-t30 { margin-top: 30px; } .margin-b30 { margin-bottom: 30px; } .margin-l30 { margin-left: 30px; } .padding-31 { padding: 31px; } .padding-l31 { padding-left: 31px; } .padding-t31 { padding-top: 31px; } .padding-r31 { padding-right: 31px; } .padding-b31 { padding-bottom: 31px; } .margin-31 { margin: 31px; } .margin-r31 { margin-right: 31px; } .margin-t31 { margin-top: 31px; } .margin-b31 { margin-bottom: 31px; } .margin-l31 { margin-left: 31px; } .padding-32 { padding: 32px; } .padding-l32 { padding-left: 32px; } .padding-t32 { padding-top: 32px; } .padding-r32 { padding-right: 32px; } .padding-b32 { padding-bottom: 32px; } .margin-32 { margin: 32px; } .margin-r32 { margin-right: 32px; } .margin-t32 { margin-top: 32px; } .margin-b32 { margin-bottom: 32px; } .margin-l32 { margin-left: 32px; } .padding-33 { padding: 33px; } .padding-l33 { padding-left: 33px; } .padding-t33 { padding-top: 33px; } .padding-r33 { padding-right: 33px; } .padding-b33 { padding-bottom: 33px; } .margin-33 { margin: 33px; } .margin-r33 { margin-right: 33px; } .margin-t33 { margin-top: 33px; } .margin-b33 { margin-bottom: 33px; } .margin-l33 { margin-left: 33px; } .padding-34 { padding: 34px; } .padding-l34 { padding-left: 34px; } .padding-t34 { padding-top: 34px; } .padding-r34 { padding-right: 34px; } .padding-b34 { padding-bottom: 34px; } .margin-34 { margin: 34px; } .margin-r34 { margin-right: 34px; } .margin-t34 { margin-top: 34px; } .margin-b34 { margin-bottom: 34px; } .margin-l34 { margin-left: 34px; } .padding-35 { padding: 35px; } .padding-l35 { padding-left: 35px; } .padding-t35 { padding-top: 35px; } .padding-r35 { padding-right: 35px; } .padding-b35 { padding-bottom: 35px; } .margin-35 { margin: 35px; } .margin-r35 { margin-right: 35px; } .margin-t35 { margin-top: 35px; } .margin-b35 { margin-bottom: 35px; } .margin-l35 { margin-left: 35px; } .padding-36 { padding: 36px; } .padding-l36 { padding-left: 36px; } .padding-t36 { padding-top: 36px; } .padding-r36 { padding-right: 36px; } .padding-b36 { padding-bottom: 36px; } .margin-36 { margin: 36px; } .margin-r36 { margin-right: 36px; } .margin-t36 { margin-top: 36px; } .margin-b36 { margin-bottom: 36px; } .margin-l36 { margin-left: 36px; } .padding-37 { padding: 37px; } .padding-l37 { padding-left: 37px; } .padding-t37 { padding-top: 37px; } .padding-r37 { padding-right: 37px; } .padding-b37 { padding-bottom: 37px; } .margin-37 { margin: 37px; } .margin-r37 { margin-right: 37px; } .margin-t37 { margin-top: 37px; } .margin-b37 { margin-bottom: 37px; } .margin-l37 { margin-left: 37px; } .padding-38 { padding: 38px; } .padding-l38 { padding-left: 38px; } .padding-t38 { padding-top: 38px; } .padding-r38 { padding-right: 38px; } .padding-b38 { padding-bottom: 38px; } .margin-38 { margin: 38px; } .margin-r38 { margin-right: 38px; } .margin-t38 { margin-top: 38px; } .margin-b38 { margin-bottom: 38px; } .margin-l38 { margin-left: 38px; } .padding-39 { padding: 39px; } .padding-l39 { padding-left: 39px; } .padding-t39 { padding-top: 39px; } .padding-r39 { padding-right: 39px; } .padding-b39 { padding-bottom: 39px; } .margin-39 { margin: 39px; } .margin-r39 { margin-right: 39px; } .margin-t39 { margin-top: 39px; } .margin-b39 { margin-bottom: 39px; } .margin-l39 { margin-left: 39px; } .padding-40 { padding: 40px; } .padding-l40 { padding-left: 40px; } .padding-t40 { padding-top: 40px; } .padding-r40 { padding-right: 40px; } .padding-b40 { padding-bottom: 40px; } .margin-40 { margin: 40px; } .margin-r40 { margin-right: 40px; } .margin-t40 { margin-top: 40px; } .margin-b40 { margin-bottom: 40px; } .margin-l40 { margin-left: 40px; } .padding-41 { padding: 41px; } .padding-l41 { padding-left: 41px; } .padding-t41 { padding-top: 41px; } .padding-r41 { padding-right: 41px; } .padding-b41 { padding-bottom: 41px; } .margin-41 { margin: 41px; } .margin-r41 { margin-right: 41px; } .margin-t41 { margin-top: 41px; } .margin-b41 { margin-bottom: 41px; } .margin-l41 { margin-left: 41px; } .padding-42 { padding: 42px; } .padding-l42 { padding-left: 42px; } .padding-t42 { padding-top: 42px; } .padding-r42 { padding-right: 42px; } .padding-b42 { padding-bottom: 42px; } .margin-42 { margin: 42px; } .margin-r42 { margin-right: 42px; } .margin-t42 { margin-top: 42px; } .margin-b42 { margin-bottom: 42px; } .margin-l42 { margin-left: 42px; } .padding-43 { padding: 43px; } .padding-l43 { padding-left: 43px; } .padding-t43 { padding-top: 43px; } .padding-r43 { padding-right: 43px; } .padding-b43 { padding-bottom: 43px; } .margin-43 { margin: 43px; } .margin-r43 { margin-right: 43px; } .margin-t43 { margin-top: 43px; } .margin-b43 { margin-bottom: 43px; } .margin-l43 { margin-left: 43px; } .padding-44 { padding: 44px; } .padding-l44 { padding-left: 44px; } .padding-t44 { padding-top: 44px; } .padding-r44 { padding-right: 44px; } .padding-b44 { padding-bottom: 44px; } .margin-44 { margin: 44px; } .margin-r44 { margin-right: 44px; } .margin-t44 { margin-top: 44px; } .margin-b44 { margin-bottom: 44px; } .margin-l44 { margin-left: 44px; } .padding-45 { padding: 45px; } .padding-l45 { padding-left: 45px; } .padding-t45 { padding-top: 45px; } .padding-r45 { padding-right: 45px; } .padding-b45 { padding-bottom: 45px; } .margin-45 { margin: 45px; } .margin-r45 { margin-right: 45px; } .margin-t45 { margin-top: 45px; } .margin-b45 { margin-bottom: 45px; } .margin-l45 { margin-left: 45px; } .padding-46 { padding: 46px; } .padding-l46 { padding-left: 46px; } .padding-t46 { padding-top: 46px; } .padding-r46 { padding-right: 46px; } .padding-b46 { padding-bottom: 46px; } .margin-46 { margin: 46px; } .margin-r46 { margin-right: 46px; } .margin-t46 { margin-top: 46px; } .margin-b46 { margin-bottom: 46px; } .margin-l46 { margin-left: 46px; } .padding-47 { padding: 47px; } .padding-l47 { padding-left: 47px; } .padding-t47 { padding-top: 47px; } .padding-r47 { padding-right: 47px; } .padding-b47 { padding-bottom: 47px; } .margin-47 { margin: 47px; } .margin-r47 { margin-right: 47px; } .margin-t47 { margin-top: 47px; } .margin-b47 { margin-bottom: 47px; } .margin-l47 { margin-left: 47px; } .padding-48 { padding: 48px; } .padding-l48 { padding-left: 48px; } .padding-t48 { padding-top: 48px; } .padding-r48 { padding-right: 48px; } .padding-b48 { padding-bottom: 48px; } .margin-48 { margin: 48px; } .margin-r48 { margin-right: 48px; } .margin-t48 { margin-top: 48px; } .margin-b48 { margin-bottom: 48px; } .margin-l48 { margin-left: 48px; } .padding-49 { padding: 49px; } .padding-l49 { padding-left: 49px; } .padding-t49 { padding-top: 49px; } .padding-r49 { padding-right: 49px; } .padding-b49 { padding-bottom: 49px; } .margin-49 { margin: 49px; } .margin-r49 { margin-right: 49px; } .margin-t49 { margin-top: 49px; } .margin-b49 { margin-bottom: 49px; } .margin-l49 { margin-left: 49px; } .padding-50 { padding: 50px; } .padding-l50 { padding-left: 50px; } .padding-t50 { padding-top: 50px; } .padding-r50 { padding-right: 50px; } .padding-b50 { padding-bottom: 50px; } .margin-50 { margin: 50px; } .margin-r50 { margin-right: 50px; } .margin-t50 { margin-top: 50px; } .margin-b50 { margin-bottom: 50px; } .margin-l50 { margin-left: 50px; } .margin-t60 { margin-top: 60px; } .margin-tauto { margin-top: auto; } .margin-bauto { margin-bottom: auto; } /* Font Size Classes */ .fs8 { font-size: 8px; } .fs9 { font-size: 9px; } .fs10 { font-size: 10px; } .fs11 { font-size: 11px; } .fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs14 { font-size: 14px; } .fs15 { font-size: 15px; } .fs16 { font-size: 16px; } .fs17 { font-size: 17px; } .fs18 { font-size: 18px; } .fs19 { font-size: 19px; } .fs20 { font-size: 20px; } .fs21 { font-size: 21px; } .fs22 { font-size: 22px; } .fs23 { font-size: 23px; } .fs24 { font-size: 24px; } .fs25 { font-size: 25px; } .fs26 { font-size: 26px; } .fs27 { font-size: 27px; } .fs28 { font-size: 28px; } .fs29 { font-size: 29px; } .fs30 { font-size: 30px; } .fs31 { font-size: 31px; } .fs32 { font-size: 32px; } .fs33 { font-size: 33px; } .fs34 { font-size: 34px; } .fs35 { font-size: 35px; } .fs36 { font-size: 36px; } .fs37 { font-size: 37px; } .fs38 { font-size: 38px; } .fs39 { font-size: 39px; } .fs40 { font-size: 40px; } .bg-color-red { background-color: #e53935; } .text-color-red { color: #e53935; } .bg-topaz { background-color: #18cfa8; } .text-topaz { color: #18cfa8; } .bg-color-blue { background-color: #29b6f6; } .text-color-blue { color: #29b6f6; } .bg-color-green { background-color: #28c7bf; } .text-color-green { color: #28c7bf; } .bg-color-darkgreen { background-color: #2a8588; } .text-color-darkgreen { color: #2a8588; } .bg-color-white { background-color: #ffffff; } .text-color-white { color: #ffffff; } .bg-color-black { background-color: #000000; } .text-color-black { color: #000000; } .bg-color-grey { background-color: #999999; } .text-color-grey { color: #999999; } .bg-color-cc { background-color: #ccc; } .text-color-cc { color: #ccc; } .bg-color-66 { background-color: #666; } .text-color-66 { color: #666; } .bg-color-33 { background-color: #333; } .text-color-33 { color: #333; } .bg-color-primary { background-color: #00bac6; } .text-color-primary { color: #00bac6; } .bg-color-orange { background-color: #f18131; } .text-color-orange { color: #f18131; } .bg-color-bright-yellow { background-color: #faa61a; } .text-color-bright-yellow { color: #faa61a; } .bg-color_ee { background-color: #eeeeee; } .text-color_ee { color: #eeeeee; } .bg-color_white_smoke { background-color: #f5f5f5; } .text-color_white_smoke { color: #f5f5f5; } /* Letter Spacing */ .ls-1 { letter-spacing: 0.1px; } .ls-2 { letter-spacing: 0.2px; } .ls-3 { letter-spacing: 0.3px; } .ls-4 { letter-spacing: 0.4px; } .ls-5 { letter-spacing: 0.5px; } .ls-6 { letter-spacing: 0.6px; } .ls-7 { letter-spacing: 0.7px; } .ls-8 { letter-spacing: 0.8px; } .ls-9 { letter-spacing: 0.9px; } .ls-10 { letter-spacing: 1px; } .ls-11 { letter-spacing: 1.1px; } .ls-12 { letter-spacing: 1.2px; } .ls-13 { letter-spacing: 1.3px; } .ls-14 { letter-spacing: 1.4px; } .ls-15 { letter-spacing: 1.5px; } .ls-16 { letter-spacing: 1.6px; } .ls-17 { letter-spacing: 1.7px; } .ls-18 { letter-spacing: 1.8px; } .ls-19 { letter-spacing: 1.9px; } .ls-20 { letter-spacing: 2px; } .ls-21 { letter-spacing: 2.1px; } .ls-22 { letter-spacing: 2.2px; } .ls-23 { letter-spacing: 2.3px; } .ls-24 { letter-spacing: 2.4px; } .ls-25 { letter-spacing: 2.5px; } .ls-26 { letter-spacing: 2.6px; } .ls-27 { letter-spacing: 2.7px; } .ls-28 { letter-spacing: 2.8px; } .ls-29 { letter-spacing: 2.9px; } .ls-30 { letter-spacing: 3px; } /* Font Size Classes */ .border-radius2 { border-radius: 2px; } .border-radius3 { border-radius: 3px; } .border-radius4 { border-radius: 4px; } .border-radius5 { border-radius: 5px; } .border-radius6 { border-radius: 6px; } .border-radius7 { border-radius: 7px; } .border-radius8 { border-radius: 8px; } .border-radius9 { border-radius: 9px; } .border-radius10 { border-radius: 10px; } /* Layout setup */ .main-content-wrapper { max-width: 1600px; margin: 0 auto; position: relative; padding: 0 100px; -webkit-box-sizing: content-box; box-sizing: content-box; letter-spacing: 1px; } @media screen and (min-width: 1920px) { .main-content-wrapper { max-width: 1920px; } } .od-container { width: 100%; padding: 0 2vw; margin: 0 auto; } .od-container--lg { max-width: 1200px; } .od-container--xl { padding: 0 100px; } /* Text colors */ .text-black { color: #494949; } .text-red { color: #f00; } .max-width-100 { max-width: 100%; } img { max-width: 100%; } .text-center { text-align: center; text-align: -webkit-center; } .bg-white { background-color: transparent; } .no-padding { padding: 0 !important; } .bg-cyan { background-color: rgba(0, 185, 198, .08); } .search-inner-container { position: relative; } .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .font-bold { font-family: "FuturaStd-Heavy"; } .font-medium { font-family: "FuturaStd-Medium"; } strong { color: #000000; font-family: "NeuzeitGroBold"; font-weight: normal; } a { color: #329c92; text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; } .text-underline { text-decoration: underline; } .onhover-underline:hover { text-decoration: underline; } .color-green { color: #329c92; } .text-left { text-align: left; } .text-link { color: #329c92; cursor: pointer; } .text-link:hover { text-decoration: underline; } .text-link-gray { color: #333; cursor: pointer; } .text-link-gray:hover { color: #333; text-decoration: underline; } .text-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; line-height: 14px; vertical-align: text-top; background-image: url(//static.lenskart.com/skin/frontend/base/default/img/sprite-v2.png); background-repeat: no-repeat; vertical-align: middle; } .display-ib { display: inline-block; } .display-block { display: block; } .display-flex, .layout { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .display-grid { display: grid; } .grid-col-0 { grid-template-columns: repeat(0, 1fr); } .grid-row-0 { grid-template-rows: repeat(0, 1fr); } .grid-gap-0 { grid-gap: 0px; } .grid-col-1 { grid-template-columns: repeat(1, 1fr); } .grid-row-1 { grid-template-rows: repeat(1, 1fr); } .grid-gap-5 { grid-gap: 5px; } .grid-col-2 { grid-template-columns: repeat(2, 1fr); } .grid-row-2 { grid-template-rows: repeat(2, 1fr); } .grid-gap-10 { grid-gap: 10px; } .grid-col-3 { grid-template-columns: repeat(3, 1fr); } .grid-row-3 { grid-template-rows: repeat(3, 1fr); } .grid-gap-15 { grid-gap: 15px; } .grid-col-4 { grid-template-columns: repeat(4, 1fr); } .grid-row-4 { grid-template-rows: repeat(4, 1fr); } .grid-gap-20 { grid-gap: 20px; } .grid-col-5 { grid-template-columns: repeat(5, 1fr); } .grid-row-5 { grid-template-rows: repeat(5, 1fr); } .grid-gap-25 { grid-gap: 25px; } .layout.center, .align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .align-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-both-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .align-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .justify-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .justify-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-content-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .star-rating { height: 15px; position: relative; width: 75px; } .star-rating:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGZpbGw9IiM3ZjhjOGQiID4gICAgPHBhdGggZD0iTSAyNSAyLjI3MzQzNzUgTCAxOC42MDkzNzUgMTguNDgwNDY5IEwgMC44MTA1NDY4OCAxOS40MTc5NjkgTCAxNC42NDg0MzggMzAuNDEyMTA5IEwgMTAuMDcwMzEyIDQ3LjIyMjY1NiBMIDI1IDM3Ljc3MTQ4NCBMIDM5LjkyOTY4OCA0Ny4yMjI2NTYgTCAzNS4zNTE1NjIgMzAuNDEyMTA5IEwgNDkuMTg5NDUzIDE5LjQxNzk2OSBMIDMxLjM5MDYyNSAxOC40ODA0NjkgTCAyNSAyLjI3MzQzNzUgeiI+PC9wYXRoPjwvc3ZnPg=="); background-repeat: repeat-x; background-size: 15px; bottom: 0; content: ""; display: block; height: 15px; left: 0; position: absolute; right: 0; top: 0; width: 75px; } .star-rating .star { display: block; text-indent: -10000px; width: 75px; height: 15px; position: absolute; overflow: hidden; } .star-rating .star:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGZpbGw9IiNmMWM0MGYiID4gICAgPHBhdGggZD0iTSAyNSAyLjI3MzQzNzUgTCAxOC42MDkzNzUgMTguNDgwNDY5IEwgMC44MTA1NDY4OCAxOS40MTc5NjkgTCAxNC42NDg0MzggMzAuNDEyMTA5IEwgMTAuMDcwMzEyIDQ3LjIyMjY1NiBMIDI1IDM3Ljc3MTQ4NCBMIDM5LjkyOTY4OCA0Ny4yMjI2NTYgTCAzNS4zNTE1NjIgMzAuNDEyMTA5IEwgNDkuMTg5NDUzIDE5LjQxNzk2OSBMIDMxLjM5MDYyNSAxOC40ODA0NjkgTCAyNSAyLjI3MzQzNzUgeiI+PC9wYXRoPjwvc3ZnPg=="); background-repeat: repeat-x; background-size: 15px; bottom: 0; content: ""; display: block; height: 15px; left: 0; position: absolute; right: 0; text-indent: 10000px; top: 0; } .cursor-pointer { cursor: pointer; } .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cursor-auto { cursor: auto; } .close-me-btn { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; cursor: pointer; z-index: 1103; display: block; background: #404042; border-radius: 50%; } .close-me-btn:before, .close-me-btn:after { position: absolute; left: 14px; content: " "; height: 16px; width: 2px; background-color: #fff; top: 7px; } .close-me-btn:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close-me-btn:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .uppercase { text-transform: uppercase; } .border-none { border: none; } .capitalize { text-transform: capitalize; } .nowrap { white-space: nowrap; } .white-space-normal { white-space: normal; } .border-green { border: 1px solid #28c7bf; } .border { border: 1px solid #ebebeb; } .border-topaz { border: 1px solid #d4ead5; } .border-blue { border: 1px solid #00bac6; } .margin-0-auto { margin: 0 auto; } .border-bottom { border-bottom: 1px solid #ebebeb; } .border-top { border-top: 1px solid #ebebeb; } .border-right { border-right: 1px solid #ebebeb; } .border-left { border-left: 1px solid #ebebeb; } .fw400 { font-weight: 400; } .fw500 { font-weight: 500; } .fw600 { font-weight: 600; } .fw700 { font-weight: 700; } .fw900 { font-weight: 900; } .bold { font-family: "FuturaStd-Heavy"; } .strike-through { text-decoration: line-through; } h1, h2, h3, h4, h5 { font-family: 'Founders Grotesk', sans-serif; font-weight: 400; } .btn.btn-primary { color: #fff; background-color: #f18132; border-color: #ef721a; font-family: 'Founders Grotesk', sans-serif; font-size: 14px; padding: 12px 2px; border-radius: 5px; letter-spacing: 1px; outline: none; white-space: normal; white-space: initial; } .btn.btn-primary:hover, .btn.btn-primary:focus { background-color: #e1660f; border-color: #bf570d; color: #fff; } .btn.btn-main { color: #fff; background-color: #00BAC6; border-color: #00BAC6; font-family: "FuturaStd-Medium"; font-size: 14px; padding: 12px 20px; border-radius: 5px; letter-spacing: 1px; outline: none; white-space: normal; white-space: initial; } .btn.btn-main:hover, .btn.btn-main:focus { background-color: #00BAC6; border-color: #00BAC6; color: #fff; } div:focus { outline: 0px solid transparent; } .width-vw { width: 28vw; } .full-width { width: 100% !important; } .display-none { display: none; } .h-100cent { height: 100%; } body { overflow-y: auto !important; } body.overflow-hidden.h-100cent { overflow: hidden !important; } input:focus, button:focus { outline: none; } .letter-spacing-1 { letter-spacing: 1px; } .inline-block { display: inline-block; } .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } /* Initial state */ .barLK { background-color: #ffffff; border: 1px solid #ffffff; float: left; margin-right: 4px; margin-top: 6px; width: 6px; height: 18px; /* Set the animation properties */ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: loadingbarLK; animation-name: loadingbarLK; } /* Delay both the second and third bar at the start */ .loaderLK .barLK:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .loaderLK .barLK:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } /* The actual animation */ @-webkit-keyframes loadingbarLK { 0% { } 10% { margin-top: 5px; height: 22px; border-color: #ffffff; background-color: #ffffff; } 20% { margin-top: 0px; height: 32px; border-color: #ffffff; background-color: #ffffff; } 30% { margin-top: 1px; height: 30px; border-color: #ffffff; background-color: #ffffff; } 40% { margin-top: 3px; height: 26px; } 50% { margin-top: 5px; height: 22px; } 60% { margin-top: 6px; height: 18px; } 70% { } /* Missing frames will cause the extra delay */ 100% { } } @keyframes loadingbarLK { 0% { } 10% { margin-top: 5px; height: 22px; border-color: #ffffff; background-color: #ffffff; } 20% { margin-top: 0px; height: 32px; border-color: #ffffff; background-color: #ffffff; } 30% { margin-top: 1px; height: 30px; border-color: #ffffff; background-color: #ffffff; } 40% { margin-top: 3px; height: 26px; } 50% { margin-top: 5px; height: 22px; } 60% { margin-top: 6px; height: 18px; } 70% { } /* Missing frames will cause the extra delay */ 100% { } } @-webkit-keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } .pos-fix { position: fixed; } .pos-rel { position: relative; } .pos-abs { position: absolute; } .component-loader-container { position: relative; min-height: 250px; } .component-loader-container .loader { position: absolute; } .component-loader-container .loader_overlay { position: absolute; background: #fff; } .hideElement { visibility: hidden; height: 0; } .screen-hidden { position: absolute !important; left: -9999px !important; height: 0px !important; } .no-decoration { text-decoration: none; } .no-decoration:hover { text-decoration: none; } .no-decoration:focus { text-decoration: none; outline: none; } /**tooltip**/ .tool-tip-hover { display: inline-block; } .tool-tip-hover:before { content: "?"; color: #fff; background: #515151; width: 20px; height: 20px; display: block; font-family: "FuturaStd-Heavy"; font-weight: normal; text-align: center; border-radius: 50%; font-size: 12px; line-height: 20px; cursor: pointer; } /**tooltip**/ .modal-backdrop { z-index: 1050 !important; } .beta-span { font-family: "FuturaStd-Medium"; position: relative; top: 10px; left: 2px; color: white; } .sans-serif-semi-bold { font-family: SourceSansProSemibold, sans-serif; } .futur-std { font-family: FuturaStd-Book; } /* Line Height Classes */ .line-height-12 { line-height: 12px; } .line-height-13 { line-height: 13px; } .line-height-14 { line-height: 14px; } .line-height-15 { line-height: 15px; } .line-height-16 { line-height: 16px; } .line-height-17 { line-height: 17px; } .line-height-18 { line-height: 18px; } .line-height-19 { line-height: 19px; } .line-height-20 { line-height: 20px; } .line-height-21 { line-height: 21px; } .line-height-22 { line-height: 22px; } .line-height-23 { line-height: 23px; } .line-height-24 { line-height: 24px; } .line-height-25 { line-height: 25px; } .line-height-26 { line-height: 26px; } .lh15 { line-height: 15px; } .font-style-normal { font-style: normal; } ul, li { list-style-type: none; } .clear-both { clear: both; } .float-right { float: right; } .float-left { float: left; } .table .thead-light th { font-weight: bold; font-size: 14px; } .separator { display: block; margin: 12px 0; height: 1px; padding: 0; } .separator.dashed { border-top: 1px dashed #ccc; } .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .pagination li:not(.disabled) a { color: #3bb3a9; } .pagination li:not(.disabled) a.active-page { background-color: #3bb3a9; color: #fff; border-color: #3bb3a9; } .text-right { text-align: right; } .text-left { text-align: left; } .tooltip-custom .tooltip-inner { background: #fff; -webkit-box-shadow: 0px 0px 16px -5px rgba(0, 0, 0, .75); box-shadow: 0px 0px 16px -5px rgba(0, 0, 0, .75); padding: 15px; } .tooltip-custom .arrow:before { border-right-color: rgba(0, 0, 0, .75); } .mr-0auto { margin: 0 auto; } .text-color_brick_red { color: #d54c44; } .text-color_primary { color: #329c92; } .text-color_green { color: green; } .bora-4 { border-radius: 4px; } .bora-8 { border-radius: 8px; } .bora-50cent { border-radius: 50%; } .justify-space-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .justify-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bg-topaz { background-color: #18cfa8; } .blur-text, .blur-text label { color: transparent; text-shadow: 0 0 1.5px rgba(0, 0, 0, .3); cursor: not-allowed; } .modal-center { margin: 0 auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .icon-info { background: url("https://static5.lenskart.com/images/cust_mailer/Mar-03/Info_SubmitPowerAlert.png") no-repeat 0 0; height: 16px; width: 16px; vertical-align: top; background-size: contain; } .bullet-list { list-style-type: disc; list-style-position: inside; } .width100 { width: 100%; } .width75 { width: 75%; } .width65 { width: 65%; } .width50 { width: 50%; } .width25 { width: 25%; } .width85 { width: 85%; } .width60 { width: 60%; } .width80 { width: 80%; } .width60 { width: 60%; } /* flex-basis classes */ .flex-basis-16 { -ms-flex-preferred-size: 16%; flex-basis: 16%; } .flex-basis-20 { -ms-flex-preferred-size: 20%; flex-basis: 20%; } .flex-basis-24 { -ms-flex-preferred-size: 24%; flex-basis: 24%; } .flex-basis-28 { -ms-flex-preferred-size: 28%; flex-basis: 28%; } .flex-basis-32 { -ms-flex-preferred-size: 32%; flex-basis: 32%; } .flex-basis-36 { -ms-flex-preferred-size: 36%; flex-basis: 36%; } .flex-basis-40 { -ms-flex-preferred-size: 40%; flex-basis: 40%; } .flex-basis-44 { -ms-flex-preferred-size: 44%; flex-basis: 44%; } .flex-basis-48 { -ms-flex-preferred-size: 48%; flex-basis: 48%; } .flex-basis-52 { -ms-flex-preferred-size: 52%; flex-basis: 52%; } .flex-basis-56 { -ms-flex-preferred-size: 56%; flex-basis: 56%; } .flex-basis-60 { -ms-flex-preferred-size: 60%; flex-basis: 60%; } .flex-basis-64 { -ms-flex-preferred-size: 64%; flex-basis: 64%; } .flex-basis-68 { -ms-flex-preferred-size: 68%; flex-basis: 68%; } .flex-basis-72 { -ms-flex-preferred-size: 72%; flex-basis: 72%; } .flex-basis-76 { -ms-flex-preferred-size: 76%; flex-basis: 76%; } .flex-basis-80 { -ms-flex-preferred-size: 80%; flex-basis: 80%; } .flex-basis-84 { -ms-flex-preferred-size: 84%; flex-basis: 84%; } .flex-basis-88 { -ms-flex-preferred-size: 88%; flex-basis: 88%; } .flex-basis-92 { -ms-flex-preferred-size: 92%; flex-basis: 92%; } .flex-basis-96 { -ms-flex-preferred-size: 96%; flex-basis: 96%; } .flex-basis-100 { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .align-self-center { -ms-flex-item-align: center; align-self: center; } .fw-bold { font-weight: bold; } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-30 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 30px !important; outline: none; } .country-code-display-30 ~ input { padding-left: 30px !important; } .country-code-display-30 ~ input ~ label { -webkit-transform: translateX(30px) !important; transform: translateX(30px) !important; } .country-code-display-30 ~ input:focus ~ label, .country-code-display-30 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-30 { width: 33px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-30 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-35 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 35px !important; outline: none; } .country-code-display-35 ~ input { padding-left: 35px !important; } .country-code-display-35 ~ input ~ label { -webkit-transform: translateX(35px) !important; transform: translateX(35px) !important; } .country-code-display-35 ~ input:focus ~ label, .country-code-display-35 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-35 { width: 38px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-35 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-40 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 40px !important; outline: none; } .country-code-display-40 ~ input { padding-left: 40px !important; } .country-code-display-40 ~ input ~ label { -webkit-transform: translateX(40px) !important; transform: translateX(40px) !important; } .country-code-display-40 ~ input:focus ~ label, .country-code-display-40 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-40 { width: 43px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-40 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-45 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 45px !important; outline: none; } .country-code-display-45 ~ input { padding-left: 45px !important; } .country-code-display-45 ~ input ~ label { -webkit-transform: translateX(45px) !important; transform: translateX(45px) !important; } .country-code-display-45 ~ input:focus ~ label, .country-code-display-45 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-45 { width: 48px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-45 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-50 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 50px !important; outline: none; } .country-code-display-50 ~ input { padding-left: 50px !important; } .country-code-display-50 ~ input ~ label { -webkit-transform: translateX(50px) !important; transform: translateX(50px) !important; } .country-code-display-50 ~ input:focus ~ label, .country-code-display-50 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-50 { width: 53px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-50 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-55 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 55px !important; outline: none; } .country-code-display-55 ~ input { padding-left: 55px !important; } .country-code-display-55 ~ input ~ label { -webkit-transform: translateX(55px) !important; transform: translateX(55px) !important; } .country-code-display-55 ~ input:focus ~ label, .country-code-display-55 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-55 { width: 58px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-55 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .country-code-display-40.sa-country-class { width: 42px !important; } @media screen and (min-width: 1920px) { .big-screen-wrapper { max-width: 1920px; } } .verify-btn { height: 32px; width: 73px; background: #c2c2c2; border-radius: 4px; border: 1px solid transparent; color: #666666; letter-spacing: 0.02rem; line-height: 16px; } .verify-btn.isEnabled { background: #2440a6 !important; color: #ffffff !important; } @media screen and (min-width: 1920px) { .DittoSandbox { position: relative; left: calc(50vw - 960px); max-width: 1920px; } } .od-font-bold { font-family: 'Founders Grotesk', sans-serif; letter-spacing: 0.02em; } .od-font-light { font-family: "NeuzeitGroLig"; letter-spacing: -0.02em; } .od-font-reg { font-family: 'Founders Grotesk', sans-serif; letter-spacing: 0.05em; } .od-font-raleway { font-family: "Raleway"; letter-spacing: -0.24em; } .od-membership-status-bronze { color: #8E5010; } .od-membership-status-silver { color: #939393; } .od-membership-status-gold { color: #C7A907; } .od-separator { width: 100%; border: 1px solid #000000; opacity: 0.2; } #launcher { display: none; } @media only screen and (min-width: 900px) { .od-c-breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0px 5px 5px 0; border-top: 1px solid rgba(84, 96, 115, .1); border-bottom: 1px solid rgba(84, 96, 115, .1); border-radius: 0px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 11px; letter-spacing: 1px; } .od-c-breadcrumb ul { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; margin: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-c-breadcrumb ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000000; font-family: 'Founders Grotesk', sans-serif; font-size: 16px; line-height: 30px; letter-spacing: -0.02em; opacity: 0.3; } .od-c-breadcrumb ul li::after { content: '>'; padding: 0 15px; } .od-c-breadcrumb ul li:last-child { font-family: 'Founders Grotesk', sans-serif; } .od-c-breadcrumb ul li:last-child::after { content: ''; padding: 0; } .od-c-breadcrumb ul li a { color: #000000; font-family: 'Founders Grotesk', sans-serif; } } @media screen and (min-width: 900px) and (max-width: 1153px) { .od-c-breadcrumb { -webkit-transform: translateY(20px); transform: translateY(20px); } } @media only screen and (min-width: 1025px) { .od-c-breadcrumb { padding: 5px 5px 5px 50px; } .od-c-breadcrumb ul { text-overflow: ellipsis; white-space: normal; overflow: hidden; } } .app_example { color: red; } @media screen and (min-width: 1920px) { #mobile-chat-container, #fbots-wdgt { right: calc(50vw - 930px) !important; } } .redis-loading { padding: 15% 0; margin-left: 48%; } .redis-loader .category-loader { width: calc(100% - 255px); left: 255px; top: 50%; position: relative; } .redis-loader .default-filters { width: 255px; float: left; border-right: 2px solid #ededed; height: 100vh; } .redis-loader .filters-navigate { width: 255px; position: fixed; z-index: 99; overflow: hidden; background: transparent; height: 100vh; max-height: 100%; -ms-overflow-style: none; } .redis-loader .scrolltop .category-loader { left: 18%; top: 50%; position: relative; } .backdrop { -webkit-transition: opacity 0.45s; transition: opacity 0.45s; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 50; pointer-events: none; } .backdrop.backdrop-in { background-color: rgba(33, 33, 33, .75); pointer-events: auto; } .filter-loader > div { padding: 0px 3px; } .filter-loader .blankwidgets_box_imageWrap { display: none; } .filter-loader .blankwidgets_box_footerWrap_left div:nth-child(1), .filter-loader .blankwidgets_box_footerWrap_left div:nth-child(3) { display: none; } .filter-loader .blankwidgets_box_footerWrap_right { display: none; } #livechat-compact-container, #livechat-full { right: auto; left: 15px; } #launcher-frame { min-width: 88px !important; } @media screen and (min-width: 1920px) { #launcher-frame { left: calc(50vw - 960px) !important; } } .orLine { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-top: 15px; font-size: 12px; } .orLine:before, .orLine:after { content: ''; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; border-bottom: 1px solid #dddddd; margin: auto; margin-left: 4px; margin-right: 4px; } .rightarrow1-json:before { content: "\f177"; } .leftarrow1-json:before { content: "\f178"; } #external-pages #top-information { display: none; } #external-pages #sticky-wrapper { display: none; } #external-pages #top-btn { display: none; } #external-pages .whats-app { display: none; } #external-pages .l-footer { display: none; } #external-pages #top-btn { display: none; } #external-pages .app-footer { display: none; } #zendesk-chat-widget { position: fixed; bottom: 17px; left: 16px; padding: 12px 20px; background-color: #546073; border-radius: 60px; color: #fff; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 100 !important; } #zendesk-chat-widget .zendesk-chat-desktop-img { margin-right: 4px; height: 20px; width: 20px; } .common-loader { position: fixed; text-align: center; vertical-align: middle; width: 100%; height: 100%; top: 0; left: 0; z-index: 99999999; overflow: hidden; } .common-loader_overlay { position: fixed; background: #000; opacity: 0.5; width: 100%; height: 100%; top: 0; left: 0; } .common-loader img { text-align: center; vertical-align: middle; margin: 0 auto; position: relative; height: 120px; width: 120px; top: 50%; -webkit-transform: perspective(1px) translateY(-50%); transform: perspective(1px) translateY(-50%); } .popup { font-family: "Founders Grotesk", sans-serif; } .popup__overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1000; } @media screen and (max-width: 768px) { .popup__overlay { padding: 0 20px; } } .popup__content { background: #ffffff; width: 100%; max-width: 570px; padding: 60px 60px 20px 60px; position: relative; text-align: left; } @media screen and (max-width: 768px) { .popup__content { padding: 60px 20px 20px 20px; } } .popup__close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; background: none; border: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .popup__close::before, .popup__close::after { content: ""; position: absolute; width: 30px; border: 1px solid black; } .popup__close::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .popup__close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .popup__message-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .popup__message { font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 1; margin: 0; color: black; } @media screen and (max-width: 768px) { .popup__message { font-size: 14px; } } .popup__button-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 40px; } .popup__button { background: white; color: black; padding: 10px 0; border-radius: 30px; cursor: pointer; border: 1px solid black; font-weight: 500; font-size: 15px; text-align: center; line-height: 2; letter-spacing: 2; width: 100%; max-width: 300px; } .popup__button:hover { background: black; color: white; } .slick-list, .slick-slider, .slick-track { position: relative; display: block; } .slick-loading .slick-slide, .slick-loading .slick-track { visibility: hidden; } .slick-slider { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: 0; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { top: 0; left: 0; } .slick-track:after, .slick-track:before { display: table; content: ''; } .slick-track:after { clear: both; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*# sourceMappingURL=slick.min.css.map */ .odHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 40px; position: relative; } @media (min-width: 768px) and (max-width: 1200px) { .odHeader { padding: 16px 20px; } } .odHeader--fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: white; -webkit-transition: opacity 0.3s ease, z-index 0.3s ease; transition: opacity 0.3s ease, z-index 0.3s ease; opacity: 1; } .odHeader--fixed.header-visible { z-index: 99999999; opacity: 1; } .odHeader--fixed.header-hidden { z-index: 9999; opacity: 0; pointer-events: none; } .odLogo { height: 20px; } .odNav { font-family: 'Founders Grotesk', sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000; } .odNav__list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; padding-left: 0px; margin-bottom: 0px; } @media (min-width: 768px) and (max-width: 1200px) { .odNav__list { gap: 8px; } } .odNav__link { text-decoration: none !important; font-size: 16px; font-weight: 500; color: #000; } .odNav__link:hover { color: #000; } @media (min-width: 768px) and (max-width: 1200px) { .odNav__link { font-size: 14px; } } @media (min-width: 768px) and (max-width: 1200px) { .odNav__listItemAccessories { display: none; } } .odNav__listItemLink:hover { text-decoration: underline !important; } .odNavLinkDropdown { position: absolute; z-index: 99999999; background-color: #fff; left: 0; right: 0; top: 70px; height: auto; padding: 28px 40px 80px 40px; -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .06); box-shadow: 0 4px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .06); opacity: 0; /* Start hidden */ visibility: hidden; /* Start hidden */ -webkit-transform: translateY(-10px); transform: translateY(-10px); /* Start slightly above */ -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; font-family: 'Founders Grotesk', sans-serif; } .odNavLinkDropdown.odNavLinkDropdown__open { opacity: 1; visibility: visible; /* Fully visible */ -webkit-transform: translateY(0) !important; transform: translateY(0) !important; /* Move to final position */ } .odNavLinkDropdown__container { max-width: 1250px; margin: 0 auto; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .odNavLinkDropdown__links { display: grid; } .odNavLinkDropdown__colLink { display: block; font-family: 'Founders Grotesk'; font-size: 16px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; color: #000; margin-bottom: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .odNavLinkDropdown__colLinkImg { width: 16px; height: 16px; margin-right: 8px; } .odNavLinkDropdown__content { display: grid; gap: 20px; height: 100%; } .odNavLinkDropdown__card { width: auto; height: auto; } .odNavLinkDropdown__label { font-family: 'Founders Grotesk'; font-size: 16px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; color: #000; padding-top: 8px; } .odNavActions { font-family: "Founders Grotesk", sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 768px) and (max-width: 1200px) { .odNavActions { gap: 8px; } } .odBookEyeTest-hide { visibility: hidden; } .search-bar-static { position: relative; } .search-bar-static__layout { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 40px; padding: 8px 30px; border-bottom: 1px solid #555; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; } .search-bar-static__input { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; padding: 0; border: none; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; color: #000; } .search-bar-static__input::-webkit-input-placeholder { font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; color: rgba(0, 0, 0, .3); } .search-bar-static__input::-moz-placeholder { font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; color: rgba(0, 0, 0, .3); } .search-bar-static__input::-ms-input-placeholder { font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; color: rgba(0, 0, 0, .3); } .search-bar-static__input::placeholder { font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; color: rgba(0, 0, 0, .3); } .search-bar-static__icon { width: 14px; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; will-change: opacity; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .search-bar-static__icon:hover { opacity: 0.5; } .search-bar-static__icon--close { width: 10px; } .search-bar-results { position: absolute; top: 58px; left: auto; right: 0; width: 356px; background-color: #fff; border-radius: 16px; border-color: #d9d9d9; -webkit-box-shadow: 0px 15px 60px 10px rgba(0, 0, 0, .1); box-shadow: 0px 15px 60px 10px rgba(0, 0, 0, .1); padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 999; } .search-bar-results__header { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 32px 24px 16px; margin: 0; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; color: #a5a5a5; } .search-bar-results__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-height: 412px; overflow-y: auto; } .search-bar-results__result { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 16px 72px 16px 24px; margin: 0; color: #000; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; background: url("https://static.lenskart.com/owndays/img/icons/arrow-right-2.svg") no-repeat right 24px center/24px auto; cursor: pointer; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .search-bar-results__result:hover { opacity: 0.6; } .search-bar-nascent { width: 24px; height: 24px; position: relative; } .search-bar-nascent__layout { position: absolute; top: 50%; right: 0; bottom: 0; translate: 0 -50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; background-color: #fff; height: 40px; overflow: visible; } .search-bar-nascent__input { width: 312px; height: 24px; padding: 0; border: none; } .search-bar-nascent__icon { -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; will-change: opacity; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; height: 28px; width: 28px; } .search-bar-nascent__icon:hover { opacity: 0.5; } .search-bar-nascent__icon--secondary { -o-object-fit: contain; object-fit: contain; cursor: pointer; } @media (min-width: 1440px) { .search-bar-nascent__icon--secondary { width: 28px; height: 28px; } } .search-bar-nascent--active .search-bar-nascent__layout { border-bottom: 1px solid #000; } .odCart { font-family: 'Founders Grotesk', sans-serif; position: relative; } .odCart__count { position: absolute; top: -8px; right: -6px; background-color: #535353; color: #fff; border-radius: 50%; width: 16px; height: 16px; text-align: center; font-weight: 500; } .odCart__icon { height: 28px; width: 28px; } .odWishlist { position: relative; } .odWishlist__count { position: absolute; top: -5px; right: -5px; background-color: #535353; color: #fff; border-radius: 50%; width: 16px; height: 16px; text-align: center; font-weight: 500; line-height: 1.2; } .odWishlist__icon { height: 28px; width: 28px; } .odUserMenu { position: relative; } .odUserMenu__login { font-size: 16px; border: none; background-color: transparent; text-transform: uppercase; text-decoration: none; font-weight: 500; color: #000; } .odUserMenu__login:hover { color: #000; text-decoration: none; } @media (min-width: 768px) and (max-width: 1200px) { .odUserMenu__login { font-size: 14px; } } .odUserName { font-family: 'Founders Grotesk', sans-serif; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .odUserName__name { font-size: 16px; font-weight: 500; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; cursor: pointer; } @media (max-width: 1200px) { .odUserName__name { font-size: 14px; } } @media (max-width: 1024px) { .odUserName__name__span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; display: block; } } .odUserName__arrowIcon { width: 24px; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .odUserName__arrowRotate { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .odDropdown { position: absolute; right: 0px; top: 60px; width: 350px; background-color: #fff; z-index: 999; border-radius: 18px; padding: 24px; -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .06); box-shadow: 0 4px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .06); opacity: 0; /* Start hidden */ visibility: hidden; /* Start hidden */ -webkit-transform: translateY(-10px); transform: translateY(-10px); /* Start slightly above */ -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease; font-family: 'Founders Grotesk', sans-serif; } .odDropdown.open { opacity: 1; /* Fully visible */ visibility: visible; /* Fully visible */ -webkit-transform: translateY(0); transform: translateY(0); /* Move to final position */ } .odDropdown__profile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 16px; } .odDropdown__pic { height: 48px; width: 48px; background-color: #422e2e; border-radius: 50%; color: #fff; font-size: 20px; font-weight: 500; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .odDropdown__nameEmail { margin-left: 16px; } .odDropdown__name { font-weight: 500; font-size: 20px; font-weight: 600; } .odDropdown__email { font-size: 16px; color: #7c7c7c; } .odDropdown__logout { font-size: 20px; color: #a5a5a5; cursor: pointer; font-weight: 500; } .odMembership { width: 100%; background-color: #f7f7f7; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 20px; margin-bottom: 16px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .odMembership__points { color: #7c7c7c; font-size: 18px; } .odMembership__value { font-size: 45px; font-weight: 600; color: #000; line-height: 45px; } .odMembership__badge { text-align: center; } .odMembership__badgeIcon { height: 40px; width: 40px; margin-bottom: 8px; } .odMembership__status { text-transform: uppercase; font-size: 15px; color: #7c7c7c; } .odDropdownNav { padding-top: 16px; border-bottom: 2px solid #f7f7f7; border-top: 2px solid #f7f7f7; margin-bottom: 16px; } .odDropdownNav__navlink { text-decoration: none; color: #000; display: block; margin-bottom: 16px; } .odDropdownNav__navlink:hover { color: #000; text-decoration: none; } .odDropdownNav__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .odDropdownNav__navTitle { font-size: 18px; } .odDropdownNav__navIcon { width: 30px; margin-right: 12px; } .odDropdownNav__arrowIcon { width: 30px; } .odBookEyeTest { padding: 8px 16px; background-color: #000; color: #fff; border: none; border-radius: 8px; font-size: 16px; text-transform: uppercase; font-weight: 500; text-decoration: none; } .odBookEyeTest:hover { color: #fff; text-decoration: none; } @media (min-width: 769px) and (max-width: 1200px) { .odBookEyeTest { padding: 6px 8px; font-size: 14px; } } @media (min-width: 768px) and (max-width: 868px) { .odBookEyeTest { display: none; } } .odBanner { font-family: 'Founders Grotesk', sans-serif !important; width: 100%; height: 48px; overflow: hidden; background-color: #000; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } .odBanner__slider { position: relative; width: 100%; height: 48px; } .odBanner__slide { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 48px; font-size: 20px; letter-spacing: 0; } @media (min-width: 768px) and (max-width: 1200px) { .odBanner__slide { font-size: 14px; } } .odBanner__doubleSaving { background-color: black; } .odBanner__outletSale { background-color: black; } .odBanner__shopNowCta { border: 1px solid #fff; border-radius: 8px; padding: 4px 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; font-size: 14px; font-weight: 600; cursor: pointer; margin-left: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; } .odBanner__shopNowCta span { margin-top: 2px; white-space: nowrap; } .odBanner__shopNowCtaImg { width: auto; height: 18px; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: invert(1); filter: invert(1); } .odBanner .slick-dots { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 20px; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; } .odBanner .slick-dots li { width: 12px; height: 12px; position: relative; } .odBanner .slick-dots li button { position: absolute; font-size: 0px; height: 12px; width: 12px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, .4); } .odBanner .slick-dots li button:before { font-size: 0px; } .odBanner .slick-dots .slick-active button { background-color: #fff; } .od_link { color: inherit; } .od_link:focus, .od_link:hover, .od_link a:active { color: inherit; text-decoration: none; } .hto-hero { padding: 120px 170px 60px; } .hto-hero__layout { max-width: 1040px; margin: 0 auto; text-align: center; } .hto-hero__image { margin-bottom: 80px; width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; } .hto-hero__title { margin: 0 0 40px; text-align: center; font-size: 48px; line-height: 60px; color: #000000; } .hto-hero__description { margin-bottom: 80px; text-align: center; font-size: 20px; line-height: 40px; color: rgba(0, 0, 0, .7); } .hto-hero__button { margin: 0 auto; } .hto-benefits { padding: 60px 170px 60px; background-color: #fafafa; } .hto-benefits__layout { max-width: 1270px; margin: 0 auto; } .hto-benefits__title { margin: 0 0 50px; text-align: center; font-size: 32px; line-height: 60px; color: #000000; } .hto-benefits__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 40px; } .hto-benefits__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 30%; flex: 1 0 30%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .hto-benefits__item-image { max-width: 212px; max-height: 158px; margin-bottom: 30px; -ms-flex-negative: 0; flex-shrink: 0; } .hto-benefits__item-description { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 20px; line-height: 30px; color: rgba(0, 0, 0, .7); white-space: pre-line; } .hto-steps { padding: 60px 170px 120px; } .hto-steps__header { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hto-steps__header-line { border-bottom: 1px solid rgba(0, 0, 0, .2); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .hto-steps__layout { max-width: 1270px; margin: 0 auto; } .hto-steps__title { padding: 0 67px; margin: 0; -ms-flex-negative: 0; flex-shrink: 0; font-size: 30px; line-height: 35px; color: #000000; } .hto-steps__list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 40px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 60px; } .hto-steps__item { max-width: 300px; padding: 30px; background-color: #fafafa; } .hto-steps__item-image { max-width: 225px; max-height: 448px; margin-bottom: 30px; display: block; margin-left: auto; margin-right: auto; } .hto-steps__item-title { margin: 0 0 8px; text-align: center; font-size: 16px; line-height: 19px; color: #000000; } .hto-steps__item-description { margin-bottom: 0; text-align: center; font-size: 12px; line-height: 18px; color: rgba(0, 0, 0, .7); } .hto-steps__hint { margin-bottom: 40px; font-size: 12px; line-height: 30px; text-align: justify; color: rgba(0, 0, 0, .7); } .hto-steps__button { margin: 0 auto; } @media (max-width: 1050px) { .hto .hto-hero { padding: 60px 20px 20px 20px; } .hto .hto-hero__layout .owndays-btn { padding: 16px !important; } .hto .hto-benefits { padding: 60px 20px 20px 20px; } .hto .hto-benefits__list { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; overflow-x: scroll; } .hto .hto-steps { padding: 60px 20px 20px 20px; } .hto .hto-steps__list { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; overflow-x: scroll; } .hto .hto-steps .owndays-btn { padding: 16px !important; } } .owndays-btn { display: block; padding: 12px; border-width: 1px; border-style: solid; text-align: center; font-size: 14px; line-height: 120%; } .owndays-btn:focus, .owndays-btn:hover { text-decoration: none; } .owndays-btn--white { background: #FFFFFF; border-color: #555555; color: #555555; } .owndays-btn--white:active, .owndays-btn--white:hover { color: #ffffff; background-color: #555555; } .owndays-btn--white-no-hover:hover { background-color: #FFFFFF; color: #555555; } .owndays-btn--black { background: #000; backdrop-filter: blur(7px); color: #FFF; } .owndays-btn--black:active, .owndays-btn--black:hover { color: #000; background-color: #FFF; } .owndays-btn--black-no-hover:hover { background-color: #000; color: #FFF; } .owndays-btn--white-secondary { background: #FFFFFF; color: #000000; border: none; opacity: 0.7; } .owndays-btn--white-secondary:active, .owndays-btn--white-secondary:hover { color: #ffffff; background-color: #555555; } .owndays-btn--white-secondary-no-hover:hover { background-color: #FFFFFF; color: #000000; } .owndays-btn--white-ternary { background: #FFFFFF; border: 1px solid #555555; } .owndays-btn--white-ternary:active, .owndays-btn--white-ternary:hover { color: #ffffff; background-color: #555555; } .owndays-btn--white-ternary-no-hover:hover { background-color: #FFFFFF; color: #000000; } .owndays-btn--white-4 { background: #FFFFFF; color: #000000; border: 1px solid #000; -webkit-box-shadow: 0px 4px 9px 0px #000; box-shadow: 0px 4px 9px 0px #000; } .owndays-btn--white-4:active, .owndays-btn--white-4:hover { color: #ffffff; background-color: #555555; } .owndays-btn--white-4-no-hover:hover { background-color: #FFFFFF; color: #000000; } .owndays-btn--white-5 { background: #FFFFFF; color: #000000; border: 1px solid #000; } .owndays-btn--white-5:active, .owndays-btn--white-5:hover { color: #ffffff; background-color: #000; } .owndays-btn--white-5-no-hover:hover { background-color: #FFFFFF; color: #000000; } .owndays-btn--white-6 { background: #FFFFFF; color: #444; border: 1px solid #546073; } .owndays-btn--white-6:active, .owndays-btn--white-6:hover { color: #ffffff; background-color: #546073; } .owndays-btn--white-6-no-hover:hover { background-color: #FFFFFF; color: #444; } .owndays-btn--white-7 { background-color: #FFFFFF; color: #444; border: 1px solid #444; } .owndays-btn--white-8 { background-color: #FFFFFF; color: #546073; border: none; } .owndays-btn--transparent-light { background: transparent; border-color: #555555; color: #555555; } .owndays-btn--transparent-light:active, .owndays-btn--transparent-light:hover { color: #ffffff; background-color: #555555; } .owndays-btn--transparent-light-no-hover:hover { background-color: transparent; color: #555555; } .owndays-btn--grey { background: #546073; border-color: #555555; color: #ffffff; } .owndays-btn--grey:active, .owndays-btn--grey:hover { color: #fff; background-color: #546073; } .owndays-btn--borderless { border-width: 0; } .owndays-btn--grey-no-hover:hover { background-color: #546073; color: #ffffff; } .owndays-btn--grey-secondary { background: #FAFAFA; color: #546073; } .owndays-btn--grey-secondary:active, .owndays-btn--grey-secondary:hover { color: #FAFAFA; background-color: #546073; } .owndays-btn--grey-secondary-no-hover:hover { background-color: #FFFFFF; color: #555555; } .owndays-btn--grey-tertiary { background: rgba(84, 96, 115, 0.10196); color: #546073; } .owndays-btn--grey-tertiary:active, .owndays-btn--grey-tertiary:hover { color: #fff; background-color: #546073; } .owndays-btn--grey-tertiary-no-hover:hover { background-color: #FFFFFF; color: #555555; } .owndays-btn--oval-white { display: -webkit-box; display: -ms-flexbox; display: flex; border: solid #fff 1px; border-radius: 9999px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; color: #000; background-color: #fff; -webkit-transition: border-color 0.15s ease-out, background-color 0.15s ease-out; transition: border-color 0.15s ease-out, background-color 0.15s ease-out; } .owndays-btn--oval-white:hover { border-color: rgba(255, 255, 255, .75); background-color: rgba(255, 255, 255, .75); } .owndays-btn--oval-black, .owndays-btn--oval-transparent { display: -webkit-box; display: -ms-flexbox; display: flex; border: solid #fff 1px; border-radius: 9999px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; background-color: #000; -webkit-transition: border-color 0.15s ease-out, background-color 0.15s ease-out; transition: border-color 0.15s ease-out, background-color 0.15s ease-out; } .owndays-btn--oval-black:hover, .owndays-btn--oval-transparent:hover { border-color: rgba(255, 255, 255, .75); background-color: rgba(255, 255, 255, .75); } .owndays-btn--oval-transparent { border: solid #fff 2px; color: #fff; background-color: transparent; -webkit-transition: border-color 0.15s ease-out, color 0.15s ease-out; transition: border-color 0.15s ease-out, color 0.15s ease-out; } .owndays-btn--oval-transparent:hover { border-color: #fff; color: #fff; } .owndays-btn--oval-grey { display: -webkit-box; display: -ms-flexbox; display: flex; border: solid #546073 1px; border-radius: 9999px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; color: #fff; background-color: #546073; -webkit-transition: background-color 0.15s ease-out; transition: background-color 0.15s ease-out; } .owndays-btn--oval-grey:hover { border-color: rgba(84, 96, 115, .75); background-color: rgba(84, 96, 115, .75); } .owndays-btn--secondary { font-family: 'Founders Grotesk'; font-size: 15px; font-weight: 400; line-height: 1; padding: 16px 40px 17px; border-radius: 10rem; border-color: #546073; color: #546073; background-color: #ffffff; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .owndays-btn--secondary:hover { background-color: #546073; color: #fff; } .owndays-btn:disabled { background-color: #C5C5C5; border: none; } .owndays-btn:disabled:hover { background: #546073; color: #fff; cursor: not-allowed; } .owndays-btn-font--mobile { font-family: 'Raleway', sans-serif; font-weight: 600; } .od-membership { width: 100%; margin: 0 auto; } .od-membership-banner { width: 100%; margin: 0 auto; } .od-membership__title--features { font-size: 48px; line-height: 56px; color: #000000; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 80px; } .od-membership__title--features:before, .od-membership__title--features:after { content: ' '; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; border-bottom: 1px solid #000000; opacity: 0.2; } .od-membership__title--features:before { margin: auto 67px auto 0; } .od-membership__title--features:after { margin: auto 0 auto 67px; } .od-membership-perks { width: 100%; } .od-membership-perks__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; margin-top: 120px; font-size: 48px; line-height: 56px; color: #000000; padding: 0 283px; } .od-membership-perks__description { font-size: 20px; line-height: 40px; color: #000000; opacity: 0.7; text-align: center; padding: 0 283px; margin-top: 40px; } .od-membership-perks__btns { margin-top: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 76px; } .od-membership-features { width: 100%; margin-top: 120px; } .od-membership-features__table { width: 811px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; border-top: 1px solid; border-left: 1px solid; border-right: 1px solid; border-color: #555555; } .od-membership-features__table-item { width: 404px; min-height: 404px; border-bottom: 1px solid #555555; } .od-membership-features__table-item:nth-child(2n+1) { border-right: 1px solid #555555; } .od-membership-features__table-item__title { max-width: 314px; margin: 0 auto; opacity: 0.7; margin-top: 40px; font-size: 24px; line-height: 40px; text-align: center; } .od-membership-ref-friend { margin-top: 20px; } .od-membership-ref-friend-container { width: 100%; padding: 0 200px; margin-top: 40px; } .od-membership-ref-friend-container .od-membership-information { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 19px; } .od-membership-ref-friend-container .od-membership-information__block { width: 100%; min-height: 236px; background-color: #FAFAFA; } .od-membership-ref-friend-container .od-membership-information__block__content { width: 100%; padding: 40px; } .od-membership-ref-friend-container .od-membership-information__block__content__title { font-size: 20px; line-height: 23px; color: #000000; opacity: 0.5; } .od-membership-ref-friend__description { width: 100%; padding: 0 283px; color: #000000; text-align: center; opacity: 0.7; font-size: 20px; line-height: 40px; } .od-membership-account-reg { width: 100%; padding: 60px 0; background-color: #FAFAFA; text-align: center; margin: 120px 0 60px 0; } .od-membership-account-reg__title { width: 100%; font-size: 48px; line-height: 56px; color: #000000; } .od-membership-account-reg__btn { width: 100%; margin-top: 80px; } .od-membership-account-reg__btn button { width: 518px; margin: 0 auto; padding: 30px 0; } .od-membership-account-reg__description { margin-top: 40px; width: 100%; color: #000000; font-size: 20px; line-height: 40px; opacity: 0.7; } @media screen and (max-width: 768px) { .od-membership .od-membership-perks__title, .od-membership .od-membership-perks__description, .od-membership .od-membership-perks__btns { padding: 0 20px; } .od-membership .od-membership-perks__title, .od-membership .od-membership-perks__description { margin-top: 30px; } .od-membership .od-membership-perks__title { font-size: 32px; line-height: 42px; } .od-membership .od-membership-perks__btns { margin-top: 15px; gap: 0; } .od-membership .od-membership-features { margin-top: 50px; } .od-membership .od-membership-features__table { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .od-membership .od-membership-features__table-item { width: 100%; border: none; border-bottom: 1px solid #555555; } .od-membership .od-membership-features__table-item:first-child { border-top: 1px solid #555555; } .od-membership .od-membership-ref-friend-container { padding: 0 20px; } .od-membership .od-membership-ref-friend__description { padding: 0 20px; } .od-membership .od-membership-account-reg { margin: 50px 0 50px 0; padding: 20px; } .od-membership .od-membership-account-reg__title, .od-membership .od-membership-account-reg__btn, .od-membership .od-membership-account-reg__description { padding: 0 20px; } .od-membership .od-membership-account-reg__title { font-size: 32px; line-height: 42px; } .od-membership .od-membership-account-reg__btn { margin-top: 50px; } .od-membership .od-membership-account-reg__btn button { width: 100%; padding: 10px 0; } .od-membership .od-membership__title--features { text-align: center; font-size: 40px; margin-bottom: 50px; } } .od-circle { position: relative; width: 150px; height: 150px; border-radius: 50%; background-color: #F5F2EA; margin: 60px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-circle__p { position: absolute; top: 61px; left: 63px; } .od-circle__smile-first { position: absolute; top: 61px; left: 49px; } .od-circle__smile-second { position: absolute; top: 61px; left: 84px; } .od-circle__stairs-border { position: absolute; top: 48px; left: 48px; } .od-circle__vector { position: absolute; top: 45px; left: 45px; } .od-membership-block { width: 100%; margin-top: 20px; } .od-membership-block__table { margin-top: 40px; } .od-membership-block__table-item { width: 100%; padding: 0 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .od-membership-block__table-item--ref-friend { width: 100%; padding: 0 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 19px; } @media screen and (max-width: 768px) { .od-membership-block__table-item--ref-friend { padding: 0 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .od-membership-block__table-item--care { width: 100%; padding: 0 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 19px; } .od-membership-block__table-item__content--ref-friend { min-height: 236px; width: 50%; padding: 40px; background-color: #fafafa; } @media screen and (max-width: 768px) { .od-membership-block__table-item__content--ref-friend { width: 100%; } } .od-membership-block__table-item__content--care { min-height: 253px; width: 50%; padding: 40px; background-color: #fafafa; } .od-membership-block__table-item__content--points { min-height: 309px; width: 50%; padding: 40px; background-color: #fafafa; } .od-membership-block__table-item__content__title { color: #000000; font-size: 20px; line-height: 23px; opacity: 0.5; } .od-membership-block__table-item__content__rebate { margin-top: 40px; color: #000000; } .od-membership-block__table-item__content__rebate .text-bold { font-size: 48px; line-height: 56px; } .od-membership-block__table-item__content__rebate .text-reg { font-size: 24px; line-height: 28px; } .od-membership-block__table-item__content__rebate .care-text-bold { font-size: 24px; line-height: 54px; } .od-membership-block__table-item__content__rebate .care-text-bold--secondary { font-size: 48px; line-height: 56px; } .od-membership-block__table-item__content__rebate .care-text-reg { font-size: 24px; line-height: 28px; } .od-membership-block__table-item__content__description { font-size: 20px; line-height: 23px; color: #000000; opacity: 0.5; margin-top: 15px; } .od-membership-block__table-item__content__rebate-description { font-size: 14px; line-height: 16px; color: #000000; opacity: 0.5; margin-top: 40px; } .od-membership-block__table-item__img { width: 50%; min-height: 309px; } .od-membership-block__table-item__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 1024px) { .od-membership-block__table-item { width: 100%; padding: 0 20px; } } @media screen and (max-width: 768px) { .od-membership-block__table-item { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding: 0 20px; } .od-membership-block__table-item__content--points { width: 100%; } .od-membership-block__table-item__img { width: 100%; min-height: 100%; } .od-membership-block__table-item:nth-child(2n) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .od-membership-block__table-item__content__rebate .text-bold { font-size: 32px; } .od-membership-block__table--ref-friend, .od-membership-block__table--care, .od-membership-block__table--points { width: 100%; padding: 0 20px; } .od-membership-block__table__description-list, .od-membership-block__table__terms-conditions { padding: 0 20px; } } .od-membership-block__description-list { padding: 0 200px; margin-top: 40px; } .od-membership-block__description-list li { list-style: inside; font-size: 16px; line-height: 40px; color: #000000; opacity: 0.7; } @media screen and (max-width: 768px) { .od-membership-block__description-list { padding: 0 20px; } .od-membership-block__description-list li { font-size: 16px; line-height: 24px; } } .od-membership-block__terms-conditions { color: #000000; padding: 0 200px; margin-top: 40px; opacity: 0.7; } .od-membership-block__terms-conditions__title { font-size: 16px; line-height: 40px; } .od-membership-block__terms-conditions__description { font-size: 12px; line-height: 30px; } .od-membership-heading__subtitle { width: 100%; font-size: 20px; line-height: 23px; color: #000000; margin-top: 120px; text-align: center; opacity: 0.5; } .od-membership-heading__title { font-size: 48px; line-height: 56px; color: #000000; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 41px; margin-top: 20px; } .od-membership-heading__title:before, .od-membership-heading__title:after { content: ' '; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; border-bottom: 1px solid #000000; opacity: 0.2; } .od-membership-heading__title:before { margin: auto 67px auto 0; } .od-membership-heading__title:after { margin: auto 0 auto 67px; } .od-membership-heading__description { font-size: 20px; line-height: 40px; color: #000000; opacity: 0.5; padding: 0 283px; text-align: center; } @media screen and (max-width: 768px) { .od-membership-heading__subtitle { margin-top: 50px; } .od-membership-heading__title { font-size: 32px; } .od-membership-heading__description { padding: 0 20px; } } .od-membership-status { width: 380px; padding: 40px; min-height: 461px; } .od-membership-status__title { width: 100%; font-size: 32px; line-height: 40px; text-align: center; } .od-membership-status__points { margin: 23px 0 76px 0; font-size: 24px; line-height: 40px; width: 100%; text-align: center; } .od-membership-status__btns { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 11px; } @media screen and (max-width: 768px) { .od-membership-status { width: auto; padding: 20px; min-height: auto; } .od-membership-status__title { font-size: 24px; line-height: 32px; } .od-membership-status__points { margin: 15px 0 40px 0; font-size: 18px; line-height: 32px; } } .block-color-bronze { background-color: #FFF5EA; } .block-color-silver { background-color: #FBFBFB; } .block-color-gold { background-color: #FFFAE1; } .od-membership-statuses-container { width: 100%; padding: 0 200px; margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 35px; } @media screen and (max-width: 768px) { .od-membership-statuses-container { padding: 0 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 20px; } } .od-membership-function-container { margin-top: 40px; padding: 0 200px; } .od-membership-function-container .od-membership-function { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 35px; } .od-membership-function-container .od-membership-function__item { width: 380px; min-height: 628px; background-color: #FAFAFA; margin-bottom: 5px; padding: 40px; color: #000000; text-align: center; } .od-membership-function-container .od-membership-function__item__title { margin-top: 41px; font-size: 22px; line-height: 26px; } .od-membership-function-container .od-membership-function__item__description { margin-top: 10px; font-size: 16px; line-height: 19px; opacity: 0.7; } @media screen and (max-width: 768px) { .od-membership-function-container { padding: 0 20px; } .od-membership-function-container .od-membership-function { gap: 20px; } .od-membership-function-container .od-membership-function__item { width: 100%; padding: 20px 20px 30px 20px; min-height: auto; } .od-membership-function-container .od-membership-function__item__title { margin-top: 20px; font-size: 22px; line-height: 26px; } } .od-banner { width: 100%; position: relative; } .od-banner__content { text-align: center; position: absolute; width: 100%; top: 50%; color: #ffffff; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .od-banner__content__img { margin: 0 auto 100px auto; } .od-banner__content__title { width: 100%; color: #FFFFFF; line-height: 84px; font-size: 72px; padding: 0 197px; } @media screen and (max-width: 768px) { .od-banner__content__title { font-size: 36px; line-height: 48px; padding: 0 20px; } .od-banner__content__img { margin-bottom: 50px; } } .breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 0; margin: 0; } .breadcrumb.breadcrumb--2 { background-color: #fff; border-top: 1px solid rgba(84, 96, 115, .1); border-bottom: 1px solid rgba(84, 96, 115, .1); padding: 10px 20px; font-size: 16px; line-height: 1.25; letter-spacing: -0.02em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0; } .breadcrumb.breadcrumb--2 > li + li::before { content: '>'; padding: 0 15px; } .breadcrumb-list { margin: 0; padding: 0; } .breadcrumb-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0.3; font-family: "Founders Grotesk", sans-serif; } .breadcrumb-item a { text-decoration: none; color: #000; } .breadcrumb-item a:hover { text-decoration: none; } .breadcrumb-item.active { color: #000; opacity: 1; } @media (min-width: 1024px) { .breadcrumb.breadcrumb--2 { padding: 10px 50px; } } .breadcrumb.breadcrumb--2 > li { display: -webkit-box; display: -ms-flexbox; display: flex; } .od-upload-prescription-d { display: -webkit-box; display: -ms-flexbox; display: flex; font-style: normal; max-width: 1440px; margin: 0 auto; padding: 0px 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-upload-prescription-d__left { margin-right: 100px; padding-top: 50px; position: relative; } .od-upload-prescription-d__left__thumbnail { max-width: 30vw; height: auto; } .od-upload-prescription-d__right { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } .od-upload-prescription-d .od-upload-prescription-card { background: #fafafa; padding: 45px 30px; } .od-upload-prescription-d .od-upload-prescription-card__title { font-weight: 700; font-size: 24px; line-height: 28px; letter-spacing: 0.3px; color: #000000; font-family: 'Founders Grotesk', sans-serif; margin-bottom: 40px; } .od-upload-prescription-d .od-upload-prescription-card__para { font-family: 'NeuzeitGroReg', sans-serif; font-weight: 400; font-size: 20px; line-height: 19px; letter-spacing: 0.3px; color: #808080; margin-bottom: 35px; } .od-upload-prescription-d .od-upload-prescription-card__upload { color: #808080; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0px 34px; } .od-upload-prescription-d .od-upload-prescription-card__upload-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; text-decoration: none; font-size: 20px; font-family: 'Founders Grotesk', sans-serif; color: #000000; } .od-upload-prescription-d .od-upload-prescription-card__upload-item img { max-width: 20px; margin-right: 10px; } .od-upload-prescription-d .od-upload-prescription-card__upload-item:not(:last-child) { margin-right: 20px; } .od-upload-prescription-d .od-upload-prescription-line { margin-bottom: 30px; } .od-upload-prescription-d__footer { margin-top: 100px; } .od-upload-prescription-d__footer__acceptTerms { font-size: 16px; font-family: 'NeuzeitGroReg', sans-serif; opacity: 0.5; margin-bottom: 20px; } .od-upload-prescription-d__footer .od-upload-prescription-d__continueBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-family: 'Founders Grotesk', sans-serif; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; } .od-product-preview { width: 50%; overflow: hidden; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .od-product-preview__content__img { -webkit-transform: scale(1.2); transform: scale(1.2); } .od-product-preview__content__description { color: #000; font-family: 'Founders Grotesk', sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; text-align: center; opacity: 0.5; margin-top: -20px; } .od-product-preview__content__description hr { display: none; } .od-payment-page { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 90px 115px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 170px; background-color: #f7f7f7; min-height: calc(100vh - 83px); } .od-payment-page__content { display: grid; width: 100%; max-width: 1250px; margin: 0 auto; grid-template-columns: 3.5fr 1fr; gap: 40px; } .od-payment-page__items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .od-payment-page__add-items { width: 100%; padding-top: 28px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .od-payment-page__add-items span { color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; } .od-payment-page__success { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; height: calc(100vh - 83px); } .od-payment-page__success .od-payment-page-d-success-image { margin-top: -100px; } .od-payment-methods__title { padding-top: 28px; color: #444; font-size: 24px; font-style: normal; font-weight: 400; letter-spacing: -0.48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-payment-methods__title-backBTN { cursor: pointer; margin-bottom: -11px; margin-right: 15px; } .od-payment-methods-active { display: grid; padding: 30px 16px; margin-top: 16px; grid-template-columns: repeat(2, 1fr); gap: 24px; background-color: #fff; } .od-payment-methods-options { height: 100%; border-right: 1px dashed rgba(84, 96, 115, .1); } .od-payment-methods-options__option { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .od-payment-methods-options__option-label { color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; } .od-payment-methods-options .atom-payment { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .od-payment-methods-options .atom-payment__title { overflow: hidden; color: #444; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 24px; letter-spacing: -0.28px; } .od-payment-methods-options .atom-payment__description { overflow: hidden; color: rgba(68, 68, 68, 0.69804); text-overflow: ellipsis; font-size: 12px; letter-spacing: -0.24px; } .od-payment-methods-options__others { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 16px 0 52px; margin-top: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .od-payment-methods-checkbox { position: relative; } .od-payment-methods-checkbox__check { position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; cursor: pointer; } .od-payment-methods-checkbox__check--active, .od-payment-methods-checkbox__check:hover { opacity: 1; } .od-payment-methods-more { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; border-top: 1px dashed rgba(84, 96, 115, .1); -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; background-color: #fff; } .od-payment-methods-more__method { display: -webkit-box; display: -ms-flexbox; display: flex; width: 46px; height: 32px; border: 1px solid rgba(84, 96, 115, .1); border-radius: 4px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-payment-methods-options__radio__check { height: 13px; width: 13px; } .od-primer-card__two-fields-wrapper { display: grid; margin-top: 24px; grid-template-columns: repeat(2, 1fr); gap: 24px; } .od-primer-card__fields-wrapper { margin-top: 24px; } .od-primer-card .axtra-error-field { display: none; } .od-primer-card-field { display: -webkit-box; display: -ms-flexbox; display: flex; height: 64px; padding: 20px 24px; border-radius: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; background-color: #FAFAFA; overflow: hidden; } .od-primer-card-field__label { margin-bottom: 0; color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.32px; white-space: nowrap; } .od-primer-card-field__input { height: 24px; padding: 0; border: none; color: #444; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; background-color: transparent; outline: none; } .od-primer-card-field__input::-webkit-input-placeholder { opacity: 0.2; } .od-primer-card-field__input::-moz-placeholder { opacity: 0.2; } .od-primer-card-field__input::-ms-input-placeholder { opacity: 0.2; } .od-primer-card-field__input::placeholder { opacity: 0.2; } .od-shimmer-bg { -webkit-animation-duration: 2.2s; animation-duration: 2.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: shimmer; animation-name: shimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #ddd; background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(119, 119, 119, 0.20784)), color-stop(18%, #f0f0f0), color-stop(33%, rgba(119, 119, 119, 0.20784))); background: linear-gradient(to right, rgba(119, 119, 119, 0.20784) 8%, #f0f0f0 18%, rgba(119, 119, 119, 0.20784) 33%); background-size: 1200px 100%; } @-webkit-keyframes shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } @keyframes shimmer { 0% { background-position: -1200px 0; } 100% { background-position: 1200px 0; } } .od-cart-bill-details { width: 387px; margin-bottom: 24px; } .od-cart-bill-details__title { color: #444; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; margin-bottom: 24px; } .od-cart-bill-details__rows { display: grid; padding: 16px 16px 0 16px; grid-template-columns: auto -webkit-min-content; grid-template-columns: auto min-content; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 8px; -webkit-column-gap: 32px; -moz-column-gap: 32px; column-gap: 32px; white-space: nowrap; background: #fff; } .od-cart-bill-details__item { color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; } .od-cart-bill-details__item-price { color: #444; text-align: right; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; } .od-cart-bill-details__item-price--free { color: #4D9855; } .od-cart-bill-details__total-wrapper { padding-bottom: 16px; } .od-cart-bill-details__total { color: #444; font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.36px; } .od-cart-bill-details__total-price { text-align: right; color: #444; font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.36px; } .od-cart-bill-details__button-proceed { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 16px 24px; border: 1px solid #546073; border-radius: 50px; margin-top: 16px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 21px; color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.4px; white-space: nowrap; background-color: #546073; -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; } .od-cart-bill-details__unlocked-discount { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 8px 16px; margin-top: 17px; color: #4D9855; font-size: 16px; } .od-cart-bill-details__unlocked-discount img { margin-top: -4px; } .od-cart-bill-details__unlocked-discount--exclude { color: #000; margin-top: 0px; } .od-cart-bill-details__button-icon { font-size: 24px; } .od-cart-bill-details__coupon-gift-btns { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-top: 17px; gap: 16px; } .od-cart-bill-details__features { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; margin-top: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 26px; } .od-cart-bill-details__delivery { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 24px 0; } .od-cart-bill-details__delivery__title { color: #444; font-size: 24px; letter-spacing: -0.48px; } .od-cart-bill-details__delivery__change { color: #546073; font-size: 16px; line-height: 18px; letter-spacing: -0.32px; -webkit-text-decoration-line: underline; text-decoration-line: underline; } .od-cart-bill-details__feature { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 60px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-cart-bill-details__image { max-width: 24px; max-height: 24px; } .od-cart-bill-details__feature-title { margin-top: 8px; text-align: center; color: #444; font-size: 12px; font-style: normal; font-weight: 400; line-height: 12px; text-transform: capitalize; } .od-cart-bill-details-membership { padding: 16px; background-color: #fff; } .od-cart-bill-details-membership__checkbox-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; cursor: pointer; } .od-cart-bill-details-membership__checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-cart-bill-details-membership__checkbox::after { content: ''; width: 20px; height: 20px; border: 2px solid #546073; border-radius: 4px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; } .od-cart-bill-details-membership__checkbox--checked { background: url(/assets/svg/od-checkbox-grey-icon.svg); } .od-cart-bill-details-membership__checkbox--checked::after { display: none; } .od-cart-bill-details-membership__checkbox-label { color: #546073; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; } .od-cart-bill-details-membership__discount { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 12px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; } .od-apply-coupon { position: relative; overflow: hidden; } .od-apply-coupon__button { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 12px 20px; border-radius: 60px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; color: #546073; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; white-space: nowrap; background: #E9EEF6; cursor: pointer; } .od-apply-coupon__button--unauthorized { background-color: #F0F0F0; opacity: 0.7; } .od-apply-coupon__backdrop { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; opacity: 0.5; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; z-index: 999; } .od-apply-coupon__sidebar--m { display: block; width: 496px; max-width: 100vw; height: 100vh; padding: 50px; margin: 0 auto; position: fixed; top: 0; right: 0; z-index: 1200 !important; overflow-x: hidden; background-color: #FFF; -webkit-animation: animateleft 0.5s; animation: animateleft 0.5s; } .od-apply-coupon__sidebar--d { display: block; width: 534px; max-width: 100vw; height: 100vh; padding: 50px 100px; margin: 0 auto; position: fixed; top: 0; right: 0; z-index: 1200 !important; overflow-x: hidden; background-color: #FFF; -webkit-animation: animateleft 0.5s; animation: animateleft 0.5s; } @-webkit-keyframes animateleft { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateleft { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .od-coupon-items-wrapper { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .od-coupon-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50px; } .od-coupon-items-multiple { color: rgba(0, 0, 0, 0.50196); font-size: 14px; line-height: 24px; font-weight: 400; } .od-coupon-items-multiple li { list-style-type: disc; } .od-coupon-items-header { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } .od-coupon-items-header__title { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; color: #000000; } .od-coupon-items-header__icon { cursor: pointer; } .od-coupon-items-add { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .od-coupon-items-add__input { display: block; width: 100%; height: 56px; padding: 16px 14px; border: 1px solid #e2e2ee; background-color: #ffffff; font-family: Raleway; font-size: 14px; line-height: 24px; font-weight: 400; color: #000000; } .od-coupon-items-add__error { font-family: Raleway; font-weight: 400; font-size: 14px; line-height: 24px; color: #a94442; } .od-coupon-tems-item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; background-color: #ffffff; overflow: hidden; } .od-coupon-tems-item__title { font-family: Raleway; font-weight: 700 !important; font-size: 14px; line-height: 20px; color: #000000; } .od-coupon-tems-item__description { font-family: Raleway; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.02em; color: #000000; text-decoration: none; } .od-coupon-tems-item__terms-conditions { font-family: Raleway; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.02em; color: #000000; text-decoration: none; } .od-coupon-tems-item__button { padding: 0; border: none; -ms-flex-item-align: start; align-self: flex-start; font-family: Raleway; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: -0.02em; color: #000000; text-transform: capitalize; -webkit-text-decoration-line: underline; text-decoration-line: underline; background-color: transparent; } .od-coupon-tems-item__divider { width: 100%; border-top: 1px solid rgba(0, 0, 0, .2); margin: 0; } .od-gift-codes-wrapper { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .od-gift-codes { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50px; } .od-gift-codes-multiple { color: rgba(0, 0, 0, 0.50196); font-size: 14px; line-height: 24px; font-weight: 400; } .od-gift-codes-multiple li { list-style-type: disc; } .od-gift-codes-header { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } .od-gift-codes-header__title { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; color: #000000; } .od-gift-codes-header__icon { cursor: pointer; } .od-gift-codes-add { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .od-gift-codes-add__input { display: block; width: 100%; height: 56px; padding: 16px 14px; border: 1px solid #E2E2EE; background-color: #FFFFFF; font-family: Raleway, sans-serif; font-size: 14px; line-height: 24px; font-weight: 400; color: #000000; } .od-gift-codes-add__error { font-family: Raleway, sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; color: #a94442; } .od-coupon-tems-item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; background-color: #ffffff; overflow: hidden; } .od-coupon-tems-item__title { font-family: Raleway, sans-serif; font-weight: 700 !important; font-size: 14px; line-height: 20px; color: #000000; } .od-coupon-tems-item__description { font-family: Raleway, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.02em; color: #000000; text-decoration: none; } .od-coupon-tems-item__terms-conditions { font-family: Raleway, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.02em; color: #000000; text-decoration: none; } .od-coupon-tems-item__button { padding: 0; border: none; -ms-flex-item-align: start; align-self: flex-start; font-family: Raleway, sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: -0.02em; color: #000000; text-transform: capitalize; -webkit-text-decoration-line: underline; text-decoration-line: underline; background-color: transparent; } .od-coupon-tems-item__divider { width: 100%; border-top: 1px solid rgba(0, 0, 0, .2); margin: 0; } .od-add-gift { position: relative; overflow: hidden; } .od-add-gift__button { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 12px 20px; border-radius: 60px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; color: #546073; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; white-space: nowrap; background: #E9EEF6; cursor: pointer; } .od-add-gift__button--unauthorized { background-color: #F0F0F0; opacity: 0.7; } .od-add-gift__backdrop { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; opacity: 0.5; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; z-index: 999; } .od-add-gift__sidebar--m { display: block; width: 496px; max-width: 100vw; height: 100vh; padding: 50px; margin: 0 auto; position: fixed; top: 0; right: 0; z-index: 1200 !important; overflow-x: hidden; background-color: #FFF; -webkit-animation: animateleft 0.5s; animation: animateleft 0.5s; } .od-add-gift__sidebar--d { display: block; width: 534px; max-width: 100vw; height: 100vh; padding: 50px 100px; margin: 0 auto; position: fixed; top: 0; right: 0; z-index: 1200 !important; overflow-x: hidden; background-color: #FFF; -webkit-animation: animateleft 0.5s; animation: animateleft 0.5s; } .od-add-gift .od-applied-gift-cards { margin-bottom: 30px; } @-webkit-keyframes animateleft { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateleft { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .od-applied-gift-cards { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-column: span 2; } .od-applied-gift-cards__card { padding: 10px 15px; background-color: rgba(84, 96, 115, .1); color: #546073; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .od-applied-gift-cards__card img { width: 12px; height: 12px; cursor: pointer; } .membership-discount__container { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 15px; grid-column: span 2; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; background-color: #E9EEF6; margin: 0 -16px; } .membership-discount__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; cursor: pointer; } .membership-discount__details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; } @media (min-width: 767px) { .membership-discount__details { font-size: 16px; } } .od-payment-success-d { display: grid; padding: 40px 100px 36px 100px; margin: 0; grid-template-columns: repeat(2, 1fr); gap: 35px; background-color: #fafafa; } .od-payment-success-d__content-wrapper { padding: 0px 40px; width: 50%; } .od-payment-success-d-left__title { color: #444; font-size: 24px; letter-spacing: -0.48px; } .od-payment-success-d-banner { padding: 55px 40px; position: relative; background: url("https://static1.lenskart.com/owndays/img/payment-success/order-confirm-banner-pc.webp"); background-size: cover; background-repeat: no-repeat; background-position: center; margin-top: 24px; } .od-payment-success-d-banner__title { color: #fff; font-size: 32px; line-height: 28px; letter-spacing: -0.64px; } .od-payment-success-d-banner__description { margin-top: 16px; color: #fff; font-size: 20px; line-height: 28px; letter-spacing: -0.4px; max-width: 424px; } .od-payment-success-d-banner__btn { margin-top: 40px; padding: 12px 24px; border-radius: 60px; background: #fff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; cursor: pointer; } .od-payment-success-d-banner__btn span { color: #546073; font-size: 20px; line-height: 24px; } .od-payment-success-d-next { padding: 34px 40px; margin-top: 24px; background-color: #fff; } .od-payment-success-d-next__title { color: #000; font-size: 32px; font-weight: 500; letter-spacing: -0.64px; } .od-payment-success-d-next__description { margin-top: 15px; color: #000; font-size: 20px; line-height: 35px; } .od-payment-success-d-next__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; margin-top: 39px; } .od-payment-success-d-next__btns__divider { color: #000; font-size: 20px; } .od-payment-success-d-next__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16px; padding: 18px 40px; color: #546073; font-size: 16px; line-height: 24px; border-radius: 60px; background: #e9eef6; border: none; } .od-payment-success-d-prescriptions__title { margin-bottom: 14px; color: #444; font-size: 24px; line-height: 36px; letter-spacing: -0.48px; } .od-payment-success-d-prescription-card { display: grid; padding: 16px 24px; margin-bottom: 16px; grid-template-columns: 291fr 328fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; } .od-payment-success-d-prescription-card__thumbnail-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-payment-success-d-prescription-card__thumbnail { max-width: 100%; } .od-payment-success-d-prescription-card__order-no { color: rgba(68, 68, 68, .5); font-size: 14px; line-height: 18px; } .od-payment-success-d-prescription-card__name { margin-top: 8px; color: rgba(68, 68, 68, .7); font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.24px; } .od-payment-success-d-prescription-card__coating { margin-top: 8px; color: rgba(68, 68, 68, .5); font-size: 14px; line-height: 18px; letter-spacing: -0.28px; } .od-payment-success-d-prescription-card__divider { border: none; margin-top: 16px; } .od-payment-success-d-prescription-card__button { width: 100%; padding: 12px 20px; background-color: #546073; text-align: center; color: #fff; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.32px; cursor: pointer; } .od-payment-success-d-prescription-card__button:hover { background-color: #546073; color: #fff; } .od-payment-success-d-prescription-card__status { color: rgba(68, 68, 68, .7); font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.24px; } .od-payment-success-d-container-img { max-width: 150px; height: auto; } .upload-prescription-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; padding: 10px 20px; margin-bottom: 16px; width: 60%; } .upload-prescription-card__thumbnail { width: 40%; } .upload-prescription-card__thumbnail img { height: 120px; } .upload-prescription-card__label { color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; } .upload-prescription-card__name { color: #444; font-size: 16px; line-height: 18px; letter-spacing: -0.32px; } .upload-prescription-sidebar { overflow: hidden; } .upload-prescription-sidebar__product { width: 100%; padding: 24px 32px 16px 32px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upload-prescription-sidebar__product__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; color: #000042; line-height: 20px; } .upload-prescription-sidebar__product__info__order-id { font-size: 14px; font-family: 'Founders Grotesk', sans-serif; } .upload-prescription-sidebar__product__info__title { font-size: 14px; font-family: 'NeuzeitGroReg', sans-serif; } .upload-prescription-sidebar__product__info__description { font-size: 12px; font-family: 'NeuzeitGroReg', sans-serif; } .upload-prescription-sidebar__product .od-pc-image-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upload-prescription-sidebar__product .od-pc-image-container .od-pc-image { height: 128px; } .upload-prescription-sidebar__cross { display: none; } .upload-prescription-sidebar__order-id { padding: 0 34px 24px 34px; font-family: 'Founders Grotesk', sans-serif; font-size: 14px; line-height: 24px; letter-spacing: -0.28px; color: rgba(68, 68, 68, 0.69804); } .upload-prescription-sidebar__title { padding: 0 34px 24px 34px; font-family: 'Founders Grotesk', sans-serif; font-size: 32px; line-height: 36px; letter-spacing: -0.48px; color: #444; } .upload-prescription-sidebar__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 64px 34px 16px 34px; } .upload-prescription-sidebar__heading__back-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .upload-prescription-sidebar__heading__back-btn img { height: 24px; opacity: 0.7; } .upload-prescription-sidebar__heading__back-btn__text { font-size: 16px; color: rgba(68, 68, 68, 0.69804); font-family: 'NeuzeitGroReg', sans-serif; } .upload-prescription-sidebar__heading__close { cursor: pointer; } .upload-prescription-sidebar__heading__close img { height: 24px; opacity: 0.7; } .upload-prescription-sidebar__heading__title { font-size: 24px; line-height: 36px; color: #000042; font-family: 'Founders Grotesk', sans-serif; } .upload-prescription-sidebar__content { padding: 28px 34px; height: calc(100vh - 108px); overflow: scroll; padding-bottom: 200px; } .upload-prescription-sidebar__content .upload-prescription-sidebar__collapaseMenu { background: #fff; border-radius: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: 32px; border: 1px solid rgba(84, 96, 115, .1); padding: 28px 16px; } .upload-prescription-sidebar__content .upload-prescription-sidebar__collapaseMenu-title { font-family: 'Founders Grotesk', sans-serif; color: #444; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 16px; } .upload-prescription-sidebar__content .upload-prescription-sidebar__collapaseMenu-title > div:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .upload-prescription-sidebar__content .upload-prescription-sidebar__collapaseMenu-body-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px 16px; color: #444; font-family: 'NeuzeitGroReg', sans-serif; font-size: 20px; line-height: 20px; letter-spacing: -0.4px; cursor: pointer; background-color: #fafafa; margin-top: 16px; border-radius: 10px; } .upload-prescription-sidebar__footer { position: absolute; bottom: 0; right: 0; left: 0; padding: 24px 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: #fafafa; } .upload-prescription-sidebar__footer__price { color: #444; line-height: 24px; font-family: 'NeuzeitGroReg', sans-serif; font-size: 24px; } .upload-prescription-sidebar__footer__price span { font-family: 'Founders Grotesk', sans-serif; font-size: 32px; } .upload-prescription-sidebar__footer button { cursor: pointer; } .saved-prescription-sidebar-panel { height: 50vh; overflow: hidden; overflow-y: scroll; } .saved-prescription-sidebar-panel__img { margin-top: 24px; } .saved-prescription-sidebar-panel__footer { position: absolute; bottom: 0; right: 0; left: 0; padding: 16px 32px 32px 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; background-color: #fafafa; } .saved-prescription-sidebar-panel__footer button { cursor: pointer; } .saved-prescription-sidebar-panel .saved-prescription-radio { background-color: #fafafa; padding: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 16px; cursor: pointer; } .saved-prescription-sidebar-panel .saved-prescription-radio__left_name { color: #444; font-family: 'Founders Grotesk', sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; /* 166.667% */ letter-spacing: -0.24px; } .saved-prescription-sidebar-panel .saved-prescription-radio__left_date { color: rgba(68, 68, 68, .7); font-family: 'Founders Grotesk', sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; /* 166.667% */ letter-spacing: -0.24px; } .saved-prescription-sidebar-panel .saved-prescription-radio__right_check_uncheck { width: 18px; } .upload-prescription-sidebar-panel__heading-footer { font-family: 'Founders Grotesk', sans-serif; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; list-style: disc; list-style-type: disc; margin-bottom: 8px; color: #333368; } .upload-prescription-sidebar-panel__list { padding-left: 12px; } .upload-prescription-sidebar-panel__list_item { font-family: 'Founders Grotesk', sans-serif; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; list-style: disc; list-style-type: disc; padding-left: 16px; margin-bottom: 20px; color: #333368; } .upload-prescription-sidebar-panel__uploadBtn button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000042; background-color: #fafafa; border: none; cursor: pointer; margin: 16px 0 24px 0; } .upload-prescription-sidebar-panel__footer { position: absolute; bottom: 0; right: 0; left: 0; padding: 16px 32px 32px 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fafafa; } .upload-prescription-sidebar-panel__footer button { cursor: pointer; } .od-pc-image { max-width: 360px; height: 194px; } .od-pc-image-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @-webkit-keyframes fadeIn { 0% { opacity: 0; top: -10px; } 100% { opacity: 1; top: 0px; } } @keyframes fadeIn { 0% { opacity: 0; top: -10px; } 100% { opacity: 1; top: 0px; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; top: 0px; } 100% { opacity: 0; top: -10px; } } @keyframes fadeOut { 0% { opacity: 1; top: 0px; } 100% { opacity: 0; top: -10px; } } .od-custom-error-msg { margin-top: 8px; letter-spacing: -0.02em; font-size: 14px; line-height: 24px; color: #a94442; } .corporate-information { padding: 60px 200px 160px; } .corporate-information__title { margin: 0 0 90px; text-align: center; font-size: 48px; line-height: 60px; letter-spacing: 0em; color: #000000; } .corporate-information__subtitle { margin: 0 0 50px; text-align: center; font-size: 24px; line-height: 28px; letter-spacing: 0em; color: #000000; } .corporate-information__divider { border-top: 1px solid rgba(0, 0, 0, .1); margin: 50px 0; } .corporate-information-table { display: grid; grid-template-columns: 4fr 7.3fr; -webkit-column-gap: 67px; -moz-column-gap: 67px; column-gap: 67px; row-gap: 50px; } .corporate-information-table__cell--title { font-size: 24px; line-height: 28px; letter-spacing: 0em; color: #000000; } .corporate-information-table__cell--info { font-size: 20px; line-height: 23px; letter-spacing: 0em; color: #000000; } .corporate-information-table__list { padding-left: 10px; list-style-type: unset !important; } .corporate-information-table__list-item { font-size: 20px; line-height: 23px; letter-spacing: 0em; list-style-type: unset !important; } .corporate-information-table__list-item--link { color: #7AA4F4; } .corporate-information-table__link { color: #7AA4F4; text-decoration: underline; } .corporate-information-table__link:hover { color: #7AA4F4; } .services-page-hero { position: relative; } .services-page-hero__layout { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; padding: 20px 200px; position: absolute; top: 0; left: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .services-page-hero__logo { margin-bottom: 50px; } .services-page-hero__title { margin: 0; font-size: 72px; line-height: 60px; letter-spacing: 0em; color: #000000; } .services-page-list { padding: 120px 200px 60px; } .services-page-list__layout { max-width: 1200px; padding-bottom: 60px; border-bottom: 1px solid rgba(0, 0, 0, .2); margin: 0 auto; } .services-page-list__description { padding: 0 80px; margin-bottom: 50px; font-size: 20px; line-height: 40px; letter-spacing: 0em; color: #000000; } .services-page-list__grid { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 50px; } .services-page-list__item-info { padding: 40px; } .services-page-list__item-title { margin: 0 0 40px; font-size: 18px; line-height: 21px; letter-spacing: 0em; color: rgba(0, 0, 0, .3); } .services-page-list__item-subtitle { margin-bottom: 20px; font-size: 22px; line-height: 26px; letter-spacing: 0em; color: #000000; } .services-page-list__item-price { margin-bottom: 20px; color: rgba(84, 96, 115, .7); } .services-page-list__item-description { margin-bottom: 0; font-size: 16px; line-height: 28px; letter-spacing: 0em; color: rgba(0, 0, 0, .7); } .services-page-list__item-image { background-repeat: no-repeat; background-position: center; } .od-dkp { width: 100%; } .od-dkp-banner { width: 100%; color: #000000; text-align: center; margin-bottom: 60px; } .od-dkp-banner__img { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 133px; } .od-dkp-banner__title { width: 100%; padding: 0 107px; font-size: 48px; line-height: 60px; margin-top: 80px; } .od-dkp-banner__description { width: 100%; padding: 0 283px; font-size: 20px; line-height: 40px; margin-top: 40px; opacity: 0.7; } .od-dkp-separator { width: 100%; border: 1px solid #000000; opacity: 0.2; } .od-dkp-btns { margin-top: 60px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 76px; } .od-dkp .od-dkp-options { width: 100%; margin: 40px auto; color: #000000; max-width: 1209px; } .od-dkp .od-dkp-options .od-dkp__option-one { background-color: #FAFAFA; margin: 0 auto; padding-bottom: 51px; } .od-dkp .od-dkp-options .od-dkp__option-one__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 53px; padding-left: 100px; } .od-dkp .od-dkp-options .od-dkp__option-one__info__left { max-width: 611px; } .od-dkp .od-dkp-options .od-dkp__option-one__info__left__title { font-size: 16px; line-height: 19px; opacity: 0.5; } .od-dkp .od-dkp-options .od-dkp__option-one__info__left__subTitle { font-size: 32px; line-height: 38px; margin-top: 30px; } .od-dkp .od-dkp-options .od-dkp__option-one__info__left__description { max-width: 564px; margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 30px; font-size: 16px; line-height: 19px; } .od-dkp .od-dkp-options .od-dkp__option-one__info__right { width: 300px; height: 470px; margin: 50px 145px 0 0; } .od-dkp .od-dkp-options .od-dkp__option-one__info__right-new-customer { margin: 100px 120px 100px 0; } .od-dkp .od-dkp-options .od-dkp__option-one__register-btn { margin-top: 50px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .od-dkp .od-dkp-options .od-dkp__option-one__register-btn__description { font-size: 16px; line-height: 19px; color: #000000; } .od-dkp .od-dkp-options .option-two-customer { padding: 50px 100px; } .od-dkp .od-dkp-options .option-two-new-customer { padding: 50px 130px 108px 100px; } .od-dkp .od-dkp-options .od-dkp__option-two { background-color: #FAFAFA; margin: 40px auto; color: #000000; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 39px; } .od-dkp .od-dkp-options .od-dkp__option-two .od-dkp__option-two__info { width: 100%; } .od-dkp .od-dkp-options .od-dkp__option-two__title { font-size: 16px; line-height: 19px; opacity: 0.5; } .od-dkp .od-dkp-options .od-dkp__option-two__subTitle { margin-top: 30px; font-size: 32px; line-height: 37px; } .od-dkp .od-dkp-options .od-dkp__option-two__description { margin-top: 30px; font-size: 16px; line-height: 25px; } .od-dkp .od-dkp-options .od-dkp__option-two__description-list { margin-top: 30px; padding: 0; font-size: 16px; line-height: 19px; } .od-dkp .od-dkp-options .od-dkp__option-two__description-list li { list-style: inside; } .od-dkp .od-dkp-options .od-dkp__option-two__btns { width: 100%; margin-top: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; color: #000000; } .od-dkp .od-dkp-options .od-dkp__option-two-img { width: 284px; height: 202px; } .od-dkp .od-contact-us-content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-dkp .od-contact-us-content__separator { width: 20px; -webkit-transform: rotate(90deg); transform: rotate(90deg); border: 1px solid #000000; opacity: 0.2; } @charset "UTF-8"; .od-faq { width: 100%; color: #000000; margin-bottom: 60px; padding-bottom: 100px; } .od-faq__title { margin: 60px 0 10px 0; font-size: 48px; line-height: 60px; padding: 0 107px; text-align: center; } .od-faq__content { margin-top: 90px; padding: 0 200px; color: #000000; } @media (max-width: 1023px) { .od-faq__content { padding: 20px 20px; margin-top: 20px; } } .od-faq__content__list { width: 100%; } .od-faq__content__list__item-title { width: 100%; font-size: 24px; line-height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 80px; cursor: pointer; margin-top: 80px; position: relative; } .od-faq__content__list__item-title span { margin-left: 24px; } .od-faq__content__list__item-title span::before { position: absolute; top: 0; left: 0; content: '•'; font-size: 24px; } .od-faq__content__list__item-description { width: 100%; background-color: #fbfbfd; padding: 20px; font-size: 20px; line-height: 40px; } .od-faq__content__list__item-description ul li { list-style-type: '*'; text-indent: 10px; } .od-faq__content__list__item-description ul li a { margin-left: 5px; color: #0094c8; text-decoration: none; } .od-care { margin-bottom: 120px; } .od-care-banner { width: 100%; margin: 0 auto; } .od-care-pay-description { width: 100%; text-align: center; } .od-care-pay-description__text { font-size: 48px; line-height: 56px; color: #000000; margin: 120px 0; } .prescription-page { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; padding: 37px 107px 50px 107px; width: 100%; } .prescription-page-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } .prescription-page-title { color: #000; font-size: 48px; font-style: normal; font-weight: 400; line-height: 60px; } .prescription-page-text { font-size: 30px; color: #000; } .prescription-page-content { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 30px; margin-bottom: 50px; } .prescription-page-date { color: #000; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; -ms-flex-item-align: stretch; align-self: stretch; opacity: 0.5; } .prescription-page-table { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; } .prescription-page-table-row { display: grid; grid-template-rows: repeat(3, 1fr); background-color: #FFF; } .prescription-page-table-title { color: #000; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.4px; padding: 13px 77px; border: 1px solid #D0D0D0; text-align: center; } .prescription-page-table-cell { color: #000; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.4px; padding: 13px 77px; border: 1px solid #D0D0D0; text-align: center; } .about-referral { padding-bottom: 100px; padding-left: 30px; padding-right: 30px; } .about-referral__title { margin-top: 37px; margin-bottom: 100px; text-align: center; color: #000; font-size: 48px; font-style: normal; line-height: 60px; } .about-referral-hero { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 100px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1200px) { .about-referral-hero { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .about-referral-hero__subtitle { margin-bottom: 10px; color: #000; font-size: 16px; font-style: normal; line-height: normal; letter-spacing: -0.32px; } .about-referral-hero__title { margin-bottom: 10px; color: #000; font-size: 50px; font-style: normal; line-height: normal; letter-spacing: -1px; } .about-referral-hero__button { margin-top: 40px; color: #FFF; font-size: 20px; font-weight: 400; line-height: 24px; letter-spacing: -0.4px; text-transform: capitalize; } .about-referral-benefits { display: grid; padding-bottom: 50px; grid-template-columns: repeat(2, 1fr); gap: 91px; } @media only screen and (max-width: 1200px) { .about-referral-benefits { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } } .about-referral-benefits__block { padding: 20px; background-color: #FAFAFA; } .about-referral-benefits__title { margin-bottom: 30px; color: #000; font-size: 20px; font-style: normal; line-height: normal; letter-spacing: -0.4px; } .about-referral-benefits__beneficiary { text-transform: capitalize; } .about-referral-benefits__list { padding-left: 25px; list-style-type: unset; } .about-referral-benefits__benefit { color: rgba(0, 0, 0, .5); font-size: 16px; font-style: normal; line-height: 24px; list-style-type: unset; } .about-referral-conditions__list { padding-left: 25px; list-style-type: unset; } .about-referral-conditions__condition { color: rgba(0, 0, 0, .5); font-size: 16px; font-style: normal; line-height: 24px; list-style-type: unset; } .wishlist-page { padding: 30px 175px; background-color: #F7F7F7; } .wishlist-page__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .wishlist-page__title { margin: 0; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; color: #000000; } .wishlist-page__empty { margin: 16px 0 0; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; color: rgba(0, 0, 0, .5); } .wishlist-page__empty-image { margin-top: 118px; } .wishlist-page-items__layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .wishlist-page-item { padding: 6px 16px; background-color: #ffffff; } .wishlist-page-item__layout { display: grid; height: 100%; grid-template-columns: 365fr 205fr; gap: 16px; } .wishlist-page-item__details { padding: 26px 0; } .wishlist-page-item__image { min-height: 200px; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; } .wishlist-page-item__title { margin: 0 0 12px; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #000000; cursor: pointer; } .wishlist-page-item__model-name { margin-top: 15px; color: rgba(0, 0, 0, .5); } .wishlist-page-item__divider { border-top: 1px solid rgba(0, 0, 0, .2); margin: 24px 0 20px; } .wishlist-page-item__actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; } .wishlist-page-item__action { padding: 0; border: none; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #000000; text-transform: capitalize; text-decoration: underline; background-color: transparent; } .wishlist-page-item__actions-divider { border-right: 1px solid #E2E2EE; } .product-price { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Founders Grotesk"; } .product-price--mobile { margin: 4px 0; } .product-price__cost { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 4px; color: #000000; } .product-price__cost--mobile { color: #000000; font-weight: 600; font-size: 16px; line-height: 18px; } .product-price__tax { margin-left: 13px; font-size: 13px; line-height: 18px; letter-spacing: -0.02em; color: #9999B3; } .product-price__tax--mobile { color: rgba(0, 0, 0, .5); font-family: Raleway; font-weight: 400; } .odslv-modal { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background-color: #ffffff; } .odslv-modal .select-lens-page-title { color: #444; font-size: 24px; letter-spacing: -0.48px; font-family: 'Founders Grotesk', sans-serif; margin: 8px 0 40px 0; } .odslv-modal__right { position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; top: 0; } .odslv-modal__right__main { height: 100%; position: relative; padding-bottom: 120px; overflow-y: auto; } .odslv-modal__right__main__content { padding: 61px 100px 0; } @media (max-width: 768px) { .odslv-modal__right__main__content { padding: 24px 16px; } } .odslv-modal__right__footer { width: 100%; bottom: 0; position: fixed; } .odslv-modal__right__footer--content { font-family: 'NeuzeitGroLig', sans-serif; color: #444444; opacity: 0.5; padding: 0px 30px; font-size: 18px; margin-bottom: 20px; } .odslv-modal__right__footer--action { border-radius: 10px 10px 0 0; background: #FFF; -webkit-box-shadow: 0px -32px 9px 0px rgba(0, 0, 0, 0), 0px -21px 8px 0px rgba(0, 0, 0, .01), 0px -12px 7px 0px rgba(0, 0, 0, .02), 0px -5px 5px 0px rgba(0, 0, 0, .03), 0px -1px 3px 0px rgba(0, 0, 0, .04); box-shadow: 0px -32px 9px 0px rgba(0, 0, 0, 0), 0px -21px 8px 0px rgba(0, 0, 0, .01), 0px -12px 7px 0px rgba(0, 0, 0, .02), 0px -5px 5px 0px rgba(0, 0, 0, .03), 0px -1px 3px 0px rgba(0, 0, 0, .04); padding: 24px 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 768px) { .odslv-modal__right__footer--action { padding: 16px; } } .odslv-modal__right__footer--action-info { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; } .odslv-modal__right__footer--action-info div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; } .odslv-modal__right__footer--action-info__price { color: #444; font-size: 24px; letter-spacing: -0.48px; } @media (max-width: 768px) { .odslv-modal__right__footer--action-info__price { -webkit-font-feature-settings: 'clig' off, 'liga' off; font-feature-settings: 'clig' off, 'liga' off; font-size: 20px; } } .odslv-modal__right__footer--action-info__description { color: #444; -webkit-font-feature-settings: 'clig' off, 'liga' off; font-feature-settings: 'clig' off, 'liga' off; font-size: 13px; line-height: 20px; opacity: 0.5; } @media (max-width: 768px) { .odslv-modal__right__footer--action-info__description { font-size: 12px; } } .odslv-modal__right__footer--action button { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; } .od-fram-only-description { font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; margin-top: 8px; padding: 16px; } .od-fram-only-description h1 { color: #000; margin-bottom: 32px; font-size: 26px; margin-top: 0px; font-family: 'Founders Grotesk', sans-serif; } .od-fram-only-description ul { color: #444; opacity: 0.5; padding-left: 16px; } .od-fram-only-description ul li { list-style: disc; } .od-fram-only-description ul li:not(:last-child) { margin-bottom: 8px; } .odslv-modal-h { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 24px; } @media (max-width: 768px) { .odslv-modal-h { margin-bottom: 0; } } .odslv-modal-h__left { font-family: "Founders Grotesk", sans-serif; color: #444; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16px; } .odslv-modal-h__right { cursor: pointer; } .odslv-modal-h__right img { height: 24px; opacity: 0.5; } .odslv-modal-pt__heading { font-family: 'Founders Grotesk', sans-serif; color: #444; font-size: 24px; letter-spacing: -0.48px; margin: 8px 0 40px 0; } @media (max-width: 768px) { .odslv-modal-pt__heading { margin: 8px 0 32px 0; } } .odslv-modal-pt__status-prescription { color: #444; -webkit-font-feature-settings: 'clig' off, 'liga' off; font-feature-settings: 'clig' off, 'liga' off; font-size: 20px; opacity: 0.5; margin-bottom: 24px; margin-top: 32px; } @media (max-width: 768px) { .odslv-modal-pt__status-prescription { margin-bottom: 16px; } } .odslv-modal-pt__radio { background-color: #fff; } .odslv-modal-pt__radio--content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-radius: 10px; background: #FAFAFA; padding: 24px 16px; } .odslv-modal-pt__radio img { height: 18px; } .odslv-modal-pt__radio span { font-family: 'NeuzeitGroReg', sans-serif; color: #444; font-size: 16px; } .odslv-modal-pt__radio:not(:last-child) { margin-bottom: 16px; } .odslv-modal-pt__radio-selected { background-color: #eee; border-radius: 10px; } .odslv-modal-pt__item { padding: 16px 24px; cursor: pointer; margin-bottom: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid #CDCDCD; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Founders Grotesk", sans-serif; } @media (max-width: 768px) { .odslv-modal-pt__item { gap: 8px; padding: 16px; } } .odslv-modal-pt__item--active { border: 2px solid #546073; } .odslv-modal-pt__item__info { width: 100%; } .odslv-modal-pt__item__img { width: 40px; height: 40px; } .odslv-modal-pt__item__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 8px; margin-bottom: 0px; } .odslv-modal-pt__item__name { color: #444; font-size: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 768px) { .odslv-modal-pt__item__name { font-size: 16px; } } .odslv-modal-pt__item__description { color: #444; font-size: 16px; line-height: 20px; } @media (max-width: 768px) { .odslv-modal-pt__item__description { font-size: 14px; } } .odslv-p__addons { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } .odslv-p__addons .odslv-p__addon { padding: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 250px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-radius: 10px; margin: 4px 0; background: #FAFAFA; } .odslv-p__addons .odslv-p__addon__selected { border: 1px solid #546073; } .odslv-p__addons .odslv-p__addon__left { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; } .odslv-p__addons .odslv-p__addon-img { margin-right: 10px; } .odslv-p__addons .odslv-p__addon-img img { height: 40px; } .odslv-p__addons .odslv-p__addon-des-t { font-family: 'NeuzeitGroReg', sans-serif; font-size: 14px; color: #546073; } .odslv-p__addons .odslv-p__addon-des-p strong { color: #546073; font-family: 'Founders Grotesk', sans-serif; font-size: 16px; } .odslv-modal__progress { width: 100%; height: 8px; background-color: #F3F3F3; position: relative; z-index: 1; } .odslv-modal__progress__value { height: 100%; position: absolute; background-color: #0094C8; } .odslv-modal__progress__value { width: 0; } .odslv-modal__progress__value--select-prescription { width: 256px; } @media (max-width: 768px) { .odslv-modal__progress__value--select-prescription { width: 128px; } } .odslv-modal__progress__value--select-lens { width: 512px; } @media (max-width: 768px) { .odslv-modal__progress__value--select-lens { width: 256px; } } .odslv-modal__progress__value--frame-only, .odslv-modal__progress__value--select-addons { width: 100%; } .od-retry-payment { display: grid; padding: 10px 175px 148px; grid-template-columns: 2.4fr 1fr; gap: 40px; background-color: #F7F7F7; } .od-retry-payment-bill-details { max-width: 360px; padding-top: 20px; } .od-retry-payment-bill-details__title { color: #444; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; } .od-retry-payment-bill-details__rows { display: grid; margin-top: 24px; margin-bottom: 24px; grid-template-columns: auto -webkit-min-content; grid-template-columns: auto min-content; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 16px; -webkit-column-gap: 32px; -moz-column-gap: 32px; column-gap: 32px; white-space: nowrap; } .od-retry-payment-bill-details__total { color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; text-transform: capitalize; } .od-retry-payment-bill-details__total-price { text-align: right; color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; } .od-retry-payment-bill-details__divider { width: 100%; border-top: 1px solid rgba(0, 0, 0, .2); margin: 4px 0; grid-column: span 2; } .od-retry-payment-bill-details__features { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 24px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 12px; } .od-retry-payment-bill-details__feature { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 7px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; gap: 8px; background: #FAFAFA; } .od-retry-payment-bill-details__image { max-width: 48px; max-height: 48px; } .od-retry-payment-bill-details__feature-title { color: #444; text-align: center; font-size: 11px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.24px; text-transform: capitalize; } .od-retry-payment-bill-details__success { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; height: calc(100vh - 83px); } .od-retry-payment-bill-details__success-image { margin-top: -100px; } .od-add-prescription { padding: 32px 216px 48px; } .od-add-prescription__title { color: #000; text-align: center; font-size: 40px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.8px; } .od-add-prescription__subtitle { margin: 25px 0 56px; color: #000; text-align: center; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.32px; } .od-add-prescription__label { margin: 40px 0 16px; color: #000; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; } .od-add-prescription__required-mark { color: #D80027; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; } .od-add-prescription__input { width: 100%; padding: 16px 25px; border: none; color: #000; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.32px; background-color: #FAFAFA; } .od-add-prescription__input::-webkit-input-placeholder { color: rgba(0, 0, 0, .3); } .od-add-prescription__input::-moz-placeholder { color: rgba(0, 0, 0, .3); } .od-add-prescription__input::-ms-input-placeholder { color: rgba(0, 0, 0, .3); } .od-add-prescription__input::placeholder { color: rgba(0, 0, 0, .3); } .od-add-prescription__usage-options { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; } .od-add-prescription__usage-option { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 25px; -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; color: #000; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.32px; background-color: #FAFAFA; cursor: pointer; } .od-add-prescription__usage-option--active { border: 1px solid #000; } .od-add-prescription__upload { display: -webkit-box; display: -ms-flexbox; display: flex; height: 159px; padding: 32px 25px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; color: #000; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.32px; background-color: #FAFAFA; cursor: pointer; } .od-add-prescription__upload-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .od-add-prescription__hints { padding-left: 22px; margin: 16px 0 0; list-style-type: disc; } .od-add-prescription__hint { color: rgba(0, 0, 0, .5); font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; list-style-type: disc; } .od-add-prescription__table { display: grid; border-top: 1px solid #D0D0D0; border-left: 1px solid #D0D0D0; margin-top: 16px; grid-template-columns: repeat(5, auto); } .od-add-prescription__cell { padding: 13px; border-right: 1px solid #D0D0D0; border-bottom: 1px solid #D0D0D0; text-align: center; color: #000; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.4px; } .od-add-prescription__cell--title { color: rgba(68, 68, 68, .5); text-transform: capitalize; } .od-add-prescription__cell-input { border: none; border-bottom: 1px solid rgba(68, 68, 68, .2); text-align: center; color: #000; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.4px; } .od-add-prescription__actions { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 64px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16px; } .od-add-prescription__submit { width: 400px; padding: 16px 24px; text-align: center; color: #F7F7F7; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; text-transform: capitalize; background-color: #546073; backdrop-filter: blur(7px); } .od-add-prescription__submit:hover { color: #F7F7F7; background-color: #546073; } .od-add-prescription__cancel { width: 400px; padding: 16px 24px; text-align: center; color: #444; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; text-transform: capitalize; background-color: #FAFAFA; backdrop-filter: blur(7px); } .od-add-prescription__cancel:hover { color: #444; background-color: #FAFAFA; } .bundle-sale { width: 100%; max-width: 1020px; padding: 35px 20px; margin-left: auto; margin-right: auto; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: 400; line-height: 2; letter-spacing: 1px; } .bundle-sale__title { font-size: 18px; font-weight: 700 !important; line-height: 1.6; letter-spacing: 2px; padding: 15px 0; margin: 0 0 10px; } .bundle-sale__thumbnail { width: 100%; margin-bottom: 20px; aspect-ratio: 5/2; } .bundle-sale__container { max-width: 800px; margin-left: auto; margin-right: auto; } .bundle-sale__text { margin-bottom: 25px; } .bundle-sale__text strong { font-size: 17px; font-weight: 600; } .bundle-sale__subtitle { font-size: 18px; font-weight: 700 !important; letter-spacing: 2px; line-height: 1.6; margin: 70px 0 35px; position: relative; } .bundle-sale__subtitle::before { content: ''; width: 5px; height: 100%; position: absolute; top: -2px; left: -20px; background-color: #000; } .bundle-sale__highlights { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; padding: 0 24px; } .bundle-sale__highlights-li { border: 1px solid #dee2e6; padding: 24px; display: grid; grid-gap: 16px; } .bundle-sale__highlights-img { aspect-ratio: 1/1; width: 100%; } .bundle-sale__highlights-details h3 { font-size: 15px; font-weight: 700 !important; line-height: 1.5; margin: 0 0 24px; } .bundle-sale__highlights-details h4 { font-size: 15px; font-weight: 400; line-height: 2; margin: 0; } .bundle-sale__highlights-details ul { list-style: none; -webkit-padding-start: 0; padding-inline-start: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 30px; } .bundle-sale__highlights-details ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: .5em; -moz-column-gap: .5em; column-gap: .5em; } .bundle-sale__highlights-details ul li strong { font-family: "Founders Grotesk", sans-serif; font-weight: 600; } .bundle-sale__highlights-details ul li a { color: #2e5aa8; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .bundle-sale__highlights-details ul li a:hover { color: #999; text-decoration: none; } .bundle-sale__highlights-terms { background-color: transparent; padding: 0; margin: 0; border: none; outline: none; font-weight: 600; line-height: 1; color: #2e5aa8; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: .25em; -moz-column-gap: .25em; column-gap: .25em; position: relative; } .bundle-sale__highlights-terms::before { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; border-bottom: 1px solid currentColor; } .bundle-sale__highlights-terms img { width: 15px; height: 15px; -o-object-fit: contain; object-fit: contain; } .bundle-sale__modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1000; padding: 20px; } .bundle-sale__modal-content { background: #fff; color: #000; padding: 57px 27px; width: 100%; max-width: 960px; max-height: 90vh; position: relative; font-size: 14px; letter-spacing: 1px; overflow-y: auto; } .bundle-sale__modal-close { position: absolute; top: 20px; right: 20px; background: transparent; border: none; cursor: pointer; padding: 0; } .bundle-sale__modal-title { text-align: center; font-weight: 500 !important; font-size: 20px; line-height: 1; letter-spacing: .02em; margin: 0 0 27px; } .bundle-sale__modal-subtitle { font-weight: 700; text-decoration: underline; margin: 0; } .bundle-sale__modal-terms { list-style: none; -webkit-padding-start: 0; padding-inline-start: 0; line-height: 2; margin-bottom: 0; } .bundle-sale__modal-terms li { position: relative; padding-left: 20px; } .bundle-sale__modal-terms li::before { content: ''; position: absolute; top: 12px; left: 4px; width: 4px; height: 4px; background-color: #000; border-radius: 100%; } @media (max-width: 767px) { .bundle-sale__modal-content { padding-bottom: 200px; } } @media (min-width: 768px) { .bundle-sale__highlights { padding: 0; } .bundle-sale__highlights-li { grid-template-columns: 1fr 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024px) { .bundle-sale { padding-top: 80px; padding-bottom: 80px; } .bundle-sale__title { font-size: 34px; font-weight: 400 !important; padding: 10px 0 30px; margin-bottom: 30px; } .bundle-sale__subtitle { font-size: 26px; line-height: 1.6; } .bundle-sale__subtitle::before { width: 6px; } .bundle-sale__highlights { row-gap: 48px; } .bundle-sale__highlights-li { padding: 48px; grid-gap: 0 48px; } .bundle-sale__modal-close { width: 38px; height: 38px; top: 35px; right: 35px; } .bundle-sale__modal-close img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .bundle-sale__modal-content { padding: 79px 102px 111px; font-size: 15px; } .bundle-sale__modal-title { font-size: 22px; margin-bottom: 60px; } } @media (max-width: 430px) { .header-gift-ticket__breadcrumbs nav ol li:last-child::before { padding-left: 0; } } .header-gift-ticket__banner { position: relative; } .header-gift-ticket__banner picture img { display: block; width: 100%; height: 510px; -o-object-fit: cover; object-fit: cover; } @media (min-width: 768px) { .header-gift-ticket__banner picture img { height: auto; } } .header-gift-ticket__banner__message { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: auto; max-width: 66%; padding: 50px 5% 0 5%; } .header-gift-ticket__banner__message__container { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .header-gift-ticket__banner__message__logo { width: 147px; height: auto; margin: 0 auto 15px auto; } .header-gift-ticket__banner__message__desc { margin-bottom: 0; font-family: "Founders Grotesk", sans-serif; font-weight: normal !important; font-size: 12px; text-align: center; line-height: 2; color: white; } @media (min-width: 768px) { .header-gift-ticket__banner__message { left: 0; right: 0; bottom: 0; -webkit-transform: none; transform: none; width: 80%; padding: 50px 0; margin: 0 auto; } .header-gift-ticket__banner__message__logo { width: 200px; margin: 0 0 30px 0; } .header-gift-ticket__banner__message__desc { font-size: 14px; text-align: left; } } @media (min-width: 1024px) { .header-gift-ticket__banner__message__logo { width: 226px; } .header-gift-ticket__banner__message__desc { font-size: 20px; } } .body-gift-ticket__concept__btn { width: 100%; max-width: 460px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: "Founders Grotesk", sans-serif; font-size: 14px; margin: 0 auto; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; cursor: pointer; } .body-gift-ticket__concept__btn:hover, .body-gift-ticket__concept__btn:active, .body-gift-ticket__concept__btn:visited, .body-gift-ticket__concept__btn:focus { text-decoration: none; } .body-gift-ticket__concept__btn--gray { font-weight: bold !important; background-color: #516075; color: #FFF; } .body-gift-ticket__concept__btn--white { background-color: #FFF; color: #666; font-weight: 500 !important; border: 1px solid #666; } @media (min-width: 768px) { .body-gift-ticket__concept__btn--gray:hover { background-color: #6b788a; color: #FFF; } .body-gift-ticket__concept__btn--white:hover { background-color: #666; color: #FFF; } } .body-gift-ticket__concept__header { width: 100%; height: auto; padding: 50px 5% 60px; } .body-gift-ticket__concept__header__title, .body-gift-ticket__concept__header__desc { font-family: "Founders Grotesk", sans-serif; margin-bottom: 30px; } .body-gift-ticket__concept__header__title { font-size: 18px; font-weight: 400 !important; text-align: center; line-height: 1.5; } .body-gift-ticket__concept__header__desc { font-size: 15px; font-weight: normal !important; line-height: 2; } @media (min-width: 768px) { .body-gift-ticket__concept__header { padding: 80px 5% 130px; margin: 0 auto; } .body-gift-ticket__concept__header__title { font-size: 24px; } .body-gift-ticket__concept__header__desc { font-size: 16px; max-width: 614.39px; margin: 0 auto 50px; } } @media (min-width: 1024px) { .body-gift-ticket__concept__header__desc { max-width: 720px; } } .body-gift-ticket__concept__body-bg { padding: 0 5% 60px; position: relative; } .body-gift-ticket__concept__body-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #F6F6F6; z-index: -1; } @media (min-width: 768px) { .body-gift-ticket__concept__body-bg { padding-bottom: 0; } .body-gift-ticket__concept__body-bg::before { top: 44px; -webkit-box-sizing: border-box; box-sizing: border-box; } } .body-gift-ticket__concept__body { width: 100%; height: auto; position: relative; } .body-gift-ticket__concept__body__img { -webkit-transform: translateY(-30px); transform: translateY(-30px); margin: 0 auto; position: relative; width: 100%; height: 210px; overflow-y: hidden; } .body-gift-ticket__concept__body__img img { display: block; width: 145px; height: auto; position: absolute; top: 16px; left: 50%; -webkit-transform: rotate(-8deg) translateX(-50%); transform: rotate(-8deg) translateX(-50%); } .body-gift-ticket__concept__body__desc, .body-gift-ticket__concept__body__remark { font-family: "Founders Grotesk", sans-serif; font-weight: normal !important; margin-bottom: 0; } .body-gift-ticket__concept__body__desc { font-size: 15px; line-height: 2; } .body-gift-ticket__concept__body__remark { font-size: 11px !important; line-height: 1.7; margin-top: 5px; position: relative; padding-left: 12px; color: #999; } .body-gift-ticket__concept__body__remark::before { content: '*'; position: absolute; left: 0; } @media (min-width: 768px) { .body-gift-ticket__concept__body { display: grid; grid-template-columns: 247.5px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 924px; margin: 0 auto; } .body-gift-ticket__concept__body__img { -webkit-transform: none; transform: none; height: 229px; } .body-gift-ticket__concept__body__img img { width: 100%; max-width: 167px; } } @media (min-width: 1024px) { .body-gift-ticket__concept__body { grid-template-columns: 495px 1fr; } .body-gift-ticket__concept__body__img { height: 458px; } .body-gift-ticket__concept__body__img img { width: 100%; max-width: 334px; } .body-gift-ticket__concept__body__desc { font-size: 16px; } } .body-gift-ticket__concept__footer { background-color: #FFF; padding: 60px 0 80px; } .body-gift-ticket__concept__footer__container { width: 100%; padding: 0 5%; max-width: 924px; margin: 0 auto; } .body-gift-ticket__concept__footer__title h2, .body-gift-ticket__concept__footer__title p { font-family: "Founders Grotesk", sans-serif; margin-bottom: 33px; } .body-gift-ticket__concept__footer__title h2 { text-align: center; font-size: 18px; font-weight: 400 !important; line-height: 1.5; } .body-gift-ticket__concept__footer__title p { font-size: 15px; font-weight: normal; line-height: 2; } .body-gift-ticket__concept__footer__title p br { display: none; } .body-gift-ticket__concept__footer__list { list-style-type: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 90px; } .body-gift-ticket__concept__footer__btn { width: 100%; padding: 0 5%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1024px) { .body-gift-ticket__concept__footer { padding: 120px 0 140px; } .body-gift-ticket__concept__footer__container { display: grid; grid-template-columns: 1fr 450px; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 170px 0; max-width: 924px; } .body-gift-ticket__concept__footer__title h2 { text-align: left; font-size: 24px; margin-bottom: 24px; } .body-gift-ticket__concept__footer__title p { font-size: 16px; font-weight: normal; line-height: 2; } .body-gift-ticket__concept__footer__title p br { display: block; } .body-gift-ticket__concept__footer__list { margin-bottom: 0; } } .body-gift-ticket__how-to { background-color: #EDF8F6; } .body-gift-ticket__how-to__title { padding: 0 0 35px 0; font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: normal !important; line-height: 1; text-align: center; margin-bottom: 0; } .body-gift-ticket__how-to__container { padding-top: 60px; } .body-gift-ticket__how-to__container:last-child { position: relative; } .body-gift-ticket__how-to__container:last-child::before { content: ''; position: absolute; top: 0; left: 5%; right: 5%; height: 1px; background-color: #e3e3e3; } .body-gift-ticket__how-to__list { list-style-type: none; padding: 0 20px; display: grid; grid-template-columns: 227px 227px 227px; gap: 20px; overflow-x: scroll; } .body-gift-ticket__how-to__item { padding-bottom: 50px; } .body-gift-ticket__how-to__item img { display: block; width: 100%; height: auto; margin-bottom: 20px; } .body-gift-ticket__how-to__item h5, .body-gift-ticket__how-to__item p { font-family: "Founders Grotesk", sans-serif; } .body-gift-ticket__how-to__item h5 { font-size: 16px; font-weight: bold !important; line-height: 1; margin-bottom: 8px; text-align: center; } .body-gift-ticket__how-to__item p { font-size: 15px; font-weight: normal !important; line-height: 2; margin-bottom: 0; } @media (min-width: 768px) { .body-gift-ticket__how-to__title { font-size: 24px; padding: 0 0 55px 0; } .body-gift-ticket__how-to__container { padding: 100px 5% 0 5%; max-width: 924px; margin: 0 auto; } .body-gift-ticket__how-to__list { grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding: 0; margin-bottom: 0; } .body-gift-ticket__how-to__item { padding-bottom: 80px; } .body-gift-ticket__how-to__item img { margin-bottom: 24px; } .body-gift-ticket__how-to__item h5 { margin-bottom: 15px; } } .footer-gift-ticket__condition { padding: 60px 0 85px; } .footer-gift-ticket__condition__container { width: 100%; max-width: 924px; height: auto; padding: 0 5%; margin: 0 auto; } .footer-gift-ticket__condition__title { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: bold !important; line-height: 1; margin-bottom: 15px; text-align: left; } .footer-gift-ticket__condition__list { list-style-type: none; padding-left: 0; margin-bottom: 0; } .footer-gift-ticket__condition__item { padding-left: 1em; font-family: "Founders Grotesk", sans-serif; font-weight: normal !important; font-size: 15px; text-align: left; color: #000; letter-spacing: 1px; line-height: 2; position: relative; } .footer-gift-ticket__condition__item::before { content: "*"; position: absolute; left: 0; } @media (min-width: 768px) { .footer-gift-ticket__condition { padding: 80px 0 100px; } .footer-gift-ticket__condition__title { font-size: 16px; } } .brands { padding-block: 50px 60px; font: 400 13px/2 'Founders Grotesk', sans-serif; letter-spacing: 1px; } @media (min-width: 1024px) { .brands { font-size: 16px; } } .brands__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1172px; } .brands__heading { text-align: center; font-size: 20px; font-weight: 400; line-height: 1.5; margin: 0; color: black; } .brands__heading--long { color: #666; font-size: 14px; font-weight: normal !important; margin: 12px auto 0; line-height: 1.5; padding-bottom: 30px; text-align: center; } .brands__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .brands__card { position: relative; cursor: pointer; } .brands__card::before, .brands__card::after { content: ''; position: absolute; inset: 0; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .brands__card::before { background-color: rgba(0, 0, 0, .4); } .brands__card::after { background: url("https://static.lenskart.com/media/owndays/desktop/img/od-misc/search-md.svg") no-repeat center/27px auto; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: invert(1); filter: invert(1); } .brands__card img { display: block; aspect-ratio: 1/1; width: 100%; } .brands__card:hover::before, .brands__card:hover::after, .brands__card.is-open::before, .brands__card.is-open::after { opacity: 1; } .brands__details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 48px 15px 35px; border: 1px solid #999; position: relative; grid-column: span 2; max-height: 0; opacity: 0; overflow: hidden; visibility: hidden; -webkit-transition: none; transition: none; margin-top: 0; } .brands__details-close { position: absolute; top: 10px; right: 10px; background: none; border: none; outline: none; padding: 0; margin: 0; width: 40px; height: 40px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .brands__details-close img { width: 100%; } .brands__details-slider { opacity: 0; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } .brands__details-slider.is-visible { opacity: 1; } @media (max-width: 767px) { .brands__details-slider { height: auto !important; max-height: none !important; } } .brands__details-slider .slick-slide * { outline: none; } .brands__details-slider .slick-slide img { width: 100%; aspect-ratio: 3/2; } .brands__details-slider .slick-dots { list-style: none; padding: 0; margin: 0; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 14px; margin-top: 10px; } .brands__details-slider .slick-dots li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .brands__details-slider .slick-dots li button { font: 0/0 a; padding: 0; margin-bottom: 20px; background-color: #999; border: none; border-radius: 0; width: 10px; height: 10px; cursor: pointer; } .brands__details-slider .slick-dots li.slick-active button { background-color: #000; } .brands__details-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .brands__details-logo { font: 0/0 a; margin: 0; text-align: left; padding: 0; } .brands__details-logo img { max-height: 37px; margin: 40px 0 20px 0; display: block; } .brands__details-logo--expanded img { width: 300px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 767px) { .brands__details-logo--expanded img { width: 83%; } } .brands__details-recommended { border-style: solid; border-color: #999; border-width: 1px 0px 1px 0px; padding: 16px 0; margin-bottom: 20px; font-size: 15px; } .brands__details-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .brands__details-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 12px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 20px; } .brands__details-actions .button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .brands__details-actions .button:focus, .brands__details-actions .button:hover { text-decoration: none; } .brands__details-actions .button:focus { text-decoration: none !important; } .brands__details-title { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; font-family: 'Founders Grotesk', sans-serif; font-size: 16px; font-weight: 500; line-height: 28.8px; vertical-align: cap; margin: 0 0 20px 0; } .brands__details-description { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin: 0; } .brands__details.is-visible { visibility: visible; opacity: 1; max-height: 800px; -webkit-animation: expandHeight 0.6s ease-out forwards; animation: expandHeight 0.6s ease-out forwards; } .brands__details.is-closing { -webkit-animation: collapseHeight 0.4s ease-out forwards; animation: collapseHeight 0.4s ease-out forwards; } @-webkit-keyframes expandHeight { 0% { max-height: 0; opacity: 0; } 100% { max-height: 800px; opacity: 1; } } @keyframes expandHeight { 0% { max-height: 0; opacity: 0; } 100% { max-height: 800px; opacity: 1; } } @-webkit-keyframes collapseHeight { 0% { max-height: 800px; opacity: 1; visibility: visible; } 100% { max-height: 0; opacity: 0; visibility: hidden; } } @keyframes collapseHeight { 0% { max-height: 800px; opacity: 1; visibility: visible; } 100% { max-height: 0; opacity: 0; visibility: hidden; } } @media (min-width: 768px) { .brands__details.is-visible { -webkit-animation: expandHeight 0.6s ease-out forwards; animation: expandHeight 0.6s ease-out forwards; } .brands__details.is-closing { -webkit-animation: collapseHeight 0.4s ease-out forwards; animation: collapseHeight 0.4s ease-out forwards; } } .brands__display[data-key='more-details-junni'][data-is-published='false'] { display: none; } @media (min-width: 768px) { .brands__list { grid-template-columns: repeat(3, 1fr); } .brands__details { display: grid; grid-template-columns: 1fr 50%; gap: 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-column: span 3; } .brands__details-slider { overflow: hidden; } .brands__details-bottom { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .brands__details-actions { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .brands__details-title { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .brands__details-description { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-bottom: 30px; } } @media (min-width: 768px) { .brands { padding-block: 110px 120px; } .brands__heading { font-size: 40px; } .brands__heading--long { margin: 17px auto 0; padding-bottom: 90px; line-height: 1.5; } } @media (min-width: 1024px) { .brands__list { grid-template-columns: repeat(4, 1fr); gap: 20px; } .brands__card::after { background-size: 53px auto; } .brands__details { gap: 50px; padding: 50px; grid-column: span 4; } .brands__details-recommended { font-size: 16px; } } #external-pages h2 .l-gundam__project-number { font-size: 200px; } @media only screen and (max-width: 767px) { #external-pages h2 .l-gundam__project-number { font-size: 88px; } } .service_l { margin: 0 auto 120px; display: block; overflow: hidden; position: relative; letter-spacing: 1px; } @media (max-width: 1023px) { .service_l { margin: 0 auto 60px; } } .service_l__section { position: relative; overflow: hidden; display: block; } .service_l__container { width: 90%; max-width: 1296px; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container { width: 100%; padding: 0 5%; } } .service_l__container-retail { width: 100%; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container-retail { width: 100%; padding: 0; } } .service_l__container-warranty { width: 100%; height: auto; margin: 0 auto; max-width: 1296px; } @media (max-width: 767px) { .service_l__container-warranty { width: 100%; padding: 0 5%; } } .l-services__content { display: block; position: relative; margin: 5% auto; overflow: hidden; } .l-services__content-text { background-color: #f4f4f4; position: absolute; width: 35%; height: 100%; right: 0; padding: 3%; } .l-services__content-text--frame { width: 40%; } .l-services__content-text .l-services__content-text__container { height: 100%; display: table !important; } .l-services__content-text .l-services__content-text__content { color: #000; font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; letter-spacing: 1px; line-height: 2; font-size: 15px; vertical-align: middle; display: table-cell !important; } @media (max-width: 767px) { .l-services__content-text .l-services__content-text__content { line-height: 1.9; } } .l-services__content-text .l-services__content-text__content__title { font-size: 16px; font-weight: 600; color: inherit; } .l-services__content-text .l-services__content-text__content__subtitle { font-size: 16px; font-weight: 400; padding: 15px 0 0; color: inherit; line-height: 1.9; } @media (max-width: 767px) { .l-services__content-text .l-services__content-text__content__subtitle { line-height: 1.7; } } .l-services__content-text .l-services__content-text__content__description { margin: 10px 0 0; color: #666; } .l-services__content-text .l-services__content-text__content__table { margin: 15px 0; letter-spacing: 1px; } .l-services__content-text .l-services__content-text__content__table .u-svg__icon-frame, .l-services__content-text .l-services__content-text__content__table .u-svg__icon-lens { display: inline-block; vertical-align: middle; letter-spacing: 1px; } .l-services__content-text .l-services__content-text__content__table .u-svg__icon-frame.u-svg__icon-frame, .l-services__content-text .l-services__content-text__content__table .u-svg__icon-lens.u-svg__icon-frame { width: 50px; } .l-services__content-text .l-services__content-text__content__table .u-svg__icon-frame.u-svg__icon-lens, .l-services__content-text .l-services__content-text__content__table .u-svg__icon-lens.u-svg__icon-lens { width: 30px; } .l-services__content-text .l-services__content-text__content__table .u-mark { display: inline-block; vertical-align: middle; letter-spacing: inherit; width: 15px; height: 15px; position: relative; margin: 0px 9px; } .l-services__content-text .l-services__content-text__content__table .u-mark:before, .l-services__content-text .l-services__content-text__content__table .u-mark:after { content: ''; position: absolute; background: #000; } .l-services__content-text .l-services__content-text__content__table .u-mark__plus:before { width: 15px; height: 1px; top: 50%; left: 0; } .l-services__content-text .l-services__content-text__content__table .u-mark__plus:after { height: 15px; width: 1px; top: 0; left: 50%; } .l-services__content-text .l-services__content-text__content__table .u-mark__equal:before, .l-services__content-text .l-services__content-text__content__table .u-mark__equal:after { width: 15px; height: 1px; left: 0; } .l-services__content-text .l-services__content-text__content__table .u-mark__equal:before { top: 50%; margin-top: -3px; } .l-services__content-text .l-services__content-text__content__table .u-mark__equal:after { top: 50%; margin-top: 3px; } .l-services__content-text .l-services__content-text__content__btn { display: block; text-align: center; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; margin: 0 auto; line-height: 1; border: 1px solid transparent; border-radius: 0; -webkit-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .l-services__content-text .l-services__content-text__content__btn a, .l-services__content-text .l-services__content-text__content__btn button { display: block; width: 100%; padding: 18px 0; font-size: 14px; font-weight: 500; border-width: 0; } .l-services__content-text .l-services__content-text__content__btn--primary { border-color: #666; margin-top: 20px; } .l-services__content-text .l-services__content-text__content__btn--primary:active, .l-services__content-text .l-services__content-text__content__btn--primary:focus, .l-services__content-text .l-services__content-text__content__btn--primary:hover { background-color: #666; } .l-services__content-text .l-services__content-text__content__btn--primary:hover a, .l-services__content-text .l-services__content-text__content__btn--primary:hover button { color: #fff; } .l-services__content-text .l-services__content-text__content__btn--primary a, .l-services__content-text .l-services__content-text__content__btn--primary button { color: #666; } .l-services__content-text .l-services__content-text__content__btn--primary a:active, .l-services__content-text .l-services__content-text__content__btn--primary a:focus, .l-services__content-text .l-services__content-text__content__btn--primary a:hover, .l-services__content-text .l-services__content-text__content__btn--primary button:active, .l-services__content-text .l-services__content-text__content__btn--primary button:focus, .l-services__content-text .l-services__content-text__content__btn--primary button:hover { color: #fff; text-decoration: none; } .l-services__content-text .l-services__content-text__content__btn--primary a.is-active, .l-services__content-text .l-services__content-text__content__btn--primary button.is-active { color: #fff; } .l-services__content-text .l-services__content-text__content__red { color: #c7002e; font-size: 18px; font-weight: 400; padding: 0; margin: 0; display: inline-block; vertical-align: middle; letter-spacing: 1px; } .l-services__content-image { width: 65%; float: left; } .l-services__content.turn-over .l-services__content-text { left: 0; } .l-services__content.turn-over .l-services__content-image { float: right; } @media (max-width: 1023px) { .l-services__content-text { position: relative; width: 100%; margin: 0 auto; padding: 30px 5%; } .l-services__content-image { float: none; width: 100%; } .l-services__content.turn-over .l-services__content-image { float: none; } } .services__header { position: relative; } .services__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 34px 5%; } .services__header-content h1, .services__header-content p { letter-spacing: 1px; line-height: 2; font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; color: inherit; margin: 0; } .services__header-content h1 { font-size: 20px; margin-bottom: 14px; line-height: 1; font-weight: 300; } .services__header-content p { font-size: 15px; line-height: 1.6; } .services__header-content--left { width: 100%; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: start; } .services__header-content--left h1 { font-size: 20px; font-weight: 700; line-height: 1; color: #fff; } .services__header-content--left p { color: #fff; max-width: 450px; } .services__header-bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 767px) { .services__header-content { background-color: #333; color: #fff; } .services__header-content p { line-height: 1.6; } .services__header-content--light { background-color: #f4f4f4; } .services__header-content--light h1 { color: #000; font-weight: 600; } .services__header-content--light p { color: #000; } .services__header-content--dark h1 { color: #fff; font-weight: 600; } .services__header-content--dark p { color: #fff; } .services__header-content--sp-bg-light { background-color: #f4f4f4; } .services__header-content--sp-bg-light h1 { color: #000; } .services__header-content--sp-bg-light p { color: #666; } } @media (min-width: 768px) { .services__header-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .services__header-content h1 { font-size: 40px; margin-bottom: 17px; } .services__header-content p { max-width: 600px; line-height: 1.6; } .services__header-content--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .services__header-content--dark { text-align: center; } .services__header-content--dark h1 { color: #000; } .services__header-content--dark p { color: #666; } .services__header-content--light h1, .services__header-content--light p { color: #fff; } .services__header-content--sp-bg-light { text-align: center; } .services__header-content--sp-bg-light h1 { color: #000; } .services__header-content--sp-bg-light p { color: #666; } .services__header-content--left { width: 80%; position: absolute; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: start; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 1152px; padding: 0; margin: 0 auto; } .services__header-content--left h1 { font-size: 40px; line-height: 1; color: #fff; font-weight: 300; } .services__header-content--left p { color: #fff; max-width: 450px; line-height: 2; } } .servicers__nav { margin: 0; padding: 0; letter-spacing: 1px; } .servicers__nav-link { font-family: 'Founders Grotesk', sans-serif; line-height: 1; } .servicers__nav--mobile { margin-top: 20px; } .servicers__nav--mobile .servicers__nav-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 0 10px; margin: 0; border: 1px solid #e3e3e3; list-style-type: none; } .servicers__nav--mobile .servicers__nav-item:first-child { margin-bottom: 10px; } .servicers__nav--mobile .servicers__nav-item:first-child .servicers__nav-link { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 1px dashed #e3e3e3; } .servicers__nav--mobile .servicers__nav-item:not(:first-child) .servicers__nav-link::before { content: '>'; margin-right: 5px; color: #000; } .servicers__nav--mobile .servicers__nav-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 20px; position: relative; font-size: 15px; font-weight: 400; color: #0094c8; } .servicers__nav--desktop { background-color: #333; } .servicers__nav--desktop .servicers__nav-list { display: -webkit-box; display: -ms-flexbox; display: flex; width: 90%; max-width: 1296px; margin: 0 auto; padding: 0; list-style-type: none; } .servicers__nav--desktop .servicers__nav-item { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; border-left: 1px solid #444; } .servicers__nav--desktop .servicers__nav-item:last-child { border-right: 1px solid #444; } .servicers__nav--desktop .servicers__nav-link { font-size: 15px; font-weight: 400; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; color: #fff; height: 40px; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .servicers__nav--desktop .servicers__nav-link.active { background-color: #777; } .servicers__nav--desktop .servicers__nav-link:hover { background-color: #777; color: #fff; text-decoration: none; } @media (max-width: 767px) { .servicers__nav--desktop { display: none; } } @media (min-width: 768px) { .servicers__nav--mobile { display: none; } } .service_l { margin: 0 auto 120px; display: block; overflow: hidden; position: relative; letter-spacing: 1px; } @media (max-width: 1023px) { .service_l { margin: 0 auto 60px; } } .service_l__section { position: relative; overflow: hidden; display: block; } .service_l__container { width: 90%; max-width: 1296px; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container { width: 100%; padding: 0 5%; } } .service_l__container-retail { width: 100%; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container-retail { width: 100%; padding: 0; } } .service_l__container-warranty { width: 100%; height: auto; margin: 0 auto; max-width: 1296px; } @media (max-width: 767px) { .service_l__container-warranty { width: 100%; padding: 0 5%; } } .service_l { margin: 0 auto 120px; display: block; overflow: hidden; position: relative; letter-spacing: 1px; } @media (max-width: 1023px) { .service_l { margin: 0 auto 60px; } } .service_l__section { position: relative; overflow: hidden; display: block; } .service_l__container { width: 90%; max-width: 1296px; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container { width: 100%; padding: 0 5%; } } .service_l__container-retail { width: 100%; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container-retail { width: 100%; padding: 0; } } .service_l__container-warranty { width: 100%; height: auto; margin: 0 auto; max-width: 1296px; } @media (max-width: 767px) { .service_l__container-warranty { width: 100%; padding: 0 5%; } } .l-services-warranty { width: 100%; } .l-services-warranty--l-content--inner { width: 80%; max-width: 1152px; margin: 0 auto; } @media (max-width: 767px) { .l-services-warranty--l-content--inner { width: 100%; } } .l-services-warranty--l-warranty__content-block { display: block; border: 1px solid #e3e3e3; margin: 30px 0 20px; position: relative; min-height: 150px; width: 100%; } .l-services-warranty--l-warranty__content-block:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; } .l-services-warranty--l-warranty__content-block:before { content: ''; height: 100%; width: 1px; position: absolute; top: 0; left: 110px; border-left: 1px dashed #e3e3e3; } .l-services-warranty--l-warranty__content-block--l-warranty-no { width: 90px; float: left; } .l-services-warranty--l-warranty__content-block--l-warranty-no p { position: absolute; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); top: 50%; left: 10px; margin-top: -12px; color: #000; font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; font-size: 15px; } .l-services-warranty--l-warranty__content-block--l-warranty-service { padding: 20px 20px 20px 130px; display: table; height: 100%; min-height: 150px; width: 100%; } .l-services-warranty--l-warranty__content-block--l-warranty-service-inner { vertical-align: middle; display: table-cell; line-height: 2; } .l-services-warranty--l-warranty__content-block--l-warranty-service-inner ul { padding-top: 5px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .l-services-warranty--l-warranty__content-block--l-warranty-service-inner h3 { font-size: 16px; color: #000; } .l-services-warranty--title { margin: 0; font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; font-size: 18px; color: #000; line-height: 2; font-weight: 400 !important; text-align: center; } .l-services-warranty--c-attention-title { margin: 0; font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; font-size: 18px; color: #000; font-weight: 300; line-height: 2; } .l-services-warranty--p-main__title-default { position: relative; } .l-services-warranty--p-main__title-description { text-align: center; max-width: 600px; margin: 17px auto 0; } .l-services-warranty--l-warranty__content { margin-top: 80px; position: relative; } @media (max-width: 767px) { .l-services-warranty--l-warranty__content { margin-top: 25px; } } .l-services-warranty--l-warranty__content h2 { font-size: 18px; text-align: center; } .l-services-warranty--p-attention-list { padding: 0; list-style-position: inside; text-align: left; margin-top: 8px; margin-bottom: 0; } .l-services-warranty--p-attention-list li { position: relative; padding-left: 13px; list-style: none; } .l-services-warranty--p-attention-list li p { font-size: 11px; color: #999; -webkit-font-smoothing: subpixel-antialiased; padding-top: 0; margin: 0; } .l-services-warranty--p-attention-list li:before { content: '*'; position: absolute; color: #999; left: 0; top: 4px; line-height: 1; font-size: 14px; } .l-services-warranty--c-term { margin: 0; font-size: 16px; color: #c7002e; font-weight: 600; font-family: "Founders Grotesk", sans-serif; line-height: 2; } .l-services-warranty--c-attention { margin: 0; font-size: 11px; color: #999; padding-top: 5px; -webkit-font-smoothing: subpixel-antialiased; line-height: 2; } @media (max-width: 1023px) { .l-services-warranty--c-attention { letter-spacing: 0.4px; } } @media (max-width: 767px) { .l-services-warranty--c-attention { letter-spacing: 0.4px; } } .l-services-warranty--c-attention i { background: none !important; } .l-services-warranty--c-attention span { color: #999; font-size: 11px; margin-top: 5px; -webkit-font-smoothing: subpixel-antialiased; line-height: 2; } .l-services-warranty--c-attention span:before { content: '*'; color: #999; font-size: 14px; line-height: 1; margin-right: 4.8px; margin-right: 0.3rem; } .u-text-comment { color: #999; font-size: 11px; line-height: 1.7; margin-top: 5px; -webkit-font-smoothing: subpixel-antialiased; } .u-text-comment:before { content: '*'; position: relative; color: #999; left: 0; line-height: 1; padding-right: 4.8px; padding-right: 0.3rem; } @media (max-width: 767px) { .l-services-warranty--p-main__title-description { margin: 14px 0 0; } .l-services-warranty--l-warranty__content-block:before, .l-services-warranty--l-warranty__content-block:after { display: none; } .l-services-warranty--l-warranty__content-block--l-warranty-no { float: none; width: 100%; } .l-services-warranty--l-warranty__content-block--l-warranty-no p { position: relative; -webkit-transform: rotate(0); transform: rotate(0); top: auto; left: auto; margin: 0; text-align: center; border-bottom: 1px dashed #e3e3e3; padding: 15px 0; } .l-services-warranty--l-warranty__content-block--l-warranty-service { padding: 15px; min-height: auto; } } .services__lens-filter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .services__lens-filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 30px; } .services__lens-filter-list li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 15px; line-height: 2; color: #666; padding: 0 12px; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .services__lens-filter-list li.active { color: #007eaa; } .services__lens-filter-list li:hover { color: #007eaa; } .services__lens-filter-content ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } .services__lens-filter-content ul li { display: grid; grid-template-columns: 55px 1fr; border: 1px solid #f4f4f4; padding: 20px 0; position: relative; cursor: pointer; } .services__lens-filter-content ul li::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 25px; background: #f4f4f4 url("https://static.lenskart.com/media/owndays/img/services-lens/arrow-b-black.png") no-repeat center center/4px auto; } .services__lens-filter-icon { display: block; max-width: 30px; margin: 0 auto; } .services__lens-filter-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 45px; } .services__lens-filter-details span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 70px; height: 17px; font-size: 11px; line-height: 1; text-align: center; color: #fff; margin-bottom: 3px; } .services__lens-filter-details span.standard { background-color: #0094c8; } .services__lens-filter-details span.option { background-color: #c7002e; } .services__lens-filter-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; row-gap: 8px; } .services__lens-filter-title h4, .services__lens-filter-title p { margin-top: 0; margin-bottom: 0; } .services__lens-filter-title h4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; font-size: 14px; font-weight: 600 !important; color: #000; } .services__lens-filter-title h4 img { width: auto; height: 27px; -o-object-fit: contain; object-fit: contain; } .services__lens-filter-title p { font-size: 16px; font-weight: 600; line-height: 1; color: #c7002e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-column-gap: 4px; -moz-column-gap: 4px; column-gap: 4px; row-gap: 4px; } .services__lens-filter-title p small { font-weight: 400; } @media (min-width: 768px) { .services__lens-filter .services__lens-filter-content ul li { grid-template-columns: 68px 1fr; } .services__lens-filter .services__lens-filter-content ul li::before { width: 50px; } .services__lens-filter .services__lens-filter-icon { max-width: 36px; } .services__lens-filter .services__lens-filter-details { display: grid; grid-template-columns: auto 1fr; grid-column-gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 70px; } .services__lens-filter .services__lens-filter-details span { margin-bottom: 0; height: 30px; } .services__lens-filter .services__lens-filter-title { display: grid; grid-template-columns: 3fr 2fr; } .services__lens-filter .services__lens-filter-title h4, .services__lens-filter .services__lens-filter-title p { font-size: 16px; } } .services__lens-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; margin: 0; } .services__lens-details-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid #f4f4f4; } .services__lens-details-header { display: grid; grid-template-columns: 55px 1fr; border-bottom: 1px solid #f4f4f4; padding: 20px 0; } .services__lens-details-header-icon { max-width: 30px; margin: 0 auto; } .services__lens-details-header-details { padding-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .services__lens-details-header-details i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 70px; height: 17px; text-align: center; font-size: 11px; line-height: 1; color: #fff; margin-bottom: 3px; font-style: normal; } .services__lens-details-header-details i.standard { background-color: #0094c8; } .services__lens-details-header-details i.option { background-color: #c7002e; } .services__lens-details-header-details div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; row-gap: 4px; } .services__lens-details-header-details div h3 { font-size: 14px; font-weight: 600 !important; color: #000; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } .services__lens-details-header-details div h3 span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } .services__lens-details-header-details div h3 span img { width: auto; height: 27px; } .services__lens-details-header-details div h3 small { color: #c7002e; font-weight: 400; font-size: 100%; } .services__lens-details-header-details div p { color: #c7002e; font-size: 16px; font-weight: 600; line-height: 1; margin: 0; } .services__lens-details-header-details div p small { font-weight: 400; } .services__lens-details-body { padding: 20px; font-size: 16px; } .services__lens-details-body h4 { font-size: 14px; font-weight: 600 !important; margin: 0 0 10px; color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .services__lens-details-body h4 strong { font-weight: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 4px; -moz-column-gap: 4px; column-gap: 4px; } .services__lens-details-body h4 strong small { color: #c7002e; font-size: inherit; font-weight: 400 !important; } .services__lens-details-body h4 span { color: #c7002e; margin-left: 8px; } .services__lens-details-body h5 { color: #000; } .services__lens-details-body p { font-size: 15px; line-height: 2; color: #666; margin: 0 0 20px; } .services__lens-details-body ul.list-disc > li { position: relative; padding-left: 1.5em; } .services__lens-details-body ul.list-disc > li::before { content: '\00B7'; position: absolute; top: 0; left: 1em; } .services__lens-details-body ul.list-notes { font-size: 11px; color: #000; } .services__lens-details-body-features { width: 100%; margin-top: 20px; border-collapse: collapse; } .services__lens-details-body-features tr th, .services__lens-details-body-features tr td { border-style: solid; border-color: #f4f4f4; } .services__lens-details-body-features tr th { font-weight: 400; border-width: 1px 1px 1px 0; padding: 10px 14px 10px 0; color: #000; } .services__lens-details-body-features tr td { color: #666; border-width: 1px 0 1px 1px; padding: 10px 0 10px 14px; } .services__lens-details-body-features tr td ul li { position: relative; padding-left: 30px; } .services__lens-details-body-features tr td ul li::before { content: ''; position: absolute; top: 4px; left: 0; width: 15px; height: 15px; background: url("https://static.lenskart.com/media/owndays/img/services-lens/check.svg") no-repeat center/contain; } .services__lens-details-body-lineup { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 20px; } .services__lens-details-body-lineup > li { border-top: 1px solid #f4f4f4; padding-top: 20px; margin-top: 20px; } .services__lens-details-body-lineup > li:first-child { margin-top: 0; } .services__lens-details-body-examples { font-size: 11px; padding: 20px; border: 1px solid #f4f4f4; margin-top: 20px; } .services__lens-details-body-examples ul { margin-left: auto; margin-right: auto; } .services__lens-details-body-examples ul li h6 { font-size: 12px; font-weight: 600 !important; line-height: 1.6; margin: 0 0 10px; color: #000; } .services__lens-details-body-examples ul li div p { font-size: inherit; margin-bottom: 10px; } .services__lens-details-body-examples ul li div figure figcaption { text-align: center; margin-top: 5px; } .services__lens-details-body-examples ul li div figure figcaption.figcaption-pclens { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0; } .services__lens-details-body-examples ul li div figure figcaption.figcaption-pclens span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; max-width: 100px; } .services__lens-details-body-examples ul li div figure figcaption.figcaption-left { text-align: left; } .services__lens-details-body-examples figure { margin: 0; } .services__lens-details-body-examples .cols { display: grid; grid-gap: 10px; } .services__lens-details-body-examples .cols-2 { grid-template-columns: 1fr 1fr; } .services__lens-details-body-examples .cols-3 { grid-template-columns: repeat(3, 1fr); } .services__lens-details-body-examples .cols-lens-transition { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .services__lens-details-body-examples .cols-lens-transition li { max-width: 33.33333%; } .services__lens-details-body-examples .cols-lens-color { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .services__lens-details-body-examples .cols-lens-color li { max-width: 70px; } .services__lens-details-body-notes { margin-top: 10px; font-size: 11px; } @media (min-width: 768px) { .services__lens-details-header { grid-template-columns: 68px 1fr; } .services__lens-details-header-icon { max-width: 36px; } .services__lens-details-header-details { display: grid; grid-template-columns: auto 1fr; grid-column-gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .services__lens-details-header-details i { height: 30px; margin-bottom: 0; } .services__lens-details-header-details div { display: grid; grid-template-columns: 1fr auto; grid-column-gap: 20px; } .services__lens-details-header-details div h3 { font-size: 16px; } .services__lens-details-body { padding: 30px 25px; } .services__lens-details-body-features tr td ul { -webkit-columns: 2; -moz-columns: 2; columns: 2; } .services__lens-details-body-examples { text-align: center; } .services__lens-details-body-examples ul li h6 { font-size: 14px; } .services__lens-details-body-examples ul li div figure figcaption { margin-top: 10px; } .services__lens-details-body-examples .cols-pc-2 { grid-template-columns: 1fr 1fr; grid-column-gap: 40px; } .services__lens-details-body-examples .cols-pc-bd > li:not(:last-child) { position: relative; } .services__lens-details-body-examples .cols-pc-bd > li:not(:last-child)::before { content: ''; position: absolute; top: 0; left: calc(100% + 20px); bottom: 0; border-right: 1px solid #f4f4f4; } .services__lens-details-body-examples .cols-pc-aspheric { grid-template-columns: 2fr 3fr; } .services__lens-details-body-examples .cols-lens-transition { -ms-flex-wrap: wrap; flex-wrap: wrap; } .services__lens-details-body-examples .cols-lens-transition li { max-width: 124px; } } @media screen and (max-width: 768px) { #transitions-light-gen-s .cols-lens-transition { display: grid; grid-template-columns: repeat(2, 1fr); } #transitions-light-gen-s .cols-lens-transition li { max-width: 100%; } } @media screen and (min-width: 768px) { #transitions-light-gen-s .cols.cols-lens-transition { max-width: 700px; } } .services { font-family: 'Founders Grotesk', sans-serif; letter-spacing: 1px; } .services a { text-decoration: none; } .services a:hover { text-decoration: none; } .services img { width: 100%; } .services ul, .services ol { list-style: none; padding: 0; } .services__container { width: 100%; padding: 0 5% 60px; margin-left: auto; margin-right: auto; max-width: 1152px; } .services__subtitle { text-align: center; font-size: 17px; font-weight: 400; line-height: 1.9; letter-spacing: 1px; margin: 50px 0 30px; color: #000; } .services__lens-replacement { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #fbfbfb; padding: 30px calc(5% + 10px); position: relative; color: #000; font-size: 15px; line-height: 2; margin-top: 40px; } .services__lens-replacement:hover { color: inherit; } .services__lens-replacement::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 2px solid #fff; pointer-events: none; } .services__lens-replacement-title { font-size: 26px; line-height: 1.6; margin: 0 0 10px; } .services__lens-replacement-subtitle, .services__lens-replacement-des, .services__lens-replacement-more, .services__lens-replacement-price { margin-bottom: 0; } .services__lens-replacement-des, .services__lens-replacement-more { color: #999; } .services__lens-replacement-price { color: #c7002e; font-size: 24px; } @media (min-width: 768px) { .services__container { width: 90%; padding-bottom: 120px; } .services__subtitle { font-size: 26px; margin-top: 80px; } .services__lens-replacement { display: grid; grid-template-columns: 1fr 60%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 10px; } .services__lens-replacement-details { max-width: 80%; } } .header-lens-replacement { position: relative; letter-spacing: 1px; } .header-lens-replacement__bg { max-width: 3840px; } .header-lens-replacement__bg picture img { width: 100%; height: auto; display: block; aspect-ratio: 192/125; } @media (min-width: 768px) { .header-lens-replacement__bg picture img { aspect-ratio: 16/5; } } .header-lens-replacement__title { position: relative; -webkit-transform: translateY(0); transform: translateY(0); padding: 34px 5%; background-color: #f4f4f4; } .header-lens-replacement__title-default, .header-lens-replacement__title-description { font-family: "Founders Grotesk", sans-serif; text-align: left; } .header-lens-replacement__title-default { font-size: 20px; font-weight: 600 !important; color: #000; } .header-lens-replacement__title-description { margin: 14px auto 0; color: #666; font-size: 15px; font-weight: normal !important; line-height: 1.6; } @media (min-width: 768px) { .header-lens-replacement__title { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; z-index: 2; margin: 0 auto; background-color: transparent; } .header-lens-replacement__title-default, .header-lens-replacement__title-description { text-align: center; } .header-lens-replacement__title-default { font-size: 40px; font-weight: 300 !important; line-height: 1; } .header-lens-replacement__title-description { max-width: 600px; margin: 17px auto 0; } } .body-lens-replacement { letter-spacing: 1px; } .body-lens-replacement__price h2 { margin-top: 50px; font-weight: 400; letter-spacing: 1px; } .body-lens-replacement__price__images { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 550px; display: block; margin: 25px auto 0; } .body-lens-replacement__price__images__option { width: 18%; height: auto; vertical-align: middle; position: relative; } .body-lens-replacement__price__images__option--hide-plus::before, .body-lens-replacement__price__images__option--hide-plus::after { display: none; } .body-lens-replacement__price__images__option img { display: block; width: 50px; height: auto; margin: 0 auto; } .body-lens-replacement__price__images__option p { text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 11px; margin-bottom: 0; letter-spacing: 1px; color: #000; } .body-lens-replacement__price__images__option::before, .body-lens-replacement__price__images__option::after { content: ""; position: absolute; background: #000; } .body-lens-replacement__price__images__option::before { top: 30px; right: 0; width: 1px; height: 11px; } .body-lens-replacement__price__images__option::after { top: 50%; right: -5px; width: 11px; margin-top: -5px; height: 1px; } @media (min-width: 768px) { .body-lens-replacement__price__images { margin: 40px auto; max-width: 620px; } .body-lens-replacement__price__images__option { width: 22%; } .body-lens-replacement__price__images__option::before { top: 26px; height: 21px; } .body-lens-replacement__price__images__option::after { right: -10px; width: 21px; } } .body-lens-replacement__price__price-value { margin: 14px auto 25px auto; width: 30%; height: auto; padding: 0 22px; } .body-lens-replacement__price__price-value--hide-sp { display: none; } @media (min-width: 768px) { .body-lens-replacement__price__price-value--hide-sp { display: table-cell; } } .body-lens-replacement__price__price-value--hide-pc { display: block; } @media (min-width: 768px) { .body-lens-replacement__price__price-value--hide-pc { display: none; } } .body-lens-replacement__price__price-value p { display: inline; position: relative; margin-bottom: 0; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 28px; line-height: 1; color: #000; } .body-lens-replacement__price__price-value p::before, .body-lens-replacement__price__price-value p::after { content: ""; position: absolute; background: #000; } .body-lens-replacement__price__price-value p::before { top: 20px; left: -30px; width: 15px; height: 1px; } .body-lens-replacement__price__price-value p::after { top: 12px; left: -30px; width: 15px; height: 1px; } @media (min-width: 768px) { .body-lens-replacement__price__price-value { margin: 14px 0 25px; } } .body-lens-replacement__price__detail { font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; line-height: 2; letter-spacing: 1px; margin-bottom: 0; color: #000; } .body-lens-replacement__lens { list-style-type: none; padding-left: 0; display: grid; grid-template-columns: 1fr; margin-bottom: 0; } .body-lens-replacement__lens__option { border-bottom: 1px dashed #e3e3e3; margin: 20px 0; padding: 0 15px 20px; position: relative; color: #000; } .body-lens-replacement__lens__option:not(:first-child) { margin-top: 0; } .body-lens-replacement__lens__option:last-child { margin-bottom: 0; } .body-lens-replacement__lens__option::before { content: ""; position: absolute; top: 10px; left: 15px; width: 30px; height: 33.3px; margin: 0; background: url("https://static.lenskart.com/media/owndays/img/lens-replacement/detail_1-lens.webp") center center/cover no-repeat; } .body-lens-replacement__lens__option.progressive::before { background: url("https://static.lenskart.com/media/owndays/img/lens-replacement/detail_2-lens.webp") center center/cover no-repeat; } .body-lens-replacement__lens__option.polarised::before { background: url("https://static.lenskart.com/media/owndays/img/lens-replacement/detail_3-lens.webp") center center/cover no-repeat; } .body-lens-replacement__lens__option.transitions::before { background: url("https://static.lenskart.com/media/owndays/img/lens-replacement/detail_4-lens.webp") center center/cover no-repeat; } .body-lens-replacement__lens__option.pc::before, .body-lens-replacement__lens__option.pc420::before { background: url("https://static.lenskart.com/media/owndays/img/lens-replacement/detail_5-lens.webp") center center/cover no-repeat; } .body-lens-replacement__lens__option.color::before { background: url("https://static.lenskart.com/media/owndays/img/lens-replacement/detail_6-lens.webp") center center/cover no-repeat; } .body-lens-replacement__lens__option.antifog::before { background: url("https://static.lenskart.com/media/owndays/img/lens-replacement/detail_7-lens.webp") center center/cover no-repeat; } .body-lens-replacement__lens__name { font-family: "Founders Grotesk", sans-serif; padding-left: 50px; } .body-lens-replacement__lens__name h3 { font-size: 14px; font-weight: 300 !important; line-height: 1.6; margin: 0; } .body-lens-replacement__lens__tag-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 5px 0 10px; } .body-lens-replacement__lens__tag--prescription, .body-lens-replacement__lens__tag--with-out-prescription, .body-lens-replacement__lens__tag--price { font-family: "Founders Grotesk", sans-serif; margin: 5px 0 0 0; } .body-lens-replacement__lens__tag--prescription, .body-lens-replacement__lens__tag--with-out-prescription { padding-right: 6px; } .body-lens-replacement__lens__tag--prescription span, .body-lens-replacement__lens__tag--with-out-prescription span { height: 18px; display: block; font-size: 10px; font-weight: normal !important; letter-spacing: normal; line-height: 19px; text-align: center; padding-inline: 6px; } .body-lens-replacement__lens__tag--prescription span { color: #fff; background: #666; } .body-lens-replacement__lens__tag--with-out-prescription span { background: #e3e3e3; } .body-lens-replacement__lens__tag--price { font-size: 14px; font-weight: 600 !important; padding-right: 10px; line-height: 20px; } .body-lens-replacement__lens__table { font-family: "Founders Grotesk", sans-serif; font-size: 12px; margin-left: 48px; width: calc(100% - 50px); height: auto; margin-bottom: 0; } .body-lens-replacement__lens__table tr th, .body-lens-replacement__lens__table tr td { vertical-align: top; } .body-lens-replacement__lens__table tbody > tr > th { width: 140px; height: auto; font-weight: 300 !important; position: relative; } .body-lens-replacement__lens__table td > p { margin-bottom: 0; line-height: 2; } .body-lens-replacement__lens__table__tooltip img { width: 18px; height: auto; } .body-lens-replacement__lens__table ul { list-style-type: none; padding-left: 0; } .body-lens-replacement__lens__table ul li { float: left; padding-left: 0; } .body-lens-replacement__lens__table ul li p { margin-bottom: 0; line-height: 2; } .body-lens-replacement__lens__detail { padding-top: 10px; } .body-lens-replacement__lens__btn-layout { width: 223px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #666; margin: 25px auto 0 auto; } .body-lens-replacement__lens__btn-layout a { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 500 !important; color: #666; text-decoration: none !important; } .body-lens-replacement__lens__tooltip-wrapper { position: relative; display: inline-block; margin: 0 0px 4px 10px; } @media (min-width: 768px) { .body-lens-replacement__lens__tooltip-wrapper { margin: 0 0px 4px 8px; } } .body-lens-replacement__lens__tooltip-wrapper .body-lens-replacement__lens__table__tooltip { position: relative; cursor: pointer; /* Show the tooltip on hover */ } .body-lens-replacement__lens__tooltip-wrapper .body-lens-replacement__lens__table__tooltip::after { content: attr(data-title); position: absolute; top: 100%; /* Position below the icon */ left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); visibility: hidden; opacity: 0; width: 200px; background-color: rgba(0, 0, 0, .75); color: #fff; text-align: center; padding: 8px; border-radius: 4px; font-size: 12px; line-height: 1.4; white-space: pre-wrap; /* Allows for line breaks */ -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000; margin-top: 8px; /* Adds spacing between the icon and tooltip */ } .body-lens-replacement__lens__tooltip-wrapper .body-lens-replacement__lens__table__tooltip::before { /* Arrow styling */ content: ''; position: absolute; bottom: -8px; /* Position arrow above the tooltip box */ left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, .75) transparent; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 999; } .body-lens-replacement__lens__tooltip-wrapper .body-lens-replacement__lens__table__tooltip:hover::after, .body-lens-replacement__lens__tooltip-wrapper .body-lens-replacement__lens__table__tooltip:hover::before { visibility: visible; opacity: 1; } @media (min-width: 768px) { .body-lens-replacement__lens__option { padding: 0 24px 20px 80px; } .body-lens-replacement__lens__option::before { width: 36px; height: 40px; left: 25px; top: calc(50% - 10px); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .body-lens-replacement__lens__name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0; } .body-lens-replacement__lens__name h3 { color: #000; font-size: 16px; } .body-lens-replacement__lens__tag-layout { margin: 10px 0 10px 20px; } .body-lens-replacement__lens__tag--prescription, .body-lens-replacement__lens__tag--with-out-prescription, .body-lens-replacement__lens__tag--price { margin: 5px 0 0 0; } .body-lens-replacement__lens__tag--prescription, .body-lens-replacement__lens__tag--with-out-prescription { padding-right: 10px; } .body-lens-replacement__lens__tag--prescription span, .body-lens-replacement__lens__tag--with-out-prescription span { font-size: 11px; } .body-lens-replacement__lens__tag--price { font-size: 18px; } .body-lens-replacement__lens__table { font-size: 15px; margin-left: -3px; width: 100%; } .body-lens-replacement__lens__table tbody > tr > th { width: 160px; } .body-lens-replacement__lens__table__tooltip { right: 0; } .body-lens-replacement__lens__table ul li { padding-right: 20px; } .body-lens-replacement__lens__btn-layout { width: 298px; -webkit-transition: 0.5s; transition: 0.5s; } .body-lens-replacement__lens__btn-layout:hover { cursor: pointer; background-color: #666; } .body-lens-replacement__lens__btn-layout:hover a { color: #fff; } } .body-lens-replacement__steps__list { list-style-type: none; padding-left: 0; margin-bottom: 0; } .body-lens-replacement__steps__step { font-family: "Founders Grotesk", sans-serif; padding: 0 15px 20px; border-bottom: 1px dashed #e3e3e3; margin: 20px 0; } .body-lens-replacement__steps__step:last-child { margin-bottom: 0; border: 0; } .body-lens-replacement__steps__step h3 { position: relative; margin-top: 0; margin-bottom: 15px; color: #000; font-size: 14px; font-weight: 400 !important; line-height: 1.6; letter-spacing: 1px; } .body-lens-replacement__steps__step h3::before { content: ""; width: 30px; height: 30px; background-repeat: no-repeat; background-position: 50%; background-size: contain; position: absolute; left: 0; top: 0; } .body-lens-replacement__steps__step h3 span { display: block; font-size: 14px; font-weight: 600 !important; color: #000; line-height: 30px; padding-left: 40px; margin-bottom: 5px; } .body-lens-replacement__steps__step p { color: #000; font-size: 15px; font-weight: normal !important; line-height: 2; letter-spacing: 1px; margin-bottom: 0; } .body-lens-replacement__steps__step p a { color: #0094c8; text-decoration: none !important; } .body-lens-replacement__steps__step--1 h3::before { background-image: url("https://static.lenskart.com/media/owndays/img/lens-replacement/store.svg"); } .body-lens-replacement__steps__step--2 h3::before { background-image: url("https://static.lenskart.com/media/owndays/img/lens-replacement/lens.svg"); } .body-lens-replacement__steps__step--3 h3::before { background-image: url("https://static.lenskart.com/media/owndays/img/lens-replacement/cleaning.svg"); } .footer-lens-replacement { margin-bottom: 60px !important; letter-spacing: 1px; } @media (min-width: 768px) { .footer-lens-replacement { margin-bottom: 200px !important; } } .footer-lens-replacement__qa { margin-bottom: 80px; } .footer-lens-replacement__qa__list { list-style-type: none; margin: 0; padding-left: 0; } .footer-lens-replacement__qa__item:last-child-a { padding-bottom: 40px; } .footer-lens-replacement__qa__item-q { padding: 20px 0; cursor: pointer; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; border-top: 1px solid #e3e3e3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer-lens-replacement__qa__item-q--border-top-none { border-top: none; } .footer-lens-replacement__qa__item-q h3 { color: #000; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400 !important; line-height: 1.9; text-align: left; padding: 0 24px 0 48px; position: relative; margin-bottom: 0; margin-top: 0; letter-spacing: 1px; } .footer-lens-replacement__qa__item-q h3::before { content: "Q"; position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-weight: 600 !important; color: #0094c8; letter-spacing: 1px; } @media (min-width: 768px) { .footer-lens-replacement__qa__item-q h3::before { left: 24px; } } .footer-lens-replacement__qa__item-navigate { padding-right: 24px; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; color: #000; letter-spacing: 1px; } .footer-lens-replacement__qa__item-a { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.4s ease; transition: max-height 0.4s ease; } .footer-lens-replacement__qa__item-a p { color: #000; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; letter-spacing: 1px; line-height: 2; padding: 0 15px 20px 48px; margin-bottom: 0; position: relative; } .footer-lens-replacement__qa__item-a p::before { content: "A"; position: absolute; left: 15px; top: 0; font-weight: 600 !important; color: #c7002e; } @media (min-width: 768px) { .footer-lens-replacement__qa__item-a p { padding: 0 24px 0 48px; } .footer-lens-replacement__qa__item-a p::before { left: 24px; } } .footer-lens-replacement__qa__item__open { border-top: 1px dashed #e3e3e3; overflow: visible; padding: 20px 0; } .base-lens-replacement__container { width: 100%; max-width: 1296px; height: auto; padding: 0 5%; margin: 0 auto; letter-spacing: 1px; } .base-lens-replacement__content { padding: 0 15px; margin: 25px 0; } .base-lens-replacement__content--inner { width: 100%; max-width: 1152px; border: 1px solid #e3e3e3; margin-top: 25px; } .base-lens-replacement__content--inner h2 { font-family: "Founders Grotesk", sans-serif; font-size: 18px; text-align: center; border-bottom: 1px solid #e3e3e3; padding: 18px 0 13px; line-height: 1; margin-block: 0; color: #000; font-weight: 400; letter-spacing: 1px; } @media (min-width: 768px) { .base-lens-replacement__content--inner { width: 80%; margin: 80px auto 0 auto; } } @media (min-width: 768px) { .base-lens-replacement__content { padding: 0 24px; margin: 40px 0; } } .base-lens-replacement__list-remark { list-style-type: none; padding-left: 0; margin-bottom: 0; } .base-lens-replacement__list-remark li { font-family: "Founders Grotesk", sans-serif; font-weight: normal !important; line-height: 2; letter-spacing: 1px; color: #999; padding-left: 20px; position: relative; padding-top: 5px; } .base-lens-replacement__list-remark li::before { content: '*'; font-size: 14px; position: absolute; left: 0; top: 4px; } @charset "UTF-8"; .service_l { margin: 0 auto 120px; display: block; overflow: hidden; position: relative; letter-spacing: 1px; } @media (max-width: 1023px) { .service_l { margin: 0 auto 60px; } } .service_l__section { position: relative; overflow: hidden; display: block; } .service_l__container { width: 90%; max-width: 1296px; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container { width: 100%; padding: 0 5%; } } .service_l__container-retail { width: 100%; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container-retail { width: 100%; padding: 0; } } .service_l__container-warranty { width: 100%; height: auto; margin: 0 auto; max-width: 1296px; } @media (max-width: 767px) { .service_l__container-warranty { width: 100%; padding: 0 5%; } } .l-account__price { width: 100%; background-color: #f4f4f4; } .l-account__price-container { padding: 70px 7%; text-align: center; } @media (max-width: 767px) { .l-account__price-container { padding: 50px 7%; } } .l-account__price-container-title, .l-account__price-container-main span, .l-account__price-container-main strong { font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; } .l-account__price-container-title { color: #000; margin-bottom: 40px; font-size: 26px; line-height: 2; } @media (max-width: 767px) { .l-account__price-container-title { font-size: 20px; font-weight: 400; margin-bottom: 20px; } } .l-account__price-container-main { background-color: #fff; max-width: 570px; border-radius: 10px; margin: 0 auto 30px; padding: 26px 0; line-height: 2; text-align: center; } .l-account__price-container-main span, .l-account__price-container-main strong { font-size: 20px; color: #000; } .l-account__price-container-main span { font-weight: 400; } .l-account__price-container-main strong { font-weight: 600; margin-right: 5px; } .l-account__price-container-text, .l-account__price-container-text-description { color: #000; font-size: 18px; line-height: 2; font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; } @media (max-width: 767px) { .l-account__price-container-text, .l-account__price-container-text-description { font-size: 14px; } } .l-account__price-container-text-description, .l-account__price-container-text-description-description { font-size: 15px; } @media (max-width: 767px) { .l-account__price-container-text-description, .l-account__price-container-text-description-description { text-align: left; } } .l-account__price-container-table { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 8px 0 30px; } .l-account__price-container-table__c-price { font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; color: #c7002e; font-size: 30px; font-weight: 400; display: inline-block; vertical-align: middle; line-height: 1; } .l-account__price-container-table .u-svg__icon { display: inline-block; vertical-align: middle; } .l-account__price-container-table .u-svg__icon-frame { width: 50px; } .l-account__price-container-table .u-svg__icon-lens { width: 30px; } .l-account__price-container-table .u-mark { display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin: 0 9px; position: relative; } .l-account__price-container-table .u-mark:before, .l-account__price-container-table .u-mark:after { content: ''; position: absolute; background: #000; } .l-account__price-container-table .u-mark__plus:before { width: 15px; height: 1px; top: 50%; left: 0; } .l-account__price-container-table .u-mark__plus:after { height: 15px; width: 1px; top: 0; left: 50%; } .l-account__price-container-table .u-mark__equal:before, .l-account__price-container-table .u-mark__equal:after { width: 15px; height: 1px; left: 0; } .l-account__price-container-table .u-mark__equal:before { top: 50%; margin-top: -3px; } .l-account__price-container-table .u-mark__equal:after { top: 50%; margin-top: 3px; } .l-account__inner { width: 90%; max-width: 1296px; margin: 0 auto; background-color: #fff; padding-top: 80px; } @media (max-width: 767px) { .l-account__inner { margin-bottom: 50px; padding-top: 40px; } } .l-account__inner--content { width: 80%; max-width: 1152px; margin: 0 auto; } @media (max-width: 767px) { .l-account__inner--content { width: 100%; padding: 0 5%; } } .l-account__inner--title, .l-account__inner--subtitle { font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; color: #000; line-height: 1.6; } .l-account__inner--title { margin-bottom: 40px; font-size: 26px; text-align: center; } @media (max-width: 767px) { .l-account__inner--title { margin-bottom: 20px; font-size: 20px; } } .l-account__inner--terms-conditions { width: 100%; } .l-account__inner--subtitle { font-size: 26px; font-weight: 700; margin: 70px 0 35px; letter-spacing: 2px; line-height: 1.6; position: relative; } .l-account__inner--subtitle::before { content: ''; display: block; position: absolute; width: 6px; height: 100%; left: -20px; top: -2px; border-left: 6px solid #000; } @media (max-width: 767px) { .l-account__inner--subtitle { font-size: 18px; margin-top: 35px; margin-bottom: 25px; } .l-account__inner--subtitle::before { width: 5px; top: -2px; left: -21px; border-left: 5px solid #000; } } .l-account__inner .l-account__inner--image { width: calc(100% + 80px); height: auto; display: block; max-width: none !important; margin: 0 -40px; aspect-ratio: 5 / 2; } @media (min-width: 768px) { .l-account__inner .l-account__inner--image { width: 100%; margin: 0 auto; } } .l-account__inner--list { padding-left: 0; margin-left: 0; width: 100%; font-family: "Founders Grotesk", sans-serif; -webkit-font-smoothing: subpixel-antialiased; list-style: none; } .l-account__inner--list-item { font-size: 15px; color: #000; position: relative; padding-left: 20px; letter-spacing: 1px; line-height: 2; } .l-account__inner--list-item::before { content: '・'; position: absolute; left: 0; top: 4px; font-size: 12px; } .service_l { margin: 0 auto 120px; display: block; overflow: hidden; position: relative; letter-spacing: 1px; } @media (max-width: 1023px) { .service_l { margin: 0 auto 60px; } } .service_l__section { position: relative; overflow: hidden; display: block; } .service_l__container { width: 90%; max-width: 1296px; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container { width: 100%; padding: 0 5%; } } .service_l__container-retail { width: 100%; height: auto; margin: 0 auto; } @media (max-width: 767px) { .service_l__container-retail { width: 100%; padding: 0; } } .service_l__container-warranty { width: 100%; height: auto; margin: 0 auto; max-width: 1296px; } @media (max-width: 767px) { .service_l__container-warranty { width: 100%; padding: 0 5%; } } .staff-section__content { position: relative; margin-top: 80px; letter-spacing: 1px; } @media (max-width: 767px) { .staff-section__content { margin-top: 25px; padding: 0; } } .staff-section__content-inner { width: 80%; max-width: 1152px; margin: 0 auto; border: 1px solid #e3e3e3; } @media (max-width: 767px) { .staff-section__content-inner { width: 100%; } } .staff-section__content-title { font-size: 18px; text-align: center; border-bottom: 1px solid #e3e3e3; padding: 18px 0 13px; font-family: "Founders Grotesk", sans-serif; color: #000; -webkit-font-smoothing: subpixel-antialiased; line-height: 1; margin: 0; } @media (max-width: 767px) { .staff-section__content-title { padding: 15px 20px; line-height: 1.3; font-weight: 400; } } @media (max-width: 1023px) { .staff-section__content-title { font-weight: 400; } } .staff-section__content-description { padding: 20px; margin: 0; font-size: 15px; font-family: "Founders Grotesk", sans-serif; color: #000; -webkit-font-smoothing: subpixel-antialiased; line-height: 2; } .staff-section__content-table { padding: 0 20px 20px; } .staff-section__content-table table { border: 1px solid #e3e3e3; width: 100%; border-collapse: collapse; } .staff-section__content-table table th { border-bottom: 1px solid #e3e3e3; vertical-align: middle; width: 100px; text-align: center; } .staff-section__content-table table th img { width: 45px; margin: 0 auto; } @media (max-width: 767px) { .staff-section__content-table table th { border-bottom: none; width: 100%; display: block; margin-top: 20px; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media (max-width: 1023px) { .staff-section__content-table table th.-last { border-bottom: 0; } } .staff-section__content-table table td { border-left: 1px dashed #e3e3e3; border-bottom: 1px solid #e3e3e3; vertical-align: middle; padding: 0; margin: 0; } .staff-section__content-table table td h3 { font-size: 16px; padding: 20px 20px 0; font-weight: 600; margin: 0; font-family: "Founders Grotesk", sans-serif; color: #000; -webkit-font-smoothing: subpixel-antialiased; line-height: 2; } @media (max-width: 767px) { .staff-section__content-table table td h3 { padding: 10px 0 0; text-align: center; } } .staff-section__content-table table td p { font-size: 15px; padding: 10px 20px 20px; margin: 0; font-family: "Founders Grotesk", sans-serif; color: #000; -webkit-font-smoothing: subpixel-antialiased; line-height: 2; } @media (max-width: 767px) { .staff-section__content-table table td { border-left: 0; display: block; width: 100%; } .staff-section__content-table table td p { letter-spacing: 0.8px; } } @media (max-width: 1023px) { .staff-section__content-table table td.-last { display: block; width: 100%; border-bottom: 0; padding: 0; margin: 0; } .staff-section__content-table table td.-last p { letter-spacing: 0.8px; } } @media (max-width: 1023px) { .staff-section__content-table table { margin: 0; } } .l-care { color: #000; } .l-care__main-logo { padding: 30px 0; } .l-care__main-logo img { display: block; width: 100%; max-width: 160px; margin: 0 auto; } .l-care__main-content { background-color: #F0F0F0; } .l-care__main-content-heading { padding: 44px 10% 0; font-size: 21px; font-weight: 700 !important; line-height: 1.4; margin: 0; } .l-care__main-content-img { display: block; max-width: 380px; margin-left: auto; margin-right: 0; } .l-care__main-footer { background-color: #06082B; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.3; text-align: center; padding: 10px 20px; margin: 0; } .l-care__features { margin: 46px 0; padding: 0 5%; text-align: center; } .l-care__features-title { font-size: 29px; font-weight: 700 !important; line-height: 1.5; letter-spacing: 3px; text-align: center; display: inline-block; border-bottom: 4px solid #000; margin: 0 auto 30px; } .l-care__features-list { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16px; } .l-care__features-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .l-care__features-item-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #F0F0F0; width: 155px; height: 155px; border-radius: 100%; margin: 0; } .l-care__features-item-title span { font-size: 15px; font-weight: 400; line-height: 2; letter-spacing: 1px; } .l-care__features-item-title span img { display: inline-block; margin: 3px auto; width: 100%; max-width: 90px; } .l-care__features-item-text { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; line-height: 2; } .l-care__terms { margin: 46px 0; padding: 0 5%; } .l-care__terms-inner { border: 1px solid #000; padding: 0 7%; max-width: 860px; margin: 0 auto; } .l-care__terms-title { font-size: 18px; font-weight: 700 !important; line-height: 1.5; text-align: center; margin: -13.5px auto 13px; background-color: #fff; width: 280px; } .l-care__terms-text { font-size: 13px; line-height: 2; letter-spacing: 1px; margin-bottom: 2em; } @media screen and (min-width: 768px) { .l-care__main-logo { padding: 50px 0; } .l-care__main-logo img { max-width: 240px; } .l-care__main-content { position: relative; } .l-care__main-content-heading { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 80%; max-width: 1152px; margin: 0 auto; padding: 0; } .l-care__main-footer { font-size: 20px; } .l-care__terms-inner { padding: 0 3%; } } @media screen and (min-width: 1024px) { .l-care__main-content-heading { font-size: 29px; } .l-care__main-content-img { max-width: 560px; } .l-care__features { margin: 70px 0; } .l-care__features-title { font-size: 37px; letter-spacing: 3px; margin-bottom: 70px; } .l-care__features-list { gap: 75px; } .l-care__features-item-title { width: 220px; height: 220px; padding: 10px; } .l-care__features-item-title span { display: inline-block; font-size: 20px; line-height: 1.6; } .l-care__features-item-title span strong { font-family: inherit; font-weight: 700; } .l-care__features-item-title span img { max-width: 120px; } .l-care__features-item-text { font-size: 15px; } .l-care__terms { margin: 90px 0 120px; } .l-care__terms-title { font-size: 28px; line-height: 1.6; margin-top: -21px; } } .header-owndays-pc__container__banner { background-color: #f9f9f9; padding: 100px 0 255px; position: relative; } .header-owndays-pc__container__nav { text-align: center; padding: 100px 0; } .header-owndays-pc__logo { margin: 0 0 50px 0; } .header-owndays-pc__logo img { display: block; width: 100%; height: auto; max-width: 617px; } .header-owndays-pc__heading { font-family: "NeuzeitGroReg"; font-size: 18px; font-weight: normal !important; letter-spacing: 0.1em; line-height: 1.6; margin: 0 0 44px 0; } .header-owndays-pc__tag img { display: block; width: 100%; height: auto; max-width: 140px; } .header-owndays-pc__product { position: absolute; left: calc(50% - 169px); right: -161px; bottom: 30px; pointer-events: none; } .header-owndays-pc__product img { display: block; } .header-owndays-pc__nav-title { font-family: "NeuzeitGroReg"; font-weight: normal !important; font-size: 16px; line-height: 1.375; } .header-owndays-pc__nav-title--long { margin: 0 0 20px 0; } .header-owndays-pc__nav-title--short { margin: 0 0 40px 0; } .header-owndays-pc___nav-list { display: grid; grid-template-columns: 100%; grid-gap: 60px 120px; width: 100%; max-width: 1120px; margin: 0 auto; } .header-owndays-pc___nav-list .slick-current { z-index: 1; } .header-owndays-pc__nav-item img { display: block; width: 100%; max-width: 500px; height: auto; margin-bottom: 72px; } @media (min-width: 768px) { .header-owndays-pc__container__banner { padding: 267px 0 155px; } .header-owndays-pc__container__nav { padding-bottom: 180px; } .header-owndays-pc__logo { max-width: 50%; } .header-owndays-pc__heading br { display: none; } .header-owndays-pc__tag img { max-width: 160px; } .header-owndays-pc__product { top: 45%; left: 50%; right: -255px; bottom: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .header-owndays-pc__product img { width: 100%; } .header-owndays-pc__nav-title { font-size: 20px; letter-spacing: 1px; } .header-owndays-pc__nav-title__hide-new-line { display: none; } .header-owndays-pc__nav-title--long, .header-owndays-pc__nav-title--short { margin: 0 0 30px 0; } .header-owndays-pc___nav-list { grid-template-columns: repeat(2, calc(50% - 60px)); } .header-owndays-pc__nav-item img { margin-bottom: 55px; } } .product-od-pc__container { width: -webkit-max-content; width: -moz-max-content; width: max-content; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 94px; } @media (min-width: 768px) { .product-od-pc__container { bottom: 92px; } } .product-od-pc__palette { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 14px; } @media (min-width: 768px) { .product-od-pc__palette { gap: 12px; } } .product-od-pc__color { padding: 0; width: 28px; height: 28px; background: transparent; background-size: contain; border: 3px solid #ffffff; font-size: 0; color: transparent; cursor: pointer; } @media (min-width: 860px) { .product-od-pc__color { width: 22px; height: 22px; } } .product-od-pc__color--selected { -webkit-box-shadow: 0 0 0 1px #000000; box-shadow: 0 0 0 1px #000000; } .slider-owndays-pc .slick-list { padding: 0 50% !important; } .slider-owndays-pc .slick-slide { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 0 5px; } .slider-owndays-pc .slick-slide div li { max-width: 580px; margin: 0 15px; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } .slider-owndays-pc .slick-slide div li img { display: block; width: 100%; height: auto; } .slider-owndays-pc__btn-prev, .slider-owndays-pc__btn-next { display: none; } @media (min-width: 1024px) { .slider-owndays-pc { position: relative; padding: 0 12%; } .slider-owndays-pc__btn-prev, .slider-owndays-pc__btn-next { display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .slider-owndays-pc__btn-prev { left: 4%; } .slider-owndays-pc__btn-next { right: 4%; } } @media (min-width: 1296px) { .slider-owndays-pc .slick-list { padding: 0 !important; } } .body-owndays-pc__about__top, .body-owndays-pc__about__middle { padding: 60px 0; } .body-owndays-pc__about__top { padding-top: 50px; } .body-owndays-pc__about__middle { background-color: #f9f9f9; margin-bottom: 60px; } .body-owndays-pc__about__middle ul { display: grid; grid-template-columns: 1fr; grid-row-gap: 40px; max-width: 820px; margin: 0 auto; padding-left: 0; list-style-type: none; } .body-owndays-pc__about__middle ul li h5 { font-family: "NeuzeitGroReg"; font-weight: 400 !important; font-size: 12px; letter-spacing: 0.1em; line-height: 1.3; margin: 0; } .body-owndays-pc__about__middle ul li p { font-family: "Space Mono", monospace; font-weight: 400 !important; font-size: 18px; line-height: 1.4; min-height: 25.19px; margin: 0; } @media (min-width: 768px) { .body-owndays-pc__about__middle ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media (min-width: 1024px) { .body-owndays-pc__about__top { padding-top: 90px; padding-bottom: 100px; } .body-owndays-pc__about__top .base-owndays-pc__btn { margin-left: 0; } .body-owndays-pc__about__middle { margin-bottom: 100px; } .body-owndays-pc__about__middle ul li h5 { font-size: 14px; } .body-owndays-pc__about__middle ul li p { font-size: 20px; min-height: 28px; } .body-owndays-pc__about__middle ul li:nth-child(1) p { min-width: 294px; } .body-owndays-pc__about__middle ul li:nth-child(2) p { min-width: 111px; } } .body-owndays-pc__points { padding: 100px 0; } .body-owndays-pc__points__list { display: grid; grid-template-columns: 1fr; grid-gap: 40px; max-width: 240px; margin: 0 auto 60px; list-style-type: none; padding-left: 0; } .body-owndays-pc__points__list li img { margin-bottom: 20px; } .body-owndays-pc__points__list li h5 { font-family: "Space Mono", monospace; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: center; margin-bottom: 15px; } .body-owndays-pc__points__list li p { font-family: "NeuzeitGroReg"; font-size: 14px; line-height: 1.6; letter-spacing: 0.5px; margin: 0; } @media (min-width: 768px) { .body-owndays-pc__points__list { grid-template-columns: repeat(3, 1fr); max-width: 1050px; margin-bottom: 100px; } } @media (min-width: 1024px) { .body-owndays-pc__points { padding-top: 180px; } .body-owndays-pc__points__list { grid-column-gap: 120px; } .body-owndays-pc__points__list li h5, .body-owndays-pc__points__list li p { font-size: 16px; } } .body-owndays-pc__what__top { padding: 0 0 20px 0; } .body-owndays-pc__what__blue-light { margin: 0 auto; max-width: 800px; } .body-owndays-pc__what__slider { margin: 60px 0 100px; } .body-owndays-pc__what__slider .slick-list { padding: 0 50% !important; } @media (min-width: 1024px) { .body-owndays-pc__what__top { padding: 80px 0 60px 0; } .body-owndays-pc__what__slider { margin: 100px 0 186px 0; } .body-owndays-pc__what__slider .slick-list { padding: 0 !important; } } .footer-owndays-pc__lineup { padding-bottom: 100px; } .footer-owndays-pc__lineup__mb-0 { margin-bottom: 0 !important; } .footer-owndays-pc__lineup__product { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 12px; margin-top: 60px; list-style-type: none; padding-left: 0; } @media (min-width: 768px) { .footer-owndays-pc__lineup__product { margin-top: 0; grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .footer-owndays-pc__lineup__product { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } .footer-owndays-pc__lineup__product--first { margin-top: 0; } } .footer-owndays-pc__lineup__product a img { display: block; width: 100%; height: auto; -webkit-transition: 0.6s; transition: 0.6s; } .footer-owndays-pc__lineup__product a:hover, .footer-owndays-pc__lineup__product a:active, .footer-owndays-pc__lineup__product a:visited, .footer-owndays-pc__lineup__product a:focus { text-decoration: none; } .footer-owndays-pc__lineup__product a:hover { color: #000000; } .footer-owndays-pc__lineup__product a:hover img { opacity: 1; } .footer-owndays-pc__lineup__product figure { position: relative; margin: 0; } @media (min-width: 768px) { .footer-owndays-pc__lineup__product figure:hover img { -webkit-transform: scale(1.03); transform: scale(1.03); } } .footer-owndays-pc__lineup__product-color { font-family: "Space Mono", monospace; font-size: 12px; position: absolute; top: 0; left: 0; z-index: 2; color: #000000; margin: 0; } .footer-owndays-pc__lineup__product-sku { font-family: "NeuzeitGroReg"; font-size: 14px; font-weight: 600; letter-spacing: 1px; color: #000000; margin: 0; } .footer-owndays-pc__lineup__more { margin-top: 40px; margin-bottom: 100px; } @media (min-width: 768px) { .footer-owndays-pc__lineup__more { margin-top: 60px; margin-bottom: 90px; } } .footer-owndays-pc__lineup__footer { display: grid; grid-template-columns: 1fr; gap: 40px 0; margin-top: 100px; } @media (min-width: 768px) { .footer-owndays-pc__lineup__footer { grid-template-columns: 1fr 1fr; gap: 40px 20px; } } @media (min-width: 1024px) { .footer-owndays-pc__lineup__footer { gap: 90px 180px; } } .footer-owndays-pc__lineup__footer .base-owndays-pc__btn { width: 100%; max-width: 450px; } @media (min-width: 768px) { .footer-owndays-pc__lineup__footer .base-owndays-pc__btn:first-child { margin-left: auto; margin-right: 0; } .footer-owndays-pc__lineup__footer .base-owndays-pc__btn:last-child { margin-left: 0; } } @media (min-width: 1024px) { .footer-owndays-pc__lineup { padding-bottom: 180px; } } .base-owndays-pc__hidden-overflow-x { overflow-x: hidden; } .base-owndays-pc__container { width: 100%; max-width: calc(1200px + 10%); height: auto; padding: 0 5%; } @media (min-width: 768px) { .base-owndays-pc__container { max-width: calc(1200px + 20%); padding: 0 10%; margin: 0 auto; } } .base-owndays-pc__container-bg-grid { width: 100%; max-width: calc(1200px + 20%); padding: 0 10%; } @media (min-width: 768px) { .base-owndays-pc__container-bg-grid { max-width: calc(1200px + 10%); padding: 0 5%; margin: 0 auto; } } .base-owndays-pc__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #4e7098; color: #ffffff; border-radius: 10rem; height: 60px; font: 700 14px/20px "NeuzeitGroBold"; font-weight: 700 !important; letter-spacing: 0.1em; padding: 9px 60px 8px 30px; position: relative; margin: 0 auto; cursor: pointer; } .base-owndays-pc__btn::before { content: ""; position: absolute; top: 50%; right: 30px; width: 16px; height: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-repeat: repeat; } .base-owndays-pc__btn:hover, .base-owndays-pc__btn:active, .base-owndays-pc__btn:visited, .base-owndays-pc__btn:focus { text-decoration: none; } .base-owndays-pc__btn--down::before { background-image: url("https://static.lenskart.com/media/owndays/img/owndays-pc/arrow-alt-circle-down.png"); background-position: center 0px; background-size: 16px 16px; } .base-owndays-pc__btn--left::before { background-image: url("https://static.lenskart.com/media/owndays/img/owndays-pc/arrow-alt-circle-left.png"); background-position: 0px center; background-size: 16px 16px; } .base-owndays-pc__btn--right::before { background-image: url("https://static.lenskart.com/media/owndays/img/owndays-pc/arrow-alt-circle-right.png"); background-position: 0px center; background-size: 16px 16px; } .base-owndays-pc__btn--black { background-color: #000000; letter-spacing: 0.05em; } .base-owndays-pc__btn--black:hover, .base-owndays-pc__btn--black:focus, .base-owndays-pc__btn--black:visited { background-color: #000000; color: #ffffff; } .base-owndays-pc__btn--circle { width: 54px; height: 54px; padding: 0; border: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .base-owndays-pc__btn--circle::before { left: 50%; right: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 768px) { .base-owndays-pc__btn { max-width: 220px; } } @media (min-width: 1024px) { .base-owndays-pc__btn { font-size: 16px; -webkit-transition: 0.5s; transition: 0.5s; } .base-owndays-pc__btn:hover, .base-owndays-pc__btn:focus, .base-owndays-pc__btn:focus:hover, .base-owndays-pc__btn:visited:hover { background-color: #000000; color: #ffffff; } .base-owndays-pc__btn--down:hover::before { -webkit-animation: owndays-pc-btn-hover-down 0.3s ease forwards; animation: owndays-pc-btn-hover-down 0.3s ease forwards; } .base-owndays-pc__btn--left:hover::before { -webkit-animation: owndays-pc-btn-hover-left 0.3s ease forwards; animation: owndays-pc-btn-hover-left 0.3s ease forwards; } .base-owndays-pc__btn--right:hover::before { -webkit-animation: owndays-pc-btn-hover-right 0.3s ease forwards; animation: owndays-pc-btn-hover-right 0.3s ease forwards; } .base-owndays-pc__btn--black:hover, .base-owndays-pc__btn--black:focus, .base-owndays-pc__btn--black:visited:hover { background-color: #4e7098; color: #ffffff; } .base-owndays-pc__btn--black:visited { background-color: #000000; color: #ffffff; } .base-owndays-pc__btn--circle:focus { background-color: #4e7098; color: #ffffff; } } .base-owndays-pc__bg { background-image: url("https://static.lenskart.com/media/owndays/img/owndays-pc/line-bg-sp.png"); background-repeat: repeat; background-position: left top; background-size: auto; } @media (min-width: 1024px) { .base-owndays-pc__bg { background-image: url("https://static.lenskart.com/media/owndays/img/owndays-pc/line-bg-pc.svg"); } } .base-owndays-pc__title { font-family: "Space Mono", monospace; font-weight: 300 !important; line-height: 1.5; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 40px; } .base-owndays-pc__title-name { font-size: 50px; } .base-owndays-pc__title-no { font-size: 10px; position: relative; letter-spacing: 2px; } .base-owndays-pc__title-no::before { content: ""; position: absolute; top: 50%; left: calc(2em + 5px); width: 119px; border-top: 1px solid #000000; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .base-owndays-pc__title-content p { font-family: "NeuzeitGroReg"; font-size: 15px; font-weight: normal !important; line-height: 2; letter-spacing: 0; } .base-owndays-pc__title-content p:nth-child(1) { margin-bottom: 20px; } .base-owndays-pc__title-content p:nth-child(2) { margin-bottom: 40px; } @media (min-width: 1024px) { .base-owndays-pc__title { margin-bottom: 100px; } .base-owndays-pc__title-name { font-size: 90px; } .base-owndays-pc__title-no::before { width: 200px; } .base-owndays-pc__title-grid { display: grid; grid-template-columns: 1fr calc(50% + 120px); } .base-owndays-pc__title-content { margin-top: 50px; line-height: 1.625; letter-spacing: 0.5px; } .base-owndays-pc__title-content p { font-size: 15px; } .base-owndays-pc__title-content div .base-owndays-pc__btn { max-width: 275px; } } @-webkit-keyframes owndays-pc-btn-hover-down { 0% { background-position: center 0px; } 100% { background-position: center 16px; } } @keyframes owndays-pc-btn-hover-down { 0% { background-position: center 0px; } 100% { background-position: center 16px; } } @-webkit-keyframes owndays-pc-btn-hover-left { 0% { background-position: 0px center; } 100% { background-position: -16px center; } } @keyframes owndays-pc-btn-hover-left { 0% { background-position: 0px center; } 100% { background-position: -16px center; } } @-webkit-keyframes owndays-pc-btn-hover-right { 0% { background-position: 0px center; } 100% { background-position: 16px center; } } @keyframes owndays-pc-btn-hover-right { 0% { background-position: 0px center; } 100% { background-position: 16px center; } } .od-login-page { position: fixed; inset: 0; z-index: 9999; font-size: 16px; display: grid; grid-template-columns: repeat(2, 1fr); } .od-login-page input[type='date'] { display: block; -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 50px; } .od-login-page .od-login-page-number-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .od-login-page .od-login-page-number-wrapper_code { width: 60px; padding-right: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .od-login-page .od-login-page-number-wrapper_code::-webkit-input-placeholder { color: #000; } .od-login-page .od-login-page-number-wrapper_code::-moz-placeholder { color: #000; } .od-login-page .od-login-page-number-wrapper_code::-ms-input-placeholder { color: #000; } .od-login-page .od-login-page-number-wrapper_code::placeholder { color: #000; } .od-login-page .od-login-page-number-wrapper_code--disabled { opacity: 0.5; } .od-login-page .od-login-page-number-wrapper_number { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .od-login-page .od-login-page-number-wrapper_number--disabled { pointer-events: none; opacity: 0.5; } .od-login-page-left { padding: 48px; background: url("https://static1.lenskart.com/media/owndays/img/customer/account/auth-bg_pc.webp") no-repeat left top/cover; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-weight: 400; line-height: normal; } .od-login-page-left__back { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 52px; height: 52px; background-color: #fff; border-radius: 10rem; margin-bottom: 24px; font: 0/0 a; } .od-login-page-left__heading { font: 0/0 a; margin: 0 0 80px; } .od-login-page-left__heading img { display: block; width: 100%; max-width: 342px; } .od-login-page-left__benefits { list-style: none; padding: 0; margin: 0 0 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 624px; } .od-login-page-left__benefits li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; border-radius: 12px; background: rgba(76, 76, 76, .4); backdrop-filter: blur(4px); padding: 16px; } .od-login-page-left__benefits li p { font-size: 20px; margin: 0; } .od-login-page-left__copyright { margin-block: auto 0; font-size: 18px; text-align: center; } .od-login-page-right { position: relative; background-color: #fafafa; z-index: 9999999999; padding-block: 46px; overflow-y: auto; } .od-login-page-right-h1 { font-family: 'Founders Grotesk', sans-serif; font-size: 24px; text-align: center; margin: 0 0 24px 0; padding: 0px 30px; letter-spacing: -2%; } @media (min-width: 900px) { .od-login-page-right-h1 { margin: 0 0 50px 0; } } .od-login-page-right-flex { display: -webkit-box; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .od-login-page-right-form { background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; padding: 24px; border-radius: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 60%; } @media (max-width: 1024px) { .od-login-page-right-form { width: 80%; } } .od-login-page-right-form h4 { font-family: 'Founders Grotesk', sans-serif; line-height: 26px; font-size: 24px; } .od-login-page-right-form input, .od-login-page-right-form select { display: block; padding: 12px 16px; background-color: #fafafa; border: none; border-radius: 8px; margin-bottom: 16px; font-size: 16px; width: 100%; } .od-login-page-right-form-fp { text-align: right; font-family: 'Founders Grotesk', sans-serif; color: #444444; text-decoration: underline; cursor: pointer; font-size: 16px; margin-bottom: 24px; } .od-login-page-right-form-sb { width: 100%; background-color: #546073; padding: 12px 20px; border: none; border-radius: 40px; color: #fff; font-size: 20px; margin-top: 24px; -webkit-transition: opacity 0.3s ease, background-color 0.3s ease; transition: opacity 0.3s ease, background-color 0.3s ease; } .od-login-page-right-form-sb:disabled { opacity: 0.5; cursor: not-allowed; background-color: #8090a3; } .od-login-page-right-form-sb:not(:disabled):hover { background-color: #3a4350; } .od-login-page .od-login-page-input-error { color: #a94442; margin-bottom: 16px; margin-top: 16px; } .od-login-page .od-login-page-phone-error { color: #a94442; margin-bottom: 16px; } .od-login-page .divider-line { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .od-login-page .divider-line-left { border: 1px solid rgba(0, 0, 0, 0.06275); margin-right: 20px; width: 100%; height: 1px; } .od-login-page .divider-line-text { font-family: 'Founders Grotesk', sans-serif; } .od-login-page .divider-line-right { border: 1px solid rgba(0, 0, 0, 0.06275); margin-left: 20px; width: 100%; height: 1px; } .od-login-page .od-login-page-number-h { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; } .od-login-page .od-login-page-number-h .od-login-page-right-form-fp { margin-bottom: 0px; } .od-login-page .od-login-page-number-h .od-login-page-right-form-fp__disabled { color: #444444; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .receive-news { font-family: "Founders Grotesk", sans-serif; font-size: 16px; } .receive-news__list { list-style-type: none; margin: 16px 2px; padding: 0; } .receive-news__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; } .receive-news__item__checkbox { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .receive-news__item__checkbox + label { position: relative; padding-left: 35px; cursor: pointer; display: inline-block; line-height: 25px; } .receive-news__item__checkbox + label:before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border: 2px solid #546073; border-radius: 50%; background: #fff; } .receive-news__item__checkbox:checked + label:before { background: #3885ff; border-color: #3885ff; } .receive-news__item__checkbox:checked + label:after { content: ''; position: absolute; left: 7px; top: 7px; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .receive-news__item__name { margin: 0; font-weight: 400; } .receive-news__item__name a { color: inherit; text-decoration: underline; } @font-face { font-family: 'Font Awesome 6 Brands'; font-style: normal; font-weight: 400; font-display: block; src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.ttf) format("truetype"); } .l-zeon { color: #fff; background-color: #000; font: 500 14px/220% "Zen Kaku Gothic New", sans-serif; letter-spacing: normal; min-height: 100vh; overflow: hidden; } .l-zeon *, .l-zeon *::before, .l-zeon *::after { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; border: none; color: inherit; background: none; } .l-zeon ul, .l-zeon ol { list-style: none; } .l-zeon button { cursor: pointer; background-color: unset; } .l-zeon button, .l-zeon input, .l-zeon optgroup, .l-zeon select, .l-zeon textarea { color: inherit; font: inherit; } .l-zeon a { cursor: pointer; text-decoration: none !important; outline: none; display: block; } @media (min-width: 1024px) { .l-zeon { font-size: 16px; line-height: 250%; } } .l-zeon__container { padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; width: 100%; max-width: 1320px; } .l-zeon__heading { font: 400 36px/28px "Post No Bills Colombo", sans-serif; letter-spacing: 3.6px; display: -webkit-box; display: -ms-flexbox; display: flex; } .l-zeon__heading span { font: inherit; letter-spacing: inherit; position: relative; } .l-zeon__heading--border span { padding-bottom: 32px; } .l-zeon__heading--border span::before, .l-zeon__heading--border span::after { content: ''; position: absolute; left: 17px; border-top: 1px solid #fff; } .l-zeon__heading--border span::before { bottom: 13px; width: 84px; } .l-zeon__heading--border span::after { bottom: 0; width: 46px; } .l-zeon__heading--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-zeon__heading--center span::before, .l-zeon__heading--center span::after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .l-zeon__heading--bold { font-weight: 700 !important; } @media (min-width: 768px) { .l-zeon__heading--pc-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-zeon__heading--pc-center span::before, .l-zeon__heading--pc-center span::after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (min-width: 1024px) { .l-zeon__heading { font-size: 48px; line-height: 28px; letter-spacing: 4.8px; } .l-zeon__heading--border span { padding-bottom: 46px; } .l-zeon__heading--border span::before { bottom: 16px; width: 225px; } .l-zeon__heading--border span::after { width: 123px; } } .l-zeon__btn { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 60px; border-radius: 10rem; background: #c18b35 url("https://www.owndays.com/images/specials/products/gundam5-zeon/arrow-right.svg") no-repeat right 28px center/8px auto; color: #fff; font: 600 16px/1 "Zen Kaku Gothic New", sans-serif; } .l-zeon__btn:hover { color: #fff; } .l-zeon__btn:focus, .l-zeon__btn:active, .l-zeon__btn:visited { color: #fff; } .l-zeon__btn--red { background-color: #b31111; border-color: #b31111; border-radius: 8px; } .l-zeon__btn--pill { border-radius: 10rem; } .l-zeon__btn--reservation { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/arrow-up-down.svg"); background-position: right 24px center; background-size: 19px auto; } .l-zeon__btn--sold-out { background: #999; pointer-events: none; } .l-zeon__btn[disabled] { opacity: 0.5; pointer-events: none; } @media (min-width: 1024px) { .l-zeon__btn { height: 85px; font-size: 18px; letter-spacing: 1px; background-position: right 40px center; background-size: 9px auto; } .l-zeon__btn:hover { color: #fff; -webkit-animation: shine 2s; animation: shine 2s; } .l-zeon__btn--red { height: 80px; } .l-zeon__btn--red:hover { -webkit-animation: shine-red 2s; animation: shine-red 2s; } .l-zeon__btn--reservation { background-position: right 37px center; background-size: 25px auto; } } .l-zeon .main { background: url("https://www.owndays.com/images/specials/products/gundam5-zeon/main_bg-sp.webp") no-repeat center top/cover; position: relative; overflow: hidden; } .l-zeon .main::before { content: ''; position: absolute; top: auto; left: 0; right: 0; bottom: 0; background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(40%, rgba(0, 0, 0, .5)), color-stop(95%, rgba(0, 0, 0, 0))); background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, 0) 95%); z-index: 3; } .l-zeon .main .l-zeon__container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding-bottom: 150px; z-index: 4; } .l-zeon .main__fg { position: absolute; left: 0; right: 0; } .l-zeon .main__fg img { width: 100%; } .l-zeon .main__fg--1 { top: 0; z-index: 0; } .l-zeon .main__fg--2 { bottom: -60px; z-index: 2; } .l-zeon .main__zeon-logo { position: absolute; top: 26px; right: 15px; width: 44px; } .l-zeon .main__char { position: relative; z-index: 1; } .l-zeon .main__heading { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 75px; } .l-zeon .main__heading h1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 17px; } .l-zeon .main__heading h1 img { max-width: 281px; margin: 0 auto; } .l-zeon .main__heading h1 span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #c18b35; border-width: 1px 0 1px 0; border-style: solid; border-color: #c18b35; font: 900 13px/16px "Zen Old Mincho", serif; letter-spacing: 2.08px; padding: 5px 28px 7px; } .l-zeon .main__heading h1 i { font-style: normal; background-color: #999; border-color: #999; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1.56px; line-height: 1; padding: 5px 12px 8px; text-align: center; } .l-zeon .main__scroll-down { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-zeon .main__scroll-down a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100px; height: 100px; position: relative; } .l-zeon .main__scroll-down a::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("https://www.owndays.com/images/specials/products/gundam5-zeon/scroll-down.svg") no-repeat center/contain; -webkit-animation: rotation 10s infinite linear; animation: rotation 10s infinite linear; } .l-zeon .main__scroll-down a i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; width: 32px; height: 48px; background: url("https://www.owndays.com/images/specials/products/gundam5-zeon/arrow-down.svg") no-repeat center/contain; font: 0/0 a; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .l-zeon .main__period { margin-bottom: 2px; } .l-zeon .main__period-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 94px; height: 94px; border-radius: 100%; background-color: #c18b35; margin-left: auto; } .l-zeon .main__period-wrap span { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; } .l-zeon .main__period-wrap span.y { font-size: 10px; line-height: 17px; letter-spacing: 1px; margin-top: -6px; } .l-zeon .main__period-wrap span.m-d { font-size: 20px; line-height: 17px; letter-spacing: 1.2px; margin-top: -2px; margin-bottom: 3px; } .l-zeon .main__period-wrap span.m-d small { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #7e530d; padding: 2px 1px 3px 2px; font-size: 8px; font-weight: 700; line-height: 5px; letter-spacing: 0.8px; margin-left: 2px; } .l-zeon .main__period-wrap span.t { font-size: 9px; line-height: 6px; letter-spacing: 0.18px; margin-bottom: 1px; } .l-zeon .main__period-wrap span.text { font-size: 12px; font-weight: 500; line-height: 17px; letter-spacing: 1.2px; } @media (min-width: 768px) { .l-zeon .main { background-repeat: repeat-x; background-size: auto 100%; background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/main_bg-pc.webp"); } .l-zeon .main__char { margin-left: calc(50% - 507px); } .l-zeon .main__fg img { -o-object-fit: contain; object-fit: contain; } .l-zeon .main__fg--1 img { max-height: 422px; -o-object-position: right top; object-position: right top; } .l-zeon .main__fg--2 img { max-height: 685px; -o-object-position: right top; object-position: right top; } .l-zeon .main__period { position: absolute; top: calc(50% + 10rem); left: 0; right: 0; padding: 0 20px; margin-bottom: 0; } .l-zeon .main__heading h1 i { font-size: 16px; letter-spacing: 4.8px; } } @media (min-width: 1024px) { .l-zeon .main .l-zeon__container { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 313px; padding-bottom: 124px; } .l-zeon .main__zeon-logo { width: 76px; } .l-zeon .main__fg--2 { bottom: -35px; } .l-zeon .main__heading h1 { row-gap: 28px; } .l-zeon .main__heading h1 img { max-width: 525px; } .l-zeon .main__heading h1 span { font-size: 23px; line-height: 16px; letter-spacing: 3.68px; padding: 25px 0 27px; } .l-zeon .main__scroll-down a { width: 150px; height: 150px; } .l-zeon .main__scroll-down a i { width: 48px; height: 73px; } .l-zeon .main__scroll-down a:hover i { -webkit-animation: move 1s infinite linear; animation: move 1s infinite linear; } .l-zeon .main__period { top: calc(50% + 4rem); } .l-zeon .main__period-wrap { width: 168px; height: 168px; } .l-zeon .main__period-wrap span.y { font-size: 15px; line-height: 26px; letter-spacing: 1.5px; margin-top: -15px; } .l-zeon .main__period-wrap span.m-d { font-size: 34px; letter-spacing: 3.4px; margin-top: 5px; margin-bottom: 7px; } .l-zeon .main__period-wrap span.m-d small { font-size: 14px; line-height: 19px; letter-spacing: 1.4px; padding: 0 2px 1px 3px; margin-left: 4px; -webkit-transform: translateY(-5px); transform: translateY(-5px); } .l-zeon .main__period-wrap span.t { font-size: 15px; letter-spacing: 0.3px; margin-bottom: 10px; } .l-zeon .main__period-wrap span.text { font-size: 21px; letter-spacing: 2.1px; } } @media (min-width: 1296px) { .l-zeon .main__zeon-logo { top: 70px; right: 60px; } .l-zeon .main__heading { padding-left: 60px; } .l-zeon .main__period { padding: 0 70px; } } .l-zeon .concept { position: relative; z-index: 3; margin-top: -1px; } .l-zeon .concept .l-zeon__heading { margin-bottom: 50px; } .l-zeon .concept__text { padding: 0 30px; max-width: 860px; margin: 0 auto 90px; } .l-zeon .concept__movie { position: relative; overflow: hidden; padding-top: 56.25%; } .l-zeon .concept__movie-wrap { max-width: 860px; margin: 0 auto; } .l-zeon .concept__movie::after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 64px; height: 64px; background: url("https://www.owndays.com/images/specials/products/gundam5-zeon/btn_play.svg") no-repeat center/contain; } .l-zeon .concept__movie img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .l-zeon .concept__movie iframe { pointer-events: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 1024px) { .l-zeon .concept .l-zeon__heading { margin-bottom: 60px; } .l-zeon .concept__text { margin-bottom: 100px; } .l-zeon .concept__movie::after { width: 87px; height: 87px; } .l-zeon .concept__movie:hover picture, .l-zeon .concept__movie:hover img { opacity: 1; } .l-zeon .concept__movie:hover img, .l-zeon .concept__movie:hover iframe { -webkit-transform: scale(1.1); transform: scale(1.1); } } .l-zeon .lineup__item { position: relative; } .l-zeon .lineup__item::before { content: ''; position: absolute; left: 0; right: 0; background-repeat: repeat-x; background-position: center; background-size: auto 100%; } .l-zeon .lineup__item--glasses { padding: 115px 0 0; } .l-zeon .lineup__item--glasses::before { top: -199px; bottom: -189px; background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/lineup_bg-1-sp.webp"); } .l-zeon .lineup__item--glasses .lineup__char { top: 289px; left: calc(50% - 333px); } .l-zeon .lineup__item--sunglasses { padding: 120px 0 94px; } .l-zeon .lineup__item--sunglasses::before { top: -121px; bottom: -168px; background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/lineup_bg-2-sp.webp"); } .l-zeon .lineup__item--sunglasses .lineup__char { top: 248px; left: calc(50% - 274px); } .l-zeon .lineup__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .l-zeon .lineup__char { width: 750px; height: 1080px; position: absolute; z-index: 1; } .l-zeon .lineup__content { position: relative; z-index: 2; } .l-zeon .lineup__heading { display: -webkit-box; display: -ms-flexbox; display: flex; row-gap: 25px; padding: 0 20px; margin-bottom: 497px; } .l-zeon .lineup__heading-logo { max-width: 31px; } .l-zeon .lineup__heading-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 15px; } .l-zeon .lineup__heading-text h2 { color: #c18b35; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 15px; font: 500 26px/160% "Zen Kaku Gothic New", sans-serif !important; letter-spacing: 1.3px; } .l-zeon .lineup__heading-text h2 small { font: 900 14px/16px "Zen Old Mincho", serif; letter-spacing: 2.24px; } .l-zeon .lineup__heading-text p { font: 500 14px/165% "Zen Kaku Gothic New", sans-serif; } .l-zeon .lineup__heading-text p strong { font-family: inherit !important; font-weight: 600 !important; font-size: 20px; margin: 0 0.25em; } .l-zeon .lineup__heading-text p small { font-size: 12px; font-weight: 400; } .l-zeon .lineup__product { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .l-zeon .lineup__product-slider img { width: 337px; padding: 10px 0; background-color: #fff; } .l-zeon .lineup__product-slider .slick { display: none; } .l-zeon .lineup__product-slider .slick.active { display: block; } .l-zeon .lineup__product-slider .slick-slide > div { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 6px; } .l-zeon .lineup__product-details { padding: 25px 20px 63px; position: relative; } .l-zeon .lineup__product-details::before { content: ''; position: absolute; top: -125px; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .8); background-blend-mode: multiply; z-index: -1; } .l-zeon .lineup__product-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 45px; } .l-zeon .lineup__product-colors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } .l-zeon .lineup__product-colors li { display: -webkit-box; display: -ms-flexbox; display: flex; } .l-zeon .lineup__product-colors li button { display: -webkit-box; display: -ms-flexbox; display: flex; outline: none; padding: 0; font: 0/0 a; width: 57px; height: 26px; border: 2px solid transparent; background-repeat: no-repeat; background-position: center; background-size: cover; cursor: pointer; } .l-zeon .lineup__product-colors li button.active { border-color: #c18b35; } .l-zeon .lineup__product-color { margin-left: 20px; font: 500 14px/165% "Zen Kaku Gothic New", sans-serif; } .l-zeon .lineup__product-nav { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } .l-zeon .lineup__product-nav-btn { outline: none; font: 0/0 a; padding: 0; background-color: #fff; background-repeat: no-repeat; background-size: 16px auto; border: 1px solid #666; border-radius: 100%; width: 80px; height: 80px; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .l-zeon .lineup__product-nav-btn:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .l-zeon .lineup__product-nav-btn--prev { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/chevron-left.svg"); background-position: 45% center; } .l-zeon .lineup__product-nav-btn--next { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/chevron-right.svg"); background-position: 55% center; } .l-zeon .lineup__product-des { margin-bottom: 38px; } @media (max-width: 1023px) { .l-zeon .lineup__heading { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .l-zeon .lineup__heading-logo { margin: 0 auto; } .l-zeon .lineup__heading-text { text-align: center; } .l-zeon .lineup__product-actions { padding: 0 7px; } .l-zeon .lineup__product-nav { display: none; visibility: hidden; opacity: 0; } .l-zeon .lineup__product-des { text-align: justify; padding: 0 30px; } .l-zeon .lineup__product-link { padding: 0 10px; } } @media (min-width: 768px) { .l-zeon .lineup__item--glasses::before { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/lineup_bg-1-pc.webp"); } .l-zeon .lineup__item--sunglasses::before { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/lineup_bg-2-pc.webp"); } } @media (min-width: 1024px) { .l-zeon .lineup__item--glasses { padding: 263px 0 242px; } .l-zeon .lineup__item--glasses .lineup__char { top: 218px; left: auto; right: calc(50% - 109px); } .l-zeon .lineup__item--glasses .lineup__content { margin-left: calc(50% - 190px); } .l-zeon .lineup__item--glasses .lineup__heading { padding-left: 83px; } .l-zeon .lineup__item--glasses .lineup__product-slider { margin-left: 70px; } .l-zeon .lineup__item--glasses .lineup__product-slider .slick-slide > div { margin: 0 30px 0 0; } .l-zeon .lineup__item--sunglasses { padding: 137px 0 371px; } .l-zeon .lineup__item--sunglasses .lineup__char { top: 202px; left: calc(50% + 25px); } .l-zeon .lineup__item--sunglasses .lineup__content { margin-left: auto; margin-right: calc(50% - 190px); } .l-zeon .lineup__item--sunglasses .lineup__heading { padding-left: 100px; } .l-zeon .lineup__item--sunglasses .lineup__product-slider { -ms-flex-item-align: end; align-self: flex-end; margin-right: 70px; } .l-zeon .lineup__item--sunglasses .lineup__product-slider img { width: 100%; } .l-zeon .lineup__item--sunglasses .lineup__product-slider .slick-slide > div { margin: 0 0 0 30px; } .l-zeon .lineup__item--sunglasses .lineup__product-details { margin-left: auto; } .l-zeon .lineup__char { width: 972px; height: 1374px; } .l-zeon .lineup__heading { -webkit-column-gap: 28px; -moz-column-gap: 28px; column-gap: 28px; margin-bottom: 58px; } .l-zeon .lineup__heading-logo { max-width: 72px; } .l-zeon .lineup__heading-text { row-gap: 29px; } .l-zeon .lineup__heading-text h2 { font-size: 32px !important; letter-spacing: 5.12px; row-gap: 12px; } .l-zeon .lineup__heading-text h2 small { font-size: 20px; letter-spacing: 3.2px; } .l-zeon .lineup__heading-text p { font-size: 16px; } .l-zeon .lineup__heading-text p strong { font-size: 24px; } .l-zeon .lineup__heading-text p small { font-size: 16px; } .l-zeon .lineup__product-slider { width: 1120px; } .l-zeon .lineup__product-slider img { width: 100%; padding: 18px 0; } .l-zeon .lineup__product-details { padding: 30px 70px 60px; max-width: 870px; } .l-zeon .lineup__product-actions { margin-bottom: 35px; } .l-zeon .lineup__product-colors li button { width: 100px; height: 45px; } .l-zeon .lineup__product-color { margin-left: 25px; font-size: 18px; } .l-zeon .lineup__product-des { margin-bottom: 35px; } } @media (min-width: 1296px) { .l-zeon .lineup__product-slider { width: 1320px; } } .l-zeon .accessories { position: relative; } .l-zeon .accessories .l-zeon__heading { margin-bottom: 50px; } .l-zeon .accessories__inner { background-color: #191313; padding: 100px 30px; } .l-zeon .accessories__grid { display: grid; grid-gap: 40px; } @media (min-width: 768px) { .l-zeon .accessories__grid { grid-template-columns: calc(50% + 27px) 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024px) { .l-zeon .accessories .l-zeon__heading { margin-bottom: 70px; } .l-zeon .accessories__inner { padding: 110px 60px; } .l-zeon .accessories__grid { grid-gap: 50px; } } .l-zeon .stores { padding: 100px 0; } .l-zeon .stores .l-zeon__container { max-width: 915px; } .l-zeon .stores .l-zeon__heading { margin-bottom: 40px; } .l-zeon .stores .l-zeon__btn { max-width: 700px; margin: 0 auto; } .l-zeon .stores__text { text-align: center; font: 500 20px/170% "Zen Kaku Gothic New", sans-serif; letter-spacing: 1px; } .l-zeon .stores__text small { font-weight: inherit; font-size: 16px; letter-spacing: 0.8px; } .l-zeon .stores__text i { font-weight: inherit; font-size: 9px; letter-spacing: 0.45px; } .l-zeon .stores__action { padding: 0 10px 50px; } .l-zeon .stores__notes { margin-top: 15px; font: 500 12px/220% "Zen Kaku Gothic New", sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #999; font: 400 13px/220% "Inter", sans-serif; } .l-zeon .stores__notes li { position: relative; padding-left: 1.5em; } .l-zeon .stores__notes li::before { content: '*'; position: absolute; top: 0; left: 0; } @media (min-width: 1024px) { .l-zeon .stores { padding: 150px 0; } .l-zeon .stores .l-zeon__heading { margin-bottom: 50px; } .l-zeon .stores__text { font-size: 30px; letter-spacing: 1.5px; } .l-zeon .stores__text small { font-size: 21px; letter-spacing: 1.05px; } .l-zeon .stores__text i { font-size: 14px; letter-spacing: 0.7px; } .l-zeon .stores__note { margin-top: 20px; font-size: 14px; letter-spacing: 0.7px; } .l-zeon .stores__action { padding-bottom: 70px; } } .l-zeon .case { position: relative; padding: 60px 10px 153px; background: url("https://www.owndays.com/images/specials/products/gundam5-zeon/case_bg-sp.webp") no-repeat center top/cover; } .l-zeon .case .l-zeon__container { position: relative; z-index: 1; } .l-zeon .case__img { position: absolute; top: 26px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 295px; z-index: 0; } .l-zeon .case__badge { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 12px 8px; background-color: #66430b; color: #fff; font: 500 13px/16px "Zen Kaku Gothic New", sans-serif; letter-spacing: 3.9px; } .l-zeon .case__heading { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: 900 36px/44px "Zen Old Mincho", serif; letter-spacing: 1.44px; row-gap: 3px; margin-bottom: 12px; } .l-zeon .case__heading small { font-size: 13px; font-weight: inherit; line-height: normal; letter-spacing: 1.17px; } .l-zeon .case__zeon-owndays { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 15px; text-align: center; margin-bottom: 46px; } .l-zeon .case__zeon-owndays h3 { max-width: 187px; margin: 0 auto; } .l-zeon .case__zeon-owndays p { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; font: 500 12px/28px "Zen Kaku Gothic New", sans-serif; letter-spacing: 3px; padding: 0 44px 4px; border-width: 1px 0 1px 0; border-style: solid; border-color: #fff; } .l-zeon .case__zeon-owndays p strong { font-weight: 900; font-size: 16px; line-height: inherit; letter-spacing: 2.08px; } .l-zeon .case__action { max-width: 400px; margin: 0 auto; } .l-zeon .case__soldout-notice { position: relative; background-color: #999; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1.56px; line-height: 1; padding: 5px 12px 8px; text-align: center; margin: 0 auto; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (max-width: 767px) { .l-zeon .case__soldout-notice { margin-top: 256px; margin-bottom: 10px; } } @media (min-width: 768px) { .l-zeon .case { padding: 94px 0; background-repeat: repeat-x; background-size: auto 100%; background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/case_bg-pc.webp"); } .l-zeon .case__img { top: -28.5px; left: auto; right: calc(50% + 40px); -webkit-transform: translateX(0); transform: translateX(0); } .l-zeon .case__content { max-width: 440px; margin-left: 50%; } .l-zeon .case__badge { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .l-zeon .case__heading { margin-top: 20px; } .l-zeon .case__soldout-notice { font-size: 16px; letter-spacing: 3.8px; } } @media (min-width: 1024px) { .l-zeon .case__img { top: -57px; right: calc(50% + 55px); width: 440px; } .l-zeon .case__heading { row-gap: 10px; font-size: 45px; line-height: 48px; letter-spacing: 1.8px; margin-bottom: 23px; } .l-zeon .case__heading small { font-size: 16px; line-height: normal; letter-spacing: 1.44px; } .l-zeon .case__zeon-owndays { row-gap: 30px; } .l-zeon .case__zeon-owndays h3 { max-width: 267px; } .l-zeon .case__zeon-owndays p { padding: 4px 56px 8px; font-size: 15px; line-height: 28px; letter-spacing: 3.75px; } .l-zeon .case__zeon-owndays p strong { font-size: 19px; line-height: inherit; letter-spacing: 2.47px; } } .l-zeon .share { padding: 60px 0 100px; } .l-zeon .share__inner { background-color: #150707; padding: 43px 0 62px; } .l-zeon .share__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } .l-zeon .share__list li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: #fff; font-size: 35px; } @media (max-width: 767px) { .l-zeon .share .l-zeon__heading { margin-bottom: 26px; } } @media (min-width: 768px) { .l-zeon .share .l-zeon__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 28.5px; -moz-column-gap: 28.5px; column-gap: 28.5px; } } @media (min-width: 1024px) { .l-zeon .share { padding-bottom: 110px; } .l-zeon .share .l-zeon__container { -webkit-column-gap: 57px; -moz-column-gap: 57px; column-gap: 57px; } .l-zeon .share .l-zeon__heading { font-size: 40px; line-height: 44px; letter-spacing: 4px; } .l-zeon .share__inner { padding-top: 30px; padding-bottom: 26px; } .l-zeon .share__list { -webkit-column-gap: 36px; -moz-column-gap: 36px; column-gap: 36px; } } .fancybox-container .fancybox-infobar { top: calc(50% + 62vw); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; } .fancybox-container .fancybox-button--zoom, .fancybox-container .fancybox-button--play { display: none !important; } .fancybox-container .fancybox-button--close { background-color: #000; } .fancybox-container .fancybox-navigation { position: absolute; top: calc(50% + 50vw); left: 0; right: 0; z-index: 99997; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } .fancybox-container .fancybox-navigation .fancybox-button { position: static; padding: 0; width: 60px; height: 60px; background-color: #fff; border-radius: 100%; border: 1px solid #666666; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-repeat: no-repeat; background-position: center; background-size: 10px auto; } .fancybox-container .fancybox-navigation .fancybox-button svg { display: none !important; } .fancybox-container .fancybox-navigation .fancybox-button--arrow_left { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/nav-prev.svg"); } .fancybox-container .fancybox-navigation .fancybox-button--arrow_right { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zeon/nav-next.svg"); } .fancybox-container .fancybox-navigation .fancybox-button[disabled] { opacity: 0.6; cursor: not-allowed; } .fancybox-container .fancybox-caption { top: calc(50% + 38vw); left: 0; bottom: auto; text-align: left; padding: 0 20px; max-width: 780px; margin: 0 auto; background: none; } .fa-brands, .fab { font-family: 'Font Awesome 6 Brands'; font-style: normal; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-variant: normal; line-height: 1; text-rendering: auto; font-weight: 400; } .fa-facebook:before { content: '\f09a'; } .fa-x-twitter:before { content: '\e61b'; } .fa-line:before { content: '\f3c0'; } #zendesk-chat-widget { z-index: 9; } @media (max-width: 1152px) { .breadcrumbContainer_wrapper { -webkit-transform: translate(20px, 4px) !important; transform: translate(20px, 4px) !important; } } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes move { 0% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 25% { -webkit-transform: translate(-50%, -35%); transform: translate(-50%, -35%); } 50% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 75% { -webkit-transform: translate(-50%, -65%); transform: translate(-50%, -65%); } 100% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes move { 0% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 25% { -webkit-transform: translate(-50%, -35%); transform: translate(-50%, -35%); } 50% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 75% { -webkit-transform: translate(-50%, -65%); transform: translate(-50%, -65%); } 100% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @-webkit-keyframes shine { 0% { background-color: #c18b35; } 8% { background-color: #ffd086; } 100% { background-color: #c18b35; } } @keyframes shine { 0% { background-color: #c18b35; } 8% { background-color: #ffd086; } 100% { background-color: #c18b35; } } @-webkit-keyframes shine-red { 0% { background-color: #b31111; } 8% { background-color: #ff8383; } 100% { background-color: #b31111; } } @keyframes shine-red { 0% { background-color: #b31111; } 8% { background-color: #ff8383; } 100% { background-color: #b31111; } } .breadcrumbContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid rgba(84, 96, 115, .1); border-bottom: 1px solid rgba(84, 96, 115, .1); } .breadcrumbContainer_wrapper { font-size: 11px; letter-spacing: 1px; border-radius: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0px 5px 5px 0; } .breadcrumbContainer_wrapper_breadcrumb { padding: 0; margin: 0; } .breadcrumbContainer_wrapper_breadcrumb li { font-size: 16px; line-height: 30px; opacity: 0.3; display: inline-block; } .breadcrumbContainer_wrapper_breadcrumb li:after { content: '>'; padding: 0 15px; font-family: 'NeuzeitGroReg', sans-serif; } .breadcrumbContainer_wrapper_breadcrumb li:last-child:after { display: none; } .breadcrumbContainer_wrapper_breadcrumb li:last-child { opacity: 1; } .breadcrumbContainer_wrapper_breadcrumb span { color: #000000; } .breadcrumbContainer_wrapper_breadcrumb a { color: #000000; } @media only screen and (min-width: 1025px) { .breadcrumbContainer_wrapper { margin-top: 5px; padding-left: 50px; } .breadcrumbContainer_wrapper_breadcrumb { text-overflow: ellipsis; white-space: normal; overflow: hidden; } } @media screen and (max-width: 1153px) { .breadcrumbContainer_wrapper { -webkit-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .animatedBackground { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #f6f7f8; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee)); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; } .yt-modal__overlay { position: fixed; inset: 0; background-color: rgba(30, 30, 30, .9); padding: 5%; z-index: 9999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .yt-modal__content { position: relative; aspect-ratio: 16/9; } .yt-modal__close { position: absolute; top: 0; right: 0; background-color: rgba(30, 30, 30, .6); color: #ccc; border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; width: 44px; height: 44px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 24px; } .yt-modal__iframe { width: 100%; height: 100%; border: none; } .fancybox__footer { display: none !important; } .fancybox__backdrop { background: rgba(24, 24, 27, .81); } .l-gundam5 .slick-track { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .l-gundam5 .slick-slide { height: inherit !important; } .l-gundam5 .slick-slide { margin: 0 17.5px; } .l-gundam5 .slick-initialized .slick-slide { position: relative; border: 4px solid rgba(193, 139, 53, .6); background: rgba(0, 0, 0, .5); padding: 20px 16px; height: auto; width: 82.05128vw !important; max-width: 598px !important; margin: 0 10px; } .fancybox-image-list .fancybox__slide.has-image > .fancybox__content { margin-top: -200px; max-width: 640px !important; height: auto !important; padding: 0 !important; } .fancybox__nav { position: relative; bottom: 120px; width: 165px; margin-left: auto; margin-right: auto; } .fancybox__nav button { width: 60px; height: 60px; background-color: #fff; color: #666666 !important; } .fancybox__nav button svg { -webkit-filter: none !important; filter: none !important; } .fancybox__nav button:hover { background-color: #fff !important; color: #666666 !important; } .fancybox__nav .fancybox__infobar { bottom: -70px; position: absolute; color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .fancybox__toolbar .fancybox__infobar { opacity: 0; } .fancybox__toolbar .f-button:hover { background-color: rgba(24, 24, 27, .65) !important; } .l-gundam5 { font: 500 14px/30px "Zen Kaku Gothic New", sans-serif; color: #fff; padding-bottom: 0.1px; background-color: #000; } .l-gundam5 *, .l-gundam5 *::before, .l-gundam5 *::after { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; border: none; color: inherit; background: none; } .l-gundam5 ul, .l-gundam5 ol { list-style: none; } .l-gundam5 button { cursor: pointer; background-color: unset; } .l-gundam5 button, .l-gundam5 input, .l-gundam5 optgroup, .l-gundam5 select, .l-gundam5 textarea { color: inherit; font: inherit; } .l-gundam5 a { cursor: pointer; text-decoration: none !important; outline: none; } .l-gundam5 img, .l-gundam5 picture { width: 100%; height: auto; display: block; vertical-align: middle; } .l-gundam5__container { max-width: 1200px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .l-gundam5__title { font: 400 36px/1 "Post No Bills Colombo", sans-serif; letter-spacing: 3.6px; padding-bottom: 32px; color: #fff; position: relative; } .l-gundam5__title::before, .l-gundam5__title::after { content: ''; position: absolute; left: 16px; border-top: 1px solid #fff; } .l-gundam5__title::before { width: 83px; bottom: 13px; } .l-gundam5__title::after { width: 45px; bottom: 0; } .l-gundam5__title--right { text-align: right; } .l-gundam5__title--right::before, .l-gundam5__title--right::after { left: auto; right: 16px; } .l-gundam5__title--center { text-align: center; } .l-gundam5__title--center::before, .l-gundam5__title--center::after { left: 0; right: 0; margin: 0 auto; } @media (min-width: 768px) { .l-gundam5__title { font-size: 48px; padding-bottom: 46px; } .l-gundam5__title::before { width: 225px; bottom: 16px; } .l-gundam5__title::after { width: 123px; } } .l-gundam5__btn { font: 600 14px/1 "Zen Kaku Gothic New", sans-serif; background-color: #b31111; color: #fff !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 60px; padding: 0 50px; border-radius: 30px; position: relative; -webkit-transition: 0.3s; transition: 0.3s; border: none; } .l-gundam5__btn[disabled] { pointer-events: none; background: #999; } .l-gundam5__btn[disabled]::after { display: none; } .l-gundam5__btn::after { content: ''; position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 9px; height: 17px; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/icon-right.svg") center/contain no-repeat; } @media (min-width: 1024px) { .l-gundam5__btn { font-size: 18px; height: 80px; border-radius: 40px; } .l-gundam5__btn::after { width: 12px; height: 25px; right: 42px; } .l-gundam5__btn:hover { -webkit-animation: gundam_shine 2s; animation: gundam_shine 2s; } } .l-gundam5 .main { color: #fff; position: relative; z-index: 3; } .l-gundam5 .main .l-gundam5__container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .l-gundam5 .main__img { position: relative; pointer-events: none; z-index: -1; } .l-gundam5 .main__img img { aspect-ratio: 195/368; } .l-gundam5 .main__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 33vw 20px 0; } .l-gundam5 .main__content h1 { font: 900 44px/48px "Zen Old Mincho", serif; letter-spacing: 1.76px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; text-align: center; margin-top: 5px; text-shadow: 0 4px 5px rgba(0, 0, 0, .4); } .l-gundam5 .main__content h1 + small { font: 900 14px/1 "Zen Old Mincho", serif; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .l-gundam5 .main__content p { font: 500 12px/1 "Zen Kaku Gothic New", sans-serif; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; text-align: center; border: 1px solid #fff; border-left: none; border-right: none; letter-spacing: 2px; padding: 5px 44px 9px; } .l-gundam5 .main__content p strong { font-size: 16px; font-weight: 900; letter-spacing: 2.08px; } .l-gundam5 .main__logo { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 187px; margin: 15px auto; aspect-ratio: 187/43; pointer-events: none; } .l-gundam5 .main__zeon-logo { width: 44px; height: auto; position: absolute; top: 26px; right: 20px; aspect-ratio: 44/63; } .l-gundam5 .main__scroll-down { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 99px; height: 99px; margin: 70px auto 0; position: absolute; left: 0; right: 0; bottom: 28px; } .l-gundam5 .main__scroll-down span { opacity: 0; position: absolute; } .l-gundam5 .main__scroll-down::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/scroll-down-circle.svg") center/contain no-repeat; -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } .l-gundam5 .main__scroll-down::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/arrow-down.svg") center/31px auto no-repeat; } .l-gundam5 .main__sales { background-color: #c18b35; color: #fff; width: 94px; height: 94px; border-radius: 50%; position: absolute; top: 48px; left: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: "Zen Kaku Gothic New", sans-serif; line-height: 1; } .l-gundam5 .main__sales-year { font-size: 10px; font-weight: 700; letter-spacing: 1px; margin-top: -4px; } .l-gundam5 .main__sales-date { font-size: 20px; font-weight: 700; letter-spacing: 1.2px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: 2px 0px; } .l-gundam5 .main__sales-date small { font-size: 8px; font-weight: 700; letter-spacing: normal; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 1.5px 1.5px 2px; margin-left: 3px; background-color: #7e530d; } .l-gundam5 .main__sales-time { font-size: 9px; font-weight: 700; letter-spacing: 0.18px; } .l-gundam5 .main__sales-text { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; margin-top: 4px; } @media (min-width: 480px) { .l-gundam5 .main__content { padding-top: 63vw; } } @media (min-width: 768px) { .l-gundam5 .main__img img { aspect-ratio: 180/107; } .l-gundam5 .main__content { padding-top: 30vw; } .l-gundam5 .main__scroll-down { top: calc(100% + 20px); bottom: auto; margin-top: 0; } .l-gundam5 .main__sales { top: 11.45833vw; left: 17.57813vw; } } @media (min-width: 1024px) { .l-gundam5 .main__content { padding-top: 25vw; } .l-gundam5 .main__content h1 { font-size: 50px; letter-spacing: 2px; margin-top: 20px; } .l-gundam5 .main__content h1 small { font-size: 16px; letter-spacing: 1.44px; } .l-gundam5 .main__content p { font-size: 15px; letter-spacing: 3.75px; padding: 8px 55px 11px; } .l-gundam5 .main__content p strong { font-size: 19px; letter-spacing: 2.47px; } .l-gundam5 .main__logo { margin: 23px auto 30px; width: 267px; } .l-gundam5 .main__zeon-logo { top: 69px; right: 60px; width: 5.27778vw; max-width: 76px; } .l-gundam5 .main__scroll-down { top: auto; bottom: 0; margin-top: 0; -webkit-transform: translateY(70%); transform: translateY(70%); } .l-gundam5 .main__scroll-down:hover::after { -webkit-animation: gundam_move 1s infinite linear; animation: gundam_move 1s infinite linear; } .l-gundam5 .main__sales { width: 168px; height: 168px; top: 10.25391vw; left: 12.20703vw; } .l-gundam5 .main__sales-year { font-size: 15px; letter-spacing: 1.5px; margin-top: -8px; } .l-gundam5 .main__sales-date { font-size: 34px; letter-spacing: 2.04px; margin: 4px 0px; } .l-gundam5 .main__sales-date small { font-size: 14px; font-weight: 700; padding: 2px 2px 3px; margin-left: 4px; } .l-gundam5 .main__sales-time { font-size: 15px; letter-spacing: 0.3px; } .l-gundam5 .main__sales-text { font-size: 21px; letter-spacing: 2.1px; margin-top: 6px; } } @media (min-width: 1296px) { .l-gundam5 .main__sales { top: 155px; left: 12.2%; } } @media (min-width: 1440px) { .l-gundam5 .main__content { padding-top: 18vw; } .l-gundam5 .main__scroll-down { width: 151px; height: 151px; -webkit-transform: translateY(1%); transform: translateY(1%); z-index: 33 !important; } .l-gundam5 .main__scroll-down::after { background-size: 48px auto; } } .l-gundam5 .concept { padding: 57px 0 123px 0; position: relative; z-index: 2; /* &__3d { height: 2000px; &-container { position: sticky; top: 20px; } model-viewer { //--progress-bar-color: transparent; width: 100%; //height: 70vh; height: calc(100vh - 60px - 140px); max-height: 1000px; outline: none; border: none; opacity: 0; transform: scale(0.96); filter: brightness(0.1); transition: opacity 0.3s 0.2s, transform 2.5s 0.2s, filter 3.5s 0.2s; &.active { opacity: 1; transform: scale(1); filter: brightness(1); } } .model-poster { position: absolute; top: 0; left: 0; right: 0; height: 100%; transition: 0.3s; &::before { content: ""; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/3d/poster.webp") center/contain no-repeat; position: absolute; top: 50%; left: 0; right: 0; width: 100%; height: 80%; transform: translateY(-50%); margin: 0 auto; filter: brightness(0.3) blur(2px); } &.inactive { opacity: 0; pointer-events: none; } &-body { position: absolute; left: 0; right: 0; top: 53%; i { display: block; margin: 0 auto 8px; width: 35px; height: 35px; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/spinner.png") center/contain no-repeat; animation: spin 2.5s linear infinite; opacity: 0.8; } span { font: 400 14px/1 $font-zen; color: $white; text-align: center; display: block; } } } } */ } .l-gundam5 .concept::before { content: ''; position: absolute; top: -67.4359vw; left: 0; right: 0; bottom: 0; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/concept-bg-sp.webp") bottom center/cover no-repeat; pointer-events: none; z-index: -1; } .l-gundam5 .concept .l-gundam5__container { position: relative; } .l-gundam5 .concept__img { position: absolute; top: -25px; left: 0; right: 0; pointer-events: none; } .l-gundam5 .concept__desc { font: 500 14px/30px "Zen Kaku Gothic New", sans-serif; letter-spacing: normal; color: #fff; text-align: justify; padding: 30px; background: rgba(0, 0, 0, .65); background-blend-mode: multiply; margin: 84.61538vw -20px 0 auto; position: relative; z-index: 2; width: 82.05128vw; max-width: 320px; } .l-gundam5 .concept__video-note { font-size: 9px; text-align: right; margin-top: 5px; } @media (min-width: 768px) { .l-gundam5 .concept { padding: 217px 0 123px 0; /* &__3d { model-viewer { //height: 90vh; height: calc(100vh - 77px - 110px); } } */ } .l-gundam5 .concept::before { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/concept-bg-pc.webp"); top: -20.27778vw; } .l-gundam5 .concept__img { top: -140px; left: auto; width: 80%; max-width: 794px; overflow: hidden; } .l-gundam5 .concept__img img { -webkit-transform: translateX(120px); transform: translateX(120px); } .l-gundam5 .concept__desc { font-size: 16px; margin: 63px 0 0 0; width: 55%; max-width: none; padding: 50px; } } @media (min-width: 1024px) { .l-gundam5 .concept { padding-bottom: 243px; /* &__3d { height: 3000px; .model-poster { &-body { i { width: 40px; height: 40px; margin-bottom: 12px; } span { font-size: 16px; } } } } */ } .l-gundam5 .concept__img { top: -190px; } .l-gundam5 .concept__desc { width: 50%; line-height: 40px; } .l-gundam5 .concept__video-note { font-size: 12px; } } @media (min-width: 1200px) { .l-gundam5 .concept__img img { -webkit-transform: translateX(0); transform: translateX(0); } } @media (min-width: 1440px) { .l-gundam5 .concept__img { top: -205px; right: -88px; } } @media (min-width: 1920px) { .l-gundam5 .concept::before { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/concept-bg-2560.webp"); background-size: 3000px 100%; background-position: top center; } } .l-gundam5 .function { position: relative; padding: 0 0 453px; margin-bottom: -320px; z-index: 1; } .l-gundam5 .function::before { content: ''; position: absolute; top: -76.92308vw; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: -1; } .l-gundam5 .function::before { background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/function-bg-sp.webp") top center/cover no-repeat; } .l-gundam5 .function__slider { position: relative; margin: 50px 0 0 0; } .l-gundam5 .function__slider .swiper-slide { border: 4px solid rgba(193, 139, 53, .6); background: rgba(0, 0, 0, .5); padding: 20px 16px; height: auto; } .l-gundam5 .function__slider-img { position: relative; opacity: 1 !important; } .l-gundam5 .function__slider-img img { opacity: 1 !important; aspect-ratio: 280/203; } .l-gundam5 .function__slider-img button { position: absolute; right: 0; bottom: 0; width: 43px; height: 43px; background: rgba(255, 255, 255, .5) url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/icon-zoom.svg") center/20px 20px no-repeat; border: none; outline: none; cursor: pointer; } .l-gundam5 .function__slider-desc { font: 500 12px/1.6 "Zen Kaku Gothic New", sans-serif; margin-top: 20px; } .l-gundam5 .function__ar { margin: 90px -20px 0; padding: 60px 30px; background: rgba(0, 0, 0, .6); background-blend-mode: multiply; } .l-gundam5 .function__ar-title { font: 400 36px/1 "Post No Bills Colombo", sans-serif; text-align: center; } .l-gundam5 .function__ar-img { margin: 30px auto; width: 100%; } .l-gundam5 .function__ar-img-demo { aspect-ratio: 330/240; } .l-gundam5 .function__ar-img-qr { display: none; } .l-gundam5 .function__ar-desc { font: 500 14px/30px "Zen Kaku Gothic New", sans-serif; letter-spacing: normal; } .l-gundam5 .function__ar-note { display: block; font: 500 9px/20px "Zen Kaku Gothic New", sans-serif; margin-top: 8px; } .l-gundam5 .function__ar-btn { font: 500 14px/1 "Zen Kaku Gothic New", sans-serif; width: 100%; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid currentColor; border-radius: 30px; margin: 30px auto 0; } .l-gundam5 .function__ar-btn i { width: 27px; height: 27px; margin-right: 15px; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/icon-ar.svg") center/contain no-repeat; } .l-gundam5 .function__price { padding: 30px 0 50px 0; } .l-gundam5 .function__price-img { margin: 0 -20px; width: auto; } .l-gundam5 .function__price-img img { aspect-ratio: 130/129; } .l-gundam5 .function__price-title { margin: 36px auto 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-gundam5 .function__price-title span { font: 500 26px/1 "Zen Kaku Gothic New", sans-serif; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .l-gundam5 .function__price-title small { font: 500 13px/1 "Zen Kaku Gothic New", sans-serif; margin-bottom: 20px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .l-gundam5 .function__price-value { font: 500 21px/1 "Zen Kaku Gothic New", sans-serif; letter-spacing: normal; text-align: center; margin-bottom: 30px; } .l-gundam5 .function__price-value small { font: 500 11px/1 "Zen Kaku Gothic New", sans-serif; } .l-gundam5 .function__price-note { font: 500 11px/1 "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.33px; display: block; text-align: center; margin-top: 15px; } .l-gundam5 .function__price-note--custom-1 { font-size: 8px; letter-spacing: 0.24px; margin-left: 3px; } .l-gundam5 .function__price-note--custom-2 { font-size: 9px; letter-spacing: 0.27px; } .l-gundam5 .function #gallery_img_popup { display: none; } @media (min-width: 768px) { .l-gundam5 .function { margin-bottom: -324px; } .l-gundam5 .function::before { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/function-bg-pc.webp"); background-size: 100% auto; top: -28.88889vw; } .l-gundam5 .function__slider { margin-top: 72px; } .l-gundam5 .function__slider .swiper-slide { padding: 37px 33px 33px; max-width: 598px !important; } .l-gundam5 .function__slider-img button { width: 80px; height: 80px; background-size: 42px 42px; } .l-gundam5 .function__slider-desc { font-size: 16px; line-height: 28px; margin-top: 34px; } .l-gundam5 .function__ar { margin: 150px 0 0; display: grid; grid-template-areas: 'temp1 img' 'title img' 'desc img' 'temp2 img'; grid-template-columns: auto 350px; grid-template-rows: 1fr auto auto 1fr; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .l-gundam5 .function__ar-title { grid-area: title; text-align: left; margin: 0 0 40px 0; } .l-gundam5 .function__ar-img { grid-area: img; margin: 0; position: relative; } .l-gundam5 .function__ar-img-qr { display: block; background-color: #fff; padding: 7px; position: absolute; width: 30%; height: auto; max-width: 145px; right: -20px; bottom: -30px; } .l-gundam5 .function__ar-desc { grid-area: desc; } .l-gundam5 .function__ar-btn { display: none; } .l-gundam5 .function__price { padding: 0; margin-top: 71px; position: relative; } .l-gundam5 .function__price::before { content: ''; position: absolute; top: 70px; left: 0; right: 0; bottom: -100px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(35, 12, 12, 0)), color-stop(42%, rgba(35, 12, 12, .6)), color-stop(67.5%, rgba(35, 12, 12, .6)), to(rgba(35, 12, 12, 0))); background: linear-gradient(180deg, rgba(35, 12, 12, 0) 0%, rgba(35, 12, 12, .6) 42%, rgba(35, 12, 12, .6) 67.5%, rgba(35, 12, 12, 0) 100%); z-index: -1; } .l-gundam5 .function__price .l-gundam5__container { display: grid; grid-template-areas: 'img temp1' 'img title' 'img price' 'img btn' 'img note' 'img temp2'; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; padding: 0 60px; } .l-gundam5 .function__price-img { grid-area: img; margin: 0; } .l-gundam5 .function__price-img img { aspect-ratio: 314/407; } .l-gundam5 .function__price-title { grid-area: title; margin-top: 100px; } .l-gundam5 .function__price-value { grid-area: price; } .l-gundam5 .function__price-note { grid-area: note; font-size: 15px; letter-spacing: 0.45px; margin-top: 22px; line-height: 1.35; } .l-gundam5 .function__price-note--custom-1 { font-size: inherit; } .l-gundam5 .function__price-note--custom-2 { font-size: inherit; } .l-gundam5 .function__price-note--custom-3 { font-size: 13px; letter-spacing: 0.39px; } .l-gundam5 .function__price .l-gundam5__btn { grid-area: btn; max-width: 400px; } } @media (min-width: 1024px) { .l-gundam5 .function__ar { grid-template-columns: auto 395px; padding: 60px 62px; -webkit-column-gap: 58px; -moz-column-gap: 58px; column-gap: 58px; } .l-gundam5 .function__ar-title { font-size: 40px; letter-spacing: 4px; } .l-gundam5 .function__ar-desc { font-size: 16px; line-height: 40px; } .l-gundam5 .function__ar-note { font-size: 12px; margin-top: 10px; } .l-gundam5 .function__ar-img-qr { width: 145px; right: -32px; bottom: -30px; } .l-gundam5 .function__price .l-gundam5__container { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 931px; } .l-gundam5 .function__price-title span { font-size: 30px; } .l-gundam5 .function__price-title small { font-size: 16px; } .l-gundam5 .function__price-value { font-size: 24px; margin-bottom: 60px; } .l-gundam5 .function__price-value small { font-size: 14px; } } @media (min-width: 1296px) { .l-gundam5 .function__price::before { top: 100px; } .l-gundam5 .function__price-title { margin-top: 170px; } .l-gundam5 .function__price-note { white-space: nowrap; } .l-gundam5 .function__price .l-gundam5__container { grid-template-columns: 471px 400px; } } @media (max-width: 1919px) { .l-gundam5 .function__slider .swiper-slide { width: 82.05128vw !important; } } @media (min-width: 1920px) { .l-gundam5 .function::before { background-image: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/function-bg-2560.webp"); background-size: 3000px auto; top: -506px; } } .l-gundam5 .spec { margin-bottom: 100px; position: relative; z-index: 3; } .l-gundam5 .spec__list { padding: 0 10px; margin-top: 50px; } .l-gundam5 .spec__list p, .l-gundam5 .spec__list span { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 14px; letter-spacing: 0; } .l-gundam5 .spec__list > ul li + li { margin-top: 25px; } .l-gundam5 .spec__list > ul li .note { font-size: 9px; } .l-gundam5 .spec__list .spec-download { margin-top: 25px; } .l-gundam5 .spec__list .spec-download a { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; position: relative; padding-left: 25px; } .l-gundam5 .spec__list .spec-download a:before { content: ''; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/icon_pdf.webp") left/contain no-repeat; display: inline-table; width: 16px; height: 20px; top: 3px; left: 0; position: absolute; padding-left: 25px; } .l-gundam5 .spec__list .spec-download a span { color: #b61114; border-bottom: 1px solid #b61114; } .l-gundam5 .spec__note { border: 1px solid #999999; padding: 30px 25px; margin-top: 60px; position: relative; z-index: 3; background: rgba(0, 0, 0, .6); background-blend-mode: multiply; } .l-gundam5 .spec__note-section { color: #999999; } .l-gundam5 .spec__note-section h2 { font-size: 20px; font-family: "Zen Kaku Gothic New", sans-serif; text-align: center; } .l-gundam5 .spec__note-section p { margin-top: 20px; letter-spacing: 0; line-height: 30px; } .l-gundam5 .spec__note-section p small { font-weight: inherit; font-size: 12px; color: #fff; } @media (min-width: 768px) { .l-gundam5 .spec { margin-bottom: 150px; } .l-gundam5 .spec__list { padding: 0; max-width: 100%; width: 668px; margin-left: auto; margin-right: auto; } .l-gundam5 .spec__list > ul li { display: grid; grid-template-columns: 200px 1fr; } .l-gundam5 .spec__list > ul li .note { font-size: 12px; } .l-gundam5 .spec__note { max-width: 100%; width: 668px; margin-top: 80px; margin-left: auto; margin-right: auto; padding: 30px 40px; } } @media (min-width: 1024px) { .l-gundam5 .spec__list p, .l-gundam5 .spec__list span { font-size: 16px; } } .l-gundam5 .banner__container { position: relative; } .l-gundam5 .banner__container picture img { aspect-ratio: 39/73; } .l-gundam5 .banner__detail { position: absolute; top: 60vw; left: 0; bottom: 0; right: 0; } .l-gundam5 .banner__detail .banner-category { background-color: #999; max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; padding: 0 12px; margin-left: auto; margin-right: auto; margin-bottom: 12px; } .l-gundam5 .banner__detail .banner-category p { font-size: 13px; letter-spacing: 3.9px; } .l-gundam5 .banner__detail .btn-banner { margin-top: 36px; background-color: #c18b35; border-radius: 8px; max-width: 330px; width: 100%; margin-left: auto; margin-right: auto; -webkit-transition: 0.3s; transition: 0.3s; } .l-gundam5 .banner__detail .btn-banner a { height: 60px; font-family: "Zen Kaku Gothic New", sans-serif; color: #fff; font-size: 14px; font-weight: bold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/icon-right.svg"); background-size: 9px; background-repeat: no-repeat; background-position: right 36px center; -webkit-transition: 0.3s; transition: 0.3s; } .l-gundam5 .banner__detail .logo-zeon-owndays img { width: 72.5641vw; margin-left: auto; margin-right: auto; } .l-gundam5 .banner__detail .sub-zeon-owndays { text-align: center; font-size: 4.61538vw; letter-spacing: 2.88px; font-family: "Zen Old Mincho", serif; margin-top: 8px; } @media (min-width: 768px) { .l-gundam5 .banner { padding: 0 0 59px; } .l-gundam5 .banner__container picture img { aspect-ratio: 1439/528; } .l-gundam5 .banner__detail { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); bottom: auto; } .l-gundam5 .banner__detail .banner-category { margin-bottom: 32px; } .l-gundam5 .banner__detail .banner-category p { font-size: 16px; letter-spacing: 4.8px; } .l-gundam5 .banner .btn-banner { max-width: 250px; margin-top: 26px; } .l-gundam5 .banner .btn-banner a { height: 50px; } .l-gundam5 .banner .btn-banner:hover { -webkit-animation: gundam_shine2 2s; animation: gundam_shine2 2s; } .l-gundam5 .banner .logo-zeon-owndays img { width: 31.25vw; } .l-gundam5 .banner .sub-zeon-owndays { font-size: 1.25vw; line-height: 2.70833vw; margin-top: 13px; letter-spacing: 2.88px; font-size: 13px; } .l-gundam5 .banner .sub-zeon-owndays br { display: none; } } @media (min-width: 1024px) { .l-gundam5 .banner .logo-zeon-owndays img { width: 28.26389vw; } .l-gundam5 .banner .btn-banner { margin-top: 35px; max-width: 350px; } .l-gundam5 .banner .btn-banner a { font-size: 18px; height: 80px; } .l-gundam5 .banner .sub-zeon-owndays { font-size: 18px; } } @media (min-width: 1300px) { .l-gundam5 .banner .btn-banner { max-width: 400px; } } .l-gundam5 .share { margin: 60px 0 100px; padding: 43px 0 68px; background-color: #150707; } .l-gundam5 .share h2 { font-size: 30px; font-weight: 700; line-height: 110%; color: #fff; font-family: "Post No Bills Colombo", sans-serif; text-align: center; letter-spacing: 3px; } .l-gundam5 .share .list-sns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 23px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .l-gundam5 .share .list-sns li { margin: 0 20px; } .l-gundam5 .share .list-sns li:first-child { margin-left: 0; } .l-gundam5 .share .list-sns li:last-child { margin-right: 0; } .l-gundam5 .share .list-sns li:nth-child(2) a { width: 28px; height: 28px; } .l-gundam5 .share .list-sns a { width: 35px; height: 35px; } .l-gundam5 .share .list-sns a img { aspect-ratio: 1/1; } @media (min-width: 768px) { .l-gundam5 .share { margin-bottom: 130px; padding: 0; height: 100px; background-color: #150707; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-gundam5 .share h2 { font-size: 40px; padding-top: 5px; letter-spacing: 4px; } .l-gundam5 .share__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 57px; } .l-gundam5 .share .list-sns { margin-top: 0; gap: 36px; } .l-gundam5 .share .list-sns li { margin: 0; } } .l-gundam5 .c-modal-video { display: block; position: relative; width: auto; margin: 71px -20px 0; -webkit-transition: none; transition: none; } .l-gundam5 .c-modal-video::after { content: ''; position: absolute; top: 0; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 16.15385vw; max-width: 86px; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/video-play.svg") center/contain no-repeat; z-index: 2; pointer-events: none; } .l-gundam5 .c-modal-video--iframe { padding-top: calc(56.25% + 22px); overflow: hidden; } .l-gundam5 .c-modal-video picture { opacity: 1 !important; overflow: hidden; } .l-gundam5 .c-modal-video picture img { width: 100%; opacity: 1 !important; aspect-ratio: 107/51; } .l-gundam5 .c-modal-video iframe { pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-width: 768px) { .l-gundam5 .c-modal-video--iframe:hover iframe { -webkit-transform: scale(1.1); transform: scale(1.1); } .l-gundam5 .c-modal-video picture:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .l-gundam5 .c-modal-video img, .l-gundam5 .c-modal-video iframe { -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; } } @media (min-width: 1024px) { .l-gundam5 .c-modal-video { margin: 300px 0 0 0; } .l-gundam5 .c-modal-video--iframe { padding-top: 56.25%; } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes gundam_move { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(10px); transform: translateY(10px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes gundam_move { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(10px); transform: translateY(10px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes gundam_shine { 0% { background: #b31111; } 8% { background: #ff8383; } 100% { background: #b31111; } } @keyframes gundam_shine { 0% { background: #b31111; } 8% { background: #ff8383; } 100% { background: #b31111; } } @-webkit-keyframes gundam_shine2 { 0% { background-color: #c18b35; } 8% { background-color: #ffd086; } 100% { background-color: #c18b35; } } @keyframes gundam_shine2 { 0% { background-color: #c18b35; } 8% { background-color: #ffd086; } 100% { background-color: #c18b35; } } @media (max-width: 767px) { .u-pc-only { display: none !important; } } @media (min-width: 768px) { .u-sp-only { display: none !important; } } .fancybox-slide { padding-left: 15px !important; padding-right: 15px !important; } .fancybox-gallery .fancybox-stage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; } .fancybox-gallery .fancybox-stage-bottom { width: 100%; padding-top: 72.5641%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .fancybox-gallery .fancybox-slide { padding: 0; top: auto; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; pointer-events: none; } .fancybox-gallery .fancybox-content { position: static !important; -webkit-transform: translate(0) !important; transform: translate(0) !important; max-width: 640px !important; max-height: 465px; cursor: auto !important; pointer-events: auto; } .fancybox-gallery .fancybox-image { position: static !important; } .fancybox-gallery .fancybox-caption { padding: 0; margin: 20px auto 0; position: static; background: none; color: #fff; max-width: 640px; pointer-events: auto; } .fancybox-gallery .fancybox-caption__body { font: 500 12px/1 "Zen Kaku Gothic New", sans-serif; text-align: left; padding: 0 20px 0; display: table; } .fancybox-gallery .fancybox-navigation { position: static; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 90px; } .fancybox-gallery .fancybox-navigation .fancybox-button { position: static; padding: 0; width: 60px; height: 60px; border-radius: 50%; background-color: #fff; border: 1px solid #666; top: calc(100% + 123px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 7px; pointer-events: auto; cursor: pointer; } .fancybox-gallery .fancybox-navigation .fancybox-button i { display: inline-block; width: 12px; height: 22px; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/icon-right-black.svg") center/contain no-repeat; } .fancybox-gallery .fancybox-navigation .fancybox-button--arrow_left { left: calc(50% - 67px); } .fancybox-gallery .fancybox-navigation .fancybox-button--arrow_left i { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .fancybox-gallery .fancybox-navigation .fancybox-button--arrow_right { right: calc(50% - 67px); } .fancybox-gallery .fancybox-infobar { text-align: center; position: static; height: auto; padding: 0; margin-top: 5px; line-height: 1; pointer-events: auto; -webkit-transform: none !important; transform: none !important; } .fancybox-gallery .fancybox-infobar span { font: 500 12px/1 "Zen Kaku Gothic New", sans-serif; } .fancybox-gallery .fancybox-button--close { background-color: rgba(0, 0, 0, .6); padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .fancybox-gallery .fancybox-button--close i { width: 20px; height: 20px; background: url("https://www.owndays.com/images/specials/products/gundam5-zakuhead/icon-close.svg") center/contain no-repeat; } @media (min-width: 640px) { .fancybox-gallery .fancybox-stage-bottom { padding-top: 465px; } .fancybox-gallery .fancybox-navigation { margin-top: 70px; } .fancybox-gallery .fancybox-navigation .fancybox-button { width: 80px; height: 80px; } .fancybox-gallery .fancybox-navigation .fancybox-button i { width: 15px; height: 28px; } .fancybox-gallery .fancybox-infobar > span { font-size: 16px; } } @media (min-width: 768px) { .fancybox-gallery .fancybox-caption { margin-top: 30px; } .fancybox-gallery .fancybox-caption__body { font-size: 16px; padding: 0; } } @media (max-width: 1152px) { .breadcrumbContainer_wrapper { -webkit-transform: translate(20px, 4px) !important; transform: translate(20px, 4px) !important; } } .fancybox__content { width: 100% !important; max-width: 1395px !important; height: 763px !important; padding: 40px !important; } @media (max-width: 767px) { .fancybox__content { padding: 0px !important; height: 500px !important; } } .is-close-btn { background: rgba(30, 30, 30, .6); border: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; display: inline-block; height: 44px; margin: 0; padding: 10px; position: fixed !important; -webkit-transition: color 0.2s; transition: color 0.2s; vertical-align: top; visibility: inherit; width: 44px; top: 0 !important; } .is-close-btn:hover { background: rgba(30, 30, 30, .6) !important; } .yt-modal__content { width: 80vw; height: 80vh; margin: 0 auto; } .yt-modal__overlay { background-color: rgba(30, 30, 30, .9) !important; } .c-modal-video { cursor: pointer; } @charset "UTF-8"; .l-hp { font: 400 14px/1.7 source-han-serif-jp-subset, sans-serif; color: #fff; position: relative; margin-top: 15px; } .l-hp::before { content: ""; position: absolute; top: 40px; left: 0; right: 0; bottom: 0; background: url("https://www.owndays.com/images/specials/products/harry-potter/bg-main.webp") top center/15% auto; pointer-events: none; } .l-hp *, .l-hp *::before, .l-hp *::after { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; border: none; color: inherit; background: none; } .l-hp ul, .l-hp ol { list-style: none; } .l-hp button { cursor: pointer; background-color: unset; } .l-hp button, .l-hp input, .l-hp optgroup, .l-hp select, .l-hp textarea { color: inherit; font: inherit; } .l-hp a { cursor: pointer; text-decoration: none !important; outline: none; } .l-hp img, .l-hp picture { width: 100%; height: auto; display: block; vertical-align: middle; } .l-hp > section > * { position: relative; z-index: 2; } .l-hp__container { max-width: 1240px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; line-height: 1.9; } .l-hp__container-sm { max-width: 900px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .l-hp__btn { display: table; margin: 0 auto; border-radius: 2px; overflow: hidden; position: relative; } .l-hp__btn-inner { font: 400 15px/1 pollen-web, source-han-serif-jp-subset, serif; letter-spacing: 1.5px; text-shadow: 0px 0px 3px #fff; padding: 4px 10px 0; width: 250px; max-width: 400px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 10px solid; border-image-slice: 1; border-width: 3px; border-image-source: linear-gradient(75deg, #bce6ee -31.92%, #ddc5a3 -22.81%, #c9a885 -10.67%, #9a7a5f 7.55%, #c9a885 22.73%, #eedebc 42.47%, #ddc5a3 50.06%, #c9a885 60.68%, #9a7a5f 77.38%, #c9a885 95.6%, #eedebc 119.89%); background-color: rgba(255, 255, 255, .15); color: #fff !important; white-space: nowrap; } .l-hp__btn-inner .space { width: 0.4em; } .l-hp .text-effect span { font-size: inherit; font-weight: inherit; display: inline-block; padding-top: 2px; background: -webkit-gradient(linear, left top, right top, from(#FBAA2B), color-stop(17%, #F4B759), color-stop(37%, #EDC689), color-stop(56%, #E7D1B0), color-stop(73%, #E3DACB), color-stop(88%, #E0DFDC), to(#E0E1E2)); background: linear-gradient(90deg, #FBAA2B 0%, #F4B759 17%, #EDC689 37%, #E7D1B0 56%, #E3DACB 73%, #E0DFDC 88%, #E0E1E2 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .l-hp .bg-lg { background: -webkit-gradient(linear, left top, left bottom, color-stop(3.24%, #250000), color-stop(8.42%, #72101a), color-stop(88.54%, #72101a), color-stop(95.28%, #250000)); background: linear-gradient(180deg, #250000 3.24%, #72101a 8.42%, #72101a 88.54%, #250000 95.28%); } .l-hp__title { font-family: pollen-web, source-han-serif-jp-subset, serif; font-size: 30px; line-height: 36px; font-weight: 700 !important; letter-spacing: 6px; position: relative; text-align: center; padding: 46px 0 0; margin-bottom: 50px; } .l-hp__title::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("https://www.owndays.com/images/specials/products/harry-potter/golden-snitch.svg") no-repeat top center/auto 26px; pointer-events: none; } .l-hp__title--sm { font-size: 25px; letter-spacing: 4px; line-height: 36px; } .l-hp .swiper-pagination-bullets { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 20px; } .l-hp .swiper-pagination-bullet { border-radius: 1rem; -webkit-box-shadow: 0px 0px 3px 0px #fff; box-shadow: 0px 0px 3px 0px #fff; } .l-hp .swiper-pagination-bullet-active { width: 15px; } .l-hp .tab-contents .tab-content:not(.active) { display: none; } .l-hp .main { position: relative; min-height: unset; } .l-hp .main__detail { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; bottom: 0; padding-top: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(58.1%, rgba(37, 2, 2, .8)), color-stop(83.01%, #250202)); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(37, 2, 2, .8) 58.1%, #250202 83.01%); } .l-hp .main__detail-col { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-hp .main__logo { width: 100%; max-width: 183px; margin: 0 auto 62px; display: block; } .l-hp .main__date { width: 38.8%; max-width: 200px; display: block; margin: 0 15px 0 0; } .l-hp .main__date img { aspect-ratio: 60/13; } .l-hp .main p { font-size: 14px; padding-left: 5px; } .l-hp .main__bg { position: relative; overflow: hidden; -webkit-transform: none; transform: none; } @media (max-width: 767px) { .l-hp .main__img { aspect-ratio: 125/184; } .l-hp .main__logo img { aspect-ratio: 183/135; } } .l-hp .concept { background: radial-gradient(49.95% 49.95% at 50% 50.05%, #72101a 26.41%, #250000 100%); margin-bottom: -1px; } .l-hp .concept__title { font: 400 16px/28px source-han-serif-jp-subset, sans-serif; letter-spacing: 0.8px; text-align: center; margin-bottom: 30px; } .l-hp .concept p { font-size: 14px; line-height: 32px; letter-spacing: normal; margin-bottom: 60px; } .l-hp .concept .l-hp__container-sm { padding: 230px 40px 266px; position: relative; } .l-hp .concept__el { position: absolute; display: block; max-width: 80px; pointer-events: none; } .l-hp .concept__el--1 { top: 100px; left: 0; right: 0; margin: 0 auto; width: 53.4%; max-width: 238px; } .l-hp .concept__el--2 { top: 166px; left: 40px; width: 11.3%; } .l-hp .concept__el--3 { top: 173px; right: 40px; width: 12.4%; } .l-hp .concept__el--4 { bottom: 169px; left: 40px; width: 14.9%; } .l-hp .concept__el--5 { bottom: 163px; right: 40px; width: 15.2%; } .l-hp .concept__el--6 { bottom: 100px; left: 0; right: 0; margin: 0 auto; width: 70.6%; max-width: 315px; } @media (max-width: 767px) { .l-hp .concept .l-hp__container-sm { padding-left: 40px; padding-right: 40px; } } .l-hp .lineup { padding: 100px 0 100px; } .l-hp .lineup__price { font: 400 14px/1 source-han-serif-jp-subset, sans-serif; text-align: center; position: relative; letter-spacing: 0.84px; } .l-hp .lineup__price-strong { font-family: pollen-web, source-han-serif-jp-subset, serif; font-size: 35px; font-weight: 700; margin-top: 10px; display: block; letter-spacing: normal; } .l-hp .lineup__price-span { font-family: source-han-serif-jp-subset, sans-serif; font-size: 18px; font-weight: 700; line-height: 28px; letter-spacing: 0.18px; margin-right: 5px; } .l-hp .lineup__nav { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 46px 24px; margin-top: 70px; counter-reset: section; width: calc(100% + 8px); -webkit-transform: translateX(-4px); transform: translateX(-4px); } .l-hp .lineup__nav > li { position: relative; } .l-hp .lineup__nav > li > a { display: block; position: relative; opacity: 1 !important; } .l-hp .lineup__nav > li > a::after { content: ""; position: absolute; width: 39px; height: 39px; background: url("https://www.owndays.com/images/specials/products/harry-potter/arrow-down-2.svg") no-repeat 50%/contain; margin: 4px auto 0; border: 1px solid #72101a; border-radius: 100px; bottom: 33px; right: 6px; } .l-hp .lineup__nav > li > a picture, .l-hp .lineup__nav > li > a img { opacity: 1 !important; -webkit-transition: 0.4s; transition: 0.4s; } .l-hp .lineup__nav > li > a img { aspect-ratio: 157/95; } .l-hp .lineup__nav-badge { position: absolute; top: -23px; right: 5px; } .l-hp .lineup__nav-badge img { width: 50px; height: 53px; aspect-ratio: 50/53; } .l-hp .lineup__nav-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; color: #F9C967; margin-top: 16px; } .l-hp .lineup__nav-details-model { font-size: 11px; font-weight: 600; line-height: 8px; letter-spacing: 1.1px; } .l-hp .lineup__nav-details-title { font-size: 14px; font-weight: 700; line-height: 10px; letter-spacing: 1.4px; } .l-hp .lineup__default-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: static; margin-top: 20px; } .l-hp .lineup__default-pagination .swiper-slide { text-align: center; } .l-hp .lineup__default-pagination .swiper-pagination-bullet { width: 5px; height: 5px; margin: 0 2.5px; background-color: #fff; opacity: 1; border-radius: 5px; -webkit-box-shadow: 0px 0px 3px 0px #fff; box-shadow: 0px 0px 3px 0px #fff; -webkit-transition: 0.3s; transition: 0.3s; } .l-hp .lineup__default-pagination .swiper-pagination-bullet-active { width: 15px; } .l-hp .lineup__products { margin-top: 80px; } .l-hp .lineup__products > li + li { margin-top: 100px; } .l-hp .lineup__products-top { display: block; position: relative; margin-bottom: 40px; } .l-hp .lineup__products-top-swiper { width: auto; margin-left: -20px; margin-right: -4px; position: relative; } .l-hp .lineup__products-top-swiper-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; position: absolute; left: 20px !important; right: auto; bottom: 25px !important; margin: 0 auto; z-index: 2; } .l-hp .lineup__products-top-swiper-pagination .swiper-pagination-bullet { width: 20px; height: 5px; border-radius: 0; opacity: 0.5; background-color: #fff; margin: 0; } .l-hp .lineup__products-top-swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left: 10px; } .l-hp .lineup__products-top-swiper-pagination .swiper-pagination-bullet-active { background-color: #fff; opacity: 1; } .l-hp .lineup__products-top-swiper .swiper-slide { aspect-ratio: 335/339; } .l-hp .lineup__products-top-swiper .swiper-slide picture { height: 100%; } .l-hp .lineup__products-top-swiper .swiper-slide img { height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: right top; object-position: right top; } .l-hp .lineup__products-top-text { position: relative; z-index: 3; } .l-hp .lineup__products-top-text p { font-size: 14px; letter-spacing: normal; line-height: 1.9; } .l-hp .lineup__products-middle { margin: 0 -20px; } .l-hp .lineup__products-middle-swiper { position: relative; } .l-hp .lineup__products-middle-swiper-pagination { display: 14px; position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(43.4vw + 20px); z-index: 2; } .l-hp .lineup__products-middle .swiper-slide { text-align: center; } .l-hp .lineup__products-middle .swiper-slide img { aspect-ratio: 298/163; } .l-hp .lineup__products-middle .swiper-slide p { font-size: 14px; margin-top: 45px; letter-spacing: normal; } .l-hp .lineup__products-bottom { margin: 45px auto 0; position: relative; } .l-hp .lineup__products-bottom-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 45px; } .l-hp .lineup__products-bottom-head-title { font: 700 18px/1 pollen-web, source-han-serif-jp-subset, serif; letter-spacing: 1.6px; margin-right: 22px; } .l-hp .lineup__products-bottom-head .nav-item + .nav-item { margin-left: 20px; } .l-hp .lineup__products-bottom-head .nav-link { width: 35px; height: 35px; padding: 0; border: 1px solid #fff; font-size: 0; color: transparent; -webkit-transition: 0.2s; transition: 0.2s; } .l-hp .lineup__products-bottom-head .nav-link.cl-gold-1 { background: linear-gradient(75deg, #eedebc -31.92%, #ddc5a3 -22.81%, #c9a885 -10.67%, #b5a79b 7.55%, #f0e1d2 22.73%, #fff9ec 42.47%, #f1e5d5 50.06%, #fde5cc 60.68%, #efcfb4 77.38%, #ecc9a3 95.6%, #eedebc 119.89%); } .l-hp .lineup__products-bottom-head .nav-link.cl-gold-2 { background: linear-gradient(75deg, #eedebc -31.92%, #ddc5a3 -22.81%, #c9a885 -10.67%, #9a7a5f 7.55%, #c9a885 22.73%, #eedebc 42.47%, #ddc5a3 50.06%, #c9a885 60.68%, #9a7a5f 77.38%, #c9a885 95.6%, #eedebc 119.89%); } .l-hp .lineup__products-bottom-head .nav-link.active { -webkit-box-shadow: 0 0 0 3px #fff; box-shadow: 0 0 0 3px #fff; } .l-hp .lineup__products-bottom-swiper { margin-bottom: 40px; } .l-hp .lineup__products-bottom-swiper .swiper-slide { width: calc(100% - 40px) !important; border-radius: 10px; overflow: hidden; } .l-hp .lineup__products-bottom-swiper .swiper-slide img { aspect-ratio: 59/37; -webkit-transition: 0.2s; transition: 0.2s; } .l-hp .lineup__products-bottom-swiper .swiper-slide:not(.swiper-slide-visible) img { opacity: 0; } .l-hp .lineup__products-bottom-swiper .swiper-slide-prev img, .l-hp .lineup__products-bottom-swiper .swiper-slide-next img { opacity: 0.5 !important; } .l-hp .lineup__products-bottom-swiper .swiper-slide-active img { -webkit-transition: 0.1s; transition: 0.1s; } .l-hp .lineup__number { text-align: center; position: relative; margin: 58px -20px 30px; } .l-hp .lineup__number::before { content: ""; position: absolute; width: 35px; height: 35px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: -webkit-gradient(linear, left top, right top, from(#fbaa2b), color-stop(17%, #f4b759), color-stop(37%, #edc689), color-stop(56%, #e7d1b0), color-stop(73%, #e3dacb), color-stop(88%, #e0dfdc), to(#e0e1e2)); background: linear-gradient(90deg, #fbaa2b 0%, #f4b759 17%, #edc689 37%, #e7d1b0 56%, #e3dacb 73%, #e0dfdc 88%, #e0e1e2 100%); -webkit-transform: rotate(-45deg) scale(0); transform: rotate(-45deg) scale(0); z-index: 2; pointer-events: none; -webkit-transition: 0.5s; transition: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .l-hp .lineup__number::after { content: ""; position: absolute; width: 100%; height: 2px; top: calc(50% - 1px); left: 0; background: -webkit-gradient(linear, left top, right top, from(#fbaa2b), color-stop(17%, #f4b759), color-stop(37%, #edc689), color-stop(56%, #e7d1b0), color-stop(73%, #e3dacb), color-stop(88%, #e0dfdc), to(#e0e1e2)); background: linear-gradient(90deg, #fbaa2b 0%, #f4b759 17%, #edc689 37%, #e7d1b0 56%, #e3dacb 73%, #e0dfdc 88%, #e0e1e2 100%); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: 0.5s; transition: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; z-index: 1; pointer-events: none; } .l-hp .lineup__number span { font: 700 20px/1 pollen-web, source-han-serif-jp-subset, serif; color: #72101a; position: relative; top: 2.5px; right: 1px; display: inline-block; -webkit-transform: translateY(2px); transform: translateY(2px); -webkit-transition: 0.5s; transition: 0.5s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 0; z-index: 3; } .l-hp .lineup__number.aos-animate::before { -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); } .l-hp .lineup__number.aos-animate::after { -webkit-transform: scaleX(1); transform: scaleX(1); } .l-hp .lineup__number.aos-animate span { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .l-hp .lineup__title { margin-bottom: 24px; } .l-hp .lineup__title-badge { width: 112px; height: 125px; } .l-hp .lineup__title-badge img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .l-hp .lineup__title-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; color: #F9C967; font-family: source-han-serif-jp-subset, sans-serif; } .l-hp .lineup__title-text-main { font-size: 20px; font-weight: 700; line-height: 15px; letter-spacing: 0.2px; } .l-hp .lineup__title-text-sub { font-size: 14px; font-weight: 400; line-height: 10px; letter-spacing: 0.42px; } .l-hp .lineup .button-next, .l-hp .lineup .button-prev { position: absolute; top: 50%; width: 12px; height: 27px; background-color: black; z-index: 3; cursor: pointer; background: url("https://www.owndays.com/images/specials/products/harry-potter/arrow-right.svg") no-repeat center/contain; font-size: 0; color: transparent; } .l-hp .lineup .button-next { right: 0; -webkit-transform: translateY(calc(-50% - 15px)); transform: translateY(calc(-50% - 15px)); } .l-hp .lineup .button-prev { left: 0; -webkit-transform: translateY(calc(-50% - 15px)) scaleX(-1); transform: translateY(calc(-50% - 15px)) scaleX(-1); } .l-hp .lineup .tab-content > .tab-pane { display: block !important; height: 0; overflow: hidden; pointer-events: none; } .l-hp .lineup .tab-content > .active { height: unset; overflow: unset; pointer-events: unset; } .l-hp .lineup .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; line-height: 0; } @media (max-width: 767px) { .l-hp .lineup__products-middle .swiper-slide { width: calc(80% - 2px) !important; } .l-hp .lineup__products-middle .swiper-slide:not(.swiper-slide-active) p { -webkit-transition: 0.2s; transition: 0.2s; opacity: 0; } .l-hp .lineup__title { padding-top: 34px; } .l-hp .lineup__title-badge { position: absolute; top: -77px; right: 0; } } @media (min-width: 768px) { .l-hp .lineup { background: -webkit-gradient(linear, left top, left bottom, color-stop(3.24%, #250000), color-stop(7.19%, #72101a), color-stop(88.54%, #72101a), to(#250000)); background: linear-gradient(180deg, #250000 3.24%, #72101a 7.19%, #72101a 88.54%, #250000 100%); } } .l-hp .merchandise { position: relative; padding-bottom: 100px; } .l-hp .merchandise__main { position: relative; max-width: 2000px; margin-left: auto; margin-right: auto; margin-bottom: 40px; } .l-hp .merchandise__main-slider-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; position: absolute; left: 20px !important; right: auto; bottom: 25px !important; gap: 10px; margin: 0 auto; z-index: 2; } .l-hp .merchandise__main-slider-pagination .swiper-pagination-bullet { width: 20px; height: 5px; border-radius: 0; opacity: 0.5; background-color: #000; margin: 0; } .l-hp .merchandise__main-slider-pagination .swiper-pagination-bullet-active { background-color: #000; opacity: 1; } .l-hp .merchandise__other { max-width: 2000px; margin-left: auto; margin-right: auto; margin-bottom: 100px; } .l-hp .merchandise__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 40px; max-width: 960px; margin: 100px auto 0; } .l-hp .merchandise__notes { margin-top: 30px; } .l-hp .merchandise__notes ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 13px; font-weight: 500; line-height: 220%; } .l-hp .merchandise__notes ul li { position: relative; padding-left: 1em; } .l-hp .merchandise__notes ul li::before { content: '・'; position: absolute; top: 0; left: -8px; font-size: 22px; } .l-hp .merchandise .l-hp__title--pc { display: none; } @media (max-width: 767px) { .l-hp .merchandise__main-slider { padding-right: 20px; margin-bottom: 30px; } .l-hp .merchandise__buttons .l-hp__btn-inner { font-size: 15px; letter-spacing: 1.5px; padding: 0 6px; } } .l-hp .shop { padding-bottom: 100px; } .l-hp .shop ul { margin-top: -15px; } .l-hp .shop ul > li { font: 500 13px/29px source-han-serif-jp-subset, sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; } .l-hp .shop ul > li::before { content: '・'; font-size: 1em; margin-right: 2px; } .l-hp .share { background-color: #250101; position: relative; z-index: 2; padding-bottom: 160px; } .l-hp .share__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 16px; margin-bottom: 84px; } .l-hp .share__list > li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .l-hp .share__list > li a { font-size: 0; color: transparent; } .l-hp .share__list-link { display: inline-block; width: 56px; height: 56px; border-radius: 10rem; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; } .l-hp .share__list-link--x { background-image: url("https://www.owndays.com/images/specials/products/harry-potter/twitter.svg"); } .l-hp .share__list-link--facebook { background-image: url("https://www.owndays.com/images/specials/products/harry-potter/Facebook.svg"); } .l-hp .share__list-link--line { background-image: url("https://www.owndays.com/images/specials/products/harry-potter/line.svg"); } .l-hp .share__copyright { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 13px; font-family: sans-serif; font-size: 8px; font-weight: 400; letter-spacing: normal; line-height: normal; margin: 0 auto; color: #F9C967; } .l-hp .share__copyright img { max-width: 117px; } @media (max-width: 1023px) { .l-hp .share__copyright { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } } .l-hp [data-aos="main-bg"] { opacity: 1; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transform: scale(1.3); transform: scale(1.3); } .l-hp [data-aos="main-bg"].aos-animate { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .l-hp [data-aos="show-letter"].aos-animate .letter { -webkit-animation: hp_fadeIn 1s ease forwards; animation: hp_fadeIn 1s ease forwards; } .hp-particle { position: fixed; z-index: 10002; width: 2px; height: 2px; background-color: rgba(255, 255, 255, .8); border-radius: 50%; -webkit-box-shadow: 0 0 10px rgba(255, 255, 255, .8), 0 0 20px rgba(255, 255, 255, .6), 0 0 30px rgba(255, 255, 255, .4), 0 0 40px rgba(255, 255, 255, .2); box-shadow: 0 0 10px rgba(255, 255, 255, .8), 0 0 20px rgba(255, 255, 255, .6), 0 0 30px rgba(255, 255, 255, .4), 0 0 40px rgba(255, 255, 255, .2); -webkit-animation: hp_move .8s ease-out forwards, hp_fade 1s ease-out forwards; animation: hp_move .8s ease-out forwards, hp_fade 1s ease-out forwards; } @-webkit-keyframes hp_btnJump { 100% { -webkit-transform: translateY(-7px); transform: translateY(-7px); } } @keyframes hp_btnJump { 100% { -webkit-transform: translateY(-7px); transform: translateY(-7px); } } @-webkit-keyframes hp_fadeIn { from { opacity: 0; pointer-events: none; } to { opacity: 1; pointer-events: all; } } @keyframes hp_fadeIn { from { opacity: 0; pointer-events: none; } to { opacity: 1; pointer-events: all; } } @-webkit-keyframes hp_move { to { -webkit-transform: translateY(-100px) translateX(50px); transform: translateY(-100px) translateX(50px); } } @keyframes hp_move { to { -webkit-transform: translateY(-100px) translateX(50px); transform: translateY(-100px) translateX(50px); } } @-webkit-keyframes hp_fade { to { opacity: 0; } } @keyframes hp_fade { to { opacity: 0; } } @media (min-width: 768px) { .l-hp { background-size: 188px auto; margin-top: 0; } } @media (min-width: 1024px) { .l-hp { font-size: 16px; line-height: 28px; } } @media (min-width: 1024px) { .l-hp__btn:hover .l-hp__btn-inner span { -webkit-animation: hp_btnJump 0.2s alternate 2; animation: hp_btnJump 0.2s alternate 2; } .l-hp__btn-inner { font-size: 20px; letter-spacing: 2px; width: 400px; height: 80px; border-width: 4px; } } @media (min-width: 1024px) { .l-hp__title { font-size: 40px; left: 4px; line-height: 53px; padding-top: 49px; margin-bottom: 95px; } .l-hp__title--sm { line-height: 53px; } } @media (min-width: 768px) { .l-hp .main__img { aspect-ratio: 144/67; } .l-hp .main__detail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 67px; } .l-hp .main__logo { max-width: 530px; margin-bottom: 25px; } .l-hp .main__logo img { aspect-ratio: 530/83; } } @media (min-width: 1024px) { .l-hp .main__logo { width: 545px; margin-bottom: 104px; max-width: none; } .l-hp .main p { font-size: 24px; padding-left: 5px; } } @media (min-width: 768px) { .l-hp .concept__title { font-size: 22px; font-weight: 600 !important; letter-spacing: 1.1px; margin-bottom: 40px; } .l-hp .concept__title br { display: none; } .l-hp .concept p { font-size: 15px; text-align: center; line-height: 38px; max-width: 718px; margin: 0 auto 52px; } .l-hp .concept .l-hp__container-sm { padding-top: 295px; padding-bottom: 338px; } .l-hp .concept__el { max-width: none; } .l-hp .concept__el--1 { top: 150px; width: 343px; max-width: none; } .l-hp .concept__el--2 { top: 252px; width: 68px; } .l-hp .concept__el--3 { top: 258px; width: 74px; } .l-hp .concept__el--4 { bottom: 247px; width: 89px; } .l-hp .concept__el--5 { bottom: 238px; width: 92px; } .l-hp .concept__el--6 { bottom: 150px; width: 453px; max-width: none; } } @media (min-width: 1024px) { .l-hp .concept__el--2 { top: 252px; width: 68px; left: 20px; } .l-hp .concept__el--3 { top: 258px; width: 74px; right: 20px; } .l-hp .concept__el--4 { bottom: 247px; width: 89px; left: 20px; } .l-hp .concept__el--5 { bottom: 238px; width: 92px; right: 20px; } } @media (min-width: 768px) { .l-hp .lineup { padding: 150px 0 238px; } .l-hp .lineup__price { font-size: 20px; letter-spacing: 1.4px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 55px; -moz-column-gap: 55px; column-gap: 55px; } .l-hp .lineup__price-strong { font-size: 40px; margin-top: 0; } .l-hp .lineup__price-span { font-size: 21px; letter-spacing: 0.21px; } .l-hp .lineup__nav { margin-top: 80px; grid-template-columns: repeat(3, 1fr); } .l-hp .lineup__products { margin-top: 132px; } .l-hp .lineup__products > li + li { margin-top: 200px; } .l-hp .lineup__products-top { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 120px; } .l-hp .lineup__products-top-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 20px; max-width: 410px; } .l-hp .lineup__products-top-swiper { margin-right: 0; width: 60%; height: 37.76042vw; } .l-hp .lineup__products-top-swiper-pagination { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0 !important; right: 0; bottom: 0; } .l-hp .lineup__products-top-swiper-pagination .swiper-pagination-bullet { width: 30px; } .l-hp .lineup__products-top-swiper .swiper-slide { aspect-ratio: 437/246; } .l-hp .lineup__products-middle-swiper-pagination { display: none; } .l-hp .lineup__products-middle .swiper p { margin-top: 20px; } } @media (min-width: 768px) and (max-width: 1295px) { .l-hp .lineup__products-middle .swiper p br { display: none; } } @media (min-width: 768px) { .l-hp .lineup__products-bottom { margin-top: 125px; } .l-hp .lineup__products-bottom-head { font-size: 22px; letter-spacing: 2px; margin-top: 65px; position: absolute; bottom: 17px; right: calc(50% + 50px); margin-bottom: 0; } .l-hp .lineup__products-bottom .l-hp__btn { width: 330px; margin-left: calc(50% + 50px); margin-right: 0; } .l-hp .lineup__products-bottom-swiper { margin-bottom: 60px; } .l-hp .lineup__products-bottom .swiper-wrapper { max-width: 650px; } .l-hp .lineup__number { margin: 0 0 47px; } .l-hp .lineup__number::before { width: 45px; height: 45px; } .l-hp .lineup__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 22px; -moz-column-gap: 22px; column-gap: 22px; } .l-hp .lineup .button-next, .l-hp .lineup .button-prev { width: 22px; height: 52px; } } @media (min-width: 1024px) { .l-hp .lineup__price-strong { font-size: 40px; } .l-hp .lineup__price-span { font-size: 21px; line-height: 28px; letter-spacing: 0.21px; } .l-hp .lineup__nav > li > a::after { width: 43px; height: 43px; } .l-hp .lineup__nav > li > a:hover img { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: drop-shadow(0 0 8px #fff); filter: drop-shadow(0 0 8px #fff); } .l-hp .lineup__nav-badge { top: -33px; right: 10px; } .l-hp .lineup__nav-badge img { width: 70px; height: 78px; } .l-hp .lineup__nav-details { margin-top: 28px; row-gap: 6px; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .l-hp .lineup__nav-details-model { font-size: 13px; line-height: 9px; letter-spacing: 1.3px; } .l-hp .lineup__nav-details-title { font-size: 18px; line-height: 28px; letter-spacing: 1.8px; } .l-hp .lineup__products-top-swiper { width: auto; height: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .l-hp .lineup__products-top-text p { font-size: 14px; } .l-hp .lineup__products-middle .swiper-slide p { font-size: 14px; font-weight: 500; } .l-hp .lineup__products-bottom-head { right: calc(50% + 167px); } .l-hp .lineup__products-bottom-head-title { font-size: 22px; letter-spacing: 2.2px; margin-right: 31px; } .l-hp .lineup__products-bottom .l-hp__btn { margin-left: calc(50% + 30px); } .l-hp .lineup__products-bottom-swiper .swiper-wrapper { max-width: none; } .l-hp .lineup__products-bottom-swiper .swiper-slide { max-width: 860px; } .l-hp .lineup__default-pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px; } .l-hp .lineup__default-pagination .swiper-pagination-bullet-active { width: 30px; } .l-hp .lineup__title { margin-bottom: 35px; } .l-hp .lineup__title-text { row-gap: 16px; } .l-hp .lineup__title-text-main { font-size: 27px; line-height: 20px; letter-spacing: 0.27px; } .l-hp .lineup__title-text-sub { font-size: 19px; line-height: 14px; letter-spacing: 0.57px; } } @media (min-width: 768px) { .l-hp .merchandise { background: -webkit-gradient(linear, left top, left bottom, color-stop(7.05%, #250002), color-stop(40.06%, #72101a), color-stop(83.52%, #250000)); background: linear-gradient(180deg, #250002 7.05%, #72101a 40.06%, #250000 83.52%); } .l-hp .merchandise__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 160px; } .l-hp .merchandise__main-slider { -ms-flex-negative: 0; flex-shrink: 0; width: calc(50% + 90px); margin-left: 0; } .l-hp .merchandise__main-slider-pagination { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-hp .merchandise__main-text { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .l-hp .merchandise__main-text-inner { width: calc(50% - 90px); margin-left: auto; padding-left: 20px; } .l-hp .merchandise .l-hp__title--pc { display: block; width: calc(50% - 90px); margin-left: auto; padding-left: 20px; text-align: left; margin-bottom: 37px; } .l-hp .merchandise .l-hp__title--pc::before { background-position: left 20px top; } .l-hp .merchandise .l-hp__title--sp { display: none; } } @media (min-width: 1024px) { .l-hp .merchandise { padding-bottom: 150px; } .l-hp .merchandise .l-hp__title { margin-bottom: 47px; } .l-hp .merchandise__main { margin-bottom: 120px; } .l-hp .merchandise__main-slider-pagination .swiper-pagination-bullet { width: 30px; } .l-hp .merchandise__other { margin-bottom: 150px; } .l-hp .merchandise__other-slider-pagination { display: none; } .l-hp .merchandise__buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 140px; } .l-hp .merchandise__buttons .l-hp__btn { margin: 0; } .l-hp .merchandise__notes { margin-top: 110px; } .l-hp .merchandise__notes ul { font-size: 15px; } } @media (min-width: 768px) { .l-hp .shop { background-color: #250000; } .l-hp .shop__col-wrap { text-align: center; } .l-hp .shop__col { display: inline-grid; grid-template-columns: auto auto; -webkit-column-gap: 100px; -moz-column-gap: 100px; column-gap: 100px; } .l-hp .shop__col ul { margin-top: 0; } .l-hp .shop__col ul > li { font-size: 14px; line-height: 31px; font-weight: 400; text-align: left; } .l-hp .shop__col ul > li::before { margin-right: 14px; } } .l-hp .shop .l-hp__title br { display: none; } @media (min-width: 1024px) { .l-hp .shop { padding-bottom: 150px; } } @media (min-width: 768px) { .l-hp .share__list-link:hover { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: drop-shadow(0px 0px 10px #fff); filter: drop-shadow(0px 0px 10px #fff); } } @media (max-width: 1023px) { .l-hp .share__copyright { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } } @media (min-width: 1024px) { .l-hp .share { padding-bottom: 193px; } .l-hp .share__list { grid-gap: 44px; margin-bottom: 130px; } .l-hp .share__copyright { font-size: 10px; grid-gap: 10px; } .l-hp .share__copyright img { height: 40px; } } #zendesk-chat-widget { z-index: 3; } .od-header-owndays-progressive-cp { width: 100%; height: auto; position: relative; } .od-header-owndays-progressive-cp__container { width: 100%; height: auto; aspect-ratio: auto 1321 / 584; } .od-header-owndays-progressive-cp__container__desc { position: absolute; left: 120px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1438px) { .od-header-owndays-progressive-cp__container { -o-object-position: left 100px bottom 0px; object-position: left 100px bottom 0px; } } @media (max-width: 1208px) { .od-header-owndays-progressive-cp__container__desc { left: 5%; } } @media (max-width: 1024px) { .od-header-owndays-progressive-cp__container { -o-object-position: left 150px bottom 0px; object-position: left 150px bottom 0px; } } @media (max-width: 895px) { .od-header-owndays-progressive-cp__container { content: url("https://static.lenskart.com/media/owndays/img/progressive-cp/main-sp-10-2024.webp"); min-height: 658px; max-height: 850px; -o-object-fit: cover; object-fit: cover; -o-object-position: initial; object-position: initial; margin-top: 346px; } .od-header-owndays-progressive-cp__container__desc { position: absolute; left: 50%; top: 13%; -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); } } @media (max-width: 595px) { .od-header-owndays-progressive-cp__container { -o-object-fit: cover; object-fit: cover; min-height: auto; max-height: none; margin-top: 236px; } .od-header-owndays-progressive-cp__container__desc { top: 80px; width: 100%; max-width: 83.85%; } } @media (max-width: 430px) { .od-header-owndays-progressive-cp__container { margin-top: 247px; } } .od-header-owndays-progressive-cp__header { border-bottom: 1px solid #000; padding-bottom: 30px; } .od-header-owndays-progressive-cp__header__main { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 5px; height: 63px; } .od-header-owndays-progressive-cp__header--black, .od-header-owndays-progressive-cp__header--red { font-family: "Founders Grotesk", sans-serif; font-style: normal; font-weight: 600 !important; } .od-header-owndays-progressive-cp__header--black { color: #000; font-size: 30px; margin-top: 8px; line-height: 36px; letter-spacing: 3px; } .od-header-owndays-progressive-cp__header--red { color: #BF0000; font-size: 100px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 10px; } @media (max-width: 595px) { .od-header-owndays-progressive-cp__header { padding-bottom: 20px; } .od-header-owndays-progressive-cp__header__main { gap: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 5px; height: 38px; } .od-header-owndays-progressive-cp__header--black { font-size: 24px; margin: 3px 0 0 0; letter-spacing: 3px; line-height: 24px; } .od-header-owndays-progressive-cp__header--red { font-size: 60px; letter-spacing: 6px; } } @media (max-width: 430px) { .od-header-owndays-progressive-cp__header--black { font-size: 20px; letter-spacing: 2px; } } .od-header-owndays-progressive-cp__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2px; padding: 30px 0 0 0; } .od-header-owndays-progressive-cp__body__tag-pc, .od-header-owndays-progressive-cp__body h3 { font-family: "Founders Grotesk", sans-serif; } .od-header-owndays-progressive-cp__body__tag-pc, .od-header-owndays-progressive-cp__body__tag-sp { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 20px; background-color: #BF0000; font-size: 20px; font-style: normal; font-weight: 500 !important; line-height: 36px; letter-spacing: 1px; color: white; margin-bottom: 0; } .od-header-owndays-progressive-cp__body__tag-pc__price, .od-header-owndays-progressive-cp__body__tag-sp__price { font-family: "Founders Grotesk", sans-serif; font-size: 30px; font-style: normal; font-weight: 600; line-height: 36px; letter-spacing: 1.5px; padding: 0 5px 0 10px; } .od-header-owndays-progressive-cp__body__tag-sp { display: none; } .od-header-owndays-progressive-cp__body h3 { color: #000; font-size: 24px; font-style: normal; font-weight: 500 !important; line-height: normal; letter-spacing: 1.2px; margin: 24px 0 0 0; } .od-header-owndays-progressive-cp__body h3::after { content: ''; display: block; height: 6px; } @media (max-width: 1274px) { .od-header-owndays-progressive-cp__body { padding: 30px 0 0 0; } .od-header-owndays-progressive-cp__body h3 { font-size: 18px; letter-spacing: 0.9px; } } @media (max-width: 1024px) { .od-header-owndays-progressive-cp__body::after { height: 4px; } .od-header-owndays-progressive-cp__body h3 { line-height: normal; } } @media (max-width: 1024px) and (max-width: 776px) { .od-header-owndays-progressive-cp__body h3 br { display: none; } } @media (max-width: 895px) { .od-header-owndays-progressive-cp__body__tag-pc { display: none; } .od-header-owndays-progressive-cp__body__tag-sp { display: -webkit-box; display: -ms-flexbox; display: flex; } .od-header-owndays-progressive-cp__body__tag-sp--now { margin: 10px 0 0 auto; } } @media (max-width: 595px) { .od-header-owndays-progressive-cp__body { padding: 20px 0 0 0; } .od-header-owndays-progressive-cp__body__tag-sp { font-size: 18px; padding: 0 11px 0 9px; } .od-header-owndays-progressive-cp__body__tag-sp__price { font-size: 24px; letter-spacing: 1.2px; } .od-header-owndays-progressive-cp__body__tag-sp--now { margin: 10px 0 0 auto; } .od-header-owndays-progressive-cp__body h3 { margin-top: 16px; } } @media (max-width: 476px) { .od-header-owndays-progressive-cp__custom-breadcrumbs { margin-top: 76px; } .od-header-owndays-progressive-cp__custom-breadcrumbs nav ol li { font-size: 10px; font-style: normal; font-weight: 400 !important; line-height: normal; } .od-header-owndays-progressive-cp__custom-breadcrumbs nav ol li::before { padding: 0 8px; } } .od-header-owndays-progressive-cp__remark { position: absolute; right: 122px; bottom: 10px; color: #FFF; text-align: right; text-shadow: 0px 0px 4px rgba(0, 0, 0, .35); font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal !important; font-weight: 400; line-height: 36px; letter-spacing: 0.7px; } @media (max-width: 895px) { .od-header-owndays-progressive-cp__remark { width: 100%; height: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; } } @media (max-width: 595px) { .od-header-owndays-progressive-cp__remark { font-size: 12px; bottom: 4px; } } .od-body-owndays-progressive-cp { width: 100%; height: auto; } .od-body-owndays-progressive-cp__container__meaning-box { width: 100%; height: auto; position: relative; } .od-body-owndays-progressive-cp__container__meaning { width: 100%; max-width: 760px; height: auto; padding: 144px 0 150px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .od-body-owndays-progressive-cp__container__meaning--text { padding: 144px 0 0 0; } .od-body-owndays-progressive-cp__container__meaning--vdo { padding: 0 0 140px 0; } @media (max-width: 885px) { .od-body-owndays-progressive-cp__container__meaning { padding: 144px 40px 150px; } } @media (max-width: 430px) { .od-body-owndays-progressive-cp__container__meaning { padding: 100px 40px 100px; } .od-body-owndays-progressive-cp__container__meaning--text { padding: 100px 40px 0 40px; } .od-body-owndays-progressive-cp__container__meaning--vdo { padding: 0 0 100px 0; background-color: #E5E8ED; } } .od-body-owndays-progressive-cp__container__meaning-presbyopia { width: calc(100% - 120px); max-width: 1665px; height: 632px; position: relative; margin: 0 auto; zoom: 160%; } @media (max-width: 2431px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { zoom: 135%; } } @media (max-width: 2378px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { zoom: 138%; } } @media (max-width: 2111px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { zoom: 120%; } } @media (max-width: 1794px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { width: 100%; max-width: 1440px; zoom: unset; } } @media (max-width: 1176px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { height: 850px; } } @media (max-width: 671px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { height: 797px; } } @media (max-width: 609px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { height: 823px; } } @media (max-width: 448px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { height: 844px; background-color: #E5E8ED; } } @media (max-width: 427px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { height: 859px; } } @media (max-width: 406px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { height: 877px; } } @media (max-width: 390px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { height: 880px; } } @media (max-width: 390px) { .od-body-owndays-progressive-cp__container__meaning-presbyopia { height: 880px; } } .od-body-owndays-progressive-cp__container__book-online-btn { padding: 150px 0; } @media (max-width: 550px) { .od-body-owndays-progressive-cp__container__book-online-btn { padding: 100px 20px; } } .od-body-owndays-progressive-cp__container__benefits-box { width: 100%; height: auto; position: relative; } .od-body-owndays-progressive-cp__container__benefits { width: calc(100% - 120px); height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; margin: 0 auto; padding: 150px 0; } @media (max-width: 550px) { .od-body-owndays-progressive-cp__container__benefits { width: calc(100% - 40px); padding: 0 0 126px 0; } } .od-body-owndays-progressive-cp__container__benefits-list { display: grid; grid-template-columns: 280px 280px 280px 280px; -webkit-column-gap: 53px; -moz-column-gap: 53px; column-gap: 53px; } @media (max-width: 1240px) { .od-body-owndays-progressive-cp__container__benefits-list { grid-template-columns: 260px 260px; row-gap: 53px; } } @media (max-width: 700px) { .od-body-owndays-progressive-cp__container__benefits-list { grid-template-columns: 260px 260px; row-gap: 10px; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } @media (max-width: 574px) { .od-body-owndays-progressive-cp__container__benefits-list { grid-template-columns: 230px 230px; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp__container__benefits-list { grid-template-columns: 200px 200px; } } @media (max-width: 475px) { .od-body-owndays-progressive-cp__container__benefits-list { grid-template-columns: 170px 170px; } } .od-body-owndays-progressive-cp__container__persons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; padding-bottom: 101px; } @media (max-width: 1240px) { .od-body-owndays-progressive-cp__container__persons { padding-top: 74px; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp__container__persons { gap: 34px; padding-bottom: 101px; background-color: #283750; } } .od-body-owndays-progressive-cp__container__persons-list { width: calc(100% - 340px); height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1240px) { .od-body-owndays-progressive-cp__container__persons-list { width: calc(100% - 120px); } } @media (max-width: 860px) { .od-body-owndays-progressive-cp__container__persons-list { width: calc(100% - 60px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp__container__persons-list { width: calc(100% - 40px); gap: 30px; } } .od-body-owndays-progressive-cp__container__types { width: calc(100% - 340px); height: auto; padding-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; margin: 0 auto; } @media (max-width: 1240px) { .od-body-owndays-progressive-cp__container__types { width: calc(100% - 120px); padding-top: 100px; } } @media (max-width: 704px) { .od-body-owndays-progressive-cp__container__types { width: calc(100% - 60px); } } @media (max-width: 650px) { .od-body-owndays-progressive-cp__container__types { width: calc(100% - 40px); gap: 30px; padding-bottom: 50px; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp__container__types { position: relative; } .od-body-owndays-progressive-cp__container__types::before { content: ""; position: absolute; top: 0; left: -20px; width: calc(100% + 40px); height: 100%; background-color: #E5E8ED; z-index: -1; } } .od-body-owndays-progressive-cp__container__comparison-box { width: 100%; height: auto; position: relative; } .od-body-owndays-progressive-cp__container__comparison { width: calc(100% - 120px); max-width: 1440px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; } @media (max-width: 768px) { .od-body-owndays-progressive-cp__container__comparison { width: calc(100% - 40px); } } .od-body-owndays-progressive-cp__container__lens-features { width: calc(100% - 120px); height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; gap: 50px; padding: 150px 0 0 0; } @media (max-width: 768px) { .od-body-owndays-progressive-cp__container__lens-features { width: calc(100% - 40px); } } @media (max-width: 550px) { .od-body-owndays-progressive-cp__container__lens-features { width: calc(100% - 20px); gap: 30px; padding: 100px 0 0 0; } } .od-body-owndays-progressive-cp .meaning__title, .od-body-owndays-progressive-cp .meaning__desc { font-family: "Founders Grotesk", sans-serif; } .od-body-owndays-progressive-cp .meaning__title { color: #283750; text-align: center; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 46px; letter-spacing: 3px; margin: 0; } .od-body-owndays-progressive-cp .meaning__title br { display: none; } .od-body-owndays-progressive-cp .meaning__desc { color: #000; font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-style: normal; font-weight: 400 !important; line-height: 32px; letter-spacing: 0.9px; margin: 54px 0 50px 0; } .od-body-owndays-progressive-cp .meaning__vdo { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; -o-object-fit: cover; object-fit: cover; } .od-body-owndays-progressive-cp .meaning__vdo-cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; background-color: rgba(0, 0, 0, .3); } .od-body-owndays-progressive-cp .meaning__vdo-container { width: 100%; height: auto; position: relative; display: inline-block; cursor: pointer; padding-top: 48.85%; } .od-body-owndays-progressive-cp .meaning__vdo-container:hover .meaning__vdo-cover { background-color: transparent; } .od-body-owndays-progressive-cp .meaning__vdo-container::before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80px; height: 80px; background: url("https://static.lenskart.com/media/owndays/img/progressive-cp/play-vdo-icon.svg") no-repeat center center; /* Use your play button image */ background-size: contain; cursor: pointer; z-index: 2; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } @media (max-width: 430px) { .od-body-owndays-progressive-cp .meaning__vdo-container::before { width: 50px; height: 50px; } } .od-body-owndays-progressive-cp .meaning__playing { width: 100%; height: auto; position: relative; display: inline-block; cursor: pointer; padding-top: 48.85%; } .od-body-owndays-progressive-cp .meaning__playing .meaning__vdo-container::before { display: none; } @media (max-width: 669px) { .od-body-owndays-progressive-cp .meaning__title br { display: block; } } @media (max-width: 430px) { .od-body-owndays-progressive-cp .meaning__title { font-size: 20px; line-height: 28px; letter-spacing: 2px; } .od-body-owndays-progressive-cp .meaning__desc { font-size: 16px; line-height: 28px; letter-spacing: 0.8px; margin: 30px 0 50px 0; } .od-body-owndays-progressive-cp .meaning__vdo { width: 100%; margin-left: 0; } } .od-body-owndays-progressive-cp .meaning-presbyopia__desc-box { width: calc(100% - 154px); max-width: 900px; height: auto; background-color: #283750; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 50px 0; border-radius: 0px 50px 0px 0px; position: absolute; left: 0; bottom: 0; z-index: 2; } @media (max-width: 1383px) { .od-body-owndays-progressive-cp .meaning-presbyopia__desc-box { width: 60%; } } @media (max-width: 1200px) { .od-body-owndays-progressive-cp .meaning-presbyopia__desc-box { width: 55%; } } @media (max-width: 1176px) { .od-body-owndays-progressive-cp .meaning-presbyopia__desc-box { width: 100%; z-index: 1; padding: 130px 0 100px 0; } } @media (max-width: 671px) { .od-body-owndays-progressive-cp .meaning-presbyopia__desc-box { gap: 30px; } } .od-body-owndays-progressive-cp .meaning-presbyopia__desc-title, .od-body-owndays-progressive-cp .meaning-presbyopia__desc-detail { font-family: "Founders Grotesk", sans-serif; color: #fff; } .od-body-owndays-progressive-cp .meaning-presbyopia__desc-title { font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 46px; letter-spacing: 3px; margin: 0; text-align: center; } .od-body-owndays-progressive-cp .meaning-presbyopia__desc-title br { display: none; } @media (max-width: 671px) { .od-body-owndays-progressive-cp .meaning-presbyopia__desc-title { font-size: 20px; line-height: 28px; letter-spacing: 2px; } .od-body-owndays-progressive-cp .meaning-presbyopia__desc-title br { display: block; } } .od-body-owndays-progressive-cp .meaning-presbyopia__desc-detail { font-size: 18px; font-style: normal; font-weight: 400 !important; line-height: 32px; letter-spacing: 0.9px; padding: 0 120px; } @media (max-width: 1383px) { .od-body-owndays-progressive-cp .meaning-presbyopia__desc-detail { padding: 0 60px; } } @media (max-width: 858px) { .od-body-owndays-progressive-cp .meaning-presbyopia__desc-detail { padding: 0 40px; } } @media (max-width: 671px) { .od-body-owndays-progressive-cp .meaning-presbyopia__desc-detail { font-size: 16px; line-height: 28px; } } .od-body-owndays-progressive-cp .meaning-presbyopia__image { width: 720px; height: 400px; position: absolute; right: 0; top: 0; z-index: 1; } @media (max-width: 1176px) { .od-body-owndays-progressive-cp .meaning-presbyopia__image { z-index: 2; } } @media (max-width: 858px) { .od-body-owndays-progressive-cp .meaning-presbyopia__image { width: 680px; height: 360px; } } @media (max-width: 671px) { .od-body-owndays-progressive-cp .meaning-presbyopia__image { width: calc(100% - 40px); height: auto; } } .od-body-owndays-progressive-cp .book-online-btn { width: 500px; height: 80px; border-radius: 40px; background-color: #283750; padding: 29px 20px 28px 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; cursor: pointer; border: 3px solid #283750; -webkit-transition: 0.5s; transition: 0.5s; } .od-body-owndays-progressive-cp .book-online-btn:hover, .od-body-owndays-progressive-cp .book-online-btn:active, .od-body-owndays-progressive-cp .book-online-btn:visited, .od-body-owndays-progressive-cp .book-online-btn:focus { text-decoration: none; } @media (min-width: 768px) { .od-body-owndays-progressive-cp .book-online-btn:hover { text-decoration: none; background-color: #fff; border: 3px solid #283750; } .od-body-owndays-progressive-cp .book-online-btn:hover span { color: #283750; } .od-body-owndays-progressive-cp .book-online-btn:hover img { content: url("https://static.lenskart.com/media/owndays/img/progressive-cp/arrow-right-circle-blue-icon.svg"); } } .od-body-owndays-progressive-cp .book-online-btn span { color: #fff; font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-style: normal; font-weight: 600 !important; line-height: 32px; letter-spacing: 2px; } .od-body-owndays-progressive-cp .book-online-btn img { width: 50px; height: 50px; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .book-online-btn { width: 350px; height: 60px; padding: 25px 10px 25px 40px; } .od-body-owndays-progressive-cp .book-online-btn span { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; } .od-body-owndays-progressive-cp .book-online-btn img { width: 40px; height: 40px; } } .od-body-owndays-progressive-cp .bg-light-blue { position: absolute; bottom: 0; left: 0; width: calc(100% - 175px); height: calc(100% - 670px); border-radius: 0px 50px 0px 0px; background-color: #E5E8ED; z-index: -1; } @media (max-width: 1176px) { .od-body-owndays-progressive-cp .bg-light-blue { display: none; } } .od-body-owndays-progressive-cp .bg-dark-blue { position: absolute; top: 454px; left: 0; width: 100%; height: 652px; background-color: #283750; z-index: -1; } .od-body-owndays-progressive-cp .bg-dark-blue::before { position: absolute; top: 652px; content: ''; width: 100%; height: calc(100% + 680px); background-color: #EEF0F2; z-index: -1; } @media (max-width: 1240px) { .od-body-owndays-progressive-cp .bg-dark-blue { top: 49%; height: 83%; } .od-body-owndays-progressive-cp .bg-dark-blue::before { display: none; } } @media (max-width: 860px) { .od-body-owndays-progressive-cp .bg-dark-blue { top: 100%; height: 83%; } } @media (max-width: 430px) { .od-body-owndays-progressive-cp .bg-dark-blue { display: none; } } .od-body-owndays-progressive-cp .bg-dark-blue-comparison { position: absolute; top: 410px; left: 0; width: 100%; height: 93%; background-color: #283750; z-index: -1; } .od-body-owndays-progressive-cp .bg-dark-blue-comparison::before { position: absolute; top: 100%; content: ''; width: 100%; height: 100%; background-color: #EEF0F2; z-index: -1; } @media (max-width: 1240px) { .od-body-owndays-progressive-cp .bg-dark-blue-comparison { top: 37%; height: 86%; } } @media (max-width: 1024px) { .od-body-owndays-progressive-cp .bg-dark-blue-comparison { top: 37%; height: 87%; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp .bg-dark-blue-comparison { top: 78%; height: 50%; } .od-body-owndays-progressive-cp .bg-dark-blue-comparison::after { position: absolute; top: -156%; content: ""; width: 100%; height: 156%; background-color: #E5E8ED; z-index: -1; } } .od-body-owndays-progressive-cp .benefits__title { margin: 0; font-family: "Founders Grotesk", sans-serif; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 46px; letter-spacing: 3px; text-align: center; } .od-body-owndays-progressive-cp .benefits__title br { display: none; } .od-body-owndays-progressive-cp .benefits__item { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: baseline; -ms-flex-pack: baseline; justify-content: baseline; gap: 30px; padding: 26px 30px 50px 30px; border-radius: 10px; background-color: #EEF0F2; } .od-body-owndays-progressive-cp .benefits__item h5, .od-body-owndays-progressive-cp .benefits__item span { font-family: "Founders Grotesk", sans-serif; color: #000; text-align: center; } .od-body-owndays-progressive-cp .benefits__item img { width: auto; max-width: 104px; height: auto; max-height: 60px; } .od-body-owndays-progressive-cp .benefits__item h5 { font-size: 20px; font-style: normal; font-weight: 600 !important; line-height: 32px; letter-spacing: 2px; margin: 0; } .od-body-owndays-progressive-cp .benefits__item span { margin: 0; font-size: 18px; font-style: normal; font-weight: 400 !important; line-height: 32px; letter-spacing: 0.4px; } .od-body-owndays-progressive-cp .benefits__item:nth-child(1) img { margin-top: 19px; } .od-body-owndays-progressive-cp .benefits__item:nth-child(4) h5 { white-space: nowrap; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .benefits__title { font-size: 20px; letter-spacing: 2px; line-height: 28px; } .od-body-owndays-progressive-cp .benefits__title br { display: block; } .od-body-owndays-progressive-cp .benefits__item { gap: 20px; padding: 25px 20px 30px 20px; } .od-body-owndays-progressive-cp .benefits__item img { width: auto; max-width: 91px; height: auto; max-height: 56px; } .od-body-owndays-progressive-cp .benefits__item h5 { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; margin: 0; } .od-body-owndays-progressive-cp .benefits__item span { margin: 0; line-height: 22px; letter-spacing: 0.8px; text-align: left; } .od-body-owndays-progressive-cp .benefits__item:nth-child(1) img { margin-top: 10px; } } .od-body-owndays-progressive-cp .persons__title { margin: 0; color: #FFF; font-family: "Founders Grotesk", sans-serif; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 46px; letter-spacing: 3px; text-align: center; } .od-body-owndays-progressive-cp .persons__title br { display: none; } @media (max-width: 860px) { .od-body-owndays-progressive-cp .persons__title br { display: block; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp .persons__title { font-size: 20px; line-height: 28px; letter-spacing: 2px; } } .od-body-owndays-progressive-cp .persons__item { width: 360px; height: auto; padding: 30px; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; border-radius: 10px; -webkit-box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, .1); box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, .1); } .od-body-owndays-progressive-cp .persons__item img { width: 250px; height: auto; } .od-body-owndays-progressive-cp .persons__item span { color: #000; font-family: "Founders Grotesk", sans-serif; text-align: center; font-size: 18px; font-style: normal; font-weight: 400 !important; line-height: 32px; letter-spacing: 0.9px; } @media (max-width: 1240px) { .od-body-owndays-progressive-cp .persons__item { width: 100%; } } @media (max-width: 860px) { .od-body-owndays-progressive-cp .persons__item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp .persons__item { gap: 10px; padding: 20px; } .od-body-owndays-progressive-cp .persons__item img { width: 150px; } .od-body-owndays-progressive-cp .persons__item span { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; text-align: left; } } .od-body-owndays-progressive-cp .types h2, .od-body-owndays-progressive-cp .types span { font-family: "Founders Grotesk", sans-serif; } .od-body-owndays-progressive-cp .types h2 { color: #283750; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 46px; letter-spacing: 3px; margin: 0; text-align: center; } .od-body-owndays-progressive-cp .types span { width: 100%; max-width: 760px; height: auto; font-size: 18px; font-style: normal; font-weight: 400 !important; line-height: 32px; letter-spacing: 0.9px; color: #000; margin: 0 auto; } @media (max-width: 650px) { .od-body-owndays-progressive-cp .types h2 { font-size: 20px; line-height: 28px; letter-spacing: 2px; } .od-body-owndays-progressive-cp .types span { width: calc(100% - 20px); font-size: 16px; line-height: 28px; letter-spacing: 0.8px; } } .od-body-owndays-progressive-cp .comparison__title { font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-style: normal; font-weight: 600 !important; line-height: 32px; letter-spacing: 2px; color: #283750; text-align: center; margin: 0 0 50px 0; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .comparison__title { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; margin: 0 0 30px 0; } } .od-body-owndays-progressive-cp .comparison__nav { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; -webkit-column-gap: 4px; -moz-column-gap: 4px; column-gap: 4px; } @media (max-width: 1265px) { .od-body-owndays-progressive-cp .comparison__nav { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; row-gap: 4px; } } .od-body-owndays-progressive-cp .comparison__nav-item { width: 100%; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #939598; cursor: pointer; } .od-body-owndays-progressive-cp .comparison__nav-item--active:nth-child(1) { background-color: #BF0000; } .od-body-owndays-progressive-cp .comparison__nav-item--active:nth-child(2) { background-color: #283750; } .od-body-owndays-progressive-cp .comparison__nav-item--active:nth-child(3) { background-color: #B47E00; } .od-body-owndays-progressive-cp .comparison__nav-item--active:nth-child(4) { background-color: #000; } .od-body-owndays-progressive-cp .comparison__nav-item strong { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-style: normal; font-weight: 600 !important; line-height: 20px; letter-spacing: 1.8px; color: #fff; text-align: center; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .comparison__nav-item strong { font-size: 16px; letter-spacing: 1.6px; } } @media (max-width: 414px) { .od-body-owndays-progressive-cp .comparison__nav-item strong { padding: 0 10px; } } .od-body-owndays-progressive-cp .comparison__desc { width: 100%; height: auto; display: grid; grid-template-columns: 67.08% 32.92%; grid-template-rows: 680px; } .od-body-owndays-progressive-cp .comparison__desc__header-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .od-body-owndays-progressive-cp .comparison__desc__detail { width: 100%; height: auto; padding: 50px; background-color: #fff; position: relative; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank:nth-child(2) { margin: 30px 0; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank span { color: #000; font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-style: normal; font-weight: 500 !important; line-height: 20px; letter-spacing: 1px; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank .circle-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank .circle { border-radius: 50%; width: 13px; height: 13px; border: 1px solid #000; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank .circle--selected { background-color: #000; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .comparison__desc__detail__rank:nth-child(2) { margin: 20px 0; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank span { font-size: 16px; letter-spacing: 0.8px; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank .circle-box { gap: 3.85px; margin-right: 25%; } .od-body-owndays-progressive-cp .comparison__desc__detail__rank .circle { width: 10px; height: 10px; } } @media (max-width: 385px) { .od-body-owndays-progressive-cp .comparison__desc__detail__rank .circle-box { margin-right: 0; } } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences { padding: 50px 0; } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences h3 { margin: 0; font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-style: normal; font-weight: 500 !important; line-height: 20px; letter-spacing: 1px; text-decoration: underline; text-underline-offset: 5px; } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences ul { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 20px; list-style-type: none; padding-left: 0; } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences ul li { font-size: 18px; font-style: normal; font-weight: 400 !important; line-height: 32px; letter-spacing: 0.9px; position: relative; padding-left: 1em; } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences ul li::before { content: ''; position: absolute; top: 13px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #000; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences { padding: 40px 0; } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences h3 { font-size: 14px; text-underline-offset: 0.7px; } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences ul { margin-top: 25px; } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences ul li { font-size: 16px; line-height: 28px; letter-spacing: 0.8px; position: relative; } .od-body-owndays-progressive-cp .comparison__desc__detail__key-differences ul li::before { top: 12px; width: 5px; height: 5px; } } .od-body-owndays-progressive-cp .comparison__desc__detail__price { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .od-body-owndays-progressive-cp .comparison__desc__detail__price h3, .od-body-owndays-progressive-cp .comparison__desc__detail__price__value, .od-body-owndays-progressive-cp .comparison__desc__detail__price__plus { font-family: "Founders Grotesk", sans-serif; } .od-body-owndays-progressive-cp .comparison__desc__detail__price h3 { margin: 0; font-size: 20px; font-style: normal; font-weight: 500 !important; line-height: 20px; letter-spacing: 1px; text-decoration: underline; text-underline-offset: 5px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value-box { margin-top: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value-box--zero { font-family: "Founders Grotesk", sans-serif; margin-top: 50px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value-box--600 { margin-bottom: 80px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value { color: #BF0000; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 20px; letter-spacing: 1.5px; margin-left: 23px; position: relative; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value--zero { font-family: "Founders Grotesk", sans-serif; font-size: 100px; font-style: normal; font-weight: 600 !important; line-height: 20px; letter-spacing: 5px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value::before { content: '$'; position: absolute; left: -23px; top: 0; font-size: 30px; letter-spacing: 1.5px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value--suffix { color: #000; font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-style: normal; font-weight: 500 !important; line-height: 16px; letter-spacing: 0.8px; margin-left: 5px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__plus { color: #BF0000; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 20px; letter-spacing: 1.5px; margin: 2px 10px 2px 0; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .comparison__desc__detail__price h3 { font-size: 14px; letter-spacing: 0.7px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value-box { margin-top: 25px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value-box--zero { font-family: "Founders Grotesk", sans-serif; margin-top: 29px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value { font-size: 20px; letter-spacing: 1px; margin-left: 16px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value--zero { font-family: "Founders Grotesk", sans-serif; font-size: 70px; letter-spacing: 3.5px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value::before { font-size: 20px; letter-spacing: 1px; left: -16px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__value--suffix { font-size: 14px; letter-spacing: 0.7px; margin-left: 8px; } .od-body-owndays-progressive-cp .comparison__desc__detail__price__plus { font-size: 20px; letter-spacing: 1px; margin: 0 4px 4px 0; } } @media (max-width: 430px) { .od-body-owndays-progressive-cp .comparison__desc__detail__price { height: 148px; } } .od-body-owndays-progressive-cp .comparison__desc__detail__remark { position: absolute; right: 50px; bottom: 5%; color: #000; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 400 !important; line-height: 24px; letter-spacing: 0.7px; } .od-body-owndays-progressive-cp .comparison__desc__detail__remark--600 { width: 75%; } @media (max-width: 1265px) { .od-body-owndays-progressive-cp .comparison__desc__detail__remark--600 { width: auto; left: 40px; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp .comparison__desc__detail__remark { right: 20px; font-size: 12px; letter-spacing: 0.6px; bottom: 20px; } .od-body-owndays-progressive-cp .comparison__desc__detail__remark--600 { width: 89%; left: 20px; } } @media (max-width: 1292px) { .od-body-owndays-progressive-cp .comparison__desc__detail { padding: 40px; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp .comparison__desc__detail { padding: 20px; } } .od-body-owndays-progressive-cp .comparison__desc__image-text { color: #fff; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 400 !important; line-height: 24px; letter-spacing: 0.7px; margin-top: 8px; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .comparison__desc__image-text { font-size: 12px; letter-spacing: 0.6px; } } @media (max-width: 1265px) { .od-body-owndays-progressive-cp .comparison__desc { grid-template-columns: 1fr; grid-template-rows: auto; } } .od-body-owndays-progressive-cp .lens-features h2 { margin: 0; color: #fff; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 46px; letter-spacing: 3px; } @media (max-width: 550px) { .od-body-owndays-progressive-cp .lens-features h2 { font-size: 20px; } } .od-body-owndays-progressive-cp .lens-features__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; } @media (max-width: 1024px) { .od-body-owndays-progressive-cp .lens-features__list { gap: 25px; } } @media (max-width: 550px) { .od-body-owndays-progressive-cp .lens-features__list { gap: 10px; } } .od-body-owndays-progressive-cp .lens-features__item { width: 260px; height: 187px; border-radius: 10px; background-color: #fff; -webkit-box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, .1); box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, .1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 22px 0; } .od-body-owndays-progressive-cp .lens-features__item-img { width: auto; max-width: 100px; height: auto; } .od-body-owndays-progressive-cp .lens-features__item-text { color: #000; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-style: normal; font-weight: 600 !important; line-height: 32px; letter-spacing: 2px; } .od-body-owndays-progressive-cp .lens-features__item:nth-child(1) { gap: 30px; } .od-body-owndays-progressive-cp .lens-features__item:nth-child(1) .lens-features__item-img { margin-top: 1px; } .od-body-owndays-progressive-cp .lens-features__item:nth-child(3) .lens-features__item-img { margin-top: 13px; } .od-body-owndays-progressive-cp .lens-features__item:nth-child(3) .lens-features__item-text br { display: none; } @media (max-width: 950px) { .od-body-owndays-progressive-cp .lens-features__item { width: 240px; } } @media (max-width: 890px) { .od-body-owndays-progressive-cp .lens-features__item { width: 200px; height: 220px; } } @media (max-width: 768px) { .od-body-owndays-progressive-cp .lens-features__item { width: 130px; height: 184px; padding: 20px 0; gap: 20px; } .od-body-owndays-progressive-cp .lens-features__item-img { max-width: 62px; } .od-body-owndays-progressive-cp .lens-features__item-text { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; } .od-body-owndays-progressive-cp .lens-features__item:nth-child(1) { gap: 30px; } .od-body-owndays-progressive-cp .lens-features__item:nth-child(1) .lens-features__item-img, .od-body-owndays-progressive-cp .lens-features__item:nth-child(3) .lens-features__item-img { margin-top: 0; } .od-body-owndays-progressive-cp .lens-features__item:nth-child(3) .lens-features__item-img { height: 48px; } .od-body-owndays-progressive-cp .lens-features__item:nth-child(3) .lens-features__item-text br { display: block; } } @media (max-width: 430px) { .od-body-owndays-progressive-cp .lens-features__item { width: 110px; height: 165px; } } .od-footer-owndays-progressive-cp__container__free-enhanced-header { width: 100%; height: 70px; background-color: #BF0000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; margin-top: 150px; } @media (max-width: 1196px) { .od-footer-owndays-progressive-cp__container__free-enhanced-header { height: auto; padding: 0 120px; } } @media (max-width: 802px) { .od-footer-owndays-progressive-cp__container__free-enhanced-header { padding: 0 60px; } } @media (max-width: 687px) { .od-footer-owndays-progressive-cp__container__free-enhanced-header { padding: 0 40px; } } @media (max-width: 641px) { .od-footer-owndays-progressive-cp__container__free-enhanced-header { height: 83px; margin-top: 100px; } } @media (max-width: 455px) { .od-footer-owndays-progressive-cp__container__free-enhanced-header { padding: 0 20px; } } @media (max-width: 414px) { .od-footer-owndays-progressive-cp__container__free-enhanced-header { padding: 0; } } .od-footer-owndays-progressive-cp__container__free-enhanced-body-box { width: 100%; height: auto; background-color: #D7DCE2; } .od-footer-owndays-progressive-cp__container__free-enhanced-body { width: 100%; max-width: 1440px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; position: relative; } .od-footer-owndays-progressive-cp__container__book-online-btn { background-color: #EEF0F2; padding: 150px 0; } @media (max-width: 550px) { .od-footer-owndays-progressive-cp__container__book-online-btn { padding: 100px 20px; } } .od-footer-owndays-progressive-cp__container__term-and-con-modal-box { width: 100%; height: 100%; position: fixed; top: 0; z-index: 9999; background-color: rgba(0, 0, 0, .3); } .od-footer-owndays-progressive-cp__container__term-and-con-modal { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 900px; height: auto; min-height: 629px; background-color: #fff; } @media (max-width: 1024px) { .od-footer-owndays-progressive-cp__container__term-and-con-modal { width: calc(100% - 120px); height: calc(100% - 120px); overflow-y: scroll; } } @media (max-width: 768px) { .od-footer-owndays-progressive-cp__container__term-and-con-modal { width: calc(100% - 60px); height: calc(100% - 120px); overflow-y: scroll; } } @media (max-width: 550px) { .od-footer-owndays-progressive-cp__container__term-and-con-modal { width: calc(100% - 40px); height: calc(100% - 40px); } } .od-footer-owndays-progressive-cp .free-enhanced-header { color: #fff; font-family: "Founders Grotesk", sans-serif; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: 46px; letter-spacing: 3px; text-align: center; margin: 0; } .od-footer-owndays-progressive-cp .free-enhanced-header br { display: none; } @media (max-width: 1201px) { .od-footer-owndays-progressive-cp .free-enhanced-header br { display: block; } } @media (max-width: 641px) { .od-footer-owndays-progressive-cp .free-enhanced-header { font-size: 20px; line-height: 28px; letter-spacing: 2px; } } .od-footer-owndays-progressive-cp .free-enhanced-body__desc-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 552px; height: auto; margin-left: 120px; padding: 50px 0 45px 0; } .od-footer-owndays-progressive-cp .free-enhanced-body__desc-box p { color: #000; font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-style: normal; font-weight: 400 !important; line-height: 32px; letter-spacing: 0.9px; margin-bottom: 0; } .od-footer-owndays-progressive-cp .free-enhanced-body__desc-box p:nth-child(2) { margin-top: 20px; } @media (max-width: 430px) { .od-footer-owndays-progressive-cp .free-enhanced-body__desc-box p { font-size: 16px; line-height: 28px; letter-spacing: 0.8px; } } @media (max-width: 1399px) { .od-footer-owndays-progressive-cp .free-enhanced-body__desc-box { padding: 62% 0 50px 0; width: calc(100% - 120px); margin: 0 auto; } } @media (max-width: 430px) { .od-footer-owndays-progressive-cp .free-enhanced-body__desc-box { padding: 67% 0 35px 0; width: calc(100% - 80px); } } .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box { margin-top: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box__text { color: #000; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 400 !important; line-height: 24px; letter-spacing: 0.7px; } .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box__link-open-modal { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; margin-top: 12px; position: relative; cursor: pointer; } .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box__link-open-modal::before { position: absolute; bottom: 2px; content: ''; width: 97px; border-bottom: 1px solid #000; } .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box__link-open-modal img { width: 10px; height: 10px; } @media (max-width: 430px) { .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box { margin-top: 28px; } .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box__text { font-size: 12px; letter-spacing: 0.6px; } .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box__link-open-modal { gap: 4px; margin-top: 0; } .od-footer-owndays-progressive-cp .free-enhanced-body__remark-box__link-open-modal::before { width: 83px; } } .od-footer-owndays-progressive-cp .free-enhanced-body__img { width: 730px; height: auto; position: absolute; right: 0; top: 33px; } @media (max-width: 1399px) { .od-footer-owndays-progressive-cp .free-enhanced-body__img { width: calc(100% - 22px); top: 30px; } } @media (max-width: 768px) { .od-footer-owndays-progressive-cp .free-enhanced-body__img { width: calc(100% - 40px); } } @media (max-width: 430px) { .od-footer-owndays-progressive-cp .free-enhanced-body__img { width: calc(100% - 30px); } } .od-footer-owndays-progressive-cp .book-online-btn { width: 500px; height: 80px; border-radius: 40px; background-color: #283750; padding: 29px 20px 28px 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; cursor: pointer; border: 3px solid #283750; -webkit-transition: 0.5s; transition: 0.5s; } .od-footer-owndays-progressive-cp .book-online-btn:hover, .od-footer-owndays-progressive-cp .book-online-btn:active, .od-footer-owndays-progressive-cp .book-online-btn:visited, .od-footer-owndays-progressive-cp .book-online-btn:focus { text-decoration: none; } @media (min-width: 768px) { .od-footer-owndays-progressive-cp .book-online-btn:hover { text-decoration: none; background-color: #fff; border: 3px solid #283750; } .od-footer-owndays-progressive-cp .book-online-btn:hover span { color: #283750; } .od-footer-owndays-progressive-cp .book-online-btn:hover img { content: url("https://static.lenskart.com/media/owndays/img/progressive-cp/arrow-right-circle-blue-icon.svg"); } } .od-footer-owndays-progressive-cp .book-online-btn span { color: #fff; font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-style: normal; font-weight: 600 !important; line-height: 32px; letter-spacing: 2px; } .od-footer-owndays-progressive-cp .book-online-btn img { width: 50px; height: 50px; } @media (max-width: 550px) { .od-footer-owndays-progressive-cp .book-online-btn { width: 350px; height: 60px; padding: 25px 10px 25px 40px; } .od-footer-owndays-progressive-cp .book-online-btn span { font-size: 16px; line-height: 22px; letter-spacing: 0.8px; } .od-footer-owndays-progressive-cp .book-online-btn img { width: 40px; height: 40px; } } .od-footer-owndays-progressive-cp .term-and-con-modal { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .od-footer-owndays-progressive-cp .term-and-con-modal__close-icon { position: absolute; top: 32px; right: 25px; width: 39px; height: 39px; cursor: pointer; } @media (max-width: 550px) { .od-footer-owndays-progressive-cp .term-and-con-modal__close-icon { top: 10px; right: 10px; width: 29px; height: 29px; } } .od-footer-owndays-progressive-cp .term-and-con-modal h2 { margin: 0; color: #000; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-style: normal; font-weight: 600 !important; line-height: 32px; letter-spacing: 2px; padding: 50px 0 32px 0px; } @media (max-width: 550px) { .od-footer-owndays-progressive-cp .term-and-con-modal h2 { font-size: 20px; line-height: 28px; letter-spacing: 2px; } } .od-footer-owndays-progressive-cp .term-and-con-modal ul { width: 100%; height: auto; padding-bottom: 36px; list-style-type: none; } .od-footer-owndays-progressive-cp .term-and-con-modal ul li { font-family: "Founders Grotesk", sans-serif; color: #000; font-size: 16px; font-style: normal; font-weight: 400 !important; line-height: 36px; letter-spacing: 0.1px; margin-left: 0; padding-left: 18px; position: relative; } .od-footer-owndays-progressive-cp .term-and-con-modal ul li::before { content: ''; position: absolute; top: 18px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #000; } @media screen and (min-width: 1024px) { .od-footer-owndays-progressive-cp .term-and-con-modal ul { padding: 0 60px; } } @media (max-width: 1024px) { .od-footer-owndays-progressive-cp .term-and-con-modal ul { width: calc(100% - 120px); height: 80%; overflow-y: scroll; padding: 0; } } @media (max-width: 550px) { .od-footer-owndays-progressive-cp .term-and-con-modal ul { width: 100%; height: 100%; padding: 0 24px 24px 24px; } .od-footer-owndays-progressive-cp .term-and-con-modal ul li { font-size: 16px; line-height: 32px; letter-spacing: 0.8px; } .od-footer-owndays-progressive-cp .term-and-con-modal ul li::before { top: 15px; } } @media (max-width: 550px) { .od-footer-owndays-progressive-cp .term-and-con-modal { height: 100%; } } @-webkit-keyframes cloud { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @keyframes cloud { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } .fmc2l { font: 400 14px/1.57143 "Founders Grotesk", sans-serif; letter-spacing: 0.42px; background-color: #b3dee8; color: #000; width: 100vw; overflow-x: hidden; } .fmc2l picture, .fmc2l img { display: block; width: 100%; } .fmc2l section { position: relative; z-index: 1; } .fmc2l a { text-decoration: none; } .fmc2l a:hover { text-decoration: none; } .fmc2l__container { padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; width: 100%; max-width: 1240px; } .fmc2l__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 50px; border-radius: 10rem; font-size: 16px; font-weight: 500; letter-spacing: 0.8px; color: inherit; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .fmc2l__btn--yellow { background: #fcdb32 url("https://static.lenskart.com/media/owndays/img/news/free-myopia-control-2-lenses/icon-caret-right--black.svg") no-repeat right 20px center/10px auto; } .fmc2l__btn--blue { color: #fff; background: #28b4b4 url("https://static.lenskart.com/media/owndays/img/news/free-myopia-control-2-lenses/icon-caret-right--white.svg") no-repeat right 20px center/10px auto; } .fmc2l__heading { font-family: "Fredoka", sans-serif; font-weight: 700 !important; font-size: 23px; line-height: 1.3913; letter-spacing: 1.15px; margin: 0; position: relative; z-index: 2; } .fmc2l__heading span { display: inline-block; } .fmc2l__heading-red { font: inherit; color: #e9534e; } .fmc2l__heading-mark { position: relative; } .fmc2l__heading-mark::before { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 10px; background-color: #fcdb32; z-index: -1; } .fmc2l__cloud { position: absolute; z-index: -1; } .fmc2l__cloud--1 { -webkit-animation: cloud 5s linear both alternate infinite; animation: cloud 5s linear both alternate infinite; } .fmc2l__cloud--2 { -webkit-animation: cloud 6s linear both alternate infinite; animation: cloud 6s linear both alternate infinite; } .fmc2l__main { padding-top: 20px; margin-bottom: 100px; } .fmc2l__main .fmc2l__cloud--1 { max-width: 215px; right: calc(50% + 50px); bottom: 110px; } .fmc2l__main .fmc2l__cloud--2 { max-width: 181px; left: calc(50% + 70px); bottom: -40px; } .fmc2l__main-img { position: relative; } .fmc2l__main-content { position: relative; } .fmc2l__main-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; margin: 0; } .fmc2l__main-heading img { max-width: 150px; } .fmc2l__main-heading span { font: 700 28px/1.28571 "Fredoka", sans-serif; letter-spacing: 0.84px; color: #485ba7; } .fmc2l__main-list { list-style: none; padding: 0; margin: 60px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .fmc2l__main-list li { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; } .fmc2l__main-list li img { width: 40px; height: 40px; -o-object-fit: contain; object-fit: contain; } .fmc2l__what { margin-bottom: 100px; } .fmc2l__what .fmc2l__container { display: grid; gap: 40px; } .fmc2l__what-video { border-radius: 0 100rem 100rem 0; overflow: hidden; cursor: pointer; position: relative; } .fmc2l__what-video::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .3) url("https://static.lenskart.com/media/owndays/img/news/free-myopia-control-2-lenses/icon-play.webp") no-repeat center/50px auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .fmc2l__what-video img { border-radius: inherit; } .fmc2l__what-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; } .fmc2l__what-description { margin: 0; } .fmc2l__what-description sup { font-size: 10px; } .fmc2l__uds { margin-bottom: 100px; } .fmc2l__uds .fmc2l__cloud--1 { top: -30px; right: calc(50% + 53px); max-width: 181px; } .fmc2l__uds .fmc2l__cloud--2 { left: calc(50% + 34px); bottom: -92px; max-width: 242px; } .fmc2l__uds-grid { display: grid; gap: 20px; } .fmc2l__uds-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; } .fmc2l__uds-content p { margin: 0; } .fmc2l__uds-card { background-color: rgba(255, 255, 255, .3); border-radius: 20px; padding: 40px 20px; } .fmc2l__uds-card-title { font-size: 18px; font-weight: 500; line-height: 0.61111; letter-spacing: 0.9; margin: 0 0 20px; } .fmc2l__uds-card-list { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } .fmc2l__uds-card-list li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px 15px; } .fmc2l__uds-card-list li img { -o-object-fit: contain; object-fit: contain; } .fmc2l__uds-card-list li sup { font-size: 10px; } .fmc2l__uds-card-list--features li img { width: 20px; height: 20px; } .fmc2l__uds-card-list--benefits li img { width: 40px; height: 40px; } .fmc2l__uds-contents { list-style: none; padding: 0; margin: 40px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; } .fmc2l__uds-contents-item { display: grid; gap: 20px; } .fmc2l__uds-contents-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .fmc2l__uds-contents-details h3 { font-size: 22px; font-weight: 500 !important; line-height: 1.45455; letter-spacing: 1.1px; margin: 0; position: relative; z-index: 2; } .fmc2l__uds-contents-details h3::before { content: ''; position: absolute; top: 50%; left: -20px; width: 30px; height: 30px; background-color: #fcdb32; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } .fmc2l__uds-contents-details p { margin: 0; } .fmc2l__about { margin-bottom: 100px; } .fmc2l__about .fmc2l__cloud--1 { top: 224px; left: calc(50% + 421px); max-width: 479px; } .fmc2l__about-title { position: relative; z-index: 2; color: #fff; margin: 0 0 20px; font: 700 23px/1.3913 "Fredoka", sans-serif; font-weight: 700 !important; letter-spacing: 1.15px; } .fmc2l__about-title::before { content: ''; position: absolute; top: 0; left: -40px; right: -40px; bottom: 0; background-color: #e9534e; z-index: -1; } .fmc2l__about-title span { margin: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 15px 0; font-weight: inherit; } .fmc2l__about-text { margin: 0; } .fmc2l__about-notes { margin: 20px 0 0; padding: 0; list-style: none; } .fmc2l__about-notes li em { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; cursor: pointer; font-style: normal; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .fmc2l__about-notes li em::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #000; } .fmc2l__about-notes li em::after { content: ''; width: 12px; height: 25px; margin-left: 0.25em; background: url("https://static.lenskart.com/media/owndays/img/news/free-myopia-control-2-lenses/icon-external-link.svg") no-repeat center center/contain; } .fmc2l__about-notes li em:hover { opacity: 0.6; } .fmc2l__cmmp { margin-bottom: 100px; } .fmc2l__cmmp .fmc2l__cloud--1 { max-width: 181px; top: -73px; left: calc(50% - 70px); } .fmc2l__cmmp .fmc2l__heading { margin-bottom: 40px; } .fmc2l__cmmp-text { margin: 0 0 38px; } .fmc2l__cmmp-list { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .fmc2l__cmmp-list li { display: grid; grid-template-columns: 85px 1fr; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .fmc2l__cmmp-list li h3 { margin: 0; font-weight: 500 !important; font-size: 18px; line-height: normal; letter-spacing: 0.9px; } .fmc2l__cmmp-list li p { grid-column: span 2; margin: 0; } .fmc2l__rs { padding-bottom: 100px; } .fmc2l__rs .fmc2l__heading { margin-bottom: 10px; } .fmc2l__rs-card { padding: 60px 20px; background-color: #fff; border-radius: 20px; margin-bottom: 18px; } .fmc2l__rs-grid { display: grid; gap: 20px; } .fmc2l__rs-logo { margin: 0; font: 0/0 a; } .fmc2l__rs-logo img { max-width: 93px; } .fmc2l__rs-text { motion: 0; } .fmc2l__rs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 40px; } .fmc2l__rs-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } .fmc2l__rs-list li p { margin-bottom: 20px; font-size: 18px; font-weight: 500; line-height: 0.61111; letter-spacing: 0.9px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .fmc2l__rs-list li p span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 11px; height: 11px; border-radius: 10rem; } .fmc2l__rs-actions { margin-top: 60px; display: grid; gap: 20px; } .fmc2l__rs-notes { margin: 0; padding: 0; list-style: none; counter-reset: counter; } .fmc2l__rs-notes li { counter-increment: counter; position: relative; padding-left: 0.75em; } .fmc2l__rs-notes li::before { content: counter(counter); font-size: 11px; position: absolute; top: 2px; left: 0; } .fmc2l__rs-notes li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 12px; height: 22px; margin-left: 0.25em; background: url("https://static.lenskart.com/media/owndays/img/news/free-myopia-control-2-lenses/icon-external-link.svg") no-repeat center center/contain; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .fmc2l__rs-notes li a:hover { opacity: 0.6; } .fmc2l__fixed-bottom { background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 10px -10px 10px 0px rgba(194, 194, 194, .1) inset, -10px 10px 10px 0px rgba(255, 255, 255, .1) inset; box-shadow: 10px -10px 10px 0px rgba(194, 194, 194, .1) inset, -10px 10px 10px 0px rgba(255, 255, 255, .1) inset; backdrop-filter: blur(5px); padding: 20px 0; position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 3; } .fmc2l__fixed-bottom-grid { display: grid; gap: 14px; } .fmc2l__fixed-bottom p { color: #fff; text-align: center; font-size: 11px; letter-spacing: 0.55px; margin: 0; } .fmc2l__fixed-bottom p a { color: currentColor; } .fmc2l__modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1000; padding: 20px; } .fmc2l__modal-content { background: #fff; color: #000; padding: 40px 20px; width: 100%; max-width: 900px; max-height: 90vh; position: relative; font-size: 14px; letter-spacing: 1px; overflow-y: auto; } .fmc2l__modal-close { position: absolute; top: 20px; right: 20px; background: transparent; border: none; cursor: pointer; padding: 0; } .fmc2l__modal h2 { text-align: center; font-weight: 500 !important; font-size: 20px; line-height: 1; letter-spacing: 0.02em; margin: 0 0 27px; } .fmc2l__modal ul { list-style: none; -webkit-padding-start: 0; padding-inline-start: 0; line-height: 2; margin-bottom: 0; } .fmc2l__modal ul li { position: relative; padding-left: 20px; } .fmc2l__modal ul li::before { content: ''; position: absolute; top: 12px; left: 4px; width: 4px; height: 4px; background-color: #000; border-radius: 100%; } @media screen and (max-width: 767px) { .fmc2l__main-img { padding-left: 20px; } .fmc2l__main-content { padding-left: 20px; padding-right: 20px; } .fmc2l__main-heading { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -21px; } .fmc2l__what-video { margin-left: -20px; } .fmc2l__what-content { padding-left: 20px; padding-right: 20px; } .fmc2l__uds-content { padding: 0 20px 18px; } .fmc2l__uds-contents-item:nth-child(odd) .fmc2l__uds-contents-img { margin-left: -40px; } .fmc2l__uds-contents-item:nth-child(even) .fmc2l__uds-contents-img { margin-right: -40px; } .fmc2l__uds-contents-details { padding-left: 20px; padding-right: 20px; } .fmc2l__about-title { padding-left: 20px; padding-right: 20px; } .fmc2l__about-img { margin-left: -40px; width: calc(100% + 40px) !important; margin-bottom: 20px; } .fmc2l__about-img img { width: calc(100% + 20px); } .fmc2l__about-content { padding-left: 20px; padding-right: 20px; } .fmc2l__cmmp .fmc2l__heading, .fmc2l__cmmp-text, .fmc2l__cmmp-list { padding-left: 20px; padding-right: 20px; } .fmc2l__cmmp-list { margin-bottom: 40px; } .fmc2l__modal-content { padding-bottom: 200px; } } @media screen and (min-width: 768px) { .fmc2l .md-none { display: none !important; } .fmc2l__btn--yellow:hover { color: #fff; background-color: #28b4b4; background-image: url("https://static.lenskart.com/media/owndays/img/news/free-myopia-control-2-lenses/icon-caret-right--white.svg"); } .fmc2l__btn--blue:hover { color: #fff; background-color: #485ba7; } .fmc2l__main-img { margin-left: calc(50% - 25px); } .fmc2l__main-content { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .fmc2l__main-list { max-width: 355px; } .fmc2l__what .fmc2l__container { grid-template-columns: 1fr 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .fmc2l__what-video { border-radius: 10px 222px 222px 10px; } .fmc2l__what-video:hover::before { background-color: rgba(0, 0, 0, 0); background-image: url("https://static.lenskart.com/media/owndays/img/news/free-myopia-control-2-lenses/icon-play--hover.webp"); } .fmc2l__what-content { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .fmc2l__uds-grid { grid-template-columns: repeat(2, 1fr); } .fmc2l__uds-content { grid-column: span 2; } .fmc2l__uds-contents-item { grid-template-columns: 1fr 50%; gap: 50px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .fmc2l__uds-contents-item:nth-child(odd) .fmc2l__uds-contents-img img { border-top-left-radius: 30px; border-bottom-left-radius: 30px; } .fmc2l__uds-contents-item:nth-child(even) .fmc2l__uds-contents-img img { border-top-right-radius: 30px; border-bottom-right-radius: 30px; } .fmc2l__uds-contents-details h3::before { top: 2px; left: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .fmc2l__about .fmc2l__container { display: grid; grid-template-areas: 'title img' 'content img'; grid-template-columns: 1fr 50%; gap: 0 50px; } .fmc2l__about-title { grid-area: title; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .fmc2l__about-title::before { left: -1000%; right: 10px; border-top-right-radius: 160px; border-top-right-radius: 10rem; border-bottom-right-radius: 160px; border-bottom-right-radius: 10rem; } .fmc2l__about-img { grid-area: img; } .fmc2l__about-img img { border-top-left-radius: 30px; border-bottom-left-radius: 30px; } .fmc2l__about-content { grid-area: content; } .fmc2l__cmmp .fmc2l__container { display: grid; grid-template-areas: 'heading list' 'text list' 'button list'; grid-template-columns: 1fr 50%; grid-template-rows: auto auto 1fr; gap: 0 50px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .fmc2l__cmmp .fmc2l__heading { grid-area: heading; } .fmc2l__cmmp .fmc2l__btn { grid-area: button; max-width: 400px; margin-top: 50px; } .fmc2l__cmmp-text { grid-area: text; margin-bottom: 0; } .fmc2l__cmmp-list { grid-area: list; gap: 50px; } .fmc2l__cmmp-list li { grid-template-columns: 113px 1fr; grid-template-rows: auto 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10px 20px; } .fmc2l__cmmp-list li img { grid-row: span 2; } .fmc2l__cmmp-list li p { grid-column-start: 2; } .fmc2l__rs .fmc2l__heading { grid-area: heading; margin-bottom: 50px; } .fmc2l__rs-grid { grid-template-areas: 'heading img' 'logo img' 'text img'; grid-template-columns: 1fr 50%; grid-template-rows: auto auto 1fr; gap: 0 60px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .fmc2l__rs-logo { grid-area: logo; margin-bottom: 30px; } .fmc2l__rs-img { grid-area: img; } .fmc2l__rs-text { grid-area: text; margin-bottom: 0; } .fmc2l__rs-list { grid-template-columns: repeat(3, 1fr); } .fmc2l__rs-actions { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; } .fmc2l__fixed-bottom .fmc2l__container { position: relative; } .fmc2l__fixed-bottom .fmc2l__btn { max-width: 400px; margin-left: auto; margin-right: auto; } .fmc2l__fixed-bottom p { position: absolute; top: 50%; left: 6%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media screen and (min-width: 1024px) { .fmc2l { font-size: 16px; letter-spacing: 0.48px; } .fmc2l__btn { height: 60px; font-size: 20px; letter-spacing: 1px; } .fmc2l__heading { font-size: 30px; letter-spacing: 1.5px; } .fmc2l__heading-mark::before { height: 14px; } .fmc2l__main { padding: 48px 0; } .fmc2l__main .fmc2l__cloud--1 { max-width: 400px; top: 120px; left: auto; right: calc(50% + 392px); } .fmc2l__main .fmc2l__cloud--2 { max-width: 312px; bottom: 45px; left: auto; right: calc(50% + 18px); } .fmc2l__main-img { margin-left: calc(50% - 50px); } .fmc2l__main-heading img { max-width: 206px; margin-top: 8px; } .fmc2l__main-heading span { font-size: 40px; letter-spacing: 1.2px; } .fmc2l__main-list { font-size: 20px; letter-spacing: 1px; } .fmc2l__main-list sup { font-size: 12px; } .fmc2l__what { margin: 150px 0; } .fmc2l__what .fmc2l__container { gap: 50px; } .fmc2l__what-video::before { background-size: 70px auto; } .fmc2l__what-content { gap: 50px; } .fmc2l__uds { margin-bottom: 150px; } .fmc2l__uds .fmc2l__cloud--1 { max-width: 400px; top: 4px; left: auto; right: calc(50% + 369px); } .fmc2l__uds .fmc2l__cloud--2 { max-width: 312px; bottom: 240px; left: calc(50% - 83px); } .fmc2l__uds-grid { grid-template-columns: 2fr 2fr 3fr; gap: 30px; } .fmc2l__uds-content { grid-column: span 1; } .fmc2l__uds-card { padding: 50px; } .fmc2l__uds-card-title { font-size: 20px; } .fmc2l__uds-contents { margin-top: 75px; gap: 75px; } .fmc2l__uds-contents-item { gap: 100px; } .fmc2l__about { margin-bottom: 150px; } .fmc2l__about-title { font-size: 30px; line-height: 22px; margin-bottom: 50px; } .fmc2l__about-notes { margin-top: 50px; } .fmc2l__cmmp { margin-bottom: 150px; } .fmc2l__cmmp .fmc2l__cloud--1 { max-width: 312px; top: -98px; left: auto; right: calc(50% + 475px); } .fmc2l__cmmp .fmc2l__heading { margin-bottom: 50px; } .fmc2l__rs { padding-bottom: 150px; } .fmc2l__rs-card { padding: 100px 60px; margin-bottom: 50px; } .fmc2l__rs-logo img { max-width: 149px; } .fmc2l__rs-list { gap: 90px; margin: 50px 0 100px; } .fmc2l__rs-actions { gap: 100px; } .fmc2l__modal-close { width: 38px; height: 38px; top: 35px; right: 35px; } .fmc2l__modal-close img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .fmc2l__modal-content { padding: 60px 100px; font-size: 15px; border-radius: 10px; } .fmc2l__modal h2 { font-size: 22px; margin-bottom: 60px; } } .header-ortho-k-lens__top__img { position: relative; margin-left: -27px; } .header-ortho-k-lens__top__title { position: absolute; bottom: 69px; left: 0; right: 0; width: 74%; margin: 0 auto; } @media (min-width: 768px) { .header-ortho-k-lens__top__title { top: 50%; bottom: auto; left: auto; right: 40px; width: 352px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media (min-width: 1024px) { .header-ortho-k-lens__top__img { margin-left: calc(560px - 50vw); } .header-ortho-k-lens__top__title { right: 160px; width: 462px; } } .header-ortho-k-lens__intro { margin-top: 79px; } .header-ortho-k-lens__intro .base-ortho-k-lens__title { margin-bottom: 29px; grid-area: title; } .header-ortho-k-lens__intro p { font-size: 14px; font-weight: 600 !important; grid-area: text; margin: 0; } .header-ortho-k-lens__intro__img { display: block; margin: 48px auto 0; width: 89.6%; max-width: 470px; grid-area: img; } @media (min-width: 768px) { .header-ortho-k-lens__intro { display: grid; grid-template-columns: 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-areas: "title img" "text img"; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .header-ortho-k-lens__intro__img { margin-right: 0; } } @media (min-width: 1024px) { .header-ortho-k-lens__intro { margin-top: 168px; grid-template-columns: 1fr 449px; } .header-ortho-k-lens__intro p { font-size: 16px; } .header-ortho-k-lens__intro__img { margin-top: 0; width: 100%; max-width: none; } } @media (min-width: 1296px) { .header-ortho-k-lens__intro { -webkit-column-gap: 112px; -moz-column-gap: 112px; column-gap: 112px; } } .header-ortho-k-lens__video { margin: 61px auto 0; } @media (max-width: 430px) { .header-ortho-k-lens__video .base-ortho-k-lens__container--sub { height: 214.45px; } } @media (max-width: 390px) { .header-ortho-k-lens__video .base-ortho-k-lens__container--sub { height: 191.63px; } } .header-ortho-k-lens__video a { position: relative; } @media (min-width: 1024px) { .header-ortho-k-lens__video a:hover img { -webkit-transition: 0.5s; transition: 0.5s; opacity: 0.6; } } .header-ortho-k-lens__video__iframe-container { width: 100%; width: 100%; height: 100%; display: inline-block; aspect-ratio: 16/9; } @media (min-width: 768px) { .header-ortho-k-lens__video { margin-top: 82px; } .header-ortho-k-lens__video a { position: relative; } .header-ortho-k-lens__video a::before { background-size: 86px auto; } } .header-ortho-k-lens__how-works { margin-top: 70px; padding: 70px 0; position: relative; } .header-ortho-k-lens__how-works::before { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; bottom: 0; background-color: #f7f9fc; padding-top: 70px; z-index: -1; } .header-ortho-k-lens__how-works .base-ortho-k-lens__container--sub { max-width: 1022px; margin: 0 auto; } @media (max-width: 767px) { .header-ortho-k-lens__how-works .base-ortho-k-lens__container--sub { margin-left: 0; } } .header-ortho-k-lens__how-works__list { margin: 67px -27px 8px; padding: 37px 27px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; counter-reset: how-works-counter; list-style-type: none; } @media (max-width: 1023px) { .header-ortho-k-lens__how-works__list { overflow: overlay; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 calc(100% - 30px)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 calc(100% - 30px)); } } .header-ortho-k-lens__how-works__list > li { width: 80%; max-width: 213px; -webkit-box-flex: 0; -ms-flex: none; flex: none; background-color: #fff; border-radius: 28px; padding: 44px 10px 30px; position: relative; counter-increment: how-works-counter; list-style-type: none; } .header-ortho-k-lens__how-works__list > li::before { content: ''; position: absolute; top: 50%; left: -20px; width: 15px; height: 15px; -webkit-transform: translateY(calc(-50% - 10px)); transform: translateY(calc(-50% - 10px)); background: url("https://static.lenskart.com/media/owndays/img/ortho-k-lens/icon-caret-right.svg") center/contain no-repeat; } .header-ortho-k-lens__how-works__list > li:first-child::before { content: none; } .header-ortho-k-lens__how-works__list > li + li { margin-left: 26px; } .header-ortho-k-lens__how-works__list-number { font: 700 27px/1 din-2014, sans-serif; font-weight: 700 !important; width: 74px; height: 74px; border-radius: 50%; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: -80px auto 10px; } .header-ortho-k-lens__how-works__list-number::before { content: counter(how-works-counter); } .header-ortho-k-lens__how-works__list-img { display: block; margin: 0 auto; } .header-ortho-k-lens__how-works__list-title { font: 700 19px/1.6 "Noto Sans", sans-serif; font-weight: 700 !important; text-align: center; margin: 20px 0 0 0; } .header-ortho-k-lens__how-works__list-title small { font-size: 15px; font-weight: 300 !important; letter-spacing: 0.01em; line-height: 1.6; display: block; } .header-ortho-k-lens__how-works__des { font-size: 13px; font-weight: normal !important; margin: 0; } @media (min-width: 1024px) { .header-ortho-k-lens__how-works { margin-top: 134px; padding: 108px 0 120px; } .header-ortho-k-lens__how-works__list { margin: 55px 0 66px 0; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-ortho-k-lens__how-works__des { font-size: 15px; } } @media (min-width: 1296px) { .header-ortho-k-lens__how-works__list { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header-ortho-k-lens__how-works__list > li::before { left: -33px; } .header-ortho-k-lens__how-works__list > li + li { margin-left: 57px; } } .body-ortho-k-lens__key-benefits { padding: 70px 0; position: relative; } .body-ortho-k-lens__key-benefits::before { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; bottom: 0; background-color: #2e5aa8; z-index: -1; } .body-ortho-k-lens__key-benefits .base-ortho-k-lens__title { color: #fff; } .body-ortho-k-lens__key-benefits__list { display: grid; gap: 23px; margin: 50px 0 0 0; list-style-type: none; padding-left: 0; } .body-ortho-k-lens__key-benefits__list > li { padding: 35px 20px 45px; background-color: #fff; border: 1px solid #707070; } .body-ortho-k-lens__key-benefits__list-top { padding-bottom: 25px; margin-bottom: 20px; position: relative; } .body-ortho-k-lens__key-benefits__list-top::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: url("https://static.lenskart.com/media/owndays/img/ortho-k-lens/dot-blue.svg") left/contain repeat-x; } .body-ortho-k-lens__key-benefits__list-img { width: 150px; margin: 0 auto 15px; display: block; } .body-ortho-k-lens__key-benefits__list-title { font: 700 22px/1.5 din-2014, sans-serif; font-weight: 700 !important; color: #2e5aa8; text-align: center; margin: 0; } .body-ortho-k-lens__key-benefits__list p { font-size: 14px; margin: 0; } @media (min-width: 768px) { .body-ortho-k-lens__key-benefits__list { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .body-ortho-k-lens__key-benefits { padding: 120px 0 130px; } .body-ortho-k-lens__key-benefits__list { margin: 64px 0 0 0; gap: 45px; } .body-ortho-k-lens__key-benefits__list > li { padding: 50px 53px 53px; } .body-ortho-k-lens__key-benefits__list-top { display: grid; grid-template-columns: 150px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .body-ortho-k-lens__key-benefits__list-title { text-align: left; } } .body-ortho-k-lens__recommended { margin-top: 70px; } .body-ortho-k-lens__recommended .base-ortho-k-lens__title { white-space: nowrap; } .body-ortho-k-lens__recommended__list { margin: 38px 0 48px; padding-left: 0; list-style-type: none; } .body-ortho-k-lens__recommended__list > li { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 13px; } .body-ortho-k-lens__recommended__list > li::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: #f7f9fc url("https://static.lenskart.com/media/owndays/img/ortho-k-lens/icon-check.svg") center/15px auto no-repeat; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin: 7px 18px 0 0; } .body-ortho-k-lens__recommended__list > li + li { margin-top: 25px; } .body-ortho-k-lens__recommended__left-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; text-align: left; } .body-ortho-k-lens__recommended__link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding-top: 15px; font-family: "Noto Sans", sans-serif; font-weight: 400; font-size: 15px; color: #0094c8 !important; text-decoration: underline; position: relative; } .body-ortho-k-lens__recommended__link::after { content: ""; display: inline-block; width: 16px; height: 21px; background-image: url("https://static1.lenskart.com/owndays/img/icons/pdf.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .body-ortho-k-lens__recommended__link:hover::after { opacity: 0.5; } @media (min-width: 768px) { .body-ortho-k-lens__recommended__content { display: grid; grid-template-columns: 1fr auto; gap: 40px; } .body-ortho-k-lens__recommended__list { margin: 0 0 91px; } .body-ortho-k-lens__recommended__list > li { font-size: 15px; } } @media (min-width: 1024px) { .body-ortho-k-lens__recommended { margin-top: 120px; } .body-ortho-k-lens__recommended__content { grid-template-columns: 1fr 1fr; gap: 0; } .body-ortho-k-lens__recommended__list > li::before { content: ""; width: 38px; height: 38px; } } .body-ortho-k-lens__treatment-process { margin-top: 70px; } @media (min-width: 768px) { .body-ortho-k-lens__treatment-process { margin-top: 130px; } } @media (min-width: 1024px) { .body-ortho-k-lens__treatment-process .base-ortho-k-lens__container--sub { margin-left: 0; max-width: 100%; } } .body-ortho-k-lens__treatment-process__list { margin: 30px 0 0 0; counter-reset: step-counter; padding-right: 0; list-style-type: none; } @media (max-width: 767px) { .body-ortho-k-lens__treatment-process__list { margin-left: -15px; margin-top: 25px; } } @media (min-width: 768px) { .body-ortho-k-lens__treatment-process__list { margin-top: 64px; } } .body-ortho-k-lens__treatment-process__list > li { display: -webkit-box; display: -ms-flexbox; display: flex; counter-increment: step-counter; cursor: pointer; } .body-ortho-k-lens__treatment-process__list > li:last-child .body-ortho-k-lens__treatment-process__list-step::after { content: none; } .body-ortho-k-lens__treatment-process__list-content { width: 100%; margin-top: -2px; } .body-ortho-k-lens__treatment-process__list--question { position: relative; padding: 40px 20px; border-bottom: 2px solid #413d3d; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: 700 16px/1.5 din-2014, sans-serif; letter-spacing: 0.02em; } @media (max-width: 767px) { .body-ortho-k-lens__treatment-process__list--question { padding: 25px 10px; } } .body-ortho-k-lens__treatment-process__list--question:first-child { border-top: 2px solid #413d3d; } .body-ortho-k-lens__treatment-process__list--question > span:first-child { max-width: 94%; } @media (max-width: 767px) { .body-ortho-k-lens__treatment-process__list--question > span:first-child { max-width: 88%; } } .body-ortho-k-lens__treatment-process__list--question__plus { position: relative; width: 20px; height: 20px; } .body-ortho-k-lens__treatment-process__list--question__plus::before, .body-ortho-k-lens__treatment-process__list--question__plus::after { content: ''; position: absolute; background-color: #999; -webkit-transition: -webkit-transform 0.25s ease-out; transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; } .body-ortho-k-lens__treatment-process__list--question__plus::before { top: 0; left: 50%; width: 1px; height: 100%; } .body-ortho-k-lens__treatment-process__list--question__plus::after { top: 50%; left: 0; width: 100%; height: 1px; margin-top: -1px; } .body-ortho-k-lens__treatment-process__list--question--opened .body-ortho-k-lens__treatment-process__list--question__plus::before { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .body-ortho-k-lens__treatment-process__list--question--opened .body-ortho-k-lens__treatment-process__list--question__plus::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); height: 0; } @media (min-width: 768px) { .body-ortho-k-lens__treatment-process__list--question { font-size: 22px; } } .body-ortho-k-lens__treatment-process__list--answer { background-color: #f7f9fc; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.3s ease-in-out; transition: max-height 0.3s ease-in-out; } .body-ortho-k-lens__treatment-process__list--answer > div { position: relative; padding: 30px 30px 30px 46px; } @media (max-width: 767px) { .body-ortho-k-lens__treatment-process__list--answer > div { padding: 38px 15px 38px 30px; } } .body-ortho-k-lens__treatment-process__list--answer > div sup { font-size: 8px; } .body-ortho-k-lens__treatment-process__list--answer a { display: inline; } .body-ortho-k-lens__treatment-process__list--answer p { font-size: 13px; line-height: 1.9; margin: 0; } .body-ortho-k-lens__treatment-process__list--answer .base-ortho-k-lens__note { margin-top: 13px; } @media (min-width: 768px) { .body-ortho-k-lens__treatment-process__list--answer p { font-size: 14px; } } .body-ortho-k-lens__treatment-process__list-step { position: relative; margin-right: 18px; } .body-ortho-k-lens__treatment-process__list-step::after { content: ""; position: absolute; left: 50%; top: 9px; bottom: -9px; border-left: 2px solid #dedede; z-index: -1; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: 0.5s; transition: 0.5s; } .body-ortho-k-lens__treatment-process__list-step-inner { font-size: 13px; font-weight: 700 !important; line-height: 1.2; text-align: center; width: 52px; height: 52px; background-color: #dedede; color: #fff; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 3px; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-top: 9px; -webkit-transition: 0.5s; transition: 0.5s; } .body-ortho-k-lens__treatment-process__list-step-inner::before { content: "STEP"; font-size: 11px; } .body-ortho-k-lens__treatment-process__list-step-inner::after { content: counter(step-counter); } .body-ortho-k-lens__treatment-process__list-step__active::after { border-left-color: #2e5aa8; } .body-ortho-k-lens__treatment-process__list-step__active .body-ortho-k-lens__treatment-process__list-step-inner { background-color: #2e5aa8; } @media (min-width: 768px) { .body-ortho-k-lens__treatment-process__list-step { margin-right: 38px; } .body-ortho-k-lens__treatment-process__list-step::after { top: 27px; bottom: -27px; border-left-width: 3px; } .body-ortho-k-lens__treatment-process__list-step-inner { font-size: 17px; width: 60px; height: 60px; margin-top: 27px; } .body-ortho-k-lens__treatment-process__list-step-inner::before { font-size: 14px; } } .body-ortho-k-lens__price { margin-top: 70px; } .body-ortho-k-lens__price .base-ortho-k-lens__title { margin-bottom: 19px; } .body-ortho-k-lens__price .base-ortho-k-lens__title + p { font-size: 13px; padding-right: 20px; margin: 0; } .body-ortho-k-lens__price__content { margin-top: 20px; } .body-ortho-k-lens__price__content p { font-size: 15px; font-weight: normal !important; line-height: 2; margin: 0; } .body-ortho-k-lens__price__content ul { list-style-type: none; padding-left: 0; } .body-ortho-k-lens__price__content ul li { position: relative; padding-left: 15px; text-align: left; font-size: 15px; } .body-ortho-k-lens__price__content ul li::before { content: "*"; position: absolute; left: 0; } @media (min-width: 768px) { .body-ortho-k-lens__price .base-ortho-k-lens__title + p { font-size: 15px; } .body-ortho-k-lens__price__content ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (min-width: 1024px) { .body-ortho-k-lens__price { display: grid; grid-template-columns: auto 676px; margin-top: 130px; padding-bottom: 138px; } .body-ortho-k-lens__price .base-ortho-k-lens__title + p { max-width: 310px; } } @media (min-width: 1296px) { .body-ortho-k-lens__price { grid-template-columns: auto 766px; } } .body-ortho-k-lens__stores { margin-top: 70px; padding-bottom: 70px; } .body-ortho-k-lens__stores .base-ortho-k-lens__title { margin-bottom: 19px; } .body-ortho-k-lens__stores .base-ortho-k-lens__title + p { font-size: 13px; padding-right: 20px; margin: 0; } .body-ortho-k-lens__stores__list { list-style-type: none; padding-left: 0; } @media (max-width: 1023px) { .body-ortho-k-lens__stores__list > li { margin-top: 41px; } } .body-ortho-k-lens__stores__title { font: 700 15px/1.6 "Noto Sans", sans-serif; font-weight: 700 !important; letter-spacing: 0.02em; margin: 20px 0 28px; } .body-ortho-k-lens__stores .base-ortho-k-lens__note { margin-top: 35px; } @media (min-width: 768px) { .body-ortho-k-lens__stores .base-ortho-k-lens__title + p { font-size: 15px; } .body-ortho-k-lens__stores__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .body-ortho-k-lens__stores__list > li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-ortho-k-lens__stores__list .base-ortho-k-lens__button { margin-top: auto; } } @media (min-width: 1024px) { .body-ortho-k-lens__stores { margin-top: 0; display: grid; grid-template-columns: auto 676px; padding-bottom: 138px; } .body-ortho-k-lens__stores .base-ortho-k-lens__title + p { max-width: 310px; } .body-ortho-k-lens__stores__list { gap: 36px; } } @media (min-width: 1296px) { .body-ortho-k-lens__stores { grid-template-columns: auto 766px; } } .body-ortho-k-lens__guide { position: relative; padding: 80px 0; } .body-ortho-k-lens__guide::before { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; bottom: 0; background-color: #2e5aa8; z-index: -1; } .body-ortho-k-lens__guide__title .base-ortho-k-lens__title { color: #fff; margin-bottom: 35px; } .body-ortho-k-lens__guide__title h3 { font-size: 13px; font-weight: bold !important; line-height: 21px; color: #fff; text-align: center; margin: 0 0 40px; } .body-ortho-k-lens__guide__frame__slide { margin-bottom: 50px; } .body-ortho-k-lens__guide__row { position: relative; margin-top: 50px; } .body-ortho-k-lens__guide__row:not(:first-child) { padding: 50px 0 0; } .body-ortho-k-lens__guide__row:not(:first-child)::after { content: ""; background: url("https://static.lenskart.com/media/owndays/img/ortho-k-lens/dot-white.svg") repeat-x left center/contain; height: 5px; position: absolute; left: -27px; right: -27px; top: 0; } .body-ortho-k-lens__guide__row__title { margin-bottom: 30px; } .body-ortho-k-lens__guide__row__title__main-title { font-size: 18px; font-weight: bold !important; max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; color: #fff; padding: 10px 25px; border: 1px solid #fff; border-radius: 50px; margin: 0 auto; } .body-ortho-k-lens__guide__row__title__main-title h4 { margin: 0; } .body-ortho-k-lens__guide__row__title__sub-title { text-align: center; } .body-ortho-k-lens__guide__row__title__sub-title p { color: #fff; font-size: 14px; font-weight: 200 !important; margin: 15px 0 0 0; } .body-ortho-k-lens__guide__slide { margin-left: -27px; padding-left: 27px; position: relative; overflow: hidden; } .body-ortho-k-lens__guide__slide > div { overflow: visible; } @media (max-width: 767px) { .body-ortho-k-lens__guide__slide { margin-right: -27px; } } .body-ortho-k-lens__guide__slide__item { width: 250px !important; margin-right: 15px; list-style-type: none; } @media (max-width: 1023px) { .body-ortho-k-lens__guide__slide__item { width: 220px !important; } } .body-ortho-k-lens__guide__slide__img-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 30px; background-color: #fff; width: 250px; height: 250px; position: relative; } @media (max-width: 1023px) { .body-ortho-k-lens__guide__slide__img-box { width: 220px; height: 220px; } } .body-ortho-k-lens__guide__slide__order { position: absolute; top: 15px; left: 20px; } .body-ortho-k-lens__guide__slide__order span { color: #2e5aa8; font-weight: bold !important; font: 600 25px/1 din-2014, sans-serif !important; } .body-ortho-k-lens__guide__slide__detail { margin-top: 20px; } .body-ortho-k-lens__guide__slide__detail p { color: #fff; font-size: 14px; line-height: 23px; margin: 0; } .body-ortho-k-lens__guide__clean__list { list-style-type: none; padding-left: 0; margin: 0; } .body-ortho-k-lens__guide__clean__item { background-color: #fff; border-radius: 30px; padding: 40px 20px; } .body-ortho-k-lens__guide__clean__item__main-title-card { font-size: 25px; font-weight: bold !important; color: #2e5aa8; text-align: center; margin: 0; } .body-ortho-k-lens__guide__clean__item__img-clean { margin-top: 25px; margin-left: auto; margin-right: auto; } .body-ortho-k-lens__guide__clean__item__img-clean img { display: block; width: 100%; max-height: 136px; margin: 0 auto; } .body-ortho-k-lens__guide__clean__item__img-clean .weekly-img { width: 100%; max-height: 128px; margin: 0 auto; } .body-ortho-k-lens__guide__clean__item__detail { margin-top: 25px; } .body-ortho-k-lens__guide__clean__item__detail p { color: #413d3d !important; font-size: 14px !important; line-height: 26px !important; margin: 0; } @media (max-width: 768px) { .body-ortho-k-lens__guide__clean__item__detail { font-size: 13px !important; } } @media (max-width: 767px) { .body-ortho-k-lens__guide__clean li + li { margin-top: 24px; } } @media (min-width: 768px) { .body-ortho-k-lens__guide { padding: 130px 0; } .body-ortho-k-lens__guide__frame__slide { margin-top: 60px; } .body-ortho-k-lens__guide__row { display: grid; grid-template-columns: 200px auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 0; } .body-ortho-k-lens__guide__row:first-child .body-ortho-k-lens__guide__row__slide { margin-top: 0; padding-top: 0; } .body-ortho-k-lens__guide__row:first-child .body-ortho-k-lens__guide__row__slide::after { content: none; } .body-ortho-k-lens__guide__row:not(:first-child) { padding: 0; } .body-ortho-k-lens__guide__row:not(:first-child)::after { content: none; } .body-ortho-k-lens__guide__row__title { margin-bottom: 0; } .body-ortho-k-lens__guide__row__title h4 { margin-right: inherit; margin-left: inherit; } .body-ortho-k-lens__guide__row__title__group { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } .body-ortho-k-lens__guide__row__sub-title p { margin-top: 10px; } .body-ortho-k-lens__guide__title h3 { font-size: 19px; margin: 60px 0 30px; } .body-ortho-k-lens__guide__clean__row { max-width: 924px; width: 100%; margin-left: auto; margin-right: auto; } .body-ortho-k-lens__guide__clean__row ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 30px; } .body-ortho-k-lens__guide__clean__row ul li { width: 47.402%; } .body-ortho-k-lens__guide__clean__row ul li__detail p { font-size: 14px; line-height: 26px; } .body-ortho-k-lens__guide__clean__row ul li + li { margin-top: 0; } } @media (min-width: 1296px) { .body-ortho-k-lens__guide__row { grid-template-columns: 250px auto; } } .footer-ortho-k-lens__faq { margin-top: 70px; } @media (max-width: 1023px) { .footer-ortho-k-lens__faq { margin-bottom: 70px; } } @media (max-width: 1023px) { .footer-ortho-k-lens__faq .base-ortho-k-lens__title { text-align: center; } } .footer-ortho-k-lens__faq__q-a__accordion { margin-top: 40px; padding-left: 0; list-style-type: none; } .footer-ortho-k-lens__faq__q-a__accordion > li { border-bottom: 3px solid #000; } .footer-ortho-k-lens__faq__q-a__accordion > li:first-child { border-top: 3px solid #000; } .footer-ortho-k-lens__faq__q-a__accordion__title { padding: 23px 14px; cursor: pointer; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .footer-ortho-k-lens__faq__q-a__accordion__content { height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; transition: height 0.35s ease; } .footer-ortho-k-lens__faq__q-a__q-title { font-size: 13px; letter-spacing: 0.06em; line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; font-weight: 700 !important; font-family: "Noto Sans JP", sans-serif; margin: 0; } @media (max-width: 767px) { .footer-ortho-k-lens__faq__q-a__q-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .footer-ortho-k-lens__faq__q-a__q-title::before { content: 'Q'; font: 700 15px/1 "Outfit", sans-serif; min-width: 28px; height: 30px; background-color: #000; color: #fff; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; letter-spacing: .06em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer-ortho-k-lens__faq__q-a__a-inner { font-size: 15px; font-weight: 500 !important; letter-spacing: 0.06em; line-height: 2.15; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; padding: 23px 14px; background-color: #f8f8f8; } .footer-ortho-k-lens__faq__q-a__a-inner::before { content: 'A'; display: -webkit-box; display: -ms-flexbox; display: flex; font: 700 15px/1 "Outfit", sans-serif; min-width: 28px; height: 30px; background-color: #fff; border: 1px solid #000; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: .06em; } .footer-ortho-k-lens__faq__q-a__a-inner p { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0; font-weight: normal !important; line-height: 2; } @media (min-width: 768px) { .footer-ortho-k-lens__faq__q-a__accordion__title { padding: 35px 21px; } .footer-ortho-k-lens__faq__q-a__q-title { font-size: 15px; -webkit-column-gap: 21px; -moz-column-gap: 21px; column-gap: 21px; } .footer-ortho-k-lens__faq__q-a__a-inner { font-size: 13px; -webkit-column-gap: 21px; -moz-column-gap: 21px; column-gap: 21px; padding: 31px 21px; } } .footer-ortho-k-lens__faq__link-color { color: #2e5aa8; font-weight: bold !important; text-decoration: underline; } @media (min-width: 1024px) { .footer-ortho-k-lens__faq { display: grid; margin-top: 130px; padding-bottom: 138px; grid-template-columns: auto 843px; } .footer-ortho-k-lens__faq__title { min-width: 277px; font-size: 51px !important; text-align: left; } .footer-ortho-k-lens__faq__q-a__accordion { margin-top: 0px; } .footer-ortho-k-lens__faq__link-color:hover, .footer-ortho-k-lens__faq__link-color:active, .footer-ortho-k-lens__faq__link-color:visited, .footer-ortho-k-lens__faq__link-color:focus { color: #2e5aa8; } } .footer-ortho-k-lens__contact-lenses { position: relative; padding: 70px 0; margin-bottom: 120px; } .footer-ortho-k-lens__contact-lenses:before { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; bottom: 0; background-color: #f7f9fc; z-index: -1; } .footer-ortho-k-lens__contact-lenses__title h3 { font: 700 28px/1.3 din-2014, sans-serif !important; letter-spacing: .06em !important; line-height: 34px !important; text-align: center; margin: 0; } .footer-ortho-k-lens__contact-lenses__list { margin-top: 40px; } .footer-ortho-k-lens__contact-lenses__list ul { display: grid; gap: 10px; padding-left: 0; margin: 0; list-style-type: none; } .footer-ortho-k-lens__contact-lenses__list ul li:hover a img { opacity: 0.6; -webkit-transition: 0.5s; transition: 0.5s; } @media (min-width: 500px) { .footer-ortho-k-lens__contact-lenses__list ul { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .footer-ortho-k-lens__contact-lenses { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer-ortho-k-lens__contact-lenses__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .footer-ortho-k-lens__contact-lenses__title h3 { letter-spacing: .045em !important; line-height: 1.3 !important; text-align: left; font-size: clamp(35.2px, 3.34vw, 53.44px) !important; } .footer-ortho-k-lens__contact-lenses__list { width: 66%; margin-top: 0; } } .base-ortho-k-lens { font-family: "Noto Sans", sans-serif; font-weight: 400 !important; color: #413d3d; letter-spacing: 0.02em; line-height: 2.2; } @media (max-width: 430px) { .base-ortho-k-lens { overflow-x: hidden; } } .base-ortho-k-lens__container { margin-left: auto; margin-right: auto; padding-left: 0; max-width: 1340px; } @media (max-width: 1450px) { .base-ortho-k-lens__container { max-width: 1220px; } } @media (max-width: 1295px) { .base-ortho-k-lens__container { padding-right: 27px; padding-left: 27px; max-width: 1174px; } } @media (max-width: 1176px) { .base-ortho-k-lens__container { max-width: 100%; } } @media (max-width: 767px) { .base-ortho-k-lens__container { padding-right: 27px; padding-left: 27px; max-width: 1174px; } } .base-ortho-k-lens__container--sub { max-width: 924px; margin-left: auto; margin-right: auto; } .base-ortho-k-lens__title { font: 700 28px/1.2 din-2014, sans-serif; font-weight: 700 !important; color: #413d3d; letter-spacing: 0.05em; margin: 0; } .base-ortho-k-lens__title--center { text-align: center; } @media (min-width: 768px) { .base-ortho-k-lens__title { font-size: 40px; } } @media (min-width: 1024px) { .base-ortho-k-lens__title { font-size: 51px; } } .base-ortho-k-lens__button { font: 700 12px/1.4 "Noto Sans", sans-serif; letter-spacing: 0.02em; color: #2e5aa8; height: 75px; border: 3px solid #2e5aa8; border-radius: 4em; padding: 0 16px 0 20px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; width: 100%; max-width: 418px; background-color: #f7f9fc; position: relative; } .base-ortho-k-lens__button::before { content: ''; position: absolute; right: 16px; width: 43px; height: 43px; background-color: #2e5aa8; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: 0.5s; transition: 0.5s; } .base-ortho-k-lens__button--white { background-color: #fff; } .base-ortho-k-lens__button--down, .base-ortho-k-lens__button--right { position: relative; } .base-ortho-k-lens__button--down::after, .base-ortho-k-lens__button--right::after { content: ""; position: absolute; top: calc(50% - 8px); right: 29.5px; width: 15px; height: 15px; background-image: url("https://static.lenskart.com/media/owndays/img/ortho-k-lens/chevron-down-solid-white.svg"); background-size: cover; } .base-ortho-k-lens__button--right::after { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .base-ortho-k-lens__button:hover, .base-ortho-k-lens__button:active, .base-ortho-k-lens__button:visited, .base-ortho-k-lens__button:focus { text-decoration: none; } @media (min-width: 768px) { .base-ortho-k-lens__button { font-size: 15px; } } @media (min-width: 1024px) { .base-ortho-k-lens__button { padding: 0 16px 0 32px; } .base-ortho-k-lens__button:hover { color: #fff; background-color: #2e5aa8; -webkit-transition: 0.5s; transition: 0.5s; } .base-ortho-k-lens__button:hover::before { background-color: #fff; } .base-ortho-k-lens__button:hover::after { background-image: url("https://static.lenskart.com/media/owndays/img/ortho-k-lens/chevron-down-solid-blue.svg"); } } .base-ortho-k-lens__note { font-size: 11px; line-height: 1.8; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; } .base-ortho-k-lens__note::before { content: "*"; margin-right: 8px; } .od-not-found { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; width: 100%; padding-bottom: 140px; } .od-not-found-img { height: 40vh; } .od-not-found-img img { height: 100%; } .od-not-found__recently-viewed { width: 100%; max-width: 1600px; padding: 0 100px; margin: 0 auto; } .od-not-found-info { text-align: center; } .od-not-found-info__title { margin-top: 40px; color: #444; text-align: center; font-size: 46px; font-style: normal; font-weight: 400; line-height: normal; } .od-not-found-info__description { margin-top: 40px; color: rgba(68, 68, 68, .75); text-align: center; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; } .od-not-found-info__action { margin-top: 40px; color: #546073; text-align: center; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; } .od-not-found-info__action-link { -webkit-text-decoration-line: underline; text-decoration-line: underline; color: #546073; cursor: pointer; } .od-pdp-rv { margin-top: 32px; margin-bottom: 32px; } .od-pdp-rv .slick-prev { display: none; background: none !important; } .od-pdp-rv .slick-next { display: none; background: none !important; } .od-pdp-rv__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 32px; border-bottom: 1px solid rgba(68, 68, 68, 0.18824); padding-bottom: 16px; } .od-pdp-rv__top__title { font-family: 'Founders Grotesk', sans-serif; font-size: 24px; color: #555; } .od-pdp-rv__top .od-pdp-rv__slider__prev { max-width: 32px; margin-right: 16px; cursor: pointer; } .od-pdp-rv__top .od-pdp-rv__slider__next { max-width: 32px; margin-left: 16px; cursor: pointer; } .od-pdp-rv__bottom { margin-top: 32px; text-align: center; } .od-pdp-rv__range__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .od-pdp-rv .slick-slide { padding-right: 10px !important; padding-left: 10px !important; } .owndays-product-card { background-color: white; padding: 20px 10px; position: relative; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .owndays-product-card__market-and-lenskart-price { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; } .owndays-product-card__market-and-lenskart-price-mp { color: #999; text-decoration: line-through; } .owndays-product-card__wishlist__wrapper { width: 56px; height: 55px; position: absolute; top: 0; right: 11.5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: 1px solid #d9d9d9 !important; z-index: 99; border-radius: 56px; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .owndays-product-card__wishlist { display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: stretch; align-self: stretch; position: relative; margin: auto; } .owndays-product-card__image__wrapper { overflow: hidden; } .owndays-product-card__image { width: 100%; aspect-ratio: 480/301; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.2s ease; transition: 0.2s ease; overflow: hidden; -o-object-fit: cover; object-fit: cover; cursor: pointer; } @media (max-width: 720px) { .owndays-product-card__image { -webkit-transform: scale(1); transform: scale(1); height: 100%; } } .owndays-product-card__desc { position: relative; } .owndays-product-card__title, .owndays-product-card__sku, .owndays-product-card__price { font-family: "Founders Grotesk", sans-serif; margin-bottom: 0; } .owndays-product-card__title { color: black; font-size: 20px; font-style: normal; font-weight: 400; line-height: 26px; letter-spacing: 0.24px; } .owndays-product-card__sku { margin-top: 11px; color: #7c7c7c; font-size: 14px; font-style: normal; font-weight: 400; line-height: 16.8px; letter-spacing: 0.14px; text-transform: uppercase; } .owndays-product-card__price { color: black; font-size: 20px; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: 0.2px; padding: 16px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .owndays-product-card__price--sale { color: #bf0000; } .owndays-product-card__color__options { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; width: 100%; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .owndays-product-card__color__options__remaining { font-family: 'Founders Grotesk', sans-serif; color: #444; } .owndays-product-card__color__options__item__wrapper { padding: 5px; width: 38px; height: 38px; border-radius: 50%; position: relative; -webkit-transition: 0.5s ease; transition: 0.5s ease; } .owndays-product-card__color__options__item__wrapper:first-child:not(:has(~ :hover)) { -webkit-box-shadow: inset 0 0 0 1px #999; box-shadow: inset 0 0 0 1px #999; } .owndays-product-card__color__options__item__wrapper:hover { -webkit-box-shadow: inset 0 0 0 1px #999; box-shadow: inset 0 0 0 1px #999; } .owndays-product-card__color__options__item__wrapper__pure-outline { width: calc(100% + 8px); height: calc(100% + 8px); position: absolute; top: -4px; left: -4px; outline: 1px outset; border-radius: 50%; -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 0; } :hover > .owndays-product-card__color__options__item__wrapper__pure-outline { -webkit-transition: opacity 0.3s ease 0.3s; transition: opacity 0.3s ease 0.3s; opacity: 1; } .owndays-product-card__color__options__item { width: 100%; height: 100%; border-radius: 50%; cursor: pointer; border: 1px solid #444; background-size: cover !important; } .owndays-product-card__sale-tag { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; border: 1px solid transparent; padding: 4px 8px; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.36px; } .owndays-product-card__sale-tag--red { border-color: #bf0000; color: #bf0000; } .owndays-product-card__v2 { padding: 20px; } .owndays-product-card__v2 .owndays-product-card__wishlist__wrapper { border: none; } .od_black_friday_sale { padding: 3px 10px; background-color: #b47e00; color: white; } @charset "UTF-8"; .description-policy__container { padding: 0 24px; margin: 0 auto; } @media (min-width: 430px) { .description-policy__container { padding: 0 40px; } } @media (min-width: 768px) { .description-policy__container { padding: 0 100px; } } @media (min-width: 1024px) { .description-policy__container { padding: 0 140px; } } @media (min-width: 1296px) { .description-policy__container { padding: 0 200px; } } .description-policy__header { padding: 40px 0 24px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; } .description-policy__header__title, .description-policy__header__subtitle { font-style: normal; text-align: center; margin: 0; } .description-policy__header__title { font-family: "Founders Grotesk", sans-serif; font-size: 28px; font-weight: 500 !important; line-height: 30.8px; color: #000; } .description-policy__header__subtitle { font-family: "Open Sans", sans-serif; font-size: 18px; font-weight: 400 !important; line-height: 21.6px; color: #666; position: relative; padding-left: 18px; } .description-policy__header__subtitle::before { content: '※'; font-family: "Open Sans", sans-serif; font-size: 24px; color: #666; position: absolute; left: 0; top: -3px; } @media (min-width: 768px) { .description-policy__header { padding: 80px 0 48px 0; } .description-policy__header__title { font-size: 48px; line-height: normal; } .description-policy__header__subtitle { font-size: 24px; line-height: 32px; padding-left: 24px; } .description-policy__header__subtitle::before { font-size: 29px; } } .description-policy__title, .description-policy__message { font-family: "Founders Grotesk", sans-serif; font-style: normal; color: #000; } .description-policy__title { font-size: 16px; font-style: normal; font-weight: 700 !important; padding: 16px 0; margin: 0; } @media (min-width: 768px) { .description-policy__title { font-size: 24px; font-weight: 500 !important; padding: 40px 0 16px 0; } } .description-policy__message { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 400 !important; line-height: 32px; margin-bottom: 8px; } @media (min-width: 768px) { .description-policy__message { font-size: 20px; line-height: 40px; } } .description-policy__link { cursor: pointer; color: #0094c8; } .form-policy__container { padding: 16px 24px 40px 24px; margin: 0 auto; } @media (min-width: 430px) { .form-policy__container { padding: 16px 40px 40px 40px; } } @media (min-width: 768px) { .form-policy__container { padding: 16px 100px 40px 100px; } } @media (min-width: 1024px) { .form-policy__container { padding: 16px 140px 40px 140px; } } @media (min-width: 1296px) { .form-policy__container { padding: 40px 200px 80px 200px; } } .form-policy__box { border-radius: 6px; border: 1px solid #EBEDF3; padding: 16px 24px; } .form-policy__box:first-child { margin-bottom: 24px; } @media (min-width: 1076px) { .form-policy__box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .form-policy__question, .form-policy__name { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 400 !important; line-height: 32px; color: #000; margin: 0; } @media (min-width: 768px) { .form-policy__question, .form-policy__name { font-size: 20px; line-height: 40px; } } .form-policy__agree-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .form-policy__list { list-style-type: none; margin: 14px 0 0 0; padding: 0; display: grid; grid-template-columns: 1fr; row-gap: 26px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1076px) { .form-policy__list { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 22px; } } .form-policy__item { list-style-type: none; display: grid; grid-template-columns: 24px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } .form-policy__radio, .form-policy__checkbox { width: 24px; height: 24px; margin: 0 !important; padding: 0 !important; cursor: pointer; } .form-policy__radio:checked, .form-policy__checkbox:checked { accent-color: #000; } .form-policy__confirm-button { width: 100%; max-width: 377px; height: 50px; margin: 24px auto 0 auto; border-radius: 30px; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-style: normal; font-weight: 400 !important; line-height: 30px; padding: 0 24px; background-color: #546073; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: none; } .form-policy__confirm-button--inactive { cursor: not-allowed; opacity: 0.5; } .form-policy__confirm-button--active { cursor: pointer; } @media (min-width: 430px) { .form-policy__confirm-button { max-width: 320px; } } @media (min-width: 768px) { .form-policy__confirm-button { margin: 48px auto 0 auto; } } .form-policy-with-email__container { padding: 16px 24px 40px 24px; margin: 0 auto; } @media (min-width: 430px) { .form-policy-with-email__container { padding: 16px 40px 40px 40px; } } @media (min-width: 768px) { .form-policy-with-email__container { padding: 16px 100px 40px 100px; } } @media (min-width: 1024px) { .form-policy-with-email__container { padding: 16px 140px 40px 140px; } } @media (min-width: 1296px) { .form-policy-with-email__container { padding: 40px 200px 80px 200px; } } .form-policy-with-email__box { border-radius: 6px; border: 1px solid #EBEDF3; padding: 16px 24px; } .form-policy-with-email__box:first-child { margin-bottom: 24px; } @media (min-width: 1076px) { .form-policy-with-email__box { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .form-policy-with-email__question, .form-policy-with-email__name { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 400 !important; line-height: 32px; color: #000; margin: 0; } @media (min-width: 768px) { .form-policy-with-email__question, .form-policy-with-email__name { font-size: 20px; line-height: 40px; } } .form-policy-with-email__agree-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .form-policy-with-email__list { list-style-type: none; margin: 14px 0 0 0; padding: 0; display: grid; grid-template-columns: 1fr; row-gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1076px) { .form-policy-with-email__list { margin-top: 0; row-gap: 16px; } } .form-policy-with-email__item { list-style-type: none; display: grid; grid-template-columns: 24px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } .form-policy-with-email__radio, .form-policy-with-email__checkbox { width: 24px; height: 24px; margin: 0 !important; padding: 0 !important; cursor: pointer; } .form-policy-with-email__radio:checked, .form-policy-with-email__checkbox:checked { accent-color: #000; } .form-policy-with-email__input { width: 100%; height: 48px; padding: 14px; background-color: #F4F4F4; border: 0; font-family: "Founders Grotesk", sans-serif; color: #333; font-size: 14px; font-style: normal; font-weight: 300; line-height: 20px; letter-spacing: 0.14px; margin-top: -8px; } @media (min-width: 1076px) { .form-policy-with-email__input { width: 420px; height: 48px; padding: 14px 16px; margin-top: 0; } } .form-policy-with-email__input::-webkit-input-placeholder { font-family: "Founders Grotesk", sans-serif; color: #999; } .form-policy-with-email__input::-moz-placeholder { font-family: "Founders Grotesk", sans-serif; color: #999; } .form-policy-with-email__input::-ms-input-placeholder { font-family: "Founders Grotesk", sans-serif; color: #999; } .form-policy-with-email__input::placeholder { font-family: "Founders Grotesk", sans-serif; color: #999; } .form-policy-with-email__confirm-button { width: 100%; max-width: 377px; height: 50px; margin: 24px auto 0 auto; border-radius: 30px; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-style: normal; font-weight: 400 !important; line-height: 30px; padding: 0 24px; background-color: #546073; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 0; } .form-policy-with-email__confirm-button--inactive { cursor: not-allowed; opacity: 0.5; } .form-policy-with-email__confirm-button--active { cursor: pointer; } @media (min-width: 430px) { .form-policy-with-email__confirm-button { max-width: 320px; } } @media (min-width: 768px) { .form-policy-with-email__confirm-button { margin: 48px auto 0 auto; } } .base-result-submit__container { width: 100%; height: auto; padding: 80px 28px; margin: 0 auto; } @media (min-width: 768px) { .base-result-submit__container { padding: 131px 28px; } } .base-result-submit__result__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .base-result-submit__result__container img { width: 80px; height: 80px; margin-bottom: 24px; } .base-result-submit__result__container h1, .base-result-submit__result__container p { font-family: "Founders Grotesk", sans-serif; font-style: normal; font-weight: 500 !important; margin: 0; } .base-result-submit__result__container h1 { font-size: 22px; margin-bottom: 16px; color: #070303; } .base-result-submit__result__container p { font-size: 15px; font-weight: 500; line-height: 22.5px; color: #666666; } @media (min-width: 768px) { .base-result-submit__result__container img { width: 112px; height: 112px; } .base-result-submit__result__container h1 { font-size: 48px; line-height: 58px; } .base-result-submit__result__container p { font-size: 24px; line-height: 36px; } } .header-eye-camp { position: relative; } .header-eye-camp__title { width: 100%; max-width: 762px; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); background-color: transparent; padding: 0 10%; text-align: center; color: white; z-index: 2; } .header-eye-camp__title h1 { font-family: "Founders Grotesk", sans-serif; font-size: 40px; font-weight: 400 !important; line-height: 1; margin: 0; } .header-eye-camp__title h1 span { display: block; font-size: 13px; margin-top: 5px; letter-spacing: 1px; } @media (min-width: 768px) { .header-eye-camp__title { width: 80%; max-width: 1152px; margin: 0 auto; } .header-eye-camp__title h1 span { margin-top: 20px; } } .body-eye-camp__message { width: 100%; height: auto; max-width: 1152px; margin: 0 auto; padding: 0 5%; } .body-eye-camp__message--logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 7.5px; padding: 20px 15px 30px; border: 1px solid black; text-align: center; } .body-eye-camp__message--logo img { width: 48px; height: 48px; margin: 0 auto; } .body-eye-camp__message--logo h2 { font-family: "Founders Grotesk", sans-serif; font-size: 24px; font-weight: 400 !important; margin: 10px 0 0 0; line-height: 1.6; letter-spacing: 1px; color: black; } .body-eye-camp__message--logo h2 span { display: block; font-size: 13px; font-weight: 700 !important; margin-top: 10px; } .body-eye-camp__message--text { margin: 25px 7.5px 0; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .body-eye-camp__message--text h3, .body-eye-camp__message--text p { font-family: "Founders Grotesk", sans-serif; color: black; } .body-eye-camp__message--text h3 { font-size: 16px; font-weight: 700 !important; line-height: 1.8; margin: 0; } .body-eye-camp__message--text p { margin: 20px 0 0 0; font-size: 15px; font-weight: normal !important; letter-spacing: 1px; line-height: 2; } .body-eye-camp__message--image { width: 100%; max-width: 406px; -ms-flex-preferred-size: auto; flex-basis: auto; height: auto; padding-right: 7.5px; padding-left: 7.5px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .body-eye-camp__message--image img { width: 100%; height: auto; display: block; } @media (min-width: 768px) { .body-eye-camp__message { padding-left: 0; padding-right: 0; } .body-eye-camp__message--logo { width: 100%; max-width: 406px; height: 406px; margin: 0; } .body-eye-camp__message--logo img { width: 96px; height: 96px; margin: 0 auto; } .body-eye-camp__message--logo h2 { font-size: 24px; margin-top: 30px; } .body-eye-camp__message--text { margin: 0 0 0 60px; } .body-eye-camp__message--image { margin-left: 60px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .body-eye-camp__eye-camp { position: relative; } .body-eye-camp__eye-camp__title { background-color: black; padding: 32px 23px; width: 162px; max-width: 762px; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); text-align: center; color: white; margin: 0 auto; } .body-eye-camp__eye-camp__title h3 { width: 116px; height: auto; font-family: "Founders Grotesk", sans-serif; font-size: 24px; font-weight: 700 !important; line-height: 1; letter-spacing: 1px; margin: 0; } .body-eye-camp__eye-camp__title h3 span { display: block; font-size: 13px; font-weight: 400 !important; line-height: 1.6; margin-top: 6px; } @media (min-width: 768px) { .body-eye-camp__eye-camp__message { margin-left: 0 !important; } } .footer-eye-camp__history { border-top: 1px solid #e3e3e3; padding: 40px 0 60px; } @media (min-width: 768px) { .footer-eye-camp__history { padding: 90px 0 120px; } } .footer-eye-camp__history__container { width: 80%; height: auto; max-width: 1152px; margin: 0 auto; } .footer-eye-camp__history__title { font-family: "Founders Grotesk", sans-serif; font-size: 24px; font-weight: 300 !important; text-align: center; line-height: 1.6; padding: 0; margin-bottom: 0; } @media (min-width: 768px) { .footer-eye-camp__history__title { font-size: 26px; line-height: 1.9; } } .footer-eye-camp__history__list { list-style-type: none; margin: 20px -16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; } .footer-eye-camp__history__list li > a { -webkit-transition: 0.5s; transition: 0.5s; } .footer-eye-camp__history__list li > a:hover, .footer-eye-camp__history__list li > a:active, .footer-eye-camp__history__list li > a:visited, .footer-eye-camp__history__list li > a:focus { text-decoration: none; } @media (min-width: 768px) { .footer-eye-camp__history__list { margin: 50px -10px 0; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } } @media (min-width: 1024px) { .footer-eye-camp__history__list { grid-template-columns: 1fr 1fr 1fr 1fr; } } .footer-eye-camp__history__card, .footer-eye-camp__history__card-no-more { position: relative; display: block; width: 100%; height: 100%; background-color: #f4f4f4; } .footer-eye-camp__history__card::before, .footer-eye-camp__history__card::after, .footer-eye-camp__history__card-no-more::before, .footer-eye-camp__history__card-no-more::after { content: ""; display: block; position: absolute; } .footer-eye-camp__history__card::before, .footer-eye-camp__history__card-no-more::before { -webkit-transition: all .5s ease; transition: all .5s ease; background-color: rgba(0, 0, 0, .4); top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 2; } .footer-eye-camp__history__card img, .footer-eye-camp__history__card-no-more img { display: block; width: 100%; height: auto; border: 1px solid #f4f4f4; } .footer-eye-camp__history__card div, .footer-eye-camp__history__card-no-more div { font-family: "Founders Grotesk", sans-serif; font-size: 16px; text-align: center; line-height: 1.1; padding: 20px 10px; color: black; } .footer-eye-camp__history__card div span, .footer-eye-camp__history__card-no-more div span { font-weight: 700 !important; display: block; padding-right: 0; } .footer-eye-camp__history__card div p, .footer-eye-camp__history__card-no-more div p { font-size: 11px; margin: 4px 0 0 0; } @media (min-width: 768px) { .footer-eye-camp__history__card div span, .footer-eye-camp__history__card-no-more div span { padding-right: 5px; display: inline-block; } } .footer-eye-camp__history__card { position: relative; } .footer-eye-camp__history__card::after { border: 25px solid transparent; border-left: 25px solid #0094c8; right: -25px; bottom: -25px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .footer-eye-camp__history__card--clicked::before, .footer-eye-camp__history__card--clicked img { opacity: 0.6; } @media (min-width: 1024px) { .footer-eye-camp__history__card { cursor: pointer; } .footer-eye-camp__history__card:hover::before, .footer-eye-camp__history__card:hover img { opacity: 0.6; } } .footer-eye-camp__history__plus { position: absolute; right: 5px; bottom: 8px; z-index: 1; width: 10px; height: 10px; } .footer-eye-camp__history__plus::before, .footer-eye-camp__history__plus::after { content: ""; display: block; position: absolute; background-color: white; } .footer-eye-camp__history__plus::before { transition: transform .25s ease-out, -webkit-transform .25s ease-out; top: 0; left: 50%; width: 1px; height: 100%; } .footer-eye-camp__history__plus::after { transition: transform .25s ease-out, -webkit-transform .25s ease-out; margin-top: -1px; top: 50%; left: 0; width: 100%; height: 1px; } .footer-eye-camp__history__icon-search { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); opacity: 0; z-index: 2; color: white; width: 27px !important; height: 27px !important; -webkit-transition: all .5s ease; transition: all .5s ease; border: 0 !important; } .footer-eye-camp__history__icon-search--show { opacity: 1; } @media (min-width: 768px) { .footer-eye-camp__history__icon-search { width: 52px !important; height: 52px !important; } } .footer-eye-camp__history-detail__card-detail { position: relative; width: 100%; height: auto; max-height: 0; background-color: #f4f4f4; grid-column: 1 / span 2; overflow: hidden; opacity: 0; padding: 25px 15px; -webkit-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; } .footer-eye-camp__history-detail__card-detail--show { opacity: 1; } .footer-eye-camp__history-detail__card-detail--hide { opacity: 0; max-height: 0; } @media (min-width: 768px) { .footer-eye-camp__history-detail__card-detail { grid-column: 1 / span 3; } .footer-eye-camp__history-detail__card-detail--show { padding: 60px 50px 50px; } } @media (min-width: 1024px) { .footer-eye-camp__history-detail__card-detail { grid-column: 1 / span 4; } } .footer-eye-camp__history-detail__close { width: 30px; height: 30px; position: absolute; top: 15px; right: 15px; cursor: pointer; } .footer-eye-camp__history-detail__close svg { fill: #999; } .footer-eye-camp__history-detail__header { font-family: "Founders Grotesk", sans-serif; font-size: 16px; line-height: 1.3; text-align: center; color: black; font-weight: 400 !important; margin: 0 0 20px 0; } .footer-eye-camp__history-detail__header--country { display: block; font-weight: 700 !important; } .footer-eye-camp__history-detail__header--date { margin-top: 3px; font-size: 14px; font-weight: 400 !important; display: block; } @media (min-width: 768px) { .footer-eye-camp__history-detail__header { font-size: 20px; margin: 0 0 30px 0; } .footer-eye-camp__history-detail__header--country { display: inline-block; padding-right: 10px; } .footer-eye-camp__history-detail__header--date { margin-top: 6px; } } .footer-eye-camp__history-detail__message__text { font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; letter-spacing: 1px; padding-bottom: 25px; color: black; text-align: left; margin: 0; } .footer-eye-camp__history-detail__opinions { display: grid; grid-template-columns: 1fr; gap: 30px; list-style-type: none; margin: 20px 0 0 0; border-top: 2px dotted black; padding: 40px 0 20px 0; } .footer-eye-camp__history-detail__opinions__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 17px; margin-bottom: 15px; } .footer-eye-camp__history-detail__opinions__header img { width: 60px; height: auto; border-radius: 100%; } .footer-eye-camp__history-detail__opinions__header div h4, .footer-eye-camp__history-detail__opinions__header div p { margin: 0; font-family: "Founders Grotesk", sans-serif; color: black; } .footer-eye-camp__history-detail__opinions__header div h4 { font-weight: 700 !important; font-size: 17px; line-height: 1.5; } .footer-eye-camp__history-detail__opinions__header div p { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 11px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 700 !important; margin: 0; } .footer-eye-camp__history-detail__opinions__header div p img { width: 24px; height: 16.79px; margin-right: 7px; border: 1px solid #e3e3e3; border-radius: 0; } .footer-eye-camp__history-detail__opinions__comment { color: black; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: normal !important; letter-spacing: 1px; background-color: white; line-height: 2; padding: 20px; border-radius: 20px; position: relative; margin: 0; } .footer-eye-camp__history-detail__opinions__comment::before { content: ""; position: absolute; left: 21px; top: -11px; display: block; width: 0; height: 0; border-right: 9px solid transparent; border-bottom: 13px solid white; border-left: 9px solid transparent; } @media (min-width: 768px) { .footer-eye-camp__history-detail__opinions { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .footer-eye-camp__history-detail__opinions { grid-template-columns: 1fr 1fr 1fr; } } .footer-eye-camp__history-detail__custom-slider .slick-slide { padding: 0 2.5px; -webkit-box-sizing: border-box; box-sizing: border-box; } .footer-eye-camp__history-detail__custom-slider .slick-list { margin: 0 -2.5px; } .footer-eye-camp__history-detail__custom-slider .slick-dots { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; list-style-type: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 12px 0 20px 0; } .footer-eye-camp__history-detail__custom-slider .slick-dots li { width: 10px; margin: 5px 7px; } .footer-eye-camp__history-detail__custom-slider .slick-dots li button { width: 10px; height: 10px; background: #D6D6D6; display: block; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease; border-radius: 0; font-size: 0; color: transparent; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .footer-eye-camp__history-detail__custom-slider .slick-dots li button:hover { cursor: pointer; opacity: 0.8; } .footer-eye-camp__history-detail__custom-slider .slick-dots li.slick-active button { background: #999; } .footer-eye-camp__history-detail__iframe-container { width: 100%; height: auto; display: inline-block; aspect-ratio: 16/9; margin-top: 20px; } .footer-eye-camp__history-detail__iframe-container iframe { margin: 0; } @media (min-width: 768px) { .footer-eye-camp__history-detail__iframe-container { margin-top: 35px; } } .base-eye-camp__container--inner { padding-top: 20px; padding-bottom: 40px; } @media (min-width: 768px) { .base-eye-camp__container--inner { width: 80%; height: auto; max-width: 1152px; margin: 0 auto; padding-top: 90px; padding-bottom: 100px; } } .base-eye-camp__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -7.5px; } .base-eye-camp__col { -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media (min-width: 768px) { .base-eye-camp__col { -ms-flex-preferred-size: 0; flex-basis: 0; padding-right: 7.5px; padding-left: 7.5px; } } .base-eye-camp__hide--pc { display: block; } @media (min-width: 768px) { .base-eye-camp__hide--pc { display: none; } } .base-eye-camp__hide--sp { display: none; } @media (min-width: 768px) { .base-eye-camp__hide--sp { display: block; } } .base-eye-camp__bg { max-width: 3840px; } .base-eye-camp__bg::before { content: ""; display: block; position: absolute; background-color: rgba(0, 0, 0, .4); top: 0; right: 0; bottom: 0; left: 0; } .base-eye-camp__bg picture { margin: 0 auto; } .base-eye-camp__bg picture img { width: 100%; height: auto; display: block; aspect-ratio: unset; } .base-eye-camp__title { width: 100%; max-width: 762px; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); background-color: transparent; padding: 0 10%; text-align: center; color: white; z-index: 2; } .base-eye-camp__title h1 { font-family: "Founders Grotesk", sans-serif; font-size: 40px; font-weight: 400 !important; line-height: 1; margin: 0; } .base-eye-camp__title h1 span { display: block; font-size: 13px; margin-top: 5px; letter-spacing: 1px; } @media (min-width: 768px) { .base-eye-camp__title { width: 80%; max-width: 1152px; margin: 0 auto; } .base-eye-camp__title h1 span { margin-top: 20px; } } .articles { padding-block: 50px; } .articles__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1060px; } .articles__title { text-align: center; font: 400 20px/1.5 "Founders Grotesk", sans-serif; margin-block: 0 40px; } .articles__list { display: grid; gap: 30px; padding: 0; margin: 0; list-style: none; } .articles__list li a { display: grid; gap: 15px; text-decoration: none; color: #000; } .articles__list li img { aspect-ratio: 7/4; } .articles__list li h3 { font: 400 13px/1.5 "Founders Grotesk", sans-serif; margin: 0; } @media (max-width: 767px) { .articles__list li a { grid-template-columns: 3fr 7fr; } } @media (min-width: 768px) { .articles__list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .articles { padding-block: 90px; } .articles__title { margin-bottom: 80px; font-size: 30px; } .articles__list { gap: 40px 20px; } .articles__list li a { gap: 12px; } .articles__list li a:hover img { opacity: .6; } .articles__list li img { -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .articles__list li h3 { font-size: 14px; } } @charset "UTF-8"; .article-details { padding-block: 35px 60px; font-family: "Founders Grotesk", sans-serif; line-height: 1.8; letter-spacing: 1px; } .article-details a[class^="link"] { color: #0094c8; text-decoration: none; } .article-details a[class^="link"]:hover, .article-details a[class^="link"]:focus { text-decoration: none; outline: none; } .article-details__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 840px; } .article-details__container-2 { width: 90%; max-width: 1020px; margin: 0 auto; } .article-details__header p { font-size: 11px; line-height: 1; color: #666; margin-block: 0 10px; } .article-details__header h1 { font-size: 18px; font-family: "Founders Grotesk", sans-serif; font-weight: 400 !important; line-height: 1.4; margin-block: 0 25px; color: black; } .article-details__header img { display: block; width: 100%; max-width: 1020px; aspect-ratio: 7/4; margin: 0 auto 32px; } .article-details__content h2 { font: 700 18px/1.6 "Founders Grotesk", sans-serif !important; color: black; letter-spacing: 2px; margin-block: 50px 35px; position: relative; } .article-details__content h2::before { content: ""; position: absolute; top: -2px; left: -20px; width: 5px; height: 100%; background-color: #000; } .article-details__content p { font-size: 14px; line-height: 1.8; margin-block: 0 25px; color: black; } @media (min-width: 768px) { .article-details__content p { font-size: 16px; line-height: 2; } } .article-details__content p a { color: currentColor; } .article-details__content p.p-img-left, .article-details__content p.p-img-right { display: grid; gap: 25px; } .article-details__content p.p-img-left-005, .article-details__content p.p-img-right-005 { display: grid; gap: 25px; grid-template-areas: "image" "text"; } .article-details__content p.p-img-left-005 img, .article-details__content p.p-img-right-005 img { grid-area: image; max-width: 227px; } .article-details__content p.p-img-left-005 span, .article-details__content p.p-img-right-005 span { grid-area: text; } @media (min-width: 768px) { .article-details__content p.p-img-left-005, .article-details__content p.p-img-right-005 { grid-template-areas: "text image"; grid-template-columns: 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .article-details__content p.p-img-left-005 img, .article-details__content p.p-img-right-005 img { grid-area: image; max-width: 333px; } } .article-details__content p.p-img-left-004, .article-details__content p.p-img-right-004 { gap: 25px; } @media (min-width: 768px) { .article-details__content p.p-img-left-004, .article-details__content p.p-img-right-004 { gap: 48px; } } .article-details__content p.p-img-small img { max-width: 66%; } .article-details__content p.p-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .article-details__content img { display: block; width: 100%; margin-inline: auto; } .article-details__content ol { list-style: none; margin: 0; padding: 0; } .article-details__content ol li h3 { display: -webkit-box; display: -ms-flexbox; display: flex; font: 700 16px/1.5 "Founders Grotesk", sans-serif; margin-block: 45px 16px; } .article-details__content ol li h3 span { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: #b47e00; padding-right: 16px; margin-right: 16px; border-right: 1px solid #7d7d7d; } .article-details__content a:hover, .article-details__content a:focus { text-decoration: none; outline: none; } .article-details__content a.link-arrow-left, .article-details__content a.link-arrow-right { position: relative; } .article-details__content a.link-arrow-left::before, .article-details__content a.link-arrow-right::before { content: ""; position: absolute; top: 55%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-style: solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #0094c8; border-right: 0; } .article-details__content a.link-arrow-left { padding-left: 15px; } .article-details__content a.link-arrow-left::before { left: 0; } .article-details__content a.link-arrow-right { padding-right: 15px; } .article-details__content a.link-arrow-right::before { right: 0; } .article-details__intro { padding: 70px 24px 24px; border: 1px solid #000; position: relative; margin-top: 48px; } .article-details__intro-grid { display: grid; gap: 24px; } .article-details__intro h3, .article-details__intro h4 { text-align: center; font: 700 16px/1 "Founders Grotesk", sans-serif; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; background-color: #fff; padding-inline: 16px; margin-block: 0; } .article-details__related { position: relative; border-top: 1px solid #e3e3e3; margin-block: 60px 48px; padding: 24px 20px 0; } .article-details__related-grid { display: grid; gap: 24px; } .article-details__related h3 { text-align: center; font: 700 16px/1 "Founders Grotesk", sans-serif; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; background-color: #fff; padding-inline: 16px; white-space: nowrap; } .article-details__sns { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; padding-block: 50px 40px; } .article-details__sns li { display: -webkit-box; display: -ms-flexbox; display: flex; } .article-details__sns li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .article-details__sns li a svg { width: 22px; height: 22px; } .article-details__sns li a svg path { fill: #999; } .article-details__sns li:last-child a svg { width: 24px; height: 24px; } .article-details__footer { border-top: 1px solid #e3e3e3; padding: 20px 20px 0; max-width: 1060px; margin-inline: auto; } .article-details__footer a { color: #000; text-decoration: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 15px; outline: none; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .article-details__footer a svg { width: 18px; height: 18px; } .article-details__footer a svg path { fill: #999; } .article-details__footer a:hover, .article-details__footer a:focus { color: #000; text-decoration: none; opacity: 0.6; outline: none; } .article-details__pins { background-color: #f7f7f7; list-style: none; padding: 24px 20px; margin-block: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .article-details__pins li { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding-left: 2em; } .article-details__pins li::before { content: "📌"; position: absolute; top: 2px; left: 0; font-size: smaller; } .article-details__card { border: 1px solid #e3e3e3; padding: 24px; display: grid; grid-template-columns: 4fr 7fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; color: #000; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .article-details__card p { font-size: 16px; font-weight: bold; line-height: 1.5; margin: 0; } .article-details__card p small { font-weight: normal; font-size: smaller; } .article-details__card svg { width: 15px; height: 28px; } .article-details__card:is(a):hover { color: #000; opacity: 0.6; } .article-details__offer { background-color: #f7f7f7; padding: 24px 24px 48px; } .article-details__offer h4 { font-size: 14px; font-weight: 700 !important; line-height: 1.8; border-bottom: 1px solid #dee2e6; text-align: center; margin-block: 0 24px; padding-bottom: 8px; } @media (max-width: 767px) { .article-details__content p.p-img-single { margin-inline: -20px; } .article-details__intro img, .article-details__related img { max-width: 50%; margin-inline: auto; } .article-details__related { margin-inline: -20px; } .article-details__pins { margin-inline: -20px; } } @media (min-width: 768px) { .article-details__content p.p-img-left { grid-template-columns: 4fr 6fr; } .article-details__content p.p-img-right { grid-template-columns: 6fr 4fr; } .article-details__content .button-group { max-width: 460px; margin-inline: auto; } .article-details__content .button-group--2 { max-width: 676px; } .article-details__intro { padding: 70px 48px 48px; margin-top: 48px; } .article-details__intro-2 { margin-block: 80px; } .article-details__intro-grid { grid-template-columns: 4fr 6fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 48px; } .article-details__intro-grid-2 { grid-template-columns: 4fr 6fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 48px; } .article-details__intro-grid-2 img { max-width: 58.333333%; margin-inline: auto; height: auto; } } @media (min-width: 768px) and (min-width: 768px) { .article-details__intro-grid-2 img { max-width: 234px; } } @media (min-width: 768px) { .article-details__related { padding: 70px 48px 48px; margin-top: 96px; } .article-details__related-grid { grid-template-columns: 4fr 6fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 48px; } .article-details__card { padding: 40px; } } @media (min-width: 1024px) { .article-details { padding-block: 50px 120px; font-size: 16px; line-height: 2; } .article-details__header p { font-size: 14px; } .article-details__header h1 { font-size: 26px; margin-bottom: 40px; } .article-details__content h2 { font-size: 26px !important; margin-block: 70px 35px; } .article-details__content p.p-img-small img { max-width: 42%; } .article-details__content ol li h3 { font-size: 20px; } .article-details__intro h3, .article-details__intro h4 { font-size: 20px; } .article-details__related h3 { font-size: 20px; } .article-details__sns { padding-block: 80px 50px; } .article-details__pins { padding: 32px 40px; } .article-details__card { padding: 48px; } .article-details__offer h4 { font-size: 15px; } } @media (min-width: 1440px) { .article-details__footer { padding-inline: 0; } } .article-details__button-group-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; padding-right: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; margin-block: 45px 0; } @media (min-width: 768px) { .article-details__button-group-2 { margin-right: -7.5px; margin-left: -7.5px; } } .article-details__button-group-2-warp { width: 100%; padding: 15px; max-width: 100%; position: relative; background-color: black; min-height: 50px; line-height: 1; text-align: center; border: 1px solid transparent; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; cursor: pointer; color: white !important; } @media (min-width: 768px) { .article-details__button-group-2-warp { max-width: 33.333333%; } } .article-details__button-group-2-warp a { font-size: 15px; color: white; } .article-details__button-group-2-warp:hover { background-color: #999 !important; color: white !important; } .article-details__button-group-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 15px; background-color: black; width: 100%; line-height: 1; font-size: 14px; font-weight: 500; min-height: 50px; border: 1px solid transparent; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; cursor: pointer; margin: 0 auto; color: white !important; } @media (min-width: 768px) { .article-details__button-group-3-2 { max-width: 41.666666%; } } @media (min-width: 768px) { .article-details__button-group-3 { width: 50%; } } .article-details__button-group-3 a { color: white; font-size: 14px; font-weight: 500; border-width: 0; width: 100%; text-align: center; } .article-details__button-group-3:hover { background-color: #999 !important; color: white !important; } .article-details__button-group-4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 25px; } .article-details__button-group-4-warp { width: 100%; padding: 15px; position: relative; background-color: black; min-height: 50px; line-height: 1; text-align: center; border: 1px solid transparent; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; cursor: pointer; color: white !important; } @media (min-width: 768px) { .article-details__button-group-4-warp { max-width: 58.333333%; } } .article-details__button-group-4-warp a { font-size: 15px; color: white; } .article-details__button-group-4-warp:hover { background-color: #999 !important; color: white !important; } .article-details__content-004-005__container-list { margin-inline: auto; width: 100%; } @media (min-width: 768px) { .article-details__content-004-005__container-list { max-width: 840px; padding-inline: 20px; } } .article-details__content-004-005__symptoms { background-color: #f7f7f7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; margin-bottom: 48px; padding: 1.5rem; } .article-details__content-004-005__symptoms .symptom-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; } @media (min-width: 768px) { .article-details__content-004-005__symptoms .symptom-item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .article-details__content-004-005__symptoms .symptom-item__icon { -ms-flex-negative: 0; flex-shrink: 0; font-size: 18px; line-height: 1.5; margin-top: 2px; } .article-details__content-004-005__symptoms .symptom-item__text { color: black; margin: 0; font-size: 14px; line-height: 1.5; } @media (min-width: 768px) { .article-details__content-004-005__symptoms .symptom-item__text { font-size: 16px; } } .article-details__content-004-005__symptoms-grid { background-color: #f7f7f7; display: grid; padding: 1.5rem 1rem 0.5rem 1rem; margin-bottom: 24px; } @media (min-width: 768px) { .article-details__content-004-005__symptoms-grid { grid-template-columns: repeat(2, 1fr); } } .article-details__content-004-005__symptoms-grid p { padding-bottom: 8px; color: black; font-size: 14px; } @media (min-width: 768px) { .article-details__content-004-005__symptoms-grid p { font-size: 16px; } } @media (min-width: 768px) { .article-details__content-004-005__symptoms { padding: 24px 40px; } } .article-details__content-004-005__symptoms h4 { font-size: 14px; font-weight: 700 !important; line-height: 1.8; border-bottom: 1px solid #dee2e6; text-align: center; margin-block: 0 24px; padding-bottom: 8px; } .article-details__content-004-005__symptoms p { color: black; margin-block: 0; padding-bottom: 8px; font-size: 14px; } @media (min-width: 768px) { .article-details__content-004-005__symptoms p { padding-top: 8px; padding-bottom: 8px; font-size: 16px; } } .article-details__content-004-005__flex-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } @media (min-width: 768px) { .article-details__content-004-005__flex-content { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -ms-flex-item-align: start; align-self: start; gap: 0; } } .article-details__content-004-005__flex-content p { color: black; padding: 0; margin: 0; } .article-details__content-004-005__flex-content-1 { max-width: 100%; padding-right: 0; } @media (min-width: 768px) { .article-details__content-004-005__flex-content-1 { max-width: 58.333333%; padding-right: 3rem !important; } } .article-details__content-004-005__flex-content-2 { max-width: 58.333333%; padding: 8px 0 0 0; } @media (min-width: 768px) { .article-details__content-004-005__flex-content-2 { max-width: 41.666666%; padding: 0; } } .article-details__content-004-005__list { margin: 0 !important; font-size: 14px; line-height: 1.8; } .article-details__content-004-005__list-2 { margin: 0px 0px 24px; padding: 0; } @media (min-width: 768px) { .article-details__content-004-005__list-2 { padding: 8px 24px 0px; } } .article-details__content-004-005__list-2 span { background-color: #343a40; color: white; width: 1.4em; height: 1.4em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; margin-right: 1rem !important; } @media (min-width: 768px) { .article-details__content-004-005__list { font-size: 16px; line-height: 2 !important; } } .article-details__content-004-005__list p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: black; } .article-details__content-004-005__list span { background-color: #343a40; color: white; width: 1.4em; height: 1.4em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; margin-right: 1rem !important; } .article-details__content-004-005__mb-25 { margin-bottom: 25px; } .article-details__content-004-005__pb-25 { padding-bottom: 25px; } .article-details__content-004-005__pt-25 { padding-top: 25px; } .article-details__content-004-005__pb-25-sp { padding-bottom: 25px; } @media (min-width: 768px) { .article-details__content-004-005__pb-25-sp { padding-bottom: 0; } } .article-details__content-004-005__pb-48 { padding-bottom: 24px; } @media (min-width: 768px) { .article-details__content-004-005__pb-48 { padding-bottom: 48px; } } .article-details__content-004-005__text-p { color: black; margin: 0 !important; font-size: 14px; } .article-details__content-004-005__text-p span { padding-right: 0; } @media (min-width: 768px) { .article-details__content-004-005__text-p span { padding-right: 48px; line-height: 2 !important; } } @media (min-width: 768px) { .article-details__content-004-005__text-p { font-size: 16px; line-height: 2 !important; } } .article-details__content-004-005__text-description { color: black !important; font-weight: 400; font-size: 14px; } @media (min-width: 768px) { .article-details__content-004-005__text-description { font-size: 16px; line-height: 2 !important; } } .article-details__content-004-005__img-2 img { width: 100%; max-width: 333px; -ms-flex-item-align: center; align-self: center; } .article-details__customer-guarantees { border: 1px solid #e3e3e3; padding: 3rem 1.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0; color: black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 48px 0 62px 0; } @media (min-width: 768px) { .article-details__customer-guarantees { padding: 48px; gap: 24px; } } .article-details__customer-guarantees-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; width: 100%; } @media (min-width: 768px) { .article-details__customer-guarantees-flex { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .article-details__customer-guarantees-flex-text { max-width: 100%; } @media screen and (min-width: 768px) { .article-details__customer-guarantees-flex-text { max-width: 75%; } } .article-details__customer-guarantees-flex-text h3 { font-size: 16px; font-weight: 600 !important; text-align: center; margin-block: 0 16px; } @media (min-width: 768px) { .article-details__customer-guarantees-flex-text h3 { font-size: 18px; text-align: left; } } .article-details__customer-guarantees-flex img { max-width: 97px; height: auto; } @media (min-width: 768px) { .article-details__customer-guarantees-flex img { max-width: 183px; } } .article-details__img-content { padding-top: 0.7rem !important; } .sg006__img-glasses-myopia-info img { width: 162.49px; height: auto; } @media (min-width: 768px) { .sg006__img-glasses-myopia-info img { width: 172.8px; } } @media (min-width: 1024px) { .sg006__img-glasses-myopia-info img { width: 200px; } } .sg007__img-what-about-long-term-replacement-costs__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .sg007__img-what-about-long-term-replacement-costs__layout { display: grid; grid-template-columns: 1fr 206.4px; gap: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 23px; } .sg007__img-what-about-long-term-replacement-costs__layout p:first-child { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .sg007__img-what-about-long-term-replacement-costs__layout p:last-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media (min-width: 1024px) { .sg007__img-what-about-long-term-replacement-costs__layout { grid-template-columns: 1fr 242.66px; } } .sg007__img-what-about-long-term-replacement-costs img { width: 194.58px; height: auto; } @media (min-width: 768px) { .sg007__img-what-about-long-term-replacement-costs img { width: 100%; } } .sg007__img-which-option-is-more-convenient__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sg007__img-which-option-is-more-convenient__layout p:first-child { margin-bottom: 24px; } @media (min-width: 768px) { .sg007__img-which-option-is-more-convenient__layout { display: grid; grid-template-columns: 1fr 206.4px; gap: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sg007__img-which-option-is-more-convenient__layout p:first-child { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .sg007__img-which-option-is-more-convenient__layout p:last-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .sg007__img-which-option-is-more-convenient img { width: 207.49px; height: auto; } @media (min-width: 768px) { .sg007__img-which-option-is-more-convenient img { width: 100%; } } .header-news { opacity: 0; -webkit-transform: translate(0, 16px); transform: translate(0, 16px); -webkit-transition: opacity 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); position: relative; } .header-news__title { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .header-news--active { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .header-news--active .header-news__title-text { opacity: 1; } .header-news--active .header-news__title-text:before { width: 100%; } .header-news--active .header-news__title-text span { opacity: 1; } .header-news__title-text { display: inline-block; position: relative; padding: 3px 26px; line-height: 1; color: #fff; opacity: 0; -webkit-transition: opacity 1s cubic-bezier(1, 0, 0, 1) 0.25s; transition: opacity 1s cubic-bezier(1, 0, 0, 1) 0.25s; margin: 0; background-color: #000; letter-spacing: 1px; font-size: 40px; font-weight: 300 !important; } @media (max-width: 767px) { .header-news__title-text { padding: 3px 13px; } } .header-news__title-text--active { -webkit-animation: slide-in-left-to-right 0.75s ease-out forwards; animation: slide-in-left-to-right 0.75s ease-out forwards; } .header-news__line-curve { display: block; position: absolute; top: 10px; right: -105px; width: 274px; height: 140px; background: 0 0 no-repeat; background-image: url("https://static.lenskart.com/media/owndays/img/news/line-curve.png"); background-size: 274px 140px; } @media (max-width: 767px) { .header-news__line-curve { width: 116px; height: 70px; top: 5px; right: auto; left: 60%; background-size: 137px 70px; } } @-webkit-keyframes slide-in-left-to-right { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } @keyframes slide-in-left-to-right { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } 100% { -webkit-clip-path: inset(0); clip-path: inset(0); } } .blog-news__categories { margin: 0 auto; padding: 81px 0 86px; text-align: center; } @media (max-width: 767px) { .blog-news__categories { width: 100%; padding: 42px 5%; } } .blog-news__categories ul { font-size: 0; line-height: 0; letter-spacing: 0; margin: 0; padding: 0; list-style-type: none !important; } @media (max-width: 767px) { .blog-news__categories ul { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #000; border-left: 1px solid #000; } } .blog-news__categories ul li { display: inline-block; vertical-align: top; position: relative; margin: 0 19px 0 0; padding: 0 6px; font-size: 14px; line-height: 1; letter-spacing: 2px; text-indent: 3px; cursor: pointer; width: auto; height: 20px; background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)); background-image: linear-gradient(#000, #000); background-size: 0% 0.1em; background-position-y: 100%; background-position-x: 100%; background-repeat: no-repeat; -webkit-transition: background-size 0.3s ease-in-out; transition: background-size 0.3s ease-in-out; list-style-type: none !important; } .blog-news__categories ul li:hover, .blog-news__categories ul li:focus, .blog-news__categories ul li:active { background-size: 100% 0.1em; background-position-x: 0%; background-position-y: 19px; } @media (min-width: 767px) { .blog-news__categories ul li:hover, .blog-news__categories ul li:focus, .blog-news__categories ul li:active { color: #999; } } .blog-news__categories ul li a { color: #000; text-decoration: none; } @media (max-width: 767px) { .blog-news__categories ul li { padding: 12px 0; width: 100%; height: 37px; margin: 0; letter-spacing: 1.5px; border-right: 1px solid #000; border-bottom: 1px solid #000; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-image: none; } } .blog-news__categories ul li:last-of-type { margin: 0; } .blog-news__container { width: 80%; max-width: 1152px; margin: 0 auto; } @media (max-width: 767px) { .blog-news__container { width: 100%; padding: 0 5%; } } .blog-news__block { margin: 0 0 29px; } @media (max-width: 767px) { .blog-news__block { margin: 0 0 60px; } } .blog-news__list { display: none; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 150px 0; list-style-type: none !important; } .blog-news__list > li { width: calc(33.33333% - 20px); margin: 0 30px 55px 0; opacity: 0; -webkit-transform: translate(0, 16px); transform: translate(0, 16px); font-family: 'Founders Grotesk', sans-serif; list-style-type: none !important; } @media (min-width: 768px) { .blog-news__list > li:hover { opacity: 1; } .blog-news__list > li:hover a { -webkit-transform: scale(1.02); transform: scale(1.02); -webkit-box-shadow: 0 0 30px 5px rgba(0, 0, 0, .1); box-shadow: 0 0 30px 5px rgba(0, 0, 0, .1); } .blog-news__list > li:hover .blog-news__list-thumbnail img { opacity: 0.6; } } .blog-news__list > li:nth-of-type(3n), .blog-news__list > li:last-of-type { margin-right: 0; } @media (max-width: 767px) { .blog-news__list > li { width: 100%; margin: 0 0 30px; -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1); box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1); } .blog-news__list > li:last-of-type { margin: 0; } } .blog-news__list > li a { width: 100%; height: 100%; display: block; -webkit-transition: 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .blog-news__list > li-thumbnail { font-size: 0; line-height: 0; letter-spacing: 0; } .blog-news__list > li-thumbnail img { width: 100%; } .blog-news__list > li figure { margin: 0; } .blog-news__list > li figure figcaption { text-align: center; padding: 29px 5%; } @media (max-width: 767px) { .blog-news__list > li figure figcaption { padding: 29px 5% 23px; } } .blog-news__list--open { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; } .blog-news__list--open li { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease; transition: opacity 0.2s ease 0.2s, -webkit-transform 0.2s ease; transition: opacity 0.2s ease 0.2s, transform 0.2s ease; transition: opacity 0.2s ease 0.2s, transform 0.2s ease, -webkit-transform 0.2s ease; } @media (max-width: 767px) { .blog-news__list--open { display: block; } } .blog-news__list-category { margin: 0 0 16px; font-size: 14px; text-indent: 3px; color: #000; font-weight: 300 !important; letter-spacing: 3px; } .blog-news__list-title { font-size: 15px; margin: 0 0 13px; color: #000; line-height: 1.5; font-weight: normal !important; letter-spacing: 1px; } .blog-news__list-view-more { color: #0094c8; font-size: 15px; margin: 0; font-weight: normal !important; letter-spacing: 1px; } .new-active { opacity: 1 !important; -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; -webkit-transition-delay: .5s !important; transition-delay: .5s !important; } .selected-new-category { background-color: #000; color: #fff; } @media (min-width: 767px) { .selected-new-category { background-color: transparent; color: #000; border-bottom: 1px solid #000; background-image: none !important; } } .body-news { margin-top: 84px; width: 100%; height: auto; font-family: "Founders Grotesk", sans-serif; } @media (max-width: 767px) { .body-news { margin-top: 30px; } } .body-news a:hover, .body-news a:active, .body-news a:visited, .body-news a:focus { text-decoration: none; } .body-news__news { margin: 0 auto; opacity: 0; -webkit-transform: translate(0, 16px); transform: translate(0, 16px); -webkit-transition: opacity 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.9s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; height: auto; max-width: 1152px; padding: 0 60px; } @media (max-width: 767px) { .body-news__news { width: 100%; } } .body-news__news figure { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; overflow: hidden; margin: 0; } @media (max-width: 767px) { .body-news__news figure { display: block; overflow: visible; } } .body-news__news figure figcaption { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: calc(100% - 460px); padding: 20px 5%; text-align: center; } @media (max-width: 1023px) { .body-news__news figure figcaption { width: calc(100% - 320px); padding: 45px 5%; } } @media (max-width: 767px) { .body-news__news figure figcaption { display: block; position: relative; z-index: 2; width: calc(100% - 32px); margin: -48px auto 0; padding: 42px 5%; background-color: #fff; border: 0; -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1); box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1); } } .body-news__news-thumbnail { width: 460px; font-size: 0; line-height: 0; letter-spacing: 0; } @media (max-width: 1023px) { .body-news__news-thumbnail { width: 320px; } } @media (max-width: 767px) { .body-news__news-thumbnail { width: 100%; } } .body-news__news-thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .body-news__news__card { width: 100%; height: 100%; -webkit-transition: -webkit-box-shadow 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-box-shadow 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: box-shadow 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: box-shadow 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-box-shadow 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } @media (min-width: 768px) { .body-news__news__card:hover { color: #000; opacity: 1; -webkit-box-shadow: 0 0 30px 5px rgba(0, 0, 0, .1); box-shadow: 0 0 30px 5px rgba(0, 0, 0, .1); -webkit-transform: scale(1.01); transform: scale(1.01); } .body-news__news__card:hover .body-news__news-thumbnail { opacity: 0.6; } } .body-news__news--active { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .body-news__news-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .body-news__news-text { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-news__news-latest { position: absolute; top: 10%; left: 10%; width: 162px; font-size: 0; line-height: 0; letter-spacing: 0; } @media (max-width: 1023px) { .body-news__news-latest { top: 5%; left: 5%; width: 81px; } } @media (max-width: 767px) { .body-news__news-latest { top: 10%; left: 8%; } } .body-news__news-latest img { width: 100%; } .body-news__news-category { margin: 0 0 16px; font-size: 14px; letter-spacing: 3px; text-indent: 3px; color: #000; } .body-news__news-title { margin: 0 0 16px; font-size: 26px; letter-spacing: 1px; color: #000; } @media (max-width: 1023px) { .body-news__news-title { font-size: 20px; } } .body-news__news-description { line-height: 1.5; margin-bottom: 16px; color: #000; letter-spacing: 1px; } @media (max-width: 767px) { .body-news__news-description { margin: 0 0 16px; } .body-news__news-description br { display: none; } } .body-news__news-link { width: 100%; margin-top: auto; color: #0094c8; letter-spacing: 1px; } @media (max-width: 767px) { .body-news__news-link { position: static; } } .body-news__l-content { margin: 78px auto 120px; display: block; overflow: hidden; position: relative; } @media (max-width: 1023px) { .body-news__l-content { margin: 0 auto 60px; } } @media (max-width: 767px) { .body-news__l-content--inner--full-sp { padding: 0; } } .header-kuromi-collection__checkered-pattern { position: relative; overflow: hidden; } .header-kuromi-collection__checkered-pattern::before { content: ''; position: absolute; top: -50vw; bottom: -50vw; left: -50vw; right: -50vw; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/checkered-pattern.svg") center/43px; -webkit-transform: rotate(-11deg); transform: rotate(-11deg); z-index: 1; pointer-events: none; } .header-kuromi-collection__main { padding-top: 67px; padding-bottom: 30%; position: relative; } .header-kuromi-collection__main::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(308deg, #a69cca, #b8d5e7, #f99bb8); background-size: 600% 600%; -webkit-animation: kuromiBackgroundAnimation 60s ease infinite; animation: kuromiBackgroundAnimation 60s ease infinite; z-index: -1; } @media (min-width: 768px) { .header-kuromi-collection__main::before { background-image: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/main-bg-lg.webp"); width: 100vw; } } @media (min-width: 1224px) { .header-kuromi-collection__main::before { left: calc(612px - 50vw); } } .header-kuromi-collection__main h1 { font-size: 40px; line-height: 1; grid-area: h1; margin: 0; } .header-kuromi-collection__main h1 img { width: 66.3%; max-width: 280px; margin: 0 auto; } @media (min-width: 768px) { .header-kuromi-collection__main h1 { -ms-flex-item-align: end; align-self: end; } .header-kuromi-collection__main h1 img { width: 100%; max-width: none; } } @media (min-width: 1024px) { .header-kuromi-collection__main h1 img { width: 346px; } } .header-kuromi-collection__main figure { grid-area: img; } .header-kuromi-collection__main figure img { width: 87.5%; height: auto; display: block; max-width: 450px; margin: 0 auto; } @media (min-width: 768px) { .header-kuromi-collection__main figure img { width: 100%; max-width: none; } } .header-kuromi-collection__main__content { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 55px; position: relative; z-index: 2; } @media (min-width: 768px) { .header-kuromi-collection__main__content { display: grid; gap: 0 60px; grid-template-columns: 32% auto; grid-template-areas: "h1 img" "date img"; } } @media (min-width: 1024px) { .header-kuromi-collection__main__content { grid-template-columns: auto 559px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0 60px; } } .header-kuromi-collection__main__release-date { margin: 0 auto; grid-area: date; text-align: center; } .header-kuromi-collection__main__release-date::before, .header-kuromi-collection__main__release-date::after { content: ''; width: 18px; height: 24px; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/star.svg") center/contain no-repeat; } .header-kuromi-collection__main__release-date h3 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; font: 600 29px/1 "Corporate Logo Rounded"; margin: 0; } .header-kuromi-collection__main__release-date p { font-size: 14px; line-height: 2.2em; letter-spacing: 0.07em; margin: 0; } @media (min-width: 768px) { .header-kuromi-collection__main__release-date { margin-top: 30px; } } @media (min-width: 1024px) { .header-kuromi-collection__main__release-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: start; align-self: start; -webkit-column-gap: 3px; -moz-column-gap: 3px; column-gap: 3px; margin-top: 39px; } .header-kuromi-collection__main__release-date::before, .header-kuromi-collection__main__release-date::after { width: 13px; height: 18px; } .header-kuromi-collection__main__release-date h3 { font-size: 16px; line-height: 1; } .header-kuromi-collection__main__release-date p { font-size: 15px; line-height: 1; letter-spacing: 0.04em; } } .header-kuromi-collection__main__hashtag { position: absolute; top: 50%; right: -13px; min-width: 14px; width: 4.3%; height: auto; max-width: 25px; -webkit-transform: translateY(calc(-50% + 13px)); transform: translateY(calc(-50% + 13px)); } @media (min-width: 768px) { .header-kuromi-collection__main__hashtag { width: 25px; max-width: none; } } @media (min-width: 1296px) { .header-kuromi-collection__main__hashtag { right: -110px; } } .header-kuromi-collection__main__scroll-layout { text-align: center; } .header-kuromi-collection__main__scroll-btn { font-size: 14px; padding: 8px 30px 8px 13px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #bcadd3; color: white; border-radius: 3em; margin-top: 55px; position: relative; z-index: 2; text-decoration: none; -webkit-transition: .5s; transition: .5s; cursor: pointer; } .header-kuromi-collection__main__scroll-btn:hover { color: white; } .header-kuromi-collection__main__scroll-btn::before { content: ''; width: 29px; height: 29px; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/arrow-down.svg") center/contain no-repeat; margin-right: 11px; } @media (min-width: 768px) { .header-kuromi-collection__main__scroll-btn:hover, .header-kuromi-collection__main__scroll-btn:active, .header-kuromi-collection__main__scroll-btn:visited, .header-kuromi-collection__main__scroll-btn:focus { text-decoration: none; } } @media (min-width: 1024px) { .header-kuromi-collection__main__scroll-btn { font-size: 17px; padding: 10px 21px 9px 14px; margin-top: 41px; } } @media (min-width: 768px) { .header-kuromi-collection__main { padding-top: 120px; padding-bottom: 75px; } } .header-kuromi-collection__intro { background-color: #bcadd3; padding-top: 60px; padding-bottom: 300px; position: relative; color: black; } .header-kuromi-collection__intro::before { content: ''; position: absolute; bottom: calc(100% - 2px); left: 0; right: 0; height: 22.6vw; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/intro-top-shape.svg") top center/cover no-repeat; pointer-events: none; } .header-kuromi-collection__intro__content-1 { position: relative; padding: 0 0 10px 7px; z-index: 4; } .header-kuromi-collection__intro__content-1::before { content: ''; position: absolute; top: 10px; bottom: 3px; left: 0; right: 7px; background-color: #fcbbc2; border: 3px solid black; border-radius: 3px; } .header-kuromi-collection__intro__content-1-inner { background-color: white; padding: 64px 30px 45px 22px; border: 3px solid #2b2045; border-radius: 3px; position: relative; z-index: 2; } .header-kuromi-collection__intro__content-1-top { position: absolute; top: 0; left: 50%; width: 90%; max-width: 770px; -webkit-transform: translate(-50%, -52%); transform: translate(-50%, -52%); pointer-events: none; } .header-kuromi-collection__intro__content-1-title { display: block; width: 100%; margin: 0 auto 34px; } .header-kuromi-collection__intro__content-1 p { font-size: 15px; line-height: 2.5; letter-spacing: 2; margin: 0; } .header-kuromi-collection__intro__content-1-highlight-text { display: inline-block; width: auto; height: 24px; vertical-align: middle; margin-top: -5px; } .header-kuromi-collection__intro__content-1-character { display: block; width: 190px; margin: 10px auto 0; } @media (min-width: 768px) { .header-kuromi-collection__intro__content-1 { max-width: 883px; margin: 0 auto; padding: 0 0 20px 16px; } .header-kuromi-collection__intro__content-1::before { top: 25px; right: 18px; border-width: 6px; } .header-kuromi-collection__intro__content-1-inner { padding: 112px 92px 50px 92px; border-width: 6px; } .header-kuromi-collection__intro__content-1-character { position: absolute; } } @media (min-width: 1024px) { .header-kuromi-collection__intro__content-1-inner { padding-bottom: 90px; } .header-kuromi-collection__intro__content-1-title { width: 500px; margin-bottom: 57px; } .header-kuromi-collection__intro__content-1 p { font-size: 22px; } .header-kuromi-collection__intro__content-1-highlight-text { height: 36px; } .header-kuromi-collection__intro__content-1-character { bottom: -7px; } } @media (min-width: 1296px) { .header-kuromi-collection__intro__content-1-character { width: 318px; right: -198px; } } .header-kuromi-collection__intro__content-2 { margin-top: 105px; position: relative; z-index: 4; } .header-kuromi-collection__intro__content-2-inner { background-color: white; padding: 50px 30px 1px; -webkit-box-shadow: 10px 10px 0 #2b2045; box-shadow: 10px 10px 0 #2b2045; position: relative; } .header-kuromi-collection__intro__content-2-img { display: block; width: 95px; margin: 0 auto 45px; } .header-kuromi-collection__intro__content-2-title { font: 700 23px/1 "Corporate Logo Rounded"; padding-bottom: 18px; text-align: center; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/intro-2-dot-sp.svg") center bottom no-repeat; display: inline-table; line-height: 1.3; background-image: none; margin: 0 0 10px 0; } @media (min-width: 768px) { .header-kuromi-collection__intro__content-2-title { letter-spacing: 0.06em; background-repeat: repeat-x; } } .header-kuromi-collection__intro__content-2 p { font: 800 13px/2.5 "heisei-maru-gothic-std", sans-serif; margin: 0; letter-spacing: 0; line-height: 2.1; } .header-kuromi-collection__intro__content-2-character { display: block; width: 190px; margin: 15px auto -36px; } @media (min-width: 1024px) { .header-kuromi-collection__intro__content-2 { margin-top: 200px; } .header-kuromi-collection__intro__content-2-inner { padding: 53px 16px 53px 89px; -webkit-box-shadow: 14px 14px 0 #2b2045; box-shadow: 14px 14px 0 #2b2045; display: grid; grid-template-columns: 108px auto; -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-kuromi-collection__intro__content-2-img { width: 100%; margin: 0; } .header-kuromi-collection__intro__content-2-detail { position: relative; } .header-kuromi-collection__intro__content-2-title { font-size: 24px; } .header-kuromi-collection__intro__content-2 p { font-size: 14px; max-width: 545px; } .header-kuromi-collection__intro__content-2-character { width: 200px; margin: 0; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media (min-width: 1296px) { .header-kuromi-collection__intro__content-2 p { width: 100%; } } @media (min-width: 768px) { .header-kuromi-collection__intro { padding-top: 310px; padding-bottom: 370px; } .header-kuromi-collection__intro .base-kuromi-collection__container { padding-top: 0; padding-bottom: 0; } .header-kuromi-collection__intro::before { height: 54px; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/intro-top-shape-pc.webp") center bottom/100% 100% no-repeat; } .header-kuromi-collection__intro::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/intro-bg-pc.webp") top 100px center/140% auto no-repeat; z-index: 2; pointer-events: none; } } @media (min-width: 1024px) { .header-kuromi-collection__intro { padding-bottom: 400px; } .header-kuromi-collection__intro::after { background-size: 1478px auto; } } @media (min-width: 1400px) { .header-kuromi-collection__intro { padding-bottom: 500px; } } @-webkit-keyframes kuromiBackgroundAnimation { 0% { background-position: 0% 9%; } 50% { background-position: 100% 92%; } 100% { background-position: 0% 9%; } } @keyframes kuromiBackgroundAnimation { 0% { background-position: 0% 9%; } 50% { background-position: 100% 92%; } 100% { background-position: 0% 9%; } } .body-kuromi-collection__lineup { margin-top: -170px; position: relative; z-index: 4; } .body-kuromi-collection__lineup .base-kuromi-collection__container { padding-top: 0; padding-bottom: 0; } .body-kuromi-collection__lineup .base-kuromi-collection__title { margin-bottom: 65px; } .body-kuromi-collection__lineup__content { padding: 20px 0 100px; position: relative; } .body-kuromi-collection__lineup__content::before { content: ''; position: absolute; bottom: calc(100% - 2px); left: 0; right: 0; height: 122px; background: top center / 100% 100% no-repeat; pointer-events: none; } @media (min-width: 1024px) { .body-kuromi-collection__lineup__content { padding: 1px 0 100px; } .body-kuromi-collection__lineup__content::before { height: 19vw; } } @media (min-width: 1400px) { .body-kuromi-collection__lineup__content::before { height: 437px; } } .body-kuromi-collection__lineup--pink { background-color: #edbad8; padding-bottom: 200px; } .body-kuromi-collection__lineup--pink .body-kuromi-collection__lineup__slider-product-title h4 { background-color: #e5a3d5; } .body-kuromi-collection__lineup--pink::before { background-image: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/lineup-top-shape-pink.webp"); } @media (min-width: 1024px) { .body-kuromi-collection__lineup--pink { padding-bottom: 300px; } } @media (min-width: 1400px) { .body-kuromi-collection__lineup--pink { padding-bottom: 370px; } } .body-kuromi-collection__lineup--purple { background-color: #a68fbd; } .body-kuromi-collection__lineup--purple .body-kuromi-collection__lineup__slider-product-title h4 { background-color: #846f98; } .body-kuromi-collection__lineup--purple::before { background-image: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/lineup-top-shape-purple.webp"); } .body-kuromi-collection__lineup__top { position: relative; z-index: 4; } .body-kuromi-collection__lineup__top-name { text-align: center; margin: 0 0 10px 0; } .body-kuromi-collection__lineup__top-name span { font: 900 38px/1 "Katakanaboy"; letter-spacing: 0; color: white; display: inline-block; padding: 10px 15px; position: relative; } .body-kuromi-collection__lineup__top-name span::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #2b2045; z-index: -1; } .body-kuromi-collection__lineup__top-name span img { display: block; } .body-kuromi-collection__lineup__top-name small { font: 700 28px/1 "Corporate Logo Rounded"; letter-spacing: 0.01em; display: block; color: #2b2045; margin-top: 10px; } .body-kuromi-collection__lineup__top-character { max-width: 500px; margin: -37px auto 0 auto; grid-area: img; } .body-kuromi-collection__lineup__top-character img { display: block; width: 100%; height: auto; aspect-ratio: 727 / 794; } .body-kuromi-collection__lineup__top-detail { font-size: 15px; margin: 30px 0 0 0; line-height: 2.5; } @media (min-width: 768px) { .body-kuromi-collection__lineup__top { display: grid; grid-template-columns: 50% auto; grid-template-areas: "name img" "detail img"; } .body-kuromi-collection__lineup__top-name { text-align: left; -ms-flex-item-align: end; align-self: end; } .body-kuromi-collection__lineup__top-name span { vertical-align: text-bottom; padding: 13px 23px; } .body-kuromi-collection__lineup__top-name small { display: inline-block; margin-left: 12px; } .body-kuromi-collection__lineup__top-character { max-width: none; } .body-kuromi-collection__lineup__top-character img { width: auto; max-width: 100%; aspect-ratio: 538 / 457; } .body-kuromi-collection__lineup__top-detail { -ms-flex-item-align: start; align-self: start; } } @media (min-width: 1296px) { .body-kuromi-collection__lineup__top { grid-template-columns: 538px auto; } .body-kuromi-collection__lineup__top-name span { font-size: 81px; } .body-kuromi-collection__lineup__top-name small { font-size: 54px; margin-left: 22px; } .body-kuromi-collection__lineup__top-detail { font-size: 19px; margin-top: 47px; } } @media (min-width: 1400px) { .body-kuromi-collection__lineup__top { margin-top: -110px; } } .body-kuromi-collection__lineup__slider { margin-top: 80px; } .body-kuromi-collection__lineup__slider-header { padding-bottom: 20px !important; position: relative; } .body-kuromi-collection__lineup__slider-header::after { content: ''; position: absolute; top: auto; bottom: 0; left: 17px; right: 17px; height: 6px; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/dot.svg") bottom center repeat-X; } .body-kuromi-collection__lineup__slider-product-no h3 { font: 400 20px/1 "Eveleth Clean"; letter-spacing: 0.12em; text-align: center; margin-bottom: 26px; } .body-kuromi-collection__lineup__slider-product-title h4 { font: 400 13px/1 "Eveleth Clean"; letter-spacing: 0.15em; text-transform: uppercase; padding: 9px 15px; margin-bottom: 13px; color: white; display: inline-block; } .body-kuromi-collection__lineup__slider-product-code { font: 700 20px/1 "Dosis", sans-serif; display: inline-block; vertical-align: middle; margin: 0; } .body-kuromi-collection__lineup__slider-product-list { margin-top: 45px; } .body-kuromi-collection__lineup__slider-product-list .slick-track { padding-bottom: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 14px; } .body-kuromi-collection__lineup__slider-product-list .slick-slide { width: 81%; max-width: 648px; -webkit-box-sizing: border-box; box-sizing: border-box; } .body-kuromi-collection__lineup__slider-product-list .slick-active .body-kuromi-collection__lineup__slider-product-inner { -webkit-transform: translateY(15px); transform: translateY(15px); } .body-kuromi-collection__lineup__slider-product-inner { border: 3px solid #2b2045; border-radius: 20px; overflow: hidden; position: relative; -webkit-transition: 0.4s; transition: 0.4s; } .body-kuromi-collection__lineup__slider-product-inner div > img { display: block; aspect-ratio: 601 / 358; } @media (min-width: 768px) { .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-top::before, .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-top::after, .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-bottom::before, .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-bottom::after { width: 12px; height: 12px; } .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-top::before, .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-bottom::before { left: 24px; } .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-top::after, .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-bottom::after { right: 24px; } .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-top::before, .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-top::after { top: 24px; } .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-bottom::before, .body-kuromi-collection__lineup__slider .base-kuromi-collection__item-corner-bottom::after { bottom: 24px; } .body-kuromi-collection__lineup__slider-header { padding-bottom: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .body-kuromi-collection__lineup__slider-header::after { content: none; } .body-kuromi-collection__lineup__slider-product-no h3 { font-size: 30px; text-align: left; display: inline-block; position: relative; margin-bottom: 37px; } .body-kuromi-collection__lineup__slider-product-no h3::after { content: ''; position: absolute; top: 0; bottom: -10px; left: 0; right: 0; border-bottom: 3px solid currentColor; } .body-kuromi-collection__lineup__slider-product-title { display: inline-block; } .body-kuromi-collection__lineup__slider-product-title h4 { margin-bottom: 0; } .body-kuromi-collection__lineup__slider-product-code { font-size: 25px; margin-left: 15px; } .body-kuromi-collection__lineup__slider-product-list { margin-top: 30px; } .body-kuromi-collection__lineup__slider-product-list .slick-track { padding-bottom: 30px; } .body-kuromi-collection__lineup__slider-product-list .slick-slide { width: 65%; } .body-kuromi-collection__lineup__slider-product-list .slick-active .body-kuromi-collection__lineup__slider-product-inner { -webkit-transform: translateY(30px); transform: translateY(30px); } .body-kuromi-collection__lineup__slider-product-list .slick-dots { width: 100%; height: auto; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; padding-left: 0; margin-top: 30px; list-style-type: none; } .body-kuromi-collection__lineup__slider-product-list .slick-dots li > button { width: 10px; height: 10px; display: block; color: transparent; position: relative; background: none; border: 0; } .body-kuromi-collection__lineup__slider-product-list .slick-dots li > button::before { content: ''; position: absolute; display: block; width: 10px; height: 10px; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .body-kuromi-collection__lineup__slider-product-list .slick-dots .slick-active > button::before { background-color: #2b2045; } .body-kuromi-collection__lineup__slider-product-list--pink .slick-dots li > button::before { background-color: #e5a3d5; } .body-kuromi-collection__lineup__slider-product-list--purple .slick-dots li > button::before { background-color: #846f98; } .body-kuromi-collection__lineup__slider-product-inner { border-width: 5px; border-radius: 30px; } } @media (min-width: 1400px) { .body-kuromi-collection__lineup__slider-product-list .slick-track { gap: 29px; } } .body-kuromi-collection__lineup__point { margin: 60px auto 65px; display: grid; row-gap: 82px; list-style-type: none; } .body-kuromi-collection__lineup__point-img-wrap { position: relative; margin-bottom: 28px; padding: 0 30px; } .body-kuromi-collection__lineup__point-img-wrap img { display: block; max-width: 450px; max-height: 280px; margin: 0 auto; aspect-ratio: 334 / 313; } .body-kuromi-collection__lineup__point-title { font: 700 45px/1 "Dosis", sans-serif; letter-spacing: 0.05em; text-align: center; position: absolute; top: 0; bottom: auto; left: 0; right: 0; margin: 0; } .body-kuromi-collection__lineup__point-title small { font-size: 28px; display: inline-block; vertical-align: top; margin-top: 0.15em; position: relative; color: #2b2045; font-weight: 700 !important; } .body-kuromi-collection__lineup__point-title small::after { content: ''; position: absolute; top: auto; bottom: -10px; left: 0; right: 0; border-bottom: 4px solid #2b2045; border-radius: 4px; } .body-kuromi-collection__lineup__point p { font: 800 13px/1 heisei-maru-gothic-std, sans-serif; line-height: 2.5; text-align: center; margin: 0; } @media (min-width: 768px) { .body-kuromi-collection__lineup__point { grid-template-columns: repeat(3, 1fr); -webkit-column-gap: 35px; -moz-column-gap: 35px; column-gap: 35px; margin-top: 85px; margin-bottom: 100px; } .body-kuromi-collection__lineup__point-img-wrap { padding: 0; } .body-kuromi-collection__lineup__point-img-wrap img { max-width: none; } .body-kuromi-collection__lineup__point-title { position: static; margin-bottom: 34px; } .body-kuromi-collection__lineup__point p { text-align: left; line-height: 2; } } @media (min-width: 1024px) { .body-kuromi-collection__lineup__point { -webkit-column-gap: 52px; -moz-column-gap: 52px; column-gap: 52px; } .body-kuromi-collection__lineup__point-img-wrap { margin-bottom: 53px; } .body-kuromi-collection__lineup__point p { font-size: 14px; } } @media (min-width: 1024px) { .body-kuromi-collection__lineup { margin-top: -193px; } } @media (min-width: 1400px) { .body-kuromi-collection__lineup .base-kuromi-collection__title { top: -135px; } } .footer-kuromi-collection__accessory { padding-top: 139px; background-color: #bcadd3; } .footer-kuromi-collection__accessory .base-kuromi-collection__container { padding-top: 0; } .footer-kuromi-collection__accessory__inner { background-color: white; padding: 1px 30px 65px; border: 5px solid #2b2045; border-radius: 20px; position: relative; } .footer-kuromi-collection__accessory__character { display: block; width: 190px; margin: -80px auto 33px; aspect-ratio: 65 / 63; } .footer-kuromi-collection__accessory__title { font: 400 20px/1.7 "Eveleth Clean"; letter-spacing: 0.06em; text-align: center; margin: 0; } .footer-kuromi-collection__accessory__img { display: block; margin: 33px auto 45px; max-width: 450px; aspect-ratio: 315 / 302; } .footer-kuromi-collection__accessory__detail { font: 700 12px/2.5 heisei-maru-gothic-std, sans-serif; letter-spacing: 0.04em; position: relative; padding-top: 35px; margin: 0; } .footer-kuromi-collection__accessory__detail::before { content: ''; position: absolute; top: 0; bottom: auto; left: 0; right: 0; height: 8px; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/dot.svg") top center repeat-x; } @media (min-width: 768px) { .footer-kuromi-collection__accessory .base-kuromi-collection__item-corner-top::before, .footer-kuromi-collection__accessory .base-kuromi-collection__item-corner-top::after { top: 24px; } .footer-kuromi-collection__accessory .base-kuromi-collection__item-corner-bottom::before, .footer-kuromi-collection__accessory .base-kuromi-collection__item-corner-bottom::after { bottom: 24px; } .footer-kuromi-collection__accessory__inner { padding: 20px 30px 10px 80px; display: grid; grid-template-areas: "title img" "detail img"; -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; } .footer-kuromi-collection__accessory__character { width: 140px; position: absolute; left: -80px; bottom: 0px; } .footer-kuromi-collection__accessory__title { text-align: left; grid-area: title; -ms-flex-item-align: end; align-self: end; } .footer-kuromi-collection__accessory__character { width: 210px; left: -130px; } .footer-kuromi-collection__accessory__img { grid-area: img; margin: 0; aspect-ratio: 280 / 201; } .footer-kuromi-collection__accessory__detail { padding-top: 20px; grid-area: detail; } .footer-kuromi-collection__accessory__detail::before { content: none; } } @media (min-width: 1024px) { .footer-kuromi-collection__accessory__inner { padding: 20px 15px 10px 100px; border-radius: 30px; } .footer-kuromi-collection__accessory__title { font-size: 28px; } .footer-kuromi-collection__accessory__img { max-width: none; } .footer-kuromi-collection__accessory__detail { width: 360px; font-size: 14px; padding-top: 30px; } } @media (min-width: 1296px) { .footer-kuromi-collection__accessory__inner { padding-right: 5px; grid-template-columns: auto 560px; } } .footer-kuromi-collection__novelty { background-color: #bcadd3; padding-top: 73px; } .footer-kuromi-collection__novelty .base-kuromi-collection__button { width: 330px; } .footer-kuromi-collection__novelty__inner { background-color: white; padding: 50px 30px 65px; margin-top: 25px; border: 5px solid #2b2045; border-radius: 20px; position: relative; } .footer-kuromi-collection__novelty__inner > small { font: 700 12px/1 heisei-maru-gothic-std, sans-serif; padding: 10px 12px 7px; background-color: #2b2045; color: white; display: table; margin: 0 auto; } .footer-kuromi-collection__novelty__title { font: 700 28px/1 "Corporate Logo Rounded"; letter-spacing: 0.04em; text-align: center; line-height: 1.5; margin-top: 23px; position: relative; z-index: 2; margin: 23px 0 0 0; } .footer-kuromi-collection__novelty__title small { display: block; font-size: 14px; } .footer-kuromi-collection__novelty__img { display: block; width: 100%; height: auto; margin: -17px auto 0; max-width: 450px; aspect-ratio: 322 / 263; } .footer-kuromi-collection__novelty__detail { font: 800 13px/2 heisei-maru-gothic-std, sans-serif; color: black; margin: 0; } .footer-kuromi-collection__novelty__note { font-size: 11px; font-weight: 400; display: block; margin-top: 18px; padding-left: 10px; position: relative; } .footer-kuromi-collection__novelty__note::before { position: absolute; top: 0; left: 0; font-style: normal; background: none; content: '*'; } .footer-kuromi-collection__novelty__character { display: block; width: 76px; position: absolute; right: -20px; bottom: -23px; z-index: 2; } @media (min-width: 768px) { .footer-kuromi-collection__novelty .base-kuromi-collection__container { padding-top: 0; padding-bottom: 0; } .footer-kuromi-collection__novelty .base-kuromi-collection__button { max-width: none; } .footer-kuromi-collection__novelty__inner { display: grid; grid-template-areas: "img label" "img title" "img detail"; grid-template-rows: 0fr auto 0fr; grid-template-columns: 55% auto; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; padding: 50px 30px 50px 16px; } .footer-kuromi-collection__novelty__inner > small { margin-left: 0; grid-area: label; -ms-flex-item-align: end; align-self: end; } .footer-kuromi-collection__novelty__title { grid-area: title; text-align: left; margin-bottom: 25px; } .footer-kuromi-collection__novelty__img { grid-area: img; -ms-flex-item-align: center; align-self: center; } .footer-kuromi-collection__novelty__detail { grid-area: detail; } .footer-kuromi-collection__novelty__goforit { position: absolute; top: 58px; left: -73px; width: 140px; } } @media (min-width: 1024px) { .footer-kuromi-collection__novelty { padding-top: 110px; } .footer-kuromi-collection__novelty__inner { margin-top: 35px; padding: 80px 78px 80px 16px; } .footer-kuromi-collection__novelty__inner > small { font-size: 13px; letter-spacing: 0.12em; padding: 11px 12px 7px; } .footer-kuromi-collection__novelty__title { font-size: 34px; } .footer-kuromi-collection__novelty__title small { font-size: 16px; } .footer-kuromi-collection__novelty__character { width: 101px; right: -51px; bottom: -18px; } } @media (min-width: 1296px) { .footer-kuromi-collection__novelty__inner { grid-template-columns: 492px auto; } } .footer-kuromi-collection__about { background-color: #bcadd3; padding: 30vw 0 32vw; } .footer-kuromi-collection__about__inner { position: relative; margin-bottom: 50px; padding: 20px 30px 30px; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/about-bg-body-sp.webp") top left/contain repeat-y; } .footer-kuromi-collection__about__inner::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 13vw; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/about-bg-top-sp.webp") bottom left/contain no-repeat; } .footer-kuromi-collection__about__inner::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8vw; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/about-bg-bottom-sp.webp") top left/contain no-repeat; } .footer-kuromi-collection__about__character { display: block; width: 189px; height: auto; margin: 0 auto; grid-area: img; aspect-ratio: 193 / 220; } .footer-kuromi-collection__about__title { margin: 30px 0 18px; font: 700 21px/1.7 "Corporate Logo Rounded"; } .footer-kuromi-collection__about__detail { font: 800 13px/2.3 heisei-maru-gothic-std, sans-serif; margin-bottom: 20px; } .footer-kuromi-collection__about__el { position: absolute; z-index: 3; } .footer-kuromi-collection__about__el--1 { top: -18vw; right: -9vw; width: 33vw; } .footer-kuromi-collection__about__el--2 { top: -14vw; left: -7vw; width: 22vw; } .footer-kuromi-collection__about__el--3 { bottom: -11vw; right: -7vw; width: 22vw; } .footer-kuromi-collection__about__el--4 { bottom: -16vw; left: -10vw; width: 31vw; max-width: 150px; } @media (min-width: 768px) { .footer-kuromi-collection__about { padding-top: 135px; padding-bottom: 110px; } .footer-kuromi-collection__about .base-kuromi-collection__container { padding-top: 0; padding-bottom: 0; } .footer-kuromi-collection__about .base-kuromi-collection__button { margin-left: 0; } .footer-kuromi-collection__about__inner { margin-left: 45px; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/about-bg-body-pc.webp") top left/contain repeat-x; display: grid; grid-template-areas: "title img" "detail img" "button img"; grid-template-columns: 55% auto; -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; padding: 55px 30px; } .footer-kuromi-collection__about__inner::before { left: -31px; top: 0; bottom: 0; right: 0; height: unset; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/about-bg-left-pc.webp") top left/contain no-repeat; pointer-events: none; } .footer-kuromi-collection__about__inner::after { left: 0; top: 0; bottom: 0; right: -7px; height: unset; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/about-bg-right-pc.webp") top right/contain no-repeat; pointer-events: none; } .footer-kuromi-collection__about__character { width: 100%; } .footer-kuromi-collection__about__title { text-align: left; } .footer-kuromi-collection__about__el--1 { top: -81px; right: -4vw; width: 178px; } .footer-kuromi-collection__about__el--2 { top: -25px; left: -7vw; width: 108px; } .footer-kuromi-collection__about__el--3 { bottom: -11px; right: -3vw; width: 108px; } .footer-kuromi-collection__about__el--4 { bottom: -40px; left: -10vw; width: 140px; } } @media (min-width: 1024) { .footer-kuromi-collection__about { padding-bottom: 120px; } } @media (min-width: 1296px) { .footer-kuromi-collection__about__inner { grid-template-columns: auto 313px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; padding: 100px 50px; } .footer-kuromi-collection__about__inner::before { left: -37px; } .footer-kuromi-collection__about__el--1 { top: -49px; right: 37px; } .footer-kuromi-collection__about__el--2 { width: 130px; top: -25px; left: -69px; } .footer-kuromi-collection__about__el--3 { bottom: -14px; right: -37px; width: 130px; } .footer-kuromi-collection__about__el--4 { bottom: 27px; left: -98px; } } .footer-kuromi-collection__share { color: white; margin-top: -88px; padding: 0 0 55px; position: relative; z-index: 2; } .footer-kuromi-collection__share::before { content: ''; position: absolute; top: 8px; bottom: 0; left: 0; right: 0; background-color: #2b2045; -webkit-clip-path: polygon(0 0, 100% 12%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 12%, 100% 100%, 0% 100%); z-index: -1; } .footer-kuromi-collection__share__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 56px; margin-bottom: 56px; padding-left: 0; } .footer-kuromi-collection__share__social-item { background-color: white; width: 66px; height: 66px; margin: 0 7px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; position: relative; -webkit-transition: 0.4s; transition: 0.4s; } .footer-kuromi-collection__share__social-item::before { content: ''; width: 25px; height: 25px; background: center/contain no-repeat; } .footer-kuromi-collection__share__social-item a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: transparent !important; overflow: hidden; white-space: nowrap; -webkit-transition: 0.5s; transition: 0.5s; } .footer-kuromi-collection__share__social-item--fb::before { width: 19px; background-image: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/icon-fb.svg"); } .footer-kuromi-collection__share__social-item--tw::before { background-image: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/icon-tw.svg"); } .footer-kuromi-collection__share__social-item--line::before { background-image: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/icon-line.svg"); } .footer-kuromi-collection__share__copyright { font: 300 11px / 2 "Noto Sans", sans-serif; text-align: center; margin: 0; } @media (min-width: 768px) { .footer-kuromi-collection__share { padding: 0 0 30px; } .footer-kuromi-collection__share::before { top: 1px; bottom: 0; left: 0; right: 0; -webkit-clip-path: polygon(0 0, 100% 17%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 17%, 100% 100%, 0% 100%); } .footer-kuromi-collection__share__social { margin-top: 60px; margin-bottom: 83px; } .footer-kuromi-collection__share__social-item { width: 73px; height: 73px; margin: 0 15px; } .footer-kuromi-collection__share__social-item::before { width: 28px; height: 28px; } .footer-kuromi-collection__share__social-item:hover { background-color: black; opacity: 1; } .footer-kuromi-collection__share__social-item:hover::before { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: invert(1) brightness(2); filter: invert(1) brightness(2); } .footer-kuromi-collection__share__social-item--fb::before { width: 21px; } .footer-kuromi-collection__share__copyright { font-size: 12px; } } @media (min-width: 1024px) { .footer-kuromi-collection__share { margin-top: -113px; } .footer-kuromi-collection__share::before { top: -9px; bottom: 0; left: 0; right: 0; -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 25%, 100% 100%, 0% 100%); } } @font-face { font-family: "Corporate Logo Rounded"; src: url("https://static.lenskart.com/media/owndays/fonts/corporate-logo-rounded/Corporate-Logo-Rounded.ttf") format("truetype"), url("https://static.lenskart.com/media/owndays/fonts/corporate-logo-rounded/Corporate-Logo-Rounded.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/corporate-logo-rounded/Corporate-Logo-Rounded.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Katakanaboy"; src: url("https://static.lenskart.com/media/owndays/fonts/katakanaboy/Katakanaboy-R.ttf") format("truetype"), url("https://static.lenskart.com/media/owndays/fonts/katakanaboy/Katakanaboy-R.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/katakanaboy/Katakanaboy-R.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Eveleth Clean"; src: url("https://static.lenskart.com/media/owndays/fonts/eveleth-clean/EvelethCleanRegular.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/eveleth-clean/EvelethCleanRegular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } .base-kuromi-collection__container { font: 700 15px/1.7 "Corporate Logo Rounded"; max-width: 1264px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; color: #2b2045; letter-spacing: 0; } @media (min-width: 768px) { .base-kuromi-collection__container { padding-top: 120px; padding-bottom: 75px; } } @media (min-width: 1024px) { .base-kuromi-collection__container { max-width: 1224px; padding-left: 73px; padding-right: 73px; } } .base-kuromi-collection__hide-pc { display: block !important; } @media (min-width: 768px) { .base-kuromi-collection__hide-pc { display: none !important; } } .base-kuromi-collection__hide-sp { display: none !important; } @media (min-width: 768px) { .base-kuromi-collection__hide-sp { display: block !important; } } .base-kuromi-collection__item-corner-top::before, .base-kuromi-collection__item-corner-top::after, .base-kuromi-collection__item-corner-bottom::before, .base-kuromi-collection__item-corner-bottom::after { content: ''; position: absolute; border-radius: 50%; background-color: #2b2045; width: 10px; height: 10px; } .base-kuromi-collection__item-corner-top::before, .base-kuromi-collection__item-corner-bottom::before { left: 14px; } .base-kuromi-collection__item-corner-top::after, .base-kuromi-collection__item-corner-bottom::after { right: 14px; } .base-kuromi-collection__item-corner-top::before, .base-kuromi-collection__item-corner-top::after { top: 14px; } .base-kuromi-collection__item-corner-bottom::before, .base-kuromi-collection__item-corner-bottom::after { bottom: 14px; } .base-kuromi-collection__title { font: 400 42px/1 "Eveleth Clean"; letter-spacing: 0.03em; text-align: center; color: white; -webkit-text-stroke: 2px #2b2045; padding-bottom: 0.6em; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/title-bg.svg") bottom center/58px auto no-repeat; position: relative; z-index: 9; } @media (min-width: 768px) { .base-kuromi-collection__title { -webkit-text-stroke-width: 3px; } } @media (min-width: 1024px) { .base-kuromi-collection__title { font-size: 80px; background-size: 92px auto; } } .base-kuromi-collection__center { text-align: center; } .base-kuromi-collection__color { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 20px 0 0 0; list-style-type: none; padding: 0; } .base-kuromi-collection__color__item--black, .base-kuromi-collection__color__item--pink-e8, .base-kuromi-collection__color__item--purple-cd, .base-kuromi-collection__color__item--white-e3 { width: 29px; height: 29px; background-color: white; position: relative; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; margin: 0 4px; cursor: pointer; } .base-kuromi-collection__color__item--black::before, .base-kuromi-collection__color__item--pink-e8::before, .base-kuromi-collection__color__item--purple-cd::before, .base-kuromi-collection__color__item--white-e3::before { content: ''; display: block; width: 17px; height: 17px; border-radius: 50%; } .base-kuromi-collection__color__item--black::before { background-color: black; } .base-kuromi-collection__color__item--pink-e8::before { background-color: #e8c4e4; } .base-kuromi-collection__color__item--purple-cd::before { background-color: #cdb4d8; } .base-kuromi-collection__color__item--white-e3::before { background-color: #e3e3e3; } @media (min-width: 768px) { .base-kuromi-collection__color { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: auto; } .base-kuromi-collection__color::before { content: attr(data-title); letter-spacing: 0.06em; font: 700 22px/1 "Dosis", sans-serif; margin-right: 28px; } .base-kuromi-collection__color__item--black, .base-kuromi-collection__color__item--pink-e8, .base-kuromi-collection__color__item--purple-cd, .base-kuromi-collection__color__item--white-e3 { width: 42px; height: 42px; } .base-kuromi-collection__color__item--black::before, .base-kuromi-collection__color__item--pink-e8::before, .base-kuromi-collection__color__item--purple-cd::before, .base-kuromi-collection__color__item--white-e3::before { width: 24px; height: 24px; } } .base-kuromi-collection__button { font: 700 15px/1 "Corporate Logo Rounded"; color: #2b2045; position: relative; padding: 0 14px 0 30px; margin: 0 auto 8px; height: 66px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 3; } .base-kuromi-collection__button[disabled] { pointer-events: none; } .base-kuromi-collection__button[disabled]::before, .base-kuromi-collection__button[disabled]::after { border-color: #e3e3e3; } .base-kuromi-collection__button[disabled] span { color: #e3e3e3; background: none; } .base-kuromi-collection__button::before, .base-kuromi-collection__button::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 3px solid currentColor; border-radius: 5em; background-color: white; } .base-kuromi-collection__button::before { z-index: -1; } .base-kuromi-collection__button::after { -webkit-transition: 0.4s; transition: 0.4s; z-index: -2; -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } .base-kuromi-collection__button span { background: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; position: relative; background: url("https://static.lenskart.com/media/owndays/img/kuromi-collection/arrow-right.svg") center right/29px 29px no-repeat; } @media (min-width: 768px) { .base-kuromi-collection__button { height: 62px; max-width: 281px; } .base-kuromi-collection__button:hover { opacity: 1; color: currentColor; -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } .base-kuromi-collection__button:hover::after { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .base-kuromi-collection__button:hover, .base-kuromi-collection__button:active, .base-kuromi-collection__button:visited, .base-kuromi-collection__button:focus { color: currentColor; text-decoration: none; } } .base-kuromi-collection__button-group { margin-top: 70px; display: grid; row-gap: 15px; } @media (min-width: 768px) { .base-kuromi-collection__button-group { max-width: 747px; margin-left: auto; margin-right: auto; } } .base-kuromi-collection__scroll-x-hidden { overflow-x: hidden; } .contact-category { font-size: 14px; line-height: 2; letter-spacing: .8px; width: 100%; overflow-x: hidden; } .contact-category img { display: block; width: 100%; } .contact-category h2 { text-transform: uppercase; text-align: center; font-weight: 600; font-size: 35px; line-height: 1; letter-spacing: 0.01rem; position: relative; margin: 0 0 60px; padding-bottom: 60px; } .contact-category h2::before { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 60px; height: 4px; } .contact-category__btn { text-decoration: none; outline: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid transparent; padding: 1rem; overflow: hidden; text-transform: uppercase; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; z-index: 2; width: 100%; max-width: 275px; height: 64px; margin-inline: auto; } .contact-category__btn::before { content: ''; position: absolute; left: -10%; bottom: 0; width: 0; height: 120%; -webkit-transform: skewX(15deg); transform: skewX(15deg); z-index: -1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .contact-category__btn:hover { text-decoration: none; outline: none; } .contact-category__btn:hover::before { width: 120%; } .contact-category__btn:focus { text-decoration: none; outline: none; } .contact-category__btn--primary, .contact-category__btn--primary:focus { background-color: black; border-color: black; color: white; } .contact-category__btn--primary::before, .contact-category__btn--primary:focus::before { background-color: #f4f4f4; } .contact-category__btn--primary:hover, .contact-category__btn--primary:focus:hover { color: black; } .contact-category__btn--secondary, .contact-category__btn--secondary:focus { background-color: #f4f4f4; border-color: black; color: black; } .contact-category__btn--secondary::before, .contact-category__btn--secondary:focus::before { background-color: black; } .contact-category__btn--secondary:hover, .contact-category__btn--secondary:focus:hover { color: white; } .contact-category__header { padding: 96px 20px; background-repeat: no-repeat; background-position: center; background-size: cover; display: grid; gap: 30px; position: relative; } .contact-category__header h1 { font: 0/0 a; margin: 0; } .contact-category__header h1 img { max-width: 230px; margin-inline: auto; } .contact-category__header p { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-align: center; margin: 0 auto; background-color: black; color: white; padding: 7px 10px; font-size: 20px; font-weight: 300; line-height: 1; letter-spacing: 1px; } .contact-category__header svg { scale: -1; min-height: 50px; position: absolute; bottom: 0; } .contact-category__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1192px; } .contact-category__container--lg { max-width: 1340px; } .contact-category__banner { margin-block: 50px; } .contact-category__banner a img { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .contact-category__banner a:hover img { opacity: 0.5; } .contact-category__lineup { margin-block: 80px; } .contact-category__lineup-list { list-style: none; padding: 0; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 70px; } .contact-category__lineup-list > li { text-align: center; width: 100%; max-width: 300px; } .contact-category__lineup-list > li img { max-width: 250px; -o-object-fit: contain; object-fit: contain; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .15)); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .15)); margin: 0 auto 32px; } .contact-category__lineup-list > li img.vertical { max-height: 235px; } .contact-category__lineup-list > li img.horizontal { max-height: 92px; } .contact-category__lineup-list > li ul { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 5px; margin-bottom: 10px; } .contact-category__lineup-list > li ul li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 8px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.6em; padding: 3px 8px; border-radius: 10rem; } .contact-category__lineup-list > li h4 { font-weight: 800; font-size: 16px; line-height: 1.5; letter-spacing: 1px; margin: 0 0 5px; } .contact-category__lineup-list > li p { color: black; font-size: 16px; margin: 0 0 16px; } .contact-category__htu { background-color: #f4f4f4; padding-block: 96px; } .contact-category__htu img { max-width: 200px; margin: 64px auto; } .contact-category__htu p { margin-bottom: 32px; } .contact-category__note { margin-block: 80px; } .contact-category__note p { margin-bottom: 24px; } .contact-category__note p ~ h2 { margin-top: 80px; } .contact-category__note ol { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .contact-category__note ol li h3, .contact-category__note ol li p { margin: 0; } .contact-category__note ol li h3 { font-size: inherit; font-weight: 600; line-height: 2; } .contact-category--clear-contactlens h2::before { background-color: #59b2e7; } .contact-category--clear-contactlens .contact-category__lineup-list > li { color: #59b2e7; } .contact-category--clear-contactlens .contact-category__lineup-list > li ul li { background-color: rgba(89, 178, 231, .15); } .contact-category--color-contactlens h2::before { background-color: #71475e; } .contact-category--color-contactlens .contact-category__lineup-list { max-width: 1000px; } .contact-category--color-contactlens .contact-category__lineup-list > li { color: #71475e; } .contact-category--color-contactlens .contact-category__lineup-list > li ul li { background-color: rgba(113, 71, 94, .15); } @media (min-width: 768px) { .contact-category__htu p { text-align: center; } } @media (min-width: 1024px) { .contact-category { font-size: 16px; } .contact-category h2 { font-size: 50px; } .contact-category__banner, .contact-category__lineup, .contact-category__note { margin-block: 120px; } .contact-category__htu { padding-block: 120px; } .contact-category__header { padding-block: 192px; } .contact-category__header h1 img { max-width: 300px; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } .contact-category--clear-contactlens h2::before { background-color: #59b2e7; } .contact-category--clear-contactlens .contact-type__header-img span, .contact-category--clear-contactlens .contact-type__features ul li h3 strong { color: #59b2e7; } .contact-category--color-contactlens h2::before { background-color: #71475e; } .contact-category--color-contactlens .contact-type__header { background-repeat: no-repeat; background-size: cover; } .contact-category--color-contactlens .contact-type__header svg { display: none; } .contact-category--color-contactlens .contact-type__header-img span, .contact-category--color-contactlens .contact-type__features ul li h3 strong { color: #71475e; } .contact-category--color-contactlens .contact-type__header-img img { max-width: 440px; max-height: 335px; } @media (max-width: 767px) { .contact-category--color-contactlens .contact-type__header-logo h1 img { max-width: 150px; } .contact-category--color-contactlens .contact-type__header-img { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .contact-category--color-contactlens .contact-type__header-img img { max-width: 300px; } } @media (min-width: 768px) { .contact-category--clear-contactlens .contact-type__header-grid { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .contact-category--clear-contactlens .contact-type__header-logo, .contact-category--clear-contactlens .contact-type__header-img { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; } } @media (min-width: 1024px) { .contact-category--color-contactlens .contact-type__header { padding-block: 224px; } } .contact-type { font-size: 14px; line-height: 2; letter-spacing: 0.8px; width: 100%; overflow-x: hidden; } .contact-type img { display: block; width: 100%; } .contact-type h2 { text-transform: uppercase; text-align: center; font-weight: 600; font-size: 35px; line-height: 1; letter-spacing: 0.01rem; position: relative; margin: 0 0 60px; padding-bottom: 60px; } .contact-type h2::before { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 60px; height: 4px; } .contact-type__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1192px; } .contact-type__container--lg { max-width: 1340px; } .contact-type__container--sm { max-width: 940px; } .contact-type__header { position: relative; padding-block: 64px; background: url("https://static1.lenskart.com/media/owndays/img/contacts/bg-header.webp") repeat center/auto; } .contact-type__header svg { scale: -1; min-height: 50px; position: absolute; bottom: 0; } .contact-type__header-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .contact-type__header-logo { text-align: center; } .contact-type__header-logo h1 { font: 0/0 a; margin: 0; } .contact-type__header-logo h1 img { max-width: 220px; margin-inline: auto; } .contact-type__header-logo h3 { font-size: inherit; line-height: inherit; margin: 15px 0 0; } .contact-type__header-logo p { margin: 20px auto 0; background-color: #dadcd9; font-size: 13px; line-height: 1; padding: 12px 16px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .contact-type__header-logo p::before { content: ''; position: absolute; top: 3px; left: 3px; width: 100%; height: 100%; border: 1px solid; } .contact-type__header-img { position: relative; } .contact-type__header-img img { margin-inline: auto; -o-object-fit: contain; object-fit: contain; } .contact-type__header-img > span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 48px; right: 48px; width: 74px; height: 74px; background-color: white; border-radius: 4px; text-transform: uppercase; font-size: 16px; font-weight: 600; line-height: 1; z-index: 1; -webkit-animation: pulse 4s infinite both; animation: pulse 4s infinite both; } .contact-type__header-img > span::before, .contact-type__header-img > span::after { content: ''; position: absolute; top: 0; right: 0; width: 74px; height: 74px; background-color: white; border-radius: 4px; z-index: -1; } .contact-type__header-img > span::before { rotate: 65deg; } .contact-type__header-img > span::after { rotate: -65deg; } .contact-type__header-img > span > span::before, .contact-type__header-img > span > span::after { content: ''; position: absolute; top: 0; right: 0; width: 74px; height: 74px; background-color: white; border-radius: 4px; z-index: -1; } .contact-type__header-img > span > span::before { rotate: 25deg; } .contact-type__header-img > span > span::after { rotate: 45deg; } .contact-type__features { margin-block: 80px; } .contact-type__features ul { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 24px 48px; } .contact-type__features ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: 332px; } .contact-type__features ul li img { max-width: 240px; margin-inline: auto; opacity: 0.3; } .contact-type__features ul li h3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 28px; font-weight: 300; letter-spacing: 2px; margin: 0 0 8px; } .contact-type__features ul li h3 strong { opacity: 0.5; font-family: inherit; font-size: 72px; font-weight: 600; } .contact-type__lineup { margin-block: 80px; } .contact-type__lineup-list { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 30px 15px; } .contact-type__lineup-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 160px; } .contact-type__lineup-list li .lens { height: 80px; -o-object-fit: contain; object-fit: contain; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .3)); filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .3)); } .contact-type__lineup-list li .name { line-height: 1.5; margin: 10px 0 20px; } .contact-type__lineup-list li .image { margin-top: auto; position: relative; } .contact-type__lineup-list li .image span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50px; height: 50px; border-radius: 10rem; font-size: 12px; font-weight: 700; line-height: 1; color: white; text-transform: uppercase; position: absolute; top: 0; right: -8px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .contact-type__spec { background-color: #f4f4f4; padding-block: 80px; } .contact-type__spec-list { list-style: none; padding: 0; margin: 0; display: grid; } .contact-type__spec-list li { display: grid; padding-block: 20px; border-bottom: 1px solid black; } .contact-type__spec-list li:first-child { border-top: 1px solid black; } .contact-type__spec-list li h3, .contact-type__spec-list li p { margin: 0; } .contact-type__spec-list li h3 { font-weight: 700; font-size: 16px; line-height: inherit; } .contact-type__spec-remark { list-style: none; padding: 0; margin: 10px 0 0; color: #999; font-size: 11px; } .contact-type__shops { margin-block: 80px; } .contact-type__shops-list { list-style: none; padding: 30px 0; margin: 0; border-top: 1px solid black; border-bottom: 1px solid black; display: grid; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .contact-type__shops-list li { position: relative; padding-left: 1.5em; } .contact-type__shops-list li::before { content: ''; position: absolute; top: 12px; left: 8px; width: 4px; height: 4px; background-color: black; border-radius: 16px; border-radius: 1rem; } .contact-type__shops-list li a { color: black; text-decoration: none; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .contact-type__shops-list li a:hover { opacity: 0.5; } .contact-type--daily-blue h2::before { background-color: #26558d; } .contact-type--daily-blue .contact-type__header-img span li h3 strong, .contact-type--daily-blue .contact-type__features ul li h3 strong { color: #26558d; } .contact-type--daily-blue .contact-type__features ul { max-width: 1000px; margin-inline: auto; } .contact-type--natural h2::before, .contact-type--natural .contact-type__lineup-list li .image span { background-color: #b28247; } .contact-type--natural .contact-type__header-img span li h3 strong, .contact-type--natural .contact-type__features ul li h3 strong { color: #b28247; } .contact-type--natural .contact-type__header-logo p::before { border-color: #b28247; } .contact-type--horoscope h2::before, .contact-type--horoscope .contact-type__lineup-list li .image span { background-color: #324675; } .contact-type--horoscope .contact-type__header-img span li h3 strong, .contact-type--horoscope .contact-type__features ul li h3 strong { color: #324675; } .contact-type--horoscope .contact-type__header-logo h3 { color: white; } .contact-type--horoscope .contact-type__header-logo p::before { border-color: #999; } .contact-type--petal h2::before, .contact-type--petal .contact-type__lineup-list li .image span { background-color: #9aced6; } .contact-type--petal .contact-type__header-img span li h3 strong, .contact-type--petal .contact-type__features ul li h3 strong { color: #9aced6; } .contact-type--petal .contact-type__header-logo p::before { border-color: #9aced6; } .contact-type--velvet h2::before, .contact-type--velvet .contact-type__lineup-list li .image span { background-color: #7198cf; } .contact-type--velvet .contact-type__header-img span li h3 strong, .contact-type--velvet .contact-type__features ul li h3 strong { color: #7198cf; } .contact-type--velvet .contact-type__header-logo p::before { border-color: #7198cf; } @media (min-width: 768px) { .contact-type__header-grid { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 80px; } .contact-type__header-img > span { top: 25%; left: -24px; right: auto; } .contact-type__lineup-list li { max-width: 200px; } .contact-type__spec-list li { grid-template-columns: 1fr 1fr; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; padding-inline: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .contact-type__shops-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .contact-type h2 { font-size: 50px; } .contact-type__header-img > span { left: -48px; width: 90px; height: 90px; } .contact-type__header-img > span::before, .contact-type__header-img > span::after { width: 90px; height: 90px; } .contact-type__header-img > span > span::before, .contact-type__header-img > span > span::after { width: 90px; height: 90px; } .contact-type__features, .contact-type__lineup, .contact-type__shops { margin-block: 120px; } .contact-type__lineup-list { -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } .contact-type__lineup-list li { max-width: 276px; } .contact-type__lineup-list li .name { font-size: 24px; } .contact-type__lineup-list li .image span { width: 70px; height: 70px; font-size: 15px; } .contact-type__spec { padding-block: 120px; } .contact-type__spec-list li { grid-template-columns: 270px 300px; } } .htu { color: black; font-family: 'Founders Grotesk', sans-serif; font-size: 14px; line-height: 2; letter-spacing: 0.8px; width: 100%; overflow-x: hidden; } .htu img { display: block; width: 100%; } .htu ul { list-style: none; margin: 0; padding: 0; } .htu a, .htu a:hover { color: inherit; text-decoration: none; } .htu__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1192px; } .htu__container--lg { max-width: 1340px; } .htu__container--sm { max-width: 940px; } .htu__header { background-color: #f4f4f4; padding-block: 80px; } .htu__header h1 { margin: 0 0 50px; text-align: center; text-transform: uppercase; font-size: 35px; font-weight: 600; line-height: 1.5; letter-spacing: 1.6px; padding-bottom: 16px; position: relative; } .htu__header h1::before { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 60px; height: 4px; } .htu__header p { margin: 0 0 48px; } .htu__header ul { display: grid; gap: 8px; } .htu__header ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: white; padding: 16px; position: relative; cursor: pointer; } .htu__header ul li h3 { font-size: inherit; font-weight: inherit; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 8px; } .htu__header ul li h3 strong { font-family: inherit; font-size: 20px; } .htu__header ul li img { max-width: 150px; margin: 16px auto; } .htu__header ul li svg { width: 20px; height: 20px; position: absolute; top: 50%; right: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .htu__steps { padding-bottom: 136px; } .htu__steps-sec { padding-top: 136px; } .htu__steps-sec h2 { margin: 0 0 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 24px; font-weight: 400; line-height: normal; } .htu__steps-sec h2 strong { font-family: inherit; font-size: 40px; font-weight: 700; text-transform: uppercase; } .htu__steps-sec ul { display: grid; gap: 16px; } .htu__steps-sec ul li { border: 1px solid #e3e3e3; } .htu__steps-sec ul li img { max-width: 150px; margin-inline: auto; } .htu__steps-sec ul li div { padding: 16px 32px; } .htu__steps-sec ul li div h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: normal; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 8px; } .htu__steps-sec ul li div h3 strong { font-family: inherit; font-size: 30px; font-weight: 700; line-height: 1; } .htu--clear-contactlens .htu__header h1::before { background-color: #59b2e7; } .htu--clear-contactlens .htu__header ul li svg { fill: #59b2e7; } .htu--clear-contactlens .htu__steps-sec h2 strong, .htu--clear-contactlens .htu__steps-sec ul li div h3 strong { color: #59b2e7; } .htu--color-contactlens .htu__header h1::before { background-color: #71475e; } .htu--color-contactlens .htu__header ul li svg { fill: #71475e; } .htu--color-contactlens .htu__steps-sec h2 strong, .htu--color-contactlens .htu__steps-sec ul li div h3 strong { color: #71475e; } @media (max-width: 767px) { .htu__header ul li a img { display: none; } .htu__steps-sec ul li img { margin-top: 16px; } } @media (min-width: 768px) { .htu__header p { text-align: center; } .htu__header ul { grid-template-columns: repeat(2, 1fr); gap: 16px; } .htu__header ul li { padding-bottom: 46px; } .htu__header ul li h3 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px dashed #e3e3e3; } .htu__header ul li svg { top: auto; left: 50%; right: auto; bottom: 16px; -webkit-transform: translate(-50%, 0%) rotate(90deg); transform: translate(-50%, 0%) rotate(90deg); } .htu__steps-sec ul li { display: grid; grid-template-columns: 150px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .htu__steps-sec ul li img { padding: 16px 32px; margin-block: 16px; border-right: 1px dashed #e3e3e3; } } @media (min-width: 1024px) { .htu__header ul { grid-template-columns: repeat(4, 1fr); } } .header-freaks-store__main-2025 { position: relative; } .header-freaks-store__main-2025__bg { position: relative; aspect-ratio: 390 / 600; overflow: hidden; pointer-events: none; } .header-freaks-store__main-2025__bg:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 250px; opacity: 0.3; background: -webkit-gradient(linear, left bottom, left top, from(#536097), to(rgba(83, 96, 151, 0))); background: linear-gradient(0deg, #536097 0%, rgba(83, 96, 151, 0) 100%); background-blend-mode: multiply; } @media (min-width: 768px) { .header-freaks-store__main-2025__bg { aspect-ratio: 1440/670; } .header-freaks-store__main-2025__bg:before { opacity: 0.2; height: 200px; } } .header-freaks-store__main-2025__play { position: absolute; top: 24px; right: 20px; z-index: 3; } .header-freaks-store__main-2025__play__link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; color: white; text-align: center; font-family: "filson-pro", sans-serif; font-size: 14px; font-style: normal; font-weight: 900 !important; line-height: 14px; letter-spacing: 1px; } .header-freaks-store__main-2025__play__link:hover, .header-freaks-store__main-2025__play__link:active, .header-freaks-store__main-2025__play__link:visited, .header-freaks-store__main-2025__play__link:focus { text-decoration: none; color: white; } .header-freaks-store__main-2025__play__link::after { content: ""; display: inline-block; width: 24px; height: 24px; background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/play-white-icon.svg") no-repeat 50%/contain; } .header-freaks-store__main-2025__play__link--pc { display: none; visibility: hidden; opacity: 0; } @media (min-width: 768px) { .header-freaks-store__main-2025__play__link--sp { display: none; visibility: hidden; opacity: 0; } .header-freaks-store__main-2025__play__link--pc { display: -webkit-box; display: -ms-flexbox; display: flex; visibility: visible; opacity: 1; font-size: 20px; line-height: 24px; } } @media (min-width: 1024px) { .header-freaks-store__main-2025__play__link::after { width: 40px; height: 40px; } } .header-freaks-store__main-2025__logo { position: absolute; left: 50%; translate: -50% 0; z-index: 2; bottom: 115px; width: 100%; height: auto; max-width: 212px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 768px) { .header-freaks-store__main-2025__logo { max-width: none; width: 100%; padding-left: 2.60417vw; padding-right: 2.60417vw; } } @media (min-width: 1024px) { .header-freaks-store__main-2025__logo { padding-left: 5.37109vw; padding-right: 5.37109vw; } } @media (min-width: 1400px) { .header-freaks-store__main-2025__logo { bottom: 7.42857vw; padding-left: 7.85714vw; padding-right: 7.85714vw; } } .header-freaks-store__main-2025__text-run { width: 100%; height: 35px; background-color: #667C50; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .header-freaks-store__main-2025__text-run__list { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-freaks-store__main-2025__text-run__list > .slick-list { margin: 0 -8px; } .header-freaks-store__main-2025__text-run__list > .slick-list .slick-slide { padding: 0 8px; } .header-freaks-store__main-2025__text-run__new-arrivals, .header-freaks-store__main-2025__text-run__in-store, .header-freaks-store__main-2025__text-run__online { color: #F9FFF2; font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 14px; letter-spacing: 1px; white-space: nowrap; } .header-freaks-store__main-2025__text-run__new-arrivals, .header-freaks-store__main-2025__text-run__online { font-family: "AXIS Std", sans-serif; } .header-freaks-store__main-2025__text-run__in-store { font-family: acumin-pro, sans-serif; } @media (min-width: 1024px) { .header-freaks-store__main-2025__text-run { height: 36px; } .header-freaks-store__main-2025__text-run__new-arrivals, .header-freaks-store__main-2025__text-run__in-store, .header-freaks-store__main-2025__text-run__online { font-size: 16px; line-height: 16px; } } .header-freaks-store__navs { background-color: #556940; padding: 80px 0; } .header-freaks-store__navs__title, .header-freaks-store__navs__desc { color: white; font-family: "AXIS Std", sans-serif; margin-bottom: 0; } .header-freaks-store__navs__title { font-size: 22px; font-style: normal; font-weight: 600 !important; line-height: 33px; letter-spacing: 1px; } .header-freaks-store__navs__desc { font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 28px; margin-top: 24px; } .header-freaks-store__navs__desc br { display: none; } .header-freaks-store__navs__list { list-style-type: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 56px 0 0 0; padding-left: 0; } .header-freaks-store__navs__item { background-color: white; padding: 8px 16px 16px 16px; } .header-freaks-store__navs__item-header, .header-freaks-store__navs__item-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header-freaks-store__navs__item-body { padding: 16px 0; } .header-freaks-store__navs__item-footer { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .header-freaks-store__navs__item:nth-child(3) .header-freaks-store__navs__item-footer, .header-freaks-store__navs__item:nth-child(4) .header-freaks-store__navs__item-footer { padding-top: 16px; } .header-freaks-store__navs__item-no { color: black; font-family: "filson-pro", sans-serif; font-size: 10px; font-style: normal; font-weight: 900 !important; line-height: 10px; letter-spacing: 1px; margin-bottom: 0; } .header-freaks-store__navs__item-no strong { font-family: "filson-pro", sans-serif; font-size: 18px; font-style: normal; font-weight: 900 !important; line-height: 18px; letter-spacing: 1px; } .header-freaks-store__navs__item-product { aspect-ratio: 8/5; max-width: 64px; } .header-freaks-store__navs__item-title, .header-freaks-store__navs__item-frame, .header-freaks-store__navs__item-price { color: black; margin-bottom: 0; } .header-freaks-store__navs__item-title { font-family: "filson-pro", sans-serif; font-size: 16px; font-style: normal; font-weight: 900 !important; line-height: 17.6px; letter-spacing: 1px; } .header-freaks-store__navs__item-frame { font-family: "AXIS Std", sans-serif; font-size: 10px; font-style: normal; font-weight: 500 !important; line-height: 15px; letter-spacing: 1px; margin-top: 8px; } .header-freaks-store__navs__item-icon { width: 28px; height: 28px; aspect-ratio: 1/1; } .header-freaks-store__navs__item-price { font-family: "AXIS Std", sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: 18px; letter-spacing: 1px; } @media (min-width: 768px) { .header-freaks-store__navs__title, .header-freaks-store__navs__desc { text-align: center; } .header-freaks-store__navs__desc br { display: block; } .header-freaks-store__navs__list { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .header-freaks-store__navs { padding: 104px 0; } .header-freaks-store__navs__title { font-size: 30px; line-height: 45px; } .header-freaks-store__navs__desc { font-size: 16px; line-height: 32px; } .header-freaks-store__navs__item { cursor: pointer; } .header-freaks-store__navs__item:hover .header-freaks-store__navs__item-thumbnail img { scale: 1.1; } .header-freaks-store__navs__item-thumbnail { overflow: hidden; } .header-freaks-store__navs__item-thumbnail img { -webkit-transition: scale .3s ease; transition: scale .3s ease; } } @media (min-width: 1296px) { .header-freaks-store__navs__list { gap: 32px; margin: 104px 0 0 0; } .header-freaks-store__navs__item { padding: 16px 24px 24px 24px; } .header-freaks-store__navs__item-body { padding: 24px 0 16px 0; } .header-freaks-store__navs__item-no { font-size: 16px; line-height: 16px; } .header-freaks-store__navs__item-no strong { font-size: 36px; line-height: 36px; } .header-freaks-store__navs__item-product { aspect-ratio: 67/42; max-width: 134px; } .header-freaks-store__navs__item-title { font-size: 24px; line-height: 24px; } .header-freaks-store__navs__item-frame { font-size: 12px; line-height: 12px; } .header-freaks-store__navs__item-icon { width: 40px; height: 40px; } .header-freaks-store__navs__item-price { font-size: 28px; line-height: 28px; } } .fancybox__nav, .fancybox__thumbs { display: none; } .fancybox__content { height: 100vh !important; position: relative; background: transparent !important; } .fancybox__iframe { position: absolute; margin-bottom: 0; height: auto; top: 50%; left: 0; translate: 0 -50%; } @media (max-width: 767px) { .fancybox__iframe { aspect-ratio: 9 / 16; } } @media (min-width: 768px) { .fancybox__iframe { aspect-ratio: 16 / 9; } } .body-freaks-store__styles__item { padding-top: 80px; } @media (min-width: 1024px) { .body-freaks-store__styles__item { padding-top: 136px; } } .body-freaks-store__styles__item[data-key="FK1003G-5S"], .body-freaks-store__styles__item[data-key="FK2004N-5S"] { background-color: #FBF6E6; } .body-freaks-store__styles__item[data-key="FK2005B-5S"] { background-color: #E6E4D2; } .body-freaks-store__styles__item[data-key="FK2003N-5S"] { background-color: #F0E6D7; } .body-freaks-store__styles__item-layout { display: grid; gap: 56px; max-width: 1440px; margin: 0 auto 56px; } @media (min-width: 768px) { .body-freaks-store__styles__item-layout { grid-template-columns: calc(50% - 61.5px) 1fr; padding-left: 23px; gap: 56px 32px; } } @media (min-width: 1024px) { .body-freaks-store__styles__item-layout { grid-template-columns: calc(50% - 86px) 1fr; padding-left: 55px; gap: 112px 55px; margin-bottom: 104px; } } @media (min-width: 1296px) { .body-freaks-store__styles__item-layout { grid-template-columns: 468px 1fr; padding-left: 110px; } } .body-freaks-store__styles__item-header { padding: 0 23px; } .body-freaks-store__styles__item-header h2 { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } @media (min-width: 768px) { .body-freaks-store__styles__item-header { padding: 0; -ms-flex-item-align: end; align-self: flex-end; position: relative; z-index: 2; } } @media (min-width: 1024px) { .body-freaks-store__styles__item-header h2 { gap: 0; } } .body-freaks-store__styles__item-no { color: #EFB84D; font-family: "filson-pro", sans-serif; font-size: 12px; font-style: normal; font-weight: 900 !important; line-height: 12px; letter-spacing: 1px; } .body-freaks-store__styles__item-no strong { color: #EFB84D; font-family: "filson-pro", sans-serif; font-size: 22px; font-style: normal; font-weight: 900 !important; line-height: 22px; letter-spacing: 1px; } @media (min-width: 1024px) { .body-freaks-store__styles__item-no { font-size: 24px; line-height: 24px; } .body-freaks-store__styles__item-no strong { font-size: 48px; line-height: 48px; } } .body-freaks-store__styles__item-title { color: black; font-family: "filson-pro", sans-serif; font-size: 40px; font-style: normal; font-weight: 900 !important; line-height: 40px; letter-spacing: 1px; } @media (min-width: 1024px) { .body-freaks-store__styles__item-title { font-size: 52px; line-height: 52px; margin-top: 25px; } } @media (min-width: 1296px) { .body-freaks-store__styles__item-title { font-size: 104px; line-height: 104px; } } .body-freaks-store__styles__item-frame { color: black; font-family: "AXIS Std", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 28px; letter-spacing: 1px; } @media (min-width: 1024px) { .body-freaks-store__styles__item-frame { font-size: 18px; line-height: 36px; margin-top: 28px; } } .body-freaks-store__styles__item-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 56px; } .body-freaks-store__styles__item-main img { aspect-ratio: 391 / 440; } .body-freaks-store__styles__item-main p { margin-bottom: 0; color: black; font-family: "AXIS Std", sans-serif; font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 28px; padding: 0 23px; } @media (min-width: 768px) { .body-freaks-store__styles__item-main { grid-column: 2 / 2; grid-row: 1 / span 2; } .body-freaks-store__styles__item-main p { padding: 0 23px 0 0; } } @media (min-width: 1024px) { .body-freaks-store__styles__item-main p { padding: 0 55px 0 0; font-size: 16px; line-height: 32px; } } @media (min-width: 1296px) { .body-freaks-store__styles__item-main p { padding: 0 110px 0 0; } } .body-freaks-store__styles__item-preview { width: 100%; max-width: 100vw; padding: 0 43px 48px 43px; height: auto; position: relative; } .body-freaks-store__styles__item-preview > .slick-list .slick-slide li { outline: none; } .body-freaks-store__styles__item-preview > .slick-dots { position: absolute; left: 43px; bottom: 12px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; padding-left: 0; margin-bottom: 0; } .body-freaks-store__styles__item-preview > .slick-dots > li, .body-freaks-store__styles__item-preview > .slick-dots > li > button, .body-freaks-store__styles__item-preview > .slick-dots > li > button::before { width: 8px; height: 8px; padding: 0; } .body-freaks-store__styles__item-preview > .slick-dots > li { margin: 0 4px; } .body-freaks-store__styles__item-preview > .slick-dots > li:first-child { margin-left: 0; } .body-freaks-store__styles__item-preview > .slick-dots > li:last-child { margin-right: 0; } .body-freaks-store__styles__item-preview > .slick-dots > li > button { color: transparent; } .body-freaks-store__styles__item-preview > .slick-dots > li > button { content: ""; background-color: rgba(0, 0, 0, .5); border-radius: 50%; opacity: 1; border: none; } .body-freaks-store__styles__item-preview > .slick-dots > li.slick-active > button { background-color: rgba(0, 0, 0, .8); opacity: 1; } .body-freaks-store__styles__item-preview > .slick-prev, .body-freaks-store__styles__item-preview > .slick-next { position: absolute; bottom: 0; content: ''; font-size: 0; outline: none; border-radius: 6px; border: 0; background-color: rgba(0, 0, 0, .5); width: 40px; height: 32px; -webkit-transition: all .3s ease; transition: all .3s ease; } .body-freaks-store__styles__item-preview > .slick-prev::before, .body-freaks-store__styles__item-preview > .slick-next::before { position: absolute; z-index: 1; content: ''; width: 16px; height: 16px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 1024px) { .body-freaks-store__styles__item-preview > .slick-prev:hover, .body-freaks-store__styles__item-preview > .slick-next:hover { opacity: 0.7; } } .body-freaks-store__styles__item-preview > .slick-prev { right: 89px; } .body-freaks-store__styles__item-preview > .slick-prev::before { background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/prev-white-icon.svg") no-repeat 50%/contain; } .body-freaks-store__styles__item-preview > .slick-next { right: 43px; } .body-freaks-store__styles__item-preview > .slick-next::before { background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/next-white-icon.svg") no-repeat 50%/contain; } @media (min-width: 768px) { .body-freaks-store__styles__item-preview { -ms-flex-item-align: start; align-self: flex-start; padding: 0 0 48px 0; } .body-freaks-store__styles__item-preview > .slick-dots { left: 0; } .body-freaks-store__styles__item-preview > .slick-prev { right: 46px; } .body-freaks-store__styles__item-preview > .slick-next { right: 0; } } .body-freaks-store__styles__product { width: 100%; height: auto; max-width: 1440px; margin: 0 auto; } @media (min-width: 768px) { .body-freaks-store__styles__product { display: grid; grid-template-columns: calc(100% - 335px) 310px; gap: 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 23px; } } @media (min-width: 1024px) { .body-freaks-store__styles__product { padding-right: 55px; } } @media (min-width: 1296px) { .body-freaks-store__styles__product { grid-template-columns: calc(100% - 360px) 310px; gap: 50px; padding-right: 110px; } } .body-freaks-store__styles__product-list { width: 100%; height: auto; } .body-freaks-store__styles__product-list > .slick-list { margin: 0 -6.5px; } .body-freaks-store__styles__product-list > .slick-list .slick-track { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .body-freaks-store__styles__product-list > .slick-list .slick-slide { padding: 0 6.5px; min-width: 317px; } .body-freaks-store__styles__product-list > .slick-list .slick-slide li { outline: none; } @media (min-width: 768px) { .body-freaks-store__styles__product-list > .slick-list { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0 0 0 17% !important; } .body-freaks-store__styles__product-list > .slick-list .slick-slide { min-width: 396px; max-width: none; aspect-ratio: 548/343; } } @media (min-width: 820px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 18.2% !important; } } @media (min-width: 1109px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 18.8% !important; } } @media (min-width: 1118px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 19.3% !important; } } @media (min-width: 1024px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 20% !important; margin: 0 -8.5px; } .body-freaks-store__styles__product-list > .slick-list .slick-slide { padding: 0 8.5px; aspect-ratio: 548/343; width: 565px !important; max-width: 565px !important; } } @media (min-width: 1280px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 25% !important; } } @media (min-width: 1296px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 23% !important; } } @media (min-width: 1387px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 25.7% !important; } } @media (min-width: 1433px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 26.8% !important; } } @media (min-width: 1440px) { .body-freaks-store__styles__product-list > .slick-list { padding: 0 0 0 27% !important; } } .body-freaks-store__styles__product-desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-inline: 23px; } .body-freaks-store__styles__product-desc__box { padding: 20px 22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .body-freaks-store__styles__product-desc__text { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; } .body-freaks-store__styles__product-desc__text-no, .body-freaks-store__styles__product-desc__text-color-name, .body-freaks-store__styles__product-desc__text-price { margin-bottom: 0; } .body-freaks-store__styles__product-desc__text-no, .body-freaks-store__styles__product-desc__text-color-name { color: black; letter-spacing: 1px; font-style: normal; } .body-freaks-store__styles__product-desc__text-no { color: black; font-family: "filson-pro", sans-serif; font-size: 20px; font-weight: 900 !important; line-height: 20px; } .body-freaks-store__styles__product-desc__text-color-name { font-family: "AXIS Std", sans-serif; font-size: 12px; font-weight: 500 !important; line-height: 12px; padding: 16px 0 24px 0; } .body-freaks-store__styles__product-desc__text-price { color: rgba(0, 0, 0, .6); font-family: "AXIS Std", sans-serif; font-size: 16px; font-style: normal; font-weight: 500 !important; line-height: 16px; letter-spacing: 1px; } .body-freaks-store__styles__product-desc__colors { list-style-type: none; padding-left: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .body-freaks-store__styles__product-desc__colors li { width: 40px; height: 40px; } .body-freaks-store__styles__product-desc__colors li button { width: 100%; height: 100%; background-color: transparent; background-clip: content-box; border-width: 1px; border-style: solid; border-color: transparent; -o-border-image: none; border-image: none; -o-border-image: initial; border-image: initial; outline: none; border-radius: 10rem; padding: 6px; } .body-freaks-store__styles__product-desc__colors li button[data-color="black"] { background-color: black; } .body-freaks-store__styles__product-desc__colors li button[data-color="greige"] { background-color: #DFDCD7; } .body-freaks-store__styles__product-desc__colors li button[data-color="brown"] { background-color: #865928; } .body-freaks-store__styles__product-desc__colors li button[data-color="brown-demi"] { background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/products/colors/brown-demi.webp"); } .body-freaks-store__styles__product-desc__colors li button[data-color="clear-grey"] { background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/products/colors/clear-grey.webp"); } .body-freaks-store__styles__product-desc__colors li button[data-color="matte-black"] { background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/products/colors/matte-black.webp"); } .body-freaks-store__styles__product-desc__colors li button[data-color="clear"] { background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/products/colors/clear.webp"); } .body-freaks-store__styles__product-desc__colors li button[data-color="brown-demi"], .body-freaks-store__styles__product-desc__colors li button[data-color="clear"], .body-freaks-store__styles__product-desc__colors li button[data-color="clear-grey"], .body-freaks-store__styles__product-desc__colors li button[data-color="matte-black"] { background-repeat: no-repeat; background-size: 28px 28px; background-position: center; } .body-freaks-store__styles__product-desc__colors li button[data-color-selected="true"] { border-color: rgba(0, 0, 0, .4); } @media (min-width: 768px) { .body-freaks-store__styles__product-desc { padding-inline: 0; } .body-freaks-store__styles__product-desc__box { padding: 35px 0 40px 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-freaks-store__styles__product-desc__text { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-freaks-store__styles__product-desc__text-no, .body-freaks-store__styles__product-desc__text-color-name { color: black; letter-spacing: 1px; font-style: normal; } .body-freaks-store__styles__product-desc__text-no { font-size: 32px; line-height: 32px; } .body-freaks-store__styles__product-desc__text-color-name { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; font-size: 14px; line-height: 14px; padding: 29px 0 8px 0; } .body-freaks-store__styles__product-desc__text-price { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; font-size: 24px; line-height: 24px; letter-spacing: 1px; padding-top: 15px; } .body-freaks-store__styles__product-desc__footer { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024px) { .body-freaks-store__styles__product-desc { margin-top: -46px; } } .body-freaks-store__styles__product__arrows { display: none; } @media (min-width: 768px) { .body-freaks-store__styles__product__arrows { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; } .body-freaks-store__styles__product__arrows-prev, .body-freaks-store__styles__product__arrows-next { width: 68px; height: 50px; border: 2px solid black; border-radius: 10px; background-color: rgba(255, 255, 255, .3); background-repeat: no-repeat; background-position: 50%; background-size: 22px auto; } .body-freaks-store__styles__product__arrows-prev { background-image: url("https://static.lenskart.com/owndays/img/freaks-store-2025/prev-black-icon.svg"); } .body-freaks-store__styles__product__arrows-next { background-image: url("https://static.lenskart.com/owndays/img/freaks-store-2025/next-black-icon.svg"); } } @media (min-width: 1024px) { .body-freaks-store__styles__product__arrows-prev, .body-freaks-store__styles__product__arrows-next { cursor: pointer; opacity: 0.6; -webkit-transition: all .3s ease; transition: all .3s ease; } .body-freaks-store__styles__product__arrows-prev:hover, .body-freaks-store__styles__product__arrows-next:hover { opacity: 1; } } .body-freaks-store__styles__product__specifications { padding: 56px 0 80px 0; } .body-freaks-store__styles__product__specifications dl { margin-bottom: 0; } .body-freaks-store__styles__product__specifications dl dt { color: black; text-align: center; font-family: "AXIS Std", sans-serif; font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 24px; letter-spacing: 1px; padding-bottom: 24px; } .body-freaks-store__styles__product__specifications dl dd { border-top: 1px solid rgba(17, 0, 0, .4); padding: 23px 0 0 0; margin: 0; } .body-freaks-store__styles__product__specifications dl dd ul { list-style-type: none; padding: 0; margin: 0; position: relative; } .body-freaks-store__styles__product__specifications dl dd ul li { color: black; font-family: "AXIS Std", sans-serif; font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 28px; letter-spacing: 1px; padding-left: 22px; position: relative; } .body-freaks-store__styles__product__specifications dl dd ul li::before { position: absolute; left: 0; content: ''; margin-top: 7px; width: 14px; height: 14px; background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/check-icon.svg") no-repeat 50%/contain; } .body-freaks-store__styles__product__specifications__remark { color: rgba(0, 0, 0, .6); font-family: "AXIS Std", sans-serif; font-size: 12px; font-style: normal; font-weight: 500 !important; line-height: 21.6px; letter-spacing: 1px; padding-left: 8px; margin-bottom: 0; position: relative; } .body-freaks-store__styles__product__specifications__remark-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 24px; } .body-freaks-store__styles__product__specifications__remark::before { content: '*'; position: absolute; top: 0; left: 0; color: rgba(0, 0, 0, .6); text-align: center; font-family: "AXIS Std", sans-serif; font-size: 12px; font-style: normal; font-weight: 500 !important; line-height: 21.6px; letter-spacing: 1px; } @media (min-width: 768px) { .body-freaks-store__styles__product__specifications dl { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; margin: 0 auto; } .body-freaks-store__styles__product__specifications dl dt { font-size: 16px; line-height: 24px; } .body-freaks-store__styles__product__specifications dl dd { padding: 24px 0 0 0; margin: 0; } .body-freaks-store__styles__product__specifications dl dd ul { padding: 0 16px 0 24px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .body-freaks-store__styles__product__specifications__remark { font-size: 15px; line-height: 30px; padding-left: 9px; } .body-freaks-store__styles__product__specifications__remark__layout { margin-top: 16px; } .body-freaks-store__styles__product__specifications__remark::before { font-size: 12px; font-style: normal; line-height: 30px; } } @media (min-width: 768px) { .body-freaks-store__styles__product__specifications dl { display: grid; grid-template-columns: auto 1fr; } .body-freaks-store__styles__product__specifications dl dt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px 24px 24px 16px; border-top: 1px solid rgba(0, 0, 0, .4); border-bottom: 1px solid rgba(0, 0, 0, .4); } .body-freaks-store__styles__product__specifications dl dd { border-left: 1px solid rgba(0, 0, 0, .4); border-bottom: 1px solid rgba(0, 0, 0, .4); padding: 24px 0; margin: 0; } .body-freaks-store__styles__product__specifications dl dd ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; padding: 0 16px 0 24px; } .body-freaks-store__styles__product__specifications__remark { font-size: 15px; line-height: 30px; padding-left: 9px; } .body-freaks-store__styles__product__specifications__remark__layout { margin-top: 16px; } .body-freaks-store__styles__product__specifications__remark::before { font-size: 12px; font-style: normal; line-height: 30px; } } @media (min-width: 1296px) { .body-freaks-store__styles__product__specifications dl dd ul { gap: 26px; } } .footer-freaks-store__case__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .footer-freaks-store__case__layout { display: grid; grid-template-columns: 1fr 50%; gap: 40px; max-width: 1440px; margin-inline: auto; } } @media (min-width: 768px) { .footer-freaks-store__case__layout { gap: 40px 80px; padding-top: 72px; } } .footer-freaks-store__case__header { width: 100%; height: auto; max-width: 610px; padding: 80px 23px 40px 23px; } @media (min-width: 768px) { .footer-freaks-store__case__header { padding: 80px 23px 0 0; } } @media (min-width: 1024px) { .footer-freaks-store__case__header { padding: 80px 0 0 0; } } .footer-freaks-store__case__title { color: black; font-family: "filson-pro", sans-serif; font-size: 32px; font-style: normal; font-weight: 900; line-height: 38.4px; letter-spacing: 1px; margin: 0; } .footer-freaks-store__case__title small { width: 100%; height: auto; color: black; font-family: "AXIS Std", sans-serif; font-size: 12px; font-style: normal; font-weight: 500 !important; line-height: 24px; letter-spacing: 1px; margin-top: 3.2px; display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 1024px) { .footer-freaks-store__case__title { font-size: 48px; line-height: 57.6px; } .footer-freaks-store__case__title small { font-size: 16px; line-height: 32px; margin-top: 0; } } @media (min-width: 768px) { .footer-freaks-store__case__image { grid-row: 1 / span 2; grid-column: 1; } } .footer-freaks-store__case__list { width: 100%; max-width: 610px; height: auto; padding: 40px 0 56px 0; position: relative; } .footer-freaks-store__case__list > .slick-dots { position: absolute; top: 300px; left: 23px; list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; padding-left: 0; margin-left: -4px; margin-bottom: 0; } .footer-freaks-store__case__list > .slick-dots > li, .footer-freaks-store__case__list > .slick-dots > li > button, .footer-freaks-store__case__list > .slick-dots > li > button::before { width: 8px; height: 8px; padding: 0; } .footer-freaks-store__case__list > .slick-dots > li { margin: 0 4px; } .footer-freaks-store__case__list > .slick-dots > li > button { color: transparent; } .footer-freaks-store__case__list > .slick-dots > li > button { content: ''; background-color: rgba(0, 0, 0, .5); border-radius: 50%; opacity: 1; border: none; } .footer-freaks-store__case__list > .slick-dots > li.slick-active > button { background-color: rgba(0, 0, 0, .8); opacity: 1; } .footer-freaks-store__case__list > .slick-list .slick-slide:focus { outline: none; } @media (min-width: 344px) { .footer-freaks-store__case__list > .slick-dots { top: 272px; } } @media (min-width: 414px) { .footer-freaks-store__case__list > .slick-dots { top: 315px; } } @media (min-width: 430px) { .footer-freaks-store__case__list > .slick-dots { top: 325px; } } @media (min-width: 540px) { .footer-freaks-store__case__list > .slick-dots { top: 395px; } } @media (min-width: 768px) { .footer-freaks-store__case__list { padding: 0 23px 0 0; } .footer-freaks-store__case__list > .slick-dots { top: 242px; left: 0; } } @media (min-width: 820px) { .footer-freaks-store__case__list > .slick-dots { top: 287px; left: 0; } } @media (min-width: 1024px) { .footer-freaks-store__case__list > .slick-dots { top: 322px; } .footer-freaks-store__case__list > .slick-dots > li > button { cursor: pointer; } } @media (min-width: 1280px) { .footer-freaks-store__case__list { padding: 0; } .footer-freaks-store__case__list > .slick-dots { top: 383px; } } @media (min-width: 1440px) { .footer-freaks-store__case__list > .slick-dots { top: 397px; } } .footer-freaks-store__case__item { outline: none; } .footer-freaks-store__case__item-img { margin-bottom: 63.73px; } @media (min-width: 1024px) { .footer-freaks-store__case__item-img { margin-bottom: 64px; } } .footer-freaks-store__case__item-title, .footer-freaks-store__case__item-desc { color: black; font-family: "AXIS Std", sans-serif; padding: 0 23px; } .footer-freaks-store__case__item-title { font-size: 18px; font-style: normal; font-weight: 600 !important; line-height: 1.5; letter-spacing: 1px; margin-bottom: 10px; } .footer-freaks-store__case__item-desc { font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 28px; margin-bottom: 0; } .footer-freaks-store__case__item-desc span { margin-left: -8px; } @media (min-width: 768px) { .footer-freaks-store__case__item-title, .footer-freaks-store__case__item-desc { padding: 0; } } @media (min-width: 1024px) { .footer-freaks-store__case__item-title { font-size: 20px; line-height: 40px; letter-spacing: 1px; margin-bottom: 10px; } .footer-freaks-store__case__item-desc { font-size: 16px; line-height: 32px; } } .footer-freaks-store__case__buttons { width: 100%; height: auto; padding: 64px 0; display: grid; grid-template-columns: 1fr; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 16px; margin: 0 auto; } @media (min-width: 768px) { .footer-freaks-store__case__buttons { grid-template-columns: 310px 310px; row-gap: 0; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; } .footer-freaks-store__case__buttons .base-freaks-store-2025__btn { width: auto; padding-inline: 20px; min-width: 340px; } } @media (min-width: 1024px) { .footer-freaks-store__case__buttons { padding: 80px 0; margin-top: 56px; } } .footer-freaks-store__conditions { background-color: #e6e4d2; padding: 64px 0; } .footer-freaks-store__conditions .base-freaks-store__container { max-width: 964px; } .footer-freaks-store__conditions__list { list-style-type: none; padding: 0; margin-bottom: 0; margin: 0; } .footer-freaks-store__conditions__list li { color: black; font-family: "AXIS Std", sans-serif; font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 22.4px; letter-spacing: 1px; padding: 0 0 0 23px; position: relative; } .footer-freaks-store__conditions__list li::before { content: '\2022'; position: absolute; top: 0; left: 7px; } .footer-freaks-store__conditions__list li:not(:first-child) { margin-top: 8px; } @media (min-width: 1024px) { .footer-freaks-store__conditions { padding: 80px 0; } .footer-freaks-store__conditions__list li { font-size: 16px; line-height: 32px; } .footer-freaks-store__conditions__list li:not(:first-child) { margin-top: 0; } } .footer-freaks-store__about-2025 { background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/about-bg_sp.webp") no-repeat 50%/cover; padding: 80px 0; } .footer-freaks-store__about-2025 .base-freaks-store__container { max-width: 964px; } .footer-freaks-store__about-2025__title { width: 244px; height: auto; aspect-ratio: 61/6; margin: 0; } .footer-freaks-store__about-2025__desc, .footer-freaks-store__about-2025__link { color: white; font-family: "AXIS Std", sans-serif; } .footer-freaks-store__about-2025__desc { font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 28px; letter-spacing: 1px; margin: 32px 0; } .footer-freaks-store__about-2025__link { font-size: 14px; font-style: normal; font-weight: 600; line-height: 28px; position: relative; } .footer-freaks-store__about-2025__link::after { content: ''; position: absolute; top: 52%; right: -22px; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 14px; height: 16px; aspect-ratio: 7/8; background: url("https://static.lenskart.com/owndays/img/freaks-store-2025/external-link-square-icon.svg") no-repeat 50%/contain; } .footer-freaks-store__about-2025__link:hover, .footer-freaks-store__about-2025__link:active, .footer-freaks-store__about-2025__link:visited, .footer-freaks-store__about-2025__link:focus { text-decoration: none; color: white; } .footer-freaks-store__about-2025__link span { margin-left: -8px; } @media (min-width: 1024px) { .footer-freaks-store__about-2025 { padding: 120px 0; } .footer-freaks-store__about-2025__title { width: 325.664px; height: 32px; } .footer-freaks-store__about-2025__desc { font-size: 16px; line-height: 32px; } } .footer-freaks-store__share-2025 { background-color: #4c5e39; margin: 0 auto; padding: 64px 0; } .footer-freaks-store__share-2025__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 32px; } .footer-freaks-store__share-2025__title { color: white; text-align: center; font-family: "filson-pro", sans-serif; font-size: 32px; font-style: normal; font-weight: 900; line-height: 32px; letter-spacing: 3.2px; margin: 0; padding-top: 3px; } .footer-freaks-store__share-2025__list { list-style-type: none; padding: 0; margin-bottom: 0; display: grid; grid-template-columns: repeat(2, 32px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .footer-freaks-store__share-2025__list li a { font-size: 32px; color: white; display: block; width: 32px; height: 32px; } .footer-freaks-store__share-2025__list li a i { background: transparent; } .footer-freaks-store__share-2025__list li:nth-child(1) a { position: relative; } .footer-freaks-store__share-2025__list li:nth-child(1) a i { position: absolute; top: 0; } .footer-freaks-store__share-2025__list li:nth-child(2) { width: 32px; height: 32px; position: relative; } .footer-freaks-store__share-2025__list li:nth-child(2) a { color: #4c5e39; position: relative; } .footer-freaks-store__share-2025__list li:nth-child(2) a i { font-size: 22.23px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .footer-freaks-store__share-2025__list li:nth-child(2) a::before { position: absolute; content: ''; width: 32px; height: 32px; background-color: white; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } html { scroll-behavior: smooth; } .base-freaks-store-2025 { overflow: hidden; } .base-freaks-store-2025__container { width: 100%; max-width: 1220px; height: auto; margin: 0 auto; padding: 0 23px; } @media (min-width: 1024px) { .base-freaks-store-2025__container { padding: 0; } } .base-freaks-store-2025__btn { width: 100%; height: 60px; border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: black; border: 2px solid black; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; -ms-flex-item-align: stretch; align-self: stretch; white-space: nowrap; color: white; text-align: center; font-family: "AXIS Std", sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: 28px; letter-spacing: 1px; } .base-freaks-store-2025__btn:hover, .base-freaks-store-2025__btn:active, .base-freaks-store-2025__btn:visited, .base-freaks-store-2025__btn:focus { text-decoration: none; color: white; } .base-freaks-store-2025__btn[disabled] { background-color: #c7c7c7; border-color: #c7c7c7; pointer-events: none; } @media (min-width: 1024px) { .base-freaks-store-2025__btn { -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer; } .base-freaks-store-2025__btn:hover { background-color: rgba(255, 255, 255, .5); color: black; } } .header-air__main { position: relative; } .header-air__main .base-air__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .header-air__main__bg img { display: block; width: 100%; height: auto; aspect-ratio: 425 / 654; } .header-air__main__text { position: absolute; inset: 0; padding-block: 50px 70px; font-family: "Founders Grotesk", sans-serif; } .header-air__main__text h1, .header-air__main__text h2 { margin: 0; } .header-air__main__text h1 { font: 0 / 0 a; } .header-air__main__text h1 img { display: block; max-width: 140px; margin: 0 auto; } .header-air__main__text h2 { color: white; font-size: 24px; font-weight: 600 !important; letter-spacing: 0.72px; } .header-air__main::after { content: ""; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); width: 1px; height: 60px; background-color: #d9d9d9; z-index: 2; } @media (min-width: 768px) { .header-air__main__bg img { aspect-ratio: 2 / 1; } .header-air__main__text h2 { line-height: 1.2; } .header-air__main__text h1 img { max-width: 120px; } } @media (min-width: 1024px) { .header-air__main .base-air__container { padding-top: 180px; } .header-air__main__bg img { min-height: 720px; -o-object-fit: cover; object-fit: cover; } .header-air__main__text { padding-block: 76px 120px; } .header-air__main__text img { max-width: 192px; } .header-air__main__text h2 { font-size: 40px; letter-spacing: 0.8px; } .header-air__main__text h1 img { max-width: 240px; } .header-air__main::after { height: 80px; } } .header-air__about { position: relative; } .header-air__about__bg { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .header-air__about__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(352.03% 121.7% at 50% 7.5%, rgba(0, 0, 0, .4) 0, rgba(217, 217, 217, .3) 100%); } .header-air__about__bg video { display: inline-block; width: 100%; height: 524px; -o-object-fit: cover; object-fit: cover; } .header-air__about__text { position: absolute; inset: auto 0 32px 0; color: white; } .header-air__about__text p { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 500 !important; margin: 0; } .header-air__about__play { position: absolute; inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; font: 0 / 0 a; background: url("https://static.lenskart.com/media/owndays/img/air/icon-play.svg") no-repeat 50%/80px auto; -webkit-transition: all .3s ease; transition: all .3s ease; } @media (min-width: 1024px) { .header-air__about__bg video { height: 580px; } .header-air__about__text { inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 20px; } .header-air__about__text p { font-size: 16px; letter-spacing: 0.48px; line-height: 32px; max-width: calc(50% - 147px); } } .header-air__navs { position: relative; padding-block: 24px; } .header-air__navs ul { list-style-type: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .header-air__navs ul a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 600 !important; letter-spacing: 0.96px; line-height: normal; color: black; -webkit-transition: all .3s ease; transition: all .3s ease; background-color: #f7f6f2; height: 52px; padding-inline: 20px; border-radius: 5px; z-index: 1; } .header-air__navs ul a::after { content: ""; width: 28px; height: 28px; border-radius: 160px; border-radius: 10rem; border: 1px solid black; background: black url("https://static.lenskart.com/media/owndays/img/air/icon-arrow-down.svg") no-repeat 50%/8px auto; -webkit-transition: all .3s ease; transition: all .3s ease; } @media (min-width: 768px) { .header-air__navs ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-color: #f7f6f2; height: 76px; border-radius: 10px; } .header-air__navs ul li { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-air__navs ul li:not(:last-child):before { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 48px; background-color: rgba(0, 0, 0, .2); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .header-air__navs ul li a { padding: 20px; gap: 28px; } .header-air__navs ul li a:hover { color: #999; text-decoration: none; } .header-air__navs ul li a:hover::after { background-color: white; background-image: url("https://static.lenskart.com/media/owndays/img/air/icon-arrow-down--black.svg"); } } @media (min-width: 1024px) { .header-air__navs { padding-block: 60px 100px; } .header-air__navs ul a { font-size: 16px; letter-spacing: .96px; } } .body-air__styles { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-air__styles--reverse { padding-top: 100px; } .body-air__styles__item:nth-child(even) .body-air__styles__features .base-air__container::before { left: 40px; right: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 40px; } .body-air__styles__top { position: relative; } .body-air__styles__top-img { overflow: hidden; } .body-air__styles__top-img-slider { aspect-ratio: 130 / 203; } .body-air__styles__top-img-slider img { display: block; } .body-air__styles__top-text h2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-family: "Founders Grotesk", sans-serif; font-size: 27px; font-weight: 600 !important; line-height: 40px; letter-spacing: 1.68px; margin-bottom: 32px; color: black; } .body-air__styles__top-text h2 span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: inherit; overflow: hidden; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; position: relative; } .body-air__styles__top-text h2 span::after { content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; width: 0%; height: 90%; position: absolute; top: 0; left: 0; background-color: black; z-index: -1; } .body-air__styles__top-text h2.aos-animate span { -webkit-animation: textanicolor 1.5s forwards; animation: textanicolor 1.5s forwards; } .body-air__styles__top-text h2.aos-animate span::after { -webkit-animation: textani 1.5s forwards; animation: textani 1.5s forwards; } .body-air__styles__top-text-details h3, .body-air__styles__top-text-details p { font-family: "Founders Grotesk", sans-serif; color: black; } .body-air__styles__top-text-details h3 { font-size: 18px; font-weight: 700; letter-spacing: 0.72px; padding-bottom: 8px; border-bottom: 1px solid black; margin-bottom: 16px; line-height: 40px; } .body-air__styles__top-text-details h3 span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: inherit; overflow: hidden; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; position: relative; } .body-air__styles__top-text-details h3 span::before { content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; width: 0%; height: 90%; position: absolute; top: 0; left: 0; background-color: black; z-index: -1; } .body-air__styles__top-text-details h3.aos-animate span { -webkit-animation: textanicolor 1.5s forwards; animation: textanicolor 1.5s forwards; } .body-air__styles__top-text-details h3.aos-animate span::before { -webkit-animation: textani 1.5s forwards; animation: textani 1.5s forwards; } .body-air__styles__top-text-details p { font-weight: normal !important; letter-spacing: 0.56px; line-height: 32px; margin-bottom: 20px; } .body-air__styles__top-text-details.aos-animate span { -webkit-animation: textanicolor 1.5s forwards; animation: textanicolor 1.5s forwards; } .body-air__styles__top-text-details.aos-animate span::before { -webkit-animation: textani 1.5s forwards; animation: textani 1.5s forwards; } .body-air__styles__top-text-details-img { position: relative; width: 100%; max-width: 310px; margin-left: 20px; } .body-air__styles__top-text-details-img span { display: block; width: 180px; height: 90px; border-style: solid; border-color: black; border-width: 0 0 1px 1px; position: absolute; top: 0; left: 0; } .body-air__styles__top-text-details-img img { display: block; position: relative; max-width: 160px; margin-left: auto; z-index: 1; aspect-ratio: 1 / 1; } .body-air__styles__top-text-details-img::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 160px; border-radius: 10rem; background-color: black; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 768px) { .body-air__styles--reverse .body-air__styles__top-img { left: 0; right: calc(50% + 40px); } .body-air__styles--reverse .body-air__styles__top-text-details, .body-air__styles--reverse .body-air__styles__top-text h2 { max-width: 50%; margin-left: auto; } .body-air__styles--reverse .body-air__styles__top-img-slider > .slick-list > .slick-track .slick-slide { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .body-air__styles__top { margin-bottom: 30px; } .body-air__styles__top-img { position: absolute; top: 0; left: calc(50% + 40px); right: 0; bottom: 0; overflow: hidden; } .body-air__styles__top-img-slider { aspect-ratio: 34 / 39; } .body-air__styles__top-text-details { max-width: 50%; } .body-air__styles__top-text-details-img { margin-left: auto; } .body-air__styles__top-text .base-air__container h2 { max-width: 50%; } } @media (min-width: 1024px) { .body-air__styles--reverse { padding-top: 120px; } .body-air__styles__top { min-height: 780px; margin-bottom: 60px; } .body-air__styles__top-img-slider img { height: 780px; -o-object-fit: cover; object-fit: cover; -o-object-position: left top; object-position: left top; } .body-air__styles__top-text { padding-top: 56px; padding-left: 40px; } .body-air__styles__top-text h2 { max-width: 54%; font-size: 36px; line-height: 61.2px; letter-spacing: 0.72px; margin-bottom: 45px; } .body-air__styles__top-text-details { max-width: 50%; } .body-air__styles__top-text-details h3 { font-size: 24px; letter-spacing: 1.44px; padding-bottom: 16px; margin-bottom: 24px; } .body-air__styles__top-text-details p { font-size: 16px; margin-bottom: 40px; letter-spacing: 0.48px; } .body-air__styles__top-text-details-img { margin-left: auto; max-width: 500px; } .body-air__styles__top-text-details-img span { width: 240px; height: 110px; } .body-air__styles__top-text-details-img img { max-width: 220px; } } .body-air__features { position: relative; } .body-air__features .base-air__container { position: relative; padding-bottom: 40px; } .body-air__features .base-air__container::before { content: ''; position: absolute; inset: 16px 40px 0 0; background-color: #f7f6f2; border-bottom-right-radius: 40px; z-index: -1; } .body-air__features h3 { font-family: "Founders Grotesk", sans-serif; font-size: 32px; font-weight: 700 !important; line-height: 1; letter-spacing: 1.28px; margin-bottom: 40px; color: black; } .body-air__features ul { list-style-type: none; margin: 0; display: grid; gap: 30px 26px; padding: 0; } .body-air__features ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; position: relative; border: 1px solid rgba(0, 0, 0, .2); background-color: white; border-radius: 100rem; padding-right: 18px; } .body-air__features ul li span { -ms-flex-negative: 0; flex-shrink: 0; width: 100px; height: 100px; border-radius: 10rem; background-color: white; border: 1px solid black; display: grid; place-content: center; } .body-air__features ul li span img { max-width: 68px; } .body-air__features ul li small, .body-air__features ul li p { color: black; } .body-air__features ul li small { position: absolute; top: 0; left: 104px; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0.8px; padding-inline: 4px; -webkit-transform: translateY(-58%); transform: translateY(-58%); } .body-air__features ul li small::before { content: ''; position: absolute; top: 58%; left: 0; right: 0; height: 2px; background-color: white; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } .body-air__features ul li p { width: 100%; height: auto; font-family: "Founders Grotesk", sans-serif; font-size: 13px; font-weight: 500 !important; letter-spacing: 0.52px; margin: 0; } @media (min-width: 768px) { .body-air__features .base-air__container::before { top: 24px; left: -1000%; right: 100px; border-bottom-right-radius: 60px; } .body-air__features ul { grid-template-columns: repeat(4, 1fr); gap: 30px 20px; } .body-air__features ul li { grid-column: span 2; } .body-air__features ul li span { width: 120px; height: 120px; } .body-air__features ul li small { margin-left: 20px; font-size: 28px; letter-spacing: 2px; } .body-air__features ul li p { font-size: 14px; line-height: 22px; letter-spacing: 0.42px; } .body-air__features ul li:last-child { grid-column: 2 / span 2; } } @media (min-width: 1024px) { .body-air__features .base-air__container { padding-bottom: 100px; } .body-air__features .base-air__container::before { top: 24px; left: -1000%; right: 100px; border-bottom-right-radius: 60px; } .body-air__features h3 { font-size: 48px; letter-spacing: 1.92px; margin-bottom: 70px; } .body-air__features ul { grid-template-columns: repeat(3, 1fr); gap: 30px 20px; } .body-air__features ul li { grid-column: span 1; } .body-air__features ul li:last-child { grid-column: unset; } } .body-air__description { padding-block: 40px 55px; } .body-air__description h3, .body-air__description p { font-family: "Founders Grotesk", sans-serif; color: black; } .body-air__description h3 { text-align: center; font-size: 18px; font-weight: 600 !important; line-height: 170%; letter-spacing: 0.72px; margin-block: 60px 20px; } .body-air__description p { position: relative; font-size: 14px; font-weight: 400 !important; letter-spacing: 0.48px; line-height: 32px; max-width: 730px; margin-inline: auto; -webkit-mask-image: linear-gradient(290deg, transparent 30%, black 65%, black); mask-image: linear-gradient(290deg, transparent 30%, black 65%, black); -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 300% 100%; mask-size: 300% 100%; opacity: 0; } .body-air__description p.aos-animate { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; -webkit-transition: opacity 1200ms, -webkit-mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1); transition: opacity 1200ms, -webkit-mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1); transition: opacity 1200ms, mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1); transition: opacity 1200ms, mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1), -webkit-mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1); } @media (min-width: 768px) { .body-air__description .base-air__btn { max-width: 340px; margin-inline: auto; } } @media (min-width: 1024px) { .body-air__description { padding-block: 50px 105px; } .body-air__description h3 { font-size: 24px; letter-spacing: 0.96px; margin-block: 80px 16px; } } .body-air__lineup { position: relative; padding-bottom: 100px; } .body-air__lineup::before { content: ''; position: absolute; inset: 16px 0 0; background-color: #f7f6f2; z-index: -1; top: 19px; } .body-air__lineup h3 { font-family: "Founders Grotesk", sans-serif; font-size: 32px; font-weight: 700 !important; line-height: 1; letter-spacing: 1.28px; margin-bottom: 40px; } .body-air__lineup__list { list-style-type: none; margin: 0; padding: 0; display: grid; gap: 60px 20px; grid-template-columns: 1fr; } .body-air__lineup__item { width: 100%; max-width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; position: relative; } .body-air__lineup__item .base-air__btn { width: 100%; margin: 0 auto; } @media (min-width: 390px) { .body-air__lineup__item .base-air__btn { width: 326px; max-width: 326px; } } .body-air__lineup__item > .slick-slider { overflow: hidden; } .body-air__lineup__item > .slick-slider .slick-dots { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; gap: 4px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 16px 0 24px 0; list-style-type: none; margin-bottom: 0; } .body-air__lineup__item > .slick-slider .slick-dots > li > button { width: 32px; height: 32px; border: 1px solid transparent; border-radius: 10rem; outline: none; background-color: transparent; padding: 0; margin: 0; display: grid; place-content: center; cursor: pointer; } .body-air__lineup__item > .slick-slider .slick-dots > li > button img { width: 24px; height: 24px; -o-object-fit: cover; object-fit: cover; border-radius: inherit; } .body-air__lineup__item > .slick-slider .slick-dots .slick-active { border: 1px solid black; border-radius: 50%; background-color: white; } .body-air__lineup__item::before { content: attr(data-model); position: absolute; bottom: 71px; left: 0; font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 500 !important; letter-spacing: 0.36px; color: black; } .body-air__lineup-list { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 65px 16px; } .body-air__lineup-product { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .body-air__lineup-product-new, .body-air__lineup-product-tag { position: absolute; z-index: 1; color: #b47e00; font-weight: 500; line-height: 120%; letter-spacing: 0.12px; } .body-air__lineup-product-new { top: 13px; left: 12px; font-weight: 600; font-size: 16px; } .body-air__lineup-product-tag { top: 12px; right: 12px; height: 25px; padding-inline: 6px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 3px; border: 0.5px solid #b47e00; font-size: 14px; } .body-air__lineup-product-img { aspect-ratio: 900 / 563; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .body-air__lineup-product-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3px; } .body-air__lineup-product-info-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .body-air__lineup-product-model { font-size: 18px; font-weight: 500; line-height: 32px; letter-spacing: 0.8px; margin: 0; } .body-air__lineup-product-price { font-size: 18px; font-weight: 500; line-height: 21px; letter-spacing: 0.8px; margin: 0; } .body-air__lineup-product-price small { font-size: 12px; font-weight: 500; line-height: normal; letter-spacing: 0.48px; } .body-air__lineup-product-skus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .body-air__lineup-product-sku { width: 24px; height: 24px; border-radius: 10rem; border: none; outline: none; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; cursor: pointer; font: 0/0 a; margin: 4px; position: relative; } .body-air__lineup-product-sku::before { content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 32px; height: 32px; border: 1px solid black; border-radius: 160px; border-radius: 10rem; opacity: 0; } .body-air__lineup-product-sku.is-active::before { opacity: 1; } @media (min-width: 768px) { .body-air__lineup__list { grid-template-columns: repeat(2, 1fr); } .body-air__lineup__item:last-child { width: 50%; margin: 0 auto; grid-column: 1 / span 2; grid-row: 2; } .body-air__lineup__item::before { bottom: 69px; } .body-air__lineup-list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-air__lineup-list-item { max-width: 298px; } .body-air__lineup-product-new { top: 12px; left: 12px; font-size: 12px; letter-spacing: 0.12px; } .body-air__lineup-product-tag { top: 10px; right: 10px; height: 20px; font-size: 12px; letter-spacing: 0.12px; } .body-air__lineup-product-info { gap: 10px; } .body-air__lineup-product-model { font-size: 20px; line-height: 24px; letter-spacing: 0.8px; } .body-air__lineup-product-price { font-size: 20px; line-height: 13px; letter-spacing: 0.8px; } .body-air__lineup-product-skus { gap: 2px; } .body-air__lineup-product-sku { width: 18px; height: 18px; margin: 4px; } .body-air__lineup-product-sku::before { width: 24px; height: 24px; } } @media (min-width: 1024px) { .body-air__lineup::before { top: 24px; } .body-air__lineup h3 { font-size: 48px; letter-spacing: 1.92px; margin-bottom: 70px; } .body-air__lineup__list { grid-template-columns: repeat(3, 1fr); } .body-air__lineup__item { grid-column: span 1; } .body-air__lineup__item:last-child { width: 100%; grid-column: unset; grid-row: unset; } .body-air__lineup__item .base-air__btn { width: 340px; margin: 0 auto; } .body-air__lineup__item::before { font-size: 22px; letter-spacing: 0.88px; bottom: 80px; } .body-air__lineup-list { row-gap: 80px; } } .body-air__hottopic { padding-block: 80px 60px; } .body-air__hottopic__wrapper { position: relative; } .body-air__hottopic__title { position: absolute; top: 0; left: 50%; translate: -50% -50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; font-size: 32px; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: 1.28px; margin: 0; white-space: nowrap; } .body-air__hottopic__inner { border-radius: 20px; background: #f7f6f2; padding: 64px 16px 48px; display: grid; gap: 24px; } .body-air__hottopic__subtitle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; margin: 0 0 16px; } .body-air__hottopic__subtitle > span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding-inline: 8px; background-color: #000; -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } .body-air__hottopic__subtitle > span > span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: #fff; font-size: 16px; font-weight: 900; height: 32px; letter-spacing: 0.64px; -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); padding-top: 0.4em; line-height: 1; } .body-air__hottopic__subtitle.aos-animate > span { -webkit-animation: textclip 1s forwards; animation: textclip 1s forwards; } .body-air__hottopic__subtitle.aos-animate > span > span { -webkit-animation: textclip 1s forwards 0.3s; animation: textclip 1s forwards 0.3s; } .body-air__hottopic__text { font-size: 12px; font-weight: 500; line-height: 200%; letter-spacing: 0.48px; margin: 0; } .body-air__hottopic__features { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; list-style: none; padding: 0; margin: 0; } .body-air__hottopic__features li { position: relative; } .body-air__hottopic__features li p { position: absolute; top: 12px; left: 8px; right: 8px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin: 0; } .body-air__hottopic__features li p i { font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: 0.8px; font-style: normal; } .body-air__hottopic__features li p span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 24px; background-color: #fff; padding: 4px; font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.48px; } @media (min-width: 768px) { .body-air__hottopic { position: relative; height: 100vh; } .body-air__hottopic .base-air__container { position: sticky; top: 120px; } .body-air__hottopic__inner { grid-template-columns: repeat(2, 1fr); padding-bottom: 40px; } .body-air__hottopic__inner-right { height: 256px; overflow-y: hidden; } .body-air__hottopic__features { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform linear; transition: -webkit-transform linear; transition: transform linear; transition: transform linear, -webkit-transform linear; } } @media (min-width: 1024px) { .body-air__hottopic { padding-block: 120px 100px; } .body-air__hottopic__title { font-size: 56px; letter-spacing: 2.24px; } .body-air__hottopic__inner { padding: 120px 80px 40px; gap: 60px; } .body-air__hottopic__inner-right { height: 384px; } .body-air__hottopic__subtitle { margin-bottom: 33px; } .body-air__hottopic__subtitle > span { padding-inline: 16px; } .body-air__hottopic__subtitle > span > span { font-size: 24px; letter-spacing: 0.96px; height: 47px; } .body-air__hottopic__text { font-size: 16px; line-height: 2; letter-spacing: 0.64px; } .body-air__hottopic__features li p { top: 16px; left: 12px; right: 12px; gap: 16px; } .body-air__hottopic__features li p i { font-size: 32px; line-height: 38px; letter-spacing: 1.28px; } .body-air__hottopic__features li p span { font-size: 18px; letter-spacing: 0.72px; padding: 8px; } } @-webkit-keyframes textanicolor { 0% { color: black; } 50% { color: white; } 100% { color: black; } } @keyframes textanicolor { 0% { color: black; } 50% { color: white; } 100% { color: black; } } @-webkit-keyframes textani { 0% { width: 0; } 50% { width: 100%; left: 0; } 100% { width: 100%; left: 102%; } } @keyframes textani { 0% { width: 0; } 50% { width: 100%; left: 0; } 100% { width: 100%; left: 102%; } } @-webkit-keyframes textclip { from { -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); } to { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } @keyframes textclip { from { -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); } to { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } .footer-air__recommended { position: relative; padding-block: 80px 100px; } .footer-air__recommended h2 { text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 24px; font-weight: 600 !important; letter-spacing: .48px; line-height: 1.25; margin-bottom: 60px; color: black; } .footer-air__recommended ul { list-style-type: none; margin: 0; padding: 0; display: grid; gap: 40px 35px; } .footer-air__recommended ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .footer-air__recommended ul li img { display: block; aspect-ratio: 39 / 23; margin-bottom: 16px; -webkit-transition: all .3s ease; transition: all .3s ease; } .footer-air__recommended ul li h3, .footer-air__recommended ul li p { font-family: "Founders Grotesk", sans-serif; color: black; margin: 0 0 10px 0; } .footer-air__recommended ul li h3 { font-size: 18px; font-weight: 600 !important; line-height: 1.25; letter-spacing: .72px; } .footer-air__recommended ul li p, .footer-air__recommended ul li a { font-family: heisei-maru-gothic-std, sans-serif; font-size: 14px; font-weight: 500 !important; } .footer-air__recommended ul li p { font-weight: 500 !important; letter-spacing: .28px; line-height: 2; } .footer-air__recommended ul li a { outline: none; text-decoration: none; -webkit-transition: .5s; transition: .5s; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: #0094c8; line-height: 1; letter-spacing: .56px; } .footer-air__recommended ul li a::before { content: ""; position: absolute; inset: 0; } @media (min-width: 768px) { .footer-air__recommended ul { display: grid; grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .footer-air__recommended { padding-block: 140px; } .footer-air__recommended h2 { font-size: 36px; letter-spacing: 0.72px; margin-bottom: 100px; } .footer-air__recommended ul { grid-row-gap: 60px; } .footer-air__recommended ul li h3 { font-size: 24px; letter-spacing: 1.44px; line-height: 1; } .footer-air__recommended ul li:hover img { opacity: .6; } } .footer-air__navs-sticky { position: relative; bottom: 0; width: 100%; height: 55px; z-index: 2; } .footer-air__navs-sticky .base-air__container { padding-inline: 0; } .footer-air__navs-sticky .base-air__btn { width: 160px !important; height: 55px; border-radius: 0; white-space: nowrap; } .footer-air__navs-sticky .base-air__btn--primary { border-top-left-radius: 15px !important; } .footer-air__navs-sticky__inner { position: fixed; bottom: 0; width: 100%; height: auto; } .footer-air__navs-sticky__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; max-width: 823px; margin: 0 auto; } @media (min-width: 768px) { .footer-air__navs-sticky { bottom: 47px; } .footer-air__navs-sticky .base-air__btn { width: 340px !important; border-radius: 10px !important; } .footer-air__navs-sticky__actions { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 40px; max-width: none; } .footer-air__navs-sticky__inner { background-color: rgba(0, 0, 0, .4); padding: 24px 0; } } .base-air__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1280px; height: auto; } .base-air__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid transparent; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 600 !important; letter-spacing: 0.12px; height: 40px; border-radius: 10px; padding-inline: 40px; -webkit-transition: 0.5s; transition: 0.5s; } .base-air__btn--primary { background-color: #292929; border-color: #292929; color: white; } .base-air__btn--primary:hover, .base-air__btn--primary:focus { color: white; } .base-air__btn--secondary { background-color: white; border-color: #535353; color: #535353; } .base-air__btn--secondary:hover, .base-air__btn--secondary:focus { color: #535353; } @media (min-width: 1024px) { .base-air__btn { height: 54px; font-size: 19.2px; letter-spacing: 0.8px; } .base-air__btn:hover, .base-air__btn:active, .base-air__btn:visited, .base-air__btn:focus { text-decoration: none; } .base-air__btn--primary:hover { background-color: #535353; border-color: #535353; color: white; } .base-air__btn--secondary:hover { background-color: #535353; color: white; } } .base-air__hide--sp { display: none; } .base-air__hide--pc { display: block; } @media (min-width: 768px) { .base-air__hide--sp { display: block; } .base-air__hide--pc { display: none; } } .base-air__scroll-hidden { overflow: clip; } @charset "UTF-8"; .od-privacy { font-family: "Founders Grotesk", sans-serif; width: 100%; color: #000000; letter-spacing: 1px; margin-bottom: 60px; } .od-privacy__title-container { border-bottom: 1px solid #e3e3e3; max-width: 768px; margin: 0 auto; } @media (min-width: 426px) and (max-width: 768px) { .od-privacy__title-container { margin: 0 35px; } } @media (max-width: 425px) { .od-privacy__title-container { width: 100%; padding: 0 20px; } } .od-privacy__title-container div { width: 100%; font-size: 20px; line-height: 40px; } @media (min-width: 425px) { .od-privacy__title-container div { text-align: justify; } } @media (max-width: 425px) { .od-privacy__title-container div { text-align: left; margin: 0; } } .od-privacy__title-container div p { font-family: "Founders Grotesk", sans-serif; font-size: 15px; line-height: 30px; font-weight: 400; margin: 0 !important; } .od-privacy__title { margin: 60px 0 !important; font-size: 18px; font-weight: 600; line-height: 18px; text-align: center; } @media (max-width: 425px) { .od-privacy__title { font-size: 18px; margin: 0; } } .od-privacy__content { font-family: "Founders Grotesk", sans-serif; max-width: 768px; margin: 60px auto 0; border-bottom: 1px solid #e3e3e3; padding-bottom: 40px; } @media (max-width: 768px) { .od-privacy__content { margin-left: 5%; margin-right: 5%; } } .od-privacy__content div { width: 100%; font-size: 20px; line-height: 40px; } @media (min-width: 425px) { .od-privacy__content div { text-align: justify; } } @media (max-width: 767px) { .od-privacy__content div { text-align: left; margin: 0; } } .od-privacy__content div h3 { font-family: "Founders Grotesk", sans-serif; margin: 20px 0; font-weight: 600; font-size: 16px; line-height: 30px; } .od-privacy__content div h4 { font-family: "Founders Grotesk", sans-serif; font-size: 15px; line-height: 30px; } .od-privacy__content div p { font-family: "Founders Grotesk", sans-serif; font-size: 15px; line-height: 30px; font-weight: 400; padding-left: 20px; } .od-privacy__content div a { color: #0094c8; font-family: "Founders Grotesk", sans-serif; text-decoration: none; } .od-privacy__content div a:hover { color: #007eaa !important; } .od-privacy__content div ul { width: 100%; padding: 0; margin: 0; font-family: "Founders Grotesk", sans-serif; } .od-privacy__content div ul li { width: 100%; list-style: none; padding-left: 30px; text-indent: -15px; line-height: 30px; margin-bottom: 10px; font-size: 15px; } .od-privacy__content div ul li::marker { content: ''; } .od-privacy__content div ul li::before { content: '・'; font-size: 15px; } .od-privacy__updated { text-align: right; } @charset "UTF-8"; .od-terms { font-family: "Founders Grotesk", sans-serif; width: 100%; color: #000000; letter-spacing: 1px; margin-bottom: 60px; } .od-terms__title-container { border-bottom: 1px solid #e3e3e3; max-width: 768px; margin: 0 auto; } @media (min-width: 426px) and (max-width: 768px) { .od-terms__title-container { margin: 0 35px; } } @media (max-width: 425px) { .od-terms__title-container { width: 100%; padding: 0 20px; } } .od-terms__title-container div { width: 100%; font-size: 20px; line-height: 40px; } @media (min-width: 425px) { .od-terms__title-container div { text-align: justify; } } @media (max-width: 425px) { .od-terms__title-container div { text-align: left; margin: 0; } } .od-terms__title-container div p { font-family: "Founders Grotesk", sans-serif; font-size: 15px; line-height: 30px; font-weight: 400; margin: 0 !important; } .od-terms__title { margin: 60px 0 !important; font-size: 18px; font-weight: 600; line-height: 18px; text-align: center; } @media (max-width: 425px) { .od-terms__title { font-size: 18px; margin: 0; } } .od-terms__content { font-family: "Founders Grotesk", sans-serif; max-width: 768px; margin: 60px auto 0; border-bottom: 1px solid #e3e3e3; padding-bottom: 40px; } @media (max-width: 768px) { .od-terms__content { margin-left: 5%; margin-right: 5%; } } .od-terms__content-section p { padding-left: 0 !important; } .od-terms__content div { width: 100%; font-size: 20px; line-height: 40px; } @media (min-width: 425px) { .od-terms__content div { text-align: justify; } } @media (max-width: 767px) { .od-terms__content div { text-align: left; margin: 0; } } .od-terms__content div h3 { font-family: "Founders Grotesk", sans-serif; margin: 20px 0; font-weight: 600; font-size: 16px; line-height: 30px; } .od-terms__content div h4 { font-family: "Founders Grotesk", sans-serif; font-size: 15px; line-height: 30px; } .od-terms__content div p { font-family: "Founders Grotesk", sans-serif; font-size: 15px; line-height: 30px; font-weight: 400; padding-left: 20px; } .od-terms__content div a { color: #0094c8; font-family: "Founders Grotesk", sans-serif; text-decoration: none; } .od-terms__content div a:hover { color: #007eaa !important; } .od-terms__content div ul { width: 100%; padding: 0; margin: 0; font-family: "Founders Grotesk", sans-serif; } .od-terms__content div ul li { width: 100%; list-style: none; padding-left: 30px; text-indent: -15px; line-height: 30px; margin-bottom: 10px; font-size: 15px; } .od-terms__content div ul li::marker { content: ''; } .od-terms__content div ul li::before { content: '・'; font-size: 15px; } .header-kimetsu__main { background-color: #22140b; position: relative; padding-bottom: 24px; } .header-kimetsu__main--ban-dai { position: absolute; top: 16px; right: 16px; width: 47px; height: 47px; -o-object-fit: contain; object-fit: contain; } .header-kimetsu__main--kimetsu { display: block; width: 235px; height: 222px; margin: 0px auto 50px; } @media (max-width: 767px) { .header-kimetsu__main--kimetsu { width: 123px; height: 101px; margin: 0; } } .header-kimetsu__main--owndays { position: absolute; width: 174px; height: 174px; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-owndays.svg") no-repeat center center/contain; color: white; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-kimetsu__main--owndays h5, .header-kimetsu__main--owndays h6 { font-family: "Noto Sans JP", sans-serif; } .header-kimetsu__main--owndays h5 { font-size: 11px; font-weight: 700 !important; margin-bottom: 5px; } .header-kimetsu__main--owndays h6 { font-size: 9px; font-weight: 500 !important; margin: 0; } .header-kimetsu__main--owndays h6 small { font-size: 8px; font-weight: 500; } .header-kimetsu__main--owndays img { height: 25px; width: auto; } .header-kimetsu__main__heading { color: white; text-align: center; position: relative; } .header-kimetsu__main__heading-bg { display: block; position: absolute; top: -42px; left: 135px; width: 346px; height: auto; max-width: none; } @media (min-width: 768px) { .header-kimetsu__main__heading-bg { top: -60px; left: 270px; width: 700px; } } .header-kimetsu__main__heading h1 { position: relative; font-family: "Noto Serif JP", serif; font-weight: 900 !important; font-size: 16px; line-height: 1.25; margin: -11px 0 0 0; letter-spacing: 0.05em; line-height: 1.4; } .header-kimetsu__main__heading h1 span { display: block; font-weight: 700 !important; font-size: 11px; margin-bottom: 4px; } @media (min-width: 1024px) { .header-kimetsu__main-inner { max-width: 500px; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .header-kimetsu__main-inner .header-kimetsu__main--kimetsu { width: 235px; height: 222px; margin: 0px auto 50px; } .header-kimetsu__main__heading-bg { top: -10%; left: 5%; width: 493px; } .header-kimetsu__main__heading-bg h1 { font-size: 56px; } .header-kimetsu__main__heading-bg h1 span { font-size: 20px; } } .header-kimetsu__main--img { display: block; max-width: 670px; margin-left: auto; margin-right: -36px; } @media (max-width: 1023px) { .header-kimetsu__main--img { max-width: 97%; } } @media (max-width: 767px) { .header-kimetsu__main--img { max-width: 100%; } } @media (min-width: 1024px) { .header-kimetsu__main--ban-dai { width: 90px; height: 90px; top: 42px; right: -33px; } } @media (min-width: 768px) { .header-kimetsu__main--owndays { bottom: -43px; right: 0; width: 297px; height: 297px; } .header-kimetsu__main--owndays h5 { font-size: 18px; line-height: 25px; margin: 0 0 8px 0; } .header-kimetsu__main--owndays h6 { font-size: 15px; } .header-kimetsu__main--owndays h6 small { font-size: 14px; } .header-kimetsu__main--owndays img { width: 109px; height: 43px; } .header-kimetsu__main__heading { margin-bottom: 40px; } .header-kimetsu__main__heading h1 { font-size: 36px; } } @media (min-width: 768px) and (max-width: 1023px) { .header-kimetsu__main__heading h1 { margin-right: 10%; } } @media (min-width: 768px) and (max-width: 767px) { .header-kimetsu__main__heading h1 { margin-right: 0; } } @media (min-width: 768px) { .header-kimetsu__main__heading h1 span { font-size: 16px; letter-spacing: 0.1em; margin-bottom: 8px; } } @media (max-width: 1023px) { .header-kimetsu__main { padding-bottom: 24px; } .header-kimetsu__main > .base-kimetsu__container { padding-left: 0; padding-right: 0; } .header-kimetsu__main--owndays { top: 60%; left: 3%; } .header-kimetsu__main--kimetsu { position: absolute; top: 3%; left: 3%; } .header-kimetsu__main__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin: -40px 16px 12px 0; } } @media (max-width: 767px) { .header-kimetsu__main--owndays { left: -3%; } .header-kimetsu__main__heading { margin: 15px 16px 12px 0; } } .header-kimetsu__sub { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/sub-bg.png") no-repeat center bottom/cover; color: white; padding: 54px 0 80px; } .header-kimetsu__sub-title { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 38px; } .header-kimetsu__sub-title-line { display: block; border-top: 1px solid white; border-bottom: 1px solid white; height: 16px; width: 100%; position: relative; } .header-kimetsu__sub-title-line::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; width: 100%; background-color: white; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .header-kimetsu__sub-title-line--dark { border-top: 1px solid black; border-bottom: 1px solid black; } .header-kimetsu__sub-title-line--dark::before { background-color: black; } .header-kimetsu__sub-title-text { font-family: "Noto Serif JP", serif; font-size: 21px; font-weight: 700 !important; white-space: nowrap; padding: 0 23px; } @media (min-width: 768px) { .header-kimetsu__sub-title-line { height: 20px; } .header-kimetsu__sub-title-text { font-size: 38px; line-height: 55px; } } .header-kimetsu__sub-text { font-weight: 400 !important; font-size: 13px; letter-spacing: .52px; line-height: 2; margin-bottom: 35px; } @media (min-width: 768px) { .header-kimetsu__sub-text { font-size: 16px; margin-bottom: 40px; } } @media (min-width: 768px) and (max-width: 1023px) { .header-kimetsu__sub-text { letter-spacing: .26px; } } .header-kimetsu__sub__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -7px; padding: 0; } .header-kimetsu__sub__nav-item { list-style-type: none; width: 33.33333%; padding: 0 7px; } .header-kimetsu__sub__nav-link { background-color: #434343; border: 1.5px solid #86846A; position: relative; display: inline-block; margin-bottom: 58px; -webkit-transition: .5s; transition: .5s; cursor: pointer; } .header-kimetsu__sub__nav-link::before { content: ''; position: absolute; top: calc(100% + 13px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 40px; height: 19px; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/arrow-down.svg") no-repeat center center/contain; } .header-kimetsu__sub__nav-link:hover { color: #999; text-decoration: none; } .header-kimetsu__sub__nav-link:hover img { opacity: .6; -webkit-transition: .5s; transition: .5s; } .header-kimetsu__sub__nav-img { position: relative; } .header-kimetsu__sub__nav-img::before, .header-kimetsu__sub__nav-img::after { content: ''; position: absolute; top: 1px; border-bottom: 13px solid transparent; z-index: 1; } .header-kimetsu__sub__nav-img::before { left: 1px; border-left: 13px solid #86846A; } .header-kimetsu__sub__nav-img::after { right: 1px; border-right: 13px solid #86846A; } .header-kimetsu__sub__nav-title { color: white; font-family: "Noto Serif JP", serif; font-size: 12px; font-weight: 700; text-align: center; padding: 4px 0 5px; margin: 0; letter-spacing: .01em; } @media (min-width: 768px) { .header-kimetsu__sub__nav-title { font-size: 15px; line-height: 2; } } @media (min-width: 768px) { .header-kimetsu__sub { text-align: center; padding-top: 100px; padding-bottom: 150px; } .header-kimetsu__sub-title-text { padding-left: 62px; padding-right: 62px; letter-spacing: .2em; } .header-kimetsu__sub__nav-item { width: 25%; } .header-kimetsu__sub__nav-link { border-width: 2.5px; margin-bottom: 65px; } .header-kimetsu__sub__nav-link::before { top: calc(100% + 14px); width: 50px; height: 24px; } } .body-kimetsu__sec { position: relative; padding-top: 23px; padding-bottom: 45px; } .body-kimetsu__sec::before, .body-kimetsu__sec::after { content: ''; position: absolute; } .body-kimetsu__sec::before { left: 0; right: 0; width: 100%; height: 100%; } .body-kimetsu__sec::after { left: 0; right: 0; bottom: 0; width: 100%; height: 358px; } .body-kimetsu__sec > .base-kimetsu__container > *:not(.body-kimetsu__sec-img):not(.body-kimetsu__sec-subtitle) { z-index: 2; } .body-kimetsu__sec-img { position: absolute; top: -40px; max-width: 764px; z-index: 1; } @media (max-width: 767px) { .body-kimetsu__sec-img { max-width: 360px; } } .body-kimetsu__sec-number { font-family: "Noto Serif JP", serif; font-size: 131px; font-weight: 300 !important; line-height: 188px; } .body-kimetsu__sec-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .body-kimetsu__sec-title img { width: auto; height: 82.5px; } @media (max-width: 1023px) { .body-kimetsu__sec-title img { height: 70px; } } @media (max-width: 767px) { .body-kimetsu__sec-title img { height: 55px; } } .body-kimetsu__sec-subtitle { position: relative; font-family: "Noto Serif JP", serif; font-size: 50px; font-weight: 500; color: #D6D6D6; letter-spacing: 2.5px; line-height: 56px; margin-bottom: 32px; } .body-kimetsu__sec-badge { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 148px; height: 148px; text-align: center; line-height: 1; color: white !important; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-owndays.svg") no-repeat center center/contain; } .body-kimetsu__sec-badge-header { font-family: "Noto Sans JP", sans-serif; font-size: 11px; font-weight: 800 !important; margin-top: 12px; margin-bottom: 4px; } .body-kimetsu__sec-badge-body { font-family: "Noto Sans JP", sans-serif; font-size: 8px; font-weight: 700 !important; letter-spacing: 0.8px; margin-bottom: 4px; } .body-kimetsu__sec-badge-body span { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 10px; font-weight: 700 !important; } .body-kimetsu__sec-badge-body span strong { font-family: "NeuzeitGroBold"; font-size: 20px; font-weight: normal !important; color: white !important; } .body-kimetsu__sec-badge-body span small { font-family: "Noto Sans JP", sans-serif; font-size: 60%; line-height: 1; } .body-kimetsu__sec-badge-footer { font-size: 6px; } @media (min-width: 1024px) { .body-kimetsu__sec-badge { width: 206px; height: 206px; } .body-kimetsu__sec-badge-header, .body-kimetsu__sec-badge-body { line-height: 1.1; } .body-kimetsu__sec-badge-header { font-size: 16px; margin-top: 10px; margin-bottom: 2px; } .body-kimetsu__sec-badge-body { font-size: 14px; margin-bottom: 0; } .body-kimetsu__sec-badge-body span { font-size: 12px; margin-top: 5px; } .body-kimetsu__sec-badge-body span strong { font-size: 18px; } .body-kimetsu__sec-badge-body span small { font-size: 8px; } } @media (min-width: 1024px) and (max-width: 1023px) { .body-kimetsu__sec-badge-body span small { display: none; } } @media (min-width: 1024px) { .body-kimetsu__sec-badge-footer { font-size: 8px; } } .body-kimetsu__sec-slider { margin-bottom: 131px !important; padding-left: 15px; padding-right: 15px; } .body-kimetsu__sec-slider > .slick-arrow { position: absolute; top: auto; bottom: -51px; width: 14px; height: 27px; background-repeat: no-repeat; background-position: center center; background-size: contain; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .body-kimetsu__sec-slider > .slick-arrow::before { display: none; } .body-kimetsu__sec-slider > .slick-prev, .body-kimetsu__sec-slider > .slick-next { background-color: transparent; color: transparent; border: 0; } .body-kimetsu__sec-slider > .slick-prev { left: 0; background-image: url("https://static.lenskart.com/media/owndays/img/kimetsu/arrow-left-black.svg"); } .body-kimetsu__sec-slider > .slick-next { right: 0; background-image: url("https://static.lenskart.com/media/owndays/img/kimetsu/arrow-right-black.svg"); } .body-kimetsu__sec-slider > .slick-dots { position: absolute; left: 33px; right: 33px; bottom: -39.5px; width: auto; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; list-style-type: none; } .body-kimetsu__sec-slider > .slick-dots li { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0; height: 4px; } .body-kimetsu__sec-slider > .slick-dots li.slick-active button { opacity: 1; } .body-kimetsu__sec-slider > .slick-dots li button { padding: 0; width: 100%; height: 100%; background-color: black; opacity: 0.1; color: transparent; border: 0; } .body-kimetsu__sec-slider > .slick-dots li button::before { display: none; } .body-kimetsu__sec-des { margin-bottom: 126px; letter-spacing: 1px; line-height: 2; color: black; } @media (max-width: 1023px) { .body-kimetsu__sec-des { margin-bottom: 0; } } @media (max-width: 767px) { .body-kimetsu__sec-des { font-family: "Noto Sans JP", sans-serif; font-size: 13px; margin-bottom: 50px; } } .body-kimetsu__sec-details { position: relative; z-index: 2; } .body-kimetsu__sec-details-price { margin-bottom: 15px; color: black; } .body-kimetsu__sec-details-price h5, .body-kimetsu__sec-details-price p { margin: 0; } .body-kimetsu__sec-details-price h5 { font-family: "Noto Serif JP", serif; font-size: 24px; font-weight: 700 !important; } .body-kimetsu__sec-details-price h5 small { font-size: 14px; } .body-kimetsu__sec-details-price p { font-size: 10px; } .body-kimetsu__sec-details-btn { font-family: "Noto Serif JP", serif; font-size: 13px; font-weight: 700 !important; padding: 16px; display: block; text-align: center; color: white; margin-bottom: 28px; position: relative; } .body-kimetsu__sec-details-btn::before, .body-kimetsu__sec-details-btn::after { content: ''; position: absolute; } .body-kimetsu__sec-details-btn::before { top: 3px; left: 3px; right: 3px; bottom: 3px; border: 1px solid rgba(255, 255, 255, .5); } .body-kimetsu__sec-details-btn::after { top: 50%; right: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; height: 14px; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/arrow-right.svg") no-repeat center center/contain; } .body-kimetsu__sec-details-btn-wrap[disabled] { pointer-events: none; position: relative; } .body-kimetsu__sec-details-btn-wrap[disabled]::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 2; background-color: rgba(128, 128, 128, .9); } .body-kimetsu__sec-details dl { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 13px; color: #646464; letter-spacing: 1px; margin: 0; } .body-kimetsu__sec-details dl dt, .body-kimetsu__sec-details dl dd { line-height: 2 !important; } .body-kimetsu__sec-details dl dt { min-width: 85px; font-weight: 400 !important; } .body-kimetsu__sec-details dl dd { margin: 0; } @media (max-width: 767px) { .body-kimetsu__sec-details dl dt, .body-kimetsu__sec-details dl dd { line-height: 1.7 !important; } } @media (min-width: 1024px) { .body-kimetsu__sec-details-btn { margin-bottom: 0 !important; } .body-kimetsu__sec-details-right { padding-left: 15px; } } @media (min-width: 1024px) { .body-kimetsu__sec-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .body-kimetsu__sec-details-left { width: 540px; } .body-kimetsu__sec-slider, .body-kimetsu__sec-slider-nav, .body-kimetsu__sec-des { max-width: 540px; padding-left: 0; padding-right: 0; } .body-kimetsu__sec-subtitle { white-space: nowrap; position: absolute; top: 11.7%; } } @media (min-width: 1024px) { .body-kimetsu__sec-img { top: auto; bottom: 50px; } } @media (min-width: 768px) { .body-kimetsu__sec { padding-top: 80px; padding-bottom: 55px; } .body-kimetsu__sec::after { height: 272px; } .body-kimetsu__sec-number { font-size: 225px; line-height: 280px; } .body-kimetsu__sec-img { top: -300px; } .body-kimetsu__sec-slider { margin-bottom: 182px !important; padding-left: 15px; padding-right: 15px; } .body-kimetsu__sec-slider .slick-arrow { bottom: -90px; width: 26px; height: 50px; } .body-kimetsu__sec-slider .slick-dots { left: 58px; right: 58px; bottom: -68px; } .body-kimetsu__sec-slider .slick-dots li button { height: 6px; } .body-kimetsu__sec-subtitle { font-size: 103px; line-height: 1.1; letter-spacing: 12px; } .body-kimetsu__sec-des { font-size: 14px; min-height: 145px; } .body-kimetsu__sec-details-price h5 { font-size: 31px; line-height: 1.2; } .body-kimetsu__sec-details-price h5 small { font-size: 12px; } .body-kimetsu__sec-details-btn { margin-bottom: 0; font-size: 16px; padding: 26px 16px; margin-bottom: 28px; } .body-kimetsu__sec-details-btn::before { top: 5px; left: 5px; right: 5px; bottom: 5px; } .body-kimetsu__sec-details-btn:after { width: 15px; height: 28px; right: 20px; } .body-kimetsu__sec2-slider, .body-kimetsu__sec2-slider-nav, .body-kimetsu__sec2-des, .body-kimetsu__sec4-slider, .body-kimetsu__sec4-slider-nav, .body-kimetsu__sec4-des, .body-kimetsu__sec6-slider, .body-kimetsu__sec6-slider-nav, .body-kimetsu__sec6-des { margin-left: auto; } .body-kimetsu__sec2 .body-kimetsu__sec-details-left, .body-kimetsu__sec4 .body-kimetsu__sec-details-left, .body-kimetsu__sec6 .body-kimetsu__sec-details-left { text-align: right; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .body-kimetsu__sec2 .body-kimetsu__sec-details-right, .body-kimetsu__sec4 .body-kimetsu__sec-details-right, .body-kimetsu__sec6 .body-kimetsu__sec-details-right { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media (max-width: 767px) { .body-kimetsu__sec-subtitle { margin-top: -19px; } } .body-kimetsu__sec1::before { top: 20%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-green-50.svg") no-repeat center top/100% auto; } .body-kimetsu__sec1::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55.svg") no-repeat center top/cover; } .body-kimetsu__sec1-img { right: -120px; } @media (max-width: 1023px) { .body-kimetsu__sec1-img { right: -180px; } } @media (max-width: 767px) { .body-kimetsu__sec1-img { right: -60px; } } .body-kimetsu__sec1-title { margin-left: -25px; } @media (max-width: 1023px) { .body-kimetsu__sec1-title { margin-left: -60px; } } @media (max-width: 767px) { .body-kimetsu__sec1-title { margin-left: -20px; } } .body-kimetsu__sec1-number { color: #2B7C62; margin-right: 22px; } @media (max-width: 1023px) { .body-kimetsu__sec1-number { margin-right: 10px; } } .body-kimetsu__sec1-subtitle { left: 9%; } @media (max-width: 1023px) { .body-kimetsu__sec1-subtitle { left: -6%; } } @media (max-width: 767px) { .body-kimetsu__sec1-subtitle { margin-left: 4%; } } .body-kimetsu__sec1-details-btn { background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#1C5240)); background-image: linear-gradient(#000000, #1C5240); } @media (min-width: 1024px) { .body-kimetsu__sec1 { z-index: 3; } .body-kimetsu__sec1::before { top: 28%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-green-50@2x.svg") no-repeat center top/100% auto; } .body-kimetsu__sec1::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55@2x.svg") no-repeat center top/cover; } } .body-kimetsu__sec2::before { top: 20%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-pink-50.svg") no-repeat center top/100% auto; } .body-kimetsu__sec2::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55-2.svg") no-repeat center top/cover; } .body-kimetsu__sec2-img { left: -120px; } @media (max-width: 1023px) { .body-kimetsu__sec2-img { left: -180px; } } @media (max-width: 767px) { .body-kimetsu__sec2-img { left: -60px; } } .body-kimetsu__sec2-title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-right: -25px; } @media (max-width: 1023px) { .body-kimetsu__sec2-title { margin-right: -60px; } } @media (max-width: 767px) { .body-kimetsu__sec2-title { margin-right: -20px; } } .body-kimetsu__sec2-subtitle { right: 9%; } @media (max-width: 1023px) { .body-kimetsu__sec2-subtitle { right: -6%; text-align: right; } } @media (max-width: 767px) { .body-kimetsu__sec2-subtitle { margin-right: 4%; } } .body-kimetsu__sec2-number { color: #A0334A; margin-left: 22px; } @media (max-width: 1023px) { .body-kimetsu__sec2-number { margin-left: 10px; } } .body-kimetsu__sec2-details-btn { background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#561A2B)); background-image: linear-gradient(#000000, #561A2B); } @media (min-width: 768px) { .body-kimetsu__sec2 { z-index: 2; } .body-kimetsu__sec2::before { top: 26%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-pink-50@2x.svg") no-repeat center top/100% auto; } .body-kimetsu__sec2::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55-2@2x.svg") no-repeat center top/cover; } } .body-kimetsu__sec3::before { top: 21%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-orange-50.svg") no-repeat center top/100% auto; } .body-kimetsu__sec3::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55.svg") no-repeat center top/cover; } .body-kimetsu__sec3-img { right: -120px; } @media (max-width: 1023px) { .body-kimetsu__sec3-img { right: -180px; } } @media (max-width: 767px) { .body-kimetsu__sec3-img { right: -60px; } } .body-kimetsu__sec3-title { margin-left: -25px; } @media (max-width: 1023px) { .body-kimetsu__sec3-title { margin-left: -60px; } } @media (max-width: 767px) { .body-kimetsu__sec3-title { margin-left: -20px; } } .body-kimetsu__sec3-subtitle { left: 11.5%; } @media (max-width: 1023px) { .body-kimetsu__sec3-subtitle { text-align: left; left: -6%; } } @media (max-width: 767px) { .body-kimetsu__sec3-subtitle { margin-left: 4%; } } .body-kimetsu__sec3-number { color: #CE5623; margin-right: 22px; } @media (max-width: 1023px) { .body-kimetsu__sec3-number { margin-right: 10px; } } .body-kimetsu__sec3-details-btn { background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#813515)); background-image: linear-gradient(#000000, #813515); } @media (min-width: 768px) { .body-kimetsu__sec3 { z-index: 1; } .body-kimetsu__sec3::before { top: 27%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-orange-50@2x.svg") no-repeat center top/100% auto; } .body-kimetsu__sec3::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55@2x.svg") no-repeat center top/cover; } } .body-kimetsu__sec4::before { top: 20.5%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-sky-50.svg") no-repeat center top/100% auto; } .body-kimetsu__sec4::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55-2.svg") no-repeat center top/cover; } .body-kimetsu__sec4-img { left: -120px; } @media (max-width: 767px) { .body-kimetsu__sec4-img { left: -8%; } } .body-kimetsu__sec4-title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-right: -25px; } @media (max-width: 1023px) { .body-kimetsu__sec4-title { margin-right: -60px; } } @media (max-width: 767px) { .body-kimetsu__sec4-title { margin-right: -20px; } } .body-kimetsu__sec4-subtitle { right: 9%; } @media (max-width: 1023px) { .body-kimetsu__sec4-subtitle { text-align: right; right: -6%; } } @media (max-width: 767px) { .body-kimetsu__sec4-subtitle { margin-right: 4%; } } .body-kimetsu__sec4-number { color: #5585A4; margin-left: 22px; } @media (max-width: 1023px) { .body-kimetsu__sec4-number { margin-left: 10px; } } .body-kimetsu__sec4-details-btn { background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#013C6F)); background-image: linear-gradient(#000000, #013C6F); } @media (min-width: 768px) { .body-kimetsu__sec4 { z-index: 0; } .body-kimetsu__sec4::before { top: 27%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-sky-50@2x.svg") no-repeat center top/100% auto; } .body-kimetsu__sec4::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55-2@2x.svg") no-repeat center top/cover; } } .body-kimetsu__sec5::before { top: 21%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-blue-50.svg") no-repeat center top/100% auto; } .body-kimetsu__sec5::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55.svg") no-repeat center top/cover; } .body-kimetsu__sec5-img { right: -120px; bottom: 40px; top: -160px; } @media (max-width: 1023px) { .body-kimetsu__sec5-img { top: -170px; } } @media (max-width: 767px) { .body-kimetsu__sec5-img { max-width: 350px; top: 37px; right: -60px; } } .body-kimetsu__sec5-title { margin-left: -25px; } @media (max-width: 1023px) { .body-kimetsu__sec5-title { margin-left: -60px; } } @media (max-width: 767px) { .body-kimetsu__sec5-title { margin-left: -20px; } } .body-kimetsu__sec5-subtitle { left: 9%; } @media (max-width: 1023px) { .body-kimetsu__sec5-subtitle { text-align: left; left: -6%; } } @media (max-width: 767px) { .body-kimetsu__sec5-subtitle { margin-left: 4%; } } .body-kimetsu__sec5-number { color: #283D86; margin-right: 22px; } @media (max-width: 1023px) { .body-kimetsu__sec5-number { margin-right: 10px; } } .body-kimetsu__sec5-details-btn { background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#22336F)); background-image: linear-gradient(#000000, #22336F); } @media (min-width: 768px) { .body-kimetsu__sec5::before { top: 28%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-blue-50@2x.svg") no-repeat center top/100% auto; } .body-kimetsu__sec5::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55@2x.svg") no-repeat center top/cover; } } .body-kimetsu__sec6::before { top: 20.5%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-purple-50.svg") no-repeat center top/100% auto; } .body-kimetsu__sec6::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55-2.svg") no-repeat center top/cover; } .body-kimetsu__sec6-img { left: -120px; } @media (max-width: 1023px) { .body-kimetsu__sec6-img { left: -180px; } } @media (max-width: 767px) { .body-kimetsu__sec6-img { left: -16%; } } .body-kimetsu__sec6-title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-right: -25px; } @media (max-width: 1023px) { .body-kimetsu__sec6-title { margin-right: -60px; } } @media (max-width: 767px) { .body-kimetsu__sec6-title { margin-right: -20px; } } .body-kimetsu__sec6-subtitle { right: 9%; } @media (max-width: 1023px) { .body-kimetsu__sec6-subtitle { text-align: right; right: -6%; } } @media (max-width: 767px) { .body-kimetsu__sec6-subtitle { margin-right: 4%; } } .body-kimetsu__sec6-number { color: #452D60; margin-left: 22px; } @media (max-width: 1023px) { .body-kimetsu__sec6-number { margin-left: 10px; } } .body-kimetsu__sec6-details-btn { background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#452D60)); background-image: linear-gradient(#000000, #452D60); } @media (min-width: 768px) { .body-kimetsu__sec6::before { top: 27%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-purple-50@2x.svg") no-repeat center top/100% auto; } .body-kimetsu__sec6::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55-2@2x.svg") no-repeat center top/cover; } } .body-kimetsu__sec7::before { top: 21%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-red-50.svg") no-repeat center top/100% auto; } .body-kimetsu__sec7::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55.svg") no-repeat center top/cover; } .body-kimetsu__sec7-img { right: -30%; top: -18%; } @media (max-width: 767px) { .body-kimetsu__sec7-img { max-width: 350px; top: 0px; right: -90px; } } @media (min-width: 1024px) { .body-kimetsu__sec7-img { top: -22rem; right: -10rem; } } .body-kimetsu__sec7-title { margin-left: -25px; } @media (max-width: 1023px) { .body-kimetsu__sec7-title { margin-left: -60px; } } @media (max-width: 767px) { .body-kimetsu__sec7-title { margin-left: -20px; } } .body-kimetsu__sec7-subtitle { left: 9%; margin-bottom: 75px; } @media (max-width: 1023px) { .body-kimetsu__sec7-subtitle { text-align: left; left: -6%; } } @media (max-width: 767px) { .body-kimetsu__sec7-subtitle { margin-left: 4%; } } .body-kimetsu__sec7-badge { top: 16%; left: 5%; } @media (min-width: 1024px) { .body-kimetsu__sec7-badge { top: -5rem; left: 30rem; } } @media (min-width: 1296px) { .body-kimetsu__sec7-badge { top: 1rem; left: 41rem; } } .body-kimetsu__sec7-number { color: #C72838; margin-right: 22px; } @media (max-width: 1023px) { .body-kimetsu__sec7-number { margin-right: 10px; } } .body-kimetsu__sec7-details-btn { background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#711422)); background-image: linear-gradient(#000000, #711422); } @media (min-width: 768px) { .body-kimetsu__sec7::before { top: 28%; background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-red-50@2x.svg") no-repeat center top/100% auto; } .body-kimetsu__sec7::after { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg-white-55@2x.svg") no-repeat center top/cover; } } @charset "UTF-8"; .footer-kimetsu__lens { padding: 50px 0 36px 0; } .footer-kimetsu__lens .header-kimetsu__sub-title-text { color: black; } .footer-kimetsu__lens__shops { list-style-type: none; padding: 0; width: 80%; height: auto; max-width: 1152px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer-kimetsu__lens__shops li { position: relative; padding-left: 20px; width: 33%; } .footer-kimetsu__lens__shops li::before { content: "・"; position: absolute; left: 0px; top: 11px; font-size: 12px; } .footer-kimetsu__lens__shops li a { font-family: "Noto Sans JP", sans-serif; font-weight: 400 !important; letter-spacing: 1px; font-size: 16px; line-height: 2; outline: none; text-decoration: none; display: block; color: black; -webkit-transition: .5s; transition: .5s; cursor: default; } @media (max-width: 767px) { .footer-kimetsu__lens__shops { margin-bottom: 30px; } .footer-kimetsu__lens__shops li { width: 100%; } } @media (min-width: 768px) { .footer-kimetsu__lens { padding: 113px 0 130px 0; } } .footer-kimetsu__share { background-color: black; color: white; text-align: center; padding: 37px 0; } .footer-kimetsu__share ul { list-style-type: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 30px; margin-bottom: 45px; gap: 60px; } .footer-kimetsu__share ul a { color: white; font-size: 30px; } .footer-kimetsu__share ul a i:before { background-color: black; } .footer-kimetsu__share ul a .fa-facebook:before { content: "\f39e" !important; } .footer-kimetsu__share ul a .fa-twitter:before { content: "\1D54F" !important; } @media (min-width: 768px) { .footer-kimetsu__share { padding: 60px; } .footer-kimetsu__share ul { gap: 90px; margin-bottom: 56px; } .footer-kimetsu__share ul a { font-size: 40px; } } .footer-kimetsu__copyright { padding: 0; margin: 0; font-size: 11px; font-family: "Noto Sans JP", sans-serif; font-weight: 600 !important; color: white; } html { font-size: inherit; } .base-kimetsu { background: url("https://static.lenskart.com/media/owndays/img/kimetsu/bg_ptn.jpg") repeat top/contain; background-attachment: fixed; font-family: "Noto Sans JP", sans-serif; font-weight: 400 !important; letter-spacing: 1px; overflow-x: hidden; } .base-kimetsu__container { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 5%; } @media (min-width: 768px) { .base-kimetsu__container { padding: 0 8%; } } @media (min-width: 1024px) { .base-kimetsu__container { padding: 0 25px; } } .base-kimetsu img { backdrop-filter: blur(0); } @media (max-width: 767px) { .base-kimetsu a:hover { opacity: 1; color: white; } } .base-kimetsu__show--xl { display: none !important; } @media (min-width: 1296px) { .base-kimetsu__show--xl { display: block !important; } } .base-kimetsu__hide--pc { display: block !important; } @media (min-width: 768px) { .base-kimetsu__hide--pc { display: none !important; } } .base-kimetsu__hide--tb { display: none !important; } @media (min-width: 1024px) { .base-kimetsu__hide--tb { display: block !important; } } .base-kimetsu__hide--xl { display: block !important; } @media (min-width: 1200px) { .base-kimetsu__hide--xl { display: none !important; } } .base-kimetsu__hide--sp { display: none !important; } @media (min-width: 768px) { .base-kimetsu__hide--sp { display: block !important; } } .information { font-family: 'Founders Grotesk', sans-serif; line-height: 1.5; letter-spacing: 1px; padding-block: 50px; } .information__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1060px; } .information__title { text-align: center; margin: 0 0 40px; font-size: 20px; font-weight: 400; color: black; } .information__genre { list-style: none; padding: 0; margin: 0 0 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .information__genre-btn { background: none; border: none; outline: none; padding: 5px; line-height: 1; letter-spacing: 1px; position: relative; color: black; } .information__genre-btn::before { content: ''; position: absolute; left: auto; bottom: 0; right: 0; width: 0; height: 1px; background-color: black; -webkit-transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .information__genre-btn:hover::before { left: 0; width: 100%; right: auto; } .information__genre-btn.active::before { width: 100%; } .information__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; } .information__card { display: grid; color: black; } .information__card-cover { aspect-ratio: 7/4; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .information__card-date { font-size: 12px; margin: 0 0 6px; color: #666; } .information__card-title { font-size: 13px; font-weight: 400; margin: 0; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .information__card:hover, .information__card:focus { text-decoration: none; color: inherit; } .information__pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 50px; gap: 5px; } .information__pagination-btn { height: 32px; min-width: 32px; padding-inline: 5px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: black; border-radius: 3px; border: none; background-color: transparent; outline: none; font-size: 14px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .information__pagination-btn:hover, .information__pagination-btn:focus { color: black; background-color: transparent; } .information__pagination-btn.active { background-color: black; color: white; } @media (max-width: 767px) { .information__card { grid-template-columns: 3fr 7fr; gap: 15px; } } @media (min-width: 768px) { .information { padding-block: 90px; } .information__title { font-size: 24px; margin-bottom: 80px; } .information__genre { margin-bottom: 70px; gap: 25px; } .information__genre-btn { font-size: 14px; } .information__list { grid-template-columns: repeat(3, 1fr); gap: 50px 20px; } .information__card { gap: 15px; } .information__card-date { margin-bottom: 3px; } .information__card-title { font-size: 14px; line-height: 1.7; } .information__card:hover .information__card-cover { opacity: 0.6; } .information__card:hover .information__card-title { color: #999; } .information__pagination-btn:not(.active):hover { background-color: #e9ecef; } } @media (min-width: 1024px) { .information__title { font-size: 30px; } } @charset "UTF-8"; .information-details { font-family: 'Founders Grotesk', sans-serif; line-height: 1.5; letter-spacing: 1px; padding-top: 35px; color: black; } .information-details :is(h1, h2, h3, h4, h5, h6, p) { margin: 0; } .information-details :is(ul, ol):not([class]) { list-style: none; padding: 0; margin: 0; } .information-details :is(a) { text-decoration: none; } .information-details :is(a):hover { text-decoration: none; } .information-details :is(strong) { font-family: inherit; } .information-details .mb-0 { margin-bottom: 0; } .information-details .mb-25 { margin-bottom: 25px; } .information-details .mb-50 { margin-bottom: 50px; } .information-details__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 840px; } .information-details__container--lg { max-width: 1060px; } .information-details__btn { width: 223px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #666; color: #666; text-align: center; font-size: 15px; font-weight: 500; line-height: 1; margin-inline: auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .information-details__btn:hover, .information-details__btn:focus { color: #666; } .information-details__header { margin-bottom: 20px; } .information-details__header p { font-size: 12px; color: #666; margin: 0 0 16px; } .information-details__header h1 { font-size: 18px; font-weight: 400; line-height: 1.6; margin: 0; } .information-details__cover { max-width: 1020px; margin-inline: auto; } .information-details__cover img { width: 100%; display: block; } .information-details__body { padding-block: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50px; } .information-details__body.temporary-closure { padding-top: 25px; } @media screen and (min-width: 768px) { .information-details__body.temporary-closure { padding-top: 60px; } } .information-details__body h2 { font-size: 18px; font-weight: 700; letter-spacing: 2px; position: relative; line-height: 1.6; margin-bottom: 20px; } .information-details__body h2::before { content: ''; position: absolute; top: 50%; left: -20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 100%; background-color: black; } .information-details__store-details ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; line-height: 2.2; gap: 8px; font-size: 15px; } .information-details__store-details ul li { display: grid; } .information-details__store-details ul li strong { font-weight: 700; } .information-details__access-notes { font-size: 16px; line-height: 2; margin-bottom: 20px; } .information-details__access-notes ul li { position: relative; } .information-details__access-notes ul li::before { content: '・'; } .information-details__access-view-map { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-block: 5px 20px; } .information-details__access-view-map a { font-size: 9px; color: #b2b2b2; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .information-details__access-view-map a:hover, .information-details__access-view-map a:focus { color: black; } .information-details__sns { padding-block: 120px 40px; padding-left: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; } .information-details__sns li { display: -webkit-box; display: -ms-flexbox; display: flex; } .information-details__sns li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .information-details__footer-inner { padding-block: 20px; border-top: 1px solid #e3e3e3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .information-details__footer-inner a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 15px; gap: 9px; color: black; } .information-details__footer-inner a:hover, .information-details__footer-inner a:focus { color: black; } .information-details__contents { font-size: 15px; font-weight: 300; line-height: 2; } .information-details__contents.temporary-closure { font-weight: normal; } .information-details__contents h3 { font-size: 20px; font-weight: 400; line-height: 1.9; margin: 0 0 15px 0; padding-left: 30px; position: relative; } .information-details__contents h3::before { position: absolute; content: ''; top: 6px; left: 0; width: 22px; height: 22px; border-radius: 20px; border: 4px solid #666; } .information-details__contents p { margin-bottom: 25px; } .information-details__contents ul li { position: relative; } .information-details__contents ul li::before { content: "・"; } .information-details__contents table { width: 100%; border-collapse: collapse; } .information-details__contents table.temporary-closure tr { color: black; letter-spacing: 0; } .information-details__contents table.temporary-closure tr td { border: 1px solid #e3e3e3; padding: 0; font-weight: normal; } .information-details__contents table.temporary-closure tr th:first-child, .information-details__contents table.temporary-closure tr td:first-child { width: 70%; text-align: center; } .information-details__contents table.temporary-closure tr th { color: black; font-weight: normal; } .information-details__contents table tr { display: table; table-layout: fixed; width: 100%; } .information-details__contents table tr th, .information-details__contents table tr td { text-align: center; border: 1px solid #e0e0e0; padding: 2px 8px; vertical-align: middle; font-size: 10px; color: #333; } .information-details__contents table tr:hover td { background-color: #f4f4f4; } .information-details__contents table thead { display: table; width: 100%; } .information-details__contents table thead tr th { line-height: 1.5; } .information-details__contents table tbody { display: block; max-height: 400px; overflow-y: auto; width: 100%; } .information-details__contents table tbody.temporary-closure { max-height: 100%; overflow-y: hidden; } @media screen and (max-width: 768px) { .information-details__contents table tbody.temporary-closure { line-height: 1.2; } } .information-details__contents table tbody tr td:first-child { text-align: left; } .information-details__contents table tbody tr td:first-child.temporary-closure { text-align: center; } .information-details__contents table tbody tr td a { color: #329c92; text-decoration: none; } .information-details__contents table tbody tr td a.temporary-closure { color: black; cursor: text; } .information-details__contents table tbody tr td a:hover, .information-details__contents table tbody tr td a:focus { color: #329c92; text-decoration: none; } .information-details__contents table tbody tr td a:hover.temporary-closure, .information-details__contents table tbody tr td a:focus.temporary-closure { color: black; } @media (max-width: 767px) { .information-details__cover .information-details__container { padding-inline: 0; } .information-details__footer-inner { padding-inline: 20px; } } @media (min-width: 768px) { .information-details { padding-top: 95px; } .information-details__btn { width: 300px; } .information-details__btn:hover { background-color: #666; color: white; } .information-details__header { margin-bottom: 40px; } .information-details__header.temporary-closure { margin-bottom: 0; } .information-details__header p { font-size: 14px; margin-bottom: 13px; } .information-details__header h1 { font-size: 34px; } .information-details__body h2 { font-size: 26px; margin-bottom: 35px; } .information-details__store-details ul { gap: 0; } .information-details__store-details ul li { grid-template-columns: 150px 1fr; } } .header-pompompurin__main { padding-top: 122px; padding-inline: 20px; margin-bottom: 195.03px; } .header-pompompurin__main__fg { position: absolute; top: 0; } .header-pompompurin__main__fg--left { max-width: 131px; left: 0; } .header-pompompurin__main__fg--right { max-width: 150px; right: 0; } .header-pompompurin__main__grid { display: grid; } .header-pompompurin__main__logo { margin: auto 0; } .header-pompompurin__main__logo img { aspect-ratio: 71/37; max-width: 221px; margin: 0 auto; } .header-pompompurin__main__img img { aspect-ratio: 217/145; position: relative; } @media (max-width: 767px) { .header-pompompurin__main__logo { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 60px; } .header-pompompurin__main__img { padding-inline: 20px; } } @media (min-width: 768px) { .header-pompompurin__main { padding: 100px 0 0 0; margin-bottom: 100px; } .header-pompompurin__main__grid { grid-template-columns: auto 1fr; grid-template-rows: auto auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10%; padding-left: 80px; } .header-pompompurin__main__logo { -ms-flex-item-align: end; align-self: end; } .header-pompompurin__main__img { grid-column: 2; grid-row: 1 / span 2; } } @media (min-width: 1024px) { .header-pompompurin__main { padding-top: 200px; margin-bottom: 200px; } .header-pompompurin__main__fg--left { max-width: 309px; } .header-pompompurin__main__fg--right { max-width: 306px; } .header-pompompurin__main__grid { -webkit-column-gap: 150px; -moz-column-gap: 150px; column-gap: 150px; padding-left: 0; } .header-pompompurin__main__logo img { max-width: 355px; } } .header-pompompurin__about { margin-block: 94px 116px; } .header-pompompurin__about__fg { position: absolute; } .header-pompompurin__about__fg--char-1 { max-width: 130px; top: -34px; right: calc(50% + 46px); } .header-pompompurin__about__fg--char-2 { max-width: 144px; bottom: -14px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .header-pompompurin__about__fg--footprints-1 { max-width: 75px; top: 53px; left: calc(50% + 106px); } .header-pompompurin__about__fg--footprints-2 { max-width: 123px; bottom: 18px; right: calc(50% + 296px); } .header-pompompurin__about__fg--pudding { max-width: 61px; right: calc(50% + 117px); bottom: 69px; } .header-pompompurin__about__fg--bone { max-width: 103px; top: 260px; right: calc(50% + 346px); } .header-pompompurin__about__fg--cherry { max-width: 91px; top: 256px; left: calc(50% + 323px); } .header-pompompurin__about__fg--mike { max-width: 71px; bottom: 150px; left: calc(50% + 328px); } .header-pompompurin__about__content { position: relative; background: url("https://static.lenskart.com/media/owndays/img/pompompurin/about-circle-bg.svg") no-repeat center/auto 100%; padding-block: 125px 156px; min-height: 831px; display: grid; place-items: center; } .header-pompompurin__about__content h2, .header-pompompurin__about__content p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-pompompurin__about__content h2 { margin-bottom: 40px; } .header-pompompurin__about__content h2 img { aspect-ratio: 479/117; max-width: 307px; margin-inline: auto; } .header-pompompurin__about__content p { font-size: 14px; font-weight: 800 !important; letter-spacing: 0px; line-height: 2.5625; text-align: left; margin: 0 auto 40px auto; max-width: 592px; padding-inline: 20px; } .header-pompompurin__about__content p strong { font-size: 20px; font-weight: inherit !important; letter-spacing: 0.2px; } @media (min-width: 768px) { .header-pompompurin__about__fg--char-1 { max-width: 185px; top: 4px; right: calc(50% + 156px); } .header-pompompurin__about__fg--char-2 { max-width: 198px; bottom: -11px; } .header-pompompurin__about__fg--footprints-1 { max-width: 123px; top: 36px; left: calc(50% + 309px); } .header-pompompurin__about__fg--pudding { max-width: 96px; bottom: 175px; right: calc(50% + 317px); } .header-pompompurin__about__content { min-height: 873px; } .header-pompompurin__about__content p { text-align: center; padding-inline: 0; } .header-pompompurin__about__content h2 img { max-width: 500px; } } @media (min-width: 1024px) { .header-pompompurin__about { margin-block: 200px 161px; } .header-pompompurin__about__content { padding-top: 171px; } .header-pompompurin__about__content h2 { margin-bottom: 47px; } .header-pompompurin__about__content p { font-size: 18px; letter-spacing: 0.18px; margin-bottom: 54px; } .header-pompompurin__about__content p strong { font-size: 22px; letter-spacing: 0.22px; } } .header-pompompurin__lineup { background-color: #76332e; padding-bottom: 179px; margin-top: 211px; z-index: 1; } .header-pompompurin__lineup__fg { position: absolute; top: 0; left: 0; right: 0; -webkit-transform: translateY(calc(-100% + 16px)); transform: translateY(calc(-100% + 16px)); width: 100%; height: 186px; -o-object-fit: cover; object-fit: cover; -o-object-position: 63% top; object-position: 63% top; z-index: -1; aspect-ratio: 1513/250; } .header-pompompurin__lineup__title { color: white; font-size: 32px; font-weight: 700 !important; letter-spacing: 2.56px; text-align: center; line-height: 1.25; margin-bottom: 30px; } .header-pompompurin__lineup__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px 5px; max-width: 1030px; margin-inline: auto; } .header-pompompurin__lineup__nav-item { position: relative; max-width: 112px; padding-top: 54px; -webkit-transition: 0.5s; transition: 0.5s; list-style-type: none; } .header-pompompurin__lineup__nav-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; aspect-ratio: 1/1; background-color: #eedabe; border-radius: 100%; z-index: -1; } .header-pompompurin__lineup__nav-img { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1/1; z-index: 1; } .header-pompompurin__lineup__nav-content { background-color: white; border-radius: 0px 0px 10px 10px; display: grid; gap: 4px; padding: 18px 9px 10px; } .header-pompompurin__lineup__nav-product { width: 100%; aspect-ratio: 120/67; max-width: 240px; margin-inline: auto; -o-object-fit: contain; object-fit: contain; } .header-pompompurin__lineup__nav-text { font-family: "Fredoka", sans-serif !important; font-weight: 700 !important; font-size: 11px; line-height: 10px; letter-spacing: 0px; text-align: center; color: #76332e; white-space: nowrap; } .header-pompompurin__lineup__nav-text strong { display: block; font-family: "Fredoka", sans-serif !important; font-weight: 700 !important; font-size: 15px; line-height: 1.25; letter-spacing: 1.5px; color: #fff9b1; text-shadow: 1px 0 0 #76332e, -1px 0 0 #76332e, 0 1px 0 #76332e, 0 -1px 0 #76332e; } @media (min-width: 1024px) { .header-pompompurin__lineup { padding-bottom: 576px; } .header-pompompurin__lineup__nav { gap: 26.66667px 17.33333px; } .header-pompompurin__lineup__nav-item { max-width: 217.33333px; padding-top: 108.5px; } } @media (min-width: 768px) { .header-pompompurin__lineup { margin-top: 340px; padding-top: 27px; } .header-pompompurin__lineup__fg { height: 250px; background-position: center top; -webkit-transform: translateY(calc(-100% + 14px)); transform: translateY(calc(-100% + 14px)); } .header-pompompurin__lineup__title { font-size: 70px; letter-spacing: 5.6px; margin-bottom: 68px; } .header-pompompurin__lineup__nav { gap: 32px 20.8px; } .header-pompompurin__lineup__nav-item { max-width: 260.8px; padding-top: 130px; } .header-pompompurin__lineup__nav-item:hover, .header-pompompurin__lineup__nav-item:active, .header-pompompurin__lineup__nav-item:visited, .header-pompompurin__lineup__nav-item:focus { text-decoration: none; } .header-pompompurin__lineup__nav-item:hover img { -webkit-transition: 0.5s; transition: 0.5s; opacity: .6; } .header-pompompurin__lineup__nav-content { border-radius: 0px 0px 30px 30px; padding: 49px 25px 33px; } .header-pompompurin__lineup__nav-text { font-size: 24px; line-height: 28px; letter-spacing: 0.49px; color: #76332e; } .header-pompompurin__lineup__nav-text strong { font-size: 35px; letter-spacing: 3.567px; } } @media (min-width: 1024px) { .header-pompompurin__lineup__nav-item { width: 100%; } } @media (min-width: 1296px) { .header-pompompurin__lineup__nav { gap: 40px 26px; } .header-pompompurin__lineup__nav-item { max-width: 326px; padding-top: 163px; } } @-webkit-keyframes pompomFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pompomFadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes pompomLoading { from { opacity: 0; } to { opacity: 1; } } @keyframes pompomLoading { from { opacity: 0; } to { opacity: 1; } } .body-pompompurin__models__item { padding-block: 69px 217px; background-color: #ffe57a; position: relative; } .body-pompompurin__models__item::before { content: ""; position: absolute; top: -114px; left: 0; right: 0; height: 185px; background: url("https://static.lenskart.com/media/owndays/img/pompompurin/wave-1.svg") no-repeat center top/cover; z-index: 1; } .body-pompompurin__models__item .base-pompompurin__container { position: relative; z-index: 2; max-width: 1196px; } .body-pompompurin__models__item .body-pompompurin__models__feature-list > .slick-dots, .body-pompompurin__models__item .body-pompompurin__models__products-slider > .slick-dots { margin-top: 14px; padding: 0; list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-pompompurin__models__item .body-pompompurin__models__feature-list > .slick-dots li > button, .body-pompompurin__models__item .body-pompompurin__models__products-slider > .slick-dots li > button { border: 0; color: transparent; } .body-pompompurin__models__item .body-pompompurin__models__feature-list > .slick-dots li, .body-pompompurin__models__item .body-pompompurin__models__products-slider > .slick-dots li { width: 24px; height: 19px; margin: 0 6px; } .body-pompompurin__models__item .body-pompompurin__models__feature-list > .slick-dots li button, .body-pompompurin__models__item .body-pompompurin__models__products-slider > .slick-dots li button { width: 100%; height: 100%; padding: 0; background: url("https://static.lenskart.com/media/owndays/img/pompompurin/footprint.svg") no-repeat center/contain; opacity: 0.25; } .body-pompompurin__models__item .body-pompompurin__models__feature-list > .slick-dots li button::before, .body-pompompurin__models__item .body-pompompurin__models__products-slider > .slick-dots li button::before { display: none; } .body-pompompurin__models__item .body-pompompurin__models__feature-list > .slick-dots li.slick-active button, .body-pompompurin__models__item .body-pompompurin__models__products-slider > .slick-dots li.slick-active button { opacity: 1; } @media (min-width: 768px) { .body-pompompurin__models__item .body-pompompurin__models__feature-list > .slick-dots, .body-pompompurin__models__item .body-pompompurin__models__products-slider > .slick-dots { margin-top: 32px; } .body-pompompurin__models__item .body-pompompurin__models__feature-list > .slick-dots li, .body-pompompurin__models__item .body-pompompurin__models__products-slider > .slick-dots li { width: 37px; height: 30px; margin: 0 9px; } } .body-pompompurin__models__item:nth-child(even) { background-color: #fff9b1; } .body-pompompurin__models__item:nth-child(even)::before { background-image: url("https://static.lenskart.com/media/owndays/img/pompompurin/wave-2.svg"); } .body-pompompurin__models__item:nth-child(5) { padding-bottom: 0; } .body-pompompurin__models__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; font-family: "Fredoka", sans-serif !important; font-weight: 700 !important; font-size: 30px; line-height: 1.25; letter-spacing: 3px; color: white; -webkit-text-stroke-width: 6px; -webkit-text-stroke-color: #76332e; paint-order: stroke; margin-bottom: 30px; } .body-pompompurin__models__title span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #76332e; color: white; padding: 3px 10px 5px; font-family: "Fredoka", sans-serif !important; font-weight: 700 !important; font-size: 29px; line-height: 1; letter-spacing: 0.66px; white-space: nowrap; } @media (max-width: 767px) { .body-pompompurin__models__title span { padding: 9px 10px; } } .body-pompompurin__models__char--1, .body-pompompurin__models__char--2, .body-pompompurin__models__char--3, .body-pompompurin__models__char--4, .body-pompompurin__models__char--5 { display: block; width: 100%; } .body-pompompurin__models__char--1 img { aspect-ratio: 196/197; } .body-pompompurin__models__char--2 img { aspect-ratio: 124/113; } .body-pompompurin__models__char--3 img { aspect-ratio: 616/613; } .body-pompompurin__models__char--4 img { aspect-ratio: 604/581; } .body-pompompurin__models__char--5 img { aspect-ratio: 620/633; } .body-pompompurin__models__content { display: grid; } .body-pompompurin__models__content-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 23px; } .body-pompompurin__models__content-header h3, .body-pompompurin__models__content-header h4 { font-family: "Corporate Logo Rounded ver2", sans-serif !important; margin-bottom: 0; } .body-pompompurin__models__content-header h3 { font: 700 20px/22px "Corporate Logo Rounded ver2", sans-serif; padding-bottom: 7px; border-bottom: 3px solid currentColor; } .body-pompompurin__models__content-header h4 { font: 700 20px/33px "Corporate Logo Rounded ver2", sans-serif; letter-spacing: 0.2px; } .body-pompompurin__models__content-header h4 small { font-family: "heisei-maru-gothic-std", sans-serif !important; font: 800 12px/1 "heisei-maru-gothic-std", sans-serif; letter-spacing: 0.72px; margin-left: 5px; } .body-pompompurin__models__content-product { display: block; } .body-pompompurin__models__content-product img { aspect-ratio: 221/160; } .body-pompompurin__models__content-text { font-size: 13px; font-weight: 800 !important; letter-spacing: 0px; margin-bottom: 30px; } .body-pompompurin__models__feature { margin-block: 70px 80px; } .body-pompompurin__models__feature-item { padding-inline: 5px; } .body-pompompurin__models__feature-title { text-align: center; font-family: "Fredoka", sans-serif !important; font-weight: 700 !important; font-size: 26px; line-height: 1.25; letter-spacing: 2.08px; margin-bottom: 35px; } .body-pompompurin__models__feature-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #76332e; color: white; position: relative; border-radius: 100rem; aspect-ratio: 250/333; } .body-pompompurin__models__feature-content span { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 67px; height: 47px; font: 700 20px/1 "Fredoka", sans-serif; letter-spacing: 0.4px; color: #76332e; padding-left: 5px; background: url("https://static.lenskart.com/media/owndays/img/pompompurin/pudding.svg") no-repeat center/contain; } .body-pompompurin__models__feature-content img { aspect-ratio: 31/27; } .body-pompompurin__models__feature-content p { display: grid; width: 171px; font-size: 11px; font-weight: 800 !important; line-height: 20px; text-align: center; -webkit-box-flex: 0.75; -ms-flex-positive: 0.75; flex-grow: 0.75; -ms-flex-line-pack: center; align-content: center; margin: 0 auto; letter-spacing: 0; } .body-pompompurin__models__products-colors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 11px; margin-bottom: 4px; margin-inline: 4%; } @media (max-width: 767px) { .body-pompompurin__models__products-colors { margin-inline: 10%; } } @media (min-width: 768px) { .body-pompompurin__models__products-colors { margin-inline: 0; } } @media (min-width: 1024px) { .body-pompompurin__models__products-colors { margin-inline: 4%; } } .body-pompompurin__models__products-colors p { font: 700 16px/1.25 "Fredoka", sans-serif; letter-spacing: 1.28px; margin-bottom: 0; } .body-pompompurin__models__products-colors ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; list-style-type: none; padding: 0; margin: 0; } .body-pompompurin__models__products-colors ul li { cursor: pointer; width: 20px; height: 20px; border-radius: 10rem; background-color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid transparent; } .body-pompompurin__models__products-colors ul li span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 14px; height: 14px; border-radius: 10rem; background-repeat: no-repeat; background-position: center; background-size: cover; } .body-pompompurin__models__products-colors ul li.active { border-color: black; } .body-pompompurin__models__products-colors ul li[data-product="#product-SR1007B-4A-C1"] span { background-color: #865928; } .body-pompompurin__models__products-colors ul li[data-product="#product-SR1007B-4A-C2"] span { background-color: #fc9ac0; } .body-pompompurin__models__products-colors ul li[data-product="#product-SR1008B-4A-C1"] span { background-color: #865928; } .body-pompompurin__models__products-colors ul li[data-product="#product-SR1008B-4A-C2"] span { background-color: #9e7a53; } .body-pompompurin__models__products-colors ul li[data-product="#product-SR2003J-4A-C1"] span { background-color: #faf5d6; } .body-pompompurin__models__products-colors ul li[data-product="#product-SR2003J-4A-C2"] span { background-color: #ecd5c1; } .body-pompompurin__models__products-colors ul li[data-product="#product-SR2004N-4A-C1"] span { background-color: #865928; } .body-pompompurin__models__products-colors ul li[data-product="#product-SR2004N-4A-C2"] span { background-image: url("https://static.lenskart.com/media/owndays/img/pompompurin/color-1.webp"); } .body-pompompurin__models__products-colors ul li[data-product="#product-SR2005N-4A-C1"] span { background-image: url("https://static.lenskart.com/media/owndays/img/pompompurin/color-2.webp"); } .body-pompompurin__models__products-colors ul li[data-product="#product-SR2005N-4A-C2"] span { background-color: #ceb39c; } .body-pompompurin__models__products-slider { width: 100%; } .body-pompompurin__models__products-slider > .slick-list { overflow: visible; } .body-pompompurin__models__products-slider > .slick-list .slick-slide { padding-inline: 4px; padding-bottom: 8px; } .body-pompompurin__models__products-slider > .slick-list .slick-slide.slick-current picture { -webkit-transform: translateY(8px); transform: translateY(8px); } .body-pompompurin__models__products-slider > .slick-arrow { position: absolute; top: 34%; width: 40px; height: 40px; z-index: 1; background-repeat: no-repeat; background-position: center; background-size: contain; } .body-pompompurin__models__products-slider > .slick-arrow::before { display: none; } @media (min-width: 768px) { .body-pompompurin__models__products-slider > .slick-arrow { top: 38%; } } @media (min-width: 1025px) { .body-pompompurin__models__products-slider > .slick-arrow { display: none !important; } } .body-pompompurin__models__products-slider > .slick-prev, .body-pompompurin__models__products-slider > .slick-next { color: transparent; background-color: transparent; border: 0; } .body-pompompurin__models__products-slider > .slick-prev { left: 20px; background-image: url("https://static.lenskart.com/media/owndays/img/pompompurin/slick-prev.svg"); } .body-pompompurin__models__products-slider > .slick-next { right: 20px; background-image: url("https://static.lenskart.com/media/owndays/img/pompompurin/slick-next.svg"); } .body-pompompurin__models__products-slider picture { background-color: white; border-radius: 20px; border: 3px solid #76332e; padding: 14px 12px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .body-pompompurin__models__products-slider picture img { display: block; width: 100%; height: auto; aspect-ratio: 591/373; } .body-pompompurin__models__products .base-pompompurin__btn { margin-top: 45px; } .body-pompompurin__models__bottom { background-color: #ffe57a; padding: 88px 20px 25px; } @media (max-width: 767px) { .body-pompompurin__models__bottom { padding: 38px 20px 18px; } } .body-pompompurin__models__note { text-align: center; font-size: 10px; font-weight: 800; line-height: 17px; letter-spacing: 0.2px; font-family: "heisei-maru-gothic-std", sans-serif; margin-bottom: 0; } @media (max-width: 1023px) { .body-pompompurin__models__top, .body-pompompurin__models__content { max-width: 425px; margin-inline: auto; } .body-pompompurin__models__title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-text-stroke-width: 1.5px; } .body-pompompurin__models__char { padding-inline: 20px; margin-bottom: 40px; margin-top: -8px; } .body-pompompurin__models__feature { margin-inline: -20px; } } @media (min-width: 768px) { .body-pompompurin__models__products { position: relative; } .body-pompompurin__models__products-slider picture img { max-width: 577px; } .body-pompompurin__models__products-colors { gap: 24px; position: absolute; top: 490px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } .body-pompompurin__models__products-colors p { font-size: 36px; letter-spacing: 2.88px; } .body-pompompurin__models__products-colors ul { gap: 9px; } .body-pompompurin__models__products-colors ul li { width: 43px; height: 43px; } .body-pompompurin__models__products-colors ul li span { width: 31px; height: 31px; } .body-pompompurin__models__products .base-pompompurin__btn { margin-top: 90px; } } @media (min-width: 1024px) { .body-pompompurin__models__item { padding-bottom: 509px; } .body-pompompurin__models__item::before { top: -504px; left: -175px; right: -175px; height: 642px; } .body-pompompurin__models__item .base-pompompurin__container { position: relative; } .body-pompompurin__models__item:nth-of-type(odd) .body-pompompurin__models__content-header, .body-pompompurin__models__item:nth-of-type(odd) .body-pompompurin__models__content-text { margin-left: auto; } .body-pompompurin__models__item:nth-of-type(odd) .body-pompompurin__models__content-header { position: relative; } .body-pompompurin__models__item:nth-of-type(odd) .body-pompompurin__models__content-header::before { content: ""; position: absolute; width: 100%; max-width: 175px; height: auto; aspect-ratio: 57/85; background: url("https://static.lenskart.com/media/owndays/img/pompompurin/line-dot.svg") no-repeat center right/contain; z-index: 1; left: 95%; top: -167px; left: -102px; } .body-pompompurin__models__item:nth-of-type(even) .body-pompompurin__models__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: auto; } .body-pompompurin__models__item:nth-of-type(even) .body-pompompurin__models__char { left: 20px; right: auto; } .body-pompompurin__models__item:nth-of-type(even) .body-pompompurin__models__content-product { margin-left: auto; } .body-pompompurin__models__item:nth-of-type(even) .body-pompompurin__models__content-header { position: relative; } .body-pompompurin__models__item:nth-of-type(even) .body-pompompurin__models__content-header::before { content: ""; position: absolute; width: 100%; max-width: 175px; height: auto; aspect-ratio: 57/85; background: url("https://static.lenskart.com/media/owndays/img/pompompurin/line-dot-2.svg") no-repeat center left/contain; z-index: 1; top: -167px; right: -102px; } .body-pompompurin__models__item:nth-child(2) .body-pompompurin__models__title { margin-left: calc(100% - 541px); } .body-pompompurin__models__item:nth-child(4) .body-pompompurin__models__title { margin-left: calc(100% - 465px); } } @media (min-width: 1024px) and (max-width: 1125px) { .body-pompompurin__models__item .body-pompompurin__models__content-product::before { display: none; } } @media (min-width: 1024px) { .body-pompompurin__models__top { position: relative; } .body-pompompurin__models__title { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; font-size: 67px; letter-spacing: 6.695px; margin-bottom: 150px; } .body-pompompurin__models__title span { font-size: 58px; letter-spacing: 1.32px; padding: 11px 20px; } .body-pompompurin__models__char { position: absolute; top: 0; right: 20px; } .body-pompompurin__models__char img { width: 100%; } .body-pompompurin__models__char--1 { max-width: 481px; top: -107px; } .body-pompompurin__models__char--2 { max-width: 429px; top: -127px; } .body-pompompurin__models__char--3 { max-width: 502px; top: -210px; } .body-pompompurin__models__char--4 { max-width: 467px; top: -140px; } .body-pompompurin__models__char--5 { max-width: 528px; top: -138px; } .body-pompompurin__models__content { display: block; margin-bottom: 154px; position: relative; } .body-pompompurin__models__content-product { max-width: calc(45% + 35px); } .body-pompompurin__models__content-header, .body-pompompurin__models__content-text { max-width: calc(50% - 25px); } .body-pompompurin__models__content-header h3 { font-size: 26px; line-height: 32.8px; letter-spacing: 0.26px; padding-bottom: 9px; border-bottom-width: 5px; } .body-pompompurin__models__content-header h4 { font-size: 25px; letter-spacing: 0.25px; } .body-pompompurin__models__content-text { font-size: 18px; line-height: 33px; letter-spacing: 0.16px; margin-bottom: 0; } .body-pompompurin__models__content .base-pompompurin__container { position: absolute; left: 0; right: 0; bottom: 0; } .body-pompompurin__models__feature { margin-bottom: 120px; } .body-pompompurin__models__feature-title { font-size: 36px; } .body-pompompurin__models__feature-list { margin-inline: -33px; } .body-pompompurin__models__feature-item { padding-inline: 33px; } .body-pompompurin__models__feature-content p { width: 277px; font-size: 15px; line-height: 25px; } .body-pompompurin__models__products { max-width: 1440px; margin: 0 auto; } .body-pompompurin__models__products-colors { left: 0; -webkit-transform: translateX(0); transform: translateX(0); } .body-pompompurin__models__products-slider > .slick-list .slick-slide { padding-inline: 8px; padding-bottom: 18px; } .body-pompompurin__models__products-slider > .slick-list .slick-slide.slick-current picture { -webkit-transform: translateY(18px); transform: translateY(18px); } .body-pompompurin__models__products-slider picture { padding: 28px 25px; border-width: 5px; border-radius: 30px; } .body-pompompurin__models__products-slider picture img { max-width: 591px; } } @media (min-width: 1296px) { .body-pompompurin__models__char { right: 0; } .body-pompompurin__models__char img { width: 100%; } .body-pompompurin__models__char--1 { max-width: 581px; top: -107px; } .body-pompompurin__models__char--2 { max-width: 597px; top: -127px; } .body-pompompurin__models__char--3 { max-width: 602px; top: -210px; } .body-pompompurin__models__char--4 { max-width: 567px; top: -140px; } .body-pompompurin__models__char--5 { max-width: 628px; top: -138px; } .body-pompompurin__models__item { padding-bottom: 509px; } .body-pompompurin__models__item::before { top: -504px; left: -175px; right: -175px; height: 642px; } .body-pompompurin__models__item:nth-of-type(odd) .body-pompompurin__models__content-header, .body-pompompurin__models__item:nth-of-type(odd) .body-pompompurin__models__content-text { margin-left: auto; } .body-pompompurin__models__item:nth-of-type(even) .body-pompompurin__models__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: auto; } .body-pompompurin__models__item:nth-of-type(even) .body-pompompurin__models__char { left: 20px; right: auto; } .body-pompompurin__models__item:nth-child(2) .body-pompompurin__models__title { margin-left: calc(100% - 506px); } .body-pompompurin__models__item:nth-child(3) .body-pompompurin__models__content-product::before { top: 44%; } .body-pompompurin__models__item:nth-child(4) .body-pompompurin__models__title { margin-left: calc(100% - 465px); } } .body-pompompurin__case { padding-block: 112px 164px; background-color: #76332e; } .body-pompompurin__case__content { background-color: white; border-radius: 20px; padding: 70px 20px 50px; position: relative; } .body-pompompurin__case__fg { aspect-ratio: 76/51; max-width: 159px; position: absolute; top: -72px; left: calc(50% - 63px); } .body-pompompurin__case__heading { font-family: "Fredoka", sans-serif !important; font-weight: 700 !important; font-size: 23px; line-height: 30px; letter-spacing: 1.84px; margin: 0; } .body-pompompurin__case__img { aspect-ratio: 253/189; } .body-pompompurin__case__text { width: 100%; max-width: 495px; height: auto; font-size: 14px; font-weight: 800 !important; line-height: 31px; letter-spacing: 0.28px; margin-bottom: 0; } @media (max-width: 767px) { .body-pompompurin__case__heading { text-align: center; } .body-pompompurin__case__img { margin-bottom: 5px; } } @media (min-width: 768px) { .body-pompompurin__case__content { display: grid; grid-template-columns: 1fr 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px 47px; } .body-pompompurin__case__fg { top: auto; left: -57px; bottom: -59px; } .body-pompompurin__case__heading { -ms-flex-item-align: end; align-self: flex-end; } .body-pompompurin__case__img { grid-row: 1 / span 2; grid-column: 2; } .body-pompompurin__case__text { -ms-flex-item-align: start; align-self: flex-start; } } @media (min-width: 1024px) { .body-pompompurin__case { padding-block: 120px 288px; } .body-pompompurin__case__content { padding: 25px 60px 60px; } .body-pompompurin__case__fg { max-width: 228px; } .body-pompompurin__case__heading { font-size: 29.6px; line-height: normal; letter-spacing: 2.3792px; } } @media (min-width: 1296px) { .body-pompompurin__case__heading { font-size: 37px; letter-spacing: 2.974px; } .body-pompompurin__case__text { width: 495px; } } .body-pompompurin__accessories { margin-top: -1px; padding-bottom: 18px; z-index: 1; background-color: #76332e; } .body-pompompurin__accessories::before { content: ""; position: absolute; inset: 291px 0 0; background-color: #fff9b1; z-index: -1; } .body-pompompurin__accessories::after { content: ""; position: absolute; top: -89px; left: -115px; right: -115px; height: 671px; background-color: #fff9b1; border-radius: 100%; z-index: -1; } .body-pompompurin__accessories .base-pompompurin__container { position: relative; } .body-pompompurin__accessories__fg { width: 100%; aspect-ratio: 175/198; max-width: 140px; position: absolute; left: 50%; bottom: -180px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .body-pompompurin__accessories__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; font-family: "Fredoka", sans-serif !important; font-weight: 700; font-size: 32px; line-height: 1.25; letter-spacing: 2.56px; margin-top: 0; margin-bottom: 40px; } .body-pompompurin__accessories__title span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ffcb14; color: #76332e; height: 23px; padding-inline: 7px; border-radius: 3px; font: 700 13px/1 "heisei-maru-gothic-std", sans-serif; letter-spacing: 0.26px; } .body-pompompurin__accessories__list { display: grid; gap: 60px; width: 100%; overflow: hidden; margin-bottom: 38px; list-style-type: none; padding: 0; } .body-pompompurin__accessories__item { width: 100%; overflow: hidden; display: grid; gap: 35px; } .body-pompompurin__accessories__slider { width: 100%; overflow: hidden; opacity: 0; } .body-pompompurin__accessories__slider img { aspect-ratio: 139/91; } .body-pompompurin__accessories__slider.loaded { -webkit-animation: pompomFadeIn 1s ease 1s forwards; animation: pompomFadeIn 1s ease 1s forwards; } .body-pompompurin__accessories__slider > .slick-list { aspect-ratio: 139/91; } .body-pompompurin__accessories__slider > .slick-dots { margin-top: 20px; padding: 0; list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-pompompurin__accessories__slider > .slick-dots li > button { border: 0; color: transparent; } .body-pompompurin__accessories__slider > .slick-dots li { width: 24px; height: 19px; margin: 0 6px; } .body-pompompurin__accessories__slider > .slick-dots li button { width: 100%; height: 100%; padding: 0; background: url("https://static.lenskart.com/media/owndays/img/pompompurin/footprint.svg") no-repeat center/contain; opacity: 0.25; } .body-pompompurin__accessories__slider > .slick-dots li button::before { display: none; } .body-pompompurin__accessories__slider > .slick-dots li.slick-active button { opacity: 1; } @media (min-width: 768px) { .body-pompompurin__accessories__slider > .slick-dots { margin-top: 32px; } .body-pompompurin__accessories__slider > .slick-dots li { width: 37px; height: 30px; margin: 0 9px; } } .body-pompompurin__accessories__content p { font-size: 14px; font-weight: 800; letter-spacing: 0.28px; margin-bottom: 30px; } .body-pompompurin__accessories__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 23px; } .body-pompompurin__accessories__header h3, .body-pompompurin__accessories__header h4 { margin: 0; } .body-pompompurin__accessories__header h3 { font-family: "Fredoka", sans-serif !important; font-weight: 700 !important; font-size: 20px; line-height: 22px; padding-bottom: 7px; border-bottom: 3px solid currentColor; } .body-pompompurin__accessories__header h4 { font-family: "Corporate Logo Rounded ver2", sans-serif !important; font: 700 20px/33px "Corporate Logo Rounded ver2", sans-serif; letter-spacing: 0.2px; } .body-pompompurin__accessories__header h4 small { font-family: "heisei-maru-gothic-std", sans-serif !important; font: 800 12px/1 "heisei-maru-gothic-std", sans-serif; letter-spacing: 0.72px; margin-left: 5px; } .body-pompompurin__accessories__note { text-align: center; font-size: 10px; font-weight: 800; line-height: 17px; letter-spacing: 0.2px; font-family: "heisei-maru-gothic-std", sans-serif; margin: 0 0 140px 0; } @media (min-width: 768px) { .body-pompompurin__accessories__item { grid-template-columns: repeat(2, 1fr); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-pompompurin__accessories__item:nth-child(even) .body-pompompurin__accessories__slider { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .body-pompompurin__accessories__content .base-pompompurin__btn { margin-left: 0; } .body-pompompurin__accessories__note { margin-bottom: 150px; } } @media (min-width: 1024px) { .body-pompompurin__accessories { padding-bottom: 25px; } .body-pompompurin__accessories__fg { left: 90%; bottom: -48px; } .body-pompompurin__accessories::before { top: 233.2px; } .body-pompompurin__accessories::after { top: -178px; left: 50%; right: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1507px; height: 1166px; } .body-pompompurin__accessories__title { font-size: 60px; line-height: 73px; letter-spacing: 3px; gap: 10px; margin-bottom: 70px; } .body-pompompurin__accessories__title span { font-size: 21px; letter-spacing: 0.42px; height: 37px; padding-inline: 18px; } .body-pompompurin__accessories__list { gap: 67px; margin-bottom: 98px; } .body-pompompurin__accessories__item { gap: 60px; } .body-pompompurin__accessories__header { margin-bottom: 27px; } .body-pompompurin__accessories__header h3 { font-size: 34px; line-height: 50px; padding-bottom: 9px; border-bottom-width: 5px; } .body-pompompurin__accessories__header h4 { font-size: 25px; line-height: 33px; letter-spacing: 0.25px; } .body-pompompurin__accessories__header h4 small { font-size: 14px; letter-spacing: 0.84px; } .body-pompompurin__accessories__content p { font-size: 16px; line-height: 35px; letter-spacing: 0.32px; margin-bottom: 26px; } .body-pompompurin__accessories__note { margin-bottom: 0; } } @media screen and (min-width: 1440px) { .body-pompompurin__accessories::before { top: 405px; } .body-pompompurin__accessories::after { left: -34px; right: -34px; -webkit-transform: none; transform: none; width: auto; } } .footer-pompompurin__pompompurin { padding-bottom: 220px; background-color: white; } .footer-pompompurin__pompompurin__buttons { padding: 76px 0 90px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .footer-pompompurin__pompompurin__buttons .base-pompompurin__btn { max-width: 380px; } .footer-pompompurin__pompompurin__title { margin-top: 0; margin-bottom: 21px; text-align: center; } .footer-pompompurin__pompompurin__title img { aspect-ratio: 313/33; max-width: 230px; } .footer-pompompurin__pompompurin__img { aspect-ratio: 121/118; } .footer-pompompurin__pompompurin__details p { font-size: 14px; font-weight: 800; line-height: 30px; letter-spacing: 0.28px; margin-bottom: 40px; } .footer-pompompurin__pompompurin__grid { display: grid; grid-template-columns: 1fr; } @media (max-width: 767px) { .footer-pompompurin__pompompurin { padding-inline: 20px; } .footer-pompompurin__pompompurin__title img { margin-inline: auto; } .footer-pompompurin__pompompurin__img { margin-left: auto; margin-right: auto; margin-bottom: 28px; } } @media (min-width: 768px) { .footer-pompompurin__pompompurin__title { text-align: left; } .footer-pompompurin__pompompurin__buttons { padding: 90px 0 140px 0; } .footer-pompompurin__pompompurin__buttons .base-pompompurin__btn { margin: 0; width: 310px; } .footer-pompompurin__pompompurin__buttons .base-pompompurin__btn:nth-child(2) { width: 380px; } .footer-pompompurin__pompompurin__grid { display: grid; grid-template-columns: 242px 1fr; -webkit-column-gap: 37.5px; -moz-column-gap: 37.5px; column-gap: 37.5px; } .footer-pompompurin__pompompurin__img { grid-row: 1 / span 2; grid-column: 1; } .footer-pompompurin__pompompurin__details .base-pompompurin__btn { margin-left: 0; } } @media (min-width: 1024px) { .footer-pompompurin__pompompurin { padding-bottom: 308px; } .footer-pompompurin__pompompurin__buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; } .footer-pompompurin__pompompurin__buttons .base-pompompurin__btn { margin: 0; } .footer-pompompurin__pompompurin__buttons .base-pompompurin__btn:nth-child(1) { width: 300px; } .footer-pompompurin__pompompurin__buttons .base-pompompurin__btn:nth-child(2) { width: 380px; } .footer-pompompurin__pompompurin__grid { grid-template-columns: 363px 1fr; -webkit-column-gap: 75px; -moz-column-gap: 75px; column-gap: 75px; } .footer-pompompurin__pompompurin__title { margin-bottom: 24px; } .footer-pompompurin__pompompurin__title img { max-width: 313px; } .footer-pompompurin__pompompurin__details p { font-size: 16px; line-height: 35px; letter-spacing: 0.32px; } } @media (min-width: 1445px) { .footer-pompompurin__pompompurin { margin-bottom: -20px; } } .footer-pompompurin__sns { background-color: #76332e; color: white; } .footer-pompompurin__sns::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 25px; background-color: #fff9b1; } .footer-pompompurin__sns .base-pompompurin__container { position: relative; padding-bottom: 155px; } .footer-pompompurin__sns__fg { position: absolute; } .footer-pompompurin__sns__fg--cloud { width: 100%; aspect-ratio: 1513/250; top: -150px; height: 186px; -o-object-fit: cover; object-fit: cover; -o-object-position: 63% top; object-position: 63% top; } .footer-pompompurin__sns__fg--char { aspect-ratio: 32/17; max-width: 213px; right: 11px; bottom: 17px; } .footer-pompompurin__sns__title { text-align: center; font-family: "Fredoka", sans-serif !important; font-weight: 700 !important; font-size: 32px; line-height: 1.25; letter-spacing: 2.56px; margin-bottom: 25px; } .footer-pompompurin__sns__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; margin-bottom: 45px; list-style-type: none; padding: 0; } .footer-pompompurin__sns__list li a { font-size: 38px; color: white; } .footer-pompompurin__sns__list li a i { background: transparent; } .footer-pompompurin__sns__copyright { font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; margin: 0; } @media (min-width: 1024px) { .footer-pompompurin__sns::before { height: 54px; } .footer-pompompurin__sns .base-pompompurin__container { padding-bottom: 74px; } .footer-pompompurin__sns__fg--cloud { top: -223px; height: 245px; -o-object-position: center top; object-position: center top; } .footer-pompompurin__sns__fg--char { max-width: 320px; right: -96px; bottom: 44px; } .footer-pompompurin__sns__title { font-size: 60px; letter-spacing: 3px; margin-bottom: 47px; } .footer-pompompurin__sns__list { gap: 50px; margin-bottom: 75px; } .footer-pompompurin__sns__list li a { font-size: 48px; } .footer-pompompurin__sns__copyright { font-size: 12px; } } @font-face { font-family: "Corporate Logo Rounded ver2"; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/Corporate-Logo/Corporate-Logo-Rounded.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/desktop/fonts/Corporate-Logo/Corporate-Logo-Rounded.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @-webkit-keyframes loading-pompompurin { from { opacity: 0; } to { opacity: 1; } } @keyframes loading-pompompurin { from { opacity: 0; } to { opacity: 1; } } body { -webkit-animation: loading-pompompurin 1s; animation: loading-pompompurin 1s; } .base-pompompurin { font-family: "heisei-maru-gothic-std", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.92308; letter-spacing: 0.26px; color: #76332e; background: #fff9b1 url("https://static.lenskart.com/media/owndays/img/pompompurin/bg-dots.svg") repeat center top/auto; background-attachment: fixed; } .base-pompompurin section { position: relative; } .base-pompompurin :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; } .base-pompompurin__hidden-scroll { overflow: hidden; } .base-pompompurin__hide--pc { display: block; } @media (min-width: 1024px) { .base-pompompurin__hide--pc { display: none; } } .base-pompompurin__hide--sp { display: none; } @media (min-width: 1024px) { .base-pompompurin__hide--sp { display: block; } } .base-pompompurin__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1190px; } .base-pompompurin__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; background-color: #ffcb14; width: 100%; max-width: 310px; margin-inline: auto; height: 71px; border: 3px solid #76332e; border-radius: 10rem; padding-inline: 35px 13px; font-size: 14px; font-weight: 800 !important; line-height: 1.5; color: #76332e; position: relative; overflow: hidden; z-index: 2; } .base-pompompurin__btn i { font-style: normal; background: transparent; } .base-pompompurin__btn:hover, .base-pompompurin__btn:active, .base-pompompurin__btn:visited, .base-pompompurin__btn:focus { color: inherit; text-decoration: none; } .base-pompompurin__btn::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #76332e; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; z-index: -1; } .base-pompompurin__btn-arrow { display: grid; place-items: center; width: 47px; height: 47px; background-color: #76332e; border-radius: 10rem; } .base-pompompurin__btn[disabled] { pointer-events: none; } .base-pompompurin__btn[disabled]::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, .44); } .base-pompompurin__btn--white { background-color: white; } .base-pompompurin__btn--white .base-pompompurin__btn-arrow svg path { fill: white; stroke: white; } .base-pompompurin__btn--nav { padding-inline: 20px; min-width: 166px; } .base-pompompurin__btn--nav span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-top: -4px; } @media (max-width: 767px) { .base-pompompurin__btn--nav { min-width: 0; width: 110px; height: 42px; border: none; font-size: 11px; padding-left: 15px; padding-right: 15px; } } @media (min-width: 768px) { .base-pompompurin__btn--nav { padding-inline: 35px; } } @media (min-width: 1024px) { .base-pompompurin__btn { font-size: 16px; width: 300px; } .base-pompompurin__btn span svg { width: 16px; height: 27px; } .base-pompompurin__btn:hover { color: #ffcb14; } .base-pompompurin__btn:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } .base-pompompurin__btn:hover .base-pompompurin__btn-arrow { background-color: #ffcb14; } .base-pompompurin__btn:hover .base-pompompurin__btn-arrow svg path { fill: #76332e; stroke: #76332e; } } .base-pompompurin__nav { position: sticky; bottom: -1px; z-index: 20; background-color: rgba(0, 0, 0, .7); padding-block: 20px; color: white; } .base-pompompurin__nav-grid { display: grid; grid-template-columns: 1fr auto; gap: 7px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .base-pompompurin__nav-duration { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font: 700 22px/30px "Corporate Logo Rounded ver2", sans-serif; } .base-pompompurin__nav-duration small { font: 800 11px/20px "heisei-maru-gothic-std", sans-serif; } .base-pompompurin__nav-discount { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 9px; font-weight: 800 !important; line-height: 15px; } .base-pompompurin__nav-discount a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-decoration: underline; color: currentColor; } @media (max-width: 1296px) { .base-pompompurin__nav { padding-inline: 20px; text-align: right; } .base-pompompurin__nav-grid { display: inline-grid; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } .base-pompompurin__nav-duration { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .base-pompompurin__nav-discount { grid-column: span 2; } .base-pompompurin__nav .base-pompompurin__container { padding-left: 0; padding-right: 0; } } @media (min-width: 1296px) { .base-pompompurin__nav { padding-block: 37px 24px; } .base-pompompurin__nav .base-pompompurin__container { text-align: center; } .base-pompompurin__nav-grid { display: inline-grid; grid-template-columns: auto auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .base-pompompurin__nav-duration { font-size: 31px; line-height: 50px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .base-pompompurin__nav-duration small { font-size: 14px; line-height: 28px; margin-left: 0; } } .header-contact-us__container { width: 100%; height: auto; padding: 0 5%; max-width: 764px; margin: 0 auto; } @media (min-width: 768px) { .header-contact-us__container { width: 80%; padding: 0; } } .header-contact-us__main__title { font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-weight: normal !important; line-height: 1.5; margin: 0; color: black; padding-top: 34px; text-align: center; letter-spacing: 1px; } .header-contact-us__main__title span { display: block; font-family: "Founders Grotesk", sans-serif; font-weight: normal; font-size: 16px; text-align: left; line-height: 1.6; margin-top: 15px; color: #666; letter-spacing: 1px; } .header-contact-us__main nav { padding: 30px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-contact-us__main nav a { border: 1px solid #e3e3e3; width: 100%; height: 115px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .header-contact-us__main nav a:nth-child(2) { border-left: 0; border-right: 0; } .header-contact-us__main nav a span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; } .header-contact-us__main nav a span img { display: block; width: 100%; height: auto; } .header-contact-us__main nav a p { font-family: "Founders Grotesk", sans-serif; font-size: 11px; font-weight: normal !important; line-height: 1.4; padding-top: 2px; margin: 0; color: black; letter-spacing: 1px; } .header-contact-us__main__tel { border: 6px solid #e3e3e3; text-align: center; padding: 25px 10px; } .header-contact-us__main__tel__title { font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; line-height: 1.6; color: black; margin: 0; letter-spacing: 1px; } .header-contact-us__main__tel--number { color: black; font-family: "Founders Grotesk", sans-serif; font-size: 34px; font-weight: normal; line-height: 1; letter-spacing: 1px; margin: 0; } .header-contact-us__main__tel--number::before { content: ''; display: inline-block; width: 30px; height: 38px; background-image: url("https://static.lenskart.com/owndays/img/contact-us/tel.svg"); background-size: contain; background-position: 0 5px; background-repeat: no-repeat; width: 22px; height: 31px; margin-right: 3px; } .header-contact-us__main__tel--time { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; margin: 7px auto 0 auto; padding: 0 10px; background-color: #e3e3e3; } .header-contact-us__main__tel--time span { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: normal !important; line-height: 2; letter-spacing: 1px; color: black; } .header-contact-us__main__list { padding: 0 0 40px 0; margin: 15px 0 0 0; list-style-type: none; } .header-contact-us__main__list li { color: #999; font-family: "Founders Grotesk", sans-serif; font-size: 11px; font-weight: normal; line-height: 1.7; position: relative; padding-left: 12px; letter-spacing: 1px; } .header-contact-us__main__list li::before { content: "*"; font-size: 14px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (min-width: 768px) { .header-contact-us__main__title { font-size: 38px; padding-top: 70px; } .header-contact-us__main__title span { text-align: center; } .header-contact-us__main nav { padding: 55px 0 50px 0; grid-template-columns: 32% 32% 32%; -webkit-column-gap: 2%; -moz-column-gap: 2%; column-gap: 2%; } .header-contact-us__main nav a { height: 235px; -webkit-transition: 0.5s; transition: 0.5s; } .header-contact-us__main nav a:nth-child(2) { border: 1px solid #e3e3e3; } .header-contact-us__main nav a span { height: 80px; } .header-contact-us__main nav a span img { display: block; width: 100%; height: auto; } .header-contact-us__main nav a p { font-size: 15px; padding-top: 7px; } .header-contact-us__main nav a:hover, .header-contact-us__main nav a:active, .header-contact-us__main nav a:visited, .header-contact-us__main nav a:focus { text-decoration: none; } .header-contact-us__main__tel { padding: 20px; } .header-contact-us__main__tel > div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 5px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 5px auto 0 auto; } .header-contact-us__main__tel--number { font-size: 44px; padding-right: 20px; } .header-contact-us__main__tel--number::before { margin-right: 5px; } .header-contact-us__main__tel--time { margin-top: 0; } .header-contact-us__main__tel--time span { font-size: 16px; } .header-contact-us__main__list { padding: 0 0 70px 0; } } @media (min-width: 1024px) { .header-contact-us__main nav a:hover { -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, .3); box-shadow: 0 0 30px 0 rgba(0, 0, 0, .3); } } .body-contact-us__container { width: 100%; height: auto; padding: 0 5%; max-width: 764px; margin: 0 auto; } @media (min-width: 768px) { .body-contact-us__container { width: 80%; padding: 0; } } .body-contact-us__about { padding: 20px 0 40px 0; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; } .body-contact-us__about h2 { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 400 !important; line-height: 1.5; letter-spacing: 1px; text-align: center; color: black; margin: 0; } .body-contact-us__about h2 span { width: 140px; height: auto; display: block; margin: 0 auto; } .body-contact-us__about h2 span img { width: 100%; display: block; } .body-contact-us__about ul { margin: 25px 0 0 0; list-style-type: none; padding: 0; display: grid; grid-template-columns: 1fr; row-gap: 20px; } .body-contact-us__about ul li a { display: block; -webkit-transition: 0.5s; transition: 0.5s; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; line-height: 2; letter-spacing: 1px; padding: 17px 58px 17px 16px; border: 1px solid #e3e3e3; position: relative; } .body-contact-us__about ul li a:hover, .body-contact-us__about ul li a:active, .body-contact-us__about ul li a:visited, .body-contact-us__about ul li a:focus { text-decoration: none; } .body-contact-us__about ul li a::after { content: ''; width: 28px; height: 7px; background-image: url("https://static.lenskart.com/owndays/img/contact-us/arrow-r-black.png"); background-size: contain; position: absolute; right: 16px; top: calc(50% - 3.5px); } @media (min-width: 768px) { .body-contact-us__about { padding: 40px 0 90px 0; } .body-contact-us__about h2 span { width: 170px; } .body-contact-us__about ul { margin: 60px 0 0 0; grid-template-columns: 1fr 1fr; gap: 20px; } .body-contact-us__about ul li a { padding: 24px 73px 24px 30px; } .body-contact-us__about ul li a::after { right: 24px; } } @media (min-width: 1024px) { .body-contact-us__about ul li a:hover { color: #999; } } .body-contact-us__recruit { padding: 20px 0 40px 0; border-bottom: 1px solid #e3e3e3; } .body-contact-us__recruit h2 { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 400 !important; line-height: 1.5; letter-spacing: 1px; text-align: center; color: black; margin: 0; } .body-contact-us__recruit h2 span { width: 60px; height: auto; display: block; margin: 0 auto; } .body-contact-us__recruit h2 span img { width: 100%; display: block; } .body-contact-us__recruit ul { list-style-type: none; margin: 40px 0 0 0; max-width: 510px; display: grid; grid-template-columns: 1fr; padding: 0; } .body-contact-us__recruit ul li { display: grid; grid-template-columns: 130px 1fr; grid-template-rows: 30px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .body-contact-us__recruit ul li:nth-child(2) { grid-template-rows: 60px; } .body-contact-us__recruit ul li h4, .body-contact-us__recruit ul li p { font-family: "Founders Grotesk", sans-serif; font-weight: normal !important; font-size: 15px; line-height: 2; letter-spacing: 1px; color: black; margin: 0; } .body-contact-us__recruit__link { margin-top: 20px; } .body-contact-us__recruit__link a { display: block; -webkit-transition: 0.5s; transition: 0.5s; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; line-height: 2; letter-spacing: 1px; padding: 17px 58px 17px 16px; border: 1px solid #e3e3e3; position: relative; } .body-contact-us__recruit__link a:hover, .body-contact-us__recruit__link a:active, .body-contact-us__recruit__link a:visited, .body-contact-us__recruit__link a:focus { text-decoration: none; } .body-contact-us__recruit__link a::after { content: ''; width: 28px; height: 7px; background-image: url("https://static.lenskart.com/owndays/img/contact-us/arrow-r-black.png"); background-size: contain; position: absolute; right: 16px; top: calc(50% - 3.5px); } @media (min-width: 768px) { .body-contact-us__recruit { padding: 40px 0 70px 0; } .body-contact-us__recruit h2 span { width: 80px; } .body-contact-us__recruit ul { margin: 40px auto 0; max-width: 510px; } .body-contact-us__recruit ul li:nth-child(2) { grid-template-rows: 30px; } .body-contact-us__recruit__link { margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-contact-us__recruit__link a { width: 48.5%; padding: 24px 73px 24px 30px; } .body-contact-us__recruit__link a::after { right: 24px; } } @media (min-width: 1024px) { .body-contact-us__recruit__link a:hover { color: #999; } } .footer-contact-us { padding: 20px 0 40px 0; border-bottom: 1px solid #e3e3e3; margin-bottom: 60px; } .footer-contact-us__container { width: 100%; height: auto; padding: 0 5%; max-width: 764px; margin: 0 auto; } @media (min-width: 768px) { .footer-contact-us__container { width: 80%; padding: 0; } } .footer-contact-us h2 { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 400 !important; line-height: 1.5; letter-spacing: 1px; text-align: center; color: black; margin: 0; } .footer-contact-us h2 span { width: 60px; height: auto; display: block; margin: 0 auto; } .footer-contact-us h2 span img { width: 100%; display: block; } .footer-contact-us ul { list-style-type: none; margin: 40px 0 0 0; max-width: 510px; display: grid; grid-template-columns: 1fr; padding: 0; } .footer-contact-us ul li { display: grid; grid-template-columns: 130px 1fr; grid-template-rows: 30px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .footer-contact-us ul li:nth-child(2) { grid-template-rows: 60px; } .footer-contact-us ul li h4, .footer-contact-us ul li p { font-family: "Founders Grotesk", sans-serif; font-weight: normal !important; font-size: 15px; line-height: 2; letter-spacing: 1px; color: black; margin: 0; } @media (min-width: 768px) { .footer-contact-us { padding: 40px 0 70px 0; } .footer-contact-us h2 span { width: 80px; } .footer-contact-us ul { margin: 40px auto 0; max-width: 510px; } .footer-contact-us ul li:nth-child(2) { grid-template-rows: 30px; } } @media (min-width: 1024px) { .footer-contact-us { margin-bottom: 120px; } } .header-senichisaku__main { text-align: center; } .header-senichisaku__main picture img { display: block; width: 100%; } .header-senichisaku__main .base-senichisaku__container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-senichisaku__main__title { font-size: 0; line-height: 1; margin-bottom: 25px; } .header-senichisaku__main__title img { display: block; width: 100%; height: auto; max-width: 167px; margin: 0 auto 7px; } .header-senichisaku__main__text { font-size: 17px; line-height: 1.65; margin: 0; } @media (min-width: 1024px) { .header-senichisaku__main__title { margin-bottom: 50px; } .header-senichisaku__main__title img { max-width: 340px; margin-bottom: 6px; } .header-senichisaku__main__text { font-size: 28px; } } .body-senichisaku__bs { padding-top: 13px; padding-bottom: 130px; } .body-senichisaku__bs__title { font-size: 24px; letter-spacing: 0.15em; margin-bottom: 50px; line-height: 1.6; } .body-senichisaku__bs__title small { color: white; display: block; font-size: 11px; letter-spacing: 0.08em; } .body-senichisaku__bs__img--glasses { margin-bottom: 70px; } .body-senichisaku__bs__img--town { position: relative; margin-bottom: 60px; } .body-senichisaku__bs__img--frame { max-width: 1050px; margin-top: 130px; margin-left: auto; margin-right: -5.5%; } .body-senichisaku__bs__subtitle { font-size: 24px; margin-bottom: 50px; line-height: 1.6; } .body-senichisaku__bs__text { margin-bottom: 70px; } .body-senichisaku__bs__slider { margin-bottom: 70px; } .body-senichisaku__bs__slider-item { padding-left: 1px; padding-right: 1px; } .body-senichisaku__bs__slider-item img { width: 100%; } .body-senichisaku__bs .base-senichisaku__btn-group { margin-bottom: 130px; } @media (max-width: 767px) { .body-senichisaku__bs__img--town { margin-left: -5.5%; margin-right: -5.5%; } } @media (min-width: 768px) { .body-senichisaku__bs__title, .body-senichisaku__bs__subtitle { line-height: 1.9; } } @media (min-width: 1024px) { .body-senichisaku__bs { padding-top: 80px; padding-bottom: 200px; } .body-senichisaku__bs__title { font-style: 32px; margin-bottom: 80px; } .body-senichisaku__bs__title small { font-size: 13px; } .body-senichisaku__bs__subtitle { font-size: 32px; margin-bottom: 100px; } .body-senichisaku__bs__text { margin-bottom: 130px; } .body-senichisaku__bs__img--glasses { margin-bottom: 130px; } .body-senichisaku__bs__img--town { margin-bottom: 100px; } .body-senichisaku__bs__img--frame { margin-top: 200px; } .body-senichisaku__bs__slider { margin-bottom: 130px; } .body-senichisaku__bs__slider-item { padding-left: 4px; padding-right: 4px; } .body-senichisaku__bs .base-senichisaku__btn-group { margin-bottom: 200px; } } .body-senichisaku__craftsmen { padding-bottom: 80px; } .body-senichisaku__craftsmen__top { position: relative; } .body-senichisaku__craftsmen__title { font-size: 24px; margin-bottom: 50px; line-height: 1.6; } .body-senichisaku__craftsmen__text { margin-bottom: 70px; } .body-senichisaku__craftsmen__block { margin-bottom: 50px; } .body-senichisaku__craftsmen__block-title { font-size: 18px; margin-bottom: 30px; position: relative; padding-left: 54px; line-height: 1.6; } .body-senichisaku__craftsmen__block-title::before { content: ""; position: absolute; top: 50%; left: 0; border-top: 1px solid white; width: 40px; } .body-senichisaku__craftsmen__block--odd .body-senichisaku__craftsmen__block-img { margin-left: -5.5%; } .body-senichisaku__craftsmen__block--even .body-senichisaku__craftsmen__block-img { margin-right: -5.5%; } @media (max-width: 1023px) { .body-senichisaku__craftsmen__top > .base-senichisaku__container { margin-top: -200px; } .body-senichisaku__craftsmen__block-img { margin-bottom: 50px; } } @media (min-width: 768px) { .body-senichisaku__craftsmen__title, .body-senichisaku__craftsmen__block-title { line-height: 1.9; } } @media (min-width: 1024px) { .body-senichisaku__craftsmen { padding-bottom: 100px; } .body-senichisaku__craftsmen__top > .base-senichisaku__container { position: absolute; left: 0; right: 0; bottom: 0; } .body-senichisaku__craftsmen__title { font-size: 32px; margin-bottom: 100px; } .body-senichisaku__craftsmen__text { margin-bottom: 140px; } .body-senichisaku__craftsmen__block { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1173px; margin-bottom: 100px; } .body-senichisaku__craftsmen__block-details { padding-top: 90px; } .body-senichisaku__craftsmen__block-img { -ms-flex-negative: 0; flex-shrink: 0; width: 50%; max-width: 633px; } .body-senichisaku__craftsmen__block-title { font-size: 28px; margin-bottom: 40px; } .body-senichisaku__craftsmen__block-text { font-size: 16px; } .body-senichisaku__craftsmen__block--odd { margin-right: auto; } .body-senichisaku__craftsmen__block--odd .body-senichisaku__craftsmen__block-details { padding-left: 80px; } .body-senichisaku__craftsmen__block--even { margin-left: auto; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .body-senichisaku__craftsmen__block--even .body-senichisaku__craftsmen__block-details { padding-right: 80px; padding-left: 12px; } } .body-senichisaku__process { padding-bottom: 80px; } .body-senichisaku__process picture { display: block; } .body-senichisaku__process picture img { width: 100%; height: auto; } .body-senichisaku__process__cover { margin-bottom: 70px; } .body-senichisaku__process__title { font-size: 24px; margin-bottom: 50px; line-height: 1.6; } .body-senichisaku__process__block { margin-bottom: 50px; } .body-senichisaku__process__block-title { font: 300 13px "HiraginoMinchoPro", sans-serif; letter-spacing: 0.015em; margin-bottom: 10px; } .body-senichisaku__process__block-text { font: 300 11px "HiraginoMinchoPro", sans-serif; line-height: 1.9; margin-bottom: 20px; } .body-senichisaku__process__block-media { pointer-events: none; } @media (max-width: 1023px) { .body-senichisaku__process__block-media { margin-bottom: 25px; } .body-senichisaku__process__block--sm, .body-senichisaku__process__block--sm2 { padding-left: 28px; padding-right: 28px; } .body-senichisaku__process__block--lg .body-senichisaku__process__block-media { margin-left: -5.5%; margin-right: -5.5%; } } @media (min-width: 1024px) { .body-senichisaku__process { padding-bottom: 140px; } .body-senichisaku__process__cover { margin-bottom: 130px; } .body-senichisaku__process__title { font-size: 32px; margin-bottom: 100px; } .body-senichisaku__process__block { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-senichisaku__process__block-title { font-size: 20px; } .body-senichisaku__process__block-text { font-size: 13px; line-height: 2.2; } .body-senichisaku__process__block--odd .body-senichisaku__process__block-details { padding-left: 67px; padding-right: 80px; max-width: 69%; } .body-senichisaku__process__block--even { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .body-senichisaku__process__block--even .body-senichisaku__process__block-details { padding-right: 67px; } .body-senichisaku__process__block--sm .body-senichisaku__process__block-media { max-width: 817px; } .body-senichisaku__process__block--sm2 .body-senichisaku__process__block-media { max-width: 364px; } .body-senichisaku__process__block--sm2 .body-senichisaku__process__block-details { max-width: 53%; } .body-senichisaku__process__block--md .body-senichisaku__process__block-media { max-width: 492px; } .body-senichisaku__process__block--md .body-senichisaku__process__block-details { padding-left: 45px; max-width: 57.3%; } } .footer-senichisaku { padding-bottom: 200px; } .footer-senichisaku__img { margin-bottom: 30px; } .footer-senichisaku__title { font-size: 24px; margin-bottom: 50px; line-height: 1.6; } .footer-senichisaku__text { margin-bottom: 70px; } .footer-senichisaku picture { display: block; } .footer-senichisaku picture img { width: 100%; height: auto; } @media (min-width: 1024px) { .footer-senichisaku { padding-bottom: 270px; } .footer-senichisaku__img { margin-bottom: 70px; } .footer-senichisaku__title { font-size: 32px; margin-bottom: 100px; line-height: 1.9; } .footer-senichisaku__text { margin-bottom: 130px; } } .base-senichisaku { background-color: black; color: white; font-family: yu-mincho-pr6n, sans-serif !important; font-weight: normal !important; font-size: 15px; letter-spacing: 0.01em; line-height: 2.33; overflow-x: hidden; } .base-senichisaku .breadcrumb.breadcrumb--2 { border-radius: 0; } .base-senichisaku .breadcrumb.breadcrumb--2 > li + li::before { color: black; } @media (min-width: 1024px) { .base-senichisaku { font-size: 18px; } } .base-senichisaku h2, .base-senichisaku h5 { font-family: yu-mincho-pr6n, sans-serif !important; } .base-senichisaku > section { position: relative; } .base-senichisaku__container { width: 100%; max-width: calc(1160px + 10%); margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; } .base-senichisaku__container--sm { max-width: calc(780px + 10%); } .base-senichisaku__container--lg { max-width: calc(1600px + 10%); } .base-senichisaku__hide--sp { display: none; } @media (min-width: 768px) { .base-senichisaku__hide--sp { display: block; } } .base-senichisaku__hide--pc { display: block; } @media (min-width: 768px) { .base-senichisaku__hide--pc { display: none; } } .base-senichisaku__btn { border: 1px solid white; width: 100%; height: 61px; color: white; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } .base-senichisaku__btn:hover, .base-senichisaku__btn:active, .base-senichisaku__btn:visited, .base-senichisaku__btn:focus { text-decoration: none; color: white; } .base-senichisaku__btn > span { display: inline-block; position: relative; padding-left: 32px; } .base-senichisaku__btn > span::before { content: ""; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 12px; height: 18px; background: url("https://static.lenskart.com/owndays/img/senichisaku/arrow-right.png") no-repeat center center/contain; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .base-senichisaku__btn-group { max-width: 1040px; margin-left: auto; margin-right: auto; display: grid; grid-gap: 20px 70px; } @media (min-width: 768px) { .base-senichisaku__btn-group { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .base-senichisaku__btn { height: 68px; } .base-senichisaku__btn:hover { color: white; } .base-senichisaku__btn:hover > span::before { -webkit-transform: translateY(-50%) translateX(5px); transform: translateY(-50%) translateX(5px); } } .header-sun__main { position: relative; } .header-sun__main .base-sun__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .header-sun__main__bg img { display: block; width: 100%; height: auto; aspect-ratio: 425 / 654; } .header-sun__main__text { position: absolute; inset: 0; padding-block: 50px 70px; font-family: "Founders Grotesk", sans-serif; } .header-sun__main__text h1, .header-sun__main__text h2 { margin: 0; } .header-sun__main__text h1 { font: 0 / 0 a; } .header-sun__main__text h1 img { display: block; max-width: 120px; margin: 0 auto; } .header-sun__main__text h2 { color: white; font-size: 36px; font-weight: 600 !important; line-height: 61.2px; letter-spacing: 1.08px; } .header-sun__main::after { content: ""; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); width: 1px; height: 60px; background-color: #d9d9d9; z-index: 2; } @media (min-width: 768px) { .header-sun__main__bg img { aspect-ratio: 2 / 1; } .header-sun__main__text h2 { line-height: 1.2; } } @media (min-width: 1024px) { .header-sun__main__bg img { min-height: 720px; -o-object-fit: cover; object-fit: cover; } .header-sun__main__text { padding-block: 76px 120px; } .header-sun__main__text img { max-width: 192px; } .header-sun__main__text h2 { font-size: 40px; letter-spacing: 1.2px; padding-left: 20px; } .header-sun__main::after { height: 80px; } } @media (min-width: 1124px) { .header-sun__main__text h2 br { display: none; } .header-sun__main__text h1 img { max-width: 170px; } } .header-sun__about { position: relative; } .header-sun__about__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1280px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } @media screen and (min-width: 768px) { .header-sun__about__container { gap: 40px; } } .header-sun__about__bg { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .header-sun__about__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(352.03% 121.7% at 50% 7.5%, rgba(0, 0, 0, .4) 0, rgba(217, 217, 217, .3) 100%); } .header-sun__about__bg video { display: inline-block; width: 100%; height: 524px; -o-object-fit: cover; object-fit: cover; } .header-sun__about__text { position: absolute; inset: auto 0 32px 0; color: white; font-family: "Founders Grotesk", sans-serif; } .header-sun__about__text p { color: white; font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 20px; letter-spacing: 0.42px; padding: 0; margin: 0; } .header-sun__about__text h2 { color: white; font-size: 36px; font-style: normal; font-weight: 700 !important; line-height: 150%; letter-spacing: 0.72px; padding: 0; margin: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } .header-sun__about__play { position: absolute; inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; font: 0 / 0 a; background: url("https://static.lenskart.com/owndays/img/sun/icon_play.svg") no-repeat 50%/80px auto; -webkit-transition: all .3s ease; transition: all .3s ease; } @media (min-width: 1024px) { .header-sun__about__bg video { height: 580px; } .header-sun__about__text { inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 20px; font-family: "Founders Grotesk", sans-serif; } .header-sun__about__text p { color: white; font-size: 16px; font-style: normal; font-weight: 500 !important; line-height: 32px; letter-spacing: 0.48px; max-width: calc(50% - 160px); padding-top: 0; padding: 0; margin: 0; } .header-sun__about__text h2 { color: white; font-size: 50px; font-style: normal; font-weight: 700 !important; line-height: 74px; letter-spacing: 1px; padding: 0; margin: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } } .header-sun__check__ribbon { display: table; margin: 0 auto; position: absolute; top: -9px; left: 0; right: 0; } @media (max-width: 768px) { .header-sun__check__ribbon { width: 98px; } } .header-sun__check__ribbon-text { position: absolute; top: 0; left: -5px; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: "Founders Grotesk", sans-serif; font-weight: 700 !important; font-size: 14px; letter-spacing: 1.54px; padding-bottom: 6px; color: black; } .header-sun__check__ribbon-text span { letter-spacing: 2.8px; } .header-sun__check__inner { border-radius: 20px; border: 2px solid #f7f6f2; padding: 50px 20px 19px; margin-top: 60px; position: relative; } .header-sun__check__title { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600 !important; line-height: 28px; letter-spacing: 0.72px; text-align: center; color: black; } .header-sun__check-bg-svg { background: transparent !important; } .header-sun__check p { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 500 !important; line-height: 28px; margin: 15px 0 0 0; letter-spacing: 0.42px; color: black; } @media (min-width: 768px) { .header-sun__check__ribbon { left: auto; right: 60px; } .header-sun__check__title { text-align: left; } .header-sun__check__title br { display: none; } } @media (min-width: 1024px) { .header-sun__check__ribbon svg { width: 113px; height: 45px; } .header-sun__check__ribbon-text { font-size: 16px; letter-spacing: 1.76px; } .header-sun__check__inner { padding: 44px 50px; margin-top: 95px; width: 100%; max-width: 1080px; margin-inline: auto; } .header-sun__check__title { font-size: 22px; letter-spacing: 1.32px; } .header-sun__check p { margin-top: 18px; letter-spacing: 0.42px; } } .header-sun__navs { position: relative; padding-block: 64px 24px; } .header-sun__navs ul { list-style-type: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .header-sun__navs ul a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 600 !important; letter-spacing: 0.96px; line-height: normal; color: black; -webkit-transition: all .3s ease; transition: all .3s ease; background-color: #f7f6f2; height: 52px; padding-inline: 20px; border-radius: 5px; z-index: 1; } .header-sun__navs ul a::after { content: ""; width: 28px; height: 28px; border-radius: 160px; border-radius: 10rem; border: 1px solid black; background: black url("https://static.lenskart.com/owndays/img/sun/icon-arrow-down.svg") no-repeat 50%/8px auto; -webkit-transition: all .3s ease; transition: all .3s ease; } @media (min-width: 768px) { .header-sun__navs ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-color: #f7f6f2; height: 76px; border-radius: 10px; } .header-sun__navs ul li { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-sun__navs ul li:not(:last-child):before { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 48px; background-color: rgba(0, 0, 0, .2); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .header-sun__navs ul li a { padding: 20px; gap: 28px; } .header-sun__navs ul li a:hover { color: #999; text-decoration: none; } .header-sun__navs ul li a:hover::after { background-color: white; background-image: url("https://static.lenskart.com/owndays/img/sun/icon-arrow-black.svg"); } } @media (min-width: 1024px) { .header-sun__navs { padding-block: 90px 100px; } .header-sun__navs ul a { font-size: 16px; letter-spacing: .96px; } } .body-sun__styles { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-sun__styles--reverse { padding-top: 100px; } .body-sun__styles__item:nth-child(even) .body-sun__styles__features .base-sun__container::before { left: 40px; right: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 40px; } @media (min-width: 390px) { .body-sun__styles__item .base-sun__btn { width: 326px; max-width: 326px; margin: auto; } } @media (min-width: 768px) { .body-sun__styles__item .base-sun__btn { width: 340px; margin: 0; } } .body-sun__styles__top { position: relative; } .body-sun__styles__top-img { overflow: hidden; } .body-sun__styles__top-img-slider { aspect-ratio: 130 / 203; } .body-sun__styles__top-img-slider img { display: block; } .body-sun__styles__top-text { margin-bottom: 60px; } @media (min-width: 1024px) { .body-sun__styles__top-text { margin-bottom: 0; } } .body-sun__styles__top-text h2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-family: "Founders Grotesk", sans-serif; font-size: 27px; font-weight: 600 !important; line-height: 40px; letter-spacing: 1.68px; margin-bottom: 32px; color: black; } .body-sun__styles__top-text h2 span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: inherit; overflow: hidden; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; position: relative; } .body-sun__styles__top-text h2 span::after { content: ""; -webkit-transition: all 0.3s; transition: all 0.3s; width: 0%; height: 90%; position: absolute; top: 0; left: 0; background-color: black; z-index: -1; } .body-sun__styles__top-text h2.aos-animate span { -webkit-animation: textanicolor 1.5s forwards; animation: textanicolor 1.5s forwards; } .body-sun__styles__top-text h2.aos-animate span::after { -webkit-animation: textani 1.5s forwards; animation: textani 1.5s forwards; } .body-sun__styles__top-text-details h3, .body-sun__styles__top-text-details p { font-family: "Founders Grotesk", sans-serif; color: black; } .body-sun__styles__top-text-details h3 { font-size: 18px; font-weight: 700; letter-spacing: .72px; padding-bottom: 8px; border-bottom: 1px solid black; margin-bottom: 16px; line-height: 40px; } .body-sun__styles__top-text-details h3 span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: inherit; overflow: hidden; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; position: relative; } .body-sun__styles__top-text-details h3 span::before { content: ""; -webkit-transition: all 0.3s; transition: all 0.3s; width: 0%; height: 90%; position: absolute; top: 0; left: 0; background-color: black; z-index: -1; } .body-sun__styles__top-text-details h3.aos-animate span { -webkit-animation: textanicolor 1.5s forwards; animation: textanicolor 1.5s forwards; } .body-sun__styles__top-text-details h3.aos-animate span::before { -webkit-animation: textani 1.5s forwards; animation: textani 1.5s forwards; } .body-sun__styles__top-text-details p { font-size: 14px; font-weight: 500 !important; letter-spacing: .56px; line-height: 32px; margin-bottom: 20px; } .body-sun__styles__top-text-details.aos-animate span { -webkit-animation: textanicolor 1.5s forwards; animation: textanicolor 1.5s forwards; } .body-sun__styles__top-text-details.aos-animate span::before { -webkit-animation: textani 1.5s forwards; animation: textani 1.5s forwards; } .body-sun__styles__top-text-details-img { position: relative; width: 100%; max-width: 310px; margin-left: 20px; } .body-sun__styles__top-text-details-img span { display: block; width: 180px; height: 90px; border-style: solid; border-color: black; border-width: 0 0 1px 1px; position: absolute; top: 0; left: 0; } .body-sun__styles__top-text-details-img img { display: block; position: relative; max-width: 160px; margin-left: auto; z-index: 1; aspect-ratio: 1 / 1; } .body-sun__styles__top-text-details-img::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 160px; border-radius: 10rem; background-color: black; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .body-sun__styles__option { background-color: #f7f6f2; border-radius: 40px; padding: 53px 22px 50px; margin-block: 80px; } @media (max-width: 768px) { .body-sun__styles__option { margin: 80px 0 0; } } .body-sun__styles__option-title { font-family: "Founders Grotesk", sans-serif; font-size: 32px; font-weight: 600 !important; letter-spacing: 1.28px; text-align: center; margin-block: -70px 30px; color: black; line-height: 1; } .body-sun__styles__option-sub-title { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600 !important; letter-spacing: 0.54px; text-align: center; padding-bottom: 18px; color: black; -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-style: solid; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; margin: 0; } .body-sun__styles__option-desc { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 500 !important; letter-spacing: 0.42px; line-height: 1.8; color: black; } .body-sun__styles__option-desc--remark { position: relative; padding-left: 10px; } .body-sun__styles__option-desc--remark::before { content: '*'; position: absolute; top: 0; left: 0; } .body-sun__styles__option-step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 20px auto 0; max-width: 400px; list-style-type: none; padding: 0; } .body-sun__styles__option-step > li { margin-left: 0; } .body-sun__styles__option-step > li:has(.icon-plus) { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .body-sun__styles__option-step p { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600 !important; text-align: center; margin: 8px 0 0 0; color: black; } .body-sun__styles__option-step-img-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .body-sun__styles__option-step-img-wrap img { margin: 0 auto; } .body-sun__styles__option-step .icon-plus { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 11px; height: 11px; margin-top: 31px; } .body-sun__styles__option-step .icon-plus svg { width: 100%; height: 100%; } .body-sun__styles__option-step--3col img { width: 70px; } .body-sun__styles__option-recommended { display: grid; gap: 26px; list-style-type: none; padding: 0; margin: 0; } .body-sun__styles__option-recommended > li > a:hover, .body-sun__styles__option-recommended > li > a:active, .body-sun__styles__option-recommended > li > a:visited, .body-sun__styles__option-recommended > li > a:focus { text-decoration: none; } .body-sun__styles__option-recommended > li > a > img { width: 100%; height: auto; aspect-ratio: 340 / 200.46; } .body-sun__styles__option-recommended-title { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600 !important; line-height: 30.6px; color: black; letter-spacing: 0.54px; text-align: center; margin-block: 35px 20px; padding-top: 30px; border-top: 1px solid black; } .body-sun__styles__option-recommended-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 17px; } .body-sun__styles__option-recommended-footer-title { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600 !important; line-height: normal; color: black; letter-spacing: 0.72px; margin: 0 0 5px 0; } .body-sun__styles__option-recommended-footer-more { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 500 !important; line-height: normal; letter-spacing: 0.56px; color: #0094c8; } .body-sun__styles__option-recommended-footer-price { font-family: "Founders Grotesk", sans-serif; font-size: 23px; font-weight: 500 !important; line-height: 1.4; color: black; letter-spacing: 1.15px; } .body-sun__styles__option-note { margin-top: 30px; padding: 0; } .body-sun__styles__option-note > li { display: -webkit-box; display: -ms-flexbox; display: flex; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 500 !important; line-height: 1.8; color: #999; letter-spacing: normal; } .body-sun__styles__option-note > li::before { content: "*"; margin-right: 5px; } @media (min-width: 768px) { .body-sun__styles__option-top { display: grid; grid-template-columns: auto auto; gap: 30px; } .body-sun__styles__option-top-detail { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .body-sun__styles__option-step { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 100%; margin-top: 0; grid-column-gap: 10px; max-width: none; } .body-sun__styles__option-step > li { margin-left: -4px; } .body-sun__styles__option-title { margin-bottom: 62px; } .body-sun__styles__option-sub-title { text-align: left; } .body-sun__styles__option-sub-title br { display: none; } .body-sun__styles__option-recommended { grid-template-columns: 1fr 1fr; } .body-sun__styles__option-recommended-title { border: none; padding-top: 0; margin-top: 57px; } } @media (min-width: 1024px) { .body-sun__styles__option-top { gap: 73px; } .body-sun__styles__option-step > li { margin-left: 0; } .body-sun__styles__option-step img { width: 120px; } .body-sun__styles__option-step p { font-size: 16px; margin-top: 15px; white-space: nowrap; line-height: 1.3; } .body-sun__styles__option-step-price { font-size: 23px; letter-spacing: 1.15px; } .body-sun__styles__option-step-price small { font-size: 12px; letter-spacing: 0.6px; } .body-sun__styles__option-step .icon-plus { width: 20px; height: 20px; margin-top: 50px; } .body-sun__styles__option-title { font-size: 48px; letter-spacing: 1.92px; margin-block: -80px 92px; } .body-sun__styles__option-sub-title { font-size: 24px; letter-spacing: 0.72px; line-height: 42px; } .body-sun__styles__option-recommended > li > a:hover img { opacity: .6; -webkit-transition: .5s; transition: .5s; } .body-sun__styles__option-recommended > li > a:hover .body-sun__styles__option-recommended-footer-title, .body-sun__styles__option-recommended > li > a:hover .body-sun__styles__option-recommended-footer-price { color: #999; -webkit-transition: .5s; transition: .5s; } .body-sun__styles__option-recommended-title { border: none; padding-top: 0; margin-block: 57px 35px; font-size: 24px; line-height: 42px; letter-spacing: 0.72px; } .body-sun__styles__option-recommended-footer { margin-top: 20px; } .body-sun__styles__option-recommended-footer-title { font-size: 20px; letter-spacing: 0.8px; } .body-sun__styles__option-note { margin-top: 40px; } } @media (min-width: 1296px) { .body-sun__styles__option { padding: 120px 80px 80px; margin-block: 120px 0; } .body-sun__styles__option-title { margin-top: -150px; } .body-sun__styles__option-step { grid-column-gap: 25px; } .body-sun__styles__option-step > li { margin-left: -20px; } .body-sun__styles__option-step p br { display: none; } .body-sun__styles__option-step--2col { padding-inline: 0; } .body-sun__styles__option-recommended { grid-template-columns: repeat(3, 1fr); gap: 30px; } } @media (min-width: 768px) { .body-sun__styles--reverse .body-sun__styles__top-img { left: 0; right: calc(50% + 40px); } .body-sun__styles--reverse .body-sun__styles__top-text-details, .body-sun__styles--reverse .body-sun__styles__top-text h2 { max-width: 50%; margin-left: auto; } .body-sun__styles--reverse .body-sun__styles__top-img-slider > .slick-list > .slick-track .slick-slide { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .body-sun__styles__clear-sunglasses { margin-top: 120px; } .body-sun__styles__top { margin-bottom: 30px; } .body-sun__styles__top-img { position: absolute; top: 0; left: calc(50% + 40px); right: 0; bottom: 0; overflow: hidden; } .body-sun__styles__top-img-slider { aspect-ratio: 34 / 39; } .body-sun__styles__top-text-details { max-width: 50%; } .body-sun__styles__top-text-details-img { margin-left: auto; } .body-sun__styles__top-text .base-sun__container h2 { max-width: 50%; } .body-sun__styles__item:first-child .base-sun__btn { max-width: 340px; } } @media (min-width: 1024px) { .body-sun__styles--reverse { padding-top: 120px; } .body-sun__styles__top { min-height: 780px; margin-bottom: 60px; } .body-sun__styles__top-img-slider img { height: 780px; -o-object-fit: cover; object-fit: cover; -o-object-position: left top; object-position: left top; } .body-sun__styles__top-text { padding-top: 56px; padding-left: 40px; } .body-sun__styles__top-text h2 { max-width: 54%; font-size: 36px; line-height: 61.2px; letter-spacing: 0.72px; margin-bottom: 45px; } .body-sun__styles__top-text-details { max-width: 50%; } .body-sun__styles__top-text-details h3 { font-size: 24px; letter-spacing: 1.44px; padding-bottom: 16px; margin-bottom: 24px; } .body-sun__styles__top-text-details p { font-size: 16px; margin-bottom: 40px; letter-spacing: 0.48px; } .body-sun__styles__top-text-details-img { margin-left: auto; max-width: 500px; } .body-sun__styles__top-text-details-img span { width: 240px; height: 110px; } .body-sun__styles__top-text-details-img img { max-width: 220px; } } .body-sun__features { position: relative; } .body-sun__features .base-sun__container { position: relative; padding-bottom: 40px; } .body-sun__features .base-sun__container::before { content: ""; position: absolute; inset: 16px 40px 0 0; background-color: #f7f6f2; z-index: -1; left: 40px; right: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 40px; } .body-sun__features h3 { font-family: "Founders Grotesk", sans-serif; font-size: 32px; font-weight: 700 !important; line-height: 1; letter-spacing: 1.28px; margin-bottom: 40px; color: black; } .body-sun__features ul { list-style-type: none; margin: 0; display: grid; gap: 30px 26px; padding: 0; } .body-sun__features ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; position: relative; border: 1px solid rgba(0, 0, 0, .2); background-color: white; border-radius: 100rem; padding-right: 18px; } .body-sun__features ul li span { -ms-flex-negative: 0; flex-shrink: 0; width: 100px; height: 100px; border-radius: 10rem; background-color: white; border: 1px solid black; display: grid; place-content: center; } .body-sun__features ul li span img { max-width: 68px; } .body-sun__features ul li small, .body-sun__features ul li p { color: black; } .body-sun__features ul li small { position: absolute; top: 0; left: 104px; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: .8px; padding-inline: 4px; -webkit-transform: translateY(-58%); transform: translateY(-58%); } .body-sun__features ul li small::before { content: ""; position: absolute; top: 58%; left: 0; right: 0; height: 2px; background-color: white; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } .body-sun__features ul li p { width: 100%; height: auto; font-family: "Founders Grotesk", sans-serif; font-size: 13px; font-weight: 500 !important; letter-spacing: .52px; margin: 0; } @media (min-width: 768px) { .body-sun__features .base-sun__container::before { top: 24px; left: 40px; right: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 40px; } .body-sun__features ul { grid-template-columns: repeat(4, 1fr); gap: 30px 20px; } .body-sun__features ul li { grid-column: span 2; } .body-sun__features ul li span { width: 120px; height: 120px; } .body-sun__features ul li small { margin-left: 20px; font-size: 28px; letter-spacing: 2px; } .body-sun__features ul li p { font-size: 14px; line-height: 22px; letter-spacing: 0.42px; } .body-sun__features ul li:last-child { grid-column: 2 / span 2; } } @media (min-width: 1024px) { .body-sun__features .base-sun__container { padding-bottom: 100px; } .body-sun__features .base-sun__container::before { right: -1000%; left: 100px; border-bottom-right-radius: 0; border-bottom-left-radius: 60px; } .body-sun__features h3 { font-size: 48px; letter-spacing: 1.92px; margin-bottom: 70px; } .body-sun__features ul { grid-template-columns: repeat(3, 1fr); gap: 30px 20px; } .body-sun__features ul li { grid-column: span 1; } .body-sun__features ul li:last-child { grid-column: unset; } } .body-sun__description { padding-block: 40px 55px; } .body-sun__description h3, .body-sun__description p { font-family: "Founders Grotesk", sans-serif; color: black; } .body-sun__description h3 { text-align: center; font-size: 18px; font-weight: 600 !important; line-height: 170%; letter-spacing: .72px; margin-block: 60px 20px; } .body-sun__description p { position: relative; font-size: 14px; font-weight: 400 !important; letter-spacing: 0.48px; line-height: 32px; max-width: 730px; margin-inline: auto; -webkit-mask-image: linear-gradient(290deg, transparent 30%, black 65%, black); mask-image: linear-gradient(290deg, transparent 30%, black 65%, black); -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 300% 100%; mask-size: 300% 100%; opacity: 0; } .body-sun__description p.aos-animate { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; -webkit-transition: opacity 1200ms, -webkit-mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1); transition: opacity 1200ms, -webkit-mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1); transition: opacity 1200ms, mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1); transition: opacity 1200ms, mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1), -webkit-mask-position 2000ms cubic-bezier(0.5, 1, 0.89, 1); } @media (min-width: 768px) { .body-sun__description .base-sun__btn { max-width: 340px; margin-inline: auto; } } @media (min-width: 1024px) { .body-sun__description { padding-block: 50px 105px; } .body-sun__description h3 { font-size: 24px; letter-spacing: .96px; margin-block: 80px 16px; } } .body-sun__lineup { position: relative; padding-bottom: 100px; } .body-sun__lineup::before { content: ""; position: absolute; inset: 16px 0 0; background-color: #f7f6f2; z-index: -1; top: 19px; } .body-sun__lineup h3 { font-family: "Founders Grotesk", sans-serif; font-size: 32px; font-weight: 700 !important; line-height: 1; letter-spacing: 1.28px; margin-bottom: 40px; color: black; } .body-sun__lineup__list { list-style-type: none; margin: 0; padding: 0; display: grid; gap: 60px 20px; grid-template-columns: 1fr; } .body-sun__lineup__item { width: 100%; max-width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; position: relative; } .body-sun__lineup__item .base-sun__btn { width: 100%; margin: 0 auto; } @media (min-width: 390px) { .body-sun__lineup__item .base-sun__btn { width: 326px; max-width: 326px; } } .body-sun__lineup__item > .slick-slider { overflow: hidden; } .body-sun__lineup__item > .slick-slider .slick-dots { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; gap: 4px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 16px 0 24px 0; list-style-type: none; margin-bottom: 0; } .body-sun__lineup__item > .slick-slider .slick-dots > li > button { width: 32px; height: 32px; border: 1px solid transparent; border-radius: 10rem; outline: none; background-color: transparent; padding: 0; margin: 0; display: grid; place-content: center; cursor: pointer; } .body-sun__lineup__item > .slick-slider .slick-dots > li > button img { width: 24px; height: 24px; -o-object-fit: cover; object-fit: cover; border-radius: inherit; } .body-sun__lineup__item > .slick-slider .slick-dots .slick-active { border: 1px solid black; border-radius: 50%; background-color: white; } .body-sun__lineup__item::before { content: attr(data-model); position: absolute; bottom: 31px; left: 0; font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 500 !important; letter-spacing: .36px; color: black; } .body-sun__lineup__item.has-btn::before { bottom: 70px; } @media (min-width: 768px) { .body-sun__lineup__list { grid-template-columns: repeat(4, 1fr); } .body-sun__lineup__item { grid-column: span 2; } .body-sun__lineup__item::before { bottom: 30px; } } @media (min-width: 1024px) { .body-sun__lineup::before { top: 24px; } .body-sun__lineup h3 { font-size: 48px; letter-spacing: 1.92px; margin-bottom: 70px; } .body-sun__lineup__list { grid-template-columns: repeat(3, 1fr); } .body-sun__lineup__item { grid-column: span 1; } .body-sun__lineup__item:last-child { width: 100%; grid-column: unset; grid-row: unset; } .body-sun__lineup__item .base-sun__btn { width: 340px; margin: 0 auto; } .body-sun__lineup__item::before { font-size: 18px; bottom: 29px; } .body-sun__lineup__item.has-btn::before { bottom: 82px; } } @-webkit-keyframes textanicolor { 0% { color: black; } 50% { color: white; } 100% { color: black; } } @keyframes textanicolor { 0% { color: black; } 50% { color: white; } 100% { color: black; } } @-webkit-keyframes textani { 0% { width: 0; } 50% { width: 100%; left: 0; } 100% { width: 100%; left: 102%; } } @keyframes textani { 0% { width: 0; } 50% { width: 100%; left: 0; } 100% { width: 100%; left: 102%; } } .footer-sun__gap { width: 100%; height: 80px; } .footer-sun__navs-sticky { position: relative; bottom: 0; width: 100%; height: 55px; z-index: 2; } .footer-sun__navs-sticky .base-sun__container { padding-inline: 0; } .footer-sun__navs-sticky .base-sun__btn { width: 160px !important; height: 55px; border-radius: 0; white-space: nowrap; text-align: center; } .footer-sun__navs-sticky .base-sun__btn--primary { border-top-left-radius: 15px !important; } .footer-sun__navs-sticky__inner { position: fixed; bottom: 0; width: 100%; height: auto; } .footer-sun__navs-sticky__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; max-width: 823px; margin: 0 auto; } @media (min-width: 768px) { .footer-sun__navs-sticky__gap { height: 100px; } .footer-sun__navs-sticky .base-sun__btn { width: 260px !important; } .footer-sun__navs-sticky .base-sun__btn--primary { border-top-left-radius: 20px !important; } .footer-sun__navs-sticky .base-sun__btn--secondary { border-top-right-radius: 20px !important; } .footer-sun__navs-sticky__actions { padding-right: 20px; max-width: none; } .footer-sun__navs-sticky__inner { background-color: transparent; padding: 0; } } .base-sun__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1280px; height: auto; } .base-sun__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid transparent; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 600 !important; letter-spacing: 0.12px; height: 40px; border-radius: 10px; padding-inline: 40px; -webkit-transition: 0.5s; transition: 0.5s; } .base-sun__btn--primary { background-color: #292929; border-color: #292929; color: white; } .base-sun__btn--primary:hover, .base-sun__btn--primary:focus { color: white; } .base-sun__btn--secondary { background-color: white; border-color: #535353; color: #535353; } .base-sun__btn--secondary:hover, .base-sun__btn--secondary:focus { color: #535353; } @media (min-width: 1024px) { .base-sun__btn { height: 54px; font-size: 16px; letter-spacing: 0.16px; } .base-sun__btn:hover, .base-sun__btn:active, .base-sun__btn:visited, .base-sun__btn:focus { text-decoration: none; } .base-sun__btn--primary:hover { background-color: #535353; border-color: #535353; color: white; } .base-sun__btn--secondary:hover { background-color: #535353; color: white; } } .base-sun__hide--sp { display: none; } .base-sun__hide--pc { display: block; } @media (min-width: 768px) { .base-sun__hide--sp { display: block; } .base-sun__hide--pc { display: none; } } .base-sun__scroll-hidden { overflow: hidden; } .base-gift-cards-products__container { width: 100%; max-width: 1152px; height: auto; margin: 0 auto; padding: 0 5%; } @media (min-width: 768px) { .base-gift-cards-products__container { width: 80%; padding: 0; } } .base-gift-cards-products__main { grid-area: left; } .base-gift-cards-products__link { font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; line-height: 2; -webkit-transition: 0.5s; transition: 0.5s; color: #0094c8; text-decoration: none; cursor: pointer; letter-spacing: 1px; } .base-gift-cards-products__link:hover, .base-gift-cards-products__link:active, .base-gift-cards-products__link:visited, .base-gift-cards-products__link:focus { text-decoration: none; } .base-gift-cards-products__link small { font-family: inherit; font-size: 60%; font-weight: 400 !important; } @media (min-width: 1024px) { .base-gift-cards-products__layout { display: grid; grid-template-areas: "left right" "detail right"; width: 80%; height: auto; margin: 0 auto; max-width: 1152px; } .base-gift-cards-products__main { max-width: 650px; } .base-gift-cards-products__main .base-gift-cards-products__container { width: 100%; } } @media (min-width: 1024px) and (max-width: 1295px) { .base-gift-cards-products__main { padding-right: 3%; max-width: 570px; } } .header-gift-cards-products { padding: 40px 0 50px 0; } .header-gift-cards-products__title, .header-gift-cards-products__desc { font-family: "Founders Grotesk", sans-serif; color: black; letter-spacing: 1px; } .header-gift-cards-products__title { font-size: 20px; font-weight: normal !important; line-height: 1.5; } .header-gift-cards-products__desc { margin: 0; font-size: 15px; font-weight: normal !important; line-height: 2; } @media (min-width: 768px) { .header-gift-cards-products__title { font-size: 38px; } } @media (min-width: 1024px) { .header-gift-cards-products { padding-top: 80px; } } .body-gift-cards-products__form section { margin-bottom: 50px; } .body-gift-cards-products__form-title { color: black; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: bold !important; line-height: 1; margin-bottom: 20px; text-align: left; letter-spacing: 1px; } .body-gift-cards-products__form-remain-message { color: #999; font-family: "Founders Grotesk", sans-serif; font-size: 11px; font-weight: normal !important; letter-spacing: 1px; line-height: 1.7; margin-bottom: 10px; text-align: right; } .body-gift-cards-products__form-error-message { color: #c7002e; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal; line-height: 2; margin: 0; } .body-gift-cards-products__form-card-design ul { list-style-type: none; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -4px; overflow-y: scroll; max-height: 80vw; } .body-gift-cards-products__form-card-design ul li { width: 33.33333%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 4px; } .body-gift-cards-products__form-card-design ul li label { display: block; margin: 0; } .body-gift-cards-products__form-card-design ul li label img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; aspect-ratio: 31 / 23; } .body-gift-cards-products__form-card-design__selected { position: relative; } .body-gift-cards-products__form-card-design__selected::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #0094c8; border-radius: 4px; } .body-gift-cards-products__form-card-denomination ul { list-style-type: none; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -4px; } .body-gift-cards-products__form-card-denomination ul li { width: 33.33333%; height: auto; padding: 4px; } .body-gift-cards-products__form-card-denomination ul li:last-child { width: 66.66667%; } .body-gift-cards-products__form-card-denomination ul li label { display: block; border: 1px solid #e3e3e3; border-radius: 4px; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 17px; font-weight: normal !important; letter-spacing: 1px; padding: 16px 20px 17px; line-height: 1; color: black; margin: 0; } .body-gift-cards-products__form-card-denomination ul li:last-child label { padding: 6px 10px 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-gift-cards-products__form-card-denomination__selected { border: 2px solid #0094c8 !important; } .body-gift-cards-products__form-card-denomination input[type="number"] { -webkit-appearance: auto !important; -moz-appearance: auto !important; appearance: auto !important; } .body-gift-cards-products__form-card-denomination input[type="number"]::-webkit-outer-spin-button, .body-gift-cards-products__form-card-denomination input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: auto !important; } .body-gift-cards-products__form-card-denomination__custom-price { font-family: "Founders Grotesk", sans-serif; cursor: pointer; background-color: #f4f4f4; border-color: #f4f4f4; border-style: solid; font-size: 14px; padding: 9px 10px 8px; width: 100%; margin-left: 5px; } .body-gift-cards-products__form-card-denomination__remark { font-family: "Founders Grotesk", sans-serif; font-size: 11px; font-weight: normal !important; letter-spacing: 1px; position: relative; padding-left: 1em; color: #999; line-height: 1.7; margin: 10px 0 0 0; } .body-gift-cards-products__form-card-denomination__remark::before { content: '*'; position: absolute; left: 0; } .body-gift-cards-products__form-message .body-gift-cards-products__form-title { margin-bottom: 0; } .body-gift-cards-products__form-message textarea { width: 100%; min-height: 190px; height: auto; border-width: 0; padding: 20px 15px; background-color: #f4f4f4; cursor: pointer; font-family: "Founders Grotesk", sans-serif; font-size: 15px; letter-spacing: 1px; resize: vertical; outline: none; } .body-gift-cards-products__form-message textarea::-webkit-input-placeholder { color: #6c757d; } .body-gift-cards-products__form-message textarea::-moz-placeholder { color: #6c757d; } .body-gift-cards-products__form-message textarea::-ms-input-placeholder { color: #6c757d; } .body-gift-cards-products__form-message textarea::placeholder { color: #6c757d; } .body-gift-cards-products__form-name .body-gift-cards-products__form-title { margin-bottom: 0; } .body-gift-cards-products__form-name input { width: 100%; height: auto; border-width: 0; padding: 15px 15px 16px; background-color: #f4f4f4; cursor: pointer; font-family: "Founders Grotesk", sans-serif; font-size: 15px; letter-spacing: 1px; } .body-gift-cards-products__form-name input::-webkit-input-placeholder { color: #6c757d; } .body-gift-cards-products__form-name input::-moz-placeholder { color: #6c757d; } .body-gift-cards-products__form-name input::-ms-input-placeholder { color: #6c757d; } .body-gift-cards-products__form-name input::placeholder { color: #6c757d; } @media (min-width: 768px) { .body-gift-cards-products__form-title { font-size: 16px; } .body-gift-cards-products__form-card-design ul { margin: -5px; max-height: 53vw; } .body-gift-cards-products__form-card-design ul li { width: 25%; padding: 5px; } } @media (min-width: 1024px) { .body-gift-cards-products__form-card-design ul { max-height: 325px; } .body-gift-cards-products__form-card-design ul li label { cursor: pointer; } .body-gift-cards-products__form-card-denomination ul li { width: auto; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .body-gift-cards-products__form-card-denomination ul li:last-child { width: auto; } .body-gift-cards-products__form-card-denomination ul li label { cursor: pointer; } } .footer-gift-cards-products__preview { grid-area: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-gift-cards-products__preview__title { font-family: "Founders Grotesk", sans-serif; font-weight: bold !important; font-size: 14px; line-height: 1; letter-spacing: 1px; margin-bottom: 15px; text-align: left; color: black; } .footer-gift-cards-products__preview__card { border: 1px solid #e3e3e3; padding: 20px; margin-bottom: 50px; } .footer-gift-cards-products__preview__card img { display: block; width: 100%; margin-bottom: 20px; -o-object-fit: cover; object-fit: cover; aspect-ratio: 31 / 23; } .footer-gift-cards-products__preview__card pre, .footer-gift-cards-products__preview__card p { font-family: "Founders Grotesk", sans-serif; font-weight: normal !important; letter-spacing: 1px; color: black; margin: 0; } .footer-gift-cards-products__preview__card pre { font-size: 14px; line-height: 25px; word-wrap: break-word; white-space: normal; border: 0; background-color: transparent; padding: 0; word-break: normal; } .footer-gift-cards-products__preview__card p { font-size: 15px; line-height: 2; margin-left: auto; text-align: right; } .footer-gift-cards-products__preview__summary__price { font-family: "Founders Grotesk", sans-serif; line-height: 1; margin-bottom: 20px; font-weight: 400 !important; font-size: 28px; text-align: left; color: black; } .footer-gift-cards-products__preview__summary__exp { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #f4f4f4; padding: 10px 15px; margin-bottom: 20px; } .footer-gift-cards-products__preview__summary__exp p { font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal !important; line-height: 2; margin-bottom: 0; color: black; } .footer-gift-cards-products__preview__summary__add-cart-btn { width: 100%; height: auto; background-color: #516075; color: white; border: none; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; padding: 18px 0; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 500 !important; margin-bottom: 45px; cursor: pointer; } .footer-gift-cards-products__preview__summary__add-cart-btn:hover { background-color: #6b788a; } @media (min-width: 768px) { .footer-gift-cards-products__preview__title { font-size: 16px; } } @media (min-width: 1024px) { .footer-gift-cards-products__preview { padding: 80px 15px 0 15px; width: 335px; margin-left: auto; } .footer-gift-cards-products__preview .base-gift-cards-products__container { width: 100%; } .footer-gift-cards-products__preview > div:nth-child(1) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .footer-gift-cards-products__preview > div:nth-child(2) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .footer-gift-cards-products__detail { padding: 50px 0 40px 0; border-top: 1px solid #e3e3e3; grid-area: detail; } .footer-gift-cards-products__detail__how-to-use { list-style-type: none; padding: 0; margin-bottom: 40px; } .footer-gift-cards-products__detail__how-to-use__title, .footer-gift-cards-products__detail__how-to-use__sub-title { font-family: "Founders Grotesk", sans-serif; font-weight: bold !important; font-size: 14px; letter-spacing: 1px; line-height: 1; color: black; } .footer-gift-cards-products__detail__how-to-use__title { margin-bottom: 15px; } .footer-gift-cards-products__detail__how-to-use__sub-title { position: relative; margin-bottom: 10px; padding-left: 13px; } .footer-gift-cards-products__detail__how-to-use__sub-title::before { content: ''; position: absolute; top: 50%; left: 0; width: 3px; height: 18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: black; } .footer-gift-cards-products__detail__how-to-use__desc { font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal; line-height: 2; margin-bottom: 0; color: black; letter-spacing: 1px; } .footer-gift-cards-products__detail__how-to-use__item:nth-child(1) p { margin-bottom: 20px; } .footer-gift-cards-products__detail__how-to-use__item:nth-child(2) p { margin-bottom: 0; } @media (min-width: 768px) { .footer-gift-cards-products__detail__how-to-use__title { font-size: 16px; } } .footer-gift-cards-products__detail__terms__title { font-family: "Founders Grotesk", sans-serif; font-weight: bold !important; font-size: 14px; letter-spacing: 1px; line-height: 1; margin-bottom: 15px; color: black; } .footer-gift-cards-products__detail__terms__list { list-style-type: none; padding: 0; } .footer-gift-cards-products__detail__terms__list li { color: black; font-family: "Founders Grotesk", sans-serif; font-size: 15px; font-weight: normal; line-height: 2; padding-left: 1em; letter-spacing: 1px; position: relative; } .footer-gift-cards-products__detail__terms__list li::before { content: '*'; position: absolute; left: 0; } @media (min-width: 768px) { .footer-gift-cards-products__detail__terms__title { font-size: 16px; } } @media (min-width: 1024px) { .footer-gift-cards-products__detail { max-width: 650px; } .footer-gift-cards-products__detail .base-gift-cards-products__container { width: 100%; } } @media (min-width: 1024px) and (max-width: 1295px) { .footer-gift-cards-products__detail { padding-right: 3%; max-width: 570px; } } @media (min-width: 1296px) { .footer-gift-cards-products__detail { padding-bottom: 110px; } } .header-anniversary-10th-collection__main { display: grid; } .header-anniversary-10th-collection__main picture { grid-column: 1 / 2; grid-row: 1 / 3; } .header-anniversary-10th-collection__main picture img { width: 100%; height: auto; display: block; } .header-anniversary-10th-collection__main__text { grid-column: 1 / 2; grid-row: 1 / 2; padding-top: 38px; } .header-anniversary-10th-collection__main h1 { font-family: "Miller-Banner"; font-weight: 400 !important; line-height: 9.55vw; letter-spacing: 0.84px; color: #815624 !important; text-align: center; } .header-anniversary-10th-collection__main h1 small, .header-anniversary-10th-collection__main h1 + small { font-family: "Tahoma" !important; font-size: 4.125vw; font-weight: 400 !important; letter-spacing: 0.48px; color: #815624 !important; } .header-anniversary-10th-collection__main h1 small { display: block; font-size: 4.125vw; margin-top: 11px; line-height: 9.55vw; letter-spacing: 0.48px; } .header-anniversary-10th-collection__main h1 + small { display: block; text-align: center; margin-top: 11px; } .header-anniversary-10th-collection__main h1 strong { font-family: inherit !important; color: #815624 !important; } .header-anniversary-10th-collection__main__swift-up-text { display: block; font-weight: inherit; overflow: hidden; padding-bottom: 6px; margin-bottom: -6px; } .header-anniversary-10th-collection__main__swift-up-text i { font-style: normal; position: relative; top: calc(7.2vw + 8px); background: transparent; } @media (min-width: 1024px) { .header-anniversary-10th-collection__main__swift-up-text i { top: 0; -webkit-transform: translateY(calc(7.2vw + 8px)); transform: translateY(calc(7.2vw + 8px)); } } .header-anniversary-10th-collection__main__swift-up-text.aos-animate span { -webkit-animation: .3s header-anniversary-10th-collection-swift-up ease-in-out forwards; animation: .3s header-anniversary-10th-collection-swift-up ease-in-out forwards; } @media (min-width: 1024px) { .header-anniversary-10th-collection__main__swift-up-text.aos-animate span { -webkit-animation: .3s header-anniversary-10th-collection-swift-up-pc ease-in-out forwards; animation: .3s header-anniversary-10th-collection-swift-up-pc ease-in-out forwards; } } .header-anniversary-10th-collection__main__swift-up-text.aos-animate i { -webkit-animation: .4s header-anniversary-10th-collection-swift-up ease-in-out forwards; animation: .4s header-anniversary-10th-collection-swift-up ease-in-out forwards; } @media (min-width: 1024px) { .header-anniversary-10th-collection__main__swift-up-text.aos-animate i { display: inline-block; -webkit-animation: .4s header-anniversary-10th-collection-swift-up-pc ease-in-out forwards; animation: .4s header-anniversary-10th-collection-swift-up-pc ease-in-out forwards; } } @media (min-width: 768px) { .header-anniversary-10th-collection__main picture img { min-height: 845px; -o-object-fit: cover; object-fit: cover; -o-object-position: bottom; object-position: bottom; } .header-anniversary-10th-collection__main__text { padding-top: 80px; } .header-anniversary-10th-collection__main h1 { font-size: 46px; letter-spacing: 1.38px; line-height: 1; } .header-anniversary-10th-collection__main h1 small { font-size: 20px; letter-spacing: 0.6px; line-height: 1; margin-top: 23px; } .header-anniversary-10th-collection__main h1 + small { font-size: 20px; letter-spacing: 0.6px; line-height: 1; margin-top: 23px; } } .header-anniversary-10th-collection__concept { font-family: "itc-avant-garde-gothic-pro", sans-serif; font-weight: 500 !important; font-size: 14px; line-height: 25px; letter-spacing: 0.42px; color: #815624; padding-top: 63px; padding-bottom: 70px; } .header-anniversary-10th-collection__concept p { margin-bottom: 0; font-size: 15px; font-weight: normal; line-height: 2; } .header-anniversary-10th-collection__concept a { margin-top: 64px; background-color: black; } .header-anniversary-10th-collection__concept a .base-anniversary-10th-collection__frame { position: relative; } .header-anniversary-10th-collection__concept a .base-anniversary-10th-collection__frame::after { content: ""; position: absolute; width: 124px; height: 109px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("https://static.lenskart.com/owndays/img/anniversary-10th-collection/play-video.svg") center/contain no-repeat; z-index: 9; pointer-events: none; } .header-anniversary-10th-collection__concept a img { width: calc(100% + 40px); -webkit-transition: 0.5s; transition: 0.5s; } @media (min-width: 768px) { .header-anniversary-10th-collection__concept { line-height: 32px; letter-spacing: 0.48px; padding-top: 150px; padding-bottom: 186px; } .header-anniversary-10th-collection__concept a { overflow: hidden; border-radius: 15px; } .header-anniversary-10th-collection__concept .base-anniversary-10th-collection__container { max-width: 920px; } } @media (min-width: 1024px) { .header-anniversary-10th-collection__concept a { cursor: pointer; } .header-anniversary-10th-collection__concept a:hover, .header-anniversary-10th-collection__concept a:active, .header-anniversary-10th-collection__concept a:visited, .header-anniversary-10th-collection__concept a:focus { text-decoration: none; } .header-anniversary-10th-collection__concept a:hover .base-anniversary-10th-collection__frame { background-color: black; } .header-anniversary-10th-collection__concept a:hover .base-anniversary-10th-collection__frame img { opacity: 0.6; -webkit-transition: 0.5s; transition: 0.5s; } } @media (max-width: 767px) { .header-anniversary-10th-collection__lineup-menu__layout { margin-left: -40px; margin-right: -40px; } } @media (min-width: 768px) { .header-anniversary-10th-collection__lineup-menu__layout { display: grid; grid-template-columns: 45% auto; grid-template-rows: repeat(1, 1fr); grid-column-gap: 35px; grid-row-gap: 0px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024px) { .header-anniversary-10th-collection__lineup-menu__layout { grid-template-columns: 465px auto; } } @media (min-width: 1296px) { .header-anniversary-10th-collection__lineup-menu__layout { grid-column-gap: 75px; } } @media (min-width: 1440px) { .header-anniversary-10th-collection__lineup-menu__layout { margin-left: -100px; } } .header-anniversary-10th-collection__lineup-menu__title h2 { text-align: center; font-size: 32px; line-height: 2.625em; color: #815624; font-family: "Miller-Banner"; letter-spacing: 1px; } @media (min-width: 768px) { .header-anniversary-10th-collection__lineup-menu__title h2 { font-size: 50px; line-height: 2.5em; line-height: 1; margin-bottom: 20px; } } .header-anniversary-10th-collection__lineup-menu__banner__text { background-color: #815624; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 0; } .header-anniversary-10th-collection__lineup-menu__banner__text__layout p { font-size: 15px; font-weight: 500 !important; line-height: 2; letter-spacing: 0.42px; margin-bottom: 0; } .header-anniversary-10th-collection__lineup-menu__banner__text__layout:nth-child(2) { margin-left: 43px; } @media (min-width: 1296px) { .header-anniversary-10th-collection__lineup-menu__banner__text__layout p { font-size: 16px; line-height: 26px; letter-spacing: 0.48px; } } @media (min-width: 1296px) { .header-anniversary-10th-collection__lineup-menu__banner__text { gap: 43px; } } .header-anniversary-10th-collection__lineup-menu__menu { margin-top: 23px; width: 100%; } .header-anniversary-10th-collection__lineup-menu__menu ul { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding-left: 0; margin-bottom: 0; } @media (max-width: 767px) { .header-anniversary-10th-collection__lineup-menu__menu ul { max-width: 300px; margin: 0 auto; } } @media (min-width: 1296px) { .header-anniversary-10th-collection__lineup-menu__menu ul { gap: 17px; } } .header-anniversary-10th-collection__lineup-menu__menu ul li { background-color: white; border: 1px solid #815624; height: 145px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } @media (max-width: 767px) { .header-anniversary-10th-collection__lineup-menu__menu ul li { width: 150px; } } @media (min-width: 768px) { .header-anniversary-10th-collection__lineup-menu__menu ul li { min-height: calc(17.5vw + 15px); } } @media (min-width: 1024px) { .header-anniversary-10th-collection__lineup-menu__menu ul li { min-height: 223px; } } .header-anniversary-10th-collection__lineup-menu__menu__title { font-size: 14px; line-height: 2.875em; text-align: center; color: #815624; font-family: "Miller-Banner"; } @media (min-width: 768px) { .header-anniversary-10th-collection__lineup-menu__menu__title { font-size: 2vw; } } @media (min-width: 1024px) { .header-anniversary-10th-collection__lineup-menu__menu__title { font-size: 20px; line-height: 1; margin-top: 27px; margin-bottom: 6px; } } .header-anniversary-10th-collection__lineup-menu__menu__image { width: 128px; margin: 0 auto; } @media (min-width: 768px) { .header-anniversary-10th-collection__lineup-menu__menu__image { width: 16vw; } } @media (min-width: 1024px) { .header-anniversary-10th-collection__lineup-menu__menu__image { width: 196px; } } .header-anniversary-10th-collection__lineup-menu__menu__arrow { width: 25.71px; height: 30px; margin: 5px auto; -webkit-transition: 0.4s; transition: 0.4s; } @media (min-width: 768px) { .header-anniversary-10th-collection__lineup-menu__menu__arrow { width: 3vw; margin-top: 10px; } } @media (min-width: 1024px) { .header-anniversary-10th-collection__lineup-menu__menu__arrow { margin-top: 10px; width: 44px; } } @media (min-width: 1296px) { .header-anniversary-10th-collection__lineup-menu__menu__arrow { margin-top: 8px; } } @media (min-width: 768px) { .header-anniversary-10th-collection__lineup-menu__menu { width: calc(100% + 80px); margin-left: -40px; margin-right: -40px; } .header-anniversary-10th-collection__lineup-menu__menu ul li { min-height: calc(17.5vw + 15px); } .header-anniversary-10th-collection__lineup-menu__menu--div1 { grid-area: 1 / 1 / 2 / 2; -ms-flex-item-align: end; align-self: end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .header-anniversary-10th-collection__lineup-menu__menu--div2 { grid-area: 2 / 1 / 3 / 2; height: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; padding: 0 19px !important; } .header-anniversary-10th-collection__lineup-menu__menu--div3 { grid-area: 1 / 2 / 4 / 3; height: 100%; margin-right: -40px; } .header-anniversary-10th-collection__lineup-menu__menu--div3 img { width: 100%; height: 100% !important; -o-object-fit: cover; object-fit: cover; aspect-ratio: 65/41; } .header-anniversary-10th-collection__lineup-menu__menu--div4 { grid-area: 3 / 1 / 4 / 2; margin-bottom: 40px; padding-right: 0px; padding-left: 0px; } } @media (min-width: 768px) and (min-width: 768px) { .header-anniversary-10th-collection__lineup-menu__menu--div4 { margin-bottom: 4vw; width: 100%; } } @media (min-width: 1024px) { .header-anniversary-10th-collection__lineup-menu__menu ul li { min-height: 223px; cursor: pointer; } .header-anniversary-10th-collection__lineup-menu__menu ul li:hover .header-anniversary-10th-collection__lineup-menu__menu__arrow { -webkit-transform: translateY(10px); transform: translateY(10px); } } @media (min-width: 1120px) { .header-anniversary-10th-collection__lineup-menu__menu--div3 { margin-right: calc(520px - 50vw); } } @-webkit-keyframes header-anniversary-10th-collection-swift-up { to { top: 0; opacity: 1; } } @keyframes header-anniversary-10th-collection-swift-up { to { top: 0; opacity: 1; } } @-webkit-keyframes header-anniversary-10th-collection-swift-up-pc { to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes header-anniversary-10th-collection-swift-up-pc { to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .body-anniversary-10th-collection__lineup { margin-top: 60px; } .body-anniversary-10th-collection__lineup #metal { margin-top: 80px; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup > div > .base-anniversary-10th-collection__container { position: relative; } .body-anniversary-10th-collection__lineup #plastic > .base-anniversary-10th-collection__container > .body-anniversary-10th-collection__lineup__title { right: 40px; } .body-anniversary-10th-collection__lineup #metal > .base-anniversary-10th-collection__container > .body-anniversary-10th-collection__lineup__title { left: 40px; } } @media (min-width: 961px) { .body-anniversary-10th-collection__lineup > div > .base-anniversary-10th-collection__container { max-width: none; } } @media (min-width: 1240px) { .body-anniversary-10th-collection__lineup > div > .base-anniversary-10th-collection__container { max-width: 1120px; } } @media (min-width: 1240px) { .body-anniversary-10th-collection__lineup #plastic > .base-anniversary-10th-collection__container > .body-anniversary-10th-collection__lineup__banner { margin-right: calc(520px - 50vw); } .body-anniversary-10th-collection__lineup #metal > .base-anniversary-10th-collection__container > .body-anniversary-10th-collection__lineup__banner { margin-left: calc(520px - 50vw); } } .body-anniversary-10th-collection__lineup__title { font-size: 30px; text-align: center; color: #815624; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__title { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .body-anniversary-10th-collection__lineup__title h3 { margin: 0; } } .body-anniversary-10th-collection__lineup__banner .base-anniversary-10th-collection__frame { margin-top: 0; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__banner .base-anniversary-10th-collection__frame { width: calc(100% + 80px); margin: 188px -40px 0 -40px; } } .body-anniversary-10th-collection__lineup__content__detail { margin-top: 60px; } .body-anniversary-10th-collection__lineup__content__detail .base-anniversary-10th-collection__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .body-anniversary-10th-collection__lineup__content__detail__sku { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 23px; margin-top: 20px; } .body-anniversary-10th-collection__lineup__content__detail__sku h4 { font-size: 20px; line-height: 1.5em; font-family: "Miller-Banner"; letter-spacing: 1px; color: black; margin-top: 0; margin-bottom: 0; } .body-anniversary-10th-collection__lineup__content__detail__desc { font-size: 15px; font-weight: normal; line-height: 2; margin-bottom: 0; color: black; } .body-anniversary-10th-collection__lineup__content__chips { list-style-type: none; padding-left: 0; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-anniversary-10th-collection__lineup__content__chips li { width: 16px; height: 16px; display: block; border-radius: 50%; position: relative; } @media (min-width: 1024px) { .body-anniversary-10th-collection__lineup__content__chips li { cursor: pointer; } } .body-anniversary-10th-collection__lineup__content__chips li[data-color="clear-grey"] { background-color: #A9A6B1; } .body-anniversary-10th-collection__lineup__content__chips li[data-color="clear-brown"] { background-color: #685333; } .body-anniversary-10th-collection__lineup__content__chips li[data-color="navy-blue"] { background-color: #48597D; } .body-anniversary-10th-collection__lineup__content__chips li[data-color="olive-green"] { background-color: #324924; } .body-anniversary-10th-collection__lineup__content__chips li[data-color="gunmetal"] { background-color: #5B564F; } .body-anniversary-10th-collection__lineup__content__chips li[data-color="silver"] { background-color: #9FA4A8; } .body-anniversary-10th-collection__lineup__content__chips__active::after { content: ""; position: absolute; border: 1px solid black; border-radius: 50%; width: 23px; height: 23px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-sizing: border-box; box-sizing: border-box; z-index: -1; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__content__detail { margin-top: 107px; } .body-anniversary-10th-collection__lineup__content__detail .base-anniversary-10th-collection__container { display: grid; } .body-anniversary-10th-collection__lineup__content__detail__sku { margin-top: 0; } .body-anniversary-10th-collection__lineup__content__detail__desc { margin-top: 23px; width: 56%; letter-spacing: 0.48px; } } .body-anniversary-10th-collection__lineup__img-layout { margin-top: 40px; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__img-layout { margin-top: 46px; } .body-anniversary-10th-collection__lineup__img-layout .base-anniversary-10th-collection__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-anniversary-10th-collection__lineup__img-layout .base-anniversary-10th-collection__container > div:nth-child(1) { width: 64%; } .body-anniversary-10th-collection__lineup__img-layout .base-anniversary-10th-collection__container > div:nth-child(2) { width: 34%; max-width: 350px; } } @media (min-width: 1024px) { .body-anniversary-10th-collection__lineup__img-layout .base-anniversary-10th-collection__container > div:nth-child(1) { width: 56%; } } .body-anniversary-10th-collection__lineup__points-wrapper { position: relative; } .body-anniversary-10th-collection__lineup__points-main-img { display: block; width: 100%; height: auto; mix-blend-mode: darken; aspect-ratio: 115 / 72; } .body-anniversary-10th-collection__lineup__selected-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .body-anniversary-10th-collection__lineup__selected-dots { padding-left: 0; margin-bottom: 0; width: 100%; height: 100%; list-style-type: none; position: relative; } .body-anniversary-10th-collection__lineup__selected-dots li { position: absolute; } .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(1) { top: 84%; left: 1%; -webkit-transform: translate(-5%, -83%); transform: translate(-5%, -83%); } .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(1) span::after { content: ''; position: absolute; width: 45.714285714285714%; height: 74.285714285714286%; right: -46%; bottom: 47%; border-right: 1px solid #815624; border-bottom: 1px solid #815624; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(1) { left: 0; top: inherit; bottom: 0; } .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(1) span::after { width: 31px; } } .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(2) { top: 68%; right: 8%; -webkit-transform: translate(-8%, -30%); transform: translate(-8%, -30%); } .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(2) span::after { content: ''; position: absolute; width: 102.857142857142857%; height: 140%; right: 97.142857142857143%; bottom: 50%; border-left: 1px solid #815624; border-bottom: 1px solid #815624; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(2) { top: auto; bottom: 14%; } } .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(3) { top: 21%; right: 17%; -webkit-transform: translate(-8%, -30%); transform: translate(-8%, -30%); } .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(3) span::after { content: ''; position: absolute; width: 134.285714285714286%; height: 45.714285714285714%; left: -134%; bottom: 5%; border-top: 1px solid #815624; border-left: 1px solid #815624; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__selected-dots li:nth-child(3) { top: 14%; left: inherit; right: 29%; } } .body-anniversary-10th-collection__lineup__selected-dots li span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 34px; height: 34px; background-color: #815624; border-radius: 50%; opacity: 0.5; } .body-anniversary-10th-collection__lineup__selected-dots li p { margin-bottom: 0; color: white; letter-spacing: 0.03em; font-family: "Miller-Banner"; font-size: 16px; font-weight: normal !important; } .body-anniversary-10th-collection__lineup__selected-dots__active span { opacity: 1 !important; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__selected-dots li span { width: 48.42px; height: 48.42px; } } @media (min-width: 1024px) { .body-anniversary-10th-collection__lineup__selected-dots li { cursor: pointer; } .body-anniversary-10th-collection__lineup__selected-dots li span { width: 58.14px; height: 58.14px; } .body-anniversary-10th-collection__lineup__selected-dots li p { font-size: clamp(16px, 1.781vw, 30px); } } @media (min-width: 1296px) { .body-anniversary-10th-collection__lineup__selected-dots li span { width: 64.06px; height: 64.06px; } } .body-anniversary-10th-collection__lineup__slider { list-style-type: none; padding-left: 0; margin-bottom: 0; max-width: 100%; } .body-anniversary-10th-collection__lineup__slider__title { width: 100%; height: auto; margin-bottom: 10px; } .body-anniversary-10th-collection__lineup__slider__title h3 { font-size: 20px; text-align: center; font-family: "Miller-Banner"; color: #815624; font-weight: normal !important; line-height: 1.5; letter-spacing: 1px; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__slider__title { margin-top: 30px; margin-bottom: 0; } .body-anniversary-10th-collection__lineup__slider__title h3 { text-align: left; } } .body-anniversary-10th-collection__lineup__slider__title--hide-sp { display: none; } .body-anniversary-10th-collection__lineup__slider__title--hide-pc { display: block; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__slider__title--hide-sp { display: block; } .body-anniversary-10th-collection__lineup__slider__title--hide-pc { display: none; } } .body-anniversary-10th-collection__lineup__slider__img { display: block; width: 100%; height: auto; aspect-ratio: 154/75; border: 1px solid #815624; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__slider__img { aspect-ratio: 232/129; } } @media (min-width: 1024px) { .body-anniversary-10th-collection__lineup__slider__img { aspect-ratio: 319/178; } } .body-anniversary-10th-collection__lineup__slider__desc { color: #815624; font-size: 15px; font-weight: 100 !important; line-height: 2; letter-spacing: 0.42px; margin: 40px 0 0 0; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__slider__desc { margin: 0; font-size: 16px; line-height: 34px; letter-spacing: 0.48px; } } .body-anniversary-10th-collection__lineup__slider > .slick-dots { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0; margin-bottom: 0; list-style-type: none; position: absolute; top: calc(62% + 10px); left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .body-anniversary-10th-collection__lineup__slider > .slick-dots > li { width: 20px; height: 20px; padding: 5px; } .body-anniversary-10th-collection__lineup__slider > .slick-dots > li > button { width: 10px; height: 10px; color: transparent; position: relative; padding: 0; border: none; background-color: transparent; } .body-anniversary-10th-collection__lineup__slider > .slick-dots > li > button::before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #815624; border-radius: 50%; border: none; opacity: 0.5; } .body-anniversary-10th-collection__lineup__slider > .slick-dots > .slick-active > button::before { opacity: 1; } @media (min-width: 768px) { .body-anniversary-10th-collection__lineup__slider > .slick-dots { top: 145px; } } .footer-anniversary-10th-collection__case-cloth { color: #815624; font-size: 14px; line-height: 22px; letter-spacing: 0.42px; background-color: #f1e2d2; padding-top: 68px; margin: 80px 0 60px; overflow: hidden; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__container > * { position: relative; z-index: 1; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__frame { margin-top: 0; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__heading { font-size: 25px; line-height: 32px; letter-spacing: 0.75px; margin-bottom: 27px; text-align: left; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__heading + p { font-size: 15px; line-height: 2; letter-spacing: 1px; margin-bottom: 0; } .footer-anniversary-10th-collection__case-cloth__img { margin-top: -24vw; width: auto; position: relative; z-index: 0 !important; } @media (min-width: 768px) { .footer-anniversary-10th-collection__case-cloth { padding-top: 0; margin-bottom: 113px; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__container { display: grid; grid-template-columns: 65% auto; grid-template-areas: "img before" "img heading" "img des" "img after"; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__heading { grid-area: heading; } .footer-anniversary-10th-collection__case-cloth p { grid-area: des; } .footer-anniversary-10th-collection__case-cloth__img { margin-top: 0; margin-left: -15vw; margin-right: -90px; grid-area: img; } } @media (min-width: 500px) and (max-width: 767px) { .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__heading br { display: none; } } @media (min-width: 1024px) { .footer-anniversary-10th-collection__case-cloth { margin-bottom: 106px; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__container { grid-template-columns: 1fr 1fr; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__heading { font-size: 40px; line-height: 46px; letter-spacing: 1.2px; margin-bottom: 44px; padding-left: 92px; } .footer-anniversary-10th-collection__case-cloth .base-anniversary-10th-collection__heading + p { padding-left: 92px; margin-right: -15px; margin-bottom: 0; } .footer-anniversary-10th-collection__case-cloth__img { margin-right: -110px; } } @media (min-width: 1296px) { .footer-anniversary-10th-collection__case-cloth__img { margin-left: -208px; margin-right: -190px; } } .footer-anniversary-10th-collection__terms, .footer-anniversary-10th-collection__shops { margin-top: 60px; } .footer-anniversary-10th-collection__terms .base-anniversary-10th-collection__heading, .footer-anniversary-10th-collection__shops .base-anniversary-10th-collection__heading { color: black; font-size: 24px; line-height: 1; letter-spacing: 0.72px; margin-bottom: 27px; } .footer-anniversary-10th-collection__terms ul, .footer-anniversary-10th-collection__shops ul { list-style-type: disc; margin-right: -20px; padding-left: 0; margin-bottom: 0; } .footer-anniversary-10th-collection__terms ul > li, .footer-anniversary-10th-collection__shops ul > li { list-style-type: disc; color: black; font-size: 13px; line-height: 22px; letter-spacing: 0.39px; } .footer-anniversary-10th-collection__terms .base-anniversary-10th-collection__shops, .footer-anniversary-10th-collection__shops .base-anniversary-10th-collection__shops { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer-anniversary-10th-collection__terms .base-anniversary-10th-collection__shops > li, .footer-anniversary-10th-collection__shops .base-anniversary-10th-collection__shops > li { line-height: 2.5; width: 100%; } @media (min-width: 768px) { .footer-anniversary-10th-collection__terms .base-anniversary-10th-collection__shops > li, .footer-anniversary-10th-collection__shops .base-anniversary-10th-collection__shops > li { width: 33.333%; } } @media (min-width: 768px) { .footer-anniversary-10th-collection__terms, .footer-anniversary-10th-collection__shops { margin-top: 130px; } .footer-anniversary-10th-collection__terms .base-anniversary-10th-collection__heading, .footer-anniversary-10th-collection__shops .base-anniversary-10th-collection__heading { font-size: 40px; letter-spacing: 1.2px; margin-bottom: 48px; } .footer-anniversary-10th-collection__terms ul > li, .footer-anniversary-10th-collection__shops ul > li { font-size: 14px; line-height: 32px; letter-spacing: 0.42px; } } @font-face { font-family: "Miller-Banner"; src: url("https://static.lenskart.com/owndays/fonts/Miller-Banner/Miller-Banner.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/Miller-Banner/Miller-Banner.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Tahoma"; src: url("https://static.lenskart.com/owndays/fonts/Tahoma/Tahoma-Regular.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/Tahoma/Tahoma-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } .base-anniversary-10th-collection { font-family: "itc-avant-garde-gothic-pro", sans-serif; padding-bottom: 143px; position: relative; opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; overflow: hidden; } .base-anniversary-10th-collection::before { content: ""; position: absolute; top: 170vw; bottom: 0; left: 0; right: 0; z-index: -1; pointer-events: none; background-color: #f6dcc3; } .base-anniversary-10th-collection.loaded { opacity: 1; } .base-anniversary-10th-collection.loaded.bg::before { background: url("https://static.lenskart.com/owndays/img/anniversary-10th-collection/bg-sp.webp") top center/100% auto; } @media (min-width: 768px) { .base-anniversary-10th-collection { padding-bottom: 169px; } .base-anniversary-10th-collection::before { top: 840px; } .base-anniversary-10th-collection.loaded.bg::before { background-image: url("https://static.lenskart.com/owndays/img/anniversary-10th-collection/bg-pc.webp"); } } .base-anniversary-10th-collection__container { margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; max-width: 1120px; } .base-anniversary-10th-collection__heading { font-family: "Miller-Banner"; font-weight: 400 !important; font-size: 32px; line-height: 1; text-align: center; margin-bottom: 32px; letter-spacing: 0.96px; } .base-anniversary-10th-collection__heading span { display: inline-block; } @media (min-width: 768px) { .base-anniversary-10th-collection__heading { font-size: 50px; text-align: center; margin-bottom: 80px; letter-spacing: 1.68px; } } .base-anniversary-10th-collection__heading-lg { font-weight: 500 !important; font-size: 50px; margin-bottom: 40px; line-height: 46px; color: #815624; opacity: 0.5; } @media (max-width: 767px) { .base-anniversary-10th-collection__heading-lg { text-align: center; } } @media (min-width: 768px) { .base-anniversary-10th-collection__heading-lg { font-size: 56px; letter-spacing: 1.68px; } } .base-anniversary-10th-collection__btn { min-height: 70px; border-radius: 70px; background-color: #815624; font-family: "itc-avant-garde-gothic-pro", sans-serif; font-weight: 500 !important; font-size: 16px; line-height: 20px; color: white !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; position: relative; margin-left: auto; margin-right: auto; letter-spacing: 0.7px; } .base-anniversary-10th-collection__btn::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; border: 1px solid white; border-radius: 70px; pointer-events: none; } .base-anniversary-10th-collection__btn--black { background-color: black; } .base-anniversary-10th-collection__btn--small-sp { font-size: 13px; letter-spacing: 0.65px; } @media (min-width: 768px) { .base-anniversary-10th-collection__btn { max-width: 430px; min-height: 80px; border-radius: 80px; font-size: 20px; line-height: 23px; letter-spacing: 1px; } .base-anniversary-10th-collection__btn::before { top: 5.7px; bottom: 5.7px; left: 6.9px; right: 6.9px; } .base-anniversary-10th-collection__btn--small-sp { font-size: 17px; letter-spacing: 0.85px; } } @media (min-width: 1024px) { .base-anniversary-10th-collection__btn:hover { background-color: black; } .base-anniversary-10th-collection__btn--black:hover { background-color: #815624; } } .base-anniversary-10th-collection__btn-gp { display: grid; gap: 21px 0; } .base-anniversary-10th-collection__btn-gp .base-anniversary-10th-collection__btn { width: 100%; } @media (max-width: 767px) { .base-anniversary-10th-collection__btn-gp { padding-left: 20px; padding-right: 20px; } } @media (min-width: 768px) { .base-anniversary-10th-collection__btn-gp .base-anniversary-10th-collection__btn { min-height: 97.65px; } } @media (min-width: 1024px) { .base-anniversary-10th-collection__btn-gp { grid-template-columns: 1fr 1fr; gap: 40px; } .base-anniversary-10th-collection__btn-gp .base-anniversary-10th-collection__btn { max-width: none; } } .base-anniversary-10th-collection__frame { position: relative; width: calc(100% + 80px); height: 100%; margin: 64px -40px 0 -40px; border-radius: inherit; overflow: hidden; } .base-anniversary-10th-collection__frame img { display: block; width: 100%; height: auto; opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 1s ease; transition: all 1s ease; } .base-anniversary-10th-collection__frame.aos-animate img { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } @media (min-width: 768px) { .base-anniversary-10th-collection__frame { width: 100%; margin: 90px 0 0 0; } } .header-tom-and-jerry__main { position: relative; padding-block: 124px 199px; background: #fde360 url("https://static.lenskart.com/owndays/img/tomandjerry/main-bg_sp.svg") no-repeat left 18px top 21px/100% auto; } .header-tom-and-jerry__main::after { content: ""; position: absolute; top: calc(100% - 77px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 180vw; height: 700px; background-color: #15a9d8; border-radius: 100%; } .header-tom-and-jerry__main__top { position: absolute; top: 0; left: 0; } .header-tom-and-jerry__main__logo { font: 0/0 a; } .header-tom-and-jerry__main__logo img { display: block; aspect-ratio: 305/187; max-width: 179px; margin-inline: auto; } .header-tom-and-jerry__main__content { position: relative; width: 100%; height: 310px; } .header-tom-and-jerry__main__img { position: absolute; z-index: 1; } .header-tom-and-jerry__main__img--tom { top: 0; left: calc(50% - 55px); } .header-tom-and-jerry__main__img--tom img { aspect-ratio: 438/253; width: 386px; height: 223px; max-width: none; } .header-tom-and-jerry__main__img--jn { bottom: 0; right: calc(50% - 30px); } .header-tom-and-jerry__main__img--jn img { aspect-ratio: 227/245; width: 206px; height: 154px; } .header-tom-and-jerry__main__img--85y { left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .header-tom-and-jerry__main__img--85y img { aspect-ratio: 185/186; max-width: 146px; } @media (max-width: 1023px) { .header-tom-and-jerry__main__logo { margin-bottom: 40px; } } @media (min-width: 1024px) { .header-tom-and-jerry__main { padding-block: 305px 653px; background: #fde360 url("https://static.lenskart.com/owndays/img/tomandjerry/main-bg_pc.svg") no-repeat right 82px top 91px/100% auto; } .header-tom-and-jerry__main::after { width: 115vw; height: 1196px; top: calc(100% - 304px); } .header-tom-and-jerry__main__logo img { max-width: 305px; } .header-tom-and-jerry__main__content { width: 1735px; height: 503px; position: absolute; top: 313px; left: calc(50% - 665px); } .header-tom-and-jerry__main__img--tom { left: auto; right: 0; } .header-tom-and-jerry__main__img--tom img { width: 871px; height: 503px; } .header-tom-and-jerry__main__img--jn { top: 108px; left: 0; right: auto; bottom: auto; } .header-tom-and-jerry__main__img--jn img { width: 465px; height: 348px; } .header-tom-and-jerry__main__img--85y { top: 25px; right: 25px; left: auto; bottom: auto; -webkit-transform: none; transform: none; } .header-tom-and-jerry__main__img--85y img { max-width: 184px; } } .header-tom-and-jerry__about { position: relative; background-color: #15a9d8; padding-block: 45px 70px; } .header-tom-and-jerry__about__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50px; } .header-tom-and-jerry__about__content p { font-family: "Karu"; color: white; text-align: center; font-size: 16px; font-style: normal; font-weight: 900 !important; line-height: 41px; letter-spacing: 1px; margin: 0 auto 0 auto; } .header-tom-and-jerry__about__content p em { background-color: #e1002a; font-style: normal; padding: 0 4px; } .header-tom-and-jerry__about__content img { display: block; aspect-ratio: 32/35; max-width: 288px; margin-inline: auto; } @media (min-width: 768px) { .header-tom-and-jerry__about__content { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0; } .header-tom-and-jerry__about__content p { width: 50%; text-align: left; margin: 0; padding-right: 38px; } .header-tom-and-jerry__about__content p br { display: none; } } @media (min-width: 1024px) { .header-tom-and-jerry__about { padding-block: 0 114px; margin-top: -90px; background-color: transparent; } .header-tom-and-jerry__about::before { content: ""; position: absolute; top: 90px; left: 0; right: 0; bottom: 0; background-color: #15a9d8; } .header-tom-and-jerry__about__content { position: relative; } .header-tom-and-jerry__about__content p { font-size: 20px; line-height: 49px; } .header-tom-and-jerry__about__content img { max-width: 439px; } } .header-tom-and-jerry__lineup-menu { position: relative; background-color: #0f99c4; } .header-tom-and-jerry__lineup-menu__layout { width: 100%; height: auto; padding: 70px 0; } @media (min-width: 768px) { .header-tom-and-jerry__lineup-menu__layout { padding: 160px 0 106px; } } @media (min-width: 1024px) { .header-tom-and-jerry__lineup-menu__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 70px; } } .header-tom-and-jerry__lineup-menu__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; max-height: 89px; aspect-ratio: 218/89; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .header-tom-and-jerry__lineup-menu__header h2 { margin-bottom: 0; } .header-tom-and-jerry__lineup-menu__header-logo { width: 162px; height: auto; } .header-tom-and-jerry__lineup-menu__header p { color: #2b2926; font-family: "Karu"; font-size: 20px; font-style: normal; font-weight: 900 !important; line-height: 28px; letter-spacing: 1px; margin-bottom: 0; white-space: nowrap; } @media (min-width: 1024px) { .header-tom-and-jerry__lineup-menu__header { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; margin: 0 0 0 20px; max-height: none; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 33px; } .header-tom-and-jerry__lineup-menu__header-logo { width: 276px; } .header-tom-and-jerry__lineup-menu__header p { font-size: 26px; letter-spacing: 1.3px; } } @media (min-width: 1200px) { .header-tom-and-jerry__lineup-menu__header { margin: 0 0 0 60px; } } .header-tom-and-jerry__lineup-menu__title { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.19px; } .header-tom-and-jerry__lineup-menu__title h3 { color: black; font-family: "GenEi POPle Pw"; font-size: 16px; font-style: normal; font-weight: 900 !important; line-height: 19.19px; margin: 0; } .header-tom-and-jerry__lineup-menu__title img { display: block; width: 63px; height: auto; aspect-ratio: 3.94/1; } @media (min-width: 1296px) { .header-tom-and-jerry__lineup-menu__title { gap: 5.89px; } .header-tom-and-jerry__lineup-menu__title h3 { font-size: 20px; line-height: 20px; } .header-tom-and-jerry__lineup-menu__title img { width: 79px; } } .header-tom-and-jerry__lineup-menu__character { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .header-tom-and-jerry__lineup-menu__arrow::before { content: ''; position: absolute; width: 29.639px; height: 29.639px; background-image: url("https://static.lenskart.com/owndays/img/tomandjerry/lineup_arrow-icon-menu.svg"); background-repeat: no-repeat; background-size: contain; z-index: 1; bottom: 7.54px; right: 7.54px; } @media (min-width: 1296px) { .header-tom-and-jerry__lineup-menu__arrow::before { width: 44.638px; height: 44.638px; } } .header-tom-and-jerry__lineup-menu ul { list-style-type: none !important; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); gap: 8.41px; padding: 0; margin: 0; } @media (min-width: 768px) { .header-tom-and-jerry__lineup-menu ul { gap: 12.644px; } } @media (min-width: 1200px) { .header-tom-and-jerry__lineup-menu ul { margin: 0 60px 0 0; } } .header-tom-and-jerry__lineup-menu ul li { width: 100%; max-height: 278px; height: auto; border: 2px solid black; position: relative; } @media (max-width: 390px) { .header-tom-and-jerry__lineup-menu ul li { width: 168.651px; height: 184.587px; aspect-ratio: 168.651 / 184.587; } } @media (min-width: 1024px) { .header-tom-and-jerry__lineup-menu ul li { cursor: pointer; border: 2.678px solid black; width: 254px; height: 278px; /* Top-left (horizontal line) */ /* Bottom-right (horizontal line) */ /* Bottom-left (vertical line) */ /* Top-right (vertical line) */ /* Hover effect */ } .header-tom-and-jerry__lineup-menu ul li::after, .header-tom-and-jerry__lineup-menu ul li::before, .header-tom-and-jerry__lineup-menu ul li span::after, .header-tom-and-jerry__lineup-menu ul li span::before { content: ""; position: absolute; background-color: white; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .header-tom-and-jerry__lineup-menu ul li::after { width: 0; height: 2px; top: 0; left: 0; } .header-tom-and-jerry__lineup-menu ul li::before { width: 0; height: 2px; bottom: 0; right: 0; } .header-tom-and-jerry__lineup-menu ul li span::after { width: 2px; height: 0; bottom: 0; left: 0; } .header-tom-and-jerry__lineup-menu ul li span::before { width: 2px; height: 0; top: 0; right: 0; } .header-tom-and-jerry__lineup-menu ul li:hover { border-color: transparent; } .header-tom-and-jerry__lineup-menu ul li:hover::after, .header-tom-and-jerry__lineup-menu ul li:hover::before { width: 100%; } .header-tom-and-jerry__lineup-menu ul li:hover span::after, .header-tom-and-jerry__lineup-menu ul li:hover span::before { height: 100%; } } .header-tom-and-jerry__lineup-menu ul li:nth-child(1) { background-color: #ec7497; } .header-tom-and-jerry__lineup-menu ul li:nth-child(1) .header-tom-and-jerry__lineup-menu__title { top: 12.28px; right: 12.3px; } .header-tom-and-jerry__lineup-menu ul li:nth-child(1) .header-tom-and-jerry__lineup-menu__title h3 { margin-left: auto; } @media (min-width: 1296px) { .header-tom-and-jerry__lineup-menu ul li:nth-child(1) .header-tom-and-jerry__lineup-menu__title { top: 20px; right: 20px; } } .header-tom-and-jerry__lineup-menu ul li:nth-child(1) .header-tom-and-jerry__lineup-menu__character { aspect-ratio: 21/20; padding: 21.25px 11.53px 22.85px 9.3px; } @media (min-width: 768px) { .header-tom-and-jerry__lineup-menu ul li:nth-child(1) .header-tom-and-jerry__lineup-menu__character { padding: 32px 17.36px 34.42px 14px; } } .header-tom-and-jerry__lineup-menu ul li:nth-child(2) { background-color: #00ac87; } .header-tom-and-jerry__lineup-menu ul li:nth-child(2) .header-tom-and-jerry__lineup-menu__title { top: 12.28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .header-tom-and-jerry__lineup-menu ul li:nth-child(2) .header-tom-and-jerry__lineup-menu__title h3 { margin-left: auto; margin-right: auto; white-space: nowrap; } .header-tom-and-jerry__lineup-menu ul li:nth-child(2) .header-tom-and-jerry__lineup-menu__title img { margin: 0 auto; } @media (min-width: 1296px) { .header-tom-and-jerry__lineup-menu ul li:nth-child(2) .header-tom-and-jerry__lineup-menu__title { top: 20px; } } .header-tom-and-jerry__lineup-menu ul li:nth-child(2) .header-tom-and-jerry__lineup-menu__character { aspect-ratio: 29/20; padding: 55.15px 11.38px 27.63px 12.2px; } @media (min-width: 768px) { .header-tom-and-jerry__lineup-menu ul li:nth-child(2) .header-tom-and-jerry__lineup-menu__character { padding: 83.06px 17.52px 41.61px 18px; } } .header-tom-and-jerry__lineup-menu ul li:nth-child(3) { background-color: #7b868c; } .header-tom-and-jerry__lineup-menu ul li:nth-child(3) .header-tom-and-jerry__lineup-menu__title { top: 12.28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .header-tom-and-jerry__lineup-menu ul li:nth-child(3) .header-tom-and-jerry__lineup-menu__title h3 { margin-left: auto; margin-right: auto; white-space: nowrap; } .header-tom-and-jerry__lineup-menu ul li:nth-child(3) .header-tom-and-jerry__lineup-menu__title img { margin: 0 auto; } @media (min-width: 1296px) { .header-tom-and-jerry__lineup-menu ul li:nth-child(3) .header-tom-and-jerry__lineup-menu__title { top: 20px; } } .header-tom-and-jerry__lineup-menu ul li:nth-child(3) .header-tom-and-jerry__lineup-menu__character { aspect-ratio: 91/100; padding: 58.77px 12.79px 23.86px 13.6px; } @media (min-width: 768px) { .header-tom-and-jerry__lineup-menu ul li:nth-child(3) .header-tom-and-jerry__lineup-menu__character { padding: 84px 19.74px 40.45px 20px; } } .header-tom-and-jerry__lineup-menu ul li:nth-child(4) { background-color: #fae445; } .header-tom-and-jerry__lineup-menu ul li:nth-child(4) .header-tom-and-jerry__lineup-menu__title { top: 12.28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .header-tom-and-jerry__lineup-menu ul li:nth-child(4) .header-tom-and-jerry__lineup-menu__title h3 { margin-left: auto; margin-right: auto; white-space: nowrap; } .header-tom-and-jerry__lineup-menu ul li:nth-child(4) .header-tom-and-jerry__lineup-menu__title img { margin: 0 auto; } @media (min-width: 1296px) { .header-tom-and-jerry__lineup-menu ul li:nth-child(4) .header-tom-and-jerry__lineup-menu__title { top: 20px; } } .header-tom-and-jerry__lineup-menu ul li:nth-child(4) .header-tom-and-jerry__lineup-menu__character { aspect-ratio: 31/20; padding: 61.46px 13.74px 30.84px 12.94px; } @media (min-width: 768px) { .header-tom-and-jerry__lineup-menu ul li:nth-child(4) .header-tom-and-jerry__lineup-menu__character { padding: 91px 25.2px 41.6px 25px; } } .header-tom-and-jerry__lineup-menu ul li:last-child { max-width: none; background-color: #15a9d8; grid-column: span 2; aspect-ratio: 19/11; margin: 0 auto; display: none; } .header-tom-and-jerry__lineup-menu ul li:last-child .header-tom-and-jerry__lineup-menu__title { left: 12.46px; bottom: 12.2px; } .header-tom-and-jerry__lineup-menu ul li:last-child .header-tom-and-jerry__lineup-menu__title img { width: 124px; aspect-ratio: 31/4; } @media (min-width: 1296px) { .header-tom-and-jerry__lineup-menu ul li:last-child .header-tom-and-jerry__lineup-menu__title { left: 19.79px; bottom: 19.46px; } .header-tom-and-jerry__lineup-menu ul li:last-child .header-tom-and-jerry__lineup-menu__title img { width: 154px; } } .header-tom-and-jerry__lineup-menu ul li:last-child .header-tom-and-jerry__lineup-menu__character { aspect-ratio: 63/16; padding: 17.92px 49.2px 53.46px 50px; } @media (min-width: 768px) { .header-tom-and-jerry__lineup-menu ul li:last-child .header-tom-and-jerry__lineup-menu__character { padding: 35px 74.41px 72.5px 93px; } } .body-tom-and-jerry__lineup__main__bg-header { width: 100%; height: auto; position: relative; } .body-tom-and-jerry__lineup__main__bg-header::before, .body-tom-and-jerry__lineup__main__bg-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: -4; } .body-tom-and-jerry__lineup__main__bg-header img { width: 100%; height: auto; position: relative; z-index: -1; } .body-tom-and-jerry__lineup__main__bg-header::before { top: -1px; height: 95%; background-color: #0f99c4; } .body-tom-and-jerry__lineup__main__bg-header::after { bottom: -1px; height: 5%; background-color: #ec7497; } .body-tom-and-jerry__lineup__main__bg-header[data-key="chase"]::before { background-color: #ec7497; } .body-tom-and-jerry__lineup__main__bg-header[data-key="chase"]::after { background-color: #00ac87; z-index: 0; } .body-tom-and-jerry__lineup__main__bg-header[data-key="chase"] img { z-index: 0; } .body-tom-and-jerry__lineup__main__bg-header[data-key="friendly-face"]::before { z-index: 0; background-color: transparent; } .body-tom-and-jerry__lineup__main__bg-header[data-key="friendly-face"]::after { background-color: #7b868c; z-index: 0; } .body-tom-and-jerry__lineup__main__bg-header[data-key="friendly-face"] img { z-index: 0; } .body-tom-and-jerry__lineup__main__bg-header[data-key="cheese"]::before { z-index: 0; background-color: transparent; } .body-tom-and-jerry__lineup__main__bg-header[data-key="cheese"]::after { background-color: #fae445; z-index: 0; } .body-tom-and-jerry__lineup__main__bg-header[data-key="cheese"] img { z-index: 0; } .body-tom-and-jerry__lineup__main__bg-body { width: 100%; margin: 0 auto; height: auto; padding: 50px 20px 93px 20px; position: relative; } .body-tom-and-jerry__lineup__main__bg-body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: #ec7497; } .body-tom-and-jerry__lineup__main__bg-body[data-key="chase"]::before { z-index: 0; background-color: #00ac87 !important; } .body-tom-and-jerry__lineup__main__bg-body[data-key="friendly-face"]::before { z-index: 0; background-color: #7b868c !important; } .body-tom-and-jerry__lineup__main__bg-body[data-key="cheese"]::before { z-index: 0; background-color: #fae445 !important; } .body-tom-and-jerry__lineup__main__bg-footer { width: 100%; height: auto; background-color: #ec7497; padding-bottom: 340px; } .body-tom-and-jerry__lineup__main__bg-footer[data-key="chase"] { background-color: #00ac87; } .body-tom-and-jerry__lineup__main__bg-footer[data-key="friendly-face"] { background-color: #7b868c; } .body-tom-and-jerry__lineup__main__bg-footer[data-key="cheese"] { background-color: #fae445; } .body-tom-and-jerry__lineup__main__figure-1 { width: 192.67px; height: auto; position: absolute; top: -125px; right: -41px; z-index: 2; } .body-tom-and-jerry__lineup__main__figure-1-addon { position: absolute; height: auto; z-index: 1; } .body-tom-and-jerry__lineup__main__figure-1-addon[data-key="friendly-face"] { width: 83.359px; top: -95px; left: 11%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .body-tom-and-jerry__lineup__main__figure-1[data-key="chase"] { width: 134px; height: 127.916px; top: -92px; right: unset; left: -20px; } .body-tom-and-jerry__lineup__main__figure-1[data-key="friendly-face"] { width: 303.43px; height: auto; top: -105px; left: calc(50% - 24px); right: unset; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; } .body-tom-and-jerry__lineup__main__figure-1[data-key="cheese"] { width: 125.238px; height: auto; top: -49px; right: unset; left: -20px; -webkit-transform: rotate(-11.122deg); transform: rotate(-11.122deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation: cartoonSwinging 2s linear infinite; animation: cartoonSwinging 2s linear infinite; } .body-tom-and-jerry__lineup__main__figure-2 { width: 99px; height: auto; position: absolute; bottom: -53px; left: -11px; z-index: 2; } .body-tom-and-jerry__lineup__main__figure-2[data-key="chase"] { width: 132.437px; height: 74px; bottom: unset; left: unset; top: 2px; right: 2px; } .body-tom-and-jerry__lineup__main__figure-2[data-key="friendly-face"] { width: 113.55px; height: auto; -webkit-transform: rotate(-56.879deg) !important; transform: rotate(-56.879deg) !important; left: unset; right: -75px; bottom: -101px; } .body-tom-and-jerry__lineup__main__figure-2[data-key="cheese"] { width: 92.981px; height: auto; bottom: -22px; left: unset; right: -9px; } .body-tom-and-jerry__lineup__main__figure-3 { position: absolute; z-index: 2; } .body-tom-and-jerry__lineup__main__figure-3[data-key="chase"] { width: 146px; height: auto; bottom: -66px; right: -8px; } .body-tom-and-jerry__lineup__main__layout-model, .body-tom-and-jerry__lineup__main__layout-point { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 2px solid black; background: white; } .body-tom-and-jerry__lineup__main__layout-model { border-radius: 30px 30px 0 0; padding: 32px 20px 40.5px 20px; } .body-tom-and-jerry__lineup__main__layout-point { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 40.5px 20px 31.2px 20px; border-top-width: 0; border-bottom-width: 8.79px; border-radius: 0 0 30px 30px; } .body-tom-and-jerry__lineup__main__layout-product { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-tom-and-jerry__lineup__main__layout-pc { position: relative; z-index: 4; } .body-tom-and-jerry__lineup__main__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-tom-and-jerry__lineup__main__header-sp { display: -webkit-box; display: -ms-flexbox; display: flex; } .body-tom-and-jerry__lineup__main__header-pc { display: none; } .body-tom-and-jerry__lineup__main__header-title { color: black; text-align: center; font-family: "GenEi POPle Pw"; font-size: 50px; font-style: normal; font-weight: 900; line-height: normal; letter-spacing: 1.28px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0; } @media (max-width: 767px) { .body-tom-and-jerry__lineup__main__header-title { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 32px; } } .body-tom-and-jerry__lineup__main__header-model { width: 198px; height: auto; margin-left: 13px; } @media (max-width: 767px) { .body-tom-and-jerry__lineup__main__header-model { width: 127px; margin: 0 auto; } } .body-tom-and-jerry__lineup__main__header-desc img { width: 100%; height: auto; } .body-tom-and-jerry__lineup__main__header-desc p { color: #682f25; font-family: "Zen Kaku Gothic New", serif; font-size: 14px; font-style: normal; font-weight: 900; line-height: 24px; letter-spacing: normal; margin-bottom: 0; } .body-tom-and-jerry__lineup__main__header__order-funny-1, .body-tom-and-jerry__lineup__main__header__order-funny-2, .body-tom-and-jerry__lineup__main__header__order-funny-3, .body-tom-and-jerry__lineup__main__header__order-chase-1, .body-tom-and-jerry__lineup__main__header__order-chase-2, .body-tom-and-jerry__lineup__main__header__order-chase-3, .body-tom-and-jerry__lineup__main__header__order-friendly-face-1, .body-tom-and-jerry__lineup__main__header__order-friendly-face-2, .body-tom-and-jerry__lineup__main__header__order-friendly-face-3, .body-tom-and-jerry__lineup__main__header__order-cheese-1, .body-tom-and-jerry__lineup__main__header__order-cheese-2, .body-tom-and-jerry__lineup__main__header__order-cheese-3 { display: none; } .body-tom-and-jerry__lineup__main__slider__points__desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; margin-bottom: 29px; } .body-tom-and-jerry__lineup__main__slider__points__desc p { margin-bottom: 0; } .body-tom-and-jerry__lineup__main__slider__points__desc p:nth-child(1) { padding: 0 11px; background-color: #e1002a; line-height: 0; } .body-tom-and-jerry__lineup__main__slider__points__desc p:nth-child(1) span { color: white; font-family: "Karu"; font-size: 20px; font-style: normal; font-weight: 900; line-height: 33px; letter-spacing: 0.6px; text-transform: uppercase; } .body-tom-and-jerry__lineup__main__slider__points__desc p:not(:first-child) { color: #682f25; text-align: center; font-family: "Zen Kaku Gothic New", serif; font-size: 14px; font-style: normal; font-weight: 900; line-height: 29px; min-height: 87px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; } .body-tom-and-jerry__lineup__main__slider__points__img { width: calc(100% - 16px); height: auto; border: 2px solid black; margin: 0 auto; } .body-tom-and-jerry__lineup__main__slider__products > .slick-list { margin: 0 -5px; } .body-tom-and-jerry__lineup__main__slider__products > .slick-list .slick-slide { padding: 0 5px; max-width: 503px; aspect-ratio: 603/385; } .body-tom-and-jerry__lineup__main__product__layout-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px; } .body-tom-and-jerry__lineup__main__product__sku { color: white; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: black; paint-order: stroke; font-family: "Karu"; font-size: 22px; font-style: normal; font-weight: 900; line-height: 32.8px; letter-spacing: 2.2px; margin-bottom: 0; } @media (max-width: 767px) { .body-tom-and-jerry__lineup__main__product__sku { -webkit-text-stroke-width: 3px; } } .body-tom-and-jerry__lineup__main__product__color-layout { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; z-index: 2; } .body-tom-and-jerry__lineup__main__product__color-name { color: white; font-family: "Zen Kaku Gothic New", serif; font-size: 13px; font-style: normal; font-weight: 900; line-height: 2; margin-bottom: 0; } .body-tom-and-jerry__lineup__main__product__color-name__cheese { color: black; } .body-tom-and-jerry__lineup__main__product__color-chip__funny, .body-tom-and-jerry__lineup__main__product__color-chip__chase, .body-tom-and-jerry__lineup__main__product__color-chip__friendly-face, .body-tom-and-jerry__lineup__main__product__color-chip__cheese { width: 34px; height: 34px; } .body-tom-and-jerry__lineup__main__product__color-chip__funny--selected, .body-tom-and-jerry__lineup__main__product__color-chip__chase--selected, .body-tom-and-jerry__lineup__main__product__color-chip__friendly-face--selected, .body-tom-and-jerry__lineup__main__product__color-chip__cheese--selected { border: 3px solid white; } .body-tom-and-jerry__lineup__main__product__color-c1, .body-tom-and-jerry__lineup__main__product__color-c2 { display: block; width: 100%; height: 100%; } .body-tom-and-jerry__lineup__main__product__color-c1 { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/funny/color-1.webp") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__product__color-c1[data-key="chase"] { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/chase/color-1.webp") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__product__color-c1[data-key="friendly-face"] { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/friendly-face/color-1.webp") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__product__color-c1[data-key="cheese"] { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/cheese/color-1.webp") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__product__color-c2 { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/funny/color-2.webp") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__product__color-c2[data-key="chase"] { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/chase/color-2.webp") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__product__color-c2[data-key="friendly-face"] { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/friendly-face/color-2.webp") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__product__color-c2[data-key="cheese"] { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/cheese/color-2.webp") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__product__price { color: white; font-family: "Zen Kaku Gothic New", serif; font-size: 18px; font-style: normal; font-weight: 900; line-height: 32.8px; margin-top: -4px; margin-bottom: 0; } .body-tom-and-jerry__lineup__main__product__price__cheese { color: black; } .body-tom-and-jerry__lineup__main__product__button { max-width: 300px; padding: 0 0 65px 0; margin: 0 auto; } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__bg-header[data-key] { background-color: transparent; margin-top: -2px; } .body-tom-and-jerry__lineup__main__bg-body { padding: 32px 20px 82px 20px; margin-top: 0; } .body-tom-and-jerry__lineup__main__bg-footer { padding-bottom: 445px; } .body-tom-and-jerry__lineup__main__figure-1 { top: -125px; right: -49px; } .body-tom-and-jerry__lineup__main__figure-1-addon[data-key="friendly-face"] { top: -96px; left: 35%; } } @media (min-width: 961px) and (min-width: 1200px) { .body-tom-and-jerry__lineup__main__figure-1-addon[data-key="friendly-face"] { left: 37.5%; } } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__figure-1[data-key="chase"] { top: 49px; left: 3px; } .body-tom-and-jerry__lineup__main__figure-1[data-key="friendly-face"] { width: 331.43px; } .body-tom-and-jerry__lineup__main__figure-1[data-key="cheese"] { width: 201px; top: -15px; left: -62px; } .body-tom-and-jerry__lineup__main__figure-2 { bottom: -29px; left: -43px; } .body-tom-and-jerry__lineup__main__figure-2[data-key="chase"] { top: 2px; right: 10px; } .body-tom-and-jerry__lineup__main__figure-2[data-key="friendly-face"] { width: 134.521px; -webkit-transform: unset !important; transform: unset !important; bottom: -91px; } } @media (min-width: 961px) and (min-width: 1200px) { .body-tom-and-jerry__lineup__main__figure-2[data-key="friendly-face"] { right: -67px; bottom: -49px; } } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__figure-2[data-key="cheese"] { width: 156.628px; bottom: -154px; right: -58px; } } @media (min-width: 961px) and (min-width: 1200px) { .body-tom-and-jerry__lineup__main__figure-2[data-key="cheese"] { bottom: -74px; } } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__figure-3[data-key="chase"] { width: 220px; bottom: -120px; right: -50px; } .body-tom-and-jerry__lineup__main__layout-pc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 1152px; height: auto; margin: 0 auto; position: relative; z-index: 4; } .body-tom-and-jerry__lineup__main__layout-pc--inner { display: grid; grid-template-columns: 60% 40%; aspect-ratio: 1154/571; max-width: 100%; } .body-tom-and-jerry__lineup__main__layout-model, .body-tom-and-jerry__lineup__main__layout-point { border: 3px solid black; border-bottom-width: 11px; border-top-width: 0; } .body-tom-and-jerry__lineup__main__layout-model { border-radius: 0 0 0 40px; padding: 0 13px 40.5px 13px; } .body-tom-and-jerry__lineup__main__layout-point { padding: 0; border-left-width: 0; border-right-width: 10px; border-radius: 0 0 40px 0; } .body-tom-and-jerry__lineup__main__layout-product { display: grid; grid-template-columns: 40% 60%; padding-top: 75px; } .body-tom-and-jerry__lineup__main__layout-product .body-tom-and-jerry__lineup__main__slider__products { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .body-tom-and-jerry__lineup__main__layout-product .body-tom-and-jerry__lineup__main__slider__products li img { border-radius: 40px; border: 3px solid #000; width: 99.3%; } } @media (min-width: 961px) and (max-width: 767px) { .body-tom-and-jerry__lineup__main__layout-product .body-tom-and-jerry__lineup__main__slider__products li img { width: 100%; border-radius: unset; border: unset; } } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__layout-product div:nth-child(2) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .body-tom-and-jerry__lineup__main__header-sp { display: none; } .body-tom-and-jerry__lineup__main__header-pc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 8px; padding: 20px; background-color: white; border-radius: 40px 40px 0 0; border: 3px solid black; border-right-width: 10px; } .body-tom-and-jerry__lineup__main__header-desc { position: relative; } .body-tom-and-jerry__lineup__main__header-desc p { font-size: 16px; line-height: 36px; margin-top: -43px; padding: 0 49px; } .body-tom-and-jerry__lineup__main__header__order-funny-1 { display: block; position: absolute; top: 20%; left: 32%; } .body-tom-and-jerry__lineup__main__header__order-funny-2 { display: block; position: absolute; top: 28%; left: 62%; } .body-tom-and-jerry__lineup__main__header__order-funny-3 { display: block; position: absolute; top: 16%; left: 51%; } .body-tom-and-jerry__lineup__main__header__order-chase-1 { display: block; position: absolute; top: 33%; left: 59%; } .body-tom-and-jerry__lineup__main__header__order-chase-2 { display: block; position: absolute; top: 14%; left: 8%; } .body-tom-and-jerry__lineup__main__header__order-chase-3 { display: block; position: absolute; top: 33%; left: 40%; } .body-tom-and-jerry__lineup__main__header__order-friendly-face-1 { display: block; position: absolute; top: 23%; left: 1%; } .body-tom-and-jerry__lineup__main__header__order-friendly-face-2 { display: block; position: absolute; top: 28%; left: 36%; } .body-tom-and-jerry__lineup__main__header__order-friendly-face-3 { display: block; position: absolute; top: 35%; right: 0; } .body-tom-and-jerry__lineup__main__header__order-cheese-1 { display: block; position: absolute; top: 14%; left: 42%; } .body-tom-and-jerry__lineup__main__header__order-cheese-2 { display: block; position: absolute; top: 37%; left: 39%; } .body-tom-and-jerry__lineup__main__header__order-cheese-3 { display: block; position: absolute; top: 32%; left: 61%; } .body-tom-and-jerry__lineup__main__header-option { width: 79px; height: 72.121px; position: relative; } } @media (min-width: 961px) and (min-width: 1024px) { .body-tom-and-jerry__lineup__main__header-option { cursor: pointer; } } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__header-option::before { position: absolute; content: ""; display: block; width: 100%; height: 100%; background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/lineup_inactive-point.svg") center/100% no-repeat; -webkit-transition: .5s; transition: .5s; cursor: pointer; } .body-tom-and-jerry__lineup__main__header-option__funny--active::before, .body-tom-and-jerry__lineup__main__header-option__funny:hover::before, .body-tom-and-jerry__lineup__main__header-option__chase--active::before, .body-tom-and-jerry__lineup__main__header-option__chase:hover::before, .body-tom-and-jerry__lineup__main__header-option__friendly-face--active::before, .body-tom-and-jerry__lineup__main__header-option__friendly-face:hover::before, .body-tom-and-jerry__lineup__main__header-option__cheese--active::before, .body-tom-and-jerry__lineup__main__header-option__cheese:hover::before { background: url("https://static.lenskart.com/owndays/img/tomandjerry/products/lineup_active-point.svg") center/100% no-repeat !important; } .body-tom-and-jerry__lineup__main__header-option span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: black; paint-order: stroke; font-family: "Karu"; font-size: 26px; font-style: normal; font-weight: 900; line-height: 33px; letter-spacing: 3.12px; } } @media (min-width: 961px) and (max-width: 767px) { .body-tom-and-jerry__lineup__main__header-option span { -webkit-text-stroke-width: 3px; } } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__slider__points { margin-bottom: 0 !important; } .body-tom-and-jerry__lineup__main__slider__points__desc { gap: 25px; margin: 73px 0; } .body-tom-and-jerry__lineup__main__slider__points__desc p:nth-child(1) { padding: 4px 10px 2px; } .body-tom-and-jerry__lineup__main__slider__points__desc p:nth-child(1) span { font-size: 30px; letter-spacing: 2px; } .body-tom-and-jerry__lineup__main__slider__points__desc p:not(:first-child) { font-size: 18px; line-height: 36px; min-height: 108px; } .body-tom-and-jerry__lineup__main__slider__points__img { width: 100%; border: 3px solid black; border-left-width: 0; border-right-width: 0; border-bottom-width: 0; border-radius: 0 0 40px 0; } .body-tom-and-jerry__lineup__main__slider__products > .slick-list { margin: 0 -8px; } .body-tom-and-jerry__lineup__main__slider__products > .slick-list .slick-slide { padding: 0 8px; } .body-tom-and-jerry__lineup__main__slider__products > .slick-arrow { position: absolute; width: 50px; height: 50px; top: -75px; z-index: 1; background: transparent; color: transparent; border: none; } } @media (min-width: 961px) and (min-width: 1024px) { .body-tom-and-jerry__lineup__main__slider__products > .slick-arrow { cursor: pointer; } } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__slider__products > .slick-arrow::before, .body-tom-and-jerry__lineup__main__slider__products > .slick-arrow::after { position: absolute; content: ""; display: block; width: 50px; height: 50px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-size: 50px 50px; background-repeat: no-repeat; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } .body-tom-and-jerry__lineup__main__slider__products > .slick-arrow::before { background-image: url("https://static.lenskart.com/owndays/img/tomandjerry/lineup_arrow-icon-menu.svg"); opacity: 1; } .body-tom-and-jerry__lineup__main__slider__products > .slick-arrow::after { background-image: url("https://static.lenskart.com/owndays/img/tomandjerry/lineup_arrow-icon-menu-hover.svg"); opacity: 0; } .body-tom-and-jerry__lineup__main__slider__products > .slick-arrow:hover::before { opacity: 0; } .body-tom-and-jerry__lineup__main__slider__products > .slick-arrow:hover::after { opacity: 1; } .body-tom-and-jerry__lineup__main__slider__products > .slick-prev { left: calc(100% - 174px); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .body-tom-and-jerry__lineup__main__slider__products > .slick-next { right: 64px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .body-tom-and-jerry__lineup__main__product__layout-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; padding: 40px 20px 20px 20px; } .body-tom-and-jerry__lineup__main__product__sku { font-size: 33px; letter-spacing: 3.3px; } .body-tom-and-jerry__lineup__main__product__color-name { font-size: 13px; margin: 8px 0; } .body-tom-and-jerry__lineup__main__product__price { font-size: 24px; } .body-tom-and-jerry__lineup__main__product__button { padding-bottom: 0; margin: 0 0 0 20px; position: relative; z-index: 2; } .body-tom-and-jerry__lineup__main__layout-product { margin-left: auto; grid-template-columns: 32% 68%; position: relative; z-index: 4; max-width: calc(100% - 20px); gap: 40px; } } @media (min-width: 961px) and (min-width: 1024px) { .body-tom-and-jerry__lineup__main__layout-product { gap: 0; padding-top: 157px; } } @media (min-width: 961px) and (min-width: 1440px) { .body-tom-and-jerry__lineup__main__layout-product { max-width: calc(100% - 156px); } } @media (min-width: 961px) and (min-width: 1600px) { .body-tom-and-jerry__lineup__main__layout-product { max-width: calc(100% - 230px); } } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__header__order-funny-1 { top: 24%; left: 36%; } .body-tom-and-jerry__lineup__main__header__order-funny-2 { top: 31%; left: 65%; } .body-tom-and-jerry__lineup__main__header__order-funny-3 { top: 19%; left: 50%; } .body-tom-and-jerry__lineup__main__figure-1 { width: 319.47px; top: -209px; right: -89px; } .body-tom-and-jerry__lineup__main__figure-2 { width: 155px; bottom: -79px; left: -67px; } .body-tom-and-jerry__lineup__main__slider__products > .slick-list > .slick-track > .slick-slide { max-width: 603px; } .body-tom-and-jerry__lineup__main__product__layout { padding: 55px 20px 20px 20px; } .body-tom-and-jerry__lineup__main__product__layout-row { padding-left: 0; } .body-tom-and-jerry__lineup__main__product__button { margin-left: 0; } } .body-tom-and-jerry__lineup__funny, .body-tom-and-jerry__lineup__chase, .body-tom-and-jerry__lineup__friendly-face, .body-tom-and-jerry__lineup__cheese { position: relative; } .body-tom-and-jerry__lineup__funny::before, .body-tom-and-jerry__lineup__chase::before, .body-tom-and-jerry__lineup__friendly-face::before, .body-tom-and-jerry__lineup__cheese::before { content: ""; position: absolute; top: -43px; left: -733px; right: -733px; height: 100%; background-repeat: no-repeat; background-position: center top; background-size: cover; } @media (max-width: 960px) { .body-tom-and-jerry__lineup__funny::before, .body-tom-and-jerry__lineup__chase::before, .body-tom-and-jerry__lineup__friendly-face::before, .body-tom-and-jerry__lineup__cheese::before { content: none; } } .body-tom-and-jerry__lineup__funny::after, .body-tom-and-jerry__lineup__chase::after, .body-tom-and-jerry__lineup__friendly-face::after, .body-tom-and-jerry__lineup__cheese::after { content: ""; position: absolute; top: 300px; left: 0; right: 0; bottom: 0; z-index: -1; } .body-tom-and-jerry__lineup__chase, .body-tom-and-jerry__lineup__friendly-face, .body-tom-and-jerry__lineup__cheese { margin-top: -335px; } .body-tom-and-jerry__lineup__funny::before { z-index: 0; background-image: url("https://static.lenskart.com/owndays/img/tomandjerry/products/funny/bg-funny-text.webp"); } .body-tom-and-jerry__lineup__funny::after { background-color: #ec7497; } .body-tom-and-jerry__lineup__chase::before { z-index: 1; background-image: url("https://static.lenskart.com/owndays/img/tomandjerry/products/chase/bg-chase-text.webp"); } .body-tom-and-jerry__lineup__chase::after { background-color: #00ac87; } .body-tom-and-jerry__lineup__friendly-face { z-index: 1; } .body-tom-and-jerry__lineup__friendly-face::before { z-index: 2; background-image: url("https://static.lenskart.com/owndays/img/tomandjerry/products/friendly-face/bg-friendly-face-text.webp"); } .body-tom-and-jerry__lineup__friendly-face::after { background-color: #7b868c; } .body-tom-and-jerry__lineup__cheese { z-index: 2; } .body-tom-and-jerry__lineup__cheese::before { z-index: 3; background-image: url("https://static.lenskart.com/owndays/img/tomandjerry/products/cheese/bg-cheese-text.webp"); } .body-tom-and-jerry__lineup__cheese::after { background-color: #fae445; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider { position: relative; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-dots { list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin: 8px 0 0 0; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-dots > li, .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-dots > li > button, .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-dots > li > button::before { width: 11px; height: 11px; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-dots > li { margin: 0 6px; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-dots > li > button { color: transparent; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-dots > li > button { content: ""; background-color: #fde360; border-radius: 50%; opacity: 1; border: none; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-dots > li.slick-active > button { background-color: #F0A04A; opacity: 1; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 38px; height: 38px; top: 64.5%; z-index: 1; background: transparent; color: transparent; border: none; } @media (min-width: 961px) { .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-arrow { display: none !important; } } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-arrow::before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; display: block; width: 38px; height: 38px; opacity: 1; background: url("https://static.lenskart.com/owndays/img/tomandjerry/lineup_arrow-icon-menu.svg") center/100% no-repeat; } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-prev { left: -5px; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .body-tom-and-jerry__lineup__main__layout-point > .slick-slider > .slick-next { right: -5px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } @-webkit-keyframes cartoonSwinging { 0%, 100% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } } @keyframes cartoonSwinging { 0%, 100% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } } .footer-tom-and-jerry__case { position: relative; margin-top: -341px; z-index: 2; } .footer-tom-and-jerry__case__bg__header { background-color: transparent; } .footer-tom-and-jerry__case__bg__header img { display: block; width: 100%; height: auto; } .footer-tom-and-jerry__case__bg__body { background-color: #15A9D8; position: relative; z-index: 0; } .footer-tom-and-jerry__case__bg__body::before, .footer-tom-and-jerry__case__bg__body::after { content: ''; width: 100%; height: 40px; background-color: #15A9D8; position: absolute; z-index: -1; } .footer-tom-and-jerry__case__bg__body::before { top: -20px; } .footer-tom-and-jerry__case__bg__body::after { bottom: -20px; } @media (min-width: 768px) { .footer-tom-and-jerry__case__bg__body { margin-top: -10px; margin-bottom: -10px; } .footer-tom-and-jerry__case__bg__body::before { top: -30px; } .footer-tom-and-jerry__case__bg__body::after { bottom: -30px; } } .footer-tom-and-jerry__case__bg__footer { background-color: #0F99C4; } .footer-tom-and-jerry__case__bg__footer img { display: block; width: 100%; height: auto; } .footer-tom-and-jerry__case__card { padding: 60px 0 92.36px 0; border: 2px solid black; background: white; border-top-width: 2px; border-bottom-width: 8.79px; border-radius: 30px; } @media (min-width: 768px) { .footer-tom-and-jerry__case__card { border-radius: 40px; border: 3px solid black; border-bottom-width: 8px; display: grid; max-width: 100%; grid-template-columns: 50% 50%; padding: 79px 24px 62px 24px; margin: 30px 0; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } } .footer-tom-and-jerry__case__header img { display: block; width: 292.569px; height: auto; margin: 0 auto; } .footer-tom-and-jerry__case__header p { padding: 0 16px; color: #682F25; font-family: "Zen Kaku Gothic New", serif; font-size: 14px; font-style: normal; font-weight: 900 !important; line-height: 32px; margin: 30.65px auto 89px auto; letter-spacing: 0px; } @media (min-width: 768px) { .footer-tom-and-jerry__case__header { padding-left: 28px; } .footer-tom-and-jerry__case__header img { margin-left: 0; } .footer-tom-and-jerry__case__header p { padding: 0; margin-top: 30.45px; margin-bottom: 0; } } @media (min-width: 1024px) { .footer-tom-and-jerry__case__header { padding-top: 55px; } .footer-tom-and-jerry__case__header img { width: 500.554px; } .footer-tom-and-jerry__case__header p { line-height: 30px; } } .footer-tom-and-jerry__case__footer { position: relative; } .footer-tom-and-jerry__case__footer__main-img { display: block; width: 100%; height: auto; } .footer-tom-and-jerry__case__footer__figure-1, .footer-tom-and-jerry__case__footer__figure-2 { position: absolute; height: auto; } .footer-tom-and-jerry__case__footer__figure-1 { width: 153.321px; top: -66px; right: 5.34px; } .footer-tom-and-jerry__case__footer__figure-2 { width: 153.321px; left: 7px; bottom: -44.42px; } @media (min-width: 768px) { .footer-tom-and-jerry__case__footer__figure-1 { width: 216.31px; top: -138px; right: -58px; } .footer-tom-and-jerry__case__footer__figure-2 { width: 216.032px; left: -67px; bottom: -114.42px; } } @media (min-width: 1024px) { .footer-tom-and-jerry__case__footer__figure-1 { width: 316.31px; top: -159px; right: -80px; } .footer-tom-and-jerry__case__footer__figure-2 { width: 316.31px; left: -76px; bottom: -146.42px; } } .footer-tom-and-jerry__accessories { background-color: #0F99C4; position: relative; } .footer-tom-and-jerry__accessories__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 60px; position: relative; } .footer-tom-and-jerry__accessories__header::before { content: ''; width: 100%; height: 20px; position: absolute; top: -2px; background-color: #0F99C4; } .footer-tom-and-jerry__accessories__header img { display: block; height: auto; } .footer-tom-and-jerry__accessories__header img:nth-child(1) { width: 199px; } .footer-tom-and-jerry__accessories__header img:nth-child(2) { width: 304px; } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__header img:nth-child(1) { width: 228px; } .footer-tom-and-jerry__accessories__header img:nth-child(2) { width: 529px; } } .footer-tom-and-jerry__accessories__body { margin-top: 89px; position: relative; } .footer-tom-and-jerry__accessories__body__figure { position: absolute; top: -64px; left: -24px; z-index: 1; width: 181.313px; height: 113.206px; } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body__figure { width: 316.31px; height: 197.494px; top: -78px; left: -77px; } } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list { margin: 0 -3px; height: 245px; } @media (min-width: 768px) { .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list { height: auto; } } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list > .slick-track { height: auto !important; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list > .slick-track > .slick-slide { height: auto !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 3px; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list > .slick-track > .slick-slide:focus { outline: none; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list > .slick-track > .slick-slide > div { height: auto; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list > .slick-track > .slick-slide > div > li { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list > .slick-track > .slick-slide > div > li > img { display: block; width: 311px; height: auto; -o-object-fit: contain; object-fit: contain; } @media (min-width: 768px) { .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list > .slick-track > .slick-slide > div > li > img { width: 100%; } } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-list > .slick-track > .slick-slide > div > li > img { width: 560px; } } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots { list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin: 8px 0 0 0; } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots { margin-top: 20px; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li, .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li > button, .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li > button::before { width: 11px; height: 11px; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li { margin: 0 6px; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li > button { color: transparent; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li > button { content: ""; background-color: #FDE360; border-radius: 50%; opacity: 1; border: none; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li.slick-active { width: 51px; height: 34.423px; margin-right: 4px; margin-left: 4px; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li.slick-active > button { width: 51px; height: 34.423px; position: relative; background-color: transparent; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-dots > li.slick-active > button::before { content: ''; position: absolute; top: 0; left: 0; width: 51px; height: 34.423px; background: url("https://static.lenskart.com/owndays/img/tomandjerry/accessories/accessories-cheese-icon.svg") no-repeat 50%/contain; } } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-arrow { position: absolute; width: 38px; height: 38px; top: 38%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; background: transparent; color: transparent; border: none; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-arrow::before { position: absolute; content: ""; display: block; width: 38px; height: 38px; opacity: 1; background: url("https://static.lenskart.com/owndays/img/tomandjerry/lineup_arrow-icon-menu.svg") center/100% no-repeat; -webkit-transition: .5s; transition: .5s; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 768px) { .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-arrow { width: 58px; height: 58px; } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-arrow::before { width: 58px; height: 58px; } } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-arrow { display: none !important; } } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-prev { right: calc(100% - 57px); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-next { left: calc(100% - 57px); -webkit-transform: rotate(270deg); transform: rotate(270deg); } @media (min-width: 768px) { .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-prev { right: calc(100% - 126px); } .footer-tom-and-jerry__accessories__body > .slick-slider > .slick-next { left: calc(100% - 126px); } } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body > .slick-slider > .slick { display: none !important; } } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body > .slick-slider { height: 389px; } } .footer-tom-and-jerry__accessories__body__message { margin-top: 20px; } .footer-tom-and-jerry__accessories__body__message__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-tom-and-jerry__accessories__body__message__header p { margin-bottom: 0; } .footer-tom-and-jerry__accessories__body__message__header p:nth-child(1) { color: white; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: black; paint-order: stroke; font-family: "Karu"; font-size: 22px; font-style: normal; font-weight: 900; line-height: 32.8px; letter-spacing: 2.2px; margin-bottom: 0; } @media (max-width: 767px) { .footer-tom-and-jerry__accessories__body__message__header p:nth-child(1) { -webkit-text-stroke-width: 3px; } } @media (min-width: 961px) { .footer-tom-and-jerry__accessories__body__message__header p:nth-child(1) { font-size: 33px; letter-spacing: 3.3px; } } .footer-tom-and-jerry__accessories__body__message__header p:nth-child(2) { color: white; font-family: "Zen Kaku Gothic New", serif; font-size: 18px; font-style: normal; font-weight: 900; line-height: 32.8px; margin-top: -4px; margin-bottom: 0; } @media (min-width: 961px) { .footer-tom-and-jerry__accessories__body__message__header p:nth-child(2) { font-size: 24px; } } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body__message__header { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .footer-tom-and-jerry__accessories__body__message__body p { margin-bottom: 0; font-family: "Zen Kaku Gothic New", serif; font-size: 14px; font-style: normal; font-weight: 900 !important; line-height: 32px; letter-spacing: 0px; color: white; margin-top: 12px; } .footer-tom-and-jerry__accessories__body__message__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; padding: 30px 0 100px 0; } .footer-tom-and-jerry__accessories__body__message__footer a { width: 316px; } @media (min-width: 768px) { .footer-tom-and-jerry__accessories__body__message__footer a { width: 300px; } } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body__message__footer { padding: 25px 0 0 50px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body__message { margin-top: 0; height: 389px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-tom-and-jerry__accessories__body__message .base-tom-and-jerry__container { padding: 0 0 0 50px; } } @media (min-width: 1024px) { .footer-tom-and-jerry__accessories__body { display: grid; grid-template-columns: 560px 1fr; padding: 0 20px; max-width: 1192px; margin: 90.3px auto 0 auto; padding-bottom: 215.7px; } } .footer-tom-and-jerry__share { position: relative; background-color: black; padding: 50px 0 51.6px 0; } @media (min-width: 1024px) { .footer-tom-and-jerry__share { padding: 61px 0 30.6px 0; } .footer-tom-and-jerry__share > .base-tom-and-jerry__container > div:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 65px; } } .footer-tom-and-jerry__share__header { text-align: center; margin: 0; } .footer-tom-and-jerry__share__header img { width: 142px; height: auto; margin: 0 auto; } @media (min-width: 1024px) { .footer-tom-and-jerry__share__header img { width: 176px; } } .footer-tom-and-jerry__share__list { list-style-type: none; padding: 0; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 24px; gap: 24px; } .footer-tom-and-jerry__share__list li a { font-size: 37.856px; color: white; display: block; width: 100%; height: 100%; } .footer-tom-and-jerry__share__list li a i { background: transparent; } .footer-tom-and-jerry__share__list li:nth-child(3) { width: 37.856px; height: 37.856px; position: relative; } .footer-tom-and-jerry__share__list li:nth-child(3) a { color: black; position: relative; } .footer-tom-and-jerry__share__list li:nth-child(3) a i { font-size: 26.669px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .footer-tom-and-jerry__share__list li:nth-child(3) a::before { position: absolute; content: ''; width: 37.856px; height: 37.856px; background-color: white; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } @media (min-width: 1024px) { .footer-tom-and-jerry__share__list { margin: 0; gap: 49.37px; } .footer-tom-and-jerry__share__list li a { font-size: 48px; cursor: pointer; -webkit-transition: .5s; transition: .5s; } .footer-tom-and-jerry__share__list li:not(:nth-child(3)) a:hover { color: #e1002a; } .footer-tom-and-jerry__share__list li:nth-child(3) a::before { width: 48px; height: 48px; } .footer-tom-and-jerry__share__list li:nth-child(3) a:hover::before { -webkit-transition: 0.5s; transition: 0.5s; background-color: #e1002a; } } .footer-tom-and-jerry__share__tom-and-jerry { width: 263px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; padding: 30.14px 0 19.14px 0; } @media (min-width: 1024px) { .footer-tom-and-jerry__share__tom-and-jerry { display: none; } } .footer-tom-and-jerry__share__copyright { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 11.09px; } .footer-tom-and-jerry__share__copyright img { width: 44.7px; height: auto; } .footer-tom-and-jerry__share__copyright p { margin-bottom: 0; font-family: "Zen Kaku Gothic New", serif; font-size: 11px; font-style: normal; font-weight: 500 !important; line-height: normal; color: white; } @media (min-width: 1024px) { .footer-tom-and-jerry__share__copyright { margin-top: 36.91px; } .footer-tom-and-jerry__share__copyright p { font-size: 12px; } } .footer-tom-and-jerry__navs-sticky { position: absolute; width: 100%; height: 50px; right: 0; bottom: 0; z-index: 8; } .footer-tom-and-jerry__navs-sticky__inner { position: fixed; bottom: 0; width: 100%; height: auto; } .footer-tom-and-jerry__navs-sticky__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; max-width: 823px; margin: 0 auto; } @media (min-width: 768px) { .footer-tom-and-jerry__navs-sticky { height: 70.062px; } .footer-tom-and-jerry__navs-sticky__gap { height: 100px; } .footer-tom-and-jerry__navs-sticky__actions { padding-right: 20px; max-width: none; } .footer-tom-and-jerry__navs-sticky__inner { background-color: transparent; padding: 0; } } .footer-tom-and-jerry__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 55px; border-radius: 0; white-space: nowrap; text-align: center; font-family: "Zen Kaku Gothic New", serif; font-size: 12px; font-style: normal; font-weight: 700 !important; line-height: normal; } .footer-tom-and-jerry__btn--primary { width: 124px; border-radius: 20px 0px 0px 0px; border-top: 2px solid #e1002a; border-left: 2px solid #e1002a; background: #e1002a; color: white; } .footer-tom-and-jerry__btn--primary:hover { color: white; } .footer-tom-and-jerry__btn--secondary { width: 150px; border-radius: 0px 0px 0px 0px; border-top: 2px solid #e1002a; border-right: 2px solid #e1002a; border-left: 2px solid #e1002a; background: white; color: #e1002a; } .footer-tom-and-jerry__btn--secondary:hover { color: #e1002a; } .footer-tom-and-jerry__btn:hover, .footer-tom-and-jerry__btn:active, .footer-tom-and-jerry__btn:visited, .footer-tom-and-jerry__btn:focus { text-decoration: none; } @media (min-width: 768px) { .footer-tom-and-jerry__btn { width: 260px; height: 70.062px; font-size: 16px; } .footer-tom-and-jerry__btn--primary { border-top-left-radius: 20px !important; } .footer-tom-and-jerry__btn--secondary { border-radius: 0px 20px 0px 0px; border-top-right-radius: 20px !important; } } @media (min-width: 1024px) { .footer-tom-and-jerry__btn { cursor: pointer; } .footer-tom-and-jerry__btn--primary:hover, .footer-tom-and-jerry__btn--secondary:hover { background-color: black; color: white; border-color: black; -webkit-transition: 0.5s; transition: 0.5s; } } .footer-tom-and-jerry__shops { position: relative; background-color: #FDE360; } .footer-tom-and-jerry__shops__bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; } .footer-tom-and-jerry__shops__bg img { display: block; width: 100%; height: 100%; } @media (min-width: 768px) { .footer-tom-and-jerry__shops__bg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer-tom-and-jerry__shops__bg img { width: 1114.638px; height: auto; margin: auto; } } .footer-tom-and-jerry__shops__title, .footer-tom-and-jerry__shops__list-sp, .footer-tom-and-jerry__shops__list-pc, .footer-tom-and-jerry__shops__footer { position: relative; z-index: 1; } .footer-tom-and-jerry__shops__title { width: 100%; height: auto; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 75px 0 49px 0; } .footer-tom-and-jerry__shops__title img { display: block; width: 250px; height: auto; } @media (min-width: 768px) { .footer-tom-and-jerry__shops__title img { width: 403px; } } @media (min-width: 1024px) { .footer-tom-and-jerry__shops__title { padding: 160px 0 94px 0; } .footer-tom-and-jerry__shops__title img { width: 699px; } } .footer-tom-and-jerry__shops__list-sp { display: block; } @media (min-width: 768px) { .footer-tom-and-jerry__shops__list-sp { display: none; } } .footer-tom-and-jerry__shops__list-sp { padding: 0 20px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; margin: 0 auto; list-style-type: disc; display: block; } @media (min-width: 768px) { .footer-tom-and-jerry__shops__list-sp { display: none; } } .footer-tom-and-jerry__shops__list-sp li { color: #682F25; font-family: "Zen Kaku Gothic New", serif; font-size: 14px; font-style: normal; font-weight: 900 !important; line-height: 32px; letter-spacing: 0.28px; position: relative; margin-left: 28px; list-style-type: inherit; } .footer-tom-and-jerry__shops__list-pc { display: none; } @media (min-width: 768px) { .footer-tom-and-jerry__shops__list-pc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-tom-and-jerry__shops__list-pc ul { padding: 0 20px; margin: 0; list-style-type: disc; } .footer-tom-and-jerry__shops__list-pc ul li { color: #682F25; font-family: "Zen Kaku Gothic New", serif; font-size: 16px; font-style: normal; font-weight: 900 !important; line-height: 40px; letter-spacing: 0.32px; position: relative; margin-left: 28px; list-style-type: inherit; } } @media (min-width: 1024px) { .footer-tom-and-jerry__shops__list-pc ul:nth-child(2) { padding-left: 80px; } } .footer-tom-and-jerry__shops__footer { padding: 45px 20px 100px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-tom-and-jerry__shops__footer a { max-width: 372px; } @media (min-width: 1024px) { .footer-tom-and-jerry__shops__footer { padding-top: 90px; padding-bottom: 116px; } } .footer-tom-and-jerry__shops__figure-footer { display: none; } @media (min-width: 1024px) { .footer-tom-and-jerry__shops__figure-footer { display: block; position: absolute; bottom: 0; right: 26px; width: 263px; height: 114px; } } @media (min-width: 1200px) { .footer-tom-and-jerry__shops__figure-footer { width: 395px; height: 171px; } } @font-face { font-family: "Karu"; src: url("https://static.lenskart.com/owndays/fonts/Karu/karu-black.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/Karu/karu-black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "GenEi POPle Pw"; src: url("https://static.lenskart.com/owndays/fonts/GenEiPOPlePw/GenEiPOPlePw-Bk.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/GenEiPOPlePw/GenEiPOPlePw-Bk.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } .base-tom-and-jerry { overflow: hidden; } .base-tom-and-jerry__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1192px; } .base-tom-and-jerry__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 65px; background: black url("https://static.lenskart.com/owndays/img/tomandjerry/btn-arrow.svg") no-repeat right 26px center/8px auto; color: white; border-radius: 10rem; padding-inline: 36px; font-size: 15px; font-weight: 900; line-height: 1; letter-spacing: 0.45px; -webkit-transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1); transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1); } .base-tom-and-jerry__btn:hover, .base-tom-and-jerry__btn:focus { background-color: black; color: white; } .base-tom-and-jerry__btn[disabled] { background-color: #bdbdbd; pointer-events: none; } @media (min-width: 768px) { .base-tom-and-jerry__btn { font-size: 16px; letter-spacing: 0.48px; } } @media (min-width: 1024px) { .base-tom-and-jerry__btn:hover, .base-tom-and-jerry__btn:active, .base-tom-and-jerry__btn:visited, .base-tom-and-jerry__btn:focus { text-decoration: none; } .base-tom-and-jerry__btn:hover { font-size: 18px; letter-spacing: 0.54px; background-color: #e1002a; -webkit-transform: scale(1.1); transform: scale(1.1); } } .header-huawei-2-titanium__main { width: 100%; height: 100%; background-color: #414141; aspect-ratio: 390 / 620; position: relative; } .header-huawei-2-titanium__main__logo { width: 221px; height: auto; position: absolute; top: 63px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font: 0 / 0 a; margin: 0; } .header-huawei-2-titanium__main__glasses { width: 100%; height: auto; position: absolute; top: -23px; } .header-huawei-2-titanium__main__new-arrivals-layout { position: absolute; left: 38px; bottom: 73px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .header-huawei-2-titanium__main__new-arrivals-title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; border: 1px solid #b47e00; padding: 3px 8px; line-height: 0; margin-bottom: 11px; } .header-huawei-2-titanium__main__new-arrivals-title span { color: #b47e00; text-align: center; font-family: "BIZ UDPGothic", serif; font-size: 12px; font-style: normal; font-weight: 700 !important; line-height: 19.2px; letter-spacing: 0.12px; } .header-huawei-2-titanium__main__new-arrivals-titanium { width: 179.698px; height: auto; } .header-huawei-2-titanium__main__new-arrivals-date { color: white; font-family: "BIZ UDPGothic", serif; font-size: 11px; font-style: normal; font-weight: 400 !important; line-height: 15.4px; letter-spacing: 0.11px; margin: 24.22px 0 0 0; position: relative; } .header-huawei-2-titanium__main__new-arrivals-date::before { position: absolute; content: url("https://static.lenskart.com/owndays/img/huawei2-titanium/main-text-line-sp.svg"); bottom: 117px; left: 0; width: 100%; height: 100%; aspect-ratio: 259/98; } .header-huawei-2-titanium__main__new-arrivals-date strong { color: white; font-family: "BIZ UDPGothic", serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 140%; letter-spacing: 0.14px; } @media (min-width: 768px) { .header-huawei-2-titanium__main { width: 100%; aspect-ratio: 1440/835; margin: 0; } .header-huawei-2-titanium__main__logo { left: unset; right: 10%; -webkit-transform: none; transform: none; z-index: 2; } .header-huawei-2-titanium__main__glasses { width: 100%; top: 0; left: 0; } .header-huawei-2-titanium__main__new-arrivals-layout { left: 10%; bottom: 5%; } } @media (min-width: 1024px) { .header-huawei-2-titanium__main__logo { width: 28%; right: 12%; } .header-huawei-2-titanium__main__glasses { width: 100%; top: 0; left: 0; } .header-huawei-2-titanium__main__new-arrivals-layout { left: 10%; bottom: 5%; } .header-huawei-2-titanium__main__new-arrivals-title { padding: 6px 10px; margin-bottom: 18px; } .header-huawei-2-titanium__main__new-arrivals-title span { font-size: 14px; line-height: 22.4px; letter-spacing: 0.14px; } .header-huawei-2-titanium__main__new-arrivals-titanium { width: 252px; height: auto; } .header-huawei-2-titanium__main__new-arrivals-date { font-size: 14px; line-height: 19.6px; letter-spacing: 0.14px; margin: 28px 0 0 0; } .header-huawei-2-titanium__main__new-arrivals-date::before { content: url("https://static.lenskart.com/owndays/img/huawei2-titanium/main-text-line-pc.svg"); bottom: 125px; left: 0; aspect-ratio: 492/114.5; } .header-huawei-2-titanium__main__new-arrivals-date strong { font-size: 18px; letter-spacing: 0.18px; } } @media (min-width: 1296px) { .header-huawei-2-titanium__main { padding-top: 60px; padding-right: 80px; } .header-huawei-2-titanium__main__logo { width: 100%; max-width: 405px; top: 17%; right: 12%; } .header-huawei-2-titanium__main__new-arrivals-layout { left: 12%; bottom: 12%; } } @media (min-width: 1500px) { .header-huawei-2-titanium__main__logo { right: 20.2%; } .header-huawei-2-titanium__main__new-arrivals-layout { left: 20%; } } .header-huawei-2-titanium__concept { width: 100%; height: auto; padding: 70px 0 51px; position: relative; } .header-huawei-2-titanium__concept picture { width: 100%; height: auto; display: block; } .header-huawei-2-titanium__concept__title { color: black; font-family: "BIZ UDPGothic", serif; font-size: 28px; font-style: normal; font-weight: 700 !important; line-height: 160%; letter-spacing: 0.28px; margin: 0; } .header-huawei-2-titanium__concept__details { margin-bottom: 6px; } .header-huawei-2-titanium__concept__details-text { color: #535353; font-family: "BIZ UDPGothic", serif; font-size: 16px; font-style: normal; font-weight: 700 !important; line-height: 32px; letter-spacing: 0.16px; margin: 24px 0 30px 0; } @media (max-width: 767px) { .header-huawei-2-titanium__concept__details-text { font-size: 14px; line-height: 28px; letter-spacing: 0.14px; font-weight: 400 !important; } } .header-huawei-2-titanium__concept__glasses { max-width: none; width: 679px; height: auto; margin-left: -66px; } .header-huawei-2-titanium__concept__options { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px; padding: 0 40px; margin-bottom: 0; } .header-huawei-2-titanium__concept__options > li img { height: auto; } .header-huawei-2-titanium__concept__options > li:nth-child(1) img { width: 43.493px; } .header-huawei-2-titanium__concept__options > li:nth-child(2) img { width: 52px; } .header-huawei-2-titanium__concept__options > li:nth-child(3) img { width: 51.999px; } .header-huawei-2-titanium__concept__options > li:nth-child(4) img { width: 52px; } .header-huawei-2-titanium__concept__options > li h3 { color: black; font-family: "BIZ UDPGothic", serif; font-size: 18px; font-style: normal; font-weight: 700 !important; line-height: 32px; letter-spacing: 0.18px; margin: 20px 0 8px 0; } @media (max-width: 767px) { .header-huawei-2-titanium__concept__options > li h3 { font-size: 16px; line-height: 25.6px; letter-spacing: 0.16px; } } .header-huawei-2-titanium__concept__options > li p { color: #6A6965; font-family: "BIZ UDPGothic", serif; font-size: 16px; font-style: normal; font-weight: 700 !important; line-height: 32px; letter-spacing: 0.16px; margin: 0; } @media (max-width: 767px) { .header-huawei-2-titanium__concept__options > li p { font-size: 14px; line-height: 28px; letter-spacing: 0.14px; font-weight: 400 !important; } } @media (min-width: 768px) { .header-huawei-2-titanium__concept { padding-bottom: 132px; } .header-huawei-2-titanium__concept__title { width: 50%; height: auto; } .header-huawei-2-titanium__concept__details { width: 50%; height: auto; margin-bottom: 100px; } .header-huawei-2-titanium__concept__glasses { position: absolute; top: 26px; left: calc(50% - 30.5px); width: 577px; height: 324.5px; margin-left: 0; } .header-huawei-2-titanium__concept__options { display: grid; grid-template-columns: 1fr 1fr; -webkit-column-gap: 44px; -moz-column-gap: 44px; column-gap: 44px; row-gap: 50px; padding: 0; } } @media (min-width: 1024px) { .header-huawei-2-titanium__concept__title { font-size: 50px; line-height: 83.2px; letter-spacing: 0.52px; } .header-huawei-2-titanium__concept__details { max-width: 720px; margin-bottom: 47px; } .header-huawei-2-titanium__concept__glasses { top: 0; left: calc(50% - 61px); right: -373px; width: 80%; height: auto; aspect-ratio: 1154/649; } .header-huawei-2-titanium__concept__glasses.is-fixed { position: fixed; } .header-huawei-2-titanium__concept__options { width: 50%; } .header-huawei-2-titanium__concept__options > li:nth-child(1) img { width: 52.493px; } .header-huawei-2-titanium__concept__options > li:nth-child(2) img { width: 56px; } .header-huawei-2-titanium__concept__options > li:nth-child(3) img { width: 61.393px; } .header-huawei-2-titanium__concept__options > li:nth-child(4) img { width: 58px; } .header-huawei-2-titanium__concept__options > li h3 { font-size: 18px; line-height: 32px; letter-spacing: 0.18px; margin: 30px 0 12px 0; } .header-huawei-2-titanium__concept__options > li p { font-size: 16px; line-height: 32px; letter-spacing: 0.16px; } .header-huawei-2-titanium__concept__frame-top, .header-huawei-2-titanium__concept__frame-bottom { width: 50%; position: absolute; right: 0; z-index: 1; background-color: white; } .header-huawei-2-titanium__concept__frame-top { height: 140px; top: 0; } .header-huawei-2-titanium__concept__frame-bottom { height: 132px; bottom: 0; } } .header-huawei-2-titanium__feature { width: 100%; height: auto; background-color: white; } .header-huawei-2-titanium__feature__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 100px; padding: 45px 35px; background-color: #f7f7f7; border-radius: 20px; list-style-type: none; width: 100%; height: auto; margin: 0; } @media (max-width: 767px) { .header-huawei-2-titanium__feature__list { gap: 30px; } } .header-huawei-2-titanium__feature__list > li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 22px; } .header-huawei-2-titanium__feature__list > li img { height: auto; } .header-huawei-2-titanium__feature__list > li:nth-child(1) img { width: 48px; } .header-huawei-2-titanium__feature__list > li:nth-child(2) img { width: 49.119px; } .header-huawei-2-titanium__feature__list > li:nth-child(3) img { width: 52px; } .header-huawei-2-titanium__feature__list > li > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .header-huawei-2-titanium__feature__list > li > div h4 { color: black; font-family: "BIZ UDPGothic", serif; font-size: 18px; font-style: normal; font-weight: 700 !important; line-height: 25.6px; letter-spacing: 0.16px; text-align: center; margin: 0; } @media (max-width: 767px) { .header-huawei-2-titanium__feature__list > li > div h4 { font-size: 16px; text-align: left; } } .header-huawei-2-titanium__feature__list > li > div h4 br { display: none; } .header-huawei-2-titanium__feature__list > li > div p { margin-bottom: 0; color: #6a6965; font-family: "BIZ UDPGothic", serif; font-size: 16px; font-style: normal; font-weight: 400 !important; line-height: 32px; letter-spacing: 0.14px; } @media (max-width: 767px) { .header-huawei-2-titanium__feature__list > li > div p { font-size: 14px; line-height: 28px; } } .header-huawei-2-titanium__feature__remark { margin-top: 15px; padding-bottom: 50px; color: #535353; font-family: "BIZ UDPGothic", serif; font-size: 11px; font-style: normal; font-weight: 400; line-height: 20.9px; letter-spacing: 0.11px; padding-left: 15px; margin-bottom: 0; position: relative; } .header-huawei-2-titanium__feature__remark::before { content: "*"; position: absolute; left: 0; top: 0; } @media (min-width: 768px) { .header-huawei-2-titanium__feature__list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .header-huawei-2-titanium__feature__list > li { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; width: 100%; } .header-huawei-2-titanium__feature__list > li img { min-height: 65px; -o-object-fit: contain; object-fit: contain; } .header-huawei-2-titanium__feature__list > li:nth-child(1) img { width: 58px; } .header-huawei-2-titanium__feature__list > li:nth-child(2) img { width: 61.119px; } .header-huawei-2-titanium__feature__list > li:nth-child(3) img { width: 67.603px; padding: 10px 0; } .header-huawei-2-titanium__feature__list > li > div { gap: 12px; } .header-huawei-2-titanium__feature__list > li > div h4, .header-huawei-2-titanium__feature__list > li > div p { margin: 0; } .header-huawei-2-titanium__feature__remark { margin-top: 20px; padding-bottom: 120px; } } @media (min-width: 1024px) { .header-huawei-2-titanium__feature__list { padding: 70px 80px; } .header-huawei-2-titanium__feature__list > li h4 { font-size: 18px; line-height: 32px; letter-spacing: 0.18px; } .header-huawei-2-titanium__feature__list > li p { font-size: 16px; line-height: 32px; letter-spacing: 0.16px; } .header-huawei-2-titanium__feature__remark { font-size: 13px; padding-left: 20px; } } .header-huawei-2-titanium__scene__tag { width: 57px; height: 28px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: white; color: #b47e00; font-size: 14px; line-height: 22.4px; font-family: "BIZ UDPGothic", serif; font-weight: 700 !important; letter-spacing: 0.28px; border: 1px solid #b47e00; } .header-huawei-2-titanium__scene__title, .header-huawei-2-titanium__scene__desc { font-family: "BIZ UDPGothic", serif; margin-bottom: 0; } .header-huawei-2-titanium__scene__title { padding: 15px 0; font-size: 26px; font-style: normal; font-weight: 700 !important; line-height: 41.6px; letter-spacing: 0.26px; color: black; } @media (min-width: 768px) { .header-huawei-2-titanium__scene__title { font-size: 38px; font-style: normal; font-weight: 700 !important; line-height: 60.8px; letter-spacing: 0.38px; } } .header-huawei-2-titanium__scene__desc { font-size: 14px; font-style: normal; font-weight: 400 !important; line-height: 28px; letter-spacing: 0.14px; color: #535353; } @media (min-width: 768px) { .header-huawei-2-titanium__scene__desc { font-size: 16px; font-weight: 700 !important; line-height: 32px; letter-spacing: 0.16px; } } .header-huawei-2-titanium__scene__video { width: 100%; height: 100%; position: relative; overflow: hidden; } @media (min-width: 768px) { .header-huawei-2-titanium__scene__video { height: 690px; } } @media (max-width: 767px) { .header-huawei-2-titanium__scene__video { aspect-ratio: 390/281.619; } } .header-huawei-2-titanium__scene__video::after { content: ''; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("https://static.lenskart.com/owndays/img/huawei2-titanium/btn_play.svg"); background-size: 100%; z-index: 2; pointer-events: none; } @media (min-width: 768px) { .header-huawei-2-titanium__scene__video::after { width: 64px; height: 64px; } } .header-huawei-2-titanium__scene__video a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .header-huawei-2-titanium__scene__video a > iframe { pointer-events: none; border: none; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: auto; aspect-ratio: 16 / 9; } .header-huawei-2-titanium__scene__header__layout { display: grid; grid-template-columns: 1fr; } .header-huawei-2-titanium__scene__header__img img { width: 100%; height: 270px; -o-object-fit: cover; object-fit: cover; } .header-huawei-2-titanium__scene__header__content { width: 100%; height: auto; padding: 50px 23px; } .header-huawei-2-titanium__scene__header__content > .base-huawei-2-titanium__btn { margin-top: 20px; } @media (min-width: 768px) { .header-huawei-2-titanium__scene__header__layout { grid-template-columns: 50% 50%; } .header-huawei-2-titanium__scene__header__content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .header-huawei-2-titanium__scene__header__img { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .header-huawei-2-titanium__scene__header__img img { width: 100%; height: 100%; -o-object-position: unset; object-position: unset; overflow: hidden; } } @media (min-width: 1296px) { .header-huawei-2-titanium__scene__header__content { padding: 104px 110px; } } .header-huawei-2-titanium__scene__body__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .header-huawei-2-titanium__scene__body__layout > .base-huawei-2-titanium__container { padding-block: 50px; } .header-huawei-2-titanium__scene__body__layout > .base-huawei-2-titanium__container > .header-huawei-2-titanium__scene__title { padding-top: 0; } .header-huawei-2-titanium__scene__body__layout > .base-huawei-2-titanium__container > .header-huawei-2-titanium__feature__remark { padding-bottom: 0; } .header-huawei-2-titanium__scene__body__layout > .header-huawei-2-titanium__scene__header__img { -o-object-position: unset; object-position: unset; } @media (min-width: 768px) { .header-huawei-2-titanium__scene__body__layout { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; aspect-ratio: 768/618.41; } .header-huawei-2-titanium__scene__body__layout > div { width: 50%; } .header-huawei-2-titanium__scene__body__layout > .base-huawei-2-titanium__container { margin: auto 0; } .header-huawei-2-titanium__scene__body__layout--reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media (min-width: 1024px) { .header-huawei-2-titanium__scene__body__layout { max-height: 500px; aspect-ratio: 1440/500; } } @media (min-width: 1240px) { .header-huawei-2-titanium__scene__body__layout > .base-huawei-2-titanium__container { padding: 0 110px; } } @media (min-width: 1240px) { .header-huawei-2-titanium__scene__body__layout { max-height: none; } } .body-huawei-2-titanium__lineup { padding: 70px 0 91.75px 0; background-color: #F7F7F7; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup { padding: 120px 0; } } .body-huawei-2-titanium__lineup__title { text-align: center; font-family: "BIZ UDPGothic", serif; font-size: 32px; font-style: normal; font-weight: 700 !important; line-height: 51.2px; letter-spacing: 0.32px; color: black; margin-bottom: 0; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__title { font-size: 66px; line-height: 105.6px; letter-spacing: 0.66px; } } .body-huawei-2-titanium__lineup__title-img, .body-huawei-2-titanium__lineup__title-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; } .body-huawei-2-titanium__lineup__title-img::before, .body-huawei-2-titanium__lineup__title-text::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: black; z-index: -1; } .body-huawei-2-titanium__lineup__title-img span, .body-huawei-2-titanium__lineup__title-text span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding-inline: 25px; background-color: #F7F7F7; } .body-huawei-2-titanium__lineup__title-img { font: 0/0 a; margin: 45px 0 0 0; } .body-huawei-2-titanium__lineup__title-img span img { width: 132px; height: auto; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__title-img { margin: 60px 0 0 0; } .body-huawei-2-titanium__lineup__title-img span img { width: 164.408px; } } .body-huawei-2-titanium__lineup__title-text { color: black; text-align: center; font-family: "BIZ UDPGothic", serif; font-size: 12px; font-style: normal; font-weight: 400 !important; line-height: 19.2px; letter-spacing: 0.12px; margin: 60px 0 0 0; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__title-text { font-size: 14px; font-weight: 700 !important; line-height: 22.4px; letter-spacing: 0.14px; margin: 100px 0 0 0; } } .body-huawei-2-titanium__lineup__section { margin-top: 60px; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__section { margin-top: 100px; } } .body-huawei-2-titanium__lineup__desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; } .body-huawei-2-titanium__lineup__desc h3 { color: #F7F7F7; text-shadow: 1px 0px 0px black, -1px 0px 0px black, 0px 1px 0 black, 0px -1px 0 black; font-family: "Advent Pro", sans-serif; font-size: 48px; font-weight: 700 !important; line-height: 67.2px; margin-bottom: 0; } .body-huawei-2-titanium__lineup__desc p { font-family: "BIZ UDPGothic", serif; font-size: 14px; font-style: normal; font-weight: 400 !important; line-height: 28px; letter-spacing: 0.14px; margin-bottom: 0; color: #535353; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__desc { width: 100%; height: auto; max-width: 900px; margin: 0 auto; } .body-huawei-2-titanium__lineup__desc h3 { font-size: 80px; line-height: 112px; } .body-huawei-2-titanium__lineup__desc p { font-size: 16px; font-style: normal; font-weight: 700 !important; line-height: 32px; letter-spacing: 0.16px; } } .body-huawei-2-titanium__lineup__product-container { margin-top: 25px; } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-container { display: grid; grid-template-columns: calc(100% - 199px) 199px; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__product-container { grid-template-columns: calc(100% - 258px) 258px; margin-top: 40px; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } @media (min-width: 1296px) { .body-huawei-2-titanium__lineup__product-container { grid-template-columns: calc(100% - 280.28px) 280.28px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; } } @media (min-width: 1440px) { .body-huawei-2-titanium__lineup__product-container { grid-template-columns: calc(100% - 310px) 310px; } } .body-huawei-2-titanium__lineup__product-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 18.32px; } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-layout { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 18px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .body-huawei-2-titanium__lineup__product-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px; } .body-huawei-2-titanium__lineup__product-main p { margin-bottom: 0; color: black; font-style: normal; font-weight: 400 !important; } .body-huawei-2-titanium__lineup__product-main p:nth-child(1) { font-family: "BIZ UDPGothic", serif; font-size: 12px; line-height: 21.6px; } .body-huawei-2-titanium__lineup__product-main p:nth-child(2) { font-family: "SFCompactDisplay", sans-serif; font-size: 13px; line-height: 23.4px; } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-main { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; } } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__product-main p { font-weight: 700 !important; } .body-huawei-2-titanium__lineup__product-main p:nth-child(1) { font-size: 14px; line-height: 25.2px; letter-spacing: 0.14px; } .body-huawei-2-titanium__lineup__product-main p:nth-child(2) { font-family: "BIZ UDPGothic", serif; font-size: 16px; line-height: 28.8px; letter-spacing: 0.16px; } } .body-huawei-2-titanium__lineup__product-tag { width: 57px; height: 28px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: white; color: #b47e00; font-size: 14px; line-height: 22.4px; font-family: "BIZ UDPGothic", serif; font-weight: 700 !important; letter-spacing: 0.28px; border: 1px solid #b47e00; margin-bottom: 0; } .body-huawei-2-titanium__lineup__product-number { color: #7C7C7C; font-family: "SFCompactDisplay", sans-serif; font-size: 20px; font-style: normal; font-weight: 400 !important; line-height: 36px; margin-bottom: 0; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__product-number { font-size: 26px; font-weight: 700 !important; line-height: 46.8px; letter-spacing: 0.26px; } } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-color-and-arrows { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 10px; } } .body-huawei-2-titanium__lineup__product-colors { list-style-type: none; padding-left: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .body-huawei-2-titanium__lineup__product-colors li { width: 38px; height: 38px; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__product-colors li { width: 44px; height: 44px; } } .body-huawei-2-titanium__lineup__product-colors li button { width: 100%; height: 100%; background-color: transparent; background-clip: content-box; border-width: 1px; border-style: solid; border-color: transparent; -o-border-image: none; border-image: none; -o-border-image: initial; border-image: initial; outline: none; border-radius: 10rem; padding: 6px; } .body-huawei-2-titanium__lineup__product-colors li button[data-color="dark-gun"], .body-huawei-2-titanium__lineup__product-colors li button[data-color="black"] { background-color: black; } .body-huawei-2-titanium__lineup__product-colors li button[data-color="silver"], .body-huawei-2-titanium__lineup__product-colors li button[data-color="clear-grey"] { background-color: #999999; } .body-huawei-2-titanium__lineup__product-colors li button[data-color="clear-brown"] { background-color: #8B6554; } .body-huawei-2-titanium__lineup__product-colors li button[data-color-selected="true"] { border-color: #999999; } .body-huawei-2-titanium__lineup__product-btn { margin-top: 25.5px; } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-btn { margin-top: 40px; } } .body-huawei-2-titanium__lineup__product-snap__layout { width: calc(100% + 40px); margin: 60px -23px 0 -23px; height: auto; background-color: #F2F2F2; padding: 0 23px; position: relative; } .body-huawei-2-titanium__lineup__product-snap__layout::before { position: absolute; content: ''; width: 73px; height: 73px; top: -36.5px; right: 37px; background: url("https://static.lenskart.com/owndays/img/huawei2-titanium/plus-icon.svg"); background-repeat: no-repeat; background-size: 100%; } .body-huawei-2-titanium__lineup__product-snap__layout--sp { display: block; } .body-huawei-2-titanium__lineup__product-snap__layout--pc { display: none; } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-snap__layout--sp { display: none; } .body-huawei-2-titanium__lineup__product-snap__layout--pc { display: block; grid-column: span 2; width: 100%; max-width: 800px; height: auto; margin: 56px auto 0 auto; padding: 0 14px 0 40px; } } .body-huawei-2-titanium__lineup__product-snap__content { display: grid; grid-template-columns: 130px 1fr; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 36px 0 49px 20px; } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-snap__content { padding: 35px 0 20px 0; grid-template-columns: 213px 1fr; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } .body-huawei-2-titanium__lineup__product-snap__main p { margin-bottom: 0; white-space: nowrap; } .body-huawei-2-titanium__lineup__product-snap__main-lens { color: #AD0824; font-family: "BIZ UDPGothic", serif; font-size: 11px; font-style: normal; font-weight: 700 !important; line-height: 19.8px; } .body-huawei-2-titanium__lineup__product-snap__main-name { color: #7C7C7C; font-family: "SFCompactDisplay", sans-serif; font-size: 14px; font-style: normal; font-weight: 400 !important; line-height: 25.2px; } .body-huawei-2-titanium__lineup__product-snap__main-price { color: black; font-family: "SFCompactDisplay", sans-serif; font-size: 14px; font-style: normal; font-weight: 400 !important; line-height: 25.2px; } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-snap__main p:nth-child(1) { white-space: unset; } .body-huawei-2-titanium__lineup__product-snap__main-lens { font-size: 14px; line-height: 25.2px; letter-spacing: 0.14px; margin-top: 12px; } .body-huawei-2-titanium__lineup__product-snap__main-name, .body-huawei-2-titanium__lineup__product-snap__main-price { font-size: 16px; line-height: 28.8px; } } .body-huawei-2-titanium__lineup__product-snap__desc { margin-bottom: 0; } .body-huawei-2-titanium__lineup__product-snap__desc--sp { display: block; grid-column: span 2; margin-top: 14px; color: #535353; font-family: "BIZ UDPGothic", serif; font-size: 13px; font-style: normal; font-weight: 400 !important; line-height: 23.4px; } .body-huawei-2-titanium__lineup__product-snap__desc--pc { display: none; } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__product-snap__desc--sp { display: none; } .body-huawei-2-titanium__lineup__product-snap__desc--pc { display: block; color: #535353; font-family: #535353; font-size: 16px; font-style: normal; font-weight: 700 !important; line-height: 28.8px; letter-spacing: 0.16px; } } .body-huawei-2-titanium__lineup__slider { width: calc(100% + 46px); margin: 0 -23px; height: auto; } .body-huawei-2-titanium__lineup__slider > .slick-list { margin: 0 -6.5px; max-height: 190px; } .body-huawei-2-titanium__lineup__slider > .slick-list .slick-slide { padding: 0 6.5px; max-width: 303.874px; aspect-ratio: 303.874/190; } @media (min-width: 430px) { .body-huawei-2-titanium__lineup__slider > .slick-list { max-height: none; } } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__slider > .slick-list { margin: 0; padding: 0px 0 0 40% !important; } .body-huawei-2-titanium__lineup__slider > .slick-list .slick-slide { padding: 0 8.5px; } } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__slider > .slick-list { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0px 0 0 37% !important; } .body-huawei-2-titanium__lineup__slider > .slick-list .slick-slide { width: 424px; max-width: 559.768px; aspect-ratio: 559.768/350; } } @media (min-width: 1296px) { .body-huawei-2-titanium__lineup__slider > .slick-list { padding: 0px 0 0 33.7% !important; } .body-huawei-2-titanium__lineup__slider > .slick-list .slick-slide { width: 577px; max-width: none; max-width: 560/350; } } @media (min-width: 768px) { .body-huawei-2-titanium__lineup__slider { width: calc(100% + 500px); margin: 0 0 0 -500px; } } @media (min-width: 1140px) { .body-huawei-2-titanium__lineup__slider { width: calc(100% + 500px); margin: 0 0 0 -500px; } } .body-huawei-2-titanium__lineup__arrows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } @media (max-width: 767px) { .body-huawei-2-titanium__lineup__arrows { display: none; } } .body-huawei-2-titanium__lineup__arrows-prev, .body-huawei-2-titanium__lineup__arrows-next { width: 54px; height: 50px; background-color: #7C7C7C; background-position: 50%; background-repeat: no-repeat; background-size: 21px 23px; border: none; outline: none; -webkit-transition: background-color 1s; transition: background-color 1s; } @media (min-width: 1024px) { .body-huawei-2-titanium__lineup__arrows-prev, .body-huawei-2-titanium__lineup__arrows-next { width: 68px; cursor: pointer; } .body-huawei-2-titanium__lineup__arrows-prev:hover, .body-huawei-2-titanium__lineup__arrows-next:hover { -webkit-transition: 0.5s; transition: 0.5s; background-color: black; } } .body-huawei-2-titanium__lineup__arrows-prev { background-image: url("https://static.lenskart.com/owndays/img/huawei2-titanium/arrow-left-icon.svg"); border-radius: 10px 0 0 10px; } .body-huawei-2-titanium__lineup__arrows-next { background-image: url("https://static.lenskart.com/owndays/img/huawei2-titanium/arrow-right-icon.svg"); border-radius: 0 10px 10px 0; } .footer-huawei-2-titanium__spec { padding-top: 57px; } @media (min-width: 768px) { .footer-huawei-2-titanium__spec { padding-top: 120px; } } .footer-huawei-2-titanium__spec__title { text-align: center; font-family: "BIZ UDPGothic", serif; font-size: 32px; font-style: normal; font-weight: 700 !important; line-height: 51.2px; letter-spacing: 0.32px; text-transform: uppercase; color: black; padding-bottom: 45px; margin-bottom: 0; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__title { font-size: 66px; line-height: 105.6px; padding-bottom: 60px; } } .footer-huawei-2-titanium__spec__list { list-style-type: none; padding-left: 0; margin-bottom: 0; } .footer-huawei-2-titanium__spec__list--sp { display: block; } .footer-huawei-2-titanium__spec__list--pc { display: none; } .footer-huawei-2-titanium__spec__list > li:not(:first-child) { margin-top: 40px; } .footer-huawei-2-titanium__spec__list h3, .footer-huawei-2-titanium__spec__list p { margin-bottom: 0; } .footer-huawei-2-titanium__spec__list h3 { font-family: "BIZ UDPGothic", serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 30.8px; letter-spacing: 0.14px; color: black; margin-bottom: 16.667px; display: grid; grid-template-columns: 23.589px 1fr; gap: 12.78px; position: relative; } .footer-huawei-2-titanium__spec__list h3::after { position: absolute; left: 0; bottom: -8px; content: ""; display: block; width: 100%; height: auto; border-bottom: 0.667px solid black; } .footer-huawei-2-titanium__spec__list h3 > span:nth-child(1) { margin: auto; } .footer-huawei-2-titanium__spec__list p { font-family: "BIZ UDPGothic", serif; font-size: 14px; font-style: normal; font-weight: 400 !important; line-height: 30.8px; letter-spacing: 0.14px; color: black; } @media (min-width: 768px) { .footer-huawei-2-titanium__spec__list--sp { display: none; } .footer-huawei-2-titanium__spec__list--pc { display: grid; grid-template-columns: 1fr 1fr; gap: 45px 6.18%; } .footer-huawei-2-titanium__spec__list--pc > ul:first-child > li:not(:first-child), .footer-huawei-2-titanium__spec__list--pc > ul:nth-child(2) > li:not(:first-child) { margin-top: 45px; } .footer-huawei-2-titanium__spec__list--pc > ul:last-child { grid-column: span 2; } } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__list h3 { font-size: 16px; line-height: 35.2px; letter-spacing: 0.16px; margin-bottom: 30.667px; display: grid; grid-template-columns: 30.12px 1fr; gap: 18px; } .footer-huawei-2-titanium__spec__list h3::after { bottom: -15px; } .footer-huawei-2-titanium__spec__list p { font-size: 13px; font-weight: 700 !important; line-height: 30px; letter-spacing: 0.16px; color: black; } } .footer-huawei-2-titanium__spec__item__remarks { list-style-type: none; padding-left: 11px; margin-bottom: 0; color: #535353; font-family: "BIZ UDPGothic"; font-size: 11px; font-style: normal; font-weight: 400 !important; line-height: 20.9px; margin-top: 10px; position: relative; } .footer-huawei-2-titanium__spec__item__remarks li::before { content: '*'; position: absolute; left: 0; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item__remarks { font-size: 13px; font-style: normal; font-weight: 700 !important; line-height: 24.7px; letter-spacing: 0.13px; padding-left: 20.15px; } } .footer-huawei-2-titanium__spec__item__accessories { list-style-type: none; margin-bottom: 0; padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 17px 19px; margin-top: 13px; } .footer-huawei-2-titanium__spec__item__accessories li > p { color: black; font-family: "BIZ UDPGothic", serif; font-size: 11px; font-style: normal; font-weight: 400; line-height: 1.4; letter-spacing: 0.11px; } @media (min-width: 768px) { .footer-huawei-2-titanium__spec__item__accessories { grid-template-columns: 1fr 1fr 1fr; } .footer-huawei-2-titanium__spec__item__accessories__accessories-pc { display: grid; grid-template-columns: calc(50% - 32px) 1fr; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; margin: 20px 0; } } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item__accessories li > p { font-size: 13px; font-style: normal; font-weight: 700 !important; line-height: 1.6; letter-spacing: 0.13px; } } .footer-huawei-2-titanium__spec__item-speakers h3 > span > img { width: 23.589px; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item-speakers h3 > span > img { width: 30.12px; } } .footer-huawei-2-titanium__spec__item-microphones h3 > span > img { width: 13.76px; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item-microphones h3 > span > img { width: 19px; } } .footer-huawei-2-titanium__spec__item-battery h3 > span > img { width: 13.027px; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: invert(1); filter: invert(1); } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item-battery h3 > span > img { width: 18px; } } .footer-huawei-2-titanium__spec__item-product-weight h3 > span > img { width: 18.674px; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item-product-weight h3 > span > img { width: 24px; } } .footer-huawei-2-titanium__spec__item-product-weight h3 > span:last-child { position: relative; } .footer-huawei-2-titanium__spec__item-product-weight h3 > span:last-child::before { content: '* excluding lenses'; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 5%; font-family: "BIZ UDPGothic", serif; font-size: 11px; font-style: normal; font-weight: 400 !important; line-height: 220%; letter-spacing: 0.11px; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item-product-weight h3 > span:last-child::before { right: unset; left: 206px; } } .footer-huawei-2-titanium__spec__item-others h3 > span > img { width: 21.623px; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item-others h3 > span > img { width: 30px; } } .footer-huawei-2-titanium__spec__item-others > p:last-child { margin-top: 10px; } .footer-huawei-2-titanium__spec__item-in-box h3 > span > img { width: 24px; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item-in-box h3 > span > img { width: 36.182px; } } .footer-huawei-2-titanium__spec__item-in-box__manual a { color: #0094C8; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .footer-huawei-2-titanium__spec__item-in-box__manual a u { text-decoration: underline; text-underline-offset: 2px; } .footer-huawei-2-titanium__spec__item-in-box__manual a img { width: 20.101px; } @media (min-width: 1024px) { .footer-huawei-2-titanium__spec__item-in-box__manual a { cursor: pointer; } .footer-huawei-2-titanium__spec__item-in-box__manual a:hover img { -webkit-transition: 0.5s; transition: 0.5s; opacity: 0.6; } } .footer-huawei-2-titanium__spec__item-in-box__box-arrow { margin-top: 35px; background-color: #F7F7F7; padding: 20px 15px; position: relative; color: #535353; } .footer-huawei-2-titanium__spec__item-in-box__box-arrow::after { content: ""; position: absolute; top: -18px; left: 70px; width: 23px; height: 22px; background-image: url("https://static.lenskart.com/owndays/img/huawei2-titanium/polygon-icon.svg"); background-repeat: no-repeat; background-position: 0; background-size: auto 23px; } .footer-huawei-2-titanium__spec__item-in-box__box-arrow a { color: #0094C8; text-decoration: underline; text-underline-offset: 2px; } @media (min-width: 768px) { .footer-huawei-2-titanium__spec__item-in-box__box-arrow { margin-top: 0; padding: 20px; } .footer-huawei-2-titanium__spec__item-in-box__box-arrow::after { top: 28px; left: -18px; -webkit-transform: rotate(25deg); transform: rotate(25deg); } } .footer-huawei-2-titanium__attention { width: 100%; height: auto; background-color: #F7F7F7; padding-block: 70px; margin: 70px 0; } .footer-huawei-2-titanium__attention__title { text-align: center; font-family: "BIZ UDPGothic", serif; font-size: 32px; font-style: normal; font-weight: 700 !important; line-height: 51.2px; letter-spacing: 0.32px; margin: 0; color: black; } .footer-huawei-2-titanium__attention__question { width: 100%; height: auto; max-width: 900px; border-radius: 10px; border: 1px solid #535353; background: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 45px auto 0 auto; } .footer-huawei-2-titanium__attention__question__layout--q { width: 100%; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .footer-huawei-2-titanium__attention__question__layout--q::before, .footer-huawei-2-titanium__attention__question__layout--q::after { content: ""; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 23px; height: 1px; background-color: #535353; } .footer-huawei-2-titanium__attention__question__layout--q::after { -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; opacity: 1; } .footer-huawei-2-titanium__attention__question__layout--q__open::after { -webkit-transform: translateY(-50%) rotate(0deg) !important; transform: translateY(-50%) rotate(0deg) !important; opacity: 0; } .footer-huawei-2-titanium__attention__question__layout--a { padding: 0 20px 0 20px; -webkit-transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out; transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out; overflow: hidden; } .footer-huawei-2-titanium__attention__question__q { font-family: "BIZ UDPGothic", serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 30.8px; letter-spacing: 0.14px; padding-left: 20px; color: #535353; } .footer-huawei-2-titanium__attention__question h3, .footer-huawei-2-titanium__attention__question h4 { font-weight: 700 !important; } .footer-huawei-2-titanium__attention__question h3, .footer-huawei-2-titanium__attention__question h4, .footer-huawei-2-titanium__attention__question ul, .footer-huawei-2-titanium__attention__question p { font-family: "BIZ UDPGothic", serif; font-size: 13px; font-style: normal; font-weight: 700; line-height: 28.6px; margin: 0; color: #535353; } .footer-huawei-2-titanium__attention__question h4 { margin-top: 24px; } .footer-huawei-2-titanium__attention__question ul, .footer-huawei-2-titanium__attention__question p { font-weight: 400 !important; } .footer-huawei-2-titanium__attention__question ul { list-style-type: none; padding-left: 0; margin: 10px 0 0 0; } .footer-huawei-2-titanium__attention__question ul:last-child { padding-bottom: 20px; } .footer-huawei-2-titanium__attention__question ul li { display: -webkit-box; display: -ms-flexbox; display: flex; } .footer-huawei-2-titanium__attention__question ul li span:nth-child(1) { margin-right: 7px; } .footer-huawei-2-titanium__attention__question__note { position: relative; padding-left: 12px; } .footer-huawei-2-titanium__attention__question__note::before { content: '*'; position: absolute; left: 0; } .footer-huawei-2-titanium__attention__remarks { width: 100%; height: auto; max-width: 900px; list-style-type: none; padding-left: 0; margin: 37px auto 0 auto; } .footer-huawei-2-titanium__attention__remarks li { position: relative; padding-left: 12px; font-family: "BIZ UDPGothic", serif; font-size: 13px; font-style: normal; font-weight: 400; line-height: 28.6px; letter-spacing: 0.13px; color: #535353; } .footer-huawei-2-titanium__attention__remarks li::before { content: '*'; position: absolute; left: 0; } @media (min-width: 1024px) { .footer-huawei-2-titanium__attention { padding-block: 120px; margin-top: 120px; } .footer-huawei-2-titanium__attention__title { font-size: 66px; line-height: 105.6px; letter-spacing: 0.66px; } .footer-huawei-2-titanium__attention__question { max-width: 900px; margin: 60px auto 0 auto; cursor: pointer; } .footer-huawei-2-titanium__attention__question__layout--q { height: 122px; } .footer-huawei-2-titanium__attention__question__layout--q::before, .footer-huawei-2-titanium__attention__question__layout--q::after { width: 40px; height: 1px; background-color: #535353; right: 42px; } .footer-huawei-2-titanium__attention__question__layout--a { padding: 0 42px; } .footer-huawei-2-titanium__attention__question__q { font-size: 18px; line-height: 39.6px; padding-left: 42px; } .footer-huawei-2-titanium__attention__question h3, .footer-huawei-2-titanium__attention__question h4, .footer-huawei-2-titanium__attention__question ul, .footer-huawei-2-titanium__attention__question p { font-size: 16px; line-height: 35.2px; letter-spacing: normal; } .footer-huawei-2-titanium__attention__question ul:last-child { padding-bottom: 56px; } .footer-huawei-2-titanium__attention__question__note { padding-left: 19px; } .footer-huawei-2-titanium__attention__remarks { margin: 60px auto 0 auto; } .footer-huawei-2-titanium__attention__remarks li { padding-left: 19px; font-size: 16px; font-weight: 700 !important; line-height: 35.2px; } } .footer-huawei-2-titanium__share { width: 100%; height: auto; background-color: #414141; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 34px; padding: 43px 0 58px 0; } .footer-huawei-2-titanium__share h2 { margin: 0; color: white; text-align: center; font-family: "BIZ UDPGothic", serif; font-size: 30px; font-style: normal; font-weight: 700 !important; line-height: 33px; letter-spacing: 3px; } .footer-huawei-2-titanium__share__list { list-style-type: none; padding: 0; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } .footer-huawei-2-titanium__share__list li a { font-size: 35px; color: white; display: block; width: 35px; height: 35px; } .footer-huawei-2-titanium__share__list li a i { background: transparent; } .footer-huawei-2-titanium__share__list li:nth-child(1), .footer-huawei-2-titanium__share__list li:nth-child(2) { margin-top: -5px; } .footer-huawei-2-titanium__share__list li:nth-child(3) { width: 35px; height: 35px; position: relative; } .footer-huawei-2-titanium__share__list li:nth-child(3) a { color: #414141; position: relative; } .footer-huawei-2-titanium__share__list li:nth-child(3) a i { font-size: 22.23px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .footer-huawei-2-titanium__share__list li:nth-child(3) a::before { position: absolute; content: ''; width: 35px; height: 35px; background-color: white; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } @media (min-width: 1024px) { .footer-huawei-2-titanium__share__list { margin: 0; gap: 36px; } .footer-huawei-2-titanium__share__list li a { cursor: pointer; -webkit-transition: .5s; transition: .5s; max-height: none; } .footer-huawei-2-titanium__share__list li:not(:nth-child(3)) { margin-top: -13px; } .footer-huawei-2-titanium__share__list li:not(:nth-child(3)) a:hover { color: #b3b3b3; } .footer-huawei-2-titanium__share__list li:nth-child(3) a:hover::before { -webkit-transition: 0.5s; transition: 0.5s; background-color: #b3b3b3; } } @media (min-width: 1024px) { .footer-huawei-2-titanium__share { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } .footer-huawei-2-titanium__share h2 { font-size: 40px; line-height: 44px; letter-spacing: 4px; } } @font-face { font-family: "SFCompactDisplay"; src: url("https://static.lenskart.com/owndays/fonts/SFCompactDisplay/SFCompactDisplay-Regular.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/SFCompactDisplay/SFCompactDisplay-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "SFCompactDisplay"; src: url("https://static.lenskart.com/owndays/fonts/SFCompactDisplay/SFCompactDisplay-Bold.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/SFCompactDisplay/SFCompactDisplay-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } .base-huawei-2-titanium { overflow: hidden; } .base-huawei-2-titanium__container { padding-left: 23px; padding-right: 23px; margin-left: auto; margin-right: auto; width: 100%; max-width: 1220px; } @media (min-width: 1240px) { .base-huawei-2-titanium__container { padding: 0; } } .base-huawei-2-titanium__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; height: 45px; border-radius: 10px; color: white; background-color: #292929; font-family: "BIZ UDPGothic", serif; font-weight: 700 !important; letter-spacing: 0.14px; line-height: 1; overflow: hidden; position: relative; z-index: 1; } @media (max-width: 767px) { .base-huawei-2-titanium__btn { line-height: 28px; font-size: 14px; } } @media (min-width: 1024px) { .base-huawei-2-titanium__btn { cursor: pointer; } } .base-huawei-2-titanium__btn:hover, .base-huawei-2-titanium__btn:active, .base-huawei-2-titanium__btn:visited, .base-huawei-2-titanium__btn:focus { text-decoration: none; } .base-huawei-2-titanium__btn--sm { background: white; color: #535353; border: 1px solid #535353; border-radius: 10px; height: 40px; width: 100%; max-width: 280px; padding: 0 72px; margin-inline: auto; font-size: 12px; line-height: 1; font-weight: 700 !important; letter-spacing: 0.12px; } .base-huawei-2-titanium__btn--sm:hover, .base-huawei-2-titanium__btn--sm:active, .base-huawei-2-titanium__btn--sm:visited, .base-huawei-2-titanium__btn--sm:focus { color: #535353; } @media (min-width: 1024px) { .base-huawei-2-titanium__btn--sm:hover { color: white; } .base-huawei-2-titanium__btn--sm:hover::after { -webkit-transform: scaleX(1); transform: scaleX(1); } .base-huawei-2-titanium__btn--sm::after { background: #535353; position: absolute; top: 0; left: 0; content: ""; width: 100% !important; height: 100%; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1); transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1; will-change: transform; } } .base-huawei-2-titanium__btn--gold { background-color: #B47E00; color: white; } .base-huawei-2-titanium__btn--gold:hover, .base-huawei-2-titanium__btn--gold:active, .base-huawei-2-titanium__btn--gold:visited, .base-huawei-2-titanium__btn--gold:focus { color: white; } @media (min-width: 1024px) { .base-huawei-2-titanium__btn--gold::after { background-color: #875D07; position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 140px; -webkit-transform: skewY(-10deg) scaleY(0); transform: skewY(-10deg) scaleY(0); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1); transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1; will-change: transform; } .base-huawei-2-titanium__btn--gold:hover { -webkit-transition: 0.5s; transition: 0.5s; background: #875D07; } .base-huawei-2-titanium__btn--gold:hover::after { -webkit-transform: skewY(-10deg) scale(1); transform: skewY(-10deg) scale(1); } } @media (min-width: 768px) { .base-huawei-2-titanium__btn--sm { margin-left: 0; } } @media (min-width: 1024px) { .base-huawei-2-titanium__btn { font-size: 14px; line-height: 30.8px; } .base-huawei-2-titanium__btn--lg { font-size: 14px; line-height: 22.4px; letter-spacing: 0.28px; height: 70px; } .base-huawei-2-titanium__btn--sm { max-width: 260px; height: 54px; font-size: 14px; letter-spacing: 0.14px; } } .header-toystory__main { position: relative; } .header-toystory__main__bg { width: 100%; height: 711px; overflow: hidden; position: relative; } .header-toystory__main__bg::before, .header-toystory__main__bg::after { content: ''; position: absolute; background-size: cover; background-repeat: no-repeat; } .header-toystory__main__bg::before { width: 1226px; height: 791px; top: -87px; left: 43%; z-index: -2; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-image: url("https://static.lenskart.com/owndays/img/toystory/main/main-bg-sky.webp"); } .header-toystory__main__bg::after { width: 100%; height: 387px; left: 0; top: 325px; background-image: url("https://static.lenskart.com/owndays/img/toystory/main/main-bg-yellow_sp.webp"); } @media (min-width: 1024px) { .header-toystory__main__bg { aspect-ratio: 72/35; height: 100%; max-height: 700px; } .header-toystory__main__bg::before { width: 1917px; height: 1237px; top: 0; left: 0; -webkit-transform: unset; transform: unset; } .header-toystory__main__bg::after { width: 37%; height: 100%; aspect-ratio: 7/6; top: 0; background-position: right; background-image: url("https://static.lenskart.com/owndays/img/toystory/main/main-bg-yellow_pc.webp"); } } @media (min-width: 1440px) { .header-toystory__main__bg::before { width: 100%; height: 100%; } .header-toystory__main__bg::after { width: 41%; } } @media (min-width: 1500px) { .header-toystory__main__bg::after { width: 43%; } } @media (min-width: 1740px) { .header-toystory__main__bg::after { width: 45%; } } @media (min-width: 2048px) { .header-toystory__main__bg::after { width: 48%; } } .header-toystory__main__content { position: absolute; top: 0; left: 0; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 50.35px; } @media (min-width: 500px) { .header-toystory__main__content { gap: 100px; } } @media (min-width: 768px) { .header-toystory__main__content { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024px) { .header-toystory__main__content { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media (min-width: 1296px) { .header-toystory__main__content { gap: 145px; } } .header-toystory__main__characters__layout { width: 100%; max-width: 365px; height: auto; padding: 0 20px; margin: 53px auto 0; position: relative; } @media (min-width: 768px) { .header-toystory__main__characters__layout { margin-top: 75px; } } @media (min-width: 1024px) { .header-toystory__main__characters__layout { max-width: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0 50px; } } @media (min-width: 1296px) { .header-toystory__main__characters__layout { width: 100%; max-width: 770px; padding: 0; } } .header-toystory__main__characters__main, .header-toystory__main__characters__planet, .header-toystory__main__characters__rocket, .header-toystory__main__characters__star, .header-toystory__main__characters__mark { height: auto; } .header-toystory__main__characters__planet, .header-toystory__main__characters__rocket, .header-toystory__main__characters__star, .header-toystory__main__characters__mark { position: absolute; } .header-toystory__main__characters__main { width: 309.42px; } @media (min-width: 1024px) { .header-toystory__main__characters__main { width: 372px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: auto; } } @media (min-width: 1296px) { .header-toystory__main__characters__main { width: 558px; } } .header-toystory__main__characters__planet { width: 71px; left: 0; top: -22px; } @media (min-width: 1024px) { .header-toystory__main__characters__planet { width: 85.33px; } } @media (min-width: 1296px) { .header-toystory__main__characters__planet { width: 128.565px; top: 19px; } } .header-toystory__main__characters__rocket { width: 68.33px; right: 0; top: -14px; } @media (min-width: 1024px) { .header-toystory__main__characters__rocket { width: 73.33px; } } @media (min-width: 1296px) { .header-toystory__main__characters__rocket { width: 113px; top: 0; right: -2px; } } .header-toystory__main__characters__star { width: 58px; left: -20px; bottom: -3.91px; } @media (min-width: 1024px) { .header-toystory__main__characters__star { width: 73.33px; } } @media (min-width: 1296px) { .header-toystory__main__characters__star { width: 110.53px; bottom: 34.49px; } } .header-toystory__main__characters__mark { width: 53px; bottom: 9.99px; right: -16px; } @media (min-width: 1024px) { .header-toystory__main__characters__mark { width: 73.33px; } } @media (min-width: 1296px) { .header-toystory__main__characters__mark { width: 123.35px; bottom: 7px; } } .header-toystory__main__logo { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; font: 0 / 0 a; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; } .header-toystory__main__logo img { width: 167.25px; height: auto; } @media (min-width: 1024px) { .header-toystory__main__logo { margin: auto 0; } .header-toystory__main__logo img { width: 213.33px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } } @media (min-width: 1296px) { .header-toystory__main__logo { margin-left: 78px; } .header-toystory__main__logo img { width: 320px; } } .header-toystory__concept { position: relative; display: grid; grid-template-columns: 1fr; background-color: #f8c700; margin-top: -135px; } @media (min-width: 1024px) { .header-toystory__concept { width: 100%; height: 762px; margin-top: 0; grid-template-columns: 50% 50%; background-color: white; overflow: hidden; position: relative; } } @media (min-width: 1296px) { .header-toystory__concept { height: 860px; } } @media (min-width: 1617px) { .header-toystory__concept::before { left: calc(50% - 50px); -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .header-toystory__concept__text { position: relative; z-index: 1; padding: 0 20px; margin-top: 20%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 414px) { .header-toystory__concept__text { margin-top: 30%; } } @media (min-width: 730px) { .header-toystory__concept__text { margin-top: 26%; } } @media (min-width: 768px) { .header-toystory__concept__text { margin-top: 33%; } } @media (min-width: 960px) { .header-toystory__concept__text { margin-top: 30%; } } @media (min-width: 1024px) { .header-toystory__concept__text { margin-top: 170px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media (min-width: 1296px) { .header-toystory__concept__text { padding: 0 0 0 142px; } } .header-toystory__concept__text::before { content: ""; position: absolute; left: 20px; top: -100px; width: 60px; height: 60px; background: url("https://static.lenskart.com/owndays/img/toystory/concept/ball.svg") no-repeat 50%/contain; } @media (min-width: 1024px) { .header-toystory__concept__text::before { width: 91.038px; height: 91.34px; top: -117px; left: 80%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .header-toystory__concept__detail { color: black; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 26px; margin: 20px 0 30px 0; position: relative; z-index: 1; } @media (min-width: 1024px) { .header-toystory__concept__detail { margin: 8px 0 30px 0; padding-top: 30px; } } .header-toystory__concept__cloud__layout { width: 100%; height: auto; position: relative; z-index: 1; } .header-toystory__concept__cloud__bg { position: absolute; top: 0; width: 100%; height: auto; z-index: 0; } @media (min-width: 431px) { .header-toystory__concept__cloud__bg { max-height: 600px; top: 234px; -webkit-transform: scale(2.3); transform: scale(2.3); } } @media (min-width: 480px) { .header-toystory__concept__cloud__bg { -webkit-transform: scale(2); transform: scale(2); } } @media (min-width: 500px) { .header-toystory__concept__cloud__bg { max-height: 600px; top: 206px; -webkit-transform: scale(1.8); transform: scale(1.8); } } @media (min-width: 614px) { .header-toystory__concept__cloud__bg { top: 187px; -webkit-transform: scale(1.4); transform: scale(1.4); } } @media (min-width: 768px) { .header-toystory__concept__cloud__bg { max-height: 500px; -webkit-transform: scale(1.3); transform: scale(1.3); top: 190px; } } @media (min-width: 1024px) { .header-toystory__concept__cloud__bg { top: 52%; left: 19%; -webkit-transform: translate(-50%, -50%) scale(1.9); transform: translate(-50%, -50%) scale(1.9); } } @media (min-width: 1158px) { .header-toystory__concept__cloud__bg { top: 47%; left: 37%; -webkit-transform: translate(-50%, -50%) scale(1.6); transform: translate(-50%, -50%) scale(1.6); } } @media (min-width: 1296px) { .header-toystory__concept__cloud__bg { top: 46%; left: 35%; } } @media (min-width: 1440px) { .header-toystory__concept__cloud__bg { left: 44%; -webkit-transform: translate(-50%, -50%) scale(1.396); transform: translate(-50%, -50%) scale(1.396); } } @media (min-width: 1874px) { .header-toystory__concept__cloud__bg { top: 47%; left: 41%; } } .header-toystory__concept__video__layout { width: 100%; height: 555px; position: relative; cursor: pointer; overflow: hidden; } .header-toystory__concept__video__layout > div { width: 100%; height: 100%; } @media (min-width: 768px) { .header-toystory__concept__video__layout { height: 630px; margin-top: -50px; } } @media (min-width: 1024px) { .header-toystory__concept__video__layout { width: calc(100% + 150px); height: 100%; margin-top: 0; margin-left: -150px; z-index: 0; } .header-toystory__concept__video__layout > div { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; max-height: 66%; margin-top: 170px; margin-left: 0; aspect-ratio: 83 / 63; position: relative; } .header-toystory__concept__video__layout > div::before { content: ""; position: absolute; left: 0; bottom: 0; width: 208.21px; height: 118.99px; background: url("https://static.lenskart.com/owndays/img/toystory/concept/star-icon.svg") no-repeat 50%/contain; z-index: 3; } } @media (min-width: 1024px) and (max-width: 1023px) { .header-toystory__concept__video__layout > div::before { display: none; } } @media (min-width: 1296px) { .header-toystory__concept__video__layout > div { max-height: 70%; } } @media (min-width: 1440px) { .header-toystory__concept__video__layout > div { max-height: 630px; } } .header-toystory__concept__video__container { display: block; width: 100%; height: 100%; overflow: hidden; } .header-toystory__concept__video__container::after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 162px; width: 110px; height: 70px; background: url("https://static.lenskart.com/owndays/img/toystory/concept/play-icon.svg") no-repeat 50%/contain; z-index: 2; } @media (min-width: 1024px) { .header-toystory__concept__video__container { width: calc(100% - 50px); height: 100%; position: absolute; top: 0; left: 50px; border-color: transparent; border-radius: 50px 0px 0px 50px; } .header-toystory__concept__video__container::after { left: unset; right: 29px; bottom: 26px; -webkit-transform: unset; transform: unset; } } .header-toystory__concept__video__container > iframe { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 9 / 16; pointer-events: none; z-index: 0; margin: 0; } @media (min-width: 768px) { .header-toystory__concept__video__container > iframe { top: 0; left: 0; aspect-ratio: 83 / 63; -webkit-transform: scale(237%); transform: scale(237%); } } @media (min-width: 1024px) { .header-toystory__concept__video__container > iframe { top: 0; left: unset; right: 0; -webkit-transform: scale(144%); transform: scale(144%); } } .header-toystory__nav { position: relative; } @media (min-width: 1024px) { .header-toystory__nav::before, .header-toystory__nav::after { content: ''; position: absolute; left: 0; width: 100%; overflow: hidden; z-index: 1; background-color: white; } .header-toystory__nav::before { top: -19px; height: 199px; } .header-toystory__nav::after { bottom: 0; height: 199px; } } .header-toystory__nav__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; background-color: #F4F4F4; padding-bottom: 170px !important; } .header-toystory__nav__container::before, .header-toystory__nav__container::after { content: ''; position: absolute; left: 0; width: 100%; height: 300px; overflow: hidden; } .header-toystory__nav__container::before { top: -130px; z-index: 1; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-bg-top_sp.webp") no-repeat top center/cover; } .header-toystory__nav__container::after { bottom: 0; z-index: 2; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-bg-bottom_sp.webp") no-repeat bottom center/cover; } @media (min-width: 768px) { .header-toystory__nav__container { padding-top: 60px; } .header-toystory__nav__container::before { top: -260px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-bg-top_pc.webp") no-repeat top center/cover; } .header-toystory__nav__container::after { bottom: -100px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-bg-bottom_pc.webp") no-repeat bottom center/cover; } } @media (min-width: 1024px) { .header-toystory__nav__container { padding-top: 200px !important; padding-bottom: 230px !important; max-width: none !important; } .header-toystory__nav__container::before { top: -110px; } } @media (min-width: 1296px) { .header-toystory__nav__container { padding-top: 190px !important; padding-bottom: 280px !important; } } .header-toystory__nav .base-toystory__title { position: relative; z-index: 2; } .header-toystory__nav__title { color: #0047BA; text-align: center; font-family: "Paytone One", sans-serif; font-size: 36px; font-style: normal; font-weight: 400 !important; line-height: 29px; letter-spacing: 1.8px; } @media (min-width: 1024px) { .header-toystory__nav__title { font-size: 53px; line-height: 29px; letter-spacing: 2.65px; } } .header-toystory__nav__layout__list { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(2, 170px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 13px; margin-top: 37px; margin-bottom: 0; list-style-type: none; padding-left: 0; } @media (min-width: 768px) { .header-toystory__nav__layout__list { grid-template-columns: repeat(4, 180px); margin-top: 57px; } } @media (min-width: 1296px) { .header-toystory__nav__layout__list { grid-template-columns: repeat(6, 180px); } } .header-toystory__nav__layout__item { width: 100%; height: auto; } .header-toystory__nav__layout__item[data-key="woody"], .header-toystory__nav__layout__item[data-key="buzz"] { grid-column: span 2; } @media (min-width: 1296px) { .header-toystory__nav__layout__item { width: 180px; } .header-toystory__nav__layout__item[data-key="woody"], .header-toystory__nav__layout__item[data-key="buzz"] { width: 370px; } } .header-toystory__nav__item-header { width: 100%; height: auto; aspect-ratio: 170/120; border-radius: 20px 20px 0px 0px; position: relative; } .header-toystory__nav__item-header::before { width: auto; height: calc(100% - 10px); content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-repeat: no-repeat; background-size: 100% 100%; } .header-toystory__nav__item-header[data-key="woody"], .header-toystory__nav__item-header[data-key="buzz"] { aspect-ratio: 353/120; } .header-toystory__nav__item-header[data-key="woody"]::before, .header-toystory__nav__item-header[data-key="buzz"]::before { aspect-ratio: 167 / 110; } .header-toystory__nav__item-header[data-key="woody"] { background-color: #F9C600; } .header-toystory__nav__item-header[data-key="woody"]::before { background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-1.webp"); } .header-toystory__nav__item-header[data-key="buzz"] { background-color: #8247AC; } .header-toystory__nav__item-header[data-key="buzz"]::before { background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-2.webp"); } .header-toystory__nav__item-header[data-key="jessie"] { background-color: #0171D1; } .header-toystory__nav__item-header[data-key="jessie"]::before { aspect-ratio: 50/49; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-3.webp"); } .header-toystory__nav__item-header[data-key="rex"] { background-color: #C3D5A7; } .header-toystory__nav__item-header[data-key="rex"]::before { aspect-ratio: 50/49; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-4.webp"); } .header-toystory__nav__item-header[data-key="lotso"] { background-color: #F5C5D7; } .header-toystory__nav__item-header[data-key="lotso"]::before { aspect-ratio: 83/75; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-5.webp"); } .header-toystory__nav__item-header[data-key="aliens"] { background-color: #0057BE; } .header-toystory__nav__item-header[data-key="aliens"]::before { aspect-ratio: 1/1; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-6.webp"); } .header-toystory__nav__item-header[data-key="bo-peep"] { background-color: #97CAE9; } .header-toystory__nav__item-header[data-key="bo-peep"]::before { aspect-ratio: 1/1; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-7.webp"); } .header-toystory__nav__item-header[data-key="mr-and-mrs-potato-head"] { background-color: #E64C36; } .header-toystory__nav__item-header[data-key="mr-and-mrs-potato-head"]::before { aspect-ratio: 15/14; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-8.webp"); } .header-toystory__nav__item-header[data-key="slinky-dog"] { background-color: #F7D54F; } .header-toystory__nav__item-header[data-key="slinky-dog"]::before { aspect-ratio: 15/14; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-9.webp"); } .header-toystory__nav__item-header[data-key="sid-phillips"] { background-color: #CBC7C8; } .header-toystory__nav__item-header[data-key="sid-phillips"]::before { aspect-ratio: 15/14; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/nav-10.webp"); } @media (min-width: 1024px) { .header-toystory__nav__item-header { border-radius: 30px 30px 0px 0px; aspect-ratio: 180/160; height: 160px; } .header-toystory__nav__item-header[data-key="woody"], .header-toystory__nav__item-header[data-key="buzz"] { aspect-ratio: 370/160; } } .header-toystory__nav__item-option-box { width: 100%; height: auto; aspect-ratio: 170/150; border-radius: 0px 0px 20px 20px; background-color: white; display: grid; grid-template-columns: 1fr; } @media (max-width: 425px) { .header-toystory__nav__item-option-box { height: 150px; } } .header-toystory__nav__item-option-box[data-key="woody"], .header-toystory__nav__item-option-box[data-key="buzz"] { aspect-ratio: 353/150; grid-template-columns: 1fr 1fr; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } .header-toystory__nav__item-option-box[data-key="woody"] > .header-toystory__nav__item-option-img:nth-child(1) img, .header-toystory__nav__item-option-box[data-key="buzz"] > .header-toystory__nav__item-option-img:nth-child(1) img { margin-left: auto; margin-right: 0; } .header-toystory__nav__item-option-box[data-key="woody"] > .header-toystory__nav__item-option-img:nth-child(1)::before, .header-toystory__nav__item-option-box[data-key="buzz"] > .header-toystory__nav__item-option-img:nth-child(1)::before { left: 53%; } .header-toystory__nav__item-option-box[data-key="woody"] > .header-toystory__nav__item-option-img:nth-child(2)::before, .header-toystory__nav__item-option-box[data-key="buzz"] > .header-toystory__nav__item-option-img:nth-child(2)::before { left: 46%; } .header-toystory__nav__item-option-box[data-key="woody"] > .header-toystory__nav__item-option-img:nth-child(2) img, .header-toystory__nav__item-option-box[data-key="buzz"] > .header-toystory__nav__item-option-img:nth-child(2) img { margin-right: auto; margin-left: 0; } .header-toystory__nav__item-option-box:not([data-key="woody"]):not([data-key="buzz"]) > .header-toystory__nav__item-option-img img { margin-left: auto; margin-right: auto; } @media (min-width: 1024px) { .header-toystory__nav__item-option-box { border-radius: 0px 0px 30px 30px; aspect-ratio: 180/170; height: 170px; } .header-toystory__nav__item-option-box[data-key="woody"], .header-toystory__nav__item-option-box[data-key="buzz"] { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; aspect-ratio: 370/170; } } @media (min-width: 1296px) { .header-toystory__nav__item-option-box { height: 170px; } } .header-toystory__nav__item-option-img { position: relative; } .header-toystory__nav__item-option-img::before { content: ''; position: absolute; bottom: 10px; left: 50%; z-index: 1; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 20px; height: 20px; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/nav/arrow.svg"); background-repeat: no-repeat; background-size: 100% 100%; } @media (min-width: 1024px) { .header-toystory__nav__item-option-img::before { bottom: 20px; } } .header-toystory__nav__item-option-img img { width: 150px; height: auto; aspect-ratio: 8/7; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 10px; margin-inline: auto; } @media (min-width: 768px) { .header-toystory__nav__item-option-img img { width: 160px; height: 140px; margin-top: 0; } } @media (min-width: 1024px) { .header-toystory__nav__item-option-img { cursor: pointer; } .header-toystory__nav__item-option-img:hover { -webkit-transition: 0.5s; transition: 0.5s; opacity: 0.4; } .header-toystory__nav__item-option-img:hover img { opacity: 1; } } .header-toystory__nav__item-option-tag { width: 116px; height: 21px; border-radius: 30px; position: absolute; top: 12px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; background-color: #0047BA; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0; } .header-toystory__nav__item-option-tag br { display: none; } .header-toystory__nav__item-option-tag span { color: white; text-align: center; font-family: "Paytone One", sans-serif; font-size: 13px; font-style: normal; font-weight: 400 !important; line-height: normal; letter-spacing: 0.26px; margin-top: -2px; } @media (min-width: 1024px) { .header-toystory__nav__item-option-tag { width: 122px; height: 23px; top: 18px; } .header-toystory__nav__item-option-tag span { font-size: 14px; } } .header-toystory__nav__top-icon { display: none; } @media (min-width: 1024px) { .header-toystory__nav__top-icon { display: block; position: absolute; top: -18px; left: 100px; z-index: 4; -webkit-transform-origin: 45% 60%; transform-origin: 45% 60%; -webkit-animation: lineup_nav_top-icon 3000ms steps(1) 1800ms infinite; animation: lineup_nav_top-icon 3000ms steps(1) 1800ms infinite; } .header-toystory__nav__top-icon img { width: 178px; height: 158.788px; } } .fancybox__container { z-index: 9999; } @media (max-width: 767px) { .fancybox__container .fancybox__slide { padding: 62px 44px; } } .fancybox__container .fancybox__iframe { border: 0; } .fancybox__container .fancybox__content { height: 80vh !important; } .body-toystory__lineup__zone { width: 100%; height: auto; position: relative; z-index: 1; } .body-toystory__lineup__zone[id='woody-1'] { padding-top: 148px; margin-top: -148px; background-color: #e0eff7; } @media (min-width: 768px) { .body-toystory__lineup__zone[id='woody-1'] { padding-top: 198px; } } @media (min-width: 1024px) { .body-toystory__lineup__zone[id='woody-1'] { padding-top: 233px; } } .body-toystory__lineup__zone[id='woody-1'] { padding-bottom: 1px; background-color: #e0eff7; } .body-toystory__lineup__zone[id='woody-2'] { padding-bottom: 312px; background-color: #e0eff7; } .body-toystory__lineup__zone[id='buzz-2'] { padding-bottom: 222px; } .body-toystory__lineup__zone[id='jessie'] { padding-bottom: 244px; } .body-toystory__lineup__zone[id='jessie']::before { content: ''; width: 100%; height: 100%; position: absolute; top: 222px; background-color: #e0eff7; } .body-toystory__lineup__zone[id='rex'] { padding-bottom: 242px; } .body-toystory__lineup__zone[id='rex']::before { content: ''; width: 100%; height: 100%; position: absolute; top: 244px; background-color: white; } .body-toystory__lineup__zone[id='lotso'] { padding-bottom: 192px; } .body-toystory__lineup__zone[id='lotso']::before { content: ''; width: 100%; height: 100%; position: absolute; top: 242px; background-color: #e0eff7; } .body-toystory__lineup__zone[id='aliens'] { padding-bottom: 242px; } .body-toystory__lineup__zone[id='aliens']::before { content: ''; width: 100%; height: 100%; position: absolute; top: 192px; background-color: white; } @media (min-width: 1024px) { .body-toystory__lineup__zone[id='aliens']::before { top: 230px; } } .body-toystory__lineup__zone[id='bo-peep'] { padding-bottom: 272px; } .body-toystory__lineup__zone[id='bo-peep']::before { content: ''; width: 100%; height: 100%; position: absolute; top: 242px; background-color: #e0eff7; } .body-toystory__lineup__zone[id='mr-and-mrs-potato-head'] { padding-bottom: 232px; } .body-toystory__lineup__zone[id='mr-and-mrs-potato-head']::before { content: ''; width: 100%; height: 100%; position: absolute; top: 272px; background-color: white; } .body-toystory__lineup__zone[id='slinky-dog'] { padding-bottom: 0; } .body-toystory__lineup__zone[id='slinky-dog']::before { content: ''; width: 100%; height: 100%; position: absolute; top: 232px; background-color: #e0eff7; } .body-toystory__lineup__zone[id='sid-phillips'] { padding-bottom: 60px; } @media (min-width: 1024px) { .body-toystory__lineup__zone[id='sid-phillips'] { padding-bottom: 80px; } } .body-toystory__lineup__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; max-width: 2770px; margin: 0 auto; } .body-toystory__lineup__header::before { content: ''; position: absolute; width: 492.285px; height: auto; aspect-ratio: 39 / 25; } @media (min-width: 420px) { .body-toystory__lineup__header::before { top: 140px !important; -webkit-transform: scale(1.2); transform: scale(1.2); } } @media (min-width: 445px) { .body-toystory__lineup__header::before { top: 150px !important; -webkit-transform: scale(1.3); transform: scale(1.3); } } @media (min-width: 465px) { .body-toystory__lineup__header::before { top: 160px !important; -webkit-transform: scale(1.4); transform: scale(1.4); } } @media (min-width: 488px) { .body-toystory__lineup__header::before { top: 170px !important; -webkit-transform: scale(1.5); transform: scale(1.5); } } @media (min-width: 517px) { .body-toystory__lineup__header::before { top: 180px !important; left: 0px !important; -webkit-transform: scale(1.6); transform: scale(1.6); } } @media (min-width: 604px) { .body-toystory__lineup__header::before { top: 190px !important; left: 0px !important; -webkit-transform: scale(1.7); transform: scale(1.7); } } @media (min-width: 631px) { .body-toystory__lineup__header::before { left: 39px !important; } } @media (min-width: 668px) { .body-toystory__lineup__header::before { left: 62px !important; } } @media (min-width: 691px) { .body-toystory__lineup__header::before { top: 210px !important; -webkit-transform: scale(1.8); transform: scale(1.8); } } @media (min-width: 704px) { .body-toystory__lineup__header::before { top: 230px !important; -webkit-transform: scale(2); transform: scale(2); } } @media (min-width: 746px) { .body-toystory__lineup__header::before { top: 260px !important; left: 104px !important; -webkit-transform: scale(2.1); transform: scale(2.1); } } @media (min-width: 781px) { .body-toystory__lineup__header::before { width: 1741px; top: 0 !important; aspect-ratio: 209/100; left: 50% !important; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (min-width: 1296px) { .body-toystory__lineup__header::before { -webkit-transform: unset; transform: unset; left: -249px !important; } } @media (min-width: 1446px) { .body-toystory__lineup__header::after { content: ''; position: absolute; width: 1741px; top: 0; right: -200px; aspect-ratio: 209 / 100; z-index: -1; } } @media (min-width: 1954px) { .body-toystory__lineup__header::after { right: -346px; } } @media (min-width: 2450px) { .body-toystory__lineup__header::after { right: -200px; } } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='woody-1'], .body-toystory__lineup__header[data-key='woody-2'] { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .body-toystory__lineup__header[data-key='buzz-1'] { margin-top: -312px; padding-top: 50px; } .body-toystory__lineup__header[data-key='buzz-1']::before, .body-toystory__lineup__header[data-key='buzz-1']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='buzz-1']::before, .body-toystory__lineup__header[data-key='buzz-1']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='buzz-1']::before { left: -74px !important; } @media (min-width: 768px) { .body-toystory__lineup__header[data-key='buzz-1']::before { left: 104px !important; } } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='buzz-1'] { padding-top: 180px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: -165px; } .body-toystory__lineup__header[data-key='buzz-1']::before, .body-toystory__lineup__header[data-key='buzz-1']::after { top: 40px !important; } .body-toystory__lineup__header[data-key='buzz-1']::before { left: 50% !important; } } @media (min-width: 1296px) { .body-toystory__lineup__header[data-key='buzz-1']::before { left: -249px !important; } } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='buzz-2'] { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .body-toystory__lineup__header[data-key='jessie'] { margin-top: -212px; padding-top: 50px; } .body-toystory__lineup__header[data-key='jessie']::before, .body-toystory__lineup__header[data-key='jessie']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-blue_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='jessie']::before, .body-toystory__lineup__header[data-key='jessie']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-blue_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='jessie']::before { left: -74px; } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='jessie'] { padding-top: 100px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-toystory__lineup__header[data-key='jessie']::before, .body-toystory__lineup__header[data-key='jessie']::after { top: 65px !important; } } .body-toystory__lineup__header[data-key='rex'] { margin-top: -244px; padding-top: 50px; } .body-toystory__lineup__header[data-key='rex']::before, .body-toystory__lineup__header[data-key='rex']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='rex']::before, .body-toystory__lineup__header[data-key='rex']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='rex']::before { left: -74px; } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='rex'] { padding-top: 120px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-toystory__lineup__header[data-key='rex']::before, .body-toystory__lineup__header[data-key='rex']::after { top: 20px !important; } } .body-toystory__lineup__header[data-key='lotso'] { margin-top: -242px; padding-top: 50px; } .body-toystory__lineup__header[data-key='lotso']::before, .body-toystory__lineup__header[data-key='lotso']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-blue_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='lotso']::before, .body-toystory__lineup__header[data-key='lotso']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-blue_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='lotso']::before { left: -74px; } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='lotso'] { padding-top: 148px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 120px; } .body-toystory__lineup__header[data-key='lotso']::before, .body-toystory__lineup__header[data-key='lotso']::after { top: 77px !important; } } @media (min-width: 1296px) { .body-toystory__lineup__header[data-key='lotso'] { padding-top: 180px; } .body-toystory__lineup__header[data-key='lotso']::before { left: -363px !important; } } .body-toystory__lineup__header[data-key='aliens'] { margin-top: -192px; padding-top: 50px; } .body-toystory__lineup__header[data-key='aliens']::before, .body-toystory__lineup__header[data-key='aliens']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='aliens']::before, .body-toystory__lineup__header[data-key='aliens']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='aliens']::before { left: -74px !important; } @media (min-width: 768px) { .body-toystory__lineup__header[data-key='aliens']::before { left: 104px !important; } } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='aliens'] { padding-top: 248px; padding-right: 80px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-toystory__lineup__header[data-key='aliens']::before, .body-toystory__lineup__header[data-key='aliens']::after { top: 42px !important; } .body-toystory__lineup__header[data-key='aliens']::before { left: 50% !important; } } @media (min-width: 1296px) { .body-toystory__lineup__header[data-key='aliens']::before { left: -249px !important; } } .body-toystory__lineup__header[data-key='bo-peep'] { margin-top: -242px; padding-top: 50px; } .body-toystory__lineup__header[data-key='bo-peep']::before, .body-toystory__lineup__header[data-key='bo-peep']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-blue_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='bo-peep']::before, .body-toystory__lineup__header[data-key='bo-peep']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-blue_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='bo-peep']::before { left: -74px; } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='bo-peep'] { padding-top: 180px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-toystory__lineup__header[data-key='bo-peep']::before, .body-toystory__lineup__header[data-key='bo-peep']::after { top: 77px !important; } } @media (min-width: 1440px) { .body-toystory__lineup__header[data-key='bo-peep'] { padding-top: 100px; padding-left: 200px; } } .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head'] { margin-top: -272px; padding-top: 50px; } .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head']::before, .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head']::before, .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head']::before { left: -74px; } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head'] { padding-top: 227px; padding-bottom: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head']::before, .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head']::after { top: 44px !important; } } @media (min-width: 1440px) { .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head'] { padding-top: 276px; } } .body-toystory__lineup__header[data-key='slinky-dog'] { margin-top: -232px; padding-top: 50px; } .body-toystory__lineup__header[data-key='slinky-dog']::before, .body-toystory__lineup__header[data-key='slinky-dog']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-blue_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='slinky-dog']::before, .body-toystory__lineup__header[data-key='slinky-dog']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-blue_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='slinky-dog']::before { left: -74px; } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='slinky-dog'] { padding-top: 196px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-toystory__lineup__header[data-key='slinky-dog']::before, .body-toystory__lineup__header[data-key='slinky-dog']::after { top: 78px !important; } } .body-toystory__lineup__header[data-key='sid-phillips'] { margin-top: 0px; padding-top: 50px; } .body-toystory__lineup__header[data-key='sid-phillips']::before, .body-toystory__lineup__header[data-key='sid-phillips']::after { top: 103px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_sp.svg") no-repeat 50%/contain; } @media (min-width: 781px) { .body-toystory__lineup__header[data-key='sid-phillips']::before, .body-toystory__lineup__header[data-key='sid-phillips']::after { background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_pc.svg") no-repeat 50%/contain; } } .body-toystory__lineup__header[data-key='sid-phillips']::before { top: 103px; } @media (min-width: 1024px) { .body-toystory__lineup__header[data-key='sid-phillips'] { padding-top: 213px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-toystory__lineup__header[data-key='sid-phillips']::before, .body-toystory__lineup__header[data-key='sid-phillips']::after { top: 40px !important; } } @media (min-width: 1024px) { .body-toystory__lineup__header { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .body-toystory__lineup__header[data-key='woody-2'], .body-toystory__lineup__header[data-key='buzz-2'], .body-toystory__lineup__header[data-key='rex'], .body-toystory__lineup__header[data-key='aliens'], .body-toystory__lineup__header[data-key='mr-and-mrs-potato-head'], .body-toystory__lineup__header[data-key='sid-phillips'] { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } .body-toystory__lineup__header__img { position: relative; } .body-toystory__lineup__header__img[data-key='woody-1'] { width: calc(23.609px + 10vw); height: calc(82px + 20vw); aspect-ratio: 31 / 79; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='woody-1'] { width: 136.5px; height: 350px; } } .body-toystory__lineup__header__img[data-key='woody-2'] { width: calc(25px + 10vw); height: calc(82px + 20vw); aspect-ratio: 2 / 5; max-width: 100%; margin-top: 50px; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='woody-2'] { width: 136.5px; height: 350px; margin-top: 80px; } } .body-toystory__lineup__header__img[data-key='buzz-1'] { width: calc(70.6px + 10vw); height: calc(82px + 20vw); aspect-ratio: 13 / 19; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='buzz-1'] { width: 239.167px; height: 350px; } } .body-toystory__lineup__header__img[data-key='buzz-2'] { width: calc(69px + 10vw); height: calc(82px + 20vw); aspect-ratio: 195 / 289; max-width: 100%; margin-top: 50px; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='buzz-2'] { width: 236px; height: 350px; margin-top: 80px; margin-left: -200px; } } .body-toystory__lineup__header__img[data-key='jessie'] { width: calc(37.279px + 10vw); height: calc(82px + 20vw); aspect-ratio: 390 / 817; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='jessie'] { width: 166.86px; height: 350px; } } .body-toystory__lineup__header__img[data-key='rex'] { width: calc(103px + 10vw); height: auto; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='rex'] { width: 293.092px; height: auto; } } .body-toystory__lineup__header__img[data-key='lotso'] { width: calc(101px + 10vw); height: auto; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='lotso'] { width: 282px; height: auto; } } .body-toystory__lineup__header__img[data-key='aliens'] { width: calc(171px + 10vw); height: auto; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='aliens'] { width: 257px; height: auto; } } @media (min-width: 1296px) { .body-toystory__lineup__header__img[data-key='aliens'] { width: 340px; } } .body-toystory__lineup__header__img[data-key='bo-peep'] { width: calc(98px + 10vw); height: auto; max-width: 100%; } @media (min-width: 1296px) { .body-toystory__lineup__header__img[data-key='bo-peep'] { width: 298.333px; height: auto; } } .body-toystory__lineup__header__img[data-key='mr-and-mrs-potato-head'] { width: calc(141px + 10vw); height: auto; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='mr-and-mrs-potato-head'] { width: 310.335px; height: auto; } } .body-toystory__lineup__header__img[data-key='slinky-dog'] { width: calc(121px + 10vw); height: auto; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='slinky-dog'] { width: 200px; height: auto; } } @media (min-width: 1296px) { .body-toystory__lineup__header__img[data-key='slinky-dog'] { width: 256.547px; } } .body-toystory__lineup__header__img[data-key='sid-phillips'] { width: calc(147px + 10vw); height: auto; max-width: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__header__img[data-key='sid-phillips'] { width: 315px; height: auto; } } .body-toystory__lineup__header__title { color: rgba(0, 113, 206, .35); text-align: center; font-family: "Paytone One", sans-serif; font-size: 52px; font-style: normal; font-weight: 400 !important; line-height: 48px; margin-top: -35px; margin-bottom: 0; padding: 50px 50px 0 50px; position: relative; } .body-toystory__lineup__header__title::before { content: ''; position: absolute; top: 0; left: 0; width: 88px; height: 50px; background-image: url("https://static.lenskart.com/owndays/img/toystory/lineup/group-star-icon.webp"); background-size: 100% 100%; -webkit-transform: scaleX(-1); transform: scaleX(-1); z-index: 3; } .body-toystory__lineup__header__title[data-key='buzz-1']::before, .body-toystory__lineup__header__title[data-key='buzz-2']::before { top: 12px; left: 44px; } .body-toystory__lineup__header__title[data-key='jessie']::before { top: 6px; left: -9px; } .body-toystory__lineup__header__title[data-key='rex']::before { top: 36px; left: -65px; } .body-toystory__lineup__header__title[data-key='lotso']::before { top: 22px; left: -42px; } .body-toystory__lineup__header__title[data-key='aliens']::before { top: 30px; left: -42px; } .body-toystory__lineup__header__title[data-key='bo-peep'] { white-space: nowrap; } .body-toystory__lineup__header__title[data-key='bo-peep']::before { top: 5px; left: -15px; } .body-toystory__lineup__header__title[data-key='mr-and-mrs-potato-head'] { padding: 50px 25px 0 25px; } .body-toystory__lineup__header__title[data-key='mr-and-mrs-potato-head']::before { top: 12px; left: 6px; } .body-toystory__lineup__header__title[data-key='slinky-dog'] { white-space: nowrap; } .body-toystory__lineup__header__title[data-key='slinky-dog']::before { top: 5px; left: 20px; } .body-toystory__lineup__header__title[data-key='sid-phillips'] { white-space: nowrap; } .body-toystory__lineup__header__title[data-key='sid-phillips']::before { top: 5px; left: 20px; } @media (min-width: 768px) { .body-toystory__lineup__header__title::before { -webkit-transform: scaleX(1); transform: scaleX(1); left: unset; right: 0; opacity: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .body-toystory__lineup__header__title.aos-animate::before { -webkit-animation: starts-fade-in-left 1s ease-out forwards; animation: starts-fade-in-left 1s ease-out forwards; } .body-toystory__lineup__header__title[data-key='woody-1'] { padding: 83px 32px 0 32px; } .body-toystory__lineup__header__title[data-key='woody-1']::before { top: 35%; width: 32%; height: auto; aspect-ratio: 228/130; } .body-toystory__lineup__header__title[data-key='woody-2'] { padding: 60px 32px 0 32px; } .body-toystory__lineup__header__title[data-key='woody-2']::before { top: 15%; left: -113px; right: unset; width: 32%; height: auto; aspect-ratio: 228/130; } .body-toystory__lineup__header__title[data-key='woody-2'].aos-animate::before { -webkit-animation: starts-fade-in-right 1s ease-out forwards; animation: starts-fade-in-right 1s ease-out forwards; } .body-toystory__lineup__header__title[data-key='buzz-2']::before { top: 17px; left: -63px; } .body-toystory__lineup__header__title[data-key='buzz-2'].aos-animate::before { -webkit-animation: starts-fade-in-right 1s ease-out forwards; animation: starts-fade-in-right 1s ease-out forwards; } .body-toystory__lineup__header__title[data-key='rex']::before { top: 36px; left: -168px; } .body-toystory__lineup__header__title[data-key='rex'].aos-animate::before { -webkit-animation: starts-fade-in-right 1s ease-out forwards; animation: starts-fade-in-right 1s ease-out forwards; } .body-toystory__lineup__header__title[data-key='aliens']::before { top: 22px; left: -122px; } .body-toystory__lineup__header__title[data-key='aliens'].aos-animate::before { -webkit-animation: starts-fade-in-right 1s ease-out forwards; animation: starts-fade-in-right 1s ease-out forwards; } .body-toystory__lineup__header__title[data-key='mr-and-mrs-potato-head']::before { left: -100px; } .body-toystory__lineup__header__title[data-key='mr-and-mrs-potato-head'].aos-animate::before { -webkit-animation: starts-fade-in-right 1s ease-out forwards; animation: starts-fade-in-right 1s ease-out forwards; } .body-toystory__lineup__header__title[data-key='slinky-dog'] { white-space: nowrap; } .body-toystory__lineup__header__title[data-key='slinky-dog']::before { top: 5px; left: -103px; } .body-toystory__lineup__header__title[data-key='slinky-dog'].aos-animate::before { -webkit-animation: starts-fade-in-right 1s ease-out forwards; animation: starts-fade-in-right 1s ease-out forwards; } .body-toystory__lineup__header__title[data-key='sid-phillips']::before { left: -100px; } .body-toystory__lineup__header__title[data-key='sid-phillips'].aos-animate::before { -webkit-animation: starts-fade-in-right 1s ease-out forwards; animation: starts-fade-in-right 1s ease-out forwards; } } @media (min-width: 1024px) { .body-toystory__lineup__header__title { font-size: 140px; line-height: 116px; } .body-toystory__lineup__header__title::before { width: 228px; height: 130px; } .body-toystory__lineup__header__title[data-key='woody-1'] { padding: 134px 200px 0 54px; } .body-toystory__lineup__header__title[data-key='woody-1']::before { top: 24%; } .body-toystory__lineup__header__title[data-key='woody-2'] { padding: 179px 60px 0 162px; } .body-toystory__lineup__header__title[data-key='woody-2']::before { top: 35%; left: -147px; } .body-toystory__lineup__header__title[data-key='buzz-1'] { padding: 0; font-size: 110px; line-height: 95px; } .body-toystory__lineup__header__title[data-key='buzz-1']::before { top: 7%; left: unset; right: -160px; } .body-toystory__lineup__header__title[data-key='buzz-2'] { font-size: 110px; line-height: 95px; padding: 179px 0 0 183px; margin-bottom: 46px; margin-right: 195px; } .body-toystory__lineup__header__title[data-key='buzz-2']::before { top: 40%; left: -100px; } .body-toystory__lineup__header__title[data-key='jessie'] { padding: 50px 160px 0 50px; } .body-toystory__lineup__header__title[data-key='jessie']::before { top: -5%; left: unset; right: -32px; } .body-toystory__lineup__header__title[data-key='rex'] { padding: 50px 50px 0 300px; } .body-toystory__lineup__header__title[data-key='rex']::before { top: -10%; left: -42px; } .body-toystory__lineup__header__title[data-key='lotso'] { padding: 50px 292px 0 43px; } .body-toystory__lineup__header__title[data-key='lotso']::before { top: -10%; left: unset; right: 109px; } .body-toystory__lineup__header__title[data-key='aliens'] { padding: 50px 25px 40px 285px; } .body-toystory__lineup__header__title[data-key='aliens']::before { top: -19px; left: -20px; } .body-toystory__lineup__header__title[data-key='bo-peep'] { padding: 50px 155px 8px 34px; } .body-toystory__lineup__header__title[data-key='bo-peep']::before { top: -5%; left: unset; right: 8px; } .body-toystory__lineup__header__title[data-key='mr-and-mrs-potato-head'] { font-size: 92px; line-height: 95px; padding: 50px 25px 0 72px; } .body-toystory__lineup__header__title[data-key='mr-and-mrs-potato-head']::before { top: -11%; left: -105px; } .body-toystory__lineup__header__title[data-key='slinky-dog'] { font-size: 110px; line-height: 116px; padding: 50px 150px 40px 40px; } .body-toystory__lineup__header__title[data-key='slinky-dog']::before { top: -14%; left: unset; right: 7px; } .body-toystory__lineup__header__title[data-key='slinky-dog'].aos-animate::before { -webkit-animation: starts-fade-in-left 1s ease-out forwards; animation: starts-fade-in-left 1s ease-out forwards; } .body-toystory__lineup__header__title[data-key='sid-phillips'] { font-size: 110px; padding: 50px 20px 0 116px; } .body-toystory__lineup__header__title[data-key='sid-phillips']::before { top: -23%; left: -80px; } } @media (min-width: 1296px) { .body-toystory__lineup__header__title[data-key='aliens'] { padding: 50px 50px 60px 375px; } .body-toystory__lineup__header__title[data-key='aliens']::before { top: -19px; left: 59px; } .body-toystory__lineup__header__title[data-key='bo-peep'] { padding: 99px 324px 8px 71px; } .body-toystory__lineup__header__title[data-key='bo-peep']::before { right: 160px; top: 28px; } .body-toystory__lineup__header__title[data-key='mr-and-mrs-potato-head'] { padding: 50px 25px 0 300px; } .body-toystory__lineup__header__title[data-key='mr-and-mrs-potato-head']::before { top: 12%; left: -19px; } .body-toystory__lineup__header__title[data-key='slinky-dog'] { font-size: 120px; line-height: 116px; padding: 50px 258px 40px 43px; } .body-toystory__lineup__header__title[data-key='slinky-dog']::before { top: -20%; left: unset; right: 98px; } .body-toystory__lineup__header__title[data-key='sid-phillips'] { font-size: 120px; padding: 50px 32px 0 290px; } .body-toystory__lineup__header__title[data-key='sid-phillips']::before { top: -37%; left: 29px; } } .body-toystory__lineup__header__text-sp { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; margin-top: 14px; position: relative; } @media (min-width: 1024px) { .body-toystory__lineup__header__text-sp { display: none; } } .body-toystory__lineup__header__text-pc { display: none; } @media (min-width: 1024px) { .body-toystory__lineup__header__text-pc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } } .body-toystory__lineup__header__product-numbers, .body-toystory__lineup__header__price { color: black; font-family: "Paytone One", sans-serif; font-style: normal; font-weight: 400 !important; line-height: normal; margin-bottom: 0; } .body-toystory__lineup__header__product-numbers { font-size: 24px; letter-spacing: 0.48px; } @media (min-width: 1024px) { .body-toystory__lineup__header__product-numbers { font-size: 30px; letter-spacing: 0.6px; } } .body-toystory__lineup__header__price { font-size: 16px; letter-spacing: 0.32px; margin-top: 3px; } @media (min-width: 1024px) { .body-toystory__lineup__header__price { font-size: 18px; letter-spacing: 0.36px; margin-top: 5px; } } .body-toystory__lineup__body { margin: 40px 0 0 0; } @media (min-width: 1024px) { .body-toystory__lineup__body { margin: 48px 0 0 0; } } .body-toystory__lineup__body__layout { padding: 0 20px; max-width: 1155px; margin: 0 auto; } @media (min-width: 1024px) { .body-toystory__lineup__body__layout { display: grid; grid-template-columns: 500px 1fr; } .body-toystory__lineup__body__layout[data-key='woody-2'], .body-toystory__lineup__body__layout[data-key='buzz-2'], .body-toystory__lineup__body__layout[data-key='rex'], .body-toystory__lineup__body__layout[data-key='aliens'], .body-toystory__lineup__body__layout[data-key='mr-and-mrs-potato-head'], .body-toystory__lineup__body__layout[data-key='sid-phillips'] { grid-template-columns: 1fr 500px; } } @media (min-width: 1296px) { .body-toystory__lineup__body__layout { padding: 0; } .body-toystory__lineup__body__layout[data-key='woody-1'] { padding-bottom: 40px; } } .body-toystory__lineup__body__preview { width: calc(100% + 40px); margin: 0 -20px; height: auto; position: relative; } @media (min-width: 1024px) { .body-toystory__lineup__body__preview { width: calc(100% + 20px); margin: -46px 0 0 0; } .body-toystory__lineup__body__preview[data-key='woody-1'], .body-toystory__lineup__body__preview[data-key='buzz-1'], .body-toystory__lineup__body__preview[data-key='jessie'], .body-toystory__lineup__body__preview[data-key='lotso'], .body-toystory__lineup__body__preview[data-key='bo-peep'], .body-toystory__lineup__body__preview[data-key='slinky-dog'] { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } .body-toystory__lineup__body__preview[data-key='buzz-1'] { margin-top: -14px; } .body-toystory__lineup__body__preview[data-key='woody-2'], .body-toystory__lineup__body__preview[data-key='buzz-2'], .body-toystory__lineup__body__preview[data-key='rex'], .body-toystory__lineup__body__preview[data-key='aliens'], .body-toystory__lineup__body__preview[data-key='mr-and-mrs-potato-head'], .body-toystory__lineup__body__preview[data-key='sid-phillips'] { margin-left: -20px; } } @media (min-width: 1295px) { .body-toystory__lineup__body__preview { width: calc(100% + -374.41379px + 35.86207vw); } .body-toystory__lineup__body__preview[data-key='woody-2'], .body-toystory__lineup__body__preview[data-key='buzz-2'], .body-toystory__lineup__body__preview[data-key='rex'], .body-toystory__lineup__body__preview[data-key='aliens'], .body-toystory__lineup__body__preview[data-key='mr-and-mrs-potato-head'], .body-toystory__lineup__body__preview[data-key='sid-phillips'] { margin-left: calc(374.41379px - 35.86207vw); } } @media (min-width: 1440px) { .body-toystory__lineup__body__preview { width: calc(100% + 142px); } .body-toystory__lineup__body__preview[data-key='woody-2'], .body-toystory__lineup__body__preview[data-key='buzz-2'], .body-toystory__lineup__body__preview[data-key='rex'], .body-toystory__lineup__body__preview[data-key='aliens'], .body-toystory__lineup__body__preview[data-key='mr-and-mrs-potato-head'], .body-toystory__lineup__body__preview[data-key='sid-phillips'] { margin-left: -142px; } } .body-toystory__lineup__body__preview-img { width: 100%; height: auto; } .body-toystory__lineup__body__preview-img[data-key='woody-1'], .body-toystory__lineup__body__preview-img[data-key='buzz-1'], .body-toystory__lineup__body__preview-img[data-key='jessie'], .body-toystory__lineup__body__preview-img[data-key='lotso'], .body-toystory__lineup__body__preview-img[data-key='bo-peep'], .body-toystory__lineup__body__preview-img[data-key='slinky-dog'] { padding-left: 40px; } .body-toystory__lineup__body__preview-img[data-key='woody-2'], .body-toystory__lineup__body__preview-img[data-key='buzz-2'], .body-toystory__lineup__body__preview-img[data-key='rex'], .body-toystory__lineup__body__preview-img[data-key='aliens'], .body-toystory__lineup__body__preview-img[data-key='mr-and-mrs-potato-head'], .body-toystory__lineup__body__preview-img[data-key='sid-phillips'] { padding-right: 40px; } @media (min-width: 1296px) { .body-toystory__lineup__body__preview-img[data-key='woody-2'], .body-toystory__lineup__body__preview-img[data-key='buzz-2'], .body-toystory__lineup__body__preview-img[data-key='rex'], .body-toystory__lineup__body__preview-img[data-key='aliens'], .body-toystory__lineup__body__preview-img[data-key='mr-and-mrs-potato-head'], .body-toystory__lineup__body__preview-img[data-key='sid-phillips'] { margin-left: 0; } } @media (min-width: 1024px) { .body-toystory__lineup__body__preview-img { width: 100%; max-width: 620px; } .body-toystory__lineup__body__preview-img[data-key='woody-1'], .body-toystory__lineup__body__preview-img[data-key='buzz-1'], .body-toystory__lineup__body__preview-img[data-key='jessie'], .body-toystory__lineup__body__preview-img[data-key='bo-peep'], .body-toystory__lineup__body__preview-img[data-key='slinky-dog'] { margin-left: auto; } } .body-toystory__lineup__body__preview-icon { width: 100%; max-width: 41px; margin: 0 auto; margin-top: -12px; } @media (min-width: 768px) { .body-toystory__lineup__body__preview-icon { max-width: 60px; margin-top: -6px; } } .body-toystory__lineup__body__preview-logo { position: absolute; bottom: 20px; right: 20px; width: 110px; height: 110px; z-index: 2; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/bg-blue-circle.webp"); background-repeat: no-repeat; background-size: 100% 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; } .body-toystory__lineup__body__preview-logo p { color: white; text-align: center; font-family: "Paytone One", sans-serif; font-size: 13.497px; font-style: normal; font-weight: 400 !important; line-height: 14.847px; letter-spacing: 0.405px; margin-bottom: 0; } .body-toystory__lineup__body__preview-logo p:nth-child(1) { position: relative; } .body-toystory__lineup__body__preview-logo p:nth-child(1)::before { content: ''; position: absolute; bottom: -6.5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 4; width: 80.982px; height: 1.35px; background-color: #f9c600; } @media (min-width: 768px) { .body-toystory__lineup__body__preview-logo { bottom: 24px; width: 163px; height: 163px; } .body-toystory__lineup__body__preview-logo p { font-size: 20px; line-height: 22px; letter-spacing: 0.6px; } } @media (min-width: 1024px) { .body-toystory__lineup__body__preview-logo { bottom: 103px; } .body-toystory__lineup__body__preview-logo[data-key='buzz-1'] { bottom: 20px; } } @media (min-width: 1295px) { .body-toystory__lineup__body__preview-logo { right: 64px; bottom: 20px; } .body-toystory__lineup__body__preview-logo[data-key='buzz-1'] { bottom: 20px; } } @media (min-width: 1296px) { .body-toystory__lineup__body__preview-logo { right: 64px; bottom: 27px; } .body-toystory__lineup__body__preview-logo[data-key='buzz-1'] { bottom: 20px; } } @media (min-width: 1024px) { .body-toystory__lineup__body__content { width: 500px; height: auto; padding-right: 20px; } .body-toystory__lineup__body__content[data-key='woody-2'] { padding-right: 0px; padding-left: 20px; } } .body-toystory__lineup__body__desc { color: black; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 26px; letter-spacing: 0; padding: 20px 0 40px 0; margin-bottom: 0; position: relative; } .body-toystory__lineup__body__desc[data-key='woody-1'] br:nth-child(2) { display: none; } .body-toystory__lineup__body__desc[data-key='bo-peep'] br:nth-child(4), .body-toystory__lineup__body__desc[data-key='bo-peep'] br:nth-child(6) { display: none; } .body-toystory__lineup__body__desc[data-key='slinky-dog'] br:nth-child(4) { display: none; } @media (min-width: 768px) { .body-toystory__lineup__body__desc { padding: 20px 0 60px 0; } } @media (min-width: 1024px) { .body-toystory__lineup__body__desc { line-height: 30px; padding: 16px 0 30px 0; } .body-toystory__lineup__body__desc[data-key='woody-1'] br:nth-child(2) { display: block; } .body-toystory__lineup__body__desc[data-key='woody-1'] br:nth-child(4) { display: none; } .body-toystory__lineup__body__desc[data-key='woody-2'] br:nth-child(1), .body-toystory__lineup__body__desc[data-key='woody-2'] br:nth-child(3) { display: none; } .body-toystory__lineup__body__desc[data-key='buzz-1'] br:nth-child(1), .body-toystory__lineup__body__desc[data-key='buzz-1'] br:nth-child(2), .body-toystory__lineup__body__desc[data-key='buzz-1'] br:nth-child(3), .body-toystory__lineup__body__desc[data-key='buzz-1'] br:nth-child(5), .body-toystory__lineup__body__desc[data-key='buzz-1'] br:nth-child(6), .body-toystory__lineup__body__desc[data-key='buzz-1'] br:nth-child(8) { display: none; } .body-toystory__lineup__body__desc[data-key='jessie'] br:nth-child(1), .body-toystory__lineup__body__desc[data-key='jessie'] br:nth-child(3) { display: none; } .body-toystory__lineup__body__desc[data-key='rex'] br:nth-child(1), .body-toystory__lineup__body__desc[data-key='rex'] br:nth-child(2), .body-toystory__lineup__body__desc[data-key='rex'] br:nth-child(3), .body-toystory__lineup__body__desc[data-key='rex'] br:nth-child(4), .body-toystory__lineup__body__desc[data-key='rex'] br:nth-child(5), .body-toystory__lineup__body__desc[data-key='rex'] br:nth-child(6) { display: none; } .body-toystory__lineup__body__desc[data-key='lotso'] br:nth-child(2) { display: none; } .body-toystory__lineup__body__desc[data-key='aliens'] br:nth-child(1), .body-toystory__lineup__body__desc[data-key='aliens'] br:nth-child(4), .body-toystory__lineup__body__desc[data-key='aliens'] br:nth-child(5), .body-toystory__lineup__body__desc[data-key='aliens'] br:nth-child(6) { display: none; } .body-toystory__lineup__body__desc[data-key='bo-peep'] br:nth-child(1), .body-toystory__lineup__body__desc[data-key='bo-peep'] br:nth-child(5) { display: none; } .body-toystory__lineup__body__desc[data-key='bo-peep'] br:nth-child(6) { display: block; } .body-toystory__lineup__body__desc[data-key='slinky-dog'] br:nth-child(1), .body-toystory__lineup__body__desc[data-key='slinky-dog'] br:nth-child(3) { display: none; } .body-toystory__lineup__body__desc[data-key='slinky-dog'] br:nth-child(4) { display: block; } } .body-toystory__lineup__body__points { width: calc(100% + 40px); margin: 0 -20px !important; height: auto; position: relative; z-index: 8; cursor: -webkit-grab; cursor: grab; } .body-toystory__lineup__body__points > .slick-list { margin: 0 -15px; } .body-toystory__lineup__body__points > .slick-dots { list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin: 18px 0 0 0; } .body-toystory__lineup__body__points > .slick-dots > li, .body-toystory__lineup__body__points > .slick-dots > li > button, .body-toystory__lineup__body__points > .slick-dots > li > button::before { width: 12px; height: 12px; } .body-toystory__lineup__body__points > .slick-dots > li { margin: 0 7px; } .body-toystory__lineup__body__points > .slick-dots > li > button { color: transparent; } .body-toystory__lineup__body__points > .slick-dots > li > button { content: ''; background-color: #c2e0ee; border-radius: 50%; opacity: 1; border: none; padding: 0; } .body-toystory__lineup__body__points > .slick-dots > li.slick-active > button { background-color: #0047ba; opacity: 1; } @media (min-width: 768px) { .body-toystory__lineup__body__points { width: 100%; margin: 0; padding-top: 19px; width: 100%; margin: 0 !important; } .body-toystory__lineup__body__points > .slick-list { margin: 0 -20px; } .body-toystory__lineup__body__points > .slick-dots { position: absolute; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; bottom: -26px; left: calc(50% - 100px); -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: left; } } @media (min-width: 1024px) { .body-toystory__lineup__body__points { width: 100%; margin: 0; padding-top: 19px; width: 100%; margin: 0 !important; } .body-toystory__lineup__body__points > .slick-dots { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; bottom: -26px; left: 40px; -webkit-transform: unset; transform: unset; } } @media (min-width: 1296px) { .body-toystory__lineup__body__points > .slick-dots { left: 55px; } .body-toystory__lineup__body__points > .slick-dots > li, .body-toystory__lineup__body__points > .slick-dots > li > button, .body-toystory__lineup__body__points > .slick-dots > li > button::before { width: 15px; height: 15px; } .body-toystory__lineup__body__points > .slick-dots > li { margin: 0 9px; } } .body-toystory__lineup__body__point-sp { position: relative; width: 100%; max-width: 230px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 15px; } @media (min-width: 768px) { .body-toystory__lineup__body__point-sp { display: none; } } .body-toystory__lineup__body__point-pc { display: none; } @media (min-width: 768px) { .body-toystory__lineup__body__point-pc { display: grid; grid-template-columns: 250px 160px; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-toystory__lineup__body__point-pc > div { margin: auto; } } @media (min-width: 1024px) { .body-toystory__lineup__body__point-pc { grid-template-columns: 200px 160px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (min-width: 1296px) { .body-toystory__lineup__body__point-pc { grid-template-columns: 250px 160px; } } .body-toystory__lineup__body__point-img { width: 200px; height: 200px; aspect-ratio: 1 / 1; } @media (min-width: 768px) { .body-toystory__lineup__body__point-img { width: 250px; height: 250px; position: relative; z-index: 1; } } @media (min-width: 1024px) { .body-toystory__lineup__body__point-img { width: 200px; height: 200px; } } @media (min-width: 1296px) { .body-toystory__lineup__body__point-img { width: 250px; height: 250px; } } .body-toystory__lineup__body__point-tag { position: absolute; top: 178px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 164px; height: 38px; background-color: #c2e0ee; border-radius: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 0; } .body-toystory__lineup__body__point-tag span { color: #0047ba; text-align: center; font-family: "Paytone One", sans-serif; font-size: 24px; font-style: normal; font-weight: 400 !important; line-height: normal; letter-spacing: 1.2px; } @media (min-width: 768px) { .body-toystory__lineup__body__point-tag { position: relative; top: unset; left: unset; -webkit-transform: unset; transform: unset; } .body-toystory__lineup__body__point-tag::before { content: ''; position: absolute; top: 50%; left: 0; translate: -100% -50%; width: 120px; border-top: 3px dotted #c2e0ee; } } .body-toystory__lineup__body__point-desc { margin-top: 34px; color: black; text-align: center; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 22px; letter-spacing: 0; margin-bottom: 0; } @media (min-width: 1024px) { .body-toystory__lineup__body__point-desc { margin-top: 10px; line-height: 25px; text-align: left; width: 100%; max-width: 160px; } } .body-toystory__lineup__footer { margin-top: 70px; } @media (min-width: 768px) { .body-toystory__lineup__footer { margin-top: 100px; } } @media (min-width: 1024px) { .body-toystory__lineup__footer { margin-top: 70px; } } .body-toystory__lineup__footer__glasses { cursor: -webkit-grab; cursor: grab; position: relative; } .body-toystory__lineup__footer__glasses__item { width: 100%; max-width: 330px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 10px; } .body-toystory__lineup__footer__glasses__item img { width: 100%; min-width: 310px; height: 100%; } @media (min-width: 1024px) { .body-toystory__lineup__footer__glasses__item { max-width: 680px; padding: 0 25px; } .body-toystory__lineup__footer__glasses__item img { min-width: 630px; } } .body-toystory__lineup__footer__glasses > .slick-list { margin: 0 -20px; } .body-toystory__lineup__footer__glasses > .slick-dots { list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin: 18px 0 0 0; } .body-toystory__lineup__footer__glasses > .slick-dots > li, .body-toystory__lineup__footer__glasses > .slick-dots > li > button, .body-toystory__lineup__footer__glasses > .slick-dots > li > button::before { width: 12px; height: 12px; } .body-toystory__lineup__footer__glasses > .slick-dots > li { margin: 0 7.5px; } .body-toystory__lineup__footer__glasses > .slick-dots > li > button { color: transparent; } .body-toystory__lineup__footer__glasses > .slick-dots > li > button { content: ''; background-color: #c2e0ee; border-radius: 50%; opacity: 1; border: none; padding: 0; } .body-toystory__lineup__footer__glasses > .slick-dots > li.slick-active { position: relative; margin: 0 17px 0 4px; } .body-toystory__lineup__footer__glasses > .slick-dots > li.slick-active > button { content: ''; width: 25px; height: 25px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/blue-start-icon.webp"); background-repeat: no-repeat; background-size: 100% 100%; opacity: 1; position: absolute; top: -8px; } .body-toystory__lineup__footer__glasses > .slick-arrow { width: 30px; height: 30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; border: none; display: block; width: 30px; height: 30px; opacity: 1; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/next-icon.svg") center/100% no-repeat; font: 0/0 a; outline: none; } @media (min-width: 1024px) { .body-toystory__lineup__footer__glasses > .slick-arrow { cursor: pointer; } } .body-toystory__lineup__footer__glasses > .slick-prev, .body-toystory__lineup__footer__glasses > .slick-next { position: absolute; } .body-toystory__lineup__footer__glasses > .slick-prev { top: calc(50% - 45px); left: calc(50% - 183px); -webkit-transform: rotate(180deg) translate(-50%, -50%); transform: rotate(180deg) translate(-50%, -50%); } .body-toystory__lineup__footer__glasses > .slick-next { top: calc(50% - 15px); right: calc(50% - 183px); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 1024px) { .body-toystory__lineup__footer__glasses > .slick-list { margin: 0 -100px; } .body-toystory__lineup__footer__glasses > .slick-dots { bottom: -30px; } .body-toystory__lineup__footer__glasses > .slick-dots > li, .body-toystory__lineup__footer__glasses > .slick-dots > li > button, .body-toystory__lineup__footer__glasses > .slick-dots > li > button::before { width: 15px; height: 15px; } .body-toystory__lineup__footer__glasses > .slick-dots > li { margin: 0 9px; } .body-toystory__lineup__footer__glasses > .slick-dots .slick-active { margin: 0 32px 0 6px; } .body-toystory__lineup__footer__glasses > .slick-dots > li.slick-active > button::before { width: 40px; height: 40px; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/blue-start-icon.webp"); background-repeat: no-repeat; background-size: 100% 100%; opacity: 1; top: -13px; } .body-toystory__lineup__footer__glasses > .slick-arrow { width: 60px; height: 60px; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .body-toystory__lineup__footer__glasses > .slick-arrow:hover { opacity: 0.6; } .body-toystory__lineup__footer__glasses > .slick-arrow::before { width: 60px; height: 60px; } .body-toystory__lineup__footer__glasses > .slick-prev { top: calc(50% - 90px); left: calc(50% - 375px); } .body-toystory__lineup__footer__glasses > .slick-next { top: calc(50% - 30px); right: calc(50% - 375px); } } .body-toystory__lineup__footer__button { margin-top: 48px; padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 1024px) { .body-toystory__lineup__footer__button { margin-top: 68px; } } @-webkit-keyframes starts-fade-in-left { 0% { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes starts-fade-in-left { 0% { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes starts-fade-in-right { 0% { opacity: 0; -webkit-transform: translateX(0) scaleX(-1); transform: translateX(0) scaleX(-1); } 100% { opacity: 1; -webkit-transform: translateX(100px) scaleX(-1); transform: translateX(100px) scaleX(-1); } } @keyframes starts-fade-in-right { 0% { opacity: 0; -webkit-transform: translateX(0) scaleX(-1); transform: translateX(0) scaleX(-1); } 100% { opacity: 1; -webkit-transform: translateX(100px) scaleX(-1); transform: translateX(100px) scaleX(-1); } } @-webkit-keyframes lineup_nav_top-icon { 0% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 16% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 24%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes lineup_nav_top-icon { 0% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 16% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 24%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @charset "UTF-8"; .footer-toystory__exclusive { position: relative; } .footer-toystory__exclusive::before { content: ''; width: calc(62px + 10vw); height: calc(-13px + 20vw); position: absolute; top: -1.5%; left: 20px; z-index: 1; background-image: url("https://static.lenskart.com/owndays/img/toystory/exclusive/exclusive-figure-1.svg"); background-repeat: no-repeat; background-size: 100% 100%; -webkit-animation: lineup_nav_top-icon 3000ms steps(1) 1800ms infinite; animation: lineup_nav_top-icon 3000ms steps(1) 1800ms infinite; } @media (min-width: 768px) { .footer-toystory__exclusive::before { top: -3%; } } @media (min-width: 1024px) { .footer-toystory__exclusive::before { top: -6%; } } @media (min-width: 1296px) { .footer-toystory__exclusive::before { width: 210.78px; height: 135px; left: 122px; top: -66px; } } .footer-toystory__exclusive__bg { width: 100%; height: auto; background-image: url("https://static.lenskart.com/owndays/img/toystory/exclusive/exclusive-bg_sp.webp"); position: relative; } @media (min-width: 768px) { .footer-toystory__exclusive__bg { background-image: url("https://static.lenskart.com/owndays/img/toystory/exclusive/exclusive-bg_pc.webp"); } } .footer-toystory__exclusive__container { width: 100%; max-width: 1155px; height: auto; padding: 60px 20px 87px 20px; margin: 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .footer-toystory__exclusive__container .base-toystory__title br { display: none; } } @media (min-width: 645px) { .footer-toystory__exclusive__container { padding-bottom: 127px; } } @media (min-width: 1024px) { .footer-toystory__exclusive__container { padding: 150px 20px 140px 20px; } } @media (min-width: 1296px) { .footer-toystory__exclusive__container { padding: 150px 20px 180px 20px; } } .footer-toystory__exclusive__desc { color: black; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 26px; padding: 28px 20px 20px 20px; margin: 0 auto; } @media (min-width: 1024px) { .footer-toystory__exclusive__desc { width: 100%; height: auto; max-width: 600px; font-size: 14px; line-height: 30px; padding: 56px 0 68px 0; } } .footer-toystory__exclusive__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media (min-width: 1024px) { .footer-toystory__exclusive__content { max-width: 100%; display: grid; grid-template-columns: calc(50% - 10px) calc(50% - 10px); } } .footer-toystory__exclusive__list > .slick-list .slick-slide { aspect-ratio: 310 / 240; } .footer-toystory__exclusive__list > .slick-list .slick-slide li { aspect-ratio: 310 / 240; outline: none; } .footer-toystory__exclusive__list > .slick-list .slick-slide img { aspect-ratio: inherit; } .footer-toystory__exclusive__list > .slick-dots { list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin: 18px 0 0 0; } .footer-toystory__exclusive__list > .slick-dots > li, .footer-toystory__exclusive__list > .slick-dots > li > button, .footer-toystory__exclusive__list > .slick-dots > li > button::before { width: 12px; height: 12px; } .footer-toystory__exclusive__list > .slick-dots > li { margin: 0 7px; } .footer-toystory__exclusive__list > .slick-dots > li > button { color: transparent; } .footer-toystory__exclusive__list > .slick-dots > li > button { content: ''; background-color: #c2e0ee; border-radius: 50%; opacity: 1; border: none; } .footer-toystory__exclusive__list > .slick-dots > li.slick-active > button { background-color: #0047ba; opacity: 1; } .footer-toystory__exclusive__card { width: 100%; height: auto; padding: 25px 20px 35px 20px; background-color: white; border-radius: 10px; position: relative; } @media (min-width: 1024px) { .footer-toystory__exclusive__card { border-radius: 3px; padding: 40px 40px 80px 40px; } } .footer-toystory__exclusive__card::before { content: ''; z-index: 1; background-repeat: no-repeat; background-size: 100% 100%; position: absolute; } .footer-toystory__exclusive__card--start-icon { width: calc(21px + 10vw); height: auto; position: relative; bottom: 30px; left: calc(100% - 21px - 10vw); } @media (min-width: 1024px) { .footer-toystory__exclusive__card--start-icon { width: 140px; left: -63px; bottom: -193px; } } .footer-toystory__exclusive__card--start-icon::before { content: ''; z-index: 1; position: absolute; width: calc(21px + 10vw); height: calc(20.998px + 10vw); background-repeat: no-repeat; background-size: 100% 100%; background-image: url("https://static.lenskart.com/owndays/img/toystory/exclusive/exclusive-figure-3.svg"); } @media (min-width: 1100px) { .footer-toystory__exclusive__card--start-icon { position: absolute; left: -78px; bottom: -90px; width: 150px; height: 150px; } .footer-toystory__exclusive__card--start-icon::before { width: 100%; height: 100%; } } .footer-toystory__exclusive__card:nth-child(2)::before { width: calc(26px + 10vw); height: calc(-4px + 20vw); bottom: -9%; left: 5px; -webkit-transform: scaleX(-1); transform: scaleX(-1); background-image: url("https://static.lenskart.com/owndays/img/toystory/exclusive/exclusive-figure-2.svg"); } @media (min-width: 425px) { .footer-toystory__exclusive__card:nth-child(2)::before { bottom: -11%; } } @media (min-width: 768px) { .footer-toystory__exclusive__card:nth-child(2)::before { bottom: -15%; } } @media (min-width: 1024px) { .footer-toystory__exclusive__card:nth-child(2)::before { -webkit-transform: scaleX(1); transform: scaleX(1); bottom: unset; left: unset; top: -140px; right: -13px; } } @media (min-width: 1296px) { .footer-toystory__exclusive__card:nth-child(2)::before { width: 140px; height: 160px; top: -93px; right: -83px; } } .footer-toystory__exclusive__card__title { color: black; text-align: center; font-family: "Paytone One", sans-serif; font-size: 28px; font-style: normal; font-weight: 400; line-height: 30px; padding-top: 20px; margin-bottom: 10px; } @media (min-width: 1024px) { .footer-toystory__exclusive__card__title { font-size: 32px; } } .footer-toystory__exclusive__card__desc { color: black; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 24px; margin-bottom: 0; } @media (min-width: 1024px) { .footer-toystory__exclusive__card__desc { line-height: 30px; } } .footer-toystory__exclusive__card__img { border-radius: 30px; width: 100%; height: auto; } .footer-toystory__exclusive__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; padding: 70px 0; } @media (min-width: 768px) { .footer-toystory__exclusive__buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 100px 0; } } @media (min-width: 1024px) { .footer-toystory__exclusive__buttons { gap: 40px; position: relative; } .footer-toystory__exclusive__buttons::before { content: ''; position: absolute; bottom: 0; right: -46px; width: 110.53px; height: 113.511px; background-image: url("https://static.lenskart.com/owndays/img/toystory/exclusive/exclusive-figure-4.svg"); background-repeat: no-repeat; background-size: 100% 100%; } } .footer-toystory__share { position: relative; } .footer-toystory__share__container { position: relative; top: -87px; padding-top: 40px !important; background-color: transparent; } @media (min-width: 420px) { .footer-toystory__share__container { top: -58px; padding-top: 70px !important; } } @media (min-width: 445px) { .footer-toystory__share__container { padding-top: 85px !important; } } @media (min-width: 604px) { .footer-toystory__share__container { padding-top: 100px !important; } } @media (min-width: 1024px) { .footer-toystory__share__container { top: -87px; padding-top: 164px !important; max-width: none !important; } } .footer-toystory__share__container::before { content: ''; position: absolute; width: 536.44px; height: auto; aspect-ratio: 39 / 25; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_sp.svg") no-repeat 50%/contain; top: -50px; left: -78px; } @media (min-width: 420px) { .footer-toystory__share__container::before { top: -6px; -webkit-transform: scale(1.2); transform: scale(1.2); } } @media (min-width: 445px) { .footer-toystory__share__container::before { top: 13px; -webkit-transform: scale(1.3); transform: scale(1.3); } } @media (min-width: 465px) { .footer-toystory__share__container::before { top: 30px; -webkit-transform: scale(1.4); transform: scale(1.4); } } @media (min-width: 488px) { .footer-toystory__share__container::before { top: 46px; -webkit-transform: scale(1.5); transform: scale(1.5); } } @media (min-width: 517px) { .footer-toystory__share__container::before { top: 57px; left: 0px !important; -webkit-transform: scale(1.6); transform: scale(1.6); } } @media (min-width: 604px) { .footer-toystory__share__container::before { top: 80px; left: 0px !important; -webkit-transform: scale(1.7); transform: scale(1.7); } } @media (min-width: 631px) { .footer-toystory__share__container::before { left: 39px !important; } } @media (min-width: 668px) { .footer-toystory__share__container::before { left: 62px !important; } } @media (min-width: 691px) { .footer-toystory__share__container::before { -webkit-transform: scale(1.8); transform: scale(1.8); } } @media (min-width: 704px) { .footer-toystory__share__container::before { top: 90px; -webkit-transform: scale(2); transform: scale(2); } } @media (min-width: 746px) { .footer-toystory__share__container::before { top: 107px; left: 104px !important; -webkit-transform: scale(2.1); transform: scale(2.1); } } @media (min-width: 781px) { .footer-toystory__share__container::before { width: 1741px; top: -146px; aspect-ratio: 209/100; left: 50% !important; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_pc.svg") no-repeat 50%/contain; } } @media (min-width: 1024px) { .footer-toystory__share__container::before { top: -94px; } } @media (min-width: 1296px) { .footer-toystory__share__container::before { -webkit-transform: unset; transform: unset; left: -249px !important; } } @media (min-width: 1446px) { .footer-toystory__share__container::after { content: ''; position: absolute; width: 1741px; top: -94px; right: -200px; aspect-ratio: 209 / 100; z-index: 0; background: url("https://static.lenskart.com/owndays/img/toystory/lineup/top-white_pc.svg") no-repeat 50%/contain; } } @media (min-width: 1954px) { .footer-toystory__share__container::after { right: -346px; } } @media (min-width: 2450px) { .footer-toystory__share__container::after { right: -200px; } } .footer-toystory__share__list, .footer-toystory__share__socials__layout, .footer-toystory__share__socials__copyright, .footer-toystory__share__footer { position: relative; z-index: 2; } .footer-toystory__share__list { width: 100%; height: auto; max-width: 574px; list-style-type: none; padding-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; } .footer-toystory__share__list li { color: black; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 26px; padding-left: 1em; position: relative; } .footer-toystory__share__list li::before { content: '•'; position: absolute; top: 0; left: 0; } @media (min-width: 768px) { .footer-toystory__share__list li { line-height: 30px; } } .footer-toystory__share__socials__layout { padding-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 1024px) { .footer-toystory__share__socials__layout { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 60px; padding: 80px 0 32px 0; } .footer-toystory__share__socials__layout .base-toystory__title { margin-top: -7px; } } .footer-toystory__share__socials__icons { list-style-type: none; padding: 0; margin-bottom: 0; display: grid; grid-template-columns: repeat(2, 32px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; padding: 24px 0 44px 0; } .footer-toystory__share__socials__icons li a { font-family: 'Font Awesome 6 Brands'; font-size: 32px; color: transparent; display: block; width: 32px; height: 32px; } .footer-toystory__share__socials__icons li a i { background: transparent; } .footer-toystory__share__socials__icons li:nth-child(1) a { position: relative; } .footer-toystory__share__socials__icons li:nth-child(1) a i { color: #0047ba; position: absolute; top: 0; } .footer-toystory__share__socials__icons li:nth-child(2) { width: 32px; height: 32px; position: relative; } .footer-toystory__share__socials__icons li:nth-child(2) a { color: white; position: relative; } .footer-toystory__share__socials__icons li:nth-child(2) a i { font-size: 22.23px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .footer-toystory__share__socials__icons li:nth-child(2) a::before { position: absolute; content: ''; width: 32px; height: 32px; background-color: #0047ba; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } @media (min-width: 1024px) { .footer-toystory__share__socials__icons { padding: 0; gap: 30px; grid-template-columns: repeat(2, 50px); } .footer-toystory__share__socials__icons li a { font-size: 50px; width: 50px; height: 50px; } .footer-toystory__share__socials__icons li:nth-child(1):hover i { -webkit-transition: 0.3s; transition: 0.3s; color: #f9c600; } .footer-toystory__share__socials__icons li:nth-child(2) { width: 50px; height: 50px; position: relative; } .footer-toystory__share__socials__icons li:nth-child(2) a i { font-size: 32px; } .footer-toystory__share__socials__icons li:nth-child(2) a::before { width: 50px; height: 50px; } .footer-toystory__share__socials__icons li:nth-child(2):hover a::before { -webkit-transition: 0.3s; transition: 0.3s; background-color: #f9c600; } } .footer-toystory__share__socials__copyright { width: 123px; height: auto; margin: 0 auto; } @media (min-width: 768px) { .footer-toystory__share__socials__copyright { width: 130px; } } .footer-toystory__share__footer { width: 100%; height: auto; padding: 20px 0 10px 0; } @media (min-width: 768px) { .footer-toystory__share__footer { padding: 23px 0 65px 0; } } .footer-toystory__navs-sticky { position: relative; bottom: 0; width: 100%; height: 55px; z-index: 8; } @media (max-width: 767px) { .footer-toystory__navs-sticky .base-toystory__hide--pc { display: -webkit-box; display: -ms-flexbox; display: flex; } .footer-toystory__navs-sticky .base-toystory__btn--primary { width: 150px !important; height: 55px; border-radius: 0; white-space: nowrap; border-top-left-radius: 15px !important; } .footer-toystory__navs-sticky .base-toystory__btn--primary::before { display: none; } } .footer-toystory__navs-sticky .base-toystory__container { padding-inline: 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .footer-toystory__navs-sticky .base-toystory__btn--primary { width: 350px; } .footer-toystory__navs-sticky__inner { position: fixed; bottom: 0; width: 100%; height: auto; } .footer-toystory__navs-sticky__actions { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 0 0 auto; } @media (max-width: 767px) { .footer-toystory__navs-sticky .base-toystory__btn--primary, .footer-toystory__navs-sticky .base-toystory__btn--secondary { width: 150px; height: 55px; padding: 0; } .footer-toystory__navs-sticky .base-toystory__btn--primary span { font-size: 14px; font-style: normal; font-weight: 400; line-height: 17px; /* 121.429% */ letter-spacing: 0.7px; } .footer-toystory__navs-sticky .base-toystory__btn--secondary span { font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; /* 133.333% */ letter-spacing: 0.6px; } } @media (min-width: 768px) { .footer-toystory__navs-sticky { bottom: 58px; } .footer-toystory__navs-sticky .base-toystory__btn { width: 340px !important; border-radius: 10px !important; } .footer-toystory__navs-sticky__actions { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 40px; margin: 0 auto; } .footer-toystory__navs-sticky__inner { background-color: rgba(0, 0, 0, .4); padding: 24px 0; } } @-webkit-keyframes lineup_nav_top-icon { 0% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 16% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 24%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes lineup_nav_top-icon { 0% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 16% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 24%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .base-toystory { overflow: hidden; scroll-behavior: smooth; } .base-toystory__container { width: 100%; height: auto; padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; } @media (min-width: 1024px) { .base-toystory__container { max-width: 1440px; padding: 0 64px; } } @media (min-width: 2560px) { .base-toystory__container { max-width: 2770px !important; } } .base-toystory__title { color: #0047ba; text-align: center; font-family: "Paytone One", sans-serif; font-size: 36px; font-style: normal; font-weight: 400 !important; line-height: 29px; letter-spacing: 1.8px; margin: 0; } @media (min-width: 1024px) { .base-toystory__title { font-size: 53px; line-height: 1; letter-spacing: 2.65px; } } .base-toystory__title__animate-typing { -webkit-transition: 0s !important; transition: 0s !important; } .base-toystory__title__animate-typing__text-split { font: inherit; display: inline; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: top, opacity; transition-property: top, opacity; -webkit-transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); position: relative; top: 0; } .base-toystory__title__animate-typing__text-split--empty { width: 0.5em; } .base-toystory__title__animate-typing:not(.aos-animate) { opacity: 0; } .base-toystory__title__animate-typing:not(.aos-animate) .base-toystory__title__animate-typing__text-split { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; top: 20px; opacity: 0; } .base-toystory__btn--primary { display: block; width: 100%; max-width: 350px; height: 65px; background-color: #f9c600; border-radius: 100px; position: relative; text-decoration: none; } .base-toystory__btn--primary span, .base-toystory__btn--primary::before { position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .base-toystory__btn--primary span { left: 35px; top: 48%; color: #0047ba; font-family: "Paytone One", sans-serif; font-size: 18px; font-style: normal; font-weight: 400 !important; line-height: 43px; letter-spacing: 0.9px; letter-spacing: 0.85px; } .base-toystory__btn--primary[href='/stores/sg'] span { line-height: 19px; letter-spacing: 0; } .base-toystory__btn--primary::before { content: ''; width: 47px; height: 47px; right: 13px; top: 50%; background: url("https://static.lenskart.com/owndays/img/toystory/arrow-circle-blue-btn.svg"); background-repeat: no-repeat; background-size: 100% 100%; } @media (min-width: 1024px) { .base-toystory__btn--primary span { font-size: 17px; letter-spacing: 0.85px; } .base-toystory__btn--primary[href='/stores/sg'] br { display: none; } .base-toystory__btn--primary[href='/stores/sg'] span { line-height: 43px; } .base-toystory__btn--primary:hover { -webkit-transition: 0.5s; transition: 0.5s; background-color: #0047ba; } .base-toystory__btn--primary:hover span { color: #f9c600; } .base-toystory__btn--primary:hover::before { background: url("https://static.lenskart.com/owndays/img/toystory/arrow-circle-yellow-btn.svg"); } } .base-toystory__btn--secondary { width: 100%; height: 55px; background-color: white; border-color: #0047ba; color: #0047ba; padding: 0 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 2px solid #0047ba; border-left: 2px solid #0047ba; text-decoration: none; } .base-toystory__btn--secondary[href='/stores/sg'] span { line-height: 16px; } .base-toystory__btn--secondary span { left: 35px; top: 48%; color: #0047ba; font-family: "Paytone One", sans-serif; font-size: 12px; font-style: normal; font-weight: 400 !important; line-height: 16px; letter-spacing: 0.6px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .base-toystory__btn--secondary:hover, .base-toystory__btn--secondary:focus { color: #0047ba; } .base-toystory__hide--sp { display: none; } .base-toystory__hide--pc { display: block; } @media (min-width: 768px) { .base-toystory__hide--sp { display: block; } .base-toystory__hide--pc { display: none; } } .header-squid-game__main { position: relative; background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-main_sp.webp") no-repeat top/cover; } .header-squid-game__main__wrapper { padding-top: 65.95px; position: relative; max-width: 1440px; margin-inline: auto; } @media (min-width: 1024px) { .header-squid-game__main__wrapper { padding-top: 119.92px; } } @media (min-width: 1200px) { .header-squid-game__main__wrapper { min-height: 1700px; } } .header-squid-game__main__logo { font: 0/0 a; margin-bottom: 65.09px; } .header-squid-game__main__logo img { display: block; width: 100%; max-width: 297px; height: auto; margin-inline: auto; } @media (min-width: 1024px) { .header-squid-game__main__logo { margin-bottom: 31.15px; } .header-squid-game__main__logo img { max-width: 493px; } } @media (min-width: 1296px) { .header-squid-game__main__logo img { width: 593px; max-width: 593px; height: auto; } } .header-squid-game__main__schedule { position: absolute; top: 258px; left: calc(50% + 48px); width: 109px; height: 109px; background-color: #e51282; color: white; border-radius: 100rem; display: grid; place-content: center; font-family: "Netflix Sans", sans-serif; font-weight: 700 !important; text-align: center; z-index: 1; } .header-squid-game__main__schedule-year { font-size: 10px; line-height: 11.03px; letter-spacing: 1px; margin-top: 7px; margin-bottom: 5px; } .header-squid-game__main__schedule-date { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10px 0 0 0; } .header-squid-game__main__schedule-date span { font-size: 18px; line-height: 11.03px; white-space: nowrap; } .header-squid-game__main__schedule-date small { place-content: center; font-size: 10px; font-weight: 700; letter-spacing: normal; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 14px; padding: 0 4px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(0, 0, 0, .2); border-radius: 10rem; } .header-squid-game__main__schedule-time { font-size: 10px; letter-spacing: 0.2px; } .header-squid-game__main__schedule-text { font-size: 12px; font-style: normal; font-weight: 700; line-height: 14px; } @media (min-width: 1024px) { .header-squid-game__main__schedule { width: 168px; height: 168px; top: 40px; left: calc(100% - 123px); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .header-squid-game__main__schedule-year { font-size: 15px; line-height: 17px; letter-spacing: 1.5px; margin: 12px 0 8px 0; } .header-squid-game__main__schedule-date { gap: 4px; margin: 16px 0 0 0; } .header-squid-game__main__schedule-date span { font-size: 26px; line-height: 17px; } .header-squid-game__main__schedule-date small { font-size: 14px; line-height: 5px; height: 22px; padding: 0 6px; border-radius: 60px; } .header-squid-game__main__schedule-time { font-size: 15px; letter-spacing: 0.3px; } .header-squid-game__main__schedule-text { font-size: 16px; line-height: 17px; position: relative; margin-top: 16px; } .header-squid-game__main__schedule-text br { display: none; } } .header-squid-game__main__schedule[data-is-published='true'] { display: none; } @media (min-width: 1024px) { .header-squid-game__main__content { position: relative; } } .header-squid-game__main__symbolic { display: none; } @media (min-width: 1024px) { .header-squid-game__main__symbolic { display: block; position: absolute; width: 31.68px; height: 103px; left: calc(50% - 480px); top: 37%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media (min-width: 1100px) { .header-squid-game__main__symbolic { left: calc(50% - 500px); } } @media (min-width: 1141px) { .header-squid-game__main__symbolic { left: 6%; } } @media (min-width: 1296px) { .header-squid-game__main__symbolic { left: 2%; } } .header-squid-game__main__young-hee { display: block; width: calc(100% + 76px); height: auto; margin: 0 -32px 0 -44px; } .header-squid-game__main__young-hee img { display: block; width: 100%; height: 100%; } @media (min-width: 425px) { .header-squid-game__main__young-hee { position: relative; left: 50%; translate: -50% 0; max-width: 446px; margin: 0; } } @media (min-width: 1024px) { .header-squid-game__main__young-hee { left: 23%; z-index: 5; } } @media (min-width: 1296px) { .header-squid-game__main__young-hee { max-width: 720px; } } .header-squid-game__main__desc { position: relative; margin-top: -75.7%; z-index: 1; } @media (min-width: 425px) { .header-squid-game__main__desc { margin-top: -260px; } } @media (min-width: 768px) { .header-squid-game__main__desc { margin-top: -296px; } } @media (min-width: 1296px) { .header-squid-game__main__desc { margin-top: -537px; } } .header-squid-game__main__desc::before { content: ''; position: absolute; top: -128px; left: 50%; translate: -50% 0; width: 145%; height: 444px; -webkit-clip-path: ellipse(50% 50% at 50% 50%); clip-path: ellipse(50% 50% at 50% 50%); z-index: -1; background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-black_sp.webp") repeat top/auto; } @media (min-width: 1024px) { .header-squid-game__main__desc::before { top: -67px; left: 50%; width: 1630px; height: 1052px; border-radius: 100%; background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-black_pc.webp") repeat top/auto; } } @media (min-width: 1296px) { .header-squid-game__main__desc::before { top: -50px; } } .header-squid-game__main__desc__title { color: white; font-family: "Founders Grotesk", sans-serif; font-size: 19px; font-style: normal; font-weight: 700 !important; line-height: 32px; letter-spacing: 0.95px; margin: 0 0 30px 0; } .header-squid-game__main__desc__title em { color: #e50914; font-style: normal !important; } .header-squid-game__main__desc__text { color: white; font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-style: normal; font-weight: 600 !important; line-height: 32px; letter-spacing: 0.48px; margin: 0; } @media (min-width: 1024px) { .header-squid-game__main__desc .base-squid-game__container { width: 50%; height: auto; position: absolute; bottom: 0; right: 0; padding: 0 20px 0 0; bottom: 50%; -webkit-transform: translateY(-20%); transform: translateY(-20%); } .header-squid-game__main__desc__title { font-size: 36px; line-height: 50px; letter-spacing: 1.8px; margin: 0 0 50px 0; } .header-squid-game__main__desc__text { font-size: 18px; line-height: 36px; letter-spacing: 0.54px; } } @media (min-width: 1296px) { .header-squid-game__main__desc .base-squid-game__container { -webkit-transform: translateY(-84%); transform: translateY(-84%); } } .header-squid-game__main__content { position: relative; } .header-squid-game__novelty { padding: 80px 0 0 0; position: relative; background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-black_sp.webp") repeat top/auto; } @media (min-width: 1024px) { .header-squid-game__novelty { background: none; z-index: 6; } } .header-squid-game__novelty::before { content: ''; position: absolute; top: -217px; left: 0; width: 100%; height: 500px; background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-black_sp.webp") repeat top/auto; z-index: 0; } @media (min-width: 1024px) { .header-squid-game__novelty::before { display: none; } } @media (min-width: 1124px) { .header-squid-game__novelty::before { display: block; top: unset; bottom: -50px; background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-black_pc.webp") repeat top/auto; } } .header-squid-game__novelty .base-squid-game__container { position: relative; z-index: 2; } .header-squid-game__novelty__card { margin-top: 28px; padding: 40px 18px; position: relative; z-index: 1; } .header-squid-game__novelty__card-bg { position: absolute; inset: 0; background: #f8f8f8; border-radius: 30px; z-index: -1; } @media (min-width: 1024px) { .header-squid-game__novelty__card-bg { background: transparent url("https://static.lenskart.com/owndays/img/squid-game/novelty/mask-t-r.svg") no-repeat right top/400px 85px; } .header-squid-game__novelty__card-bg::before, .header-squid-game__novelty__card-bg::after { content: ''; position: absolute; background: #f8f8f8; z-index: -1; } .header-squid-game__novelty__card-bg::before { top: 0; left: 0; bottom: 0; width: calc(100% - 399px); border-radius: 30px 0 0 30px; } .header-squid-game__novelty__card-bg::after { top: 84px; right: 0; bottom: 0; width: 401px; border-radius: 0 0 30px 0; } } .header-squid-game__novelty__card-pg { display: none; } @media (min-width: 1024px) { .header-squid-game__novelty__card-pg { display: block; position: absolute; top: -239px; right: 30px; width: 336px; height: 310px; z-index: -2; } } .header-squid-game__novelty__card-subtitle { color: #010b09; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 20px; margin-bottom: 10px; } .header-squid-game__novelty__card-title { color: #010b09; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 24px; font-style: normal; font-weight: 700 !important; line-height: 30px; letter-spacing: 0.24px; margin: 0; } .header-squid-game__novelty__card-title[data-is-published='true'] { margin-bottom: 40px; } .header-squid-game__novelty__card-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; position: relative; width: 100%; max-width: 280px; height: auto; margin: 0 auto 20px; background-color: #f8f8f8; } .header-squid-game__novelty__card-products::before { content: 'OR'; position: absolute; top: 50%; left: 44%; translate: -50% -50%; color: #e50914; text-align: center; font-family: "good-times", sans-serif; font-size: 22.48px; font-style: normal; font-weight: 700 !important; line-height: normal; letter-spacing: 0.899px; left: 50%; } @media (min-width: 768px) { .header-squid-game__novelty__card-products::before { left: unset; } } .header-squid-game__novelty__card-products img { aspect-ratio: 90 / 197; max-width: 134px; mix-blend-mode: multiply; } @media (min-width: 1200px) { .header-squid-game__novelty__card-products { max-width: 375px; } .header-squid-game__novelty__card-products img { max-width: 180px; } } .header-squid-game__novelty__card-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; font-family: "Netflix Sans", sans-serif; font-style: normal; font-weight: 700 !important; line-height: 25px; letter-spacing: 0px; text-align: center; margin-bottom: 20px; } .header-squid-game__novelty__card-date span:nth-child(1) { display: grid; place-items: center; background-color: #e50914; color: white; padding: 2px 6px; border-radius: 5px; font-size: 14px; } .header-squid-game__novelty__card-date span:nth-child(2) { font-size: 16px; } .header-squid-game__novelty__card-date[data-is-published='true'] { display: none; } .header-squid-game__novelty__card-text { color: #010b09; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: 22px; margin-bottom: 20px; } .header-squid-game__novelty__card-notes { list-style-type: none; padding-left: 5px; margin: 0; } .header-squid-game__novelty__card-notes li { color: #999; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-style: normal; font-weight: 500; line-height: 20px; padding-left: 5px; position: relative; } .header-squid-game__novelty__card-notes li::before { content: '*'; position: absolute; left: -5px; top: 2px; } @media (min-width: 768px) { .header-squid-game__novelty__card { display: grid; grid-template-columns: 1fr 415px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .header-squid-game__novelty__card-title, .header-squid-game__novelty__card-subtitle { text-align: left; } .header-squid-game__novelty__card-title br, .header-squid-game__novelty__card-subtitle br { display: none; } .header-squid-game__novelty__card-products { grid-column: 1/1; grid-row: 1 / span 5; margin-bottom: 0; } .header-squid-game__novelty__card-products::before { left: 50%; } .header-squid-game__novelty__card-date { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; margin-top: 14px; } .header-squid-game__novelty__card-date span { white-space: nowrap; } } @media (min-width: 918px) { .header-squid-game__novelty__card { grid-template-columns: 1fr 50%; } } @media (min-width: 1024px) { .header-squid-game__novelty__card { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; grid-template-columns: 1fr 606px; margin-top: 36px; padding: 110px 20px; } .header-squid-game__novelty__card-title { font-size: 36px; line-height: 50px; letter-spacing: 1.08px; } .header-squid-game__novelty__card-subtitle { font-size: 16px; line-height: 30px; letter-spacing: 0.48px; margin-bottom: 0; } .header-squid-game__novelty__card-date span:nth-child(1) { font-size: 16px; line-height: 25px; } .header-squid-game__novelty__card-date span:nth-child(2) { font-size: 21px; line-height: 20px; letter-spacing: 0.42px; } .header-squid-game__novelty__card-text { font-size: 16px; line-height: 24px; } } @media (min-width: 1200px) { .header-squid-game__novelty__card { grid-template-columns: 375px 606px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; } .header-squid-game__novelty__card-title { margin: 0; position: relative; top: -20px; } .header-squid-game__novelty__card-title[data-is-published='true'] { top: 0; } .header-squid-game__novelty__card-subtitle { margin-top: 48px; } .header-squid-game__novelty__card-date { margin: 0; position: relative; top: -28px; } .header-squid-game__novelty__card-text { margin: 0; position: relative; top: -30px; } .header-squid-game__novelty__card-text[data-is-published='true'] { top: 0; margin-bottom: 16px; } .header-squid-game__novelty__card-notes { margin: 0; position: relative; top: -30px; } .header-squid-game__novelty__card-notes[data-is-published='true'] { top: 0; } } @media (min-width: 1296px) { .header-squid-game__novelty__card { padding: 110px 60px; } } .header-squid-game__lineup-nav { position: relative; z-index: 1; padding: 80px 20px 0 20px; background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-black_sp.webp") repeat top/auto; } @media (min-width: 1024px) { .header-squid-game__lineup-nav { padding: 130px 0 0 0; } } .header-squid-game__lineup-nav__list--sp, .header-squid-game__lineup-nav__list--pc { list-style-type: none; padding: 0; margin: 0; } .header-squid-game__lineup-nav__list--sp { margin-top: 38px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 8px; } @media (min-width: 768px) { .header-squid-game__lineup-nav__list--sp { display: none; } } .header-squid-game__lineup-nav__list--pc { display: none; } @media (min-width: 768px) { .header-squid-game__lineup-nav__list--pc { margin-top: 38px; display: block; } .header-squid-game__lineup-nav__list--pc > .slick-list { display: grid; } .header-squid-game__lineup-nav__list--pc > .slick-list .slick-slide { width: 171.075px; height: auto !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; margin: 0 10px; } } @media (min-width: 1024px) { .header-squid-game__lineup-nav__list--pc { margin-top: 60px; } .header-squid-game__lineup-nav__list--pc > .slick-list .slick-slide { width: 261px; } } .header-squid-game__lineup-nav__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; } .header-squid-game__lineup-nav__item-img { display: block; position: relative; } .header-squid-game__lineup-nav__item-img::before { content: ''; position: absolute; right: 0; bottom: 0; width: 37px; height: 37px; background: white url("https://static.lenskart.com/owndays/img/squid-game/lineup/arrow-down.svg") no-repeat center/18.968px auto; border-radius: 160px; border-radius: 10rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 1024px) { .header-squid-game__lineup-nav__item-img::before { width: 57px; height: 57px; background: white url("https://static.lenskart.com/owndays/img/squid-game/lineup/arrow-down.svg") no-repeat center/28.938px auto; } } .header-squid-game__lineup-nav__item-name { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-squid-game__lineup-nav__item-name strong { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; color: transparent; font-family: "Game Of Squids", sans-serif; font-size: 24px; font-style: normal; font-weight: 400 !important; line-height: normal; background-repeat: no-repeat; background-position: center; background-size: 100% auto; } .header-squid-game__lineup-nav__item-name small { color: white; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 10px; font-style: normal; font-weight: 700 !important; line-height: normal; letter-spacing: 1.8px; margin-top: -4.5px; } @media (min-width: 768px) { .header-squid-game__lineup-nav__item-name { margin-top: 6px; } .header-squid-game__lineup-nav__item-name small { margin-top: -2px; } } @media (min-width: 1024px) { .header-squid-game__lineup-nav__item-name { margin-top: 10px; } .header-squid-game__lineup-nav__item-name strong { font-size: 38px; line-height: 65px; } .header-squid-game__lineup-nav__item-name small { font-size: 14px; letter-spacing: 2.52px; margin-top: -8px; } } @media (min-width: 1024px) { .header-squid-game__lineup-nav__item { cursor: pointer; } .header-squid-game__lineup-nav__item:hover { -webkit-transition: 0.5s; transition: 0.5s; } .header-squid-game__lineup-nav__item:hover .header-squid-game__lineup-nav__item-img::before { background-color: #e51282; background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/arrow-down--white.svg"); } } .body-squid-game__lineup { position: relative; z-index: 1; } .body-squid-game__lineup__wrapper { padding: 84px 0 0 0; } .body-squid-game__lineup__wrapper[id='young-hee'] { background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-black_sp.webp") repeat top/auto; } .body-squid-game__lineup__model { position: relative; } .body-squid-game__lineup__model-main { position: relative; border-radius: 50px 50px 0 0; overflow: hidden; width: 100%; height: auto; } .body-squid-game__lineup__model-main .base-squid-game__container { margin-top: 454px; } @media (min-width: 1024px) { .body-squid-game__lineup__model-main .base-squid-game__container { margin-top: 630px; } } @media (min-width: 1296px) { .body-squid-game__lineup__model-main .base-squid-game__container { margin-top: 628.28px; } } .body-squid-game__lineup__model-main-bg { position: absolute; top: 0; left: 0; right: 0; border-radius: 50px 50px 0 0; overflow: hidden; width: 100%; height: auto; display: block; } .body-squid-game__lineup__model-main-bg img { display: block; width: 100%; height: 100%; } @media (min-width: 768px) { .body-squid-game__lineup__model-main-bg img { aspect-ratio: 720 / 409; min-height: 818px; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; } } .body-squid-game__lineup__model-main-fg { width: 100%; height: auto; display: block; position: absolute; top: 200px; left: 0; right: 0; bottom: 0; } @media (min-width: 768px) { .body-squid-game__lineup__model-main-fg { top: 340px; } .body-squid-game__lineup__model-main-fg img { -webkit-transform: scale(1.5); transform: scale(1.5); } } @media (min-width: 1024px) { .body-squid-game__lineup__model-main-fg { top: 440px; } .body-squid-game__lineup__model-main-fg img { -webkit-transform: scale(1.5); transform: scale(1.5); } } @media (min-width: 1296px) { .body-squid-game__lineup__model-main-fg { top: 311px; } .body-squid-game__lineup__model-main-fg img { -webkit-transform: scale(1.6); transform: scale(1.6); } } @media (min-width: 1440px) { .body-squid-game__lineup__model-main-fg { top: 311px; } .body-squid-game__lineup__model-main-fg img { -webkit-transform: scale(1.05); transform: scale(1.05); } } @media (min-width: 2935px) { .body-squid-game__lineup__model-main-fg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .body-squid-game__lineup__model-main-name { width: 100%; height: auto; position: absolute; left: 50%; translate: -50% -50%; } .body-squid-game__lineup__model-main-name h3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; white-space: nowrap; margin: 0; } .body-squid-game__lineup__model-main-name h3 strong { color: transparent; font-family: "Game Of Squids", sans-serif; font-size: 55px; font-weight: 400; line-height: 94px; background-repeat: no-repeat; background-position: center; background-size: 100% auto; } @media (min-width: 1024px) { .body-squid-game__lineup__model-main-name h3 strong { font-size: 92.425px; } } .body-squid-game__lineup__model-main-name h3 small { color: white; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 11.101px; font-style: normal; font-weight: 700 !important; line-height: normal; letter-spacing: 1.998px; margin-top: -12px; } @media (min-width: 1024px) { .body-squid-game__lineup__model-main-name h3 small { font-size: 18px; letter-spacing: 3.24px; margin-top: 4px; } } .body-squid-game__lineup__model-main-name[data-key='young-hee'] { top: 20%; } .body-squid-game__lineup__model-main-name[data-key='young-hee'] h3 strong { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/nav-text-1.svg"); } .body-squid-game__lineup__model-main-name[data-key='staircase'] { top: 19%; } .body-squid-game__lineup__model-main-name[data-key='staircase'] h3 strong { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/nav-text-2.svg"); } .body-squid-game__lineup__model-main-name[data-key='frontman'] { top: 19%; } .body-squid-game__lineup__model-main-name[data-key='frontman'] h3 strong { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/nav-text-3.svg"); } .body-squid-game__lineup__model-main-name[data-key='track-suit'] { top: 18.5%; } .body-squid-game__lineup__model-main-name[data-key='track-suit'] h3 strong { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/nav-text-4.svg"); } .body-squid-game__lineup__model-main-name[data-key='piggy-bank'] { top: 19%; } .body-squid-game__lineup__model-main-name[data-key='piggy-bank'] h3 strong { background-size: 345px auto; background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/nav-text-5.svg"); } @media (min-width: 1024px) { .body-squid-game__lineup__model-main-name[data-key='piggy-bank'] h3 strong { background-size: 100% auto; } } .body-squid-game__lineup__model-main-name[data-key='ox'] { top: 20%; } .body-squid-game__lineup__model-main-name[data-key='ox'] h3 strong { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/nav-text-6.svg"); } .body-squid-game__lineup__model-main-img, .body-squid-game__lineup__model-main-desc { width: calc(100% - 36px); height: auto; margin: 0 auto; } .body-squid-game__lineup__model-main-img > .slick-list .slick-slide { overflow: hidden; border-radius: 20px; position: relative; } .body-squid-game__lineup__model-main-img > .slick-list .slick-slide img { display: block; width: 100%; height: 100%; } .body-squid-game__lineup__model-main-img__desc { width: 100%; height: 85px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .21); backdrop-filter: blur(7px); padding: 0 20px; border-radius: 0 0 20px 20px; } .body-squid-game__lineup__model-main-img__desc h4, .body-squid-game__lineup__model-main-img__desc p { margin: 0; color: white; font-style: normal; line-height: 30px; } .body-squid-game__lineup__model-main-img__desc h4 { font-family: "good-times", sans-serif; font-size: 18px; font-style: normal; font-weight: 700 !important; } .body-squid-game__lineup__model-main-img__desc p { font-family: "Netflix Sans", sans-serif; font-size: 15px; font-weight: 500 !important; letter-spacing: 0.45px; margin-top: -6px; } @media (min-width: 768px) { .body-squid-game__lineup__model-main-img { width: calc(100% - 25px); display: grid !important; grid-template-columns: 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 60px; } .body-squid-game__lineup__model-main-img > .slick-list .slick-slide { padding: 0 12.5px; } .body-squid-game__lineup__model-main-img > .slick-list .slick-slide img { border-radius: 20px; } .body-squid-game__lineup__model-main-img__desc { width: calc(100% - 25px); margin: 0 auto; } } @media (min-width: 1024px) { .body-squid-game__lineup__model-main-img > .slick-list .slick-slide img { border-radius: 30px; } .body-squid-game__lineup__model-main-img__desc { height: 140px; border-radius: 0 0 30px 30px; } .body-squid-game__lineup__model-main-img__desc h4 { font-size: 28px; } .body-squid-game__lineup__model-main-img__desc p { font-size: 20px; margin-top: 8px; } } @media (min-width: 1296px) { .body-squid-game__lineup__model-main-img { width: calc(100% + 50px); } .body-squid-game__lineup__model-main-img > .slick-list .slick-slide { padding: 0 25px; } .body-squid-game__lineup__model-main-img > .slick-list .slick-track .slick-slide:nth-child(1) { width: 565px !important; } .body-squid-game__lineup__model-main-img > .slick-list .slick-track .slick-slide:nth-child(2) { width: 635px !important; } .body-squid-game__lineup__model-main-img__desc { width: calc(100% - 50px); } } .body-squid-game__lineup__model-main-desc { padding: 30px 0; position: relative; color: #efefef; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 26px; letter-spacing: 0.28px; } .body-squid-game__lineup__model-main-desc--sp { display: block; } @media (min-width: 768px) { .body-squid-game__lineup__model-main-desc--sp { display: none; } } .body-squid-game__lineup__model-main-desc--pc { display: none; } @media (min-width: 768px) { .body-squid-game__lineup__model-main-desc--pc { width: 100%; display: block; padding-bottom: 0; } } @media (min-width: 1024px) { .body-squid-game__lineup__model-main-desc { padding-top: 50px; font-size: 16px; } } .body-squid-game__lineup__points { padding-bottom: 70.96px; } .body-squid-game__lineup__points > .slick-list .slick-slide { overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; z-index: 1; border-radius: 20px; overflow: hidden; background: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/SG1002X-5S/mask-b-r.svg") no-repeat 100% 100%/130px 84px; } .body-squid-game__lineup__points > .slick-dots { position: absolute; bottom: 44px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-bottom: 0; } .body-squid-game__lineup__points > .slick-dots > li, .body-squid-game__lineup__points > .slick-dots > li > button, .body-squid-game__lineup__points > .slick-dots > li > button::before { width: 8px; height: 8px; } .body-squid-game__lineup__points > .slick-dots > li { margin: 0 6px; } .body-squid-game__lineup__points > .slick-dots > li > button { color: transparent; } .body-squid-game__lineup__points > .slick-dots > li > button { content: ''; background-color: white; border-radius: 50%; opacity: 1; border: none; padding: 0; } .body-squid-game__lineup__points > .slick-dots > li.slick-active { width: 37px; } .body-squid-game__lineup__points > .slick-dots > li.slick-active > button { background-color: #e51282; opacity: 1; border-radius: 10rem; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; width: 37px; } @media (min-width: 768px) { .body-squid-game__lineup__points { width: calc(100% - 50px); max-width: 364px; margin: 0 auto; } } @media (min-width: 1024px) { .body-squid-game__lineup__points { width: calc(100% - 25px); max-width: none; padding-bottom: 100px; } .body-squid-game__lineup__points > .slick-list .slick-slide { padding: 0 12.5px; background-size: 164px 88px; } .body-squid-game__lineup__points > .slick-list .slick-slide img { border-radius: 20px 20px 0px 0px; } } @media (min-width: 1296px) { .body-squid-game__lineup__points { width: calc(100% + 30px); } .body-squid-game__lineup__points > .slick-list .slick-slide { padding: 0 15px; } } .body-squid-game__lineup__point-desc { position: relative; width: 100%; height: 107.69px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .body-squid-game__lineup__point-desc::before, .body-squid-game__lineup__point-desc::after { content: ''; position: absolute; z-index: -1; background-color: #2ab3b4; height: 100%; } .body-squid-game__lineup__point-desc::before { top: 0; left: 0; bottom: 0; width: calc(100% - 129px); border-radius: 0px 0px 0px 20px; } .body-squid-game__lineup__point-desc::after { right: 0; bottom: 83px; width: 130px; } @media (min-width: 320px) { .body-squid-game__lineup__point-desc { height: auto; } } @media (min-width: 1024px) { .body-squid-game__lineup__point-desc { height: 136px; } } .body-squid-game__lineup__point-text { padding: 25.65px 0 38px 18px; width: 100%; height: auto; max-width: 206px; color: white; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 22px; margin: 0; } .body-squid-game__lineup__point-text[data-key='young-hee-point-3'] { padding-left: 10px; padding-bottom: 10px; } @media (min-width: 1024px) { .body-squid-game__lineup__point-text { font-size: 16px; line-height: 24px; } } .body-squid-game__lineup__point-order { position: absolute; right: 2.06px; bottom: 15.08px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; margin: 0; } .body-squid-game__lineup__point-order span:nth-child(1) { color: white; text-align: right; font-family: "Netflix Sans", sans-serif; font-size: 17px; font-style: normal; font-weight: 700 !important; line-height: 30.728px; letter-spacing: 1.02px; } .body-squid-game__lineup__point-order span:nth-child(2), .body-squid-game__lineup__point-order span:nth-child(3) { color: white; font-family: "Game Of Squids", sans-serif; font-size: 20px; font-style: normal; font-weight: 400 !important; line-height: 36.215px; margin-top: -3px; } .body-squid-game__lineup__point-order span:nth-child(2) { position: relative; } .body-squid-game__lineup__point-order span:nth-child(2)::before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #e51282; width: 8px; height: 8px; border-radius: 160px; border-radius: 10rem; z-index: -1; } .body-squid-game__lineup__point-order span:nth-child(3) { margin-left: -4px; } @media (min-width: 1024px) { .body-squid-game__lineup__point-order { gap: 5px; right: 0; bottom: 18px; } .body-squid-game__lineup__point-order span:nth-child(1) { font-size: 16px; line-height: 28px; letter-spacing: 0.96px; } .body-squid-game__lineup__point-order span:nth-child(2), .body-squid-game__lineup__point-order span:nth-child(3) { line-height: 33px; margin-top: -3px; } } .body-squid-game__lineup__products-layout { background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-pink.webp") repeat top/auto; position: relative; } .body-squid-game__lineup__products-layout::before { content: ''; left: 0; top: -200px; width: 100%; height: 200px; position: absolute; background: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/bg-fg_sp.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: bottom center; overflow: hidden; z-index: -1; } @media (min-width: 768px) { .body-squid-game__lineup__products-layout::before { display: none; } } .body-squid-game__lineup__products-layout[data-key='ox'] { padding-bottom: 145px; } @media (min-width: 768px) { .body-squid-game__lineup__products-layout { padding: 70.96px 20px 0 20px; } } @media (min-width: 1024px) { .body-squid-game__lineup__products-layout { padding: 100px 20px 0 20px; } } @media (min-width: 768px) { .body-squid-game__lineup__products-inner { position: relative; max-width: 1312px; margin-inline: auto; } } .body-squid-game__lineup__products-card { position: relative; background-color: #f8f8f8; aspect-ratio: 39 / 41; width: 100%; max-height: 410px; } @media (min-width: 768px) { .body-squid-game__lineup__products-card { aspect-ratio: 1312 / 836; border-radius: 20px; max-height: none; } .body-squid-game__lineup__products-card::before { content: ''; position: absolute; right: -1px; bottom: -1px; width: 350px; height: 150px; background: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/bg-b-r--pink.svg") no-repeat 100% 100%/auto; z-index: 1; } } @media (min-width: 1024px) { .body-squid-game__lineup__products-card { aspect-ratio: 1312/780; } } @media (min-width: 1296px) { .body-squid-game__lineup__products-card { aspect-ratio: 1312 / 586; } } .body-squid-game__lineup__products-slider { top: 67px; } @media (min-width: 768px) { .body-squid-game__lineup__products-slider { top: 114px; } } @media (min-width: 1024px) { .body-squid-game__lineup__products-slider { top: 45px; } } .body-squid-game__lineup__products-slider > .slick-list .slick-track { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-squid-game__lineup__products-slider > .slick-list .slick-slide { aspect-ratio: 256 / 223; width: 200px !important; } .body-squid-game__lineup__products-slider > .slick-list .slick-slide img { scale: 0.63; -webkit-transition: scale 0.3s ease; transition: scale 0.3s ease; mix-blend-mode: normal; } .body-squid-game__lineup__products-slider > .slick-list .slick-slide.slick-center img { scale: 1.28; } @media (min-width: 768px) { .body-squid-game__lineup__products-slider > .slick-list .slick-slide { width: 300px !important; padding: 0 60px; } .body-squid-game__lineup__products-slider > .slick-list .slick-slide img { scale: 1; } .body-squid-game__lineup__products-slider > .slick-list .slick-slide.slick-center img { scale: 2; } } @media (min-width: 1024px) { .body-squid-game__lineup__products-slider > .slick-list .slick-slide { width: 600px !important; padding: 0px 45px; } .body-squid-game__lineup__products-slider > .slick-list .slick-slide img { scale: 0.75; } .body-squid-game__lineup__products-slider > .slick-list .slick-slide.slick-center img { scale: 1.316; } } .body-squid-game__lineup__products-slider > .slick-prev, .body-squid-game__lineup__products-slider > .slick-next { position: absolute; top: -47px; width: 35px; height: 35px; color: transparent; background-color: transparent; border: 1px solid rgba(0, 0, 0, .4); z-index: 3; } .body-squid-game__lineup__products-slider > .slick-prev::before, .body-squid-game__lineup__products-slider > .slick-next::before { content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%; border-block: 4px solid transparent; } @media (min-width: 768px) { .body-squid-game__lineup__products-slider > .slick-prev, .body-squid-game__lineup__products-slider > .slick-next { top: -95px; } } @media (min-width: 1024px) { .body-squid-game__lineup__products-slider > .slick-prev, .body-squid-game__lineup__products-slider > .slick-next { width: 50px; height: 50px; top: -11px; } .body-squid-game__lineup__products-slider > .slick-prev::before, .body-squid-game__lineup__products-slider > .slick-next::before { border-block-width: 5.5px; } } .body-squid-game__lineup__products-slider > .slick-prev { right: 55px; } .body-squid-game__lineup__products-slider > .slick-prev::before { border-right: 9px solid #e51282; } @media (min-width: 1024px) { .body-squid-game__lineup__products-slider > .slick-prev { right: 85px; } } .body-squid-game__lineup__products-slider > .slick-next { right: 20px; border-left: none; } .body-squid-game__lineup__products-slider > .slick-next::before { border-left: 9px solid #e51282; } @media (min-width: 1024px) { .body-squid-game__lineup__products-slider > .slick-next { right: 35px; } } .body-squid-game__lineup__products-colors { position: absolute; top: 23px; left: 20px; list-style-type: none; padding-left: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4.45px; z-index: 3; } @media (min-width: 1024px) { .body-squid-game__lineup__products-colors { gap: 10px; top: unset; bottom: 25px; left: unset; right: 287px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .body-squid-game__lineup__products-colors li { width: 30px; height: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1024px) { .body-squid-game__lineup__products-colors li { width: 50px; height: 50px; } } .body-squid-game__lineup__products-colors li[data-color-selected='true'] { border: 0.929px solid rgba(0, 0, 0, .4); border-radius: 50%; } .body-squid-game__lineup__products-colors li button { width: 100%; height: 100%; padding: 0; background-color: transparent; border: 1px solid transparent; border-radius: 999px; -webkit-box-sizing: border-box; box-sizing: border-box; } .body-squid-game__lineup__products-colors li button[data-color='black'], .body-squid-game__lineup__products-colors li button[data-color='green'] { width: 20px; height: 20px; } @media (min-width: 1024px) { .body-squid-game__lineup__products-colors li button[data-color='black'], .body-squid-game__lineup__products-colors li button[data-color='green'] { width: 34px; height: 34px; } } .body-squid-game__lineup__products-colors li button[data-color='gold'], .body-squid-game__lineup__products-colors li button[data-color='matte-black'], .body-squid-game__lineup__products-colors li button[data-color='clear'], .body-squid-game__lineup__products-colors li button[data-color='pink'], .body-squid-game__lineup__products-colors li button[data-color='silver'], .body-squid-game__lineup__products-colors li button[data-color='black-red'], .body-squid-game__lineup__products-colors li button[data-color='black-blue'] { background-repeat: no-repeat; background-size: 20px 20px; background-position: 50% 50%; } @media (min-width: 1024px) { .body-squid-game__lineup__products-colors li button[data-color='gold'], .body-squid-game__lineup__products-colors li button[data-color='matte-black'], .body-squid-game__lineup__products-colors li button[data-color='clear'], .body-squid-game__lineup__products-colors li button[data-color='pink'], .body-squid-game__lineup__products-colors li button[data-color='silver'], .body-squid-game__lineup__products-colors li button[data-color='black-red'], .body-squid-game__lineup__products-colors li button[data-color='black-blue'] { background-size: 34px 34px; } } .body-squid-game__lineup__products-colors li button[data-color='gold'] { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/colors/gold.webp"); } .body-squid-game__lineup__products-colors li button[data-color='matte-black'] { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/colors/matte-black.webp"); } .body-squid-game__lineup__products-colors li button[data-color='black'] { background-color: black; } .body-squid-game__lineup__products-colors li button[data-color='green'] { background-color: #126434; } .body-squid-game__lineup__products-colors li button[data-color='clear'] { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/colors/clear.webp"); } .body-squid-game__lineup__products-colors li button[data-color='pink'] { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/colors/pink.webp"); } .body-squid-game__lineup__products-colors li button[data-color='silver'] { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/colors/silver.webp"); } .body-squid-game__lineup__products-colors li button[data-color='black-red'] { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/colors/black-red.webp"); } .body-squid-game__lineup__products-colors li button[data-color='black-blue'] { background-image: url("https://static.lenskart.com/owndays/img/squid-game/lineup/products/colors/black-blue.webp"); } .body-squid-game__lineup__products-desc { position: absolute; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: calc(100% - 40px); height: auto; background-color: white; border-radius: 10px; -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .04); box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .04); padding: 20px; display: grid; grid-template-columns: 70px 1fr; gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-squid-game__lineup__products-desc__text h4, .body-squid-game__lineup__products-desc__text p { margin: 0; font-style: normal; color: black; } .body-squid-game__lineup__products-desc__text h4 { font-family: "Netflix Sans", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0.36px; } .body-squid-game__lineup__products-desc__text p { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 500; line-height: 20px; } @media (min-width: 768px) { .body-squid-game__lineup__products-desc { max-width: 50%; left: 28%; } } @media (min-width: 1024px) { .body-squid-game__lineup__products-desc { grid-template-columns: 86px 1fr; gap: 15px; max-width: 379px; left: 22%; } .body-squid-game__lineup__products-desc__text h4 { font-size: 20px; letter-spacing: 0.4px; } .body-squid-game__lineup__products-desc__text p { font-size: 14px; line-height: 22px; } } @media (min-width: 1296px) { .body-squid-game__lineup__products-desc { left: calc(14% + 30px); -webkit-transform: translateX(-50% -50%); transform: translateX(-50% -50%); } } .body-squid-game__lineup__products-btn { padding: 40px 20px; } .body-squid-game__lineup__products-btn--sp { display: block; } @media (min-width: 768px) { .body-squid-game__lineup__products-btn--sp { display: none; } } .body-squid-game__lineup__products-btn--pc { display: none; } @media (min-width: 768px) { .body-squid-game__lineup__products-btn--pc { display: block; } } @media (min-width: 768px) { .body-squid-game__lineup__products-btn { position: absolute; right: 14px; bottom: 19px; padding: 0; width: 281px; z-index: 2; } } .footer-squid-game__case { position: relative; margin-top: -85px; border-radius: 50px 50px 0 0; background: url("https://static.lenskart.com/owndays/img/squid-game/case/bg-black.webp") repeat top/auto; z-index: 1; overflow: hidden; } .footer-squid-game__case .base-squid-game__container { padding-block: 232px 70px; position: relative; } @media (min-width: 768px) { .footer-squid-game__case .base-squid-game__container { padding-block: 100px; } } .footer-squid-game__case__thumb { position: absolute; top: 0; left: 0; right: 0; z-index: -1; } .footer-squid-game__case__title { margin-bottom: 25px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: white; text-align: center; font-family: "good-times", sans-serif; font-size: 35px; font-style: normal; font-weight: 700 !important; line-height: 40px; } @media (min-width: 768px) { .footer-squid-game__case__title { margin-bottom: 0; } } .footer-squid-game__case__text { color: #efefef; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 26px; letter-spacing: 0.28px; margin-bottom: 30px; } .footer-squid-game__case__img { border-radius: 20px; aspect-ratio: 313 / 292; background-color: #f8f8f8; } .footer-squid-game__case__img img { mix-blend-mode: multiply; border-radius: inherit; } .footer-squid-game__case__left { overflow: hidden; } .footer-squid-game__case__pg { display: none; } @media (min-width: 1024px) { .footer-squid-game__case__pg { display: block; position: absolute; left: -205px; bottom: 0; width: 298px; height: 404px; } } @media (min-width: 768px) { .footer-squid-game__case { margin-top: 0; border-radius: 0; } .footer-squid-game__case__inner { display: grid; grid-template-columns: 1fr 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 25px; } .footer-squid-game__case__left { position: relative; border-radius: 30px; } .footer-squid-game__case__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 25px; } .footer-squid-game__case__thumb { position: unset; } .footer-squid-game__case__title { width: 100%; height: 140px; background-color: rgba(0, 0, 0, .2); position: absolute; left: 0; right: 0; bottom: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-squid-game__case__text { margin-bottom: 0; } } @media (min-width: 1024px) { .footer-squid-game__case__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 28px; line-height: 30px; } .footer-squid-game__case__text { font-size: 16px; line-height: 28px; letter-spacing: 0.32px; } .footer-squid-game__case__inner { gap: 50px; grid-template-columns: 1fr calc(50% + 10px); } .footer-squid-game__case__right { gap: 50px; } } .footer-squid-game__accessories, .footer-squid-game__stores { background-color: #333; } .footer-squid-game__accessories { padding-top: 70px; position: relative; } .footer-squid-game__accessories::before { content: ''; position: absolute; width: 100%; height: 10px; background-color: #333; left: 0; top: -6px; z-index: 0; } .footer-squid-game__accessories .base-squid-game__title img { width: 304px; height: auto; } @media (min-width: 1024px) { .footer-squid-game__accessories .base-squid-game__title { gap: 15px; } .footer-squid-game__accessories .base-squid-game__title span { padding: 0 14px; height: 35px; } .footer-squid-game__accessories .base-squid-game__title img { width: 479px; } } .footer-squid-game__accessories__card { width: 100%; height: auto; background-color: #f8f8f8; border-radius: 20px; margin-top: 48px; margin-bottom: 5px; overflow: hidden; } @media (min-width: 768px) { .footer-squid-game__accessories__card { display: grid; grid-template-columns: 50% 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 30px; margin-top: 60px; } } @media (min-width: 1440px) { .footer-squid-game__accessories__card { position: relative; overflow: unset; } .footer-squid-game__accessories__card::before { content: ''; position: absolute; top: 50%; left: -15px; width: 40px; height: 255.559px; translate: -100% -50%; background: url("https://static.lenskart.com/owndays/img/squid-game/accessories/accessory-label.svg") no-repeat top/contain; } } .footer-squid-game__accessories__slider { position: relative; cursor: -webkit-grab; cursor: grab; } @media (min-width: 768px) { .footer-squid-game__accessories__slider { width: 100%; height: 100%; } } @media (min-width: 1440px) { .footer-squid-game__accessories__slider { border-radius: 30px 0px 0px 30px; overflow: hidden; } } .footer-squid-game__accessories__slider > .slick-list .slick-slide { aspect-ratio: 350 / 310; } @media (min-width: 768px) { .footer-squid-game__accessories__slider > .slick-list { height: 100% !important; } .footer-squid-game__accessories__slider > .slick-list .slick-track, .footer-squid-game__accessories__slider > .slick-list .slick-slide { height: 100%; } .footer-squid-game__accessories__slider > .slick-list .slick-slide > div { height: 100%; } .footer-squid-game__accessories__slider > .slick-list .slick-slide { aspect-ratio: unset; } .footer-squid-game__accessories__slider > .slick-list li, .footer-squid-game__accessories__slider > .slick-list img { width: 100%; height: 100%; aspect-ratio: 187 / 212; -o-object-fit: cover; object-fit: cover; } } .footer-squid-game__accessories__slider > .slick-dots { position: absolute; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-bottom: 0; } .footer-squid-game__accessories__slider > .slick-dots > li, .footer-squid-game__accessories__slider > .slick-dots > li > button, .footer-squid-game__accessories__slider > .slick-dots > li > button::before { width: 8px; height: 8px; } .footer-squid-game__accessories__slider > .slick-dots > li { margin: 0 6px; } .footer-squid-game__accessories__slider > .slick-dots > li > button { color: transparent; } .footer-squid-game__accessories__slider > .slick-dots > li > button { content: ''; background-color: white; border-radius: 50%; opacity: 1; border: none; padding: 0; } .footer-squid-game__accessories__slider > .slick-dots > li.slick-active { width: 37px; } .footer-squid-game__accessories__slider > .slick-dots > li.slick-active > button { background-color: #e51282; opacity: 1; border-radius: 10rem; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; width: 37px; } .footer-squid-game__accessories__details { padding: 40px 18px; } .footer-squid-game__accessories__details-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 9px; margin-bottom: 15px; } .footer-squid-game__accessories__details-title span { font-style: normal; font-weight: 700 !important; } .footer-squid-game__accessories__details-title span:nth-child(1) { width: 50.43px; height: 27.949px; border: 1.215px solid black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #13847b; color: white; font-family: "Netflix Sans", sans-serif; font-size: 19.443px; font-weight: 700 !important; line-height: 19.443px; letter-spacing: 1.167px; padding-top: 3px; } .footer-squid-game__accessories__details-title span:nth-child(2) { font-family: "Founders Grotesk", sans-serif; color: #010b09; font-size: 18px; line-height: 33.383px; letter-spacing: 0.54px; } .footer-squid-game__accessories__details-product-number { color: #010b09; font-family: "good-times", sans-serif; font-size: 18px; font-style: normal; font-weight: 700 !important; line-height: 30px; margin-bottom: 0; } .footer-squid-game__accessories__details-price { color: #010b09; font-family: "Netflix Sans", sans-serif; font-size: 15px; font-style: normal; font-weight: 500 !important; line-height: 30px; letter-spacing: 0.45px; margin: -8px 0 0 0; } .footer-squid-game__accessories__details-text { color: #010b09; font-family: "Netflix Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 26px; letter-spacing: 0.28px; margin: 5px 0 0 0; } .footer-squid-game__accessories__details-img { width: 100%; height: auto; aspect-ratio: 63 / 55; mix-blend-mode: multiply; } @media (min-width: 768px) { .footer-squid-game__accessories__details-title { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media (min-width: 1024px) { .footer-squid-game__accessories__details { display: grid; grid-template-areas: 'title title' 'text text' 'img img' 'product-number btn'; grid-template-columns: auto 1fr; -webkit-column-gap: 37px; -moz-column-gap: 37px; column-gap: 37px; padding: 70.53px 18px; } .footer-squid-game__accessories__details-title { grid-area: title; margin-bottom: 8px; } .footer-squid-game__accessories__details-title span:nth-child(1) { width: 83px; height: 46px; border-width: 2px; font-size: 32px; line-height: 32px; letter-spacing: 1.92px; } .footer-squid-game__accessories__details-title span:nth-child(2) { font-size: 30px; line-height: 54.943px; letter-spacing: 0.9px; } .footer-squid-game__accessories__details-product-number { grid-area: product-number; font-size: 28px; line-height: 30px; } .footer-squid-game__accessories__details-price { font-size: 20px; line-height: 30px; letter-spacing: 0.6px; margin-top: 7px; } .footer-squid-game__accessories__details-text { grid-area: text; font-size: 16px; line-height: 28px; letter-spacing: 0.32px; margin: 0; } .footer-squid-game__accessories__details-img { grid-area: img; aspect-ratio: unset; width: 434px; height: 379px; margin: -10.47px auto 0 auto; } .footer-squid-game__accessories__details-btn { grid-area: btn; } } @media (min-width: 1296px) { .footer-squid-game__accessories__details { padding: 80px 53.5px 74.53px 53.5px; } } .footer-squid-game__stores { padding: 0 18px; position: relative; } @media (min-width: 1024px) { .footer-squid-game__stores { padding-bottom: 150px; } } .footer-squid-game__stores::before, .footer-squid-game__stores::after { content: ''; position: absolute; width: 100%; height: 10px; background-color: #333; left: 0; } .footer-squid-game__stores::before { top: -6px; z-index: 0; } .footer-squid-game__stores::after { bottom: -6px; z-index: -1; } .footer-squid-game__stores__btn { width: 100%; height: auto; padding: 100px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } @media (min-width: 768px) { .footer-squid-game__stores__btn { width: 100%; height: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-squid-game__stores__btn .base-squid-game__btn { width: 50%; max-width: 508px; } } .footer-squid-game__stores__notes { list-style-type: none; padding-left: 0; margin-bottom: 0; } .footer-squid-game__stores__notes li { color: white; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-style: normal; font-weight: 500 !important; line-height: 24px; position: relative; padding-left: 13px; } .footer-squid-game__stores__notes li::before { content: '*'; position: absolute; top: 1px; left: 0; } @media (min-width: 1024px) { .footer-squid-game__stores__notes { width: calc(100% - 40px); height: auto; margin: 0 auto; } .footer-squid-game__stores__notes li { font-size: 16px; line-height: 32px; } } @media (min-width: 1296px) { .footer-squid-game__stores__notes { max-width: 886.66px; } } .footer-squid-game__stores__pg { width: calc(100% + 36px); height: auto; margin: 0 -18px; padding-top: 50px; } @media (min-width: 768px) { .footer-squid-game__stores__pg { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-squid-game__stores__pg img { width: 100%; height: auto; max-width: 445px; } } @media (min-width: 1024px) { .footer-squid-game__stores__pg { width: 306px; height: 438px; position: absolute; bottom: 0; right: -60px; padding: 0; margin: 0; z-index: 2; } } @media (min-width: 1440px) { .footer-squid-game__stores__pg { right: unset; left: calc(50% + 625px); -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .footer-squid-game__share { position: relative; background-color: black; } .footer-squid-game__share__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 56px 20px 47.92px 20px; } @media (min-width: 768px) { .footer-squid-game__share__layout { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 140px 20px 110.19px 20px; } } .footer-squid-game__share__title { margin: 0 0 27px 0; } .footer-squid-game__share__title span { font: 0 / 0 a; } .footer-squid-game__share__title img { width: 140px; height: auto; } @media (min-width: 768px) { .footer-squid-game__share__title { margin: 0 40px 0 0; } .footer-squid-game__share__title img { width: 217px; } } .footer-squid-game__share__list { list-style-type: none; padding: 0; margin-bottom: 0; display: grid; grid-template-columns: repeat(2, 35px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 36px; } .footer-squid-game__share__list li a { font-size: 35px; color: white; display: block; width: 35px; height: 35px; } .footer-squid-game__share__list li a i { background: transparent; } .footer-squid-game__share__list li:nth-child(1) a { position: relative; } .footer-squid-game__share__list li:nth-child(1) a i { position: absolute; top: 0; } @media (min-width: 1024px) { .footer-squid-game__share__list li:nth-child(1):hover a i { -webkit-transition: 0.3s; transition: 0.3s; color: #e51282; } } .footer-squid-game__share__list li:nth-child(2) { width: 35px; height: 35px; position: relative; } .footer-squid-game__share__list li:nth-child(2) a { color: black; position: relative; } .footer-squid-game__share__list li:nth-child(2) a i { font-size: 22.23px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .footer-squid-game__share__list li:nth-child(2) a::before { position: absolute; content: ''; width: 35px; height: 35px; background-color: white; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } @media (min-width: 1024px) { .footer-squid-game__share__list li:nth-child(2):hover a::before { -webkit-transition: 0.3s; transition: 0.3s; background-color: #e51282; } } .footer-squid-game__share__copyright { font-family: "Netflix Sans", sans-serif; font-size: 11px; line-height: 36px; font-weight: 500 !important; color: white; text-align: center; padding: 0 0 10px 0; margin-bottom: 0; } @media (min-width: 768px) { .footer-squid-game__share__copyright { font-size: 12px; padding: 0 0 7px 0; } } .footer-squid-game__navs-sticky { position: relative; bottom: 0; width: 100%; height: 98px; z-index: 8; background-color: white; } @media (min-width: 768px) { .footer-squid-game__navs-sticky { height: 143px; } } .footer-squid-game__navs-sticky[data-is-published='true'] { height: 55px; background-color: transparent; } @media (min-width: 768px) { .footer-squid-game__navs-sticky[data-is-published='true'] { height: 70px; } } .footer-squid-game__navs-sticky__inner { position: fixed; bottom: 0; width: 100%; height: auto; background: rgba(47, 34, 14, .65); } .footer-squid-game__navs-sticky__inner[data-is-published='true'] { background-color: transparent; } .footer-squid-game__navs-sticky__container { margin-inline: auto; width: 100%; max-width: 1190px; padding: 15px 18px 6px 0; display: grid; grid-template-areas: 'title button' 'desc desc'; grid-template-columns: 1fr 125px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px 34px; } @media (min-width: 768px) { .footer-squid-game__navs-sticky__container { grid-template-areas: 'desc button' 'title button'; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0; padding: 0 20px; width: 100%; height: 143px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024px) { .footer-squid-game__navs-sticky__container { grid-template-columns: 1fr 323px; } } .footer-squid-game__navs-sticky__container[data-is-published='true'] { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; gap: 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; max-width: 1280px; } @media (min-width: 768px) { .footer-squid-game__navs-sticky__container[data-is-published='true'] { height: 55px; padding-right: 20px; } .footer-squid-game__navs-sticky__container[data-is-published='true'] br { display: none; } } @media (min-width: 1024px) { .footer-squid-game__navs-sticky__container[data-is-published='true'] { height: 70px; } } .footer-squid-game__navs-sticky__title { grid-area: title; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: -5px 0 0 0; } .footer-squid-game__navs-sticky__title i { text-align: right; } .footer-squid-game__navs-sticky__title span, .footer-squid-game__navs-sticky__title small { color: white; font-style: normal; font-weight: 700 !important; } .footer-squid-game__navs-sticky__title span { font-family: "Founders Grotesk", sans-serif; font-size: 18px; line-height: 30px; letter-spacing: 0.18px; } .footer-squid-game__navs-sticky__title small { font-family: "Netflix Sans", sans-serif; font-size: 10px; line-height: 20px; letter-spacing: 0.3px; text-align: right; } @media (min-width: 768px) { .footer-squid-game__navs-sticky__title { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; margin: -57px 0 0 0; padding-top: 25px; } .footer-squid-game__navs-sticky__title span { font-size: 31px; line-height: 50px; } .footer-squid-game__navs-sticky__title small { font-size: 18px; margin-top: 9px; } } .footer-squid-game__navs-sticky__title[data-is-published='true'] { display: none; } .footer-squid-game__navs-sticky__btn { grid-area: button; height: 45px !important; } @media (min-width: 1024px) { .footer-squid-game__navs-sticky__btn { height: 72px !important; } } .footer-squid-game__navs-sticky__btn[data-is-published='true'] { height: 55px !important; border-style: solid; border-color: #e51282; border-width: 1px 1px 0; } .footer-squid-game__navs-sticky__btn[data-is-published='true'][href='#lineup'] { display: none; } .footer-squid-game__navs-sticky__btn[data-is-published='true'][href='/sg/en/eyeglasses/brands/squid-game.html'] { border-top-left-radius: 20px; border-radius: 20px 0 0 0; padding-inline: 20px; } .footer-squid-game__navs-sticky__btn[data-is-published='true'][href='/stores/sg'] { border-right-width: 0; border-radius: 0; padding-inline: 20px; } @media (min-width: 768px) { .footer-squid-game__navs-sticky__btn[data-is-published='true'] { height: 55px !important; } .footer-squid-game__navs-sticky__btn[data-is-published='true'][href='/stores/sg'] { border-top-right-radius: 20px; border-right-width: 1px; } } @media (min-width: 1024px) { .footer-squid-game__navs-sticky__btn[data-is-published='true'] { height: 70px !important; border-width: 2px 2px 0; } .footer-squid-game__navs-sticky__btn[data-is-published='true'][href='/sg/en/eyeglasses/brands/squid-game.html']:hover { background-color: #e51282; } .footer-squid-game__navs-sticky__btn[data-is-published='true'][href='/stores/sg'] { border-right-width: 2px; } } .footer-squid-game__navs-sticky__btn[data-is-published='false'][href='/sg/en/eyeglasses/brands/squid-game.html'], .footer-squid-game__navs-sticky__btn[data-is-published='false'][href='/stores/sg'] { display: none; } .footer-squid-game__navs-sticky__desc { grid-area: desc; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; gap: 28px; } .footer-squid-game__navs-sticky__desc--sp { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } @media (min-width: 768px) { .footer-squid-game__navs-sticky__desc--sp { display: none !important; } } .footer-squid-game__navs-sticky__desc--pc { display: none !important; } @media (min-width: 768px) { .footer-squid-game__navs-sticky__desc--pc { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } } .footer-squid-game__navs-sticky__desc p { margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-squid-game__navs-sticky__desc span, .footer-squid-game__navs-sticky__desc a { color: white; font-family: "Founders Grotesk", sans-serif; font-weight: 700 !important; font-style: normal; } .footer-squid-game__navs-sticky__desc span { font-size: 10px; line-height: 12px; } .footer-squid-game__navs-sticky__desc a { font-size: 9px; line-height: 15px; -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-style: solid; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: 1px; text-underline-position: from-font; } @media (min-width: 768px) { .footer-squid-game__navs-sticky__desc { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 27px; border-radius: 50px; background: white; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 17.03px 0 19px; margin-top: 17px; } .footer-squid-game__navs-sticky__desc p { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer-squid-game__navs-sticky__desc span { color: black; font-size: 12px; line-height: 25px; } .footer-squid-game__navs-sticky__desc span:nth-child(2) { margin-left: 2px; } .footer-squid-game__navs-sticky__desc a { color: #e51282; font-size: 11px; line-height: 20px; text-underline-offset: 2px; margin-top: -2px; } } .footer-squid-game__navs-sticky__desc[data-is-published='true'] { display: none; } @font-face { font-family: 'Netflix Sans'; src: url("https://static.lenskart.com/owndays/fonts/NetflixSans/NetflixSans-Medium.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/NetflixSans/NetflixSans-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Netflix Sans'; src: url("https://static.lenskart.com/owndays/fonts/NetflixSans/NetflixSans-Light.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/NetflixSans/NetflixSans-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Netflix Sans'; src: url("https://static.lenskart.com/owndays/fonts/NetflixSans/NetflixSans-Bold.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/NetflixSans/NetflixSans-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Netflix Sans'; src: url("https://static.lenskart.com/owndays/fonts/NetflixSans/NetflixSans-Regular.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/NetflixSans/NetflixSans-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Game Of Squids'; src: url("https://static.lenskart.com/owndays/fonts/GameOfSquids/GameOfSquids.woff2") format("woff2"), url("https://static.lenskart.com/owndays/fonts/GameOfSquids/GameOfSquids.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } .base-squid-game { overflow: hidden; } .base-squid-game__bg { background: url("https://static.lenskart.com/owndays/img/squid-game/main/bg-pink.webp") repeat top/auto; } .base-squid-game__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; height: 67px; border-radius: 10px; font-family: "Netflix Sans", sans-serif; font-weight: 700 !important; font-size: 15px; line-height: 1.5; letter-spacing: 0.45px; -webkit-transition: 0.5s; transition: 0.5s; } @media (min-width: 1024px) { .base-squid-game__btn { height: 72px; border-radius: 15px; font-size: 17px; letter-spacing: 0.51px; } } .base-squid-game__btn--pink { background-color: #e51282; color: white; } .base-squid-game__btn--pink:hover, .base-squid-game__btn--pink:focus { background-color: #e51282; color: white; text-decoration: none; } .base-squid-game__btn--red { background-color: #e50914; color: white; } .base-squid-game__btn--red:hover, .base-squid-game__btn--red:focus { background-color: #e50914; color: white; text-decoration: none; } .base-squid-game__btn--white { background-color: white; color: #e51282; } .base-squid-game__btn--white:hover, .base-squid-game__btn--white:focus { color: #e51282; text-decoration: none; } @media (min-width: 768px) { .base-squid-game__btn--pink:hover { background-color: #860b4c; } .base-squid-game__btn--red:hover { background-color: #83050b; } } .base-squid-game__container { padding-inline: 20px; margin-inline: auto; width: 100%; height: auto; max-width: 1190px; } .base-squid-game__container--lg { max-width: 1352px; } .base-squid-game__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: 8px; margin: 0; } .base-squid-game__title span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #e51282; color: white; border-radius: 10rem; padding: 6px 9px 8px 9px; font-family: "Founders Grotesk", sans-serif; font-size: 13px; font-weight: 700 !important; line-height: 1; letter-spacing: 0.91px; } .base-squid-game__title strong { font: 0/0 a; } @media (max-width: 1023px) { .base-squid-game__title img[alt="Novelty"] { max-width: 180px; } } @media (min-width: 1024px) { .base-squid-game__title { gap: 15px; } .base-squid-game__title span { padding: 3px 21px 0; font-size: 20px; line-height: 36px; letter-spacing: 1.4px; } } .base-squid-game__text-run { position: absolute; top: 451px; left: -50%; z-index: 4; } @media (min-width: 1296px) { .base-squid-game__text-run { top: 813px; } } .base-squid-game__text-run[data-section="lineup"] { top: -37px; } @media (min-width: 1024px) { .base-squid-game__text-run[data-section="lineup"] { top: -96px; } } .base-squid-game__text-run__list { list-style: none; padding: 0; margin: 0; } .base-squid-game__text-run__list > .slick-list { opacity: 0.3; } .base-squid-game__text-run__list > .slick-list .slick-slide li { outline: none; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: white; font-family: "Gasoek One", sans-serif; font-size: 120px; font-style: normal; font-weight: 400 !important; line-height: normal; letter-spacing: 8.4px; margin: 0 27.5px; } @media (min-width: 1024px) { .base-squid-game__text-run__list > .slick-list .slick-slide li { font-size: 200px; letter-spacing: 14px; margin: 0 25px; } } .header-move__main { position: relative; } .header-move__main .base-move__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .header-move__main__bg img { display: block; width: 100%; height: auto; aspect-ratio: 425 / 654; } .header-move__main__text { position: absolute; inset: 0; padding-block: 40px 112px; font-family: "Founders Grotesk", sans-serif; } .header-move__main__text h1, .header-move__main__text h2 { margin: 0; } .header-move__main__text h1 { font: 0 / 0 a; } .header-move__main__text h1 img { display: block; width: 100%; height: auto; max-width: 120px; margin: 0 auto; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: invert(1); filter: invert(1); } .header-move__main__text h2 { color: white; font-size: 32px; font-weight: 600 !important; line-height: 52px; letter-spacing: 1.28px; } .header-move__main::after { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); width: 1px; height: 60px; background-color: #d9d9d9; z-index: 2; } @media (min-width: 768px) { .header-move__main__bg img { aspect-ratio: 2 / 1; } .header-move__main__text h1 img { -webkit-filter: unset; filter: unset; } .header-move__main__text h2 { line-height: 1.2; } } @media (min-width: 1024px) { .header-move__main__bg img { min-height: 720px; -o-object-fit: cover; object-fit: cover; } .header-move__main__text { padding-block: 76px 70px; } .header-move__main__text h2 { font-size: 50px; line-height: 100px; letter-spacing: 2px; padding-left: 20px; } .header-move__main::after { height: 80px; } } @media (min-width: 1124px) { .header-move__main__text h2 br { display: none; } .header-move__main__text h1 img { max-width: 170px; } } .header-move__about { position: relative; } .header-move__about__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1280px; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } @media screen and (min-width: 768px) { .header-move__about__container { gap: 40px; } } .header-move__about__bg { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .header-move__about__bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(352.03% 121.7% at 50% 7.5%, rgba(0, 0, 0, .4) 0, rgba(217, 217, 217, .3) 100%); } .header-move__about__bg video { display: inline-block; width: 100%; height: 524px; -o-object-fit: cover; object-fit: cover; } .header-move__about__text { position: absolute; inset: auto 0 32px 0; color: white; font-family: "Founders Grotesk", sans-serif; } .header-move__about__text p { color: white; font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 24px; letter-spacing: 0.28px; padding: 0; margin: 0; } .header-move__about__text h2 { color: white; font-size: 36px; font-style: normal; font-weight: 700 !important; line-height: 150%; letter-spacing: 0.72px; padding: 0; margin: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } .header-move__about__play { position: absolute; inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; font: 0 / 0 a; background: url("https://static.lenskart.com/owndays/img/move/icon_play.svg") no-repeat 50%/80px auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 1024px) { .header-move__about__bg video { height: 580px; } .header-move__about__text { inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 20px; font-family: "Founders Grotesk", sans-serif; } .header-move__about__text p { color: white; font-size: 16px; font-style: normal; font-weight: 500 !important; line-height: 32px; letter-spacing: 0.48px; max-width: calc(50% - 160px); padding-top: 0; padding: 0; margin: 0; } .header-move__about__text h2 { color: white; font-size: 50px; font-style: normal; font-weight: 700 !important; line-height: 74px; letter-spacing: 1px; padding: 0; margin: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } } .header-move__navs { position: relative; padding: 24px 0 20px 0; } .header-move__navs ul { list-style-type: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .header-move__navs ul a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 600 !important; letter-spacing: 0.96px; line-height: normal; color: black; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-color: #f7f6f2; height: 52px; padding-inline: 20px; border-radius: 5px; z-index: 1; white-space: nowrap; } .header-move__navs ul a::after { content: ''; width: 28px; height: 28px; border-radius: 160px; border-radius: 10rem; border: 1px solid black; background: black url("https://static.lenskart.com/owndays/img/move/icon-arrow-down.svg") no-repeat 50%/8px auto; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 768px) { .header-move__navs ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-color: #f7f6f2; height: 76px; border-radius: 10px; } .header-move__navs ul li { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-move__navs ul li:not(:last-child):before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 48px; background-color: rgba(0, 0, 0, .2); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .header-move__navs ul li a { padding: 20px; gap: 28px; } } @media (min-width: 1024px) { .header-move__navs { padding: 60px 0 60px 0; } .header-move__navs ul a { font-size: 20px; letter-spacing: 0.8px; } .header-move__navs a { cursor: pointer; } .header-move__navs a:hover { color: #999; text-decoration: none; } .header-move__navs a:hover::after { background-color: white; background-image: url("https://static.lenskart.com/owndays/img/move/icon-arrow-down--black.svg"); } } @charset "UTF-8"; .body-move__styles__heading, .body-move__styles__top { max-width: 1280px; margin-inline: auto; } .body-move__styles__heading { padding-inline: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 2px; margin: 17px auto 35px auto; } .body-move__styles__heading[data-key='basic'] { margin: 77px auto 35px auto; } .body-move__styles__heading--basic { display: none; } @media (min-width: 768px) { .body-move__styles__heading--basic { display: block; } .body-move__styles__heading--basic .body-move__styles__heading { padding: 0; margin: 0 0 41px 0; } } .body-move__styles__heading strong { text-align: center; font-family: "Founders Grotesk", sans-serif; color: black; font-size: 32px; font-style: italic; font-weight: 700 !important; line-height: normal; letter-spacing: 1.28px; position: relative; opacity: 0; -webkit-transform: translate(50px); transform: translate(50px); -webkit-transition: 0.5s; transition: 0.5s; } .body-move__styles__heading strong::before { content: ''; position: absolute; top: 50%; left: 100%; translate: 16px -50%; width: 80px; height: 1px; background-color: black; } .body-move__styles__heading > span { display: block; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-style: normal; font-weight: 600 !important; line-height: 24px; letter-spacing: 0.72px; overflow: hidden; position: relative; } .body-move__styles__heading > span::after { content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; width: 0%; height: 120%; position: absolute; top: 0; left: 0; background-color: black; z-index: -1; } .body-move__styles__heading > span > span { font: inherit; line-height: inherit; letter-spacing: inherit; } .body-move__styles__heading.aos-animate strong { opacity: 1; -webkit-transform: translate(0); transform: translate(0); } .body-move__styles__heading.aos-animate > span { -webkit-animation: title-highlights 1.5s forwards; animation: title-highlights 1.5s forwards; } .body-move__styles__heading.aos-animate > span::after { -webkit-animation: textani 1.5s forwards; animation: textani 1.5s forwards; } @media (min-width: 1024px) { .body-move__styles__heading { margin: 60px auto 65px auto; } .body-move__styles__heading strong { font-size: 48px; line-height: 57px; letter-spacing: 1.92px; } .body-move__styles__heading strong::before { width: 240px; translate: 24px -50%; } .body-move__styles__heading span { font-size: 24px; line-height: normal; letter-spacing: 0.48px; } } .body-move__styles__top { display: grid; margin-bottom: 57px; overflow: visible; } @media (min-width: 768px) { .body-move__styles__top[data-key='basic'] { margin-top: 60px; } } @media (min-width: 1024px) { .body-move__styles__top[data-key='basic'] .body-move__styles__top-cover { height: 364px; } } .body-move__styles__top-content { padding-inline: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-move__styles__top-content[data-key='basic'] { margin: 37px 0 0 0; } .body-move__styles__top-content[data-key='basic'] p { margin: 0; } @media (min-width: 768px) { .body-move__styles__top-content[data-key='basic'] { margin: 0; } } .body-move__styles__top-content-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 4px; padding-bottom: 13px; margin-bottom: 10px; border-bottom: 1px solid black; } .body-move__styles__top-content-title small { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding-inline: 8px; border: 1px solid black; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-style: normal; font-weight: 600 !important; line-height: normal; letter-spacing: 0.32px; height: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; } .body-move__styles__top-content-title > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .body-move__styles__top-content-title > span > span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 25px; font-style: normal; font-weight: 600 !important; line-height: normal; letter-spacing: 0.5px; overflow: hidden; position: relative; } .body-move__styles__top-content-title > span > span::after { content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; width: 0%; height: 120%; position: absolute; top: 0; left: 0; background-color: black; z-index: -1; } .body-move__styles__top-content-title.aos-animate > span > span { -webkit-animation: title-highlights 1.5s forwards; animation: title-highlights 1.5s forwards; } .body-move__styles__top-content-title.aos-animate > span > span::after { -webkit-animation: textani 1.5s forwards; animation: textani 1.5s forwards; } .body-move__styles__top-content-text { color: black; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 28px; letter-spacing: 0.28px; } .body-move__styles__top-content-img { width: 100%; height: auto; aspect-ratio: 96/65; max-width: 480px; margin-top: 20px; } .body-move__styles__top-cover img { margin-bottom: 8px; } .body-move__styles__top-cover img[alt='A comfortable fit tailored to your face width'] { margin-bottom: 40px; } @media (min-width: 768px) { .body-move__styles__top { grid-template-columns: 40% 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } .body-move__styles__top-content { padding-right: 0; } .body-move__styles__top-cover { grid-column: 2/2; grid-row: 1 / 1; } .body-move__styles__top-cover img { margin-bottom: 0; } .body-move__styles__top-cover img[alt='A comfortable fit tailored to your face width'] { margin-bottom: 0; } } @media (min-width: 1024px) { .body-move__styles__top { margin-bottom: 80px; grid-template-columns: 50% 1fr; } .body-move__styles__top-cover { width: 680px; height: 780px; position: relative; } .body-move__styles__top-cover img { width: 100%; height: 100%; } .body-move__styles__top-content-title { gap: 0; padding-bottom: 28px; margin-bottom: 16px; } .body-move__styles__top-content-title small { font-size: 20px; letter-spacing: 0.4px; height: 40px; margin-bottom: 19px; } .body-move__styles__top-content-title > span > span { font-size: 44px; line-height: normal; letter-spacing: 0.88px; } .body-move__styles__top-content-text { font-size: 16px; line-height: 32px; letter-spacing: 0.32px; } } .body-move__styles__recommend { background-color: #f7f6f2; padding-block: 60px 40px; } .body-move__styles__recommend-img { aspect-ratio: 350/260; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: white; border-radius: 10px; position: relative; } .body-move__styles__recommend-img img { width: 100%; max-height: 370px; -o-object-fit: cover; object-fit: cover; mix-blend-mode: multiply; } .body-move__styles__recommend-img img[alt='4 levels of adjustability'] { max-width: 620px; height: auto; margin: auto; } .body-move__styles__recommend-img img[alt='OWNDAYS’ unique slide structure, adjust the temple width in two steps'] { height: 100%; } .body-move__styles__recommend-img span { position: absolute; top: -20px; right: -5px; background-color: #416bc3; color: white; width: 80px; height: 80px; display: grid; place-content: center; text-align: center; color: white; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-style: normal; font-weight: 600 !important; line-height: 12px; letter-spacing: 0.24px; border-radius: 100%; } .body-move__styles__recommend-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; z-index: 1; margin-top: -30px; } .body-move__styles__recommend-content h4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 5px; margin-bottom: 26px; } .body-move__styles__recommend-content h4 > span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border: 1px solid black; background-color: white; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3px 10px; } .body-move__styles__recommend-content h4 > span > span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-style: normal; font-weight: 600 !important; line-height: 22px; letter-spacing: 0.32px; } @media (min-width: 1024px) { .body-move__styles__recommend-content h4 > span > span { white-space: nowrap; } } .body-move__styles__recommend-content h5 { color: black; font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-style: normal; font-weight: 600 !important; line-height: normal; letter-spacing: 0.32px; margin-bottom: 8px; } .body-move__styles__recommend-content ul { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; padding: 0; margin: 0; } .body-move__styles__recommend-content ul li { position: relative; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-style: normal; font-weight: 700 !important; line-height: normal; letter-spacing: 0.48px; padding-left: 24px; } .body-move__styles__recommend-content ul li::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 16px; height: 16px; background: url("https://static.lenskart.com/owndays/img/move/icon-checkbox.svg") no-repeat center/contain; } @media (min-width: 768px) { .body-move__styles__recommend-content { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; margin: 0; } } @media (min-width: 768px) { .body-move__styles__recommend-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .body-move__styles__recommend-img { width: 53.23%; height: auto; max-width: 620px; aspect-ratio: 660/370; margin-left: auto; } .body-move__styles__recommend-img span { top: -35px; } .body-move__styles__recommend-content { width: 48.55%; height: auto; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; position: absolute; left: 0; } .body-move__styles__recommend-content h4 > span { background-color: black; color: white; -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); } .body-move__styles__recommend-content h4 > span > span { -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); } .body-move__styles__recommend-content h4.aos-animate > span { -webkit-animation: textclip 1s forwards; animation: textclip 1s forwards; } .body-move__styles__recommend-content h4.aos-animate > span > span { -webkit-animation: textclip 1s forwards 0.3s; animation: textclip 1s forwards 0.3s; } } @media (min-width: 1024px) { .body-move__styles__recommend { padding-block: 60px; } .body-move__styles__recommend-img span { width: 130px; height: 130px; font-size: 18px; line-height: 20px; letter-spacing: 0.36px; top: -36px; right: -20px; } .body-move__styles__recommend-content h4 { gap: 10px; margin-bottom: 29px; } .body-move__styles__recommend-content h4 > span { padding: 10px 10.25px; } .body-move__styles__recommend-content h4 > span > span { font-size: 22px; letter-spacing: 0.44px; } .body-move__styles__recommend-content h4 > span > span br { display: none; } .body-move__styles__recommend-content h5 { font-size: 24px; line-height: normal; letter-spacing: 0.48px; margin-bottom: 11px; } .body-move__styles__recommend-content ul li { font-size: 16px; letter-spacing: 0.32px; padding-left: 28px; } .body-move__styles__recommend-content ul li::before { width: 20px; height: 20px; } } @media (min-width: 1296px) { .body-move__styles__recommend-img span { right: -36px; } } .body-move__styles__recommend-perfect { padding: 52px 0 55px 0; } @media (min-width: 768px) { .body-move__styles__recommend-perfect { padding: 52px 0 15px 0; } } @media (min-width: 1024px) { .body-move__styles__recommend-perfect { padding: 87px 0 70px 0; } } .body-move__styles__recommend-perfect__title { color: black; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 26px; font-style: normal; font-weight: 600 !important; line-height: 32px; letter-spacing: 0.52px; margin: 0 0 35px 0; } @media (min-width: 1024px) { .body-move__styles__recommend-perfect__title { font-size: 32px; line-height: normal; letter-spacing: 0.64px; margin: 0 0 29px 0; } } .body-move__styles__recommend-perfect__list { list-style-type: none; width: calc(100% + 40px); height: auto; margin: 0 -20px; padding: 0 20px; display: grid; grid-template-columns: repeat(4, 300px); gap: 20px; overflow-y: hidden; overflow-x: scroll; scroll-behavior: smooth; scrollbar-width: none; } .body-move__styles__recommend-perfect__list::-webkit-scrollbar { display: none; } .body-move__styles__recommend-perfect__list li { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; scroll-snap-align: start; } @media (min-width: 1024px) { .body-move__styles__recommend-perfect__list { grid-template-columns: repeat(4, 298px); gap: 16px; } } .body-move__styles__recommend-perfect__item-img { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 16px; } .body-move__styles__recommend-perfect__item-img img:nth-child(2) { width: 80px; height: 80px; position: absolute; bottom: 11px; right: 6px; } .body-move__styles__recommend-perfect__item-tag { border-radius: 3px; background: #416bc3; color: white; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-style: normal; font-weight: 600 !important; line-height: normal; letter-spacing: 0.48px; padding: 5px 8px; } .body-move__styles__recommend-perfect__item-text { color: black; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 600 !important; line-height: normal; letter-spacing: 0.28px; margin: 7px 0 0 0; } @media (min-width: 1024px) { .body-move__styles__recommend-perfect__item-img { margin-bottom: 18px; } .body-move__styles__recommend-perfect__item-tag { font-size: 14px; letter-spacing: 0.56px; padding: 4px 8px 5px 8px; } .body-move__styles__recommend-perfect__item-text { font-size: 16px; letter-spacing: 0.32px; margin: 6px 0 0 0; } } .body-move__styles__products { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; margin-top: 40px; } .body-move__styles__products + .body-move__styles__top { margin-top: 80px; } .body-move__styles__products[data-product-number='MV2002N-5S'], .body-move__styles__products[data-product-number='MV2004N-5S'], .body-move__styles__products[data-product-number='MV2006N-5S'] { margin-top: 0; } @media (min-width: 768px) { .body-move__styles__products[data-product-number='MV2002N-5S'], .body-move__styles__products[data-product-number='MV2004N-5S'], .body-move__styles__products[data-product-number='MV2006N-5S'] { margin-top: 40px; } } @media (min-width: 1024px) { .body-move__styles__products { margin-top: 100px; } .body-move__styles__products + .body-move__styles__top { margin-top: 100px; } } .body-move__styles__product { width: 100%; max-width: 1280px; margin-inline: auto; } .body-move__styles__product-bg { padding-block: 40px 20px; background-color: #f7f6f2; } .body-move__styles__product-bg[data-product-number='MV2002N-5S'], .body-move__styles__product-bg[data-product-number='MV2004N-5S'], .body-move__styles__product-bg[data-product-number='MV2006N-5S'] { padding-bottom: 40px; } @media (min-width: 768px) { .body-move__styles__product-bg[data-product-number='MV2002N-5S'], .body-move__styles__product-bg[data-product-number='MV2004N-5S'], .body-move__styles__product-bg[data-product-number='MV2006N-5S'] { padding-block: 60px; } } @media (min-width: 768px) { .body-move__styles__product-bg { padding-block: 60px; } } @media (min-width: 768px) { .body-move__styles__product-layout { width: 100%; max-width: 1440px; height: 280px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 80px; } .body-move__styles__product-layout::before { content: ''; position: absolute; left: -1px; top: 0; width: calc(31.94% + 1px); height: 200px; background-color: #f7f6f2; z-index: 2; } } @media (min-width: 768px) and (min-width: 1279px) { .body-move__styles__product-layout::before { width: 100%; left: -18%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (min-width: 1024px) { .body-move__styles__product-layout { height: 440px; } .body-move__styles__product-layout::before { height: 440px; } } .body-move__styles__product-list { width: 100%; height: auto; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media (min-width: 768px) { .body-move__styles__product-list { position: absolute; left: 0; top: 0; } } @media (min-width: 1279px) { .body-move__styles__product-list { width: calc(100% + 1440px); margin: 0 -720px; } } .body-move__styles__product-list > .slick-list .slick-slide { width: 330px !important; height: 200px; padding: 0 10px; } .body-move__styles__product-list > .slick-list .slick-slide > div, .body-move__styles__product-list > .slick-list .slick-slide li { height: inherit; outline: none; } .body-move__styles__product-list > .slick-list .slick-slide img { display: block; width: 100%; height: 100%; } @media (min-width: 768px) { .body-move__styles__product-list > .slick-list { padding: 0 68px; } } @media (min-width: 1024px) { .body-move__styles__product-list > .slick-list { padding: 0px 156px !important; } .body-move__styles__product-list > .slick-list .slick-slide { width: 600px !important; height: 360px; padding: 0 10px; } } @media (min-width: 1126px) { .body-move__styles__product-list > .slick-list { padding: 0px 137px !important; } } @media (min-width: 1227px) { .body-move__styles__product-list > .slick-list { padding: 0px 119px !important; } } @media (min-width: 1280px) { .body-move__styles__product-list > .slick-list { padding: 0px 109px !important; } } .body-move__styles__product-list > .slick-prev, .body-move__styles__product-list > .slick-next { position: absolute; bottom: -60px; z-index: 1; width: 40px; height: 40px; border-radius: 10rem; border: 1px solid black; background-color: black; font: 0/0 a; cursor: pointer; } .body-move__styles__product-list > .slick-prev::before, .body-move__styles__product-list > .slick-next::before { content: ''; display: -webkit-box; display: -ms-flexbox; display: flex; width: 12px; height: 12px; background-repeat: no-repeat; background-position: center; background-size: contain; margin: auto; } .body-move__styles__product-list > .slick-prev { right: 218px; } .body-move__styles__product-list > .slick-prev::before { background-image: url("https://static.lenskart.com/owndays/img/move/icon-arrow-prev.svg"); } @media (min-width: 1279px) { .body-move__styles__product-list > .slick-prev { right: 938px; } } .body-move__styles__product-list > .slick-next { right: 162px; } .body-move__styles__product-list > .slick-next::before { background-image: url("https://static.lenskart.com/owndays/img/move/icon-arrow-next.svg"); } @media (min-width: 1279px) { .body-move__styles__product-list > .slick-next { right: 882px; } } .body-move__styles__product-list > .slick-disabled { background-color: white; } .body-move__styles__product-list > .slick-disabled::before { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: invert(1); filter: invert(1); } .body-move__styles__product-details { position: relative; padding-inline: 20px; margin-block: 16px 20px; } @media (min-width: 768px) { .body-move__styles__product-details { width: 31.94%; height: auto; position: relative; z-index: 2; } } .body-move__styles__product-details-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 19px; } @media (min-width: 768px) { .body-move__styles__product-details-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 27px; } } .body-move__styles__product-details-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .body-move__styles__product-details-code { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-style: normal; font-weight: 500 !important; line-height: normal; letter-spacing: 0.88px; margin: 0; } @media (min-width: 768px) { .body-move__styles__product-details-code { margin-top: 4px; } } @media (min-width: 1024px) { .body-move__styles__product-details-code { font-size: 26px; letter-spacing: 1.04px; } } .body-move__styles__product-details-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin: 0; } .body-move__styles__product-details-price small, .body-move__styles__product-details-price strong { color: black; font-family: "Founders Grotesk", sans-serif; font-style: normal; font-weight: 500 !important; line-height: normal; } .body-move__styles__product-details-price small { font-size: 14px; letter-spacing: 0.56px; } .body-move__styles__product-details-price strong { font-size: 24px; letter-spacing: 0.96px; } @media (min-width: 1024px) { .body-move__styles__product-details-price small { font-size: 16px; letter-spacing: 0.64px; } .body-move__styles__product-details-price strong { font-size: 26px; letter-spacing: 1.04px; } } .body-move__styles__product-details-colors { width: auto; height: 32px; list-style-type: none; padding-left: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2px; z-index: 3; } @media (min-width: 1024px) { .body-move__styles__product-details-colors { height: 40px; } } .body-move__styles__product-details-colors li { width: 32px; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1024px) { .body-move__styles__product-details-colors li { width: 40px; height: 40px; } } .body-move__styles__product-details-colors li[data-color-selected='true'] { border: 1px solid black; border-radius: 50%; } .body-move__styles__product-details-colors li button { width: 100%; height: 100%; padding: 0; background-color: transparent; border: 1px solid transparent; border-radius: 999px; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 1024px) { .body-move__styles__product-details-colors li button { cursor: pointer; } } .body-move__styles__product-details-colors li button[data-color='white'], .body-move__styles__product-details-colors li button[data-color='black'], .body-move__styles__product-details-colors li button[data-color='black-2a'], .body-move__styles__product-details-colors li button[data-color='light-brown'], .body-move__styles__product-details-colors li button[data-color='dark-green'], .body-move__styles__product-details-colors li button[data-color='grey'] { width: 24px; height: 24px; } @media (min-width: 1024px) { .body-move__styles__product-details-colors li button[data-color='white'], .body-move__styles__product-details-colors li button[data-color='black'], .body-move__styles__product-details-colors li button[data-color='black-2a'], .body-move__styles__product-details-colors li button[data-color='light-brown'], .body-move__styles__product-details-colors li button[data-color='dark-green'], .body-move__styles__product-details-colors li button[data-color='grey'] { width: 32px; height: 32px; } } .body-move__styles__product-details-colors li button[data-color='matte-black'], .body-move__styles__product-details-colors li button[data-color='matte-grey'], .body-move__styles__product-details-colors li button[data-color='matte-khaki'], .body-move__styles__product-details-colors li button[data-color='matte-navy'] { background-repeat: no-repeat; background-size: 24px 24px; background-position: 50% 50%; } @media (min-width: 1024px) { .body-move__styles__product-details-colors li button[data-color='matte-black'], .body-move__styles__product-details-colors li button[data-color='matte-grey'], .body-move__styles__product-details-colors li button[data-color='matte-khaki'], .body-move__styles__product-details-colors li button[data-color='matte-navy'] { background-size: 32px 32px; } } .body-move__styles__product-details-colors li button[data-color='matte-black'] { background-image: url("https://static.lenskart.com/owndays/img/move/products/colors/matte-black.webp"); } .body-move__styles__product-details-colors li button[data-color='matte-grey'] { background-image: url("https://static.lenskart.com/owndays/img/move/products/colors/matte-grey.webp"); } .body-move__styles__product-details-colors li button[data-color='matte-khaki'] { background-image: url("https://static.lenskart.com/owndays/img/move/products/colors/matte-khaki.webp"); } .body-move__styles__product-details-colors li button[data-color='matte-navy'] { background-image: url("https://static.lenskart.com/owndays/img/move/products/colors/matte-navy.webp"); } .body-move__styles__product-details-colors li button[data-color='white'] { background-color: #f7f5f4; } .body-move__styles__product-details-colors li button[data-color='black'] { background-color: black; } .body-move__styles__product-details-colors li button[data-color='black-2a'] { background-color: #2a2833; } .body-move__styles__product-details-colors li button[data-color='light-brown'] { background-color: #ceb39c; } .body-move__styles__product-details-colors li button[data-color='dark-green'] { background-color: #434021; } .body-move__styles__product-details-colors li button[data-color='grey'] { background-color: #e0dede; } .body-move__styles__product-button { width: 100%; height: auto; padding-inline: 20px; } @media (min-width: 768px) { .body-move__styles__product-button { padding-inline: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-move__styles__product-button .base-move__btn { width: 356px; } } .body-move__styles__product-slide-count { display: none; } @media (min-width: 768px) { .body-move__styles__product-slide-count { display: block; position: absolute; bottom: 25.5px; right: 100px; color: black; font-family: "Founders Grotesk", sans-serif; font-size: 24px; font-style: normal; font-weight: 500 !important; line-height: normal; letter-spacing: 0.96px; } } .body-move__styles__features { margin-block: -25px 60px; position: relative; } @media (min-width: 1024px) { .body-move__styles__features { margin-block: 12px 100px; } } .body-move__styles__features .base-move__container { padding-bottom: 40px; } .body-move__styles__features .base-move__container::before { content: ''; position: absolute; top: 24px; left: 40px; bottom: 0; width: 1000%; background-color: #f7f6f2; border-radius: 0 0 0 40px; z-index: -1; } @media (min-width: 1024px) { .body-move__styles__features .base-move__container::before { top: 35px; left: 120px; } } .body-move__styles__features-title { color: black; font-family: "Founders Grotesk", sans-serif; font-size: 32px; font-style: normal; font-weight: 700 !important; line-height: normal; letter-spacing: 1.28px; margin-bottom: 45px; } @media (min-width: 1024px) { .body-move__styles__features-title { font-size: 48px; letter-spacing: 1.92px; margin-bottom: 79px; } } .body-move__styles__features-list { margin: 0; padding: 0; list-style-type: none; display: grid; gap: 30px 26px; } @media (min-width: 768px) { .body-move__styles__features-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .body-move__styles__features-list { grid-template-columns: repeat(3, 1fr); } } .body-move__styles__features-item { display: grid; grid-template-columns: 100px 1fr; background-color: white; border-radius: 100rem; border: 1px solid rgba(0, 0, 0, .2); } .body-move__styles__features-icon { aspect-ratio: 1 / 1; width: 100px; border: 1px solid black; background-color: white; border-radius: 100rem; } @media (min-width: 1024px) { .body-move__styles__features-icon { width: 120px; } } .body-move__styles__features-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-inline: 8px 20px; position: relative; } @media (min-width: 1024px) { .body-move__styles__features-details { padding-inline: 12px 44px; } } .body-move__styles__features-details small, .body-move__styles__features-details p { color: black; font-family: "Founders Grotesk", sans-serif; font-style: normal; } .body-move__styles__features-details small { padding-inline: 4px; position: absolute; top: 0; left: 0; translate: 0 -56%; font-size: 20px; font-weight: 600 !important; line-height: normal; letter-spacing: 0.8px; } .body-move__styles__features-details small::before { content: ''; position: absolute; top: calc(50% - 1px); left: 0; right: 0; bottom: 0; background-color: white; z-index: -1; } @media (min-width: 1024px) { .body-move__styles__features-details small { font-size: 28px; letter-spacing: 1.12px; } } .body-move__styles__features-details p { font-size: 14px; font-weight: 700 !important; line-height: 24px; letter-spacing: 0.56px; margin: 0; } @media (min-width: 1024px) { .body-move__styles__features-details p { font-size: 16px; letter-spacing: 0.32px; } } @-webkit-keyframes title-highlights { 0% { color: black; } 50% { color: white; } 100% { color: black; } } @keyframes title-highlights { 0% { color: black; } 50% { color: white; } 100% { color: black; } } @-webkit-keyframes textani { 0% { width: 0; } 50% { width: 100%; left: 0; } 100% { width: 100%; left: 102%; } } @keyframes textani { 0% { width: 0; } 50% { width: 100%; left: 0; } 100% { width: 100%; left: 102%; } } @-webkit-keyframes textclip { from { -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); } to { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); color: white; } } @keyframes textclip { from { -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); } to { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); color: white; } } .footer-move__recommended { position: relative; padding-block: 80px 25px; } .footer-move__recommended h2 { margin-bottom: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-move__recommended h2 small, .footer-move__recommended h2 span { color: black; font-family: "Founders Grotesk", sans-serif; font-weight: 600 !important; line-height: normal; font-style: normal; white-space: nowrap; text-align: center; } .footer-move__recommended h2 small { font-size: 14px; letter-spacing: 0.56px; } .footer-move__recommended h2 span { font-size: 22px; letter-spacing: 0.88px; margin-top: 10px; } .footer-move__recommended ul { list-style-type: none; margin: 0; padding: 0; display: grid; gap: 24px 35px; } .footer-move__recommended ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .footer-move__recommended ul li img { display: block; aspect-ratio: 39 / 23; margin-bottom: 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .footer-move__recommended ul li h3, .footer-move__recommended ul li p { font-family: "Founders Grotesk", sans-serif; color: black; margin: 0 0 8px 0; } .footer-move__recommended ul li h3 { font-size: 20px; font-weight: 600 !important; line-height: normal; letter-spacing: 0.8px; } .footer-move__recommended ul li p, .footer-move__recommended ul li a { font-family: "Founders Grotesk", sans-serif; font-size: 14px; } .footer-move__recommended ul li p { font-weight: 500 !important; line-height: 22px; letter-spacing: 0.56px; } .footer-move__recommended ul li a { outline: none; text-decoration: none; -webkit-transition: 0.5s; transition: 0.5s; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: #0094c8; font-weight: 700 !important; line-height: 20px; letter-spacing: 0.7px; margin-top: -5px; } .footer-move__recommended ul li a::before { content: ''; position: absolute; inset: 0; } @media (min-width: 768px) { .footer-move__recommended ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; } } @media (min-width: 1024px) { .footer-move__recommended { padding-block: 150px 80px; } .footer-move__recommended h2 { margin-bottom: 30px; } .footer-move__recommended h2 small { font-size: 24px; letter-spacing: 0.48px; } .footer-move__recommended h2 span { font-size: 36px; letter-spacing: 0.72px; margin-top: 8px; } .footer-move__recommended ul { grid-row-gap: 60px; } .footer-move__recommended ul li h3 { font-size: 24px; letter-spacing: 1.44px; line-height: 1; } .footer-move__recommended ul li:hover img { opacity: 0.6; } } .footer-move__navs-sticky { position: relative; bottom: 0; width: 100%; height: auto; z-index: 2; } .footer-move__navs-sticky .base-move__container { padding-inline: 0; } @media (min-width: 1296px) { .footer-move__navs-sticky .base-move__container { max-width: none; padding-right: 80px; } } .footer-move__navs-sticky .base-move__btn { width: 150px !important; height: 55px; border-radius: 0; white-space: nowrap; padding-inline: 30px !important; font-size: 12px; font-style: normal; font-weight: 700 !important; line-height: normal; letter-spacing: 0.24px; } .footer-move__navs-sticky .base-move__btn--primary { border-top-left-radius: 20px !important; } .footer-move__navs-sticky__inner { position: fixed; bottom: 0; width: 100%; height: auto; } .footer-move__navs-sticky__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin: 0 auto; } @media (min-width: 768px) { .footer-move__navs-sticky .base-move__btn--secondary { border-top-right-radius: 20px !important; } .footer-move__navs-sticky__inner { padding-inline: 20px; margin-inline: auto; } } @media (min-width: 1024px) { .footer-move__navs-sticky .base-move__btn { width: 260px !important; height: 70px; font-size: 16px; letter-spacing: 0.64px; } } .base-move { overflow: hidden; } .base-move__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1280px; height: auto; } .base-move__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid transparent; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 600 !important; letter-spacing: 0.12px; height: 40px; border-radius: 10px; padding-inline: 40px; -webkit-transition: 0.5s; transition: 0.5s; } .base-move__btn--primary { background-color: #292929; border-color: #292929; color: white; } .base-move__btn--primary:hover, .base-move__btn--primary:focus { color: white; } .base-move__btn--secondary { background-color: white; border-color: #535353; color: #535353; } .base-move__btn--secondary:hover, .base-move__btn--secondary:focus { color: #535353; } @media (min-width: 1024px) { .base-move__btn { height: 54px; font-size: 19.2px; letter-spacing: 0.8px; } .base-move__btn:hover, .base-move__btn:active, .base-move__btn:visited, .base-move__btn:focus { text-decoration: none; } .base-move__btn--primary:hover { background-color: #535353; border-color: #535353; color: white; } .base-move__btn--secondary:hover { background-color: #535353; color: white; } } .base-move__hide--sp { display: none; } .base-move__hide--pc { display: block; } @media (min-width: 768px) { .base-move__hide--sp { display: block; } .base-move__hide--pc { display: none; } } .header-junni__main { position: relative; } .header-junni__main span { font: 0/0 a; } .header-junni__main__logo { width: 35.89744vw; height: auto; position: absolute; top: 50px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); aspect-ratio: 70 / 51; margin-bottom: 0; } .header-junni__main__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media (min-width: 768px) { .header-junni__main__logo { width: 14.81481vw; } } @media (min-width: 1024px) { .header-junni__main__logo { top: 76px; } } .header-junni__main__bg { width: 100%; height: auto; aspect-ratio: 195 / 313; position: relative; z-index: -1; } .header-junni__main__bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 768px) { .header-junni__main__bg { width: calc(100% + 100px); aspect-ratio: 1441 / 720; margin-inline: -50px; } } .header-junni__main__icons { width: 100%; height: calc(100% + 88px); aspect-ratio: 195 / 313; position: absolute; top: 0; left: 0; overflow: hidden; } .header-junni__main__icons__inner { width: 100%; height: 100%; position: relative; z-index: 1; } @media (min-width: 768px) { .header-junni__main__icons { height: calc(100% + 70px); } } @media (min-width: 1024px) { .header-junni__main__icons { height: calc(100% + 140px); } } .header-junni__main__icon__blue, .header-junni__main__icon__cloud, .header-junni__main__icon__flower, .header-junni__main__icon__curve { height: auto; position: absolute; } .header-junni__main__icon__blue { width: 155px; top: -30px; left: -74px; -webkit-animation: animation-main-icon-left 2s infinite step-end; animation: animation-main-icon-left 2s infinite step-end; } @media (min-width: 768px) { .header-junni__main__icon__blue { top: -29px; left: -78px; } } @media (min-width: 1024px) { .header-junni__main__icon__blue { width: 150px; top: -62px; left: -15px; } } @media (min-width: 1200px) { .header-junni__main__icon__blue { width: 238px; top: -106px; left: -16px; } } .header-junni__main__icon__cloud { width: 142px; top: 159px; right: -25px; -webkit-animation: animation-main-icon-right 2s infinite step-end; animation: animation-main-icon-right 2s infinite step-end; } @media (min-width: 768px) { .header-junni__main__icon__cloud { width: 182px; top: 55px; right: -17px; } } @media (min-width: 1024px) { .header-junni__main__icon__cloud { width: 250px; } } @media (min-width: 1200px) { .header-junni__main__icon__cloud { width: 343.014px; top: 50px; right: -19px; } } .header-junni__main__icon__flower { width: 116px; bottom: 11px; left: -44px; -webkit-animation: animation-main-icon-left 2s infinite step-end; animation: animation-main-icon-left 2s infinite step-end; -webkit-animation-delay: 2.5; animation-delay: 2.5; } @media (min-width: 768px) { .header-junni__main__icon__flower { width: 130px; } } @media (min-width: 1024px) { .header-junni__main__icon__flower { width: 200px; bottom: 20px; left: -100px; } } @media (min-width: 1200px) { .header-junni__main__icon__flower { width: 261.992px; left: -97px; bottom: 24px; } } .header-junni__main__icon__curve { width: 70px; bottom: 0; right: -16px; -webkit-animation: animation-main-icon-right 2s infinite step-end; animation: animation-main-icon-right 2s infinite step-end; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } @media (min-width: 768px) { .header-junni__main__icon__curve { width: 100px; } } @media (min-width: 1024px) { .header-junni__main__icon__curve { width: 120px; } } @media (min-width: 1200px) { .header-junni__main__icon__curve { width: 164.007px; right: -19px; } } .header-junni__concept { background-color: #fefbe8; } .header-junni__concept__container { width: 100%; max-width: 1240px; height: auto; margin-inline: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; padding: 100px 20px 50px; } @media (min-width: 768px) { .header-junni__concept__container { display: grid; grid-template-columns: 1fr 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024px) { .header-junni__concept__container { padding-block: 150px 75px; gap: 116px; } } .header-junni__concept__content { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .header-junni__concept__content .base-junni__btn { max-width: 350px; } } .header-junni__concept__content__title, .header-junni__concept__content__desc { color: black; font-family: "M PLUS Rounded 1c", sans-serif; margin: 0; } .header-junni__concept__content__title { font-size: 18px; font-style: normal; font-weight: 800 !important; line-height: normal; margin-bottom: 15px; } @media (min-width: 1024px) { .header-junni__concept__content__title { font-size: 22px; line-height: 32px; } } .header-junni__concept__content__desc { font-size: 14px; font-style: normal; font-weight: 500 !important; line-height: 28px; margin-bottom: 20px; } @media (min-width: 1024px) { .header-junni__concept__content__desc { font-size: 16px; line-height: 28px; margin: 13px 0 27px; } } .header-junni__features { background-color: #fefbe8; position: relative; } .header-junni__features__sticker { position: absolute; pointer-events: none; } .header-junni__features__sticker--top { width: 93px; height: 177px; top: -39px; right: 0; } .header-junni__features__sticker--top .fg { position: absolute; top: 10px; left: 1px; max-width: 77px; -webkit-animation: 2s step-end 0s infinite normal none running animation-main-icon-right; animation: 2s step-end 0s infinite normal none running animation-main-icon-right; } .header-junni__features__sticker--bottom { width: 70px; height: 230px; bottom: -90px; left: 0; } @media (min-width: 1440px) { .header-junni__features__sticker--top { width: 180px; height: 342px; top: -60px; } .header-junni__features__sticker--top .fg { max-width: 150px; top: 16px; left: 2px; } .header-junni__features__sticker--bottom { width: 150px; height: 493px; bottom: -393px; } } .header-junni__features__container { width: 100%; max-width: 1240px; height: auto; padding: 50px 20px 100px; margin-inline: auto; position: relative; z-index: 1; } @media (min-width: 1024px) { .header-junni__features__container { padding-block: 75px 150px; } } @media (min-width: 1310px) { .header-junni__features__container { padding-inline: 0; } } .header-junni__features__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; gap: 10px; margin: 0 0 30px; } .header-junni__features__title span { color: #5d90bb; font-family: "Fredoka", sans-serif; font-size: 30px; font-style: normal; font-weight: 600 !important; line-height: normal; letter-spacing: 1.8px; } .header-junni__features__title small { color: black; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 28px; letter-spacing: 0; white-space: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; } @media (min-width: 1024px) { .header-junni__features__title span { font-size: 48px; letter-spacing: 2.88px; } .header-junni__features__title small { font-size: 16px; line-height: 28px; } } .header-junni__features__list { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style-type: none; } .header-junni__features__list li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-junni__features__list li img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .header-junni__features__list li p { color: black; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 28px; letter-spacing: 0; margin-bottom: 0; } @media (min-width: 768px) { .header-junni__features__list { grid-template-columns: repeat(3, 1fr); gap: 30px; } .header-junni__features__list li { grid-template-columns: unset; grid-template-rows: 110px 1fr; } .header-junni__features__list li p { text-align: center; -ms-flex-item-align: baseline; align-self: baseline; } } @media (min-width: 1024px) { .header-junni__features__list { grid-template-rows: unset; grid-template-columns: repeat(3, 1fr); margin-top: 52px; gap: 50px; } .header-junni__features__list li { grid-template-columns: 137px 1fr; grid-template-rows: unset; } .header-junni__features__list li p { text-align: left; -ms-flex-item-align: center; align-self: center; font-size: 16px; line-height: 32px; } } .header-junni__lineup-nav { background-color: #fefbe8; padding-bottom: 60px; } .header-junni__lineup-nav__container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1380px; } .header-junni__lineup-nav__title { text-align: center; color: #fac43e; font: 600 30px/36px "Fredoka", sans-serif; letter-spacing: 1.2px; margin: 0 0 30px; } .header-junni__lineup-nav__list { list-style-type: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; max-width: 1110px; margin-inline: auto; } .header-junni__lineup-nav__list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer; } .header-junni__lineup-nav__list li img { aspect-ratio: 33/17; } .header-junni__lineup-nav__list li p { text-align: center; font: 600 14px/2 "Fredoka", sans-serif; letter-spacing: 0.84px; margin: 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; } .header-junni__lineup-nav__list li p::after { content: ''; display: -webkit-box; display: -ms-flexbox; display: flex; width: 20px; height: 20px; background: url("https://static.lenskart.com/owndays/img/junni/circle-down.svg") no-repeat center center/contain; } @media (min-width: 768px) { .header-junni__lineup-nav__list li { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .header-junni__lineup-nav__list li:hover { opacity: 0.6; } .header-junni__lineup-nav__list li p { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (min-width: 1024px) { .header-junni__lineup-nav { padding-bottom: 96px; } .header-junni__lineup-nav__title { font-size: 48px; line-height: 58px; letter-spacing: 1.92px; margin-bottom: 60px; } .header-junni__lineup-nav__list { gap: 60px; } .header-junni__lineup-nav__list li p { font-size: 24px; line-height: 28px; letter-spacing: 1.44px; gap: 15px; } .header-junni__lineup-nav__list li p::after { width: 30px; height: 30px; } } @-webkit-keyframes animation-main-icon-left { 0% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 10% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 20% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 30% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes animation-main-icon-left { 0% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 10% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 20% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 30% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes animation-main-icon-right { 0% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 30% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes animation-main-icon-right { 0% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 10% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 20% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 30% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(0); transform: rotate(0); } } .body-junni__styles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #fefbe8; padding-bottom: 50px; } .body-junni__styles-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 60px; padding-inline: 20px; width: 100%; max-width: 1380px; margin-inline: auto; } @media (min-width: 1024px) { .body-junni__styles { padding-bottom: 138px; } .body-junni__styles-inner { gap: 100px; } } .body-junni__style { background-color: #fff; border-radius: 20px; padding: 20px 20px 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; width: 100%; overflow: hidden; } .body-junni__style-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } .body-junni__style-top-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; position: relative; z-index: 1; } .body-junni__style-top-content-img { position: absolute; z-index: -1; } .body-junni__style-top-content-title { font: 600 30px/28px "Fredoka", sans-serif; letter-spacing: 1.8px; margin: 0; } .body-junni__style-top-content-description { font: 700 14px/28px "M PLUS Rounded 1c", sans-serif; letter-spacing: 0.56px; margin: 0; } .body-junni__style-top-content--trend .body-junni__style-top-content-img--1 { max-width: 82px; right: -9px; bottom: -37px; } .body-junni__style-top-content--trend .body-junni__style-top-content-img--2 { max-width: 43px; left: -18px; bottom: -37px; } .body-junni__style-top-content--sports .body-junni__style-top-content-img--1 { display: none; } .body-junni__style-top-content--sports .body-junni__style-top-content-img--2 { max-width: 53px; right: -6px; bottom: -29px; } .body-junni__style-top-content--standard .body-junni__style-top-content-img--1 { display: none; } .body-junni__style-top-content--standard .body-junni__style-top-content-img--2 { max-width: 80px; top: -62px; left: -13px; } .body-junni__style-top-content--standard .body-junni__style-top-content-img--3 { max-width: 27px; top: calc(100% + 10px); right: 31px; } .body-junni__style-top-content--standard .body-junni__style-top-content-img--4 { max-width: 59px; top: 7px; right: -2px; } .body-junni__style-products { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px 23px; width: 100%; } .body-junni__style-products-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .body-junni__style-products.has-features { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-junni__style-products.has-features .body-junni__style-products-item { gap: 40px; } .body-junni__style-product { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .body-junni__style-product.is-new { position: relative; } .body-junni__style-product.is-new::after { content: 'New'; position: absolute; top: 0; left: 0; border-radius: 160px; border-radius: 10rem; background: #fac43e; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: 500 16px/1 "Fredoka", sans-serif; letter-spacing: 0.64px; height: 27px; padding-inline: 15px; } .body-junni__style-product-img { aspect-ratio: 900/563; -o-object-fit: cover; object-fit: cover; } .body-junni__style-product-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; width: 100%; margin-inline: auto; } .body-junni__style-product-inner .base-junni__btn { max-width: 100%; } .body-junni__style-product-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .body-junni__style-product-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .body-junni__style-product-code { font: 500 18px/13px "Fredoka", sans-serif; letter-spacing: 0.72px; margin: 0; } .body-junni__style-product-price { font: 500 14px/120% "M PLUS Rounded 1c", sans-serif; letter-spacing: 0.42px; margin: 0; } .body-junni__style-product-colors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .body-junni__style-product-color { display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; border-radius: 50%; border: none; padding: 0; margin: 4px; cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: cover; outline: 1px solid transparent; outline-offset: 4px; font: 0/0 a; } .body-junni__style-product-color.is-active, .body-junni__style-product-color:focus:has(.is-active) { outline: 1px solid #000; } .body-junni__style-product-features-container { position: relative; } .body-junni__style-product-features-custom-nav { position: absolute; bottom: 20px; right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; z-index: 10; } .body-junni__style-product-features-custom-nav .custom-nav-btn { width: 40px; height: 40px; background-color: #5d90bb; border-radius: 50%; border: 2px solid #5d90bb; color: white; font-size: 18px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .body-junni__style-product-features-custom-nav .custom-nav-btn:hover { background-color: #4a7ba0; -webkit-transform: scale(1.1); transform: scale(1.1); } .body-junni__style-product-features-custom-nav .custom-nav-btn:disabled { background-color: #ccc; border-color: #ccc; cursor: not-allowed; -webkit-transform: none; transform: none; } .body-junni__style-product-features .slick-list { overflow: visible; } .body-junni__style-product-features .slick-dots { list-style: none; padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; right: 0; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; } .body-junni__style-product-features .slick-dots li { display: -webkit-box; display: -ms-flexbox; display: flex; } .body-junni__style-product-features .slick-dots li button { display: -webkit-box; display: -ms-flexbox; display: flex; width: 8px; height: 8px; background-color: #000; opacity: 0.3; border-radius: 50%; border: none; padding: 0; margin: 0; cursor: pointer; font: 0/0 a; } .body-junni__style-product-features .slick-dots li.slick-active button { opacity: 1; } .body-junni__style-product-features .slick-arrow { font: 0/0 a; width: 40px; height: 40px; background-color: #5d90bb; border-radius: 50%; border: 2px solid #5d90bb; padding: 0; margin: 0; cursor: pointer; position: absolute; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: 20px auto; } .body-junni__style-product-features .slick-arrow.slick-disabled { background-color: #fff; cursor: default; } .body-junni__style-product-features .slick-prev { right: 55px; background-image: url("https://static.lenskart.com/owndays/img/junni/arrow-prev.svg"); } .body-junni__style-product-features .slick-prev.slick-disabled { background-image: url("https://static.lenskart.com/owndays/img/junni/arrow-prev--blue.svg"); } .body-junni__style-product-features .slick-next { right: 0; background-image: url("https://static.lenskart.com/owndays/img/junni/arrow-next.svg"); } .body-junni__style-product-features .slick-next.slick-disabled { background-image: url("https://static.lenskart.com/owndays/img/junni/arrow-next--blue.svg"); } .body-junni__style-product-features .slick-slide div:focus-visible { outline: none; } .body-junni__style-product-feature { padding-inline: 10px; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .body-junni__style-product-feature-img { aspect-ratio: 600/400; } .body-junni__style-product-feature-description { font: 700 14px/200% "M PLUS Rounded 1c", sans-serif; letter-spacing: 0.56px; max-width: 175px; margin: 0 auto; } @media (max-width: 767px) { .body-junni__style-top-img--trend { margin-inline: -20px; } .body-junni__style-top-img--sports { margin-inline: -6px -31px; } .body-junni__style-top-img--standard { margin-inline: -23px; } .body-junni__style-top-content { padding-inline: 20px; } .body-junni__style-product-features { margin-inline: -20px; } .body-junni__style-product-feature { padding-bottom: 18px; } } @media (min-width: 768px) { .body-junni__style-top { position: relative; } .body-junni__style-top-img--trend { max-width: 653px; margin-left: calc(50% - 144px); } .body-junni__style-top-img--sports { max-width: 770px; margin-left: calc(50% - 175px); } .body-junni__style-top-img--standard { max-width: 653px; margin-left: calc(50% - 144px); } .body-junni__style-top-content { max-width: 300px; position: absolute; top: 50%; right: calc(50% + 120px); translate: 0 -50%; } .body-junni__style-top-content--trend .body-junni__style-top-content-img--1 { max-width: 163px; top: -85px; right: calc(100% + 54px); bottom: auto; } .body-junni__style-top-content--trend .body-junni__style-top-content-img--2 { max-width: 85px; top: 100%; right: calc(100% + 11px); left: auto; bottom: auto; } .body-junni__style-top-content--sports .body-junni__style-top-content-img--1 { display: block; max-width: 84px; bottom: calc(100% + 57px); right: 100%; } .body-junni__style-top-content--sports .body-junni__style-top-content-img--2 { max-width: 85px; top: calc(100% + 36px); left: -55px; right: auto; bottom: auto; } .body-junni__style-top-content--standard .body-junni__style-top-content-img--1 { display: block; max-width: 119px; bottom: calc(100% + 46px); right: calc(100% + 64px); } .body-junni__style-top-content--standard .body-junni__style-top-content-img--2 { max-width: 150px; top: 44px; left: auto; right: calc(100% + 35px); } .body-junni__style-top-content--standard .body-junni__style-top-content-img--3 { max-width: 50px; top: calc(100% + 79px); left: 144px; } .body-junni__style-top-content--standard .body-junni__style-top-content-img--4 { display: none; } .body-junni__style-products { grid-template-columns: repeat(2, 1fr); } .body-junni__style-products.has-features .body-junni__style-products-item { display: grid; grid-template-columns: 50% 50%; gap: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .body-junni__style-products.has-features .body-junni__style-product { padding-right: 20px; } .body-junni__style-product { position: relative; z-index: 1; } .body-junni__style-product-features { padding-bottom: 60px; } .body-junni__style-product-features::after { content: ''; position: absolute; top: 0; right: calc(100% - 20px); height: 100%; width: 10000%; background-color: #fff; } .body-junni__style-product-feature { padding-inline: 20px 0; } .body-junni__style-product-inner { max-width: 350px; } } @media (min-width: 1024px) { .body-junni__style { padding: 50px 50px 100px; gap: 60px; } .body-junni__style-top-content { gap: 20px; } .body-junni__style-top-content-title { font-size: 40px; letter-spacing: 2.4px; } .body-junni__style-top-content-description { font-size: 16px; line-height: 32px; letter-spacing: 0.64px; } .body-junni__style-products { grid-template-columns: repeat(3, 1fr); } .body-junni__style-product.is-new::after { height: 30px; font-size: 20px; letter-spacing: 0.8px; } .body-junni__style-product-features { padding-bottom: 80px; } .body-junni__style-product-features::after { right: calc(100% - 40px); } .body-junni__style-product-feature { padding-left: 40px; } .body-junni__style-product-feature-description { max-width: 216px; } } .body-junni__optional-lenses, .body-junni__tips { padding-block: 60px 50px; } .body-junni__optional-lenses-inner, .body-junni__tips-inner { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 1280px; } .body-junni__optional-lenses-title, .body-junni__tips-title { color: #67bbc7; text-align: center; font: 600 30px/36px "Fredoka", sans-serif; letter-spacing: 1.2px; margin: 0 0 30px; } .body-junni__optional-lenses-list, .body-junni__tips-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; } .body-junni__optional-lenses-item, .body-junni__tips-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; position: relative; } .body-junni__optional-lenses-item-img, .body-junni__tips-item-img { aspect-ratio: 781/460; } .body-junni__optional-lenses-item-content, .body-junni__tips-item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; } .body-junni__optional-lenses-item-title, .body-junni__tips-item-title { font: 800 18px/27px "M PLUS Rounded 1c", sans-serif; letter-spacing: 0.72px; margin: 0; } .body-junni__optional-lenses-item-description, .body-junni__optional-lenses-item-link, .body-junni__tips-item-description, .body-junni__tips-item-link { font: 500 14px/28px "M PLUS Rounded 1c", sans-serif; margin: 0; } .body-junni__optional-lenses-item-link, .body-junni__tips-item-link { color: #0094c8; } .body-junni__optional-lenses-item-link:hover, .body-junni__optional-lenses-item-link:focus, .body-junni__tips-item-link:hover, .body-junni__tips-item-link:focus { color: #0094c8; text-decoration: none; } .body-junni__optional-lenses-item-link::after, .body-junni__tips-item-link::after { content: ''; position: absolute; inset: 0; } @media (min-width: 768px) { .body-junni__optional-lenses-list, .body-junni__tips-list { grid-template-columns: repeat(3, 1fr); } .body-junni__optional-lenses-item, .body-junni__tips-item { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .body-junni__optional-lenses-item:hover, .body-junni__tips-item:hover { opacity: 0.6; } } @media (min-width: 1024px) { .body-junni__optional-lenses, .body-junni__tips { padding-block: 150px 75px; } .body-junni__optional-lenses-title, .body-junni__tips-title { font-size: 48px; line-height: 58px; letter-spacing: 1.92px; margin-bottom: 40px; } .body-junni__optional-lenses-list, .body-junni__tips-list { gap: 35px; } .body-junni__optional-lenses-item, .body-junni__tips-item { gap: 20px; } .body-junni__optional-lenses-item-title, .body-junni__tips-item-title { font-size: 20px; line-height: 30px; letter-spacing: 0.8px; } } .body-junni__tips { padding-block: 50px 100px; } .body-junni__tips-title { color: #dd6b57; } @media (min-width: 768px) { .body-junni__tips-list { grid-template-columns: repeat(6, 1fr); } .body-junni__tips-item { grid-column: span 2; } .body-junni__tips-item:nth-child(1) { grid-column: 2/4; } } .footer-junni { position: relative; height: 55px; } .footer-junni.is-sticky .footer-junni__inner { position: fixed; bottom: 0; right: 0; z-index: 9; } .footer-junni__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .footer-junni__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 150px; height: 55px; background-color: #fff; border: 1px solid #67BBC7; color: #67BBC7; font: 500 12px/100% "M PLUS Rounded 1c", sans-serif; } .footer-junni__btn:hover, .footer-junni__btn:focus { text-decoration: none; color: #67BBC7; } .footer-junni__btn--left { background-color: #67BBC7; color: #fff; border-radius: 15px 0px 0px 0px; } .footer-junni__btn--left:hover, .footer-junni__btn--left:focus { color: #fff; } .footer-junni__btn--right { border-right-width: 0; border-bottom-width: 0; } @media (min-width: 1024px) { .footer-junni { height: 70px; } .footer-junni.is-sticky .footer-junni__inner { left: 50%; right: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .footer-junni__inner { padding-inline: 20px; width: 100%; max-width: 1280px; margin-inline: auto; } .footer-junni__btn { width: 260px; height: 70px; font-size: 16px; border-width: 2px; } .footer-junni__btn--left { border-radius: 20px 0px 0px 0px; } .footer-junni__btn--right { border-radius: 0px 20px 0px 0px; border-bottom-width: 0; } } .base-junni { overflow: hidden; } .base-junni__btn { width: 100%; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #5D90BB; border-radius: 10px; } .base-junni__btn span { color: white; text-align: center; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 6.8px; letter-spacing: 0.42px; } @media (min-width: 1024px) { .base-junni__btn span { font-size: 16px; line-height: 19.2px; letter-spacing: 0.48px; } } .base-junni__btn:hover, .base-junni__btn:active, .base-junni__btn:visited, .base-junni__btn:focus { text-decoration: none !important; } @media (min-width: 1024px) { .base-junni__btn { -webkit-transition: 0.5s; transition: 0.5s; cursor: pointer; } .base-junni__btn:hover { background-color: #67BBC7; } } .contact-lens-header-image__main { width: 100%; height: auto; } .contact-lens-header-image__main__container { width: 100%; height: auto; position: relative; } @media (min-width: 1200px) { .contact-lens-header-image__main__container { margin-bottom: -4px; } } .contact-lens-header-image__main__icon-heart, .contact-lens-header-image__main__icon-tag { z-index: 3; } .contact-lens-header-image__main__icon-heart { display: none; } .contact-lens-header-image__main__icon-tag { position: absolute; top: 56px; left: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; } .contact-lens-header-image__main__icon-tag img { width: 94px; height: auto; } .contact-lens-header-image__main__icon-tag[data-is-custom-tags='true'] img { width: auto; height: 30px; } @media (min-width: 768px) { .contact-lens-header-image__main__icon-heart { width: 20px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 25px; right: 12px; background-color: transparent; } .contact-lens-header-image__main__icon-heart img { width: 20px; height: 20px; } .contact-lens-header-image__main__icon-tag { top: 25px; } } @media (min-width: 1024px) { .contact-lens-header-image__main__icon-heart { cursor: pointer; } .contact-lens-header-image__main__icon-heart, .contact-lens-header-image__main__icon-tag { top: 40px; } } @media (min-width: 1200px) { .contact-lens-header-image__main__icon-back, .contact-lens-header-image__main__icon-cart { display: none; } .contact-lens-header-image__main__icon-heart { right: 24px; width: 24px; height: 24px; background-color: transparent; } .contact-lens-header-image__main__icon-heart img { width: 24px; height: 24px; } .contact-lens-header-image__main__icon-tag { left: 24px; } .contact-lens-header-image__main__icon-tag img { width: 130px; height: auto; } } @media (min-width: 1440px) { .contact-lens-header-image__main__icon-heart, .contact-lens-header-image__main__icon-tag { top: 32px; } } @media (min-width: 1920px) { .contact-lens-header-image__main__icon-heart, .contact-lens-header-image__main__icon-tag { top: 44.52px; } } .contact-lens-header-image__main__preview { width: 100%; height: auto; } @media (min-width: 768px) { .contact-lens-header-image__main__preview { position: relative; overflow: hidden; aspect-ratio: 137/82; } .contact-lens-header-image__main__preview picture { overflow: hidden; aspect-ratio: 137/82; } .contact-lens-header-image__main__preview::before, .contact-lens-header-image__main__preview::after { content: ''; top: -90px; position: absolute; width: 450px; height: 213px; border-radius: 450px; background: rgba(255, 255, 255, .8); filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(50px); filter: blur(50px); -webkit-transform: scale(0.5); transform: scale(0.5); z-index: 2; } .contact-lens-header-image__main__preview::before { left: -180px; } .contact-lens-header-image__main__preview::after { right: -180px; } } @media (min-width: 1024px) { .contact-lens-header-image__main__preview::before, .contact-lens-header-image__main__preview::after { content: ''; top: -80px; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(50px); filter: blur(50px); -webkit-transform: scale(0.5); transform: scale(0.5); } } @media (min-width: 1440px) { .contact-lens-header-image__main__preview::before, .contact-lens-header-image__main__preview::after { -webkit-transform: scale(0.8); transform: scale(0.8); } } @media (min-width: 1920px) { .contact-lens-header-image__main__preview::before, .contact-lens-header-image__main__preview::after { -webkit-transform: scale(1); transform: scale(1); } } .contact-lens-header-image__main__preview img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .contact-lens-header-image__main__preview > .slick-dots { list-style-type: none; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; gap: 4px; position: absolute; bottom: 12px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin: 0; padding: 0; } .contact-lens-header-image__main__preview > .slick-dots li button { border: none; outline: none; padding: 0; margin: 0; width: 8px; height: 2px; display: -webkit-box; display: -ms-flexbox; display: flex; font: 0 / 0 a; border-radius: 8px; background: rgba(102, 102, 142, .4); } .contact-lens-header-image__main__preview > .slick-dots li.slick-active button { background: #000042; } .contact-lens-header-image__main__preview-previous, .contact-lens-header-image__main__preview-next { display: none; } @media (min-width: 1200px) { .contact-lens-header-image__main__preview-previous, .contact-lens-header-image__main__preview-next { display: block; } .contact-lens-header-image__main__preview-previous[data-length='1'], .contact-lens-header-image__main__preview-next[data-length='1'] { display: none; } .contact-lens-header-image__main__preview-previous::before, .contact-lens-header-image__main__preview-next::before { content: ''; background-size: contain; background-repeat: no-repeat; background-position: center; width: 40px; height: 40px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; z-index: 5; cursor: pointer; } .contact-lens-header-image__main__preview-previous::before { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/slick-prev.svg"); left: 16px; } .contact-lens-header-image__main__preview-next::before { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/slick-next.svg"); right: 16px; } } .contact-lens-header-image__main__navigation { display: none; } .contact-lens-header-image__main__navigation-next { position: absolute; top: 408px; left: -48px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 40px; height: 40px; display: none; } @media (min-width: 1200px) { .contact-lens-header-image__main__navigation-next { display: block; cursor: pointer; } .contact-lens-header-image__main__navigation-next[data-length='1'], .contact-lens-header-image__main__navigation-next[data-length='2'], .contact-lens-header-image__main__navigation-next[data-length='3'], .contact-lens-header-image__main__navigation-next[data-length='4'], .contact-lens-header-image__main__navigation-next[data-length='5'] { display: none; } } @media (min-width: 768px) { .contact-lens-header-image__main__navigation { display: block; width: 100%; height: auto; margin-top: 4px; padding-inline: 20px; padding-bottom: 12px; } .contact-lens-header-image__main__navigation__length-1 { display: none; } .contact-lens-header-image__main__navigation > .slick-list { height: auto !important; } .contact-lens-header-image__main__navigation > .slick-list .slick-slide { width: 100%; min-width: 64px; max-width: 64px; height: 100%; aspect-ratio: 1/1; } .contact-lens-header-image__main__navigation > .slick-list .slick-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .contact-lens-header-image__main__navigation > .slick-list .slick-current img { border-radius: 4px; border: 1px solid #292929; } .contact-lens-header-image__main__navigation > .slick-list .slick-track { width: 100% !important; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; } } @media (min-width: 1024px) { .contact-lens-header-image__main__navigation > .slick-list .slick-slide { cursor: pointer; } } @media (min-width: 1200px) { .contact-lens-header-image__main__navigation { width: 104px; max-height: 435px; overflow: hidden; position: absolute; top: -5px; left: -80px; padding-left: 0; padding-bottom: 0; } .contact-lens-header-image__main__navigation__length-1 { display: block; } .contact-lens-header-image__main__navigation > .slick-list .slick-track { width: 64px !important; display: block !important; gap: unset; } .contact-lens-header-image__main__navigation > .slick-list .slick-slide { width: 64px; height: 88px; } .contact-lens-header-image__main__navigation > .slick-list .slick-slide img { width: 64px; height: 64px; } } .contact-lens-header-title__container { width: 100%; height: auto; padding: 16px; background-color: white; } @media (min-width: 1024px) { .contact-lens-header-title__container { padding: 32px 32px 16px 32px; } } .contact-lens-header-title__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; margin: 6px 0 12px 0; position: relative; } .contact-lens-header-title__title strong, .contact-lens-header-title__title small { font-family: "Founders Grotesk", sans-serif; } .contact-lens-header-title__title strong { font-size: 22px; font-weight: 600; line-height: 24px; color: black; } .contact-lens-header-title__title small { font-size: 14px; font-weight: 400; line-height: 20px; color: #7c7c7c; } @media (min-width: 1024px) { .contact-lens-header-title__title { gap: 8px; } .contact-lens-header-title__title strong { letter-spacing: 0.22px; } .contact-lens-header-title__title small { font-size: 16px; } } .contact-lens-header-title__icon-heart { width: 20px; height: 20px; position: absolute; right: 6px; top: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; } .contact-lens-header-title__icon-heart img { width: 100%; height: 100%; } @media (min-width: 1024px) { .contact-lens-header-title__icon-heart { cursor: pointer; } } @media (min-width: 1200px) { .contact-lens-header-title__icon-heart { display: none; } } .contact-lens-header-title__price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .contact-lens-header-title__price-desc { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #292929; margin: 0; } .contact-lens-header-title__price-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .contact-lens-header-title__price-before { position: relative; } .contact-lens-header-title__price-before::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 1px; background-color: #a5a5a5; } .contact-lens-header-title__price-before span { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; color: #a5a5a5; } .contact-lens-header-title__price-after span { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; color: black; } @media (min-width: 1024px) { .contact-lens-header-title__price-after span { font-size: 22px; letter-spacing: 0.22px; } } .contact-lens-header-title__best-offer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2px; margin-top: 32.5px; border-radius: 8px; border: 0.5px solid #B47E00; background-color: #FBF8EF; padding: 12px; } .contact-lens-header-title__best-offer-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 10px; font-weight: 500; line-height: 12px; color: #B47E00; margin: 0; padding-left: 15.333px; position: relative; } .contact-lens-header-title__best-offer-title::before { content: ''; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 11.333px; height: 12px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/emoji-offer.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .contact-lens-header-title__best-offer-discount { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; color: black; margin: 0; } .contact-lens-type__container { width: 100%; height: auto; padding: 16px; background-color: white; } @media (min-width: 1024px) { .contact-lens-type__container { padding: 16px 32px; } } .contact-lens-type__title { font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-weight: 600; line-height: 24px; color: black; margin-bottom: 16px; } @media (min-width: 768px) { .contact-lens-type__title { font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; color: #A5A5A5; } } .contact-lens-type__list { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .contact-lens-type__list li { width: 100px; padding: 12px 16px; border-radius: 8px; border: 1.5px solid #D9D9D9; background-color: white; } .contact-lens-type__list li span { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; color: black; } .contact-lens-type__list li[data-selected='true'] { border: 1.5px solid black; } @media (min-width: 1024px) { .contact-lens-type__list li { cursor: pointer; } } .base-contact-lens-dropdown { display: none; } @media (min-width: 768px) { .base-contact-lens-dropdown { display: block; } } .base-contact-lens-dropdown__container { width: 196px; height: 336px; padding: 8px; background-color: white; position: absolute; top: calc(100% + 1px); left: 0; border-radius: 8px; -webkit-box-shadow: 0px -4px 20px 0px rgba(0, 0, 66, .1); box-shadow: 0px -4px 20px 0px rgba(0, 0, 66, .1); z-index: 10; } .base-contact-lens-dropdown__list { width: 100%; height: 100%; overflow-y: auto; list-style: none; padding: 0; margin: 0; scrollbar-width: auto; } .base-contact-lens-dropdown__list::-webkit-scrollbar { display: block !important; width: 4px; height: 32px; } .base-contact-lens-dropdown__list::-webkit-scrollbar-thumb { background-color: #7c7c7c; border-radius: 6px; } .base-contact-lens-dropdown__item { width: 100%; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 30px 0 12px; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; color: #292929; line-height: 20px; position: relative; } .base-contact-lens-dropdown__item[data-selected='true'] { font-weight: 600; } .base-contact-lens-dropdown__item[data-selected='true']::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 8px; width: 16px; height: 16px; background-image: url("https://static1.lenskart.com/owndays/img/contact-lens-pdp/icons/check-dropdown.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } @media (min-width: 768px) { .base-contact-lens-modal { display: none; } } .base-contact-lens-modal-backdrop { position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); z-index: 9; } .base-contact-lens-modal__container { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; border-top-left-radius: 16px; border-top-right-radius: 16px; z-index: 10; -webkit-box-shadow: 0px -4px 20px 0px rgba(0, 0, 66, .1); box-shadow: 0px -4px 20px 0px rgba(0, 0, 66, .1); } .base-contact-lens-modal__header { width: 100%; height: 56px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #d9d9d9; padding-inline: 16px; } .base-contact-lens-modal__header-title { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600; line-height: 24px; color: black; letter-spacing: 0.18px; margin: 0; } .base-contact-lens-modal__header-close { width: 32px; height: 32px; background-color: transparent; border: none; padding: 0; } .base-contact-lens-modal__header-close-icon { display: block; width: 100%; height: 100%; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/close.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .base-contact-lens-modal__list { list-style-type: none; width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; margin-bottom: 20px; } .base-contact-lens-modal__list-container { padding-inline: 16px; } .base-contact-lens-modal__list-item { width: 100%; height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .base-contact-lens-modal__list-item::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #d9d9d9; } .base-contact-lens-modal__list-item[data-selected='true']::before { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/selected-circle.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .base-contact-lens-modal__list-item[data-selected='true'] span { font-weight: 600; } .base-contact-lens-modal__list-item span { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 400; line-height: 20px; color: black; letter-spacing: 0.16px; padding-left: 24px; } .base-contact-lens-modal__slide-up { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-animation: contactLensModalSlideUp 0.3s forwards; animation: contactLensModalSlideUp 0.3s forwards; } .base-contact-lens-modal__slide-down { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation: contactLensModalSlideDown 0.3s forwards; animation: contactLensModalSlideDown 0.3s forwards; } .base-contact-lens-modal__no-scroll { overflow: hidden; } @-webkit-keyframes contactLensModalSlideUp { from { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes contactLensModalSlideUp { from { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes contactLensModalSlideDown { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes contactLensModalSlideDown { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(100%); transform: translateY(100%); } } .contact-lens-select-power-and-boxes__container { width: 100%; height: auto; padding: 16px; background-color: #f7f7f7; } @media (min-width: 768px) { .contact-lens-select-power-and-boxes__container { padding: 16px 16px 32px 16px; background-color: white; } } @media (min-width: 1024px) { .contact-lens-select-power-and-boxes__container { padding: 16px 32px 32px 32px; } } .contact-lens-select-power-and-boxes__title { font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-weight: 600; line-height: 24px; color: black; margin-bottom: 12px; } @media (min-width: 768px) { .contact-lens-select-power-and-boxes__title { font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; color: #a5a5a5; } } @media (min-width: 1024px) { .contact-lens-select-power-and-boxes__title { margin-bottom: 16px; } } .contact-lens-select-power-and-boxes__list { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; background-color: white; border-radius: 16px; padding: 8px 16px; } @media (min-width: 768px) { .contact-lens-select-power-and-boxes__list { gap: 8px; border: 1px solid #f2f2f2; -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .1); } } .contact-lens-select-power-and-boxes__item { width: 100%; height: auto; padding-left: 32px; padding: 16px 0; position: relative; } .contact-lens-select-power-and-boxes__item::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 16px; height: 16px; background-color: white; border-radius: 50%; border: 1px solid #7c7c7c; } .contact-lens-select-power-and-boxes__item:after { content: ''; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: -4px; width: 100%; height: 1px; background-color: #f2f2f2; } .contact-lens-select-power-and-boxes__item:last-child::after { display: none; } .contact-lens-select-power-and-boxes__item[data-selected='true']::before { top: 19px; -webkit-transform: unset; transform: unset; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/selected-circle.svg"); background-size: 16px; background-position: center; background-repeat: no-repeat; } @media (min-width: 768px) { .contact-lens-select-power-and-boxes__item:after { bottom: -2px; } } @media (min-width: 1024px) { .contact-lens-select-power-and-boxes__item:before { cursor: pointer; } } .contact-lens-select-power-and-boxes__item-title { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 400; line-height: 20px; color: #7c7c7c; letter-spacing: 0.16px; padding-left: 32px; } @media (min-width: 1024px) { .contact-lens-select-power-and-boxes__item-title { font-size: 18px; line-height: 24px; letter-spacing: 0.18px; } } .contact-lens-select-power-and-boxes__power__list { list-style: none; padding: 24px 0 0 0; margin: 0; } .contact-lens-select-power-and-boxes__power__item-box { border-radius: 8px; border: 1px solid #d9d9d9; margin-bottom: 5px; } .contact-lens-select-power-and-boxes__power__item-box[data-is-expired='true'] { border: 1px solid #f7f7f7; background-color: #f7f7f7; pointer-events: none; } .contact-lens-select-power-and-boxes__power__item-title { width: 100%; height: auto; padding: 10px 38px; position: relative; } .contact-lens-select-power-and-boxes__power__item-title span { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #292929; } .contact-lens-select-power-and-boxes__power__item-title::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 8px; width: 24px; height: 24px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/person.svg"); background-size: 24px; background-position: center; background-repeat: no-repeat; } .contact-lens-select-power-and-boxes__power__item-title::after { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #292929; } .contact-lens-select-power-and-boxes__power__item-title[data-selected='true']::after { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/selected-circle.svg"); background-size: 16px; background-position: center; } .contact-lens-select-power-and-boxes__power__item-title[data-is-expired='true'] span { color: #a5a5a5; position: relative; } .contact-lens-select-power-and-boxes__power__item-title[data-is-expired='true'] span::before { content: '|'; position: absolute; top: 35%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -8px; width: 3px; height: 100%; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #d9d9d9; } .contact-lens-select-power-and-boxes__power__item-title[data-is-expired='true'] span::after { content: 'expired'; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -56px; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #bf0000; } .contact-lens-select-power-and-boxes__power__item-title[data-is-expired='true']::before { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/person-expired.svg"); } .contact-lens-select-power-and-boxes__power__item-title[data-is-expired='true']::after { border: 1px solid #d9d9d9; } .contact-lens-select-power-and-boxes__power__item-value__header { display: grid; grid-template-columns: repeat(3, 1fr); background-color: #f7f7f7; padding: 12px; } .contact-lens-select-power-and-boxes__power__item-value__header span { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #7c7c7c; margin: auto; } .contact-lens-select-power-and-boxes__power__item-value__result { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px; } .contact-lens-select-power-and-boxes__power__item-value__result span { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; color: #292929; margin: auto; } .contact-lens-select-power-and-boxes__power__item-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 16px; } .contact-lens-select-power-and-boxes__power__item-date p { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; color: #7c7c7c; letter-spacing: 0.12px; color: #535353; margin: 0; } .contact-lens-select-power-and-boxes__power__no-power, .contact-lens-select-power-and-boxes__power__need-to-login { margin-top: 16px; } .contact-lens-select-power-and-boxes__power__no-power p, .contact-lens-select-power-and-boxes__power__need-to-login p { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.14px; color: #b47e00; margin: 0; } .contact-lens-select-power-and-boxes__power__need-to-login p { margin-bottom: 12px; } .contact-lens-select-power-and-boxes__power__need-to-login a { font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; color: #0094c8; position: relative; } .contact-lens-select-power-and-boxes__power__need-to-login a::before { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 1px; background-color: #0094c8; } .contact-lens-select-power-and-boxes__power__need-to-login a::after { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -20px; width: 16px; height: 16px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/arrow-right-blue.svg"); background-size: 16px; background-position: center; background-repeat: no-repeat; } .contact-lens-select-power-and-boxes__power__need-to-login a:hover, .contact-lens-select-power-and-boxes__power__need-to-login a:active, .contact-lens-select-power-and-boxes__power__need-to-login a:visited, .contact-lens-select-power-and-boxes__power__need-to-login a:focus { text-decoration: none; } .contact-lens-select-power-and-boxes__power-manually { padding: 16px 0 0 0; } .contact-lens-select-power-and-boxes__power-manually__container { display: grid; gap: 16px; } .contact-lens-select-power-and-boxes__power-manually__container[data-is-same-power='true'] { grid-template-columns: 1fr; } .contact-lens-select-power-and-boxes__power-manually__container[data-is-same-power='false'] { grid-template-columns: 1fr 1fr; } .contact-lens-select-power-and-boxes__power-manually__title { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; color: black; letter-spacing: 0.16px; padding-left: 32px; position: relative; } .contact-lens-select-power-and-boxes__power-manually__title::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 20px; height: 20px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/left-eye.svg"); background-size: 20px; background-position: center; background-repeat: no-repeat; } .contact-lens-select-power-and-boxes__power-manually__title[data-key='right-eye']::before { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/right-eye.svg"); } .contact-lens-select-power-and-boxes__power-manually__title[data-key='left-and-right-eyes']::before { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/left-right-eyes.svg"); } .contact-lens-select-power-and-boxes__power-manually__button { width: 100%; height: auto; padding: 12px 0; border-radius: 8px; border: 1px solid #292929; background-color: white; margin-bottom: 16px; position: relative; } .contact-lens-select-power-and-boxes__power-manually__button:last-child { margin-bottom: 0; } .contact-lens-select-power-and-boxes__power-manually__button::before, .contact-lens-select-power-and-boxes__power-manually__button::after { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; background-size: 16px; background-position: center; background-repeat: no-repeat; } .contact-lens-select-power-and-boxes__power-manually__button::before { left: 8px; } .contact-lens-select-power-and-boxes__power-manually__button[data-button-type='power']::before { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/power-add-remove.svg"); background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/power-add-remove.svg"); } .contact-lens-select-power-and-boxes__power-manually__button[data-button-type='quantity']::before { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/boxes.svg"); } .contact-lens-select-power-and-boxes__power-manually__button::after { right: 8px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/arrow-down.svg"); } .contact-lens-select-power-and-boxes__power-manually__button span { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; color: #292929; padding-left: 30px; } @media (min-width: 1024px) { .contact-lens-select-power-and-boxes__power-manually__button { cursor: pointer; } } .contact-lens-select-power-and-boxes__power-manually__same-power { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; margin-top: 16px; } .contact-lens-select-power-and-boxes__power-manually__same-power span { width: 16px; height: 16px; border-radius: 2px; border: 1px solid #292929; } .contact-lens-select-power-and-boxes__power-manually__same-power span[data-is-checked='true'] { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/check.svg"); background-size: 16px; background-position: center; background-repeat: no-repeat; border: none; } @media (min-width: 1024px) { .contact-lens-select-power-and-boxes__power-manually__same-power span { cursor: pointer; } } .contact-lens-select-power-and-boxes__power-manually__same-power p { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 400; line-height: 20px; color: #535353; letter-spacing: 0.16px; margin: 0; } .contact-lens-select-power-and-boxes__submit-later { padding: 16px 0 0 0; } .contact-lens-select-power-and-boxes__with-or-without-power { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: -4px 0 0 0; padding-bottom: 12px; } .contact-lens-select-power-and-boxes__with-or-without-power a { width: 100%; height: 40px; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: white; border: 1px solid #e6e6ec; } .contact-lens-select-power-and-boxes__with-or-without-power a span { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; color: black; letter-spacing: 0.12px; text-transform: uppercase; color: #7c7c7c; } .contact-lens-select-power-and-boxes__with-or-without-power a:hover, .contact-lens-select-power-and-boxes__with-or-without-power a:active, .contact-lens-select-power-and-boxes__with-or-without-power a:visited, .contact-lens-select-power-and-boxes__with-or-without-power a:focus { text-decoration: none; } .contact-lens-select-power-and-boxes__with-or-without-power a[data-selected='true'] { background-color: black; } .contact-lens-select-power-and-boxes__with-or-without-power a[data-selected='true'] span { color: white; border: 1px solid black; } @media (min-width: 1024px) { .contact-lens-select-power-and-boxes__with-or-without-power a { cursor: pointer; } } .contact-lens-select-power-and-boxes__without-power { background-color: white; border-radius: 16px; padding: 16px; } .contact-lens-select-power-and-boxes__without-power__container { display: grid; gap: 16px; } .contact-lens-select-power-and-boxes__without-power__container[data-is-same-power='true'] { grid-template-columns: 1fr; } .contact-lens-select-power-and-boxes__without-power__container[data-is-same-power='false'] { grid-template-columns: 1fr 1fr; } .contact-lens-select-power-and-boxes__without-power__same-power { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; margin-top: 16px; } .contact-lens-select-power-and-boxes__without-power__same-power span { width: 16px; height: 16px; border-radius: 2px; border: 1px solid #292929; } .contact-lens-select-power-and-boxes__without-power__same-power span[data-is-checked='true'] { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/check.svg"); background-size: 16px; background-position: center; background-repeat: no-repeat; border: none; } @media (min-width: 1024px) { .contact-lens-select-power-and-boxes__without-power__same-power span { cursor: pointer; } } .contact-lens-select-power-and-boxes__without-power__same-power p { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 400; line-height: 20px; color: #535353; letter-spacing: 0.16px; margin: 0; } .contact-lens-details__container { padding: 16px; background-color: white; } @media (min-width: 1024px) { .contact-lens-details__container { padding: 24px 32px; } } .contact-lens-details__title { font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-weight: 600; line-height: 24px; color: black; margin-bottom: 0; position: relative; } .contact-lens-details__title::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 20px; height: 20px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/arrow-up-info.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .contact-lens-details__title[data-is-expanded='true']::before { -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .contact-lens-details__title[data-is-expanded='false']::before { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } @media (min-width: 1024px) { .contact-lens-details__title { cursor: pointer; } } .contact-lens-details__expanded-content { overflow: hidden; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .contact-lens-details__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; padding: 18px 0 16px 0; } @media (min-width: 1024px) { .contact-lens-details__info { padding-top: 32px; } } .contact-lens-details__info__item { display: grid; grid-template-columns: 1fr 1fr; } .contact-lens-details__info__item p { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; margin: 0; } .contact-lens-details__info__item p:first-child { color: #7c7c7c; } .contact-lens-details__info__item p:last-child { color: #535353; } @media (min-width: 1024px) { .contact-lens-details__info__item p { font-size: 18px; line-height: 24px; letter-spacing: 0.18px; } } .contact-lens-details__more-button { border-radius: 8px; border: 0.5px solid #535353; background-color: white; padding: 12px; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.12px; color: #535353; } @media (min-width: 1024px) { .contact-lens-details__more-button { cursor: pointer; font-size: 16px; letter-spacing: 0.16px; line-height: 20px; } } .contact-lens-faqs__container { padding: 16px; background-color: white; } @media (min-width: 1024px) { .contact-lens-faqs__container { padding: 32px; position: relative; } .contact-lens-faqs__container::before, .contact-lens-faqs__container::after { content: ''; position: absolute; width: 100%; height: 8px; left: 0; background-color: #f6f6f6; } .contact-lens-faqs__container::before { top: 0; } .contact-lens-faqs__container::after { bottom: 0; } } .contact-lens-faqs__title { font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-weight: 600; line-height: 24px; color: black; margin-bottom: 0; } .contact-lens-faqs__question-container { border-bottom: 1px solid #d9d9d9; padding: 24px 0; } .contact-lens-faqs__question-container:last-child { border-bottom: none; } .contact-lens-faqs__question__expanded-content { overflow: hidden; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .contact-lens-faqs__question-title { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600; line-height: 24px; color: black; margin: 0; padding-right: 28px; position: relative; } .contact-lens-faqs__question-title::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 20px; height: 20px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/arrow-up-info.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .contact-lens-faqs__question-title[data-is-expanded='true']::before { -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .contact-lens-faqs__question-title[data-is-expanded='false']::before { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } @media (min-width: 1024px) { .contact-lens-faqs__question-title { cursor: pointer; } } .contact-lens-faqs__answer { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; letter-spacing: 0.18px; color: black; margin: 8px 0 0 0; } .contact-lens-faqs__link-container { margin: 12px 0 8px 0; } .contact-lens-faqs__link-text { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0.18px; color: #0094c8; position: relative; } .contact-lens-faqs__link-text:hover, .contact-lens-faqs__link-text:active, .contact-lens-faqs__link-text:visited, .contact-lens-faqs__link-text:focus { text-decoration: none; } .contact-lens-faqs__link-text::before { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 1px; background-color: #0094c8; } .contact-lens-faqs__link-text::after { content: ''; position: absolute; top: 58%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -20px; width: 16px; height: 16px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/arrow-right-blue.svg"); background-size: 16px; background-position: center; background-repeat: no-repeat; } .contact-lens-store-benefit__container { padding: 16px; background-color: white; } @media (min-width: 768px) { .contact-lens-store-benefit__container[data-is-extra='true'] { padding-block: 32px 40px; position: relative; } .contact-lens-store-benefit__container[data-is-extra='true']::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background-color: #f6f6f6; } } @media (min-width: 1024px) { .contact-lens-store-benefit__container { padding: 24px 32px; } } .contact-lens-store-benefit__title { font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-weight: 600; line-height: 24px; color: black; } .contact-lens-store-benefit__list { list-style: none; padding: 0; margin: 0; background-color: #fbf9f7; border-radius: 8px; padding: 16px; display: grid; grid-template-columns: repeat(4, 1fr); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; } @media (min-width: 768px) { .contact-lens-store-benefit__list { grid-template-columns: repeat(3, 1fr); } .contact-lens-store-benefit__list[data-is-extra='true'] { grid-template-columns: repeat(2, 1fr); } } .contact-lens-store-benefit__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .contact-lens-store-benefit__item img { width: 22px; height: 22px; } .contact-lens-store-benefit__item__text { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; color: #535353; text-align: center; letter-spacing: 0.12px; margin-bottom: 0; } .contact-lens-store-benefit__item[data-key='protect'], .contact-lens-store-benefit__item[data-key='delivery'] { display: -webkit-box; display: -ms-flexbox; display: flex; } .contact-lens-store-benefit__item[data-key='free-eye-test'] { display: none; } @media (min-width: 768px) { .contact-lens-store-benefit__item img { width: 24px; height: 24px; } .contact-lens-store-benefit__item[data-key='protect'], .contact-lens-store-benefit__item[data-key='delivery'] { display: none; } .contact-lens-store-benefit__item[data-key='free-eye-test'] { display: -webkit-box; display: -ms-flexbox; display: flex; } .contact-lens-store-benefit__item[data-is-extra='true'][data-key='protect'], .contact-lens-store-benefit__item[data-is-extra='true'][data-key='delivery'] { display: -webkit-box; display: -ms-flexbox; display: flex; } .contact-lens-store-benefit__item[data-is-extra='true'][data-key='protect'] img, .contact-lens-store-benefit__item[data-is-extra='true'][data-key='delivery'] img { width: 32px; height: 32px; } } .contact-lens-store-benefit__find-store { width: 100%; height: 180px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/find-store_sp.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 24px 16px; border-radius: 12px; position: relative; margin-top: 16px; } .contact-lens-store-benefit__find-store__title { font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-weight: 600; line-height: 20px; color: white; letter-spacing: 0.2px; margin-bottom: 16px; } .contact-lens-store-benefit__find-store__tags { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px; } .contact-lens-store-benefit__find-store__tags li { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Founders Grotesk", sans-serif; font-size: 10px; font-weight: 400; line-height: 12px; color: white; letter-spacing: 0.1px; padding: 0 12px; border-radius: 4px; border-radius: 8px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(2px); } .contact-lens-store-benefit__find-store__button { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 8px; border: 1px solid #f7f7f7; padding: 0 12.5px; background-color: transparent; position: absolute; left: 16px; bottom: 24px; } .contact-lens-store-benefit__find-store__button span { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; color: white; letter-spacing: 0.12px; } .contact-lens-buttons__container { background-color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } @media (min-width: 768px) { .contact-lens-buttons__container { padding: 24px 16px; border-top: 1px solid #d9d9d9; } } @media (min-width: 1024px) { .contact-lens-buttons__container { padding: 24px 32px; } } .contact-lens-buttons__container a { width: 100%; height: 54px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 10px; } .contact-lens-buttons__container a span { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; text-align: center; letter-spacing: 0.16px; } .contact-lens-buttons__container a[data-key='add-to-cart'] { background-color: #292929; } .contact-lens-buttons__container a[data-key='add-to-cart'] span { color: white; } @media (min-width: 768px) { .contact-lens-buttons__container a[data-key='add-to-cart'] span { position: relative; } .contact-lens-buttons__container a[data-key='add-to-cart'] span::before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -32px; width: 24px; height: 24px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/add-cart.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 2; } } .contact-lens-buttons__container a[data-key='try-it-for-free'] { background-color: white; border: 1px solid #535353; } .contact-lens-buttons__container a[data-key='try-it-for-free'] span { color: #535353; } .contact-lens-buttons__container a:hover, .contact-lens-buttons__container a:active, .contact-lens-buttons__container a:visited, .contact-lens-buttons__container a:focus { text-decoration: none; } @media (min-width: 768px) { .contact-lens-buttons__container a { height: 54px; } } @media (min-width: 1024px) { .contact-lens-buttons__container a { cursor: pointer; } } .contact-lens-buttons[data-is-fixed-bottom='true'] { position: fixed; bottom: 0; left: 0; right: 0; z-index: 8; } .contact-lens-buttons[data-is-fixed-bottom='true'] .contact-lens-buttons__container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 16px 32px 16px; } .contact-lens-buttons[data-is-fixed-bottom='true'] .contact-lens-buttons__container a[data-key='add-to-cart'] { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .contact-lens-buttons[data-is-fixed-bottom='true'] .contact-lens-buttons__container a[data-key='try-it-for-free'] { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .contact-lens-colours__container { padding: 12px; background-color: white; } @media (min-width: 1024px) { .contact-lens-colours__container { padding: 16px 8px 16px 32px; } } .contact-lens-colours__title { font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-weight: 600; line-height: 24px; color: black; margin-bottom: 16px; } @media (min-width: 768px) { .contact-lens-colours__title { font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; color: #A5A5A5; } } .contact-lens-colours__list { list-style-type: none; display: grid; grid-template-columns: repeat(4, 96px); gap: 16px; overflow-x: scroll; padding: 0; margin: 0; } .contact-lens-colours__list::-webkit-scrollbar-track { background: transparent; } .contact-lens-colours__list::-webkit-scrollbar-thumb { background-color: transparent; } .contact-lens-colours__item { width: 96px; height: auto; padding: 8px 0; background-color: #f7f7f7; border-radius: 12px; border: 2px solid #d9d9d9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .contact-lens-colours__item img { width: 100%; height: auto; min-height: 44px; aspect-ratio: 93/44; } .contact-lens-colours__item-name { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; text-align: center; letter-spacing: 0.12px; margin: 8px 0 0; } .contact-lens-colours__item[data-selected='true'] { border: 2px solid black; } .contact-lens-colours__item[data-selected='true'] .contact-lens-colours__item-name { color: black; } @media (min-width: 1024px) { .contact-lens-colours__item { cursor: pointer; } } .contact-lens-related-product__container { padding: 16px; background-color: white; } @media (min-width: 768px) { .contact-lens-related-product__container { padding: 20px 32px 32px 32px; } } .contact-lens-related-product__title { font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-weight: 600; line-height: 24px; color: black; } .contact-lens-related-product__list { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; overflow-x: scroll; } .contact-lens-related-product__icon-heart { position: absolute; width: 20px; height: 20px; top: 16px; right: 16px; } .contact-lens-related-product__icon-heart img { width: inherit; height: inherit; } @media (min-width: 1024px) { .contact-lens-related-product__icon-heart { cursor: pointer; } } .contact-lens-related-product__item { width: 206px; min-width: 206px; height: auto; background-color: white; border-radius: 16px; border: 1px solid #f2f2f2; overflow: hidden; position: relative; } .contact-lens-related-product__item-content { background-color: #f2f2f2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 8px 16px 16px 16px; } .contact-lens-related-product__item-img { width: 100%; height: 147px; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .contact-lens-related-product__item-title { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; color: black; letter-spacing: 0.16px; margin-bottom: 0; } .contact-lens-related-product__item-sub-title { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #535353; margin-bottom: 0; } .contact-lens-related-product__item-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 16px; } .contact-lens-related-product__item-price-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .contact-lens-related-product__item-price-after { font-family: "Founders Grotesk", sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; color: black; margin-bottom: 0; } .contact-lens-related-product__item-view { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 8px; background-color: black; padding: 0 17.5px; } .contact-lens-related-product__item-view span { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; color: white; letter-spacing: 0.12px; } .contact-lens-related-product__item-view:hover, .contact-lens-related-product__item-view:active, .contact-lens-related-product__item-view:visited, .contact-lens-related-product__item-view:focus { text-decoration: none; } @media (min-width: 768px) { .contact-lens-related-product__item { width: 240px; min-width: 240px; } } .contact-lens-rich-content__wrapper { width: 100%; height: auto; background-color: white; } .contact-lens-rich-content__header__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: white; padding: 0 28px 16px 28px; } @media (min-width: 1200px) { .contact-lens-rich-content__header__container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 57px 32px 25px 32px; gap: 32px; } } @media (min-width: 1920px) { .contact-lens-rich-content__header__container { padding: 57px 72px 25px 72px; gap: 88px; } } .contact-lens-rich-content__header__logo { width: 100%; height: 180px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; } .contact-lens-rich-content__header__logo span { font: 0/0 a; } .contact-lens-rich-content__header__logo img { width: 100%; max-width: 420px; height: auto; -o-object-fit: contain; object-fit: contain; } .contact-lens-rich-content__header__title { font-family: "Founders Grotesk", sans-serif; font-size: 27.907px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.279px; text-align: left; color: #292929; margin: 0 0 12.14px 0; } .contact-lens-rich-content__header__description { font-family: "Founders Grotesk", sans-serif; font-size: 16.744px; font-style: normal; font-weight: 400; line-height: 22.326px; letter-spacing: 0.167px; color: #7c7c7c; margin: 0; } .contact-lens-rich-content__main-preview { display: grid; grid-template-columns: 1fr; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact-lens-rich-content__main-preview__product { display: grid; grid-template-columns: 1fr 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .contact-lens-rich-content__main-preview__product[data-is-reverse='true'] .contact-lens-rich-content__main-preview__product__title { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .contact-lens-rich-content__main-preview__product__title { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #dce9e9; } .contact-lens-rich-content__main-preview__product__title > div { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; margin: auto; } .contact-lens-rich-content__main-preview__product__title > div h3 { font-family: "Founders Grotesk", sans-serif; font-size: 16.744px; font-style: normal; font-weight: 500; line-height: 11.86px; color: black; margin-bottom: 8.23px; } .contact-lens-rich-content__main-preview__product__title > div p { font-family: "Founders Grotesk", sans-serif; font-size: 13.953px; font-style: normal; font-weight: 400; line-height: normal; color: black; margin-bottom: 0; } @media (min-width: 1200px) { .contact-lens-rich-content__main-preview { grid-template-columns: 1fr 1fr; padding: 0 32px; } } .contact-lens-rich-content__perfect-fit__container { padding: 24px 16px; border-bottom: 1px solid #f7f7f7; } @media (min-width: 1200px) { .contact-lens-rich-content__perfect-fit__container { padding: 51px 32px 8px 32px; } } .contact-lens-rich-content__perfect-fit__title { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-style: normal; font-weight: 600; line-height: 24px; color: black; letter-spacing: 0.18px; margin-bottom: 0; text-align: center; } @media (min-width: 1200px) { .contact-lens-rich-content__perfect-fit__title { font-size: 22px; line-height: 24px; letter-spacing: 0.22px; text-align: left; } } .contact-lens-rich-content__perfect-fit__description { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; color: black; letter-spacing: 0.12px; text-align: center; margin: 8px 0 0 0; } @media (min-width: 1200px) { .contact-lens-rich-content__perfect-fit__description { display: none; } } .contact-lens-rich-content__perfect-fit__images { display: grid; grid-template-columns: repeat(3, 69.33px); gap: 16px; list-style: none; padding: 32px 0 8px 0; margin: 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .contact-lens-rich-content__perfect-fit__images li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .contact-lens-rich-content__perfect-fit__images li[data-key='traditional'] img { padding: 0 23px 9px 23px; } .contact-lens-rich-content__perfect-fit__images li img { padding: 0 10.66px; } .contact-lens-rich-content__perfect-fit__images li h4 { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; color: black; letter-spacing: 0.12px; text-align: center; margin-bottom: 0; } .contact-lens-rich-content__perfect-fit__images li p { font-family: "Founders Grotesk", sans-serif; font-size: 10px; font-style: normal; font-weight: 400; line-height: 12px; color: #7c7c7c; letter-spacing: 0.1px; margin: 8px 0 0 0; } @media (min-width: 1200px) { .contact-lens-rich-content__perfect-fit__images { padding: 16px 0 32px 0; grid-template-columns: repeat(3, 162px); gap: 0; } .contact-lens-rich-content__perfect-fit__images li[data-key='traditional'] img { padding: 0 48px 23px 48px; } .contact-lens-rich-content__perfect-fit__images li img { padding: 0 17px; } .contact-lens-rich-content__perfect-fit__images li h4 { font-size: 16px; line-height: 24px; letter-spacing: 0.18px; } .contact-lens-rich-content__perfect-fit__images li p { font-size: 16px; line-height: 20px; letter-spacing: 0.16px; } } .contact-lens-rich-content__perfect-fit__comparison { list-style: none; padding: 0; margin: 0; } .contact-lens-rich-content__perfect-fit__comparison__item { width: 100%; height: 56px; display: grid; grid-template-columns: 120px 1fr; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 16px; } @media (min-width: 1200px) { .contact-lens-rich-content__perfect-fit__comparison__item { height: 80px; grid-template-columns: 50% 50%; gap: 0; } } @media (min-width: 1920px) { .contact-lens-rich-content__perfect-fit__comparison__item { grid-template-columns: 1fr 486px; } } .contact-lens-rich-content__perfect-fit__comparison__item:nth-child(odd) { background-color: #f7f7f7; } .contact-lens-rich-content__perfect-fit__comparison__item__title p { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; color: black; letter-spacing: 0.12px; margin-bottom: 0; margin-left: 16px; } @media (min-width: 1200px) { .contact-lens-rich-content__perfect-fit__comparison__item__title p { font-size: 22px; line-height: 32px; margin-left: 40px; } .contact-lens-rich-content__perfect-fit__comparison__item__title p br { display: none; } } .contact-lens-rich-content__perfect-fit__comparison__item__value { display: grid; grid-template-columns: repeat(3, 1fr); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .contact-lens-rich-content__perfect-fit__comparison__item__value p { color: #7c7c7c; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; text-align: center; margin-bottom: 0; } @media (min-width: 1200px) { .contact-lens-rich-content__perfect-fit__comparison__item__value p { font-size: 22px; line-height: 32px; } } .contact-lens-rich-content__perfect-fit__comparison__item__value span { width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 auto; } .contact-lens-rich-content__perfect-fit__comparison__item__value span[data-key='correct'] { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/rich-content/clear/correct-icon.svg"); } .contact-lens-rich-content__perfect-fit__comparison__item__value span[data-key='incorrect'] { background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/rich-content/clear/incorrect-icon.svg"); } @media (min-width: 1200px) { .contact-lens-rich-content__perfect-fit__comparison__item__value span { width: 24px; height: 24px; } } .base-contact-lens-pdp { overflow: hidden; background-color: #f6f6f6; } .base-contact-lens-pdp__view-sp { display: block; background-color: white; } @media (min-width: 768px) { .base-contact-lens-pdp__view-sp { display: none; } } .base-contact-lens-pdp__view-pc { display: none; } @media (min-width: 768px) { .base-contact-lens-pdp__view-pc { width: 100%; max-width: 2320px; margin: 0 auto; height: auto; display: grid; grid-template-columns: 50% calc(50% - 20px); gap: 24px; padding: 20px; } .base-contact-lens-pdp__view-pc > div { background-color: transparent; } } @media (min-width: 1200px) { .base-contact-lens-pdp__view-pc { padding-block: 32px; padding-inline: 16px; grid-template-columns: calc(100% - 580px) 440px; gap: 64px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; max-width: 1648px; } } .contact-lens-cart-card__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 16px; background-color: white; } @media (min-width: 768px) { .contact-lens-cart-card__container { display: grid; grid-template-columns: 20% 1fr; gap: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 12px; } } @media (min-width: 1024px) { .contact-lens-cart-card__container { grid-template-columns: 33% 1fr; } } @media (min-width: 1200px) { .contact-lens-cart-card__container { grid-template-columns: 264px 1fr; } } .contact-lens-cart-card__header { width: 100%; height: 74px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; border-bottom: 1px dashed #e0e0e0; } @media (min-width: 768px) { .contact-lens-cart-card__header { border: none; } } @media (min-width: 1024px) { .contact-lens-cart-card__header { height: auto; } } .contact-lens-cart-card__header-image { width: 74px; height: auto; -o-object-fit: contain; object-fit: contain; } .contact-lens-cart-card__header-image-sp { display: block; } @media (min-width: 768px) { .contact-lens-cart-card__header-image-sp { display: none; } } .contact-lens-cart-card__header-image-pc { display: none; } @media (min-width: 768px) { .contact-lens-cart-card__header-image-pc { display: block; width: 100%; height: auto; } } .contact-lens-cart-card__header-text { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact-lens-cart-card__header-text[data-is-align-to-top='true'] { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (min-width: 1024px) { .contact-lens-cart-card__header-text[data-is-align-to-top='true'] .contact-lens-cart-card__header-price { margin-top: 4px; } } .contact-lens-cart-card__header-text > div:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } @media (min-width: 1024px) { .contact-lens-cart-card__header-text { margin-top: 16px; } } .contact-lens-cart-card__header-name { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: black; margin: 0; } @media (min-width: 1024px) { .contact-lens-cart-card__header-name { font-size: 22px; line-height: 32px; } } .contact-lens-cart-card__header-sub-title { font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.12px; color: rgba(68, 68, 68, .5); margin: 0; } @media (min-width: 1024px) { .contact-lens-cart-card__header-sub-title { font-size: 18px; line-height: 24px; letter-spacing: 0.18px; } } .contact-lens-cart-card__header-price { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #444444; margin: 0; } @media (min-width: 1024px) { .contact-lens-cart-card__header-price { font-family: "Founders Grotesk", sans-serif; font-size: 22px; font-weight: 600; line-height: 24px; color: black; letter-spacing: 0.22px; } } .contact-lens-cart-card__body { width: 100%; height: auto; } .contact-lens-cart-card__power-and-boxes-title { font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #a5a5a5; margin: 8px 0; } @media (min-width: 1024px) { .contact-lens-cart-card__power-and-boxes-title { font-size: 16px; letter-spacing: 0.16px; margin: 20px 0 8px 0; } } .contact-lens-cart-card__power-and-boxes-content-header { width: 100%; height: 36px; display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: #f2f2f2; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .contact-lens-cart-card__power-and-boxes-content-header > span { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #7c7c7c; text-align: center; margin: auto; } .contact-lens-cart-card__power-and-boxes-content-body { border: 1px solid #f2f2f2; border-radius: 8px; overflow: hidden; } .contact-lens-cart-card__power-and-boxes-content-body-item { width: 100%; height: 36px; border-bottom: 1px solid #f2f2f2; display: grid; grid-template-columns: 1fr 1fr 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .contact-lens-cart-card__power-and-boxes-content-body-item:last-child { border-bottom: none; } .contact-lens-cart-card__power-and-boxes-content-body-item > span { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; text-align: center; margin: auto; font-family: "Founders Grotesk", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; } .contact-lens-cart-card__power-and-boxes-content-body-item-eye { color: #7c7c7c; } .contact-lens-cart-card__power-and-boxes-content-body-item-power { color: #a5a5a5; } .contact-lens-cart-card__power-and-boxes-content-body-item-box { color: black; } .contact-lens-cart-card__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 0; } .contact-lens-cart-card__footer[data-is-space-between='true'] { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .contact-lens-cart-card__footer-pdf-text { color: #b59a50; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: -0.24px; margin: 0; padding-left: 24px; position: relative; } .contact-lens-cart-card__footer-pdf-text::before { content: ''; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; background-image: url("https://static.lenskart.com/owndays/img/contact-lens-pdp/icons/artwork.svg"); background-size: contain; background-repeat: no-repeat; } .contact-lens-cart-card__footer-pdf-text:hover, .contact-lens-cart-card__footer-pdf-text:active, .contact-lens-cart-card__footer-pdf-text:visited, .contact-lens-cart-card__footer-pdf-text:focus { text-decoration: none; color: #b59a50; } @media (min-width: 1024px) { .contact-lens-cart-card__footer-pdf-text { cursor: pointer; font-size: 18px; line-height: 24px; letter-spacing: 0.18px; padding-left: 36px; } .contact-lens-cart-card__footer-pdf-text::before { width: 24px; height: 24px; } } .contact-lens-cart-card__footer-upload-prescription-text { color: #b59a50; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: -0.24px; margin: 0; } @media (min-width: 1024px) { .contact-lens-cart-card__footer-upload-prescription-text { font-size: 18px; line-height: 24px; letter-spacing: 0.18px; } } .contact-lens-cart-card__footer-trash { width: 16px; height: 16px; cursor: pointer; } @media (min-width: 1024px) { .contact-lens-cart-card__footer-trash { cursor: pointer; width: 24px; height: 24px; } } .base-contact-lens-cart { background-color: #f6f6f6; } .base-contact-lens-cart__container { width: 100%; height: auto; max-width: 1336px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-block: 32px; } .base-contact-lens-cart__container > div:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } @media (min-width: 768px) { .base-contact-lens-cart__container > div:first-child { gap: 16px; } } @media (min-width: 768px) { .base-contact-lens-cart__container { display: grid; grid-template-columns: 1fr 360px; gap: 32px; padding-inline: 20px; } } @media (min-width: 1200px) { .base-contact-lens-cart__container { padding-inline: 40px; } } @media (min-width: 1376px) { .base-contact-lens-cart__container { padding-inline: 0; } } .base-contact-lens-cart__bill-container { width: 100%; height: 400px; background-color: gray; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .base-contact-lens-cart__bill-container span { color: white; font-size: 40px; font-weight: 700; } .base-contact-lens-cart__empty-cart-text { font-size: 24px; font-weight: 700; text-align: center; margin-top: 32px; color: black; } .header-contacts__main { font-family: "Founders Grotesk", sans-serif; width: 100%; } .header-contacts__hero-section { width: 100%; height: 270px; } @media (min-width: 768px) { .header-contacts__hero-section { height: 768px; } } .header-contacts__hero-image { background-image: url("https://static.lenskart.com/owndays/img/contacts/cl-hero-image-sp.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white; text-align: center; } @media (min-width: 1200px) { .header-contacts__hero-image { background-image: url("https://static.lenskart.com/owndays/img/contacts/cl-hero-image.webp"); } } .header-contacts__hero-text { margin-top: 24px; } @media (min-width: 768px) { .header-contacts__hero-text { margin-top: 80px; } } .header-contacts__hero-title { font-size: 22px; font-style: normal; font-weight: 600; letter-spacing: 0.22px; } @media (min-width: 768px) { .header-contacts__hero-title { font-size: 64px; } } .header-contacts__hero-description { font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: 0.16px; margin-top: 8px; } @media (min-width: 768px) { .header-contacts__hero-description { font-size: 36px; margin-top: 24px; } } .header-contacts__hero-button { cursor: pointer; padding: 8px; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; border-radius: 8px; background: #FFF; backdrop-filter: blur(24px); border: 1px solid white; color: black; font-size: 14px; font-style: normal; font-weight: 600; margin-bottom: 16px; } @media (min-width: 768px) { .header-contacts__hero-button { padding: 16px; font-size: 22px; margin-bottom: 62px; } } .header-contacts__carousel { width: 100%; margin: 40px 0 0 0; } .header-contacts__carousel-desktop { display: none; } @media (min-width: 1200px) { .header-contacts__carousel-desktop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 0 60px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (min-width: 1200px) { .header-contacts__carousel-desktop { margin: -6% auto; max-width: 1681px; -webkit-transform: scale(0.7); transform: scale(0.7); } } .header-contacts__carousel-mobile { width: 100%; max-width: 100%; overflow-x: hidden; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 100%; padding: 0 20px; overflow-x: scroll; } @media (min-width: 1200px) { .header-contacts__carousel-mobile { display: none; } } .custom-lp-slider { width: 270px !important; height: 360px !important; position: relative; overflow: hidden; background: white; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .custom-lp-slider__image { width: 100%; height: 100%; position: relative; } .custom-lp-slider__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; border-radius: 8px 8px 180px 8px; } .custom-lp-slider__image-gradient { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 8px 8px 180px 8px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(83, 83, 83, 0)), to(#535353)); background: linear-gradient(180deg, rgba(83, 83, 83, 0) 0%, #535353 100%); pointer-events: none; } .custom-lp-slider__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 24px 0 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .custom-lp-slider__title { font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-style: normal; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; color: white; } .custom-lp-slider__button { background: #e5e5e5; border: none; border-radius: 50%; width: 76px; height: 76px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: background 0.2s; transition: background 0.2s; font-size: 1rem; margin-left: 16px; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .1); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); padding: 18.033px 17.642px 17.893px 18.284px; cursor: pointer; } @media (min-width: 768px) { .custom-lp-slider { width: 539px !important; height: 674px !important; aspect-ratio: 539/674; } .custom-lp-slider__image img { border-radius: 16px 16px 360px 16px; } .custom-lp-slider__image-gradient { border-radius: 16px 16px 360px 16px; } .custom-lp-slider__overlay { padding: 56px 0 0 31px; } .custom-lp-slider__title { font-size: 32px; line-height: 40px; } .custom-lp-slider__button { width: 152px; height: 152px; font-size: 32px; padding: 36px 35.5px 36px 36.5px; } } .position-slider { display: block; margin-top: 16px; justify-self: center; } @media (min-width: 1200px) { .position-slider { display: none; } } .body-contacts__main { font-family: "Founders Grotesk", sans-serif; margin-top: 25px; } @media (min-width: 1200px) { .body-contacts__main { margin-top: 80px; } } .body-contacts__cl-products { position: relative; overflow: hidden; } .body-contacts__cl-products__content { position: absolute; top: 0; left: 16px; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; z-index: 10; -webkit-transform: scale(0.9); transform: scale(0.9); margin: 0 0 0 -5%; } @media (min-width: 1200px) { .body-contacts__cl-products__content { left: 100px; -webkit-transform: scale(1); transform: scale(1); margin: 0; } } .body-contacts__cl-products__content h1 { color: white; font-family: "Founders Grotesk", sans-serif; font-size: 20px; font-weight: 600; line-height: normal; margin-bottom: 5px; } @media (min-width: 1200px) { .body-contacts__cl-products__content h1 { color: white; font-size: 64px; font-weight: 600; margin-bottom: 40px; } } .body-contacts__cl-products__content button { color: white; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.12px; padding: 8px; cursor: pointer; background-color: transparent; border-radius: 8px; border: 1px solid #f2f2f2; backdrop-filter: blur(24px); } @media (min-width: 1200px) { .body-contacts__cl-products__content button { color: white; font-size: 32px; font-weight: 600; line-height: 40px; padding: 16px; border-radius: 16px; border: 2px solid #f2f2f2; } } .body-contacts__why-owndays-section { margin-top: 32px; padding: 0 16px 32px 16px; width: 100%; } @media (min-width: 1200px) { .body-contacts__why-owndays-section { margin-top: 64px; padding: 0 0 64px 0; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: -18%; } } .body-contacts__why-owndays-section__title { text-align: center; margin-bottom: 24px; } @media (min-width: 1200px) { .body-contacts__why-owndays-section__title { margin-bottom: -22%; } } .body-contacts__why-owndays-section__title h2 { color: black; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; text-align: center; font-family: "Founders Grotesk", sans-serif; } @media (min-width: 1200px) { .body-contacts__why-owndays-section__title h2 { font-size: 40px; line-height: 48px; letter-spacing: 0.4px; } } .body-contacts__why-owndays-section__features { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, auto); gap: 16px; } .body-contacts__why-owndays-section__features .div1 { grid-column: span 1 / span 1; } .body-contacts__why-owndays-section__features .div2 { grid-column: span 1 / span 1; } .body-contacts__why-owndays-section__features .div3 { grid-column: span 2 / span 2; grid-row-start: 2; padding: 0 !important; } .body-contacts__why-owndays-section__features .div4 { grid-row-start: 3; } .body-contacts__why-owndays-section__features .div5 { grid-row-start: 3; } .body-contacts__why-owndays-section__features .div6 { grid-column: span 2 / span 2; grid-row-start: 4; padding: 0 !important; } .body-contacts__why-owndays-section__features .div7 { grid-row-start: 5; } .body-contacts__why-owndays-section__features .div8 { grid-row-start: 5; } .body-contacts__why-owndays-section__features .div9 { grid-column: span 2 / span 2; grid-row-start: 6; padding: 0 !important; } .body-contacts__why-owndays-section__features .div10 { grid-column: span 2 / span 2; grid-row-start: 7; } @media (min-width: 1200px) { .body-contacts__why-owndays-section__features { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: -webkit-min-content; grid-auto-rows: min-content; gap: 32px; width: 100%; } .body-contacts__why-owndays-section__features .div1 { grid-row: span 2 / span 1; padding: 0 !important; } .body-contacts__why-owndays-section__features .div3 { grid-column-start: 2; padding: 40px !important; grid-column: span 2 / span 1; grid-column-start: 2; } .body-contacts__why-owndays-section__features .div4 { grid-row-start: 3; } .body-contacts__why-owndays-section__features .div5 { grid-column-start: 1; grid-row-start: 4; } .body-contacts__why-owndays-section__features .div6 { grid-row: span 2 / span 2; grid-column: span 2 / span 1; grid-column-start: 2; grid-row-start: 3; } .body-contacts__why-owndays-section__features .div7 { grid-row: span 3 / span 3; grid-row-start: 5; padding: 0 !important; } .body-contacts__why-owndays-section__features .div8 { grid-row-start: 5; } .body-contacts__why-owndays-section__features .div9 { grid-column-start: 2; grid-row-start: 6; padding: 40px !important; grid-column: span 1 / span 1; } .body-contacts__why-owndays-section__features .div10 { grid-column-start: 2; grid-row-start: 7; grid-column: span 1 / span 1; } } .body-contacts__why-owndays-section__feature-card { background: #F7F7F7; border-radius: 12px; padding: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; min-height: 180px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; width: 100%; height: auto; } @media (min-width: 1200px) { .body-contacts__why-owndays-section__feature-card { border-radius: 24px; padding: 40px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 140px; height: auto; } } .body-contacts__why-owndays-section .feature-card--image { background: #fff; padding: 0; border-radius: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: unset; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .04); box-shadow: 0 2px 8px rgba(0, 0, 0, .04); overflow: hidden; } @media (min-width: 1200px) { .body-contacts__why-owndays-section .feature-card--image { border-radius: 32px; width: 824px; min-height: 560px; } } .body-contacts__why-owndays-section .feature-card--image .body-contacts__why-owndays-section__feature-image { width: 100%; aspect-ratio: 16/7; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: 0; display: block; background: #f6f6f6; } .body-contacts__why-owndays-section__feature-icon { width: 32px; height: 32px; margin-bottom: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-contacts__why-owndays-section__feature-icon img, .body-contacts__why-owndays-section__feature-icon svg { width: 32px; height: 32px; -o-object-fit: contain; object-fit: contain; display: block; } @media (min-width: 1200px) { .body-contacts__why-owndays-section__feature-icon { width: 60px; height: 60px; margin-bottom: 0; margin-right: 48px; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .body-contacts__why-owndays-section__feature-icon img, .body-contacts__why-owndays-section__feature-icon svg { width: 60px; height: 60px; } } .body-contacts__why-owndays-section__feature-image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #f6f6f6; display: block; border-radius: 12px; } @media (min-width: 1200px) { .body-contacts__why-owndays-section__feature-image { border-radius: 24px; } } .body-contacts__why-owndays-section__feature-title { color: black; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; font-family: "Founders Grotesk", sans-serif; margin-bottom: 16px; } @media (min-width: 1200px) { .body-contacts__why-owndays-section__feature-title { color: black; font-size: 40px; line-height: 48px; letter-spacing: 0.4px; } } .body-contacts__why-owndays-section__feature-desc { color: #535353; font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 0; } @media (min-width: 1200px) { .body-contacts__why-owndays-section__feature-desc { color: #535353; font-size: 32px; line-height: 40px; letter-spacing: 0.32px; margin-bottom: 0; } } @media (min-width: 1200px) { .body-contacts__why-owndays-section__feature-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .features-desktop { display: none; } .features-mobile { display: grid; } @media (min-width: 1200px) { .features-desktop { display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: scale(0.7); transform: scale(0.7); } .features-mobile { display: none; } } .footer-contacts__main { width: 100%; background: url('data:image/svg+xml;utf8,') no-repeat top center; background-size: 100% auto; padding: 40px 16px 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1200px) { .footer-contacts__main { padding: 120px 120px 80px; background: url('data:image/svg+xml;utf8,') no-repeat top center; background-size: 100% auto; background-color: #d9d9d9; } } .footer-contacts__title { color: #000; text-align: center; font-family: "Founders Grotesk", sans-serif; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; } @media (min-width: 1200px) { .footer-contacts__title { font-size: 40px; line-height: 48px; letter-spacing: 0.4px; margin-bottom: 56px; } } .footer-contacts__steps { width: 100%; max-width: 400px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; justify-items: center; } @media (min-width: 1200px) { .footer-contacts__steps { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 100%; } } .footer-contacts__step { background: #fff; border-radius: 999px 999px 16px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 8px; padding-bottom: 16px; position: relative; width: 156px; height: 201px; } @media (min-width: 1200px) { .footer-contacts__step { width: 396px; height: 495px; } } .footer-contacts__step-number { color: #d9d9d9; text-align: center; font-size: 48px; font-weight: 600; letter-spacing: 0.48px; } @media (min-width: 1200px) { .footer-contacts__step-number { font-size: 128px; letter-spacing: 1.28px; } } .footer-contacts__step-img { width: 92px; height: 92px; -o-object-fit: cover; object-fit: cover; margin-bottom: 8px; } @media (min-width: 1200px) { .footer-contacts__step-img { width: 260px; height: 260px; margin-bottom: 19px; } } .footer-contacts__step-label { color: #000; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.16px; } @media (min-width: 1200px) { .footer-contacts__step-label { font-size: 22px; line-height: 24px; letter-spacing: 0.22px; margin-bottom: 40px; } } .footer-contacts__button { border-radius: 8px; border: 1.5px solid #292929; padding: 8px; background: transparent; color: #292929; font-family: "Founders Grotesk", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.12px; margin-top: 24px; cursor: pointer; } @media (min-width: 1200px) { .footer-contacts__button { color: #292929; font-size: 22px; font-weight: 600; line-height: 24px; letter-spacing: 0.22px; border-radius: 8px; border: 2px solid #292929; padding: 16px; margin-top: 56px; } } @charset "UTF-8"; .faq-container { margin: 40px auto; padding: 80px 120px; font-family: "Founders Grotesk", sans-serif; } .faq-title { color: #000; text-align: center; font-size: 40px; font-weight: 600; line-height: 48px; letter-spacing: 0.4px; margin-bottom: 32px; } .faq-content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; } .faq-image-section { width: 50%; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .faq-image { aspect-ratio: 1060.705 / 708; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: 18px; -webkit-box-shadow: 0 2px 16px rgba(0, 0, 0, .06); box-shadow: 0 2px 16px rgba(0, 0, 0, .06); } .faq-list-section { width: 50%; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .faq-tabs { width: 100%; display: grid; grid-template-columns: repeat(6, 2fr); gap: 16px; margin-bottom: 40px; padding: 0; overflow-x: auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .faq-tab { background-color: transparent; border-radius: 10px; border: 1px solid #535353; color: #535353; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.16px; cursor: pointer; width: 180px; height: 80px; } .faq-tab.active { border-radius: 10px; background: #292929; color: #FFF; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.16px; } .faq-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .faq-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; border-radius: 16px; background: #F7F7F7; padding: 24px 40px; cursor: pointer; } .faq-item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .faq-question { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: #000; font-size: 22px; font-weight: 600; line-height: 24px; letter-spacing: 0.22px; } .faq-answer { color: #000; font-size: 22px; font-weight: 400; line-height: 32px; } .faq-plus-icon { width: 28px; height: 28px; margin-left: 18px; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: grayscale(0.2) brightness(0.95); filter: grayscale(0.2) brightness(0.95); -webkit-transition: -webkit-filter 0.18s; transition: -webkit-filter 0.18s; transition: filter 0.18s; transition: filter 0.18s, -webkit-filter 0.18s; } .faq-item:hover .faq-plus-icon { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: grayscale(0) brightness(1.1); filter: grayscale(0) brightness(1.1); } .faq-mobile-container { width: 100%; max-width: 480px; margin: 0 auto; padding: 32px 0 0 0; background: #fff; } .faq-mobile-title { color: #000; text-align: center; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; } .faq-mobile-tabs { display: grid; grid-template-columns: repeat(6, 2fr); gap: 10px; margin-bottom: 24px; padding: 0 16px; overflow-x: auto; } .faq-mobile-tab { height: 32px; width: 113px; background: transparent; color: #7C7C7C; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.12px; text-transform: uppercase; border-radius: 4px; border: 1px solid #E6E6EC; background: #FFF; cursor: pointer; } .faq-mobile-tab.active { color: #fff; background: #292929; } .faq-mobile-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; padding: 0 16px; } .faq-mobile-item { border-bottom: 1.5px solid #eaeaea; font-size: 1.08rem; font-weight: 600; background: transparent; -webkit-transition: background 0.18s; transition: background 0.18s; } .faq-mobile-item:last-child { border-bottom: none; } .faq-mobile-item-content { display: grid; grid-template-columns: 1fr 28px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 22px 0 22px 0; cursor: pointer; -webkit-transition: background 0.18s; transition: background 0.18s; } .faq-mobile-item-content:active { background: #f5f5f5; } .faq-mobile-question { color: #000; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; } .faq-mobile-answer { color: #000; font-size: 16px; font-weight: 400; line-height: 20px; margin-bottom: 8px; } .faq-mobile-plus-icon { width: 22px; height: 22px; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: grayscale(0.2) brightness(0.95); filter: grayscale(0.2) brightness(0.95); -webkit-transition: -webkit-filter 0.18s, -webkit-transform 0.2s; transition: -webkit-filter 0.18s, -webkit-transform 0.2s; transition: filter 0.18s, transform 0.2s; transition: filter 0.18s, transform 0.2s, -webkit-filter 0.18s, -webkit-transform 0.2s; } .faq-mobile-item:active .faq-mobile-plus-icon { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: grayscale(0) brightness(1.1); filter: grayscale(0) brightness(1.1); } .faq-mobile-plus-icon.open { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .faq-link { color: #0094C8; text-decoration: underline; -webkit-transition: color 0.2s; transition: color 0.2s; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .faq-link-arrow:after { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' stroke='%230094C8' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; margin-left: 4px; text-decoration: none; } .faq-bullet-point { position: relative; padding-left: 15px; } .faq-bullet-point:before { content: '•'; color: #000000; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.16px; margin-right: 8px; } .faq-bullet-point-sub { padding-left: 40px; } .faq-bullet-point-sub:before { content: '•'; color: #000000; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.16px; margin-right: 8px; } @media (max-width: 900px) { .faq-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 28px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .faq-image-section { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 0; } .faq-image { width: 100%; max-width: 340px; height: 200px; } } @media (max-width: 600px) { .faq-container { padding: 16px 4px; } .faq-title { font-size: 1.2rem; margin-bottom: 18px; } .faq-image { height: 140px; max-width: 100%; } .faq-list-section { min-width: 0; } .faq-item { padding: 12px 10px; font-size: 0.98rem; } .faq-plus-icon { width: 22px; height: 22px; margin-left: 10px; } } @media (min-width: 600px) { .faq-mobile-container { max-width: 540px; border-radius: 16px; -webkit-box-shadow: 0 4px 32px rgba(0, 0, 0, .07); box-shadow: 0 4px 32px rgba(0, 0, 0, .07); padding: 48px 0 0 0; } .faq-mobile-title { font-size: 2.2rem; } .faq-mobile-list { padding: 0 32px; } .faq-mobile-tabs { padding: 0 32px; } } @media (max-width: 1200px) { .faq-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .faq-image-section, .faq-list-section { width: 100%; } .faq-tabs { display: grid; grid-template-columns: repeat(6, 2fr); gap: 16px; padding: 0 16px; overflow-x: auto; } } .faq-mobile { display: block; margin-bottom: 40px; } .faq-desktop { display: none; margin-bottom: 0px; } @media (min-width: 1200px) { .faq-mobile { display: none; margin-bottom: 0; } .faq-desktop { display: block; margin-bottom: 40px; } } @charset "UTF-8"; .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before { border-color: #ccc; border-style: solid; border-width: 3px 3px 0 0; content: ""; display: block; height: 9px; position: absolute; top: 6px; width: 9px; } .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle { margin-left: -4px; position: absolute; width: 0; } .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { box-sizing: content-box; position: absolute; border: 8px solid transparent; height: 0; width: 1px; content: ""; z-index: -1; border-width: 8px; left: -8px; } .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before { border-bottom-color: #aeaeae; } .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle { top: 0; margin-top: -8px; } .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { border-top: none; border-bottom-color: #f0f0f0; } .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { top: 0; } .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before { top: -1px; border-bottom-color: #aeaeae; } .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle { bottom: 0; margin-bottom: -8px; } .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after { border-bottom: none; border-top-color: #fff; } .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after { bottom: 0; } .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before { bottom: -1px; border-top-color: #aeaeae; } .react-datepicker-wrapper { display: inline-block; padding: 0; border: 0; } .react-datepicker { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-size: 0.8rem; background-color: #fff; color: #000; border: 1px solid #aeaeae; border-radius: 0.3rem; display: inline-block; position: relative; } .react-datepicker--time-only .react-datepicker__triangle { left: 35px; } .react-datepicker--time-only .react-datepicker__time-container { border-left: 0; } .react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box { border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .react-datepicker__triangle { position: absolute; left: 50px; } .react-datepicker-popper { z-index: 1; } .react-datepicker-popper[data-placement^=bottom] { padding-top: 10px; } .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle { left: auto; right: 50px; } .react-datepicker-popper[data-placement^=top] { padding-bottom: 10px; } .react-datepicker-popper[data-placement^=right] { padding-left: 8px; } .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle { left: auto; right: 42px; } .react-datepicker-popper[data-placement^=left] { padding-right: 8px; } .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle { left: 42px; right: auto; } .react-datepicker__header { text-align: center; background-color: #f0f0f0; border-bottom: 1px solid #aeaeae; border-top-left-radius: 0.3rem; padding: 8px 0; position: relative; } .react-datepicker__header--time { padding-bottom: 8px; padding-left: 5px; padding-right: 5px; } .react-datepicker__header--time:not(.react-datepicker__header--time--only) { border-top-left-radius: 0; } .react-datepicker__header:not(.react-datepicker__header--has-time-select) { border-top-right-radius: 0.3rem; } .react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll { display: inline-block; margin: 0 15px; } .react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header { margin-top: 0; color: #000; font-weight: bold; font-size: 0.944rem; } .react-datepicker-time__header { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .react-datepicker__navigation { align-items: center; background: none; display: flex; justify-content: center; text-align: center; cursor: pointer; position: absolute; top: 2px; padding: 0; border: none; z-index: 1; height: 32px; width: 32px; text-indent: -999em; overflow: hidden; } .react-datepicker__navigation--previous { left: 2px; } .react-datepicker__navigation--next { right: 2px; } .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { right: 85px; } .react-datepicker__navigation--years { position: relative; top: 0; display: block; margin-left: auto; margin-right: auto; } .react-datepicker__navigation--years-previous { top: 4px; } .react-datepicker__navigation--years-upcoming { top: -4px; } .react-datepicker__navigation:hover *::before { border-color: #a6a6a6; } .react-datepicker__navigation-icon { position: relative; top: -1px; font-size: 20px; width: 0; } .react-datepicker__navigation-icon--next { left: -2px; } .react-datepicker__navigation-icon--next::before { transform: rotate(45deg); left: -7px; } .react-datepicker__navigation-icon--previous { right: -2px; } .react-datepicker__navigation-icon--previous::before { transform: rotate(225deg); right: -7px; } .react-datepicker__month-container { float: left; } .react-datepicker__year { margin: 0.4rem; text-align: center; } .react-datepicker__year-wrapper { display: flex; flex-wrap: wrap; max-width: 180px; } .react-datepicker__year .react-datepicker__year-text { display: inline-block; width: 4rem; margin: 2px; } .react-datepicker__month { margin: 0.4rem; text-align: center; } .react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text { display: inline-block; width: 4rem; margin: 2px; } .react-datepicker__input-time-container { clear: both; width: 100%; float: left; margin: 5px 0 10px 15px; text-align: left; } .react-datepicker__input-time-container .react-datepicker-time__caption { display: inline-block; } .react-datepicker__input-time-container .react-datepicker-time__input-container { display: inline-block; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input { display: inline-block; margin-left: 10px; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input { width: auto; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button, .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] { -moz-appearance: textfield; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter { margin-left: 5px; display: inline-block; } .react-datepicker__time-container { float: right; border-left: 1px solid #aeaeae; width: 85px; } .react-datepicker__time-container--with-today-button { display: inline; border: 1px solid #aeaeae; border-radius: 0.3rem; position: absolute; right: -87px; top: 0; } .react-datepicker__time-container .react-datepicker__time { position: relative; background: white; border-bottom-right-radius: 0.3rem; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { width: 85px; overflow-x: hidden; margin: 0 auto; text-align: center; border-bottom-right-radius: 0.3rem; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list { list-style: none; margin: 0; height: calc(195px + 1.7rem / 2); overflow-y: scroll; padding-right: 0; padding-left: 0; width: 100%; box-sizing: content-box; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { height: 30px; padding: 5px 10px; white-space: nowrap; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover { cursor: pointer; background-color: #f0f0f0; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { background-color: #216ba5; color: white; font-weight: bold; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover { background-color: #216ba5; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled { color: #ccc; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover { cursor: default; background-color: transparent; } .react-datepicker__week-number { color: #ccc; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__week-number.react-datepicker__week-number--clickable { cursor: pointer; } .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected, .react-datepicker__week-number--keyboard-selected):hover { border-radius: 0.3rem; background-color: #f0f0f0; } .react-datepicker__week-number--selected { border-radius: 0.3rem; background-color: #216ba5; color: #fff; } .react-datepicker__week-number--selected:hover { background-color: #1d5d90; } .react-datepicker__week-number--keyboard-selected { border-radius: 0.3rem; background-color: #2a87d0; color: #fff; } .react-datepicker__week-number--keyboard-selected:hover { background-color: #1d5d90; } .react-datepicker__day-names { white-space: nowrap; margin-bottom: -8px; } .react-datepicker__week { white-space: nowrap; } .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { color: #000; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text { cursor: pointer; } .react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover { border-radius: 0.3rem; background-color: #f0f0f0; } .react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today { font-weight: bold; } .react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted { border-radius: 0.3rem; background-color: #3dcc4a; color: #fff; } .react-datepicker__day--highlighted:hover, .react-datepicker__month-text--highlighted:hover, .react-datepicker__quarter-text--highlighted:hover, .react-datepicker__year-text--highlighted:hover { background-color: #32be3f; } .react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 { color: magenta; } .react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 { color: green; } .react-datepicker__day--holidays, .react-datepicker__month-text--holidays, .react-datepicker__quarter-text--holidays, .react-datepicker__year-text--holidays { position: relative; border-radius: 0.3rem; background-color: #ff6803; color: #fff; } .react-datepicker__day--holidays .holiday-overlay, .react-datepicker__month-text--holidays .holiday-overlay, .react-datepicker__quarter-text--holidays .holiday-overlay, .react-datepicker__year-text--holidays .holiday-overlay { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 4px; border-radius: 4px; white-space: nowrap; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease-in-out; } .react-datepicker__day--holidays:hover, .react-datepicker__month-text--holidays:hover, .react-datepicker__quarter-text--holidays:hover, .react-datepicker__year-text--holidays:hover { background-color: #cf5300; } .react-datepicker__day--holidays:hover .holiday-overlay, .react-datepicker__month-text--holidays:hover .holiday-overlay, .react-datepicker__quarter-text--holidays:hover .holiday-overlay, .react-datepicker__year-text--holidays:hover .holiday-overlay { visibility: visible; opacity: 1; } .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { border-radius: 0.3rem; background-color: #216ba5; color: #fff; } .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover, .react-datepicker__month-text--selected:hover, .react-datepicker__month-text--in-selecting-range:hover, .react-datepicker__month-text--in-range:hover, .react-datepicker__quarter-text--selected:hover, .react-datepicker__quarter-text--in-selecting-range:hover, .react-datepicker__quarter-text--in-range:hover, .react-datepicker__year-text--selected:hover, .react-datepicker__year-text--in-selecting-range:hover, .react-datepicker__year-text--in-range:hover { background-color: #1d5d90; } .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected { border-radius: 0.3rem; background-color: #bad9f1; color: rgb(0, 0, 0); } .react-datepicker__day--keyboard-selected:hover, .react-datepicker__month-text--keyboard-selected:hover, .react-datepicker__quarter-text--keyboard-selected:hover, .react-datepicker__year-text--keyboard-selected:hover { background-color: #1d5d90; } .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) { background-color: rgba(33, 107, 165, 0.5); } .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) { background-color: #f0f0f0; color: #000; } .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled { cursor: default; color: #ccc; } .react-datepicker__day--disabled:hover, .react-datepicker__month-text--disabled:hover, .react-datepicker__quarter-text--disabled:hover, .react-datepicker__year-text--disabled:hover { background-color: transparent; } .react-datepicker__input-container { position: relative; display: inline-block; width: 100%; } .react-datepicker__input-container .react-datepicker__calendar-icon { position: absolute; padding: 0.5rem; box-sizing: content-box; } .react-datepicker__view-calendar-icon input { padding: 6px 10px 5px 25px; } .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view { border: 1px solid transparent; border-radius: 0.3rem; position: relative; } .react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover { cursor: pointer; } .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow { border-top-color: #b3b3b3; } .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow { transform: rotate(135deg); right: -16px; top: 0; } .react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown { background-color: #f0f0f0; position: absolute; width: 50%; left: 25%; top: 30px; z-index: 1; text-align: center; border-radius: 0.3rem; border: 1px solid #aeaeae; } .react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover { cursor: pointer; } .react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable { height: 150px; overflow-y: scroll; } .react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option { line-height: 20px; width: 100%; display: block; margin-left: auto; margin-right: auto; } .react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type { border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; } .react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover { background-color: #ccc; } .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming { border-bottom-color: #b3b3b3; } .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous { border-top-color: #b3b3b3; } .react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected { position: absolute; left: 15px; } .react-datepicker__close-icon { cursor: pointer; background-color: transparent; border: 0; outline: 0; padding: 0 6px 0 0; position: absolute; top: 0; right: 0; height: 100%; display: table-cell; vertical-align: middle; } .react-datepicker__close-icon::after { cursor: pointer; background-color: #216ba5; color: #fff; border-radius: 50%; height: 16px; width: 16px; padding: 2px; font-size: 12px; line-height: 1; text-align: center; display: table-cell; vertical-align: middle; content: "×"; } .react-datepicker__close-icon--disabled { cursor: default; } .react-datepicker__close-icon--disabled::after { cursor: default; background-color: #ccc; } .react-datepicker__today-button { background: #f0f0f0; border-top: 1px solid #aeaeae; cursor: pointer; text-align: center; font-weight: bold; padding: 5px 0; clear: left; } .react-datepicker__portal { position: fixed; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); left: 0; top: 0; justify-content: center; align-items: center; display: flex; z-index: 2147483647; } .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 3rem; line-height: 3rem; } @media (max-width: 400px), (max-height: 550px) { .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 2rem; line-height: 2rem; } } .react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header { font-size: 1.44rem; } .react-datepicker__children-container { width: 13.8rem; margin: 0.4rem; padding-right: 0.2rem; padding-left: 0.2rem; height: auto; } .react-datepicker__aria-live { position: absolute; clip-path: circle(0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; white-space: nowrap; } .react-datepicker__calendar-icon { width: 1em; height: 1em; vertical-align: -0.125em; } .od-auth-modal-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; } .od-auth-modal-success-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; } .od-close-icon-container { position: absolute; right: 30px; cursor: pointer; z-index: 1100 !important; top: 16px; padding: 4px; background-color: #FAFAFA; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2); box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2); } .od-close-icon-container img { width: 16px; height: 16px; } @import url(https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;900&display=swap);.h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } .od-auth-modal-login-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 48px; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all ease 0.5s; transition: all ease 0.5s; height: 100%; } .od-auth-modal-login-container .od-login-modal-register-button { letter-spacing: -0.02em; font-size: 16px; line-height: 24px; color: #444; } .od-auth-modal-login-container .od-login-modal-tc { font-size: 14px; line-height: 20px; color: #444; margin-top: 24px; opacity: 0.5; } .od-auth-modal-login-container .od-login-modal-tc__link { color: #444; text-decoration: underline; } .od-auth-modal-login-container .disabled-button-new { background-color: #cccccc; pointer-events: none; } .od-auth-modal-login-container .captcha-verify-button { width: 72px; font-family: 'LenskartSans-Bold', sans-serif; font-size: 12px; border-radius: 100px; cursor: pointer; } .od-auth-modal-login-container .od-auth-modal-login__forgot-password { margin-top: 24px; margin-bottom: 20px; } .od-auth-modal-login-container .od-auth-modal-login__forgot-password span { font-size: 14px; line-height: 20px; color: #444; cursor: pointer; text-decoration: underline; } .od-auth-modal-login-container .od-auth-modal-login__empty-section { margin: 24px 0; height: 56px; } .od-sign-in-error-msg { margin-top: 8px; letter-spacing: -0.02em; font-size: 14px; line-height: 24px; color: #a94442; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .od-sign-in-error-msg .od-sign-in-reset-pass { color: #444; cursor: pointer; } .country-code-display-auto { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; outline: none; } .animate-left-small { -webkit-animation: animateleftSmall 0.5s; animation: animateleftSmall 0.5s; } .od-animate-right-login-modal { -webkit-animation: animateRightLogin 0.5s; animation: animateRightLogin 0.5s; } @-webkit-keyframes animateRightLogin { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateRightLogin { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes animateleftLogin { from { -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateleftLogin { from { -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes animateleftSmall { from { -webkit-transform: translate3d(-3%, 0, 0); transform: translate3d(-3%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateleftSmall { from { -webkit-transform: translate3d(-3%, 0, 0); transform: translate3d(-3%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; top: -10px; } 100% { opacity: 1; top: 0px; } } @keyframes fadeIn { 0% { opacity: 0; top: -10px; } 100% { opacity: 1; top: 0px; } } .od-signIn-otp-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .od-signIn-otp-container .od-signIn-otp-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 4px; } .od-signIn-otp-container .od-signIn-otp-content .od-signIn-otp-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; font-size: 16px; line-height: 30px; color: #444; } .od-signIn-otp-container .od-signIn-otp-content .od-signIn-otp-edit-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-transform: capitalize; font-size: 14px; line-height: 20px; color: #444; cursor: pointer; } .od-signIn-otp-container .od-signIn-otp-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .od-signIn-otp-container .od-signIn-otp-main .resend-disable { pointer-events: none; color: #5a5a5a !important; opacity: 0.4; } .od-signIn-otp-container .od-signIn-otp-main .od-opt-input-resendTimer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 4px; } .od-signIn-otp-container .od-signIn-otp-main .od-opt-input-resendTimer .od-otp-resend-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-transform: capitalize; font-size: 14px; line-height: 20px; color: #444; cursor: pointer; } .od-signIn-otp-container .od-signIn-otp-main .od-opt-input-resendTimer .od-otp-resend-text-secondary, .od-signIn-otp-container .od-signIn-otp-main .od-opt-input-resendTimer .od-otpTimer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; font-size: 14px; line-height: 20px; color: #66668e; } .od-signIn-otp-container .od-signIn-otp-main .od-opt-input-resendTimer .disable-text-new { color: #cccccc; pointer-events: none; } .od-signIn-otp-container .od-signIn-otp-main .od-otp-input-resendTimer .od-forget-password-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-transform: capitalize; margin-bottom: 24px; font-size: 14px; line-height: 20px; color: #444; cursor: pointer; } .od-signIn-otp-container .od-signIn-otp-main .od-login-password-input-field-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 16px 0 16px 14px; background: #fff; border: 1px solid #e2e2ee; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); height: 56px; font-size: 14px; line-height: 20px; color: #333368; } .od-signIn-otp-container .od-signIn-otp-main .od-login-password-input-field-container .od-login-password-input-field { width: 100%; height: 100%; border: none; letter-spacing: -0.02em; font-size: 14px; line-height: 24px; color: #000; } .od-signIn-otp-container .od-signIn-otp-main .od-login-password-input-field-container .od-login-password-input-field::-webkit-input-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-signIn-otp-container .od-signIn-otp-main .od-login-password-input-field-container .od-login-password-input-field::-moz-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-signIn-otp-container .od-signIn-otp-main .od-login-password-input-field-container .od-login-password-input-field::-ms-input-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-signIn-otp-container .od-signIn-otp-main .od-login-password-input-field-container .od-login-password-input-field::placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-signIn-otp-container .od-signIn-otp-main .od-login-password-input-field-container .od-login-password-field-img { cursor: pointer; margin: 15px; } .od-signIn-otp-container .od-signIn-otp-main .od-login-password-input-field-container .od-strike-through { background: -webkit-gradient(linear, right bottom, left top, color-stop(47.75%, transparent), color-stop(49.5%, #66668e), color-stop(50.5%, #66668e), color-stop(52.25%, transparent)); background: linear-gradient(to left top, transparent 47.75%, #66668e 49.5%, #66668e 50.5%, transparent 52.25%); z-index: 100; } .od-signIn-otp-container .od-sign-in-error-msg { margin-top: 8px; letter-spacing: -0.02em; font-size: 14px; line-height: 24px; color: #a94442; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; } .od-signIn-otp-container .od-otp-resend-text-alert { font-family: 'LenskartSans-Bold', sans-serif; font-style: normal; font-weight: 700; letter-spacing: -0.02em; font-size: 14px; line-height: 20px; color: #66668e; -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s; } .od-signIn-otp-container .od-disc-input-field-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .od-signIn-otp-container .od-disc-input-field-container .od-disc-input-field-item { padding: 4px; gap: 8px; width: 56px; height: 56px; background: #ffffff; border: 1px solid #cecedf; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); border-radius: 8px; font-family: 'LenskartSans-Regular', sans-serif; font-style: normal; font-weight: 400; font-size: 20px; line-height: 30px; text-align: center; letter-spacing: -0.02em; color: #000042; } @media screen and (max-width: 1441px) { .od-signIn-otp-container .od-disc-input-field-container .od-disc-input-field-item { font-size: 16px; line-height: 20px; height: 42px; width: 42px; } } .od-signIn-otp-heading { font-family: 'Founders Grotesk', sans-serif; font-size: 12px; line-height: 20px; letter-spacing: -0.02em; color: rgba(0, 0, 0, 0.50196); } .od-login-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: animateleftLogin 0.5s !important; animation: animateleftLogin 0.5s !important; } .od-forget-password-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 805px; } .od-forget-password-container .new-auth-modal-image-container { min-width: 349px; height: 100%; } .od-forget-password-container .new-auth-modal-image-container img { height: 100%; width: 100%; } .od-forgot-pass-modal { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 32px 48px; min-height: 485px; } .od-forgot-pass-modal .od-forgot-pass-new-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 32px; } .od-forgot-pass-modal .od-forgot-pass-new-container .od-forgot-password-heading { gap: 10px; font-style: normal; font-size: 20px; line-height: 36px; letter-spacing: -0.02em; color: #444; } .od-forgot-pass-modal .od-forgot-pass-new-container .od-forgot-pass-input-container .od-forgot-input-field { width: 100%; background: #FFFFFF; border: 1px solid #E2E2EE; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); padding: 16px 14px; font-family: 'Founders Grotesk', sans-serif; } .od-forgot-pass-modal .od-forgot-pass-new-container .od-forgot-pass-input-container .od-forgot-input-field::-webkit-input-placeholder { font-family: 'NeuzeitGroReg', sans-serif; } .od-forgot-pass-modal .od-forgot-pass-new-container .od-forgot-pass-input-container .od-forgot-input-field::-moz-placeholder { font-family: 'NeuzeitGroReg', sans-serif; } .od-forgot-pass-modal .od-forgot-pass-new-container .od-forgot-pass-input-container .od-forgot-input-field::-ms-input-placeholder { font-family: 'NeuzeitGroReg', sans-serif; } .od-forgot-pass-modal .od-forgot-pass-new-container .od-forgot-pass-input-container .od-forgot-input-field::placeholder { font-family: 'NeuzeitGroReg', sans-serif; } .od-forgot-pass-modal .od-forgot-pass-new-container .text-red-new { font-family: 'Founders Grotesk', sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; color: red; } .od-forgot-pass-modal .od-forgot-pass-new-container .email-sent-error-new, .od-forgot-pass-modal .od-forgot-pass-new-container .email-sent-success-new { font-family: 'LenskartSans-Regular', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; color: #333368; } .od-forgot-pass-modal .od-forgot-pass-new-container .email-sent-success-new { color: green; } .od-forgot-pass-modal .od-forgot-pass-new-container .email-sent-error-new { color: red; } .od-forgot-pass-modal .animate-right-forgotPassword-modal { -webkit-animation: animateRightForgotPassword 0.5s; animation: animateRightForgotPassword 0.5s; } @-webkit-keyframes animateRightForgotPassword { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateRightForgotPassword { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .od-forgot-pass-heading-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 20px; } .od-forgot-pass-heading-wrapper .od-login-modal-register-button { cursor: pointer; text-decoration: underline; } .od-resend-message-text { color: #444; font-family: 'Founders Grotesk', sans-serif; text-decoration: underline; font-size: 14px; cursor: pointer; } .od-successfull-forgot-link-sent { font-family: 'NeuzeitGroReg', sans-serif; color: #000; opacity: 0.5; font-size: 15px; } .od-register-tnc-container-forgot .od-register-tnc-link { display: block; font-family: 'Founders Grotesk', sans-serif; font-size: 14px; line-height: 20px; color: #444; margin-top: 24px; opacity: 0.5; } .h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } .od-modal-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: all 1s ease; transition: all 1s ease; margin-top: 44px; min-width: 349px; } .od-modal-heading__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; font-size: 20px; line-height: 36px; color: #444; } .od-modal-heading__create-account { font-size: 16px; line-height: 24px; color: #444; } .od-modal-heading__create-account span:last-child { text-decoration: underline; cursor: pointer; } .dropdown-custom { position: relative; display: inline-block; width: 16%; } .dropdown-custom .dropdown-toggle-custom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 5px; margin-right: 5px; background: none; border: none; } .dropdown-custom .dropdown-menu-custom { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; } .new-font-style { font-family: "LenskartSans-Regular", sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: #000042; } .new-font-style .od-button-new-style { background: none; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 5px; margin-right: 5px; } .new-font-style .od-menu-new-style { font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: #66668e; height: 250px; overflow-y: auto; -webkit-animation: fadeInOpacity 0.5s; animation: fadeInOpacity 0.5s; z-index: 1; } .new-font-style .od-menu-new-style ::-webkit-scrollbar { width: 0px; background: none; } .new-font-style .od-menu-new-style ::-webkit-scrollbar-track { width: 0; background: none; } @-webkit-keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } .h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } .od-modal-heading-content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 32px; } .od-modal-heading-content__password-title { font-size: 12px; line-height: 20px; color: rgba(0, 0, 0, 0.50196); margin-bottom: 4px; } .od-modal-input-field-container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 14px; background: #fff; border: 1px solid #E2E2EE; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); font-family: 'NeuzeitGroReg', sans-serif; line-height: 24px; letter-spacing: -0.02em; gap: 5px; } .od-modal-input-field-container .od-country-code-fixed { font-size: 14px; line-height: 24px; color: #000; } .od-modal-input-field-container .od-modal-input-field { width: 100%; border: none; -webkit-transition: max-width 1s ease-in-out; transition: max-width 1s ease-in-out; overflow: hidden; font-family: 'NeuzeitGroReg', sans-serif; letter-spacing: -0.02em; font-size: 14px; line-height: 24px; color: #000; } .od-modal-input-field-container .od-modal-input-field::-webkit-input-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, .5); } .od-modal-input-field-container .od-modal-input-field::-moz-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, .5); } .od-modal-input-field-container .od-modal-input-field::-ms-input-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, .5); } .od-modal-input-field-container .od-modal-input-field::placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, .5); } .animate-left-small { -webkit-animation: animateleftSmall 0.5s; animation: animateleftSmall 0.5s; } @-webkit-keyframes animateleftSmall { from { -webkit-transform: translate3d(-3%, 0, 0); transform: translate3d(-3%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateleftSmall { from { -webkit-transform: translate3d(-3%, 0, 0); transform: translate3d(-3%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } .od-back-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4px; position: absolute; top: 20px; left: 28px; background: #fff; border-radius: 100px; cursor: pointer; z-index: 1100; } .alerts-pop-up-container { z-index: 1; width: 100%; position: absolute; } .alerts-pop-up-container .alerts-pop-up-fade { opacity: 0.5; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; z-index: 1; } .alerts-pop-up-container .alerts-pop-up-content { position: absolute; width: 100%; padding: 32px 16px; gap: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 52px; z-index: 2; background: #e8fdff; -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .1); box-shadow: 0px 1px 4px rgba(0, 0, 0, .1); border-radius: 12px; cursor: pointer; font-family: "LenskartSans-Bold"; font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: #000042; } .alerts-pop-up-container .animate-top { -webkit-animation: animatetop 0.5s; animation: animatetop 0.5s; } .alerts-pop-up-container .animate-left { -webkit-animation: animateleft 0.5s; animation: animateleft 0.5s; } @-webkit-keyframes animatetop { from { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animatetop { from { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes animateleft { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateleft { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .od-auth-modal-input-field-container { width: 100%; } .od-auth-modal-input-field-container .od-auth-modal-input-field { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 14px; width: 100%; background: #ffffff; border: 1px solid #E2E2EE; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); font-size: 14px; line-height: 24px; letter-spacing: -0.02em; color: #444; font-family: 'Founders Grotesk', sans-serif; } .od-auth-modal-input-field-container .od-auth-modal-input-field::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-auth-modal-input-field-container .od-auth-modal-input-field::-moz-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-auth-modal-input-field-container .od-auth-modal-input-field::-ms-input-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-auth-modal-input-field-container .od-auth-modal-input-field::placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-user-error { font-size: 14px; line-height: 24px; color: #a94442; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; opacity: 1; } .od-register-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: animateleftLogin 0.5s !important; animation: animateleftLogin 0.5s !important; } .od-register-wrapper .new-auth-modal-image-container { min-width: 349px; height: 100%; } .od-register-wrapper .new-auth-modal-image-container img { height: 100%; width: 100%; } .od-register-wrapper .od-register-modal-container { height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 16px 48px; gap: 16px; position: relative; } .od-register-wrapper .od-register-modal-container .od-form-block { width: 100%; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__current-month { display: none; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__navigation { display: none; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker { font-family: 'NeuzeitGroReg', sans-serif; border: 1px solid #e2e2ee; border-radius: 4px; overflow: hidden; -webkit-box-shadow: 0px 8px 16px rgba(16, 24, 40, .1); box-shadow: 0px 8px 16px rgba(16, 24, 40, .1); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__day { width: 36px; height: 36px; color: #000; font-size: 14px; cursor: pointer; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; line-height: 36px; text-align: center; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__day--keyboard-selected, .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__day--selected { background-color: #4285f4; color: #fff; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__day--outside-month { color: #ccc; pointer-events: none; cursor: not-allowed; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__triangle { display: none !important; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__day-names { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 10px 0 10px; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__day-names .react-datepicker__day-name { font-size: 14px; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__year-option, .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__month-option { font-size: 14px; margin: 5px 0; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__month-read-view, .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__year-read-view { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__month-read-view--down-arrow, .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__year-read-view--down-arrow { right: -20px; top: 25%; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__month-read-view[style="visibility: hidden;"], .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__year-read-view[style="visibility: hidden;"] { visibility: visible !important; } .od-register-wrapper .od-register-modal-container .od-form-block .react-datepicker__month-read-view--down-arrow { margin-right: 5px; } .od-register-wrapper .od-register-modal-container .od-register-modal-form-container { width: 100%; } .od-register-wrapper .od-register-modal-container .od-register-modal-form-container .od-form-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 0px; gap: 24px; width: 100%; } .od-register-wrapper .od-register-modal-container .od-form-container .od-register-phone-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 10px 14px; gap: 5px; background: #ffffff; border: 1px solid #e2e2ee; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); font-size: 14px; line-height: 24px; letter-spacing: -0.02em; color: #444; } .od-register-wrapper .od-register-modal-container .od-form-container .od-register-phone-container--disabled { background: #fafafa; pointer-events: none; } .od-register-wrapper .od-register-modal-container .od-form-container .od-register-phone-container .od-phone-number-input { width: 100%; border: none; color: #444; font-family: 'Founders Grotesk', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-register-phone-container .od-phone-number-input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-register-phone-container .od-phone-number-input::-moz-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-register-phone-container .od-phone-number-input::-ms-input-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-register-phone-container .od-phone-number-input::placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-register-phone-container .phoneNumberSelection { font-size: 14px; line-height: 24px; color: #444; font-family: 'Founders Grotesk', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-sign-up-password-input-field-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 8px; padding: 16px 14px; background: #ffffff; border: 1px solid #e2e2ee; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); } .od-register-wrapper .od-register-modal-container .od-form-container .od-sign-up-password-input-field-container .od-signUp-password-input-field { width: 100%; height: 100%; border: none; font-size: 14px; line-height: 24px; letter-spacing: -0.02em; color: #444; font-family: 'Founders Grotesk', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-sign-up-password-input-field-container .od-signUp-password-input-field::-webkit-input-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-sign-up-password-input-field-container .od-signUp-password-input-field::-moz-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-sign-up-password-input-field-container .od-signUp-password-input-field::-ms-input-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-sign-up-password-input-field-container .od-signUp-password-input-field::placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-form-container .od-sign-up-password-input-field-container .od-signUp-password-field-img { cursor: pointer; } .od-register-wrapper .od-register-modal-container .od-form-container .od-sign-up-password-input-field-container .od-strike-through { background: -webkit-gradient(linear, right bottom, left top, color-stop(47.75%, transparent), color-stop(49.5%, #66668e), color-stop(50.5%, #66668e), color-stop(52.25%, transparent)); background: linear-gradient(to left top, transparent 47.75%, #66668e 49.5%, #66668e 50.5%, transparent 52.25%); z-index: 100; } .od-register-wrapper .od-register-modal-container .od-register-modal-login-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -ms-flex-positive: 0; flex-grow: 0; font-size: 16px; line-height: 20px; letter-spacing: -0.02em; color: #444; margin: auto; cursor: pointer; } .od-register-wrapper .od-register-modal-container .od-register-modal-login-button .od-login-text-secondary { margin: 0 4px; } .od-register-wrapper .od-register-modal-container .od-register-tnc-container { width: 100%; display: block; font-synthesis: none; } .od-register-wrapper .od-register-modal-container .od-register-tnc-container .od-register-tnc-link { color: #444; font-size: 14px; line-height: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; opacity: 0.5; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth { width: 100%; position: relative; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth img { width: 20px; height: 20px; position: absolute; top: 16px; right: 14px; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth input[type='text'] { width: 100%; height: 56px; padding: 16px 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; color: #444; font-size: 14px; border: 1px solid #e2e2ee; font-family: 'Founders Grotesk', sans-serif; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth input[type='text']::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth input[type='text']::-moz-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth input[type='text']::-ms-input-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth input[type='text']::placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth input[type='text']::-webkit-calendar-picker-indicator { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: invert(100%); filter: invert(100%); } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth .react-datepicker-wrapper { width: 100%; } .od-register-wrapper .od-register-modal-container .od-sign-up-date-of-birth .react-datepicker-wrapper input { width: 100%; } .od-register-wrapper .od-register-modal-container .od-signUp-referralText { cursor: pointer; color: #444; font-size: 16px; line-height: 20px; width: 100%; margin-top: 20px; } .od-register-wrapper .od-register-modal-container .od-signUp-referral-input-field { width: 100%; height: 56px; padding: 16px 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; color: #444; font-size: 14px; border: 1px solid #e2e2ee; font-family: 'Founders Grotesk', sans-serif; } .od-register-wrapper .od-register-modal-container .od-signUp-referral-input-field::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-signUp-referral-input-field::-moz-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-signUp-referral-input-field::-ms-input-placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .od-register-wrapper .od-register-modal-container .od-signUp-referral-input-field::placeholder { color: rgba(0, 0, 0, 0.50196); font-family: 'NeuzeitGroReg', sans-serif; } .country-code-display-auto { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; outline: none; } @-webkit-keyframes animateRightRegister { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateRightRegister { from { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes animateLeftRegister { from { -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animateLeftRegister { from { -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; opacity: 1; } .od-login-modal-container { overflow: hidden; } .new-login-modal-content { max-height: 100%; overflow: hidden; } .od-auth-modal-container { overflow-y: auto; } .od-signUp-gender__select { display: block; width: 100%; height: 56px; padding: 16px 14px; border: 1px solid #e2e2ee; font-size: 14px; line-height: 24px; letter-spacing: -0.02em; color: rgba(0, 0, 0, .50196); background-color: #ffffff; } .terms-and-condtion-line { font-size: 14px; line-height: 20px; color: #444; margin-top: 24px; opacity: 0.5; font-family: "NeuzeitGroBold"; letter-spacing: -0.02em; } .terms-and-condtion-line__link { text-decoration: underline; color: #444; } .od-success-signup { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 32px 48px; height: 547px; } .od-success-signup__title { font-size: 20px; line-height: 36px; color: #444; } .h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } .od-login-modal-container { z-index: 1050 !important; width: 100%; height: 100%; position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; left: 0; } .od-login-modal-container .fade-login-modal { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .7); -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, .25); box-shadow: 0px 4px 4px rgba(0, 0, 0, .25); z-index: 1; } .od-login-modal-container .new-login-modal-content { position: relative; margin: 100px auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 2; background: #fff; -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .1); box-shadow: 0px 1px 4px rgba(0, 0, 0, .1); font-size: 16px; line-height: 24px; color: #000; } .od-login-modal-container .animateTop { -webkit-animation: animatetop 0.5s !important; animation: animatetop 0.5s !important; } @-webkit-keyframes animatetop { from { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animatetop { from { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } #loginContent { display: none; } .od-saved-address { margin-top: 24px; } .od-address-items { margin-top: 16px; } .od-address-items__divider { text-align: center; color: #444; font-size: 16px; line-height: 18px; letter-spacing: -0.32px; margin: 16px 0; } .od-address-items__show-more { display: -webkit-box; display: -ms-flexbox; display: flex; border: none; margin: 29px auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; letter-spacing: -0.02em; color: #000000; text-transform: capitalize; background-color: transparent; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .od-address-items__show-more:hover { opacity: 0.5; } .od-address-items__show-more-icon { font-size: 18px; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .od-address-items__show-more-icon--active { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .od-address-items__create { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 24px; border: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; color: #000; font-size: 16px; line-height: 24px; background-color: #fff; } .od-address-items__create-arrow { margin-left: auto; } .od-address-item { padding: 24px; margin-bottom: 16px; background-color: #ffffff; } .od-address-item__divider { width: 100%; border-top: 1px dashed rgba(0, 0, 0, .1); grid-column: span 2; margin: 16px 0; } .od-address-item__delivery { color: #B59A50; font-size: 14px; letter-spacing: -0.28px; } .od-address-item__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 120px; } .od-address-item__title { color: #000; font-size: 16px; line-height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .od-address-item__checkbox { width: 32px; height: 32px; border-radius: 50%; -ms-flex-negative: 0; flex-shrink: 0; background-color: #000000; } .od-address-item__body { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 16px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 120px; } .od-address-item__address { font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #666666; } .od-address-item__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; } .od-address-item__action { border: none; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #000000; text-decoration: underline; background-color: transparent; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .od-address-item__action:hover { opacity: 0.5; } .od-address-item-checkbox { position: relative; } .od-address-item-checkbox__check { position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; cursor: pointer; } .od-address-item-checkbox__check--active, .od-address-item-checkbox__check:hover { opacity: 1; } .social-login { display: block; margin-bottom: 17px; list-style: none; position: 'relative'; overflow: 'visible'; } .social-login .sign-up-cont { text-align: center; color: #828282; font-weight: 600; font-family: 'FuturaStd-Book'; letter-spacing: 0.5px; font-size: 13px; padding: 10px 0; } .custom-error { position: absolute; bottom: -20px; color: red; font-size: 12px; } .custom-error.custom-phone-error { bottom: 0; } .auth-section_right-col ul { margin: 0; padding: 0; list-style: none; } .auth-section_right-col ul.margin-t18 { margin-top: 18px; } .auth-section_right-col ul.margin-b18 { margin-bottom: 18px; } .auth-section_right-col ul li { margin: 0; padding: 0; list-style: none; } .auth-section_right-col ul li.margin-t18 { margin-top: 18px; } .auth-section_right-col ul li.margin-b18 { margin-bottom: 18px; } .auth-section_right-col ul li.input-filed-col { position: relative; } .auth-section_right-col .edit { position: absolute; right: 0; top: 5px; color: #3DB1A6; font-weight: normal; padding: 2px; letter-spacing: .7px; cursor: pointer; } .auth-section_right-col .edit.phone { top: auto; } .auth-section_right-col .resend { color: #3DB1A6; font-family: 'FuturaStd-Heavy'; font-size: 11px; cursor: pointer; letter-spacing: .7px; } .auth-section_right-col .resend-disable { pointer-events: none; color: #5a5a5a !important; opacity: 0.4; } .auth-section_right-col .arrow-back { cursor: pointer; display: inline-block; } .form-SLA_field-row { margin-bottom: 18px; letter-spacing: 1px; font-family: futurastd-book; font-size: 12px; position: relative; } .form-SLA_field-row label { font-size: 13px; font-weight: normal; position: absolute; top: 7px; pointer-events: none; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; color: #828282; } .form-SLA_field-row input[type=text], .form-SLA_field-row input[type=email], .form-SLA_field-row input[type=password] { border: none; border-bottom: 1px solid #acacac; padding: 9px 10px 7px 0; width: 100%; display: block; outline: none; color: #828282; font-family: futurastd-book; } .form-SLA_field-row input[type=text]:focus ~ label, .form-SLA_field-row input[type=email]:focus ~ label, .form-SLA_field-row input[type=password]:focus ~ label { top: -10px; font-size: 10px; } .form-SLA_field-row input[type=text].inline, .form-SLA_field-row input[type=email].inline, .form-SLA_field-row input[type=password].inline { display: inline-block; } .form-SLA_field-row_label ~ label { top: -10px; font-size: 10px; } .form-SLA_field-row_invalid input[type=text], .form-SLA_field-row_invalid input[type=email], .form-SLA_field-row_invalid input[type=password] { border-color: #ec3331; } .form-SLA_field-row input[type=submit], .form-SLA_field-row button[type=submit], .form-SLA_field-row_submit { border: none; background: #3DB1A6; color: #fff; letter-spacing: 1px; font-size: 15px; padding: 9px 0 5px 0; display: inline-block; width: 100%; margin: 0; text-align: center; cursor: pointer; outline: none; } .form-SLA_field-row_error { color: #ec3331; display: block; padding-top: 5px; } .form-SLA_field-box_error { color: #a94442; display: block; padding-top: 5px; } .form-SLA_field-box label { font-size: 14px; font-weight: normal; top: 7px; color: #555; font-family: futurastd-book; } .form-SLA_field-box input[type=text], .form-SLA_field-box input[type=email], .form-SLA_field-box input[type=password], .form-SLA_field-box input[type=tel] { border: 1px solid #c9c9c9; width: 100%; display: block; outline: none; color: #555; font-family: futurastd-book; -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, .06); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .06); padding: 7px 5px 5px 5px; } .form-SLA_field-box input[type="radio"] { height: 1px; width: 1px; opacity: -10; } .form-SLA_field-box input[type="radio"] + span { padding: 4px 0px 5px 24px; font-size: 13px; color: #333; background: url(//static.lenskart.com/media/desktop/img/radio-btn-small-new.png) no-repeat 0px 3px; letter-spacing: 1px; cursor: pointer; width: 20px; height: 22px; } .form-SLA_field-box input[type="radio"]:checked + span { background-position: 0 -32px; } .form-SLA_field-box input[type="checkbox"] { display: none; } .form-SLA_field-box input[type="checkbox"] + span { display: inline-block; padding: 3px 3px 3px 25px; background: url(//static.lenskart.com/media/desktop/img/sprite-v2.png) no-repeat -1350px -146px; cursor: pointer; width: 24px; height: 24px; } .form-SLA_field-box input[type="checkbox"]:checked + span { background-position: -1350px -49px; } .form-SLA_field-box textarea { border: 1px solid #c9c9c9; width: 100%; display: block; outline: none; color: #555; font-family: futurastd-book; -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, .06); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .06); padding: 5px; } .form-SLA_field-box .country-dropdown { border: 1px solid #c9c9c9; height: 33px; } .form-SLA_field-box_invalid input[type=text], .form-SLA_field-box_invalid input[type=email], .form-SLA_field-box_invalid input[type=password] { border-color: #a94442; } .form-SLA_field-box_invalid label { color: #a94442; } .custom-radio label { position: relative; padding: 0 22px; cursor: pointer; vertical-align: bottom; font-size: 12px; -webkit-tap-highlight-color: transparent; } .custom-radio label:before, .custom-radio label:after { position: absolute; content: ""; border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-transition-property: border-color,-webkit-transform; transition-property: border-color,-webkit-transform; transition-property: transform,border-color; transition-property: transform,border-color,-webkit-transform; } .custom-radio label:after { top: 3px; left: 2px; width: 10px; height: 10px; -webkit-transform: scale(0); transform: scale(0); background: #18cfa8; } .custom-radio label:before { left: 0; top: 1px; width: 12px; height: 12px; border: 1px solid #ccc; } .custom-radio input[type=radio] { display: none; } .custom-radio input[type=radio]:checked + label:before { border-color: #18cfa8; } .custom-radio input[type=radio]:checked + label:after { transform: scale(1); -webkit-transform: scale(1); } .auth-modal { width: 800px; } .auth-modal .modal-body { position: relative; padding: 0px !important; } .auth-section { clear: none; overflow: hidden; width: 100%; } .auth-section h3 { color: #3dafa5; font-family: futurastd-heavy; font-size: 14px; letter-spacing: 1px; } .auth-section_left-col { float: left; width: 47%; } .auth-section_right-col { float: left; padding: 60px 0 0 30px; width: 50%; } .auth-section_nav { background: none; margin: 0; padding: 15px 0 0 0 !important; border-bottom: none; position: absolute; left: 50%; z-index: 99999; } .auth-section_nav li { display: inline-block; border: none; font-family: 'FuturaStd-Book'; cursor: pointer; } .auth-section_nav li.TabbedPanelsTab { color: #6A6E6F; font-size: 13px; letter-spacing: 1px; text-transform: capitalize; border-bottom: 2px solid #fff; padding: 6px 0 3px 0; margin-right: 15px; } .auth-section_nav li.TabbedPanelsTabSelected { text-transform: capitalize; color: #3DB1A6; border-bottom: 2px solid #3DB1A6; padding: 6px 0 3px 0; } .auth-section .referal-code-section { overflow: hidden; } .auth-section .referal-code-section input { border: 1px solid #acacac; color: #828282; font-size: 11px; padding: 7px 4px; width: 50%; -webkit-transition: 0.3s all; transition: 0.3s all; display: inline-block; text-align: left; } .auth-section .referal-code-section input:focus::-webkit-input-placeholder { -webkit-transform: translate(70%); transform: translate(70%); opacity: 0; -webkit-transition: 0.3s all; transition: 0.3s all; text-align: center; } .auth-section .referal-code-section input:focus::-moz-placeholder { transform: translate(70%); opacity: 0; -webkit-transition: 0.3s all; transition: 0.3s all; text-align: center; } .auth-section .referal-code-section input:focus::-ms-input-placeholder { transform: translate(70%); opacity: 0; -webkit-transition: 0.3s all; transition: 0.3s all; text-align: center; } .auth-section .referal-code-section input:focus::placeholder { -webkit-transform: translate(70%); transform: translate(70%); opacity: 0; -webkit-transition: 0.3s all; transition: 0.3s all; text-align: center; } .auth-section .referal-code-section .referal-optinal { color: #828282; font-size: 12px; display: inline-block; font-family: 'FuturaStd-Book'; letter-spacing: 1px; margin: 0 0 0 10px; } .auth-section .res-img { width: 100%; } .auth-section .screen-hidden { position: absolute; left: -9999px; height: 0px !important; } .auth-section .checkbox.show-password { position: absolute; top: 5px; right: 0; z-index: 2; margin: 0; padding: 0; } .auth-section .checkbox.show-password input[type="checkbox"] { margin: 0; padding: 0; position: relative; top: auto; display: none; } .auth-section .checkbox.show-password input[type="checkbox"] + label { color: #919296; font-size: 14px; background: none; font-family: 'FuturaStd-Book'; padding: 3px 3px 3px 0; position: relative; top: auto; pointer-events: all; } .auth-section .checkbox.show-password input[type="checkbox"] + label span { display: inline-block; width: 25px; height: 19px; vertical-align: middle; background: url(//static.lenskart.com/media/wysiwyg/sign-register/password-eye.png) left top no-repeat; cursor: pointer; } .auth-section .checkbox.show-password input[type="checkbox"]:checked + label span { background-position: -29px; } .auth-section ul, .auth-section ul li { margin: 0; padding: 0; list-style: none; } .auth-section ul.margin-b18, .auth-section ul li.margin-b18 { margin-bottom: 18px; } .auth-section ul.margin-t18, .auth-section ul li.margin-t18 { margin-top: 18px; } .auth-section .validation-advice { color: #EC3331; font-size: 12px; margin-bottom: 10px; } .auth-section .edit { position: absolute; right: 0; top: 5px; color: #3DB1A6; font-weight: normal; padding: 2px; letter-spacing: .7px; cursor: pointer; } .auth-section .edit.phone { top: auto; } .auth-section .terms { font-size: 11px; color: #828282; font-family: futurastd-medium; clear: both; text-align: right; padding: 5px 0; } .auth-section .terms a { font-size: 11px; color: #828282; } .auth-section .display-ib { display: inline-block; } .auth-section .clearboth { clear: both; overflow: hidden; } .auth-section .resend { color: #3DB1A6; font-family: 'FuturaStd-Heavy'; font-size: 11px; cursor: pointer; letter-spacing: .7px; } .auth-section .arrow-back { cursor: pointer; display: inline-block; } .auth-section .arrow-back .fa-arrow-left { color: #3DB1A6; } .auth-section .otp-resent { color: #3DB1A6 !important; } .auth-section .otppassword, .auth-section .col-current-password { margin-bottom: 0px !important; } .auth-section .resend-list .resend { pointer-events: none; color: #5a5a5a !important; } .auth-section .resend-list .resend .resend-text { opacity: 0.2; } .auth-section .input-filed-col { position: relative; } .auth-section .input-filed-col label.label-col { color: #828282; position: absolute; top: 6px; left: 0; font-size: 1rem; cursor: text; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .auth-section .input-filed-col .input-field { padding: 8px 10px; width: 65.9%; } .auth-section .input-filed-col .display-timer { font-family: 'FuturaStd-Book'; color: #333; font-weight: normal; opacity: 1; } .auth-section .validate-email { border-color: transparent !important; } .auth-section .forgot-password-wrapper p.forgot-content { color: #818284; font-size: 13px; font-family: 'FuturaStd-Book'; margin: 8px 0; padding: 0; line-height: 22px; } .auth-section .forgot-password-wrapper li.back-to-login { margin-bottom: 18px; } .auth-section .forgot-password-wrapper li.back-to-login a { color: #3DB1A6; text-decoration: none; } .auth-section .btn-forgot-password { text-align: right; margin-top: -10px; } .auth-section .validation-error { color: red; } .auth-section .fa-arrow-left { padding-right: 5px; } .auth-section .dialog-close { position: absolute; right: 15px; top: 10px; } .auth-section .facebook-button-class { background: url(//static.lenskart.com/media/wysiwyg/sign-register/facebook-b_n.jpg) no-repeat; width: 170px; height: 42px; border: none; background-size: 100%; } /* * Define scss variables here. */ .user-exists-container { margin-bottom: 15px; padding: 6px 12px; border-radius: 4px; background-color: #fff8e6; position: relative; } .user-exists-container:after { content: ''; position: absolute; top: -12px; left: 20px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #fff8e6; } .disabled-register { background: gray; cursor: not-allowed !important; } .labels { display: -webkit-box; display: -ms-flexbox; display: flex; color: #999999; } .labels label { margin-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .labels label input { margin-top: 2px; margin-left: 0px; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; } .od-home-carousel .slick--main .slick-slide { padding: 0; } .od-home-carousel .slick--main .slick-slide * { display: -webkit-box; display: -ms-flexbox; display: flex; } .od-home-carousel .slick--main .slick-dots { padding: 0; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; margin: 0; gap: 1px; } .od-home-carousel .slick--main .slick-dots li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .od-home-carousel .slick--main .slick-dots li button { background: #D9D9D9; font: 0/0 a; width: 100%; height: 5px; border: none; outline: none; padding: 0; margin: 0; } .od-home-carousel .slick--main .slick-dots li.slick-active button { background-color: #000; } @media (min-width: 768px) { .od-home-carousel .slick--main .slick-dots { gap: 2px; } .od-home-carousel .slick--main .slick-dots li button { height: 10px; } } .od-two-category-home { display: grid; grid-template-columns: repeat(2, 1fr); } .od-two-category-home__content { aspect-ratio: 720/450; background-position: center; background-size: cover; padding: 50px; cursor: pointer; } @media (min-width: 768px) and (max-width: 1024px) { .od-two-category-home__content { padding: 27px; aspect-ratio: 417/278; } } .od-two-category-home__content__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 30px; text-align: center; } @media (min-width: 768px) and (max-width: 1024px) { .od-two-category-home__content__inner { gap: 10px; } } .od-two-category-home__content__inner .owndays-btn { width: 100%; max-width: 300px; margin: 0 auto; } .od-two-category-home__content__inner__subtext { font: 400 16px/120% 'Founders Grotesk', sans-serif !important; margin: 0; } .od-two-category-home__content__inner__title { font: 500 26px/120% 'Founders Grotesk', sans-serif !important; letter-spacing: 1.3px; color: #000; text-transform: uppercase; margin: 0; } .lazy { position: relative; display: block; width: 100%; height: 100%; background-color: #f6f7f8; } .lazy::after { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #f3f3f3), color-stop(18%, #e0e0e0), color-stop(33%, #f3f3f3)); background: linear-gradient(to right, #f3f3f3 8%, #e0e0e0 18%, #f3f3f3 33%); background-size: 800px 104px; position: absolute; content: ''; display: block; top: 0; bottom: 0; left: 0; right: 0; } .lazy.lazy { background-size: cover; background-position: center; } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .od-home-bs { padding-block: 44px 40px; background-color: #fafafa; position: relative; } .od-home-bs__container { width: 100%; max-width: 2090px; margin: 0 auto; padding-inline: 85px; } .od-home-bs__title { font-family: 'Founders Grotesk', sans-serif; font-size: 42px; margin-bottom: 12px; margin-top: 0; text-align: center; color: #444; } .od-home-bs__description { font-family: 'Founders Grotesk', sans-serif; font-size: 20px; margin-bottom: 40px; text-align: center; color: #444; } .od-home-bs .slick-slider .slick-list { margin-bottom: 40px; } .od-home-bs .slick-slider .slick-list .slick-slide { padding-left: 20px; padding-right: 20px; } .od-home-bs .slick-slider .slick-prev { position: absolute; top: 50%; left: -10px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: none; background: none; } .od-home-bs .slick-slider .slick-next { position: absolute; top: 50%; right: -30px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: none; background: none; } .od-home-bs .slick-slider .od-best-sellers-slick-icon { -webkit-transform: scale(1.5); transform: scale(1.5); } .od-home-pick-shape-v2 { max-width: 2090px; margin: 0 auto; padding: 0 85px; } .od-home-pick-shape-v2__title { font-family: 'Founders Grotesk', sans-serif; color: #000; font-size: 32px; margin-bottom: 20px; } .od-home-pick-shape-v2__card_container { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 20px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ margin-left: -0.75rem; } .od-home-pick-shape-v2__card_container::-webkit-scrollbar { display: none; } .od-home-pick-shape-v2__card { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 236px; padding: .75rem; margin-bottom: 2rem; border: 0; -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; } .od-home-pick-shape-v2__card img { margin-bottom: .75rem; width: 100%; } .od-home-pick-shape-v2__card_footer { font-size: 18px; font-family: 'Founders Grotesk', sans-serif; line-height: 24px; margin-top: 18px; } .lazy { position: relative; display: block; height: 100%; width: 100%; -webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .lazy.loading { opacity: 0.5; } .lazy::after { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #f6f7f8; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #f3f3f3), color-stop(18%, #e0e0e0), color-stop(33%, #f3f3f3)); background: linear-gradient(to right, #f3f3f3 8%, #e0e0e0 18%, #f3f3f3 33%); background-size: 800px 104px; position: absolute; content: ''; display: block; top: 0; bottom: 0; height: 100%; width: 100%; } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @media (min-width: 768px) { .lazy { height: auto; max-width: 100%; } .lazy::after { background-size: 1200px 156px; } } @media (max-width: 767px) { .lazy { height: auto; max-width: 100%; } .lazy::after { background-size: 400px 52px; } } .gridCol2 .lazy { min-height: 200px; } .od-home-title-and-des { padding: 25px; } .od-home-title-and-des__title { font-size: 42px; font-family: 'NeuzeitGroReg', sans-serif; text-align: center; } .od-home-mpb { max-width: 1920px; margin: 0 auto; padding: 40px 100px; padding-bottom: 0px; padding-bottom: 60px; padding-top: 0px; } .od-home-mpb__top { font-family: 'NeuzeitGroReg', sans-serif; font-size: 30px; margin-bottom: 24px; } .od-home-mpb__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; width: 100%; } .od-home-mpb__card { width: 100%; height: 100%; cursor: pointer; } .od-home-mpb__card__image { width: 100%; height: 460px; background-repeat: no-repeat; background-size: cover; background-position: top; cursor: pointer; } .od-home-mpb__card__bottom { padding: 18px 0px; text-align: center; font-family: 'Founders Grotesk', sans-serif; font-size: 16px; } .od-home-mpb-mweb.od-home-mpb { padding: 0 16px; } .od-home-mpb-mweb .od-home-mpb__top { width: 100%; margin-bottom: 16px; font-size: 18px; color: #000042; text-align: left; font-family: 'Founders Grotesk', sans-serif; } .od-home-mpb-mweb .od-home-mpb__content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .od-home-mpb-mweb .od-home-mpb__content .od-home-mpb__card { max-width: 156px; height: 187px; position: relative; } .od-home-mpb-mweb .od-home-mpb__content .od-home-mpb__card__image { height: 187px; } .od-home-mpb-mweb .od-home-mpb__content .od-home-mpb__card__title { position: absolute; bottom: 22px; left: 17px; max-width: 97px; font-size: 14px; line-height: 20px; color: #fff; text-align: left; } .od-home-mpb-mweb .od-home-mpb__content .od-home-mpb__card__go-to { position: absolute; bottom: 16px; right: 16px; } .od-home-store-section { display: -webkit-box; display: -ms-flexbox; display: flex; height: 480px; } .od-home-store-section__info { width: 50%; background-color: #999c93; padding-left: 90px; padding-top: 60px; color: #fff; font-family: 'Founders Grotesk'; position: relative; } .od-home-store-section__info__title { font-family: 'Founders Grotesk'; margin-bottom: 20px; font-size: 42px; } .od-home-store-section__info__description { margin-bottom: 16px; font-size: 18px; max-width: 400px; } .od-home-store-section__info__subtext { margin-bottom: 16px; font-size: 18px; } .od-home-store-section__info__button { position: absolute; bottom: 40px; left: 90px; } .od-home-store-section__image { width: 50%; height: 100%; background-position: center; background-size: cover; } .od-information-home__container { width: 100%; max-width: 1230px; padding-inline: 20px; margin-inline: auto; } .od-information-home__header { font-weight: 400; font-family: 'Founders Grotesk', sans-serif; letter-spacing: 1.02px; line-height: 41px; margin-block: 0 20px; } .od-information-home__see-all-btn--pc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; color: #0094c8; font-size: 15px; font-family: 'Founders Grotesk', sans-serif; letter-spacing: 0.5px; } .od-information-home__see-all-btn--pc:hover { color: #007eaa; text-decoration: none; } .od-information-home__see-all-btn--sp { display: none; } .od-information-home__list { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px 20px; } .od-information-home__card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; cursor: pointer; } .od-information-home__card:hover { text-decoration: none; } .od-information-home__card__image { width: 100%; height: auto; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .od-information-home__card__image:hover { opacity: 0.6; } .od-information-home__card__day, .od-information-home__card__desc { text-align: left; } .od-information-home__card__day { color: #666; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 12px; font-family: 'Founders Grotesk', sans-serif; letter-spacing: 0.5px; line-height: 2; } .od-information-home__card__desc { color: #000; -webkit-transition: 0.5s; transition: 0.5s; cursor: pointer; font-size: 14px; font-family: 'Founders Grotesk', sans-serif; letter-spacing: 0.2px; margin-bottom: 0; line-height: 1.7; } .od-information-home__card__desc:hover { opacity: 0.6; } .od-information-home__actions { max-width: 223px; margin: 30px auto; } @media (max-width: 1023px) { .od-information-home__header { font-size: 28px; line-height: 34px; letter-spacing: 0.84px; text-align: center; margin-bottom: 30px; } .od-information-home__card { width: 100%; max-width: 320px; } .od-information-home__see-all-btn--pc { display: none; } .od-information-home__see-all-btn--sp { width: 223px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #666; border: 1px solid #666; font-size: 13px; font-family: 'Founders Grotesk', sans-serif; padding: 16px 0; margin: 24px auto 0 auto; } } @media (min-width: 768px) { .od-information-home__list { grid-template-columns: repeat(3, 1fr); } .od-information-home__card:nth-of-type(4) { display: none; } } @media (min-width: 1024px) { .od-information-home__container { display: grid; grid-template-columns: 1fr 3fr; gap: 30px; } .od-information-home__list { max-width: 100%; } .od-information-home__header { text-align: left; font-size: 28px; } .od-information-home__actions { display: none; } } .od-home__latest-campaigns { text-align: left; font-family: 'Founders Grotesk'; } .od-home__latest-campaigns-container { width: 100%; max-width: 1200px; padding-inline: 20px; margin-inline: auto; } .od-home__latest-campaigns-heading { text-align: center; font-size: 26px; font-weight: 500 !important; line-height: 120%; letter-spacing: 1.3px; margin-top: 0; margin-bottom: 20px; } .od-home__latest-campaigns-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .od-home__latest-campaigns-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer; } .od-home__latest-campaigns-item img { width: 100%; position: relative; z-index: 1; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .od-home__latest-campaigns-item a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .od-home__latest-campaigns-item:first-child { grid-column: 1/span 2; } .od-home__latest-campaigns-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 15px 0; gap: 5px 0; } .od-home__latest-campaigns-details h3 { font-size: 16px; font-weight: 400; margin: 0; } .od-home__latest-campaigns-details p { font-size: 11px; color: #666; line-height: 1.6; margin: 0; } .od-home__latest-campaigns-details span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 11px; color: #0094c8; margin-top: auto; } .od-home__latest-campaigns-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 40px; } .od-home__latest-campaigns-btn .owndays-btn { width: 100%; max-width: 300px; } @media screen and (min-width: 768px) { .od-home__latest-campaigns-list { grid-template-columns: repeat(4, 1fr); } .od-home__latest-campaigns-item:first-child { grid-row: 1/span 2; } .od-home__latest-campaigns-item:hover img { opacity: 0; } .od-home__latest-campaigns-details { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); max-width: 80%; margin: 0 auto; } } @media screen and (min-width: 1024px) { .od-home__latest-campaigns-heading { margin-bottom: 40px; } .od-home__latest-campaigns-list { gap: 28px; } .od-home__latest-campaigns-details { gap: 12px 0; } .od-home__latest-campaigns-details p, .od-home__latest-campaigns-details span { font-size: 14px; } .od-home__latest-campaigns-btn { margin-top: 60px; } } .od-home__tips { font-family: "Founders Grotesk", sans-serif; } .od-home__tips-container { width: 100%; max-width: 1230px; padding-inline: 20px; margin-inline: auto; } .od-home__tips-title h2 { font-family: "Founders Grotesk", sans-serif; font-weight: 400; font-size: 28px; line-height: 34px; letter-spacing: .84px; margin-block: 0 30px; } .od-home__tips-title a { color: #0094c8; text-decoration: none; font-size: 15px; letter-spacing: 0.5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } .od-home__tips-title a:hover, .od-home__tips-title a:focus { color: #007eaa; text-decoration: none; } .od-home__tips-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } .od-home__tips-list li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; text-decoration: none; } .od-home__tips-list li img { aspect-ratio: 7/4; display: block; width: 100%; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .od-home__tips-list li h3 { font-family: "Founders Grotesk", sans-serif; font-size: 14px; line-height: 1.7; letter-spacing: 0.2px; margin: 0; color: #000; text-align: left; font-weight: 400; } .od-home__tips-actions { max-width: 223px; margin: 30px auto; } @media (max-width: 1023px) { .od-home__tips-title { text-align: center; } .od-home__tips-title h2 br { display: none; visibility: hidden; } .od-home__tips-title a { display: none; } } @media (min-width: 768px) { .od-home__tips-list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .od-home__tips-container { display: grid; grid-template-columns: 1fr 3fr; gap: 30px; } .od-home__tips-title h2 { margin-bottom: 20px; text-align: left; } .od-home__tips-list li a:hover img { opacity: 0.6; } .od-home__tips-actions { display: none; visibility: hidden; } } .od-home__outlet { background: #b47e00 url("https://static1.lenskart.com/owndays/img/outlet/outlet-bg-sp.webp") no-repeat center/cover; color: #fff; padding-block: 54px 43px; font-family: 'Founders Grotesk', sans-serif; } .od-home__outlet-container { padding-inline: 20px; margin-inline: auto; width: 100%; max-width: 864px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px 50px; } .od-home__outlet-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 15px; } .od-home__outlet-heading { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .od-home__outlet-heading strong { color: inherit; font-family: inherit; font-size: 40px; font-style: normal; font-weight: 500; line-height: 25px; /* 50% */ letter-spacing: 4px; text-transform: uppercase; position: relative; padding: 5px 20px 5px 0; margin-right: 20px; } .od-home__outlet-heading strong::before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 35px; background-color: #fff; translate: 0 -50%; } .od-home__outlet-heading > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: 0.42px; text-transform: uppercase; line-height: 14px; /* 100% */ } .od-home__outlet-subheading { margin: 0; font-size: 16px; font-style: normal; font-weight: 500; line-height: 16px; letter-spacing: 0.8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .od-home__outlet-subheading strong { color: inherit; font-family: inherit; font-size: 25px; font-style: normal; font-weight: 500; line-height: 16px; letter-spacing: 1.25px; } .od-home__outlet-action { width: 100%; max-width: 300px; } .od-home__outlet-action .owndays-btn--secondary { background-color: transparent; border-color: #fff; color: #fff; } @media (max-width: 767px) { .od-home__outlet-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (min-width: 768px) { .od-home__outlet { background-image: url("https://static1.lenskart.com/owndays/img/outlet/outlet-bg-pc.webp"); } .od-home__outlet-action .owndays-btn--secondary:hover { background-color: #fff; color: #b47e00; } } @media (min-width: 1024px) { .od-home__outlet { padding-block: 73px 63px; } .od-home__outlet-container { -webkit-column-gap: 100px; -moz-column-gap: 100px; column-gap: 100px; } .od-home__outlet-content { gap: 25px; } .od-home__outlet-heading strong { padding-block: 8px; font-size: 70px; line-height: 44px; letter-spacing: 7px; } .od-home__outlet-heading strong::before { height: 60px; } .od-home__outlet-heading > span { font-size: 15px; line-height: 20px; /* 133.333% */ letter-spacing: 0.45px; margin-top: 8px; } .od-home__outlet-subheading { font-size: 18px; letter-spacing: 0.9px; line-height: 19px; } .od-home__outlet-subheading strong { font-size: 30px; letter-spacing: 1.5px; line-height: 19px; } } .section-component--space { margin-block: 60px; } @media (min-width: 1024px) { .section-component--space { margin-block: 110px; } } .odWelcome { font-family: 'Founders Grotesk'; background-color: #F0EFEB; padding: 40px 0px; text-align: center; color: #000; } @media (max-width: 767px) { .odWelcome { padding: 40px; } } .odWelcome__greet { font-size: 40px; margin-bottom: 16px; font-weight: 500; margin-top: 0px; } @media (max-width: 767px) { .odWelcome__greet { font-size: 30px; } } .odWelcome__message { font-size: 24px; margin-bottom: 16px; } @media (max-width: 767px) { .odWelcome__message { font-size: 20px; } } .odButton { padding: 14px 24px; background-color: #000; color: #fff; border-radius: 8px; border: 1px solid #000; font-size: 16px; text-transform: uppercase; font-weight: 500; text-decoration: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .odButton:hover { text-decoration: none; color: #fff; } .odButton:focus { background-color: #4e4e4e; outline: none; } .odButton--white { background-color: #fff; border-color: #fff; color: #000; } .odButton--outline { background-color: transparent; border-color: #000; color: #000; } .odButton--outline:hover { background-color: transparent; color: #000; } .odButton--outline:focus { background-color: rgba(0, 0, 0, .08); outline: none; } .odButton--outline.odButton--white { border-color: #fff; color: #fff; } .odButton--fluid { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1200px) { .odButton { padding: 10px 18px; font-size: 14px; } } @media (max-width: 767px) { .odButton { font-family: 'Founders Grotesk'; font-size: 15px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } .odcategorytab { padding: 60px 40px; border-bottom: 1px solid rgba(0, 0, 0, .082); max-width: 1600px; margin: 0 auto; } @media (max-width: 767px) { .odcategorytab { padding: 60px 0px 0px 20px; border-bottom: none; } } .odcategorytab__mobileBorder { max-width: calc(100% - 20px); margin: 0 auto; padding-top: 24px; margin-left: 0px !important; border-bottom: 1px solid rgba(0, 0, 0, .082); } .odcategorytab-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: 'Founders Grotesk'; font-size: 30px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; color: rgba(0, 0, 0, 0.31373); text-transform: uppercase; cursor: pointer; line-height: 25px; } @media (max-width: 1200px) { .odcategorytab-head { font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } @media (max-width: 767px) { .odcategorytab-head { font-family: 'Founders Grotesk'; font-size: 20px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } .odcategorytab-head-bar:first-child { padding-right: 30px; border-right: 4px solid #000; } @media (max-width: 1200px) { .odcategorytab-head-bar:first-child { border-right: 2px solid #000; padding-right: 15px; } } .odcategorytab-head-bar:last-child { padding-left: 30px; } @media (max-width: 1200px) { .odcategorytab-head-bar:last-child { padding-left: 15px; } } .odcategorytab-head-active { font-family: 'Founders Grotesk'; font-size: 30px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; color: #000; } @media (max-width: 1200px) { .odcategorytab-head-active { font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } @media (max-width: 767px) { .odcategorytab-head-active { font-family: 'Founders Grotesk'; font-size: 20px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } .odcategorytab-body { position: relative; margin-top: 60px; } @media (max-width: 767px) { .odcategorytab-body { margin-top: 30px; } } .odcategorytab-body .slick-slider .slick-list { margin-bottom: 60px; } @media (max-width: 767px) { .odcategorytab-body .slick-slider .slick-list { margin-bottom: 30px; } } .odcategorytab-body .slick-slider .slick-list .slick-slide { padding-left: 10px; padding-right: 20px; } @media (max-width: 767px) { .odcategorytab-body .slick-slider .slick-list .slick-slide { padding-right: 0px; } } .odcategorytab-body .slick-slider .slick-prev { position: absolute; top: 40%; left: -10px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: none; background: none; } @media (max-width: 767px) { .odcategorytab-body .slick-slider .slick-prev { display: none !important; } } .odcategorytab-body .slick-slider .slick-next { position: absolute; top: 40%; right: -40px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: none; background: none; } @media (max-width: 767px) { .odcategorytab-body .slick-slider .slick-next { display: none !important; } } .odcategorytab-body-slick-icon { height: 16px; width: auto; } @media (max-width: 1200px) { .odcategorytab-body-slick-icon { height: 15px; } } @media (max-width: 767px) { .odcategorytab-body-slick-icon { display: none !important; } } .odcategorytab-footer { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .odProductCard { position: relative; border: 2px solid #f7f7f7; border-radius: 12px; cursor: pointer; } .odProductCard__crown { position: absolute; background-color: #f0efeb; color: #646262; left: 16px; top: 16px; z-index: 99; padding: 3px 8px; font-family: 'Founders Grotesk'; font-size: 16px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 767px) { .odProductCard__crown { font-family: 'Founders Grotesk'; font-size: 12px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; padding: 2px 4px; top: 8px; left: 8px; } } .odProductCard__new { position: absolute; color: #b47e00; left: 16px; top: 16px; z-index: 99; font-family: 'Founders Grotesk'; font-size: 16px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; } @media (max-width: 767px) { .odProductCard__new { font-family: 'Founders Grotesk'; font-size: 12px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; top: 8px; left: 8px; } } .odProductCard__crownImg { height: 20px; width: auto; margin-right: 4px; } @media (max-width: 767px) { .odProductCard__crownImg { height: 16px; } } .odProductCard__thumbnail { background-color: #f7f7f7; padding: 0px 10px; } @media (max-width: 1200px) { .odProductCard__thumbnail { padding: 10px 10px; } } @media (max-width: 767px) { .odProductCard__thumbnail { padding: 10px 10px; padding-top: 30px; } } .odProductCard__image { mix-blend-mode: multiply; -webkit-transform: scale(1); transform: scale(1); } .odProductCard__details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 16px; } @media (max-width: 767px) { .odProductCard__details { height: 90px; background-color: #f7f7f7; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-top: 0px; } } .odProductCard__name { font-family: 'Founders Grotesk'; font-size: 18px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767px) { .odProductCard__name { font-family: 'Founders Grotesk'; font-size: 14px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; } } .odProductCard__modelName { font-family: 'Founders Grotesk'; font-size: 16px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; color: #5e5e5e; } .odProductCard__price { font-family: 'Founders Grotesk'; font-size: 20px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; } @media (max-width: 767px) { .odProductCard__price { font-family: 'Founders Grotesk'; font-size: 18px; font-weight: 700; margin-top: 0px; margin-bottom: 0px; } } .odCatCollection { text-align: center; padding: 60px 40px; border-bottom: 1px solid rgba(0, 0, 0, .082); max-width: 1600px; margin: 0 auto; color: #000; } @media (max-width: 767px) { .odCatCollection { padding: 20px 0px 0px 20px; border-bottom: none; } } .odCatCollection__mobileBorder { max-width: calc(100% - 20px); margin: 0 auto; padding-top: 24px; margin-left: 0px !important; border-bottom: 1px solid rgba(0, 0, 0, .082); } .odCatCollection__title { font-family: 'Founders Grotesk'; font-size: 30px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; } @media (max-width: 1200px) { .odCatCollection__title { font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } .odCatCollection__description { font-family: 'Founders Grotesk'; font-size: 22px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; } .odCatCollection__cards { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 24px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 60px 0px; } .odCatCollection__cards::-webkit-scrollbar { display: none; } @media (max-width: 767px) { .odCatCollection__cards { overflow-x: auto; gap: 12px; margin: 30px 0px; } .odCatCollection__cards.msiteSunglasses { display: -webkit-box; display: -ms-flexbox; display: flex; } } .odCatCollection__card { cursor: pointer; text-align: center; position: relative; } @media (max-width: 767px) { .odCatCollection__card { min-width: 230px; } } .odCatCollection__cardImg { width: 100%; } .odCatCollection__cardTitle { position: absolute; bottom: 20px; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; left: 50%; font-family: 'Founders Grotesk'; font-size: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; } .msiteSunglasses { padding-right: 20px; } .msiteSunglasses .odCatCollection__card { min-width: unset; } .odCatCollection__mobileTitle { margin-top: 8px !important; font-family: 'Founders Grotesk'; font-size: 18px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; } .odCollection { padding: 60px 40px; border-bottom: 1px solid rgba(0, 0, 0, .082); max-width: 1600px; margin: 0 auto; color: #000; text-align: center; } @media (max-width: 767px) { .odCollection { padding: 20px 20px; border-bottom: none; } } .odCollection__mobileBorder { width: 100%; margin: 0 auto; padding-top: 24px; border-bottom: 1px solid rgba(0, 0, 0, .082); } .odCollection__head { display: block; margin-bottom: 60px; } @media (max-width: 767px) { .odCollection__head { margin-bottom: 30px; } } .odCollection__title { font-family: 'Founders Grotesk'; font-size: 30px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; color: #000; } @media (max-width: 1200px) { .odCollection__title { font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } .odCollection__description { color: #000; font-family: 'Founders Grotesk'; font-size: 22px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; } .odCollection__image { border-radius: 12px; } .odCollection__card { cursor: pointer; } .odCollection__slider { position: relative; margin-top: 60px; } @media (max-width: 767px) { .odCollection__slider { margin-top: 30px; } } .odCollection__slider .slick-slider .slick-list { margin-bottom: 10px; } .odCollection__slider .slick-slider .slick-list .slick-slide { padding-left: 20px; padding-right: 20px; } @media (max-width: 767px) { .odCollection__slider .slick-slider .slick-list .slick-slide { padding-left: 10px; padding-right: 10px; } } .odCollection__slider .slick-slider .slick-dots { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 767px) { .odCollection__slider .slick-slider .slick-dots { display: none !important; } } .odCollection__slider .slick-slider .slick-dots li button { font-size: 0px; border: none; background-color: #d9d9d9; height: 8px; width: 20px; } .odCollection__slider .slick-slider .slick-dots li.slick-active button { background-color: #000; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 40px; border-radius: 4px; } .odCollection__cta { margin-top: 30px; } .odCollection__cta .odButton { min-width: 169.3px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 768px) { .odCollection__cta .odButton { min-width: 172.38px; } } @media (min-width: 1201px) { .odCollection__cta .odButton { min-width: 187.78px; } } .odServices { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 500px; width: 100%; } @media (max-width: 767px) { .odServices { height: 100%; padding-top: 10px; } } @media (max-width: 1200px) { .odServices__banner { background-position: right !important; } } @media (max-width: 767px) { .odServices__banner { display: none; } } .odServices__content { height: 500px; width: 50%; background-color: #999999; color: #fff; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1200px) { .odServices__content { padding: 50px 30px; } } @media (max-width: 767px) { .odServices__content { width: 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 20px 20px; background-color: #f3f3f3; color: #000; } } .odServices__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 100px; width: 100%; margin-bottom: 50px; } @media (max-width: 1200px) { .odServices__inner { gap: 50px; } } @media (max-width: 767px) { .odServices__inner { margin-bottom: 30px; } } .odServices__image { height: 80px; margin-bottom: 16px; } @media (max-width: 1200px) { .odServices__image { height: 40px; } } @media (max-width: 767px) { .odServices__image { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: invert(1) brightness(0); filter: invert(1) brightness(0); } } .odServices__title { font-family: 'Founders Grotesk'; font-size: 28px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; margin-bottom: 8px; } @media (max-width: 1200px) { .odServices__title { font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; margin-bottom: 12px; line-height: 1.2; } } .odServices__description { font-family: 'Founders Grotesk'; font-size: 18px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; max-width: 250px; margin: 0 auto; } @media (max-width: 1200px) { .odServices__description { font-family: 'Founders Grotesk'; font-size: 16px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; } } .odServices__cta { text-align: center; } .odtips { padding: 60px 40px; max-width: 1600px; margin: 0 auto; } @media (max-width: 767px) { .odtips { padding: 30px 20px; } } .odtips-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 24px; } .odtips-header-title { font-family: 'Founders Grotesk'; font-size: 30px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; } @media (max-width: 1200px) { .odtips-header-title { font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } .odtips-header-more { color: #000; font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; border-bottom: 2px dotted #000; } @media (max-width: 1200px) { .odtips-header-more { font-family: 'Founders Grotesk'; font-size: 18px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; } } .odtips-cards { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 32px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } @media (max-width: 767px) { .odtips-cards { gap: 16px; } } .odtips-cards::-webkit-scrollbar { display: none; } .odtips-cards-item { position: relative; background-position: center; background-size: cover; height: 282px; width: 100%; border-radius: 8px; padding: 32px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 767px) { .odtips-cards-item { width: 200px; height: 200px; } } .odtips-cards-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); /* Adjust darkness here */ z-index: 1; border-radius: 8px; } .odtips-cards-item > * { position: relative; z-index: 2; } .odtips-cards-item-label { color: #fff; font-family: 'Founders Grotesk'; font-size: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; max-width: 230px; line-height: 25px; } @media (max-width: 1200px) { .odtips-cards-item-label { width: 230px; font-family: 'Founders Grotesk'; font-size: 20px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; } } .odInformation { padding: 60px 40px; max-width: 1600px; margin: 0 auto; } @media (max-width: 767px) { .odInformation { padding: 30px 20px; } } .odInformation__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 24px; } .odInformation__title { font-family: 'Founders Grotesk'; font-size: 30px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; } @media (max-width: 1200px) { .odInformation__title { font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } .odInformation__cta { color: #000; font-family: 'Founders Grotesk'; font-size: 24px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; border-bottom: 2px dotted #000; } @media (max-width: 1200px) { .odInformation__cta { font-family: 'Founders Grotesk'; font-size: 18px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; } } .odInformation__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .odInformation__cards::-webkit-scrollbar { display: none; } @media (max-width: 767px) { .odInformation__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } } .odInformation__footer { background-color: #f7f7f7; padding: 14px; height: 130px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } @media (max-width: 1200px) { .odInformation__footer { width: 300px; } } @media (max-width: 767px) { .odInformation__footer { width: 100%; height: 140px; padding: 8px; } } .odInformation__meta { font-family: 'Founders Grotesk'; font-size: 16px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; color: #a5a5a5; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } @media (max-width: 767px) { .odInformation__meta { font-family: 'Founders Grotesk'; font-size: 11px; font-weight: 400; margin-top: 0px; margin-bottom: 0px; gap: 4px; margin-bottom: 8px; } } .odInformation__border { height: 12px; width: 1px; background-color: #a5a5a5; margin-top: 6px; } @media (max-width: 767px) { .odInformation__border { height: 8px; margin-top: 3px; } } .odInformation__label { color: #000; font-family: 'Founders Grotesk'; font-size: 18px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } @media (max-width: 767px) { .odInformation__label { text-align: left; margin-top: 8px; font-family: 'Founders Grotesk'; font-size: 16px; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } } .odInformation__image { border-radius: 15px 15px 0 0; width: 100%; height: 84.5px; -o-object-fit: cover; object-fit: cover; } @media (min-width: 768px) { .odInformation__image { height: 167px; } } html, body { width: 100%; overflow-x: hidden; } @media screen and (max-width: 1024px) { html, body { overflow-x: auto; } } .tabtext { font-size: 12px; font-family: 'FuturaStd-Book', 'FuturaStd-Medium'; color: #636363; padding-top: 0.5%; padding-bottom: 0.2%; border-right: 1px solid #d1d1d1; letter-spacing: 0.7px; } .fullWidthContainer { padding: 0px; margin: 0 auto; } .fullWidthContainer .display-none { display: none !important; } .home .slick-slide { padding-left: 45px; padding-right: 45px; } .home .slick-slide .catSlider_carouselItem { padding-left: 0; padding-right: 0; } @media (max-width: 1400px) { .home-new-banner { margin-top: -4px; } } .home-new-banner > div { width: 50%; float: left; position: relative; overflow: hidden; vertical-align: top; z-index: 1; } .home-new-banner > div .inner-height { height: calc(100vh - 125px); position: relative; overflow: hidden; } @media (max-width: 1300px) { .home-new-banner > div .inner-height { height: auto; } } .home-new-banner > div.home-left:after { background: url("https://static.lenskart.com/media/desktop/img/homepage-cleanup/Gradient.png") left bottom no-repeat; position: absolute; content: ""; width: 100%; height: 100%; left: 0; bottom: 0; } .home-new-banner .banner-text { position: absolute; z-index: 101; left: 0; bottom: 45px; text-align: center; width: 100%; } @media (max-width: 1023px) { .home-new-banner .banner-text { bottom: 30px; } } .home-new-banner .banner-text h3 { color: white; font-size: 32px; margin: 0 0 17px; font-family: 'Rajdhani-Regular'; font-weight: 700 !important; letter-spacing: 0.5px; } .home-new-banner .banner-text h3 span { position: relative; top: -3px; left: 2px; } @media (max-width: 1023px) { .home-new-banner .banner-text h3 { font-size: 26px; margin: 0 0 12px; } } .home-new-banner .banner-text a { background: white; color: #333333; font-size: 14px; display: inline-block; margin: 0 10px; padding: 0px 30px; min-width: 160px; border-radius: 4px; letter-spacing: 0.7px; line-height: 46px; font-family: 'FuturaStd-Heavy'; } @media (max-width: 1023px) { .home-new-banner .banner-text a { font-size: 13px; line-height: 42px; min-width: 148px; margin: 0 8px; } } .home-new-banner .banner-text a:hover { text-decoration: none; } #home-popup-overlay { position: fixed; top: 0; right: 0; width: 100%; background: rgba(0, 0, 0, .7); height: 100%; -webkit-transition: all ease-in-out 0.4s; transition: all ease-in-out 0.4s; display: none; z-index: -1; } #home-popup-overlay.open { display: block; z-index: 1000; } .home-popup-container { width: 100%; max-width: 600px; height: 100vh; left: -601px; top: 0; background: #fff; position: fixed; z-index: 1001; -webkit-transition: all ease-in-out 0.4s; transition: all ease-in-out 0.4s; } .home-popup-container.open { left: 0%; } .home-popup-container .men-block, .home-popup-container .women-block { height: 100vh; width: 100%; display: none; } .home-popup-container .men-block.open, .home-popup-container .women-block.open { display: block; } .home-popup-container .menu-item { height: 33.333%; border-bottom: 1px solid #f1f1f1; } .home-popup-container .menu-item.btn-left a { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; background-position: right; } .home-popup-container .menu-item:last-child { border-bottom: none; } .home-popup-container .menu-item a { display: block; padding: 0 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: left; } .home-popup-container .menu-item a span { background: white; color: #333333; font-size: 16px; display: inline-block; padding: 0; min-width: 180px; border-radius: 4px; letter-spacing: 0.7px; line-height: 40px; font-family: 'FuturaStd-Heavy'; border: 1px solid #dddddd; text-align: center; background-color: #fff; } .home-popup-container .menu-item a:hover { background-color: #fafafa; text-decoration: none; } .home-popup-container .menu-item a:hover span { background: #00bac6; border-color: #00bac6; color: white; -webkit-box-shadow: 6px 14px 11px -5px rgba(0, 186, 198, .2); box-shadow: 6px 14px 11px -5px rgba(0, 186, 198, .2); } .home-popup-container .home-popup-close { position: absolute; width: 18px; height: 18px; top: 10px; right: 15px; cursor: pointer; z-index: 2; } .home-popup-container .home-popup-close::before, .home-popup-container .home-popup-close::after { content: ''; position: absolute; width: 100%; top: 50%; height: 1px; background: #999999; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .home-popup-container .home-popup-close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .backtop { width: 35px; height: 35px; position: fixed; bottom: 91px; right: 40px; display: none; background: #329c92; cursor: pointer; z-index: 1; } @media screen and (min-width: 1920px) { .backtop { right: calc(50vw - 960px); right: -o-calc(50vw - 960px); } } .backtop_icon { position: absolute; color: white; left: 10px; top: 10px; } .scrolltop .backtop { display: inline-block; } .divider-line { border: none; height: 1px; margin: 0; -ms-flex-negative: 0; flex-shrink: 0; background-color: rgba(0, 0, 0, .12); } .no-result-found { font-size: 18px; text-align: center; margin-top: 50px; } .no-result-found.padding-t70 { padding-top: 70px; margin-top: 10px; } .switchbar a { padding-right: 30px; color: #33b7aa; font-family: 'FuturaStd-Heavy', sans-serif; } .switchbar .switch-lk { padding-right: 20px; padding-left: 20px; } .switchbar .main-switch span { font-size: 12px; cursor: pointer; } .switchbar .main-switch { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.2vw; line-height: 1.4; letter-spacing: 1.5px; } .main-switch .green-color { letter-spacing: 1.3px; font-size: 14px; } .green-color { color: #329c92; font-family: 'FuturaStd-Heavy', sans-serif; } .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dittosunglass { font-size: 14px; position: relative; margin: 0; line-height: 30px; text-align: left; text-transform: uppercase; letter-spacing: 2px; margin-left: 6px; } .dittosunglass::after { content: ''; border: 5px solid transparent; border-top: 5px solid #8b8b8b; position: absolute; top: 2px; right: 15px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); } input.cmn-toggle-round + label { padding: 2px; width: 70px; height: 25px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ''; } input.cmn-toggle-round + label:before { right: 1px; background-color: #329c92; border-radius: 60px; -webkit-transition: background 0.4s; transition: background 0.4s; } input.cmn-toggle-round + label:after { width: 24px; background-color: #fff; border-radius: 100%; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .3); box-shadow: 0 2px 5px rgba(0, 0, 0, .3); -webkit-transition: margin 0.4s; transition: margin 0.4s; } input.cmn-toggle-round:checked + label:before { background-color: #329c92; } input.cmn-toggle-round:checked + label:after { margin-left: 44px; } .switchbar h1 { font-family: 'FuturaStd-Medium', sans-serif; font-size: 14px; color: #6d6e71; padding: 0 3%; margin: 0; line-height: 30px; text-align: left; text-transform: uppercase; letter-spacing: 2px; } .switchbar { width: 100%; margin: 0; background-color: #ededed; height: auto; padding: 6px 0 5px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .youtube-video-modal { display: block; } .youtube-cross { position: absolute; cursor: pointer; } .scrolltop .switchbar-section, .scrollbottom .switchbar-section { border-bottom: 3px solid #ddd; position: fixed; top: 115px; z-index: 9 !important; width: -o-calc(96vw - 255px); width: calc(96vw - 255px); left: calc(255px + 2vw); } @media screen and (min-width: 1441px) { .scrolltop .switchbar-section, .scrollbottom .switchbar-section { top: 115px; } } @media screen and (min-width: 1920px) and (max-width: 2000px) { .scrolltop .switchbar-section, .scrollbottom .switchbar-section { left: calc(255px + 2vw); width: calc(96vw - 251px); top: 110px; } } @media screen and (min-width: 2000px) { .scrolltop .switchbar-section, .scrollbottom .switchbar-section { left: calc(-705px + 50vw); width: 1669px; top: 110px; } } @media screen and (max-width: 1024px) { .scrolltop .switchbar-section, .scrollbottom .switchbar-section { top: 0; width: calc(100vw - 255px); } .scrolltop .switchbar-section > div div, .scrollbottom .switchbar-section > div div { max-height: 30px; overflow-y: hidden; } } .filter-loading { position: absolute; top: 50%; z-index: 10; left: 80px; } .power-urls { width: -o-calc(100% - 255px); width: calc(100% - 255px); display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #c1c1c1; border-top: 1px solid #c1c1c1; padding: 0; list-style: none; } .power-urls li { background: none repeat scroll 0 0 #f0f0f0; padding: 0px 15px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; border-right: 1px solid #c1c1c1; } .power-urls li a { color: #206465; display: block; font-size: 15px; font-weight: bold; line-height: 36px; text-align: center; text-decoration: none; } .loding-product-count { margin: 0 0 200px 0; } .cat #livechat-compact-container, .cat #livechat-full { left: auto; right: 15px; } .plp-middle-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border-bottom: 1px solid #ccc; } .plp-middle-container .plp-main-container { min-height: 100vh; width: 100%; margin-left: 0px; } .plp-filters-container { position: sticky; top: 0; z-index: 100; } #categoryPage { max-width: 100%; position: relative; } @media screen and (min-width: 1920px) { #categoryPage { max-width: 100%; } } .plp-image-wrapper { text-align: center; } .tryon-modal { height: 80vh; width: 80vw; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 99999 !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; opacity: 1 !important; visibility: visible !important; } .tryon-modal.modal-dialog { margin: 0 auto; } .tryon-modal .modal-body { height: 100% !important; padding: 0 !important; } .tryon-modal .modal-content { height: 100% !important; border-radius: none !important; border: none !important; } .tryon-modal__iframe { border: none; height: 80vh; width: 80vw; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .tryon-modal__close { display: block; font-size: 32px; position: fixed; right: 10px; top: 20px; z-index: 99999; background: white; border-radius: 50%; width: 40px; line-height: 34px; text-align: center; height: 40px; border: 1px solid #ddd; cursor: pointer; } @media screen and (max-width: 768px) { .tryon-modal { display: none; } } .breadcrumbContainer2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Founders Grotesk", sans-serif; } .breadcrumbContainer2_wrapper { font-size: 11px; letter-spacing: 1px; border-radius: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0px 0 0 32px; } @media screen and (max-width: 768px) { .breadcrumbContainer2_wrapper { padding: 0px 0 0 16px; } } .breadcrumbContainer2_wrapper_breadcrumb { padding: 0; margin: 0; } .breadcrumbContainer2_wrapper_breadcrumb li { font-size: 16px; line-height: 30px; display: inline-block; } @media screen and (max-width: 768px) { .breadcrumbContainer2_wrapper_breadcrumb li { font-size: 12px; line-height: 16px; letter-spacing: 0.12px; } } .breadcrumbContainer2_wrapper_breadcrumb li:after { content: ">"; padding: 0 15px; color: #7c7c7c; } @media screen and (max-width: 768px) { .breadcrumbContainer2_wrapper_breadcrumb li:after { content: "/"; padding: 0 8px; } } .breadcrumbContainer2_wrapper_breadcrumb li:last-child:after { display: none; } .breadcrumbContainer2_wrapper_breadcrumb span { color: #7c7c7c; font-weight: 600; } .breadcrumbContainer2_wrapper_breadcrumb a { font-weight: 400; color: #a5a5a5; } @media screen and (max-width: 768px) { .breadcrumbContainer2_wrapper_breadcrumb a { text-decoration: none !important; } .breadcrumbContainer2_wrapper_breadcrumb a:hover, .breadcrumbContainer2_wrapper_breadcrumb a:focus, .breadcrumbContainer2_wrapper_breadcrumb a:active, .breadcrumbContainer2_wrapper_breadcrumb a:visited { text-decoration: none !important; outline: none; } } @media only screen and (min-width: 1025px) { .breadcrumbContainer_wrapper { margin-top: 5px; padding-left: 32px; } .breadcrumbContainer_wrapper_breadcrumb { text-overflow: ellipsis; white-space: normal; overflow: hidden; } } @media screen and (max-width: 1153px) { .breadcrumbContainer_wrapper { -webkit-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .animatedBackground { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #f6f7f8; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee)); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; } .productWidgetBox { border-radius: 8px; -webkit-transition: -webkit-box-shadow 0.2s ease-in-out; transition: -webkit-box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out; } @media screen and (min-width: 1040px) { .productWidgetBox { min-height: 270px; } } @media screen and (min-width: 1440px) { .productWidgetBox { min-height: 270px; } } .productWidgetBox_widgetImage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .productWidgetBox_widgetImage img:hover { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .productWidgetBox_widgetImage_offerImage { position: absolute; z-index: 11; } .productWidgetBox_widgetImage_offerImage img { width: 72%; } .productWidgetBox .footer-options { opacity: 0; visibility: hidden; position: absolute; left: -9999999px; padding-bottom: 2px; padding-top: 2px; line-height: 24px; } @import url(https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;900&family=Roboto:wght@300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&family=Outfit:wght@100..900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap);@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap);@import url(https://use.typekit.net/pcp6abb.css);@import url(https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap); @charset "UTF-8"; * { font-display: swap; } @font-face { font-family: 'HiraginoMinchoPro'; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/Hiragino-Mincho-ProN-W3.otf") format("otf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'NeuzeitGroBold'; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/NeuzeitGro-Bol.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'NeuzeitGroLig'; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/NeuzeitGro-Lig/NeuzeitGro-Lig.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'NeuzeitGroReg'; src: url("https://static.lenskart.com/media/owndays/desktop/fonts/NeuzeitGro-Reg/NeuzeitGro-Reg.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'SourceSansProRegular'; src: url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.eot"); src: url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.ttf") format("truetype"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Regular-webfont.svg#SourceSansProRegular") format("svg"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'SourceSansProSemibold'; src: url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.eot"); src: url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.ttf") format("truetype"), url("https://static.lenskart.com/fonts/fonts/SourceSansPro-Semibold-webfont.svg#SourceSansProSemibold") format("svg"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSansRegular'; src: url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.eot"); src: url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("https://static.lenskart.com/fonts/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Heavy'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Heavy.woff") format("woff"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Heavy.otf") format("otf"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Heavy.eot") format("eot"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Heavy.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Medium'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Medium.woff") format("woff"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Medium.otf") format("otf"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Medium.eot") format("eot"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Medium.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Book'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Book.woff") format("woff"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Book.otf") format("otf"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Book.eot") format("eot"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Book.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Conv_FuturaStd-Light'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Light.eot"); src: local("☺"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Light.woff") format("woff"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Light.ttf") format("truetype"), url("https://static.lenskart.com/media/wysiwyg/futura-fonts/FuturaStd-Light.svg") format("svg"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Rajdhani-Medium'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/Rajdhani-Medium.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Rajdhani-Regular'; src: url("https://static.lenskart.com/media/wysiwyg/futura-fonts/Rajdhani-Regular.ttf") format("truetype"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Black'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Black.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Black.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Black.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Black.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Bold'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Bold.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Bold.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Bold.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Bold.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Extrablack'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Extrablack.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Extrablack.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Extrablack.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Extrablack.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Hairline'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Hairline.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Hairline.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Hairline.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Hairline.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Medium'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Medium.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Medium.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Medium.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Medium.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSans-Regular'; src: url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Regular.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Regular.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Regular.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lksans/LenskartSans-Regular.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Lenskart-Serif-Book'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Lenskart-Serif-Normal'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Lenskart-Serif-UltraLight'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSerif-Book'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Book.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSerif-Normal'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-Normal.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'LenskartSerif-UltraLight'; src: url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.woff") format("woff"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.otf") format("otf"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.eot") format("eot"), url("https://static.lenskart.com/fonts/fonts/ds/lkserif/Lenskart-Serif-UltraLight.ttf") format("ttf"); font-display: swap; font-weight: normal; font-style: normal; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Light.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Regular.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Medium.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Semibold.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Founders Grotesk'; src: url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Bold.woff2") format("woff2"), url("https://static1.lenskart.com/media/owndays/fonts/FoundersGrotesk/FoundersGrotesk-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'AXIS Std'; src: url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Light.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Light.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'AXIS Std'; src: url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Regular.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'AXIS Std'; src: url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Medium.woff2") format("woff2"), url("https://static.lenskart.com/media/owndays/fonts/AxisStd/AxisStd-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ @font-face { font-family: 'FontAwesome'; src: url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.eot?v=4.7.0"); src: url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("https://static.lenskart.com/media/desktop/fonts/vendor/font-awesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; font-display: swap; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-lg { font-size: 1.33333333em; line-height: .75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.28571429em; text-align: center; } .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: .14285714em; text-align: center; } .fa-li.fa-lg { left: -1.85714286em; } .fa-border { padding: .2em .25em .15em; border: solid .08em #eee; border-radius: .1em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right { margin-left: .3em; } .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { -webkit-filter: none; filter: none; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } .fa-glass:before { content: "\f000"; } .fa-music:before { content: "\f001"; } .fa-search:before { content: "\f002"; } .fa-envelope-o:before { content: "\f003"; } .fa-heart:before { content: "\f004"; } .fa-star:before { content: "\f005"; } .fa-star-o:before { content: "\f006"; } .fa-user:before { content: "\f007"; } .fa-film:before { content: "\f008"; } .fa-th-large:before { content: "\f009"; } .fa-th:before { content: "\f00a"; } .fa-th-list:before { content: "\f00b"; } .fa-check:before { content: "\f00c"; } .fa-remove:before, .fa-close:before, .fa-times:before { content: "\f00d"; } .fa-search-plus:before { content: "\f00e"; } .fa-search-minus:before { content: "\f010"; } .fa-power-off:before { content: "\f011"; } .fa-signal:before { content: "\f012"; } .fa-gear:before, .fa-cog:before { content: "\f013"; } .fa-trash-o:before { content: "\f014"; } .fa-home:before { content: "\f015"; } .fa-file-o:before { content: "\f016"; } .fa-clock-o:before { content: "\f017"; } .fa-road:before { content: "\f018"; } .fa-download:before { content: "\f019"; } .fa-arrow-circle-o-down:before { content: "\f01a"; } .fa-arrow-circle-o-up:before { content: "\f01b"; } .fa-inbox:before { content: "\f01c"; } .fa-play-circle-o:before { content: "\f01d"; } .fa-rotate-right:before, .fa-repeat:before { content: "\f01e"; } .fa-refresh:before { content: "\f021"; } .fa-list-alt:before { content: "\f022"; } .fa-lock:before { content: "\f023"; } .fa-flag:before { content: "\f024"; } .fa-headphones:before { content: "\f025"; } .fa-volume-off:before { content: "\f026"; } .fa-volume-down:before { content: "\f027"; } .fa-volume-up:before { content: "\f028"; } .fa-qrcode:before { content: "\f029"; } .fa-barcode:before { content: "\f02a"; } .fa-tag:before { content: "\f02b"; } .fa-tags:before { content: "\f02c"; } .fa-book:before { content: "\f02d"; } .fa-bookmark:before { content: "\f02e"; } .fa-print:before { content: "\f02f"; } .fa-camera:before { content: "\f030"; } .fa-font:before { content: "\f031"; } .fa-bold:before { content: "\f032"; } .fa-italic:before { content: "\f033"; } .fa-text-height:before { content: "\f034"; } .fa-text-width:before { content: "\f035"; } .fa-align-left:before { content: "\f036"; } .fa-align-center:before { content: "\f037"; } .fa-align-right:before { content: "\f038"; } .fa-align-justify:before { content: "\f039"; } .fa-list:before { content: "\f03a"; } .fa-dedent:before, .fa-outdent:before { content: "\f03b"; } .fa-indent:before { content: "\f03c"; } .fa-video-camera:before { content: "\f03d"; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: "\f03e"; } .fa-pencil:before { content: "\f040"; } .fa-map-marker:before { content: "\f041"; } .fa-adjust:before { content: "\f042"; } .fa-tint:before { content: "\f043"; } .fa-edit:before, .fa-pencil-square-o:before { content: "\f044"; } .fa-share-square-o:before { content: "\f045"; } .fa-check-square-o:before { content: "\f046"; } .fa-arrows:before { content: "\f047"; } .fa-step-backward:before { content: "\f048"; } .fa-fast-backward:before { content: "\f049"; } .fa-backward:before { content: "\f04a"; } .fa-play:before { content: "\f04b"; } .fa-pause:before { content: "\f04c"; } .fa-stop:before { content: "\f04d"; } .fa-forward:before { content: "\f04e"; } .fa-fast-forward:before { content: "\f050"; } .fa-step-forward:before { content: "\f051"; } .fa-eject:before { content: "\f052"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-plus-circle:before { content: "\f055"; } .fa-minus-circle:before { content: "\f056"; } .fa-times-circle:before { content: "\f057"; } .fa-check-circle:before { content: "\f058"; } .fa-question-circle:before { content: "\f059"; } .fa-info-circle:before { content: "\f05a"; } .fa-crosshairs:before { content: "\f05b"; } .fa-times-circle-o:before { content: "\f05c"; } .fa-check-circle-o:before { content: "\f05d"; } .fa-ban:before { content: "\f05e"; } .fa-arrow-left:before { content: "\f060"; } .fa-arrow-right:before { content: "\f061"; } .fa-arrow-up:before { content: "\f062"; } .fa-arrow-down:before { content: "\f063"; } .fa-mail-forward:before, .fa-share:before { content: "\f064"; } .fa-expand:before { content: "\f065"; } .fa-compress:before { content: "\f066"; } .fa-plus:before { content: "\f067"; } .fa-minus:before { content: "\f068"; } .fa-asterisk:before { content: "\f069"; } .fa-exclamation-circle:before { content: "\f06a"; } .fa-gift:before { content: "\f06b"; } .fa-leaf:before { content: "\f06c"; } .fa-fire:before { content: "\f06d"; } .fa-eye:before { content: "\f06e"; } .fa-eye-slash:before { content: "\f070"; } .fa-warning:before, .fa-exclamation-triangle:before { content: "\f071"; } .fa-plane:before { content: "\f072"; } .fa-calendar:before { content: "\f073"; } .fa-random:before { content: "\f074"; } .fa-comment:before { content: "\f075"; } .fa-magnet:before { content: "\f076"; } .fa-chevron-up:before { content: "\f077"; } .fa-chevron-down:before { content: "\f078"; } .fa-retweet:before { content: "\f079"; } .fa-shopping-cart:before { content: "\f07a"; } .fa-folder:before { content: "\f07b"; } .fa-folder-open:before { content: "\f07c"; } .fa-arrows-v:before { content: "\f07d"; } .fa-arrows-h:before { content: "\f07e"; } .fa-bar-chart-o:before, .fa-bar-chart:before { content: "\f080"; } .fa-twitter-square:before { content: "\f081"; } .fa-facebook-square:before { content: "\f082"; } .fa-camera-retro:before { content: "\f083"; } .fa-key:before { content: "\f084"; } .fa-gears:before, .fa-cogs:before { content: "\f085"; } .fa-comments:before { content: "\f086"; } .fa-thumbs-o-up:before { content: "\f087"; } .fa-thumbs-o-down:before { content: "\f088"; } .fa-star-half:before { content: "\f089"; } .fa-heart-o:before { content: "\f08a"; } .fa-sign-out:before { content: "\f08b"; } .fa-linkedin-square:before { content: "\f08c"; } .fa-thumb-tack:before { content: "\f08d"; } .fa-external-link:before { content: "\f08e"; } .fa-sign-in:before { content: "\f090"; } .fa-trophy:before { content: "\f091"; } .fa-github-square:before { content: "\f092"; } .fa-upload:before { content: "\f093"; } .fa-lemon-o:before { content: "\f094"; } .fa-phone:before { content: "\f095"; } .fa-square-o:before { content: "\f096"; } .fa-bookmark-o:before { content: "\f097"; } .fa-phone-square:before { content: "\f098"; } .fa-twitter:before { content: "\f099"; } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } .fa-github:before { content: "\f09b"; } .fa-unlock:before { content: "\f09c"; } .fa-credit-card:before { content: "\f09d"; } .fa-feed:before, .fa-rss:before { content: "\f09e"; } .fa-hdd-o:before { content: "\f0a0"; } .fa-bullhorn:before { content: "\f0a1"; } .fa-bell:before { content: "\f0f3"; } .fa-certificate:before { content: "\f0a3"; } .fa-hand-o-right:before { content: "\f0a4"; } .fa-hand-o-left:before { content: "\f0a5"; } .fa-hand-o-up:before { content: "\f0a6"; } .fa-hand-o-down:before { content: "\f0a7"; } .fa-arrow-circle-left:before { content: "\f0a8"; } .fa-arrow-circle-right:before { content: "\f0a9"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-arrow-circle-down:before { content: "\f0ab"; } .fa-globe:before { content: "\f0ac"; } .fa-wrench:before { content: "\f0ad"; } .fa-tasks:before { content: "\f0ae"; } .fa-filter:before { content: "\f0b0"; } .fa-briefcase:before { content: "\f0b1"; } .fa-arrows-alt:before { content: "\f0b2"; } .fa-group:before, .fa-users:before { content: "\f0c0"; } .fa-chain:before, .fa-link:before { content: "\f0c1"; } .fa-cloud:before { content: "\f0c2"; } .fa-flask:before { content: "\f0c3"; } .fa-cut:before, .fa-scissors:before { content: "\f0c4"; } .fa-copy:before, .fa-files-o:before { content: "\f0c5"; } .fa-paperclip:before { content: "\f0c6"; } .fa-save:before, .fa-floppy-o:before { content: "\f0c7"; } .fa-square:before { content: "\f0c8"; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: "\f0c9"; } .fa-list-ul:before { content: "\f0ca"; } .fa-list-ol:before { content: "\f0cb"; } .fa-strikethrough:before { content: "\f0cc"; } .fa-underline:before { content: "\f0cd"; } .fa-table:before { content: "\f0ce"; } .fa-magic:before { content: "\f0d0"; } .fa-truck:before { content: "\f0d1"; } .fa-pinterest:before { content: "\f0d2"; } .fa-pinterest-square:before { content: "\f0d3"; } .fa-google-plus-square:before { content: "\f0d4"; } .fa-google-plus:before { content: "\f0d5"; } .fa-money:before { content: "\f0d6"; } .fa-caret-down:before { content: "\f0d7"; } .fa-caret-up:before { content: "\f0d8"; } .fa-caret-left:before { content: "\f0d9"; } .fa-caret-right:before { content: "\f0da"; } .fa-columns:before { content: "\f0db"; } .fa-unsorted:before, .fa-sort:before { content: "\f0dc"; } .fa-sort-down:before, .fa-sort-desc:before { content: "\f0dd"; } .fa-sort-up:before, .fa-sort-asc:before { content: "\f0de"; } .fa-envelope:before { content: "\f0e0"; } .fa-linkedin:before { content: "\f0e1"; } .fa-rotate-left:before, .fa-undo:before { content: "\f0e2"; } .fa-legal:before, .fa-gavel:before { content: "\f0e3"; } .fa-dashboard:before, .fa-tachometer:before { content: "\f0e4"; } .fa-comment-o:before { content: "\f0e5"; } .fa-comments-o:before { content: "\f0e6"; } .fa-flash:before, .fa-bolt:before { content: "\f0e7"; } .fa-sitemap:before { content: "\f0e8"; } .fa-umbrella:before { content: "\f0e9"; } .fa-paste:before, .fa-clipboard:before { content: "\f0ea"; } .fa-lightbulb-o:before { content: "\f0eb"; } .fa-exchange:before { content: "\f0ec"; } .fa-cloud-download:before { content: "\f0ed"; } .fa-cloud-upload:before { content: "\f0ee"; } .fa-user-md:before { content: "\f0f0"; } .fa-stethoscope:before { content: "\f0f1"; } .fa-suitcase:before { content: "\f0f2"; } .fa-bell-o:before { content: "\f0a2"; } .fa-coffee:before { content: "\f0f4"; } .fa-cutlery:before { content: "\f0f5"; } .fa-file-text-o:before { content: "\f0f6"; } .fa-building-o:before { content: "\f0f7"; } .fa-hospital-o:before { content: "\f0f8"; } .fa-ambulance:before { content: "\f0f9"; } .fa-medkit:before { content: "\f0fa"; } .fa-fighter-jet:before { content: "\f0fb"; } .fa-beer:before { content: "\f0fc"; } .fa-h-square:before { content: "\f0fd"; } .fa-plus-square:before { content: "\f0fe"; } .fa-angle-double-left:before { content: "\f100"; } .fa-angle-double-right:before { content: "\f101"; } .fa-angle-double-up:before { content: "\f102"; } .fa-angle-double-down:before { content: "\f103"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-angle-down:before { content: "\f107"; } .fa-desktop:before { content: "\f108"; } .fa-laptop:before { content: "\f109"; } .fa-tablet:before { content: "\f10a"; } .fa-mobile-phone:before, .fa-mobile:before { content: "\f10b"; } .fa-circle-o:before { content: "\f10c"; } .fa-quote-left:before { content: "\f10d"; } .fa-quote-right:before { content: "\f10e"; } .fa-spinner:before { content: "\f110"; } .fa-circle:before { content: "\f111"; } .fa-mail-reply:before, .fa-reply:before { content: "\f112"; } .fa-github-alt:before { content: "\f113"; } .fa-folder-o:before { content: "\f114"; } .fa-folder-open-o:before { content: "\f115"; } .fa-smile-o:before { content: "\f118"; } .fa-frown-o:before { content: "\f119"; } .fa-meh-o:before { content: "\f11a"; } .fa-gamepad:before { content: "\f11b"; } .fa-keyboard-o:before { content: "\f11c"; } .fa-flag-o:before { content: "\f11d"; } .fa-flag-checkered:before { content: "\f11e"; } .fa-terminal:before { content: "\f120"; } .fa-code:before { content: "\f121"; } .fa-mail-reply-all:before, .fa-reply-all:before { content: "\f122"; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: "\f123"; } .fa-location-arrow:before { content: "\f124"; } .fa-crop:before { content: "\f125"; } .fa-code-fork:before { content: "\f126"; } .fa-unlink:before, .fa-chain-broken:before { content: "\f127"; } .fa-question:before { content: "\f128"; } .fa-info:before { content: "\f129"; } .fa-exclamation:before { content: "\f12a"; } .fa-superscript:before { content: "\f12b"; } .fa-subscript:before { content: "\f12c"; } .fa-eraser:before { content: "\f12d"; } .fa-puzzle-piece:before { content: "\f12e"; } .fa-microphone:before { content: "\f130"; } .fa-microphone-slash:before { content: "\f131"; } .fa-shield:before { content: "\f132"; } .fa-calendar-o:before { content: "\f133"; } .fa-fire-extinguisher:before { content: "\f134"; } .fa-rocket:before { content: "\f135"; } .fa-maxcdn:before { content: "\f136"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-html5:before { content: "\f13b"; } .fa-css3:before { content: "\f13c"; } .fa-anchor:before { content: "\f13d"; } .fa-unlock-alt:before { content: "\f13e"; } .fa-bullseye:before { content: "\f140"; } .fa-ellipsis-h:before { content: "\f141"; } .fa-ellipsis-v:before { content: "\f142"; } .fa-rss-square:before { content: "\f143"; } .fa-play-circle:before { content: "\f144"; } .fa-ticket:before { content: "\f145"; } .fa-minus-square:before { content: "\f146"; } .fa-minus-square-o:before { content: "\f147"; } .fa-level-up:before { content: "\f148"; } .fa-level-down:before { content: "\f149"; } .fa-check-square:before { content: "\f14a"; } .fa-pencil-square:before { content: "\f14b"; } .fa-external-link-square:before { content: "\f14c"; } .fa-share-square:before { content: "\f14d"; } .fa-compass:before { content: "\f14e"; } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: "\f150"; } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: "\f151"; } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: "\f152"; } .fa-euro:before, .fa-eur:before { content: "\f153"; } .fa-gbp:before { content: "\f154"; } .fa-dollar:before, .fa-usd:before { content: "\f155"; } .fa-rupee:before, .fa-inr:before { content: "\f156"; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: "\f157"; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: "\f158"; } .fa-won:before, .fa-krw:before { content: "\f159"; } .fa-bitcoin:before, .fa-btc:before { content: "\f15a"; } .fa-file:before { content: "\f15b"; } .fa-file-text:before { content: "\f15c"; } .fa-sort-alpha-asc:before { content: "\f15d"; } .fa-sort-alpha-desc:before { content: "\f15e"; } .fa-sort-amount-asc:before { content: "\f160"; } .fa-sort-amount-desc:before { content: "\f161"; } .fa-sort-numeric-asc:before { content: "\f162"; } .fa-sort-numeric-desc:before { content: "\f163"; } .fa-thumbs-up:before { content: "\f164"; } .fa-thumbs-down:before { content: "\f165"; } .fa-youtube-square:before { content: "\f166"; } .fa-youtube:before { content: "\f167"; } .fa-xing:before { content: "\f168"; } .fa-xing-square:before { content: "\f169"; } .fa-youtube-play:before { content: "\f16a"; } .fa-dropbox:before { content: "\f16b"; } .fa-stack-overflow:before { content: "\f16c"; } .fa-instagram:before { content: "\f16d"; } .fa-flickr:before { content: "\f16e"; } .fa-adn:before { content: "\f170"; } .fa-bitbucket:before { content: "\f171"; } .fa-bitbucket-square:before { content: "\f172"; } .fa-tumblr:before { content: "\f173"; } .fa-tumblr-square:before { content: "\f174"; } .fa-long-arrow-down:before { content: "\f175"; } .fa-long-arrow-up:before { content: "\f176"; } .fa-long-arrow-left:before { content: "\f177"; } .fa-long-arrow-right:before { content: "\f178"; } .fa-apple:before { content: "\f179"; } .fa-windows:before { content: "\f17a"; } .fa-android:before { content: "\f17b"; } .fa-linux:before { content: "\f17c"; } .fa-dribbble:before { content: "\f17d"; } .fa-skype:before { content: "\f17e"; } .fa-foursquare:before { content: "\f180"; } .fa-trello:before { content: "\f181"; } .fa-female:before { content: "\f182"; } .fa-male:before { content: "\f183"; } .fa-gittip:before, .fa-gratipay:before { content: "\f184"; } .fa-sun-o:before { content: "\f185"; } .fa-moon-o:before { content: "\f186"; } .fa-archive:before { content: "\f187"; } .fa-bug:before { content: "\f188"; } .fa-vk:before { content: "\f189"; } .fa-weibo:before { content: "\f18a"; } .fa-renren:before { content: "\f18b"; } .fa-pagelines:before { content: "\f18c"; } .fa-stack-exchange:before { content: "\f18d"; } .fa-arrow-circle-o-right:before { content: "\f18e"; } .fa-arrow-circle-o-left:before { content: "\f190"; } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: "\f191"; } .fa-dot-circle-o:before { content: "\f192"; } .fa-wheelchair:before { content: "\f193"; } .fa-vimeo-square:before { content: "\f194"; } .fa-turkish-lira:before, .fa-try:before { content: "\f195"; } .fa-plus-square-o:before { content: "\f196"; } .fa-space-shuttle:before { content: "\f197"; } .fa-slack:before { content: "\f198"; } .fa-envelope-square:before { content: "\f199"; } .fa-wordpress:before { content: "\f19a"; } .fa-openid:before { content: "\f19b"; } .fa-institution:before, .fa-bank:before, .fa-university:before { content: "\f19c"; } .fa-mortar-board:before, .fa-graduation-cap:before { content: "\f19d"; } .fa-yahoo:before { content: "\f19e"; } .fa-google:before { content: "\f1a0"; } .fa-reddit:before { content: "\f1a1"; } .fa-reddit-square:before { content: "\f1a2"; } .fa-stumbleupon-circle:before { content: "\f1a3"; } .fa-stumbleupon:before { content: "\f1a4"; } .fa-delicious:before { content: "\f1a5"; } .fa-digg:before { content: "\f1a6"; } .fa-pied-piper-pp:before { content: "\f1a7"; } .fa-pied-piper-alt:before { content: "\f1a8"; } .fa-drupal:before { content: "\f1a9"; } .fa-joomla:before { content: "\f1aa"; } .fa-language:before { content: "\f1ab"; } .fa-fax:before { content: "\f1ac"; } .fa-building:before { content: "\f1ad"; } .fa-child:before { content: "\f1ae"; } .fa-paw:before { content: "\f1b0"; } .fa-spoon:before { content: "\f1b1"; } .fa-cube:before { content: "\f1b2"; } .fa-cubes:before { content: "\f1b3"; } .fa-behance:before { content: "\f1b4"; } .fa-behance-square:before { content: "\f1b5"; } .fa-steam:before { content: "\f1b6"; } .fa-steam-square:before { content: "\f1b7"; } .fa-recycle:before { content: "\f1b8"; } .fa-automobile:before, .fa-car:before { content: "\f1b9"; } .fa-cab:before, .fa-taxi:before { content: "\f1ba"; } .fa-tree:before { content: "\f1bb"; } .fa-spotify:before { content: "\f1bc"; } .fa-deviantart:before { content: "\f1bd"; } .fa-soundcloud:before { content: "\f1be"; } .fa-database:before { content: "\f1c0"; } .fa-file-pdf-o:before { content: "\f1c1"; } .fa-file-word-o:before { content: "\f1c2"; } .fa-file-excel-o:before { content: "\f1c3"; } .fa-file-powerpoint-o:before { content: "\f1c4"; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: "\f1c5"; } .fa-file-zip-o:before, .fa-file-archive-o:before { content: "\f1c6"; } .fa-file-sound-o:before, .fa-file-audio-o:before { content: "\f1c7"; } .fa-file-movie-o:before, .fa-file-video-o:before { content: "\f1c8"; } .fa-file-code-o:before { content: "\f1c9"; } .fa-vine:before { content: "\f1ca"; } .fa-codepen:before { content: "\f1cb"; } .fa-jsfiddle:before { content: "\f1cc"; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: "\f1cd"; } .fa-circle-o-notch:before { content: "\f1ce"; } .fa-ra:before, .fa-resistance:before, .fa-rebel:before { content: "\f1d0"; } .fa-ge:before, .fa-empire:before { content: "\f1d1"; } .fa-git-square:before { content: "\f1d2"; } .fa-git:before { content: "\f1d3"; } .fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before { content: "\f1d4"; } .fa-tencent-weibo:before { content: "\f1d5"; } .fa-qq:before { content: "\f1d6"; } .fa-wechat:before, .fa-weixin:before { content: "\f1d7"; } .fa-send:before, .fa-paper-plane:before { content: "\f1d8"; } .fa-send-o:before, .fa-paper-plane-o:before { content: "\f1d9"; } .fa-history:before { content: "\f1da"; } .fa-circle-thin:before { content: "\f1db"; } .fa-header:before { content: "\f1dc"; } .fa-paragraph:before { content: "\f1dd"; } .fa-sliders:before { content: "\f1de"; } .fa-share-alt:before { content: "\f1e0"; } .fa-share-alt-square:before { content: "\f1e1"; } .fa-bomb:before { content: "\f1e2"; } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: "\f1e3"; } .fa-tty:before { content: "\f1e4"; } .fa-binoculars:before { content: "\f1e5"; } .fa-plug:before { content: "\f1e6"; } .fa-slideshare:before { content: "\f1e7"; } .fa-twitch:before { content: "\f1e8"; } .fa-yelp:before { content: "\f1e9"; } .fa-newspaper-o:before { content: "\f1ea"; } .fa-wifi:before { content: "\f1eb"; } .fa-calculator:before { content: "\f1ec"; } .fa-paypal:before { content: "\f1ed"; } .fa-google-wallet:before { content: "\f1ee"; } .fa-cc-visa:before { content: "\f1f0"; } .fa-cc-mastercard:before { content: "\f1f1"; } .fa-cc-discover:before { content: "\f1f2"; } .fa-cc-amex:before { content: "\f1f3"; } .fa-cc-paypal:before { content: "\f1f4"; } .fa-cc-stripe:before { content: "\f1f5"; } .fa-bell-slash:before { content: "\f1f6"; } .fa-bell-slash-o:before { content: "\f1f7"; } .fa-trash:before { content: "\f1f8"; } .fa-copyright:before { content: "\f1f9"; } .fa-at:before { content: "\f1fa"; } .fa-eyedropper:before { content: "\f1fb"; } .fa-paint-brush:before { content: "\f1fc"; } .fa-birthday-cake:before { content: "\f1fd"; } .fa-area-chart:before { content: "\f1fe"; } .fa-pie-chart:before { content: "\f200"; } .fa-line-chart:before { content: "\f201"; } .fa-lastfm:before { content: "\f202"; } .fa-lastfm-square:before { content: "\f203"; } .fa-toggle-off:before { content: "\f204"; } .fa-toggle-on:before { content: "\f205"; } .fa-bicycle:before { content: "\f206"; } .fa-bus:before { content: "\f207"; } .fa-ioxhost:before { content: "\f208"; } .fa-angellist:before { content: "\f209"; } .fa-cc:before { content: "\f20a"; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: "\f20b"; } .fa-meanpath:before { content: "\f20c"; } .fa-buysellads:before { content: "\f20d"; } .fa-connectdevelop:before { content: "\f20e"; } .fa-dashcube:before { content: "\f210"; } .fa-forumbee:before { content: "\f211"; } .fa-leanpub:before { content: "\f212"; } .fa-sellsy:before { content: "\f213"; } .fa-shirtsinbulk:before { content: "\f214"; } .fa-simplybuilt:before { content: "\f215"; } .fa-skyatlas:before { content: "\f216"; } .fa-cart-plus:before { content: "\f217"; } .fa-cart-arrow-down:before { content: "\f218"; } .fa-diamond:before { content: "\f219"; } .fa-ship:before { content: "\f21a"; } .fa-user-secret:before { content: "\f21b"; } .fa-motorcycle:before { content: "\f21c"; } .fa-street-view:before { content: "\f21d"; } .fa-heartbeat:before { content: "\f21e"; } .fa-venus:before { content: "\f221"; } .fa-mars:before { content: "\f222"; } .fa-mercury:before { content: "\f223"; } .fa-intersex:before, .fa-transgender:before { content: "\f224"; } .fa-transgender-alt:before { content: "\f225"; } .fa-venus-double:before { content: "\f226"; } .fa-mars-double:before { content: "\f227"; } .fa-venus-mars:before { content: "\f228"; } .fa-mars-stroke:before { content: "\f229"; } .fa-mars-stroke-v:before { content: "\f22a"; } .fa-mars-stroke-h:before { content: "\f22b"; } .fa-neuter:before { content: "\f22c"; } .fa-genderless:before { content: "\f22d"; } .fa-facebook-official:before { content: "\f230"; } .fa-pinterest-p:before { content: "\f231"; } .fa-whatsapp:before { content: "\f232"; } .fa-server:before { content: "\f233"; } .fa-user-plus:before { content: "\f234"; } .fa-user-times:before { content: "\f235"; } .fa-hotel:before, .fa-bed:before { content: "\f236"; } .fa-viacoin:before { content: "\f237"; } .fa-train:before { content: "\f238"; } .fa-subway:before { content: "\f239"; } .fa-medium:before { content: "\f23a"; } .fa-yc:before, .fa-y-combinator:before { content: "\f23b"; } .fa-optin-monster:before { content: "\f23c"; } .fa-opencart:before { content: "\f23d"; } .fa-expeditedssl:before { content: "\f23e"; } .fa-battery-4:before, .fa-battery:before, .fa-battery-full:before { content: "\f240"; } .fa-battery-3:before, .fa-battery-three-quarters:before { content: "\f241"; } .fa-battery-2:before, .fa-battery-half:before { content: "\f242"; } .fa-battery-1:before, .fa-battery-quarter:before { content: "\f243"; } .fa-battery-0:before, .fa-battery-empty:before { content: "\f244"; } .fa-mouse-pointer:before { content: "\f245"; } .fa-i-cursor:before { content: "\f246"; } .fa-object-group:before { content: "\f247"; } .fa-object-ungroup:before { content: "\f248"; } .fa-sticky-note:before { content: "\f249"; } .fa-sticky-note-o:before { content: "\f24a"; } .fa-cc-jcb:before { content: "\f24b"; } .fa-cc-diners-club:before { content: "\f24c"; } .fa-clone:before { content: "\f24d"; } .fa-balance-scale:before { content: "\f24e"; } .fa-hourglass-o:before { content: "\f250"; } .fa-hourglass-1:before, .fa-hourglass-start:before { content: "\f251"; } .fa-hourglass-2:before, .fa-hourglass-half:before { content: "\f252"; } .fa-hourglass-3:before, .fa-hourglass-end:before { content: "\f253"; } .fa-hourglass:before { content: "\f254"; } .fa-hand-grab-o:before, .fa-hand-rock-o:before { content: "\f255"; } .fa-hand-stop-o:before, .fa-hand-paper-o:before { content: "\f256"; } .fa-hand-scissors-o:before { content: "\f257"; } .fa-hand-lizard-o:before { content: "\f258"; } .fa-hand-spock-o:before { content: "\f259"; } .fa-hand-pointer-o:before { content: "\f25a"; } .fa-hand-peace-o:before { content: "\f25b"; } .fa-trademark:before { content: "\f25c"; } .fa-registered:before { content: "\f25d"; } .fa-creative-commons:before { content: "\f25e"; } .fa-gg:before { content: "\f260"; } .fa-gg-circle:before { content: "\f261"; } .fa-tripadvisor:before { content: "\f262"; } .fa-odnoklassniki:before { content: "\f263"; } .fa-odnoklassniki-square:before { content: "\f264"; } .fa-get-pocket:before { content: "\f265"; } .fa-wikipedia-w:before { content: "\f266"; } .fa-safari:before { content: "\f267"; } .fa-chrome:before { content: "\f268"; } .fa-firefox:before { content: "\f269"; } .fa-opera:before { content: "\f26a"; } .fa-internet-explorer:before { content: "\f26b"; } .fa-tv:before, .fa-television:before { content: "\f26c"; } .fa-contao:before { content: "\f26d"; } .fa-500px:before { content: "\f26e"; } .fa-amazon:before { content: "\f270"; } .fa-calendar-plus-o:before { content: "\f271"; } .fa-calendar-minus-o:before { content: "\f272"; } .fa-calendar-times-o:before { content: "\f273"; } .fa-calendar-check-o:before { content: "\f274"; } .fa-industry:before { content: "\f275"; } .fa-map-pin:before { content: "\f276"; } .fa-map-signs:before { content: "\f277"; } .fa-map-o:before { content: "\f278"; } .fa-map:before { content: "\f279"; } .fa-commenting:before { content: "\f27a"; } .fa-commenting-o:before { content: "\f27b"; } .fa-houzz:before { content: "\f27c"; } .fa-vimeo:before { content: "\f27d"; } .fa-black-tie:before { content: "\f27e"; } .fa-fonticons:before { content: "\f280"; } .fa-reddit-alien:before { content: "\f281"; } .fa-edge:before { content: "\f282"; } .fa-credit-card-alt:before { content: "\f283"; } .fa-codiepie:before { content: "\f284"; } .fa-modx:before { content: "\f285"; } .fa-fort-awesome:before { content: "\f286"; } .fa-usb:before { content: "\f287"; } .fa-product-hunt:before { content: "\f288"; } .fa-mixcloud:before { content: "\f289"; } .fa-scribd:before { content: "\f28a"; } .fa-pause-circle:before { content: "\f28b"; } .fa-pause-circle-o:before { content: "\f28c"; } .fa-stop-circle:before { content: "\f28d"; } .fa-stop-circle-o:before { content: "\f28e"; } .fa-shopping-bag:before { content: "\f290"; } .fa-shopping-basket:before { content: "\f291"; } .fa-hashtag:before { content: "\f292"; } .fa-bluetooth:before { content: "\f293"; } .fa-bluetooth-b:before { content: "\f294"; } .fa-percent:before { content: "\f295"; } .fa-gitlab:before { content: "\f296"; } .fa-wpbeginner:before { content: "\f297"; } .fa-wpforms:before { content: "\f298"; } .fa-envira:before { content: "\f299"; } .fa-universal-access:before { content: "\f29a"; } .fa-wheelchair-alt:before { content: "\f29b"; } .fa-question-circle-o:before { content: "\f29c"; } .fa-blind:before { content: "\f29d"; } .fa-audio-description:before { content: "\f29e"; } .fa-volume-control-phone:before { content: "\f2a0"; } .fa-braille:before { content: "\f2a1"; } .fa-assistive-listening-systems:before { content: "\f2a2"; } .fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before { content: "\f2a3"; } .fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before { content: "\f2a4"; } .fa-glide:before { content: "\f2a5"; } .fa-glide-g:before { content: "\f2a6"; } .fa-signing:before, .fa-sign-language:before { content: "\f2a7"; } .fa-low-vision:before { content: "\f2a8"; } .fa-viadeo:before { content: "\f2a9"; } .fa-viadeo-square:before { content: "\f2aa"; } .fa-snapchat:before { content: "\f2ab"; } .fa-snapchat-ghost:before { content: "\f2ac"; } .fa-snapchat-square:before { content: "\f2ad"; } .fa-pied-piper:before { content: "\f2ae"; } .fa-first-order:before { content: "\f2b0"; } .fa-yoast:before { content: "\f2b1"; } .fa-themeisle:before { content: "\f2b2"; } .fa-google-plus-circle:before, .fa-google-plus-official:before { content: "\f2b3"; } .fa-fa:before, .fa-font-awesome:before { content: "\f2b4"; } .fa-handshake-o:before { content: "\f2b5"; } .fa-envelope-open:before { content: "\f2b6"; } .fa-envelope-open-o:before { content: "\f2b7"; } .fa-linode:before { content: "\f2b8"; } .fa-address-book:before { content: "\f2b9"; } .fa-address-book-o:before { content: "\f2ba"; } .fa-vcard:before, .fa-address-card:before { content: "\f2bb"; } .fa-vcard-o:before, .fa-address-card-o:before { content: "\f2bc"; } .fa-user-circle:before { content: "\f2bd"; } .fa-user-circle-o:before { content: "\f2be"; } .fa-user-o:before { content: "\f2c0"; } .fa-id-badge:before { content: "\f2c1"; } .fa-drivers-license:before, .fa-id-card:before { content: "\f2c2"; } .fa-drivers-license-o:before, .fa-id-card-o:before { content: "\f2c3"; } .fa-quora:before { content: "\f2c4"; } .fa-free-code-camp:before { content: "\f2c5"; } .fa-telegram:before { content: "\f2c6"; } .fa-thermometer-4:before, .fa-thermometer:before, .fa-thermometer-full:before { content: "\f2c7"; } .fa-thermometer-3:before, .fa-thermometer-three-quarters:before { content: "\f2c8"; } .fa-thermometer-2:before, .fa-thermometer-half:before { content: "\f2c9"; } .fa-thermometer-1:before, .fa-thermometer-quarter:before { content: "\f2ca"; } .fa-thermometer-0:before, .fa-thermometer-empty:before { content: "\f2cb"; } .fa-shower:before { content: "\f2cc"; } .fa-bathtub:before, .fa-s15:before, .fa-bath:before { content: "\f2cd"; } .fa-podcast:before { content: "\f2ce"; } .fa-window-maximize:before { content: "\f2d0"; } .fa-window-minimize:before { content: "\f2d1"; } .fa-window-restore:before { content: "\f2d2"; } .fa-times-rectangle:before, .fa-window-close:before { content: "\f2d3"; } .fa-times-rectangle-o:before, .fa-window-close-o:before { content: "\f2d4"; } .fa-bandcamp:before { content: "\f2d5"; } .fa-grav:before { content: "\f2d6"; } .fa-etsy:before { content: "\f2d7"; } .fa-imdb:before { content: "\f2d8"; } .fa-ravelry:before { content: "\f2d9"; } .fa-eercast:before { content: "\f2da"; } .fa-microchip:before { content: "\f2db"; } .fa-snowflake-o:before { content: "\f2dc"; } .fa-superpowers:before { content: "\f2dd"; } .fa-wpexplorer:before { content: "\f2de"; } .fa-meetup:before { content: "\f2e0"; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } .button { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; border-width: 1px; border-style: solid; border-color: #000; color: #000; min-height: 50px; max-height: 50px; font-family: 'Founders Grotesk', sans-serif; font-size: 14px; font-weight: 500; -webkit-transition: all .3s ease; transition: all .3s ease; text-decoration: none; } .button:hover, .button:focus { text-decoration: none; color: #000; border-color: #000; outline: none; } .button--primary, .button--primary:focus { background-color: #000; color: #fff; } .button--primary:hover { background-color: #999; color: #fff; border-color: transparent; } .button--secondary, .button--secondary:hover, .button--secondary:focus { color: #666; border-color: #666; background-color: #fff; } @media (min-width: 1024px) { .button--primdary:hover { color: #fff; background-color: #999; border-color: #999; } .button--primdary:focus { background-color: #000; color: #fff; } .button--secondary:hover { background-color: #666; color: #fff; } .button--secondary:focus { color: #666; background-color: #fff; } } .button-group { display: grid; gap: 16px; } @media (min-width: 768px) { .button-group--2 { grid-template-columns: repeat(2, 1fr); } .button-group--3 { grid-template-columns: repeat(3, 1fr); } .button-group--4 { grid-template-columns: repeat(4, 1fr); } } html { height: 100%; } .btn-focus { outline: none !important; -webkit-box-shadow: none; box-shadow: none; } body { font-family: 'Founders Grotesk', sans-serif; font-size: 13px; line-height: 1.42857; color: #333; background-color: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .seller-label { letter-spacing: 0.8px; } .seller-label { letter-spacing: 0.8px; } .default-filters { max-width: 255px; } .padding--5 { padding: -5px; } .padding-l-5 { padding-left: -5px; } .padding-t-5 { padding-top: -5px; } .padding-r-5 { padding-right: -5px; } .padding-b-5 { padding-bottom: -5px; } .margin--5 { margin: -5px; } .margin-r-5 { margin-right: -5px; } .margin-t-5 { margin-top: -5px; } .margin-b-5 { margin-bottom: -5px; } .margin-l-5 { margin-left: -5px; } .padding--4 { padding: -4px; } .padding-l-4 { padding-left: -4px; } .padding-t-4 { padding-top: -4px; } .padding-r-4 { padding-right: -4px; } .padding-b-4 { padding-bottom: -4px; } .margin--4 { margin: -4px; } .margin-r-4 { margin-right: -4px; } .margin-t-4 { margin-top: -4px; } .margin-b-4 { margin-bottom: -4px; } .margin-l-4 { margin-left: -4px; } .padding--3 { padding: -3px; } .padding-l-3 { padding-left: -3px; } .padding-t-3 { padding-top: -3px; } .padding-r-3 { padding-right: -3px; } .padding-b-3 { padding-bottom: -3px; } .margin--3 { margin: -3px; } .margin-r-3 { margin-right: -3px; } .margin-t-3 { margin-top: -3px; } .margin-b-3 { margin-bottom: -3px; } .margin-l-3 { margin-left: -3px; } .padding--2 { padding: -2px; } .padding-l-2 { padding-left: -2px; } .padding-t-2 { padding-top: -2px; } .padding-r-2 { padding-right: -2px; } .padding-b-2 { padding-bottom: -2px; } .margin--2 { margin: -2px; } .margin-r-2 { margin-right: -2px; } .margin-t-2 { margin-top: -2px; } .margin-b-2 { margin-bottom: -2px; } .margin-l-2 { margin-left: -2px; } .padding--1 { padding: -1px; } .padding-l-1 { padding-left: -1px; } .padding-t-1 { padding-top: -1px; } .padding-r-1 { padding-right: -1px; } .padding-b-1 { padding-bottom: -1px; } .margin--1 { margin: -1px; } .margin-r-1 { margin-right: -1px; } .margin-t-1 { margin-top: -1px; } .margin-b-1 { margin-bottom: -1px; } .margin-l-1 { margin-left: -1px; } .padding-0 { padding: 0px; } .padding-l0 { padding-left: 0px; } .padding-t0 { padding-top: 0px; } .padding-r0 { padding-right: 0px; } .padding-b0 { padding-bottom: 0px; } .margin-0 { margin: 0px; } .margin-r0 { margin-right: 0px; } .margin-t0 { margin-top: 0px; } .margin-b0 { margin-bottom: 0px; } .margin-l0 { margin-left: 0px; } .padding-1 { padding: 1px; } .padding-l1 { padding-left: 1px; } .padding-t1 { padding-top: 1px; } .padding-r1 { padding-right: 1px; } .padding-b1 { padding-bottom: 1px; } .margin-1 { margin: 1px; } .margin-r1 { margin-right: 1px; } .margin-t1 { margin-top: 1px; } .margin-b1 { margin-bottom: 1px; } .margin-l1 { margin-left: 1px; } .padding-2 { padding: 2px; } .padding-l2 { padding-left: 2px; } .padding-t2 { padding-top: 2px; } .padding-r2 { padding-right: 2px; } .padding-b2 { padding-bottom: 2px; } .margin-2 { margin: 2px; } .margin-r2 { margin-right: 2px; } .margin-t2 { margin-top: 2px; } .margin-b2 { margin-bottom: 2px; } .margin-l2 { margin-left: 2px; } .padding-3 { padding: 3px; } .padding-l3 { padding-left: 3px; } .padding-t3 { padding-top: 3px; } .padding-r3 { padding-right: 3px; } .padding-b3 { padding-bottom: 3px; } .margin-3 { margin: 3px; } .margin-r3 { margin-right: 3px; } .margin-t3 { margin-top: 3px; } .margin-b3 { margin-bottom: 3px; } .margin-l3 { margin-left: 3px; } .padding-4 { padding: 4px; } .padding-l4 { padding-left: 4px; } .padding-t4 { padding-top: 4px; } .padding-r4 { padding-right: 4px; } .padding-b4 { padding-bottom: 4px; } .margin-4 { margin: 4px; } .margin-r4 { margin-right: 4px; } .margin-t4 { margin-top: 4px; } .margin-b4 { margin-bottom: 4px; } .margin-l4 { margin-left: 4px; } .padding-5 { padding: 5px; } .padding-l5 { padding-left: 5px; } .padding-t5 { padding-top: 5px; } .padding-r5 { padding-right: 5px; } .padding-b5 { padding-bottom: 5px; } .margin-5 { margin: 5px; } .margin-r5 { margin-right: 5px; } .margin-t5 { margin-top: 5px; } .margin-b5 { margin-bottom: 5px; } .margin-l5 { margin-left: 5px; } .padding-6 { padding: 6px; } .padding-l6 { padding-left: 6px; } .padding-t6 { padding-top: 6px; } .padding-r6 { padding-right: 6px; } .padding-b6 { padding-bottom: 6px; } .margin-6 { margin: 6px; } .margin-r6 { margin-right: 6px; } .margin-t6 { margin-top: 6px; } .margin-b6 { margin-bottom: 6px; } .margin-l6 { margin-left: 6px; } .padding-7 { padding: 7px; } .padding-l7 { padding-left: 7px; } .padding-t7 { padding-top: 7px; } .padding-r7 { padding-right: 7px; } .padding-b7 { padding-bottom: 7px; } .margin-7 { margin: 7px; } .margin-r7 { margin-right: 7px; } .margin-t7 { margin-top: 7px; } .margin-b7 { margin-bottom: 7px; } .margin-l7 { margin-left: 7px; } .padding-8 { padding: 8px; } .padding-l8 { padding-left: 8px; } .padding-t8 { padding-top: 8px; } .padding-r8 { padding-right: 8px; } .padding-b8 { padding-bottom: 8px; } .margin-8 { margin: 8px; } .margin-r8 { margin-right: 8px; } .margin-t8 { margin-top: 8px; } .margin-b8 { margin-bottom: 8px; } .margin-l8 { margin-left: 8px; } .padding-9 { padding: 9px; } .padding-l9 { padding-left: 9px; } .padding-t9 { padding-top: 9px; } .padding-r9 { padding-right: 9px; } .padding-b9 { padding-bottom: 9px; } .margin-9 { margin: 9px; } .margin-r9 { margin-right: 9px; } .margin-t9 { margin-top: 9px; } .margin-b9 { margin-bottom: 9px; } .margin-l9 { margin-left: 9px; } .padding-10 { padding: 10px; } .padding-l10 { padding-left: 10px; } .padding-t10 { padding-top: 10px; } .padding-r10 { padding-right: 10px; } .padding-b10 { padding-bottom: 10px; } .margin-10 { margin: 10px; } .margin-r10 { margin-right: 10px; } .margin-t10 { margin-top: 10px; } .margin-b10 { margin-bottom: 10px; } .margin-l10 { margin-left: 10px; } .padding-11 { padding: 11px; } .padding-l11 { padding-left: 11px; } .padding-t11 { padding-top: 11px; } .padding-r11 { padding-right: 11px; } .padding-b11 { padding-bottom: 11px; } .margin-11 { margin: 11px; } .margin-r11 { margin-right: 11px; } .margin-t11 { margin-top: 11px; } .margin-b11 { margin-bottom: 11px; } .margin-l11 { margin-left: 11px; } .padding-12 { padding: 12px; } .padding-l12 { padding-left: 12px; } .padding-t12 { padding-top: 12px; } .padding-r12 { padding-right: 12px; } .padding-b12 { padding-bottom: 12px; } .margin-12 { margin: 12px; } .margin-r12 { margin-right: 12px; } .margin-t12 { margin-top: 12px; } .margin-b12 { margin-bottom: 12px; } .margin-l12 { margin-left: 12px; } .padding-13 { padding: 13px; } .padding-l13 { padding-left: 13px; } .padding-t13 { padding-top: 13px; } .padding-r13 { padding-right: 13px; } .padding-b13 { padding-bottom: 13px; } .margin-13 { margin: 13px; } .margin-r13 { margin-right: 13px; } .margin-t13 { margin-top: 13px; } .margin-b13 { margin-bottom: 13px; } .margin-l13 { margin-left: 13px; } .padding-14 { padding: 14px; } .padding-l14 { padding-left: 14px; } .padding-t14 { padding-top: 14px; } .padding-r14 { padding-right: 14px; } .padding-b14 { padding-bottom: 14px; } .margin-14 { margin: 14px; } .margin-r14 { margin-right: 14px; } .margin-t14 { margin-top: 14px; } .margin-b14 { margin-bottom: 14px; } .margin-l14 { margin-left: 14px; } .padding-15 { padding: 15px; } .padding-l15 { padding-left: 15px; } .padding-t15 { padding-top: 15px; } .padding-r15 { padding-right: 15px; } .padding-b15 { padding-bottom: 15px; } .margin-15 { margin: 15px; } .margin-r15 { margin-right: 15px; } .margin-t15 { margin-top: 15px; } .margin-b15 { margin-bottom: 15px; } .margin-l15 { margin-left: 15px; } .padding-16 { padding: 16px; } .padding-l16 { padding-left: 16px; } .padding-t16 { padding-top: 16px; } .padding-r16 { padding-right: 16px; } .padding-b16 { padding-bottom: 16px; } .margin-16 { margin: 16px; } .margin-r16 { margin-right: 16px; } .margin-t16 { margin-top: 16px; } .margin-b16 { margin-bottom: 16px; } .margin-l16 { margin-left: 16px; } .padding-17 { padding: 17px; } .padding-l17 { padding-left: 17px; } .padding-t17 { padding-top: 17px; } .padding-r17 { padding-right: 17px; } .padding-b17 { padding-bottom: 17px; } .margin-17 { margin: 17px; } .margin-r17 { margin-right: 17px; } .margin-t17 { margin-top: 17px; } .margin-b17 { margin-bottom: 17px; } .margin-l17 { margin-left: 17px; } .padding-18 { padding: 18px; } .padding-l18 { padding-left: 18px; } .padding-t18 { padding-top: 18px; } .padding-r18 { padding-right: 18px; } .padding-b18 { padding-bottom: 18px; } .margin-18 { margin: 18px; } .margin-r18 { margin-right: 18px; } .margin-t18 { margin-top: 18px; } .margin-b18 { margin-bottom: 18px; } .margin-l18 { margin-left: 18px; } .padding-19 { padding: 19px; } .padding-l19 { padding-left: 19px; } .padding-t19 { padding-top: 19px; } .padding-r19 { padding-right: 19px; } .padding-b19 { padding-bottom: 19px; } .margin-19 { margin: 19px; } .margin-r19 { margin-right: 19px; } .margin-t19 { margin-top: 19px; } .margin-b19 { margin-bottom: 19px; } .margin-l19 { margin-left: 19px; } .padding-20 { padding: 20px; } .padding-l20 { padding-left: 20px; } .padding-t20 { padding-top: 20px; } .padding-r20 { padding-right: 20px; } .padding-b20 { padding-bottom: 20px; } .margin-20 { margin: 20px; } .margin-r20 { margin-right: 20px; } .margin-t20 { margin-top: 20px; } .margin-b20 { margin-bottom: 20px; } .margin-l20 { margin-left: 20px; } .padding-21 { padding: 21px; } .padding-l21 { padding-left: 21px; } .padding-t21 { padding-top: 21px; } .padding-r21 { padding-right: 21px; } .padding-b21 { padding-bottom: 21px; } .margin-21 { margin: 21px; } .margin-r21 { margin-right: 21px; } .margin-t21 { margin-top: 21px; } .margin-b21 { margin-bottom: 21px; } .margin-l21 { margin-left: 21px; } .padding-22 { padding: 22px; } .padding-l22 { padding-left: 22px; } .padding-t22 { padding-top: 22px; } .padding-r22 { padding-right: 22px; } .padding-b22 { padding-bottom: 22px; } .margin-22 { margin: 22px; } .margin-r22 { margin-right: 22px; } .margin-t22 { margin-top: 22px; } .margin-b22 { margin-bottom: 22px; } .margin-l22 { margin-left: 22px; } .padding-23 { padding: 23px; } .padding-l23 { padding-left: 23px; } .padding-t23 { padding-top: 23px; } .padding-r23 { padding-right: 23px; } .padding-b23 { padding-bottom: 23px; } .margin-23 { margin: 23px; } .margin-r23 { margin-right: 23px; } .margin-t23 { margin-top: 23px; } .margin-b23 { margin-bottom: 23px; } .margin-l23 { margin-left: 23px; } .padding-24 { padding: 24px; } .padding-l24 { padding-left: 24px; } .padding-t24 { padding-top: 24px; } .padding-r24 { padding-right: 24px; } .padding-b24 { padding-bottom: 24px; } .margin-24 { margin: 24px; } .margin-r24 { margin-right: 24px; } .margin-t24 { margin-top: 24px; } .margin-b24 { margin-bottom: 24px; } .margin-l24 { margin-left: 24px; } .padding-25 { padding: 25px; } .padding-l25 { padding-left: 25px; } .padding-t25 { padding-top: 25px; } .padding-r25 { padding-right: 25px; } .padding-b25 { padding-bottom: 25px; } .margin-25 { margin: 25px; } .margin-r25 { margin-right: 25px; } .margin-t25 { margin-top: 25px; } .margin-b25 { margin-bottom: 25px; } .margin-l25 { margin-left: 25px; } .padding-26 { padding: 26px; } .padding-l26 { padding-left: 26px; } .padding-t26 { padding-top: 26px; } .padding-r26 { padding-right: 26px; } .padding-b26 { padding-bottom: 26px; } .margin-26 { margin: 26px; } .margin-r26 { margin-right: 26px; } .margin-t26 { margin-top: 26px; } .margin-b26 { margin-bottom: 26px; } .margin-l26 { margin-left: 26px; } .padding-27 { padding: 27px; } .padding-l27 { padding-left: 27px; } .padding-t27 { padding-top: 27px; } .padding-r27 { padding-right: 27px; } .padding-b27 { padding-bottom: 27px; } .margin-27 { margin: 27px; } .margin-r27 { margin-right: 27px; } .margin-t27 { margin-top: 27px; } .margin-b27 { margin-bottom: 27px; } .margin-l27 { margin-left: 27px; } .padding-28 { padding: 28px; } .padding-l28 { padding-left: 28px; } .padding-t28 { padding-top: 28px; } .padding-r28 { padding-right: 28px; } .padding-b28 { padding-bottom: 28px; } .margin-28 { margin: 28px; } .margin-r28 { margin-right: 28px; } .margin-t28 { margin-top: 28px; } .margin-b28 { margin-bottom: 28px; } .margin-l28 { margin-left: 28px; } .padding-29 { padding: 29px; } .padding-l29 { padding-left: 29px; } .padding-t29 { padding-top: 29px; } .padding-r29 { padding-right: 29px; } .padding-b29 { padding-bottom: 29px; } .margin-29 { margin: 29px; } .margin-r29 { margin-right: 29px; } .margin-t29 { margin-top: 29px; } .margin-b29 { margin-bottom: 29px; } .margin-l29 { margin-left: 29px; } .padding-30 { padding: 30px; } .padding-l30 { padding-left: 30px; } .padding-t30 { padding-top: 30px; } .padding-r30 { padding-right: 30px; } .padding-b30 { padding-bottom: 30px; } .margin-30 { margin: 30px; } .margin-r30 { margin-right: 30px; } .margin-t30 { margin-top: 30px; } .margin-b30 { margin-bottom: 30px; } .margin-l30 { margin-left: 30px; } .padding-31 { padding: 31px; } .padding-l31 { padding-left: 31px; } .padding-t31 { padding-top: 31px; } .padding-r31 { padding-right: 31px; } .padding-b31 { padding-bottom: 31px; } .margin-31 { margin: 31px; } .margin-r31 { margin-right: 31px; } .margin-t31 { margin-top: 31px; } .margin-b31 { margin-bottom: 31px; } .margin-l31 { margin-left: 31px; } .padding-32 { padding: 32px; } .padding-l32 { padding-left: 32px; } .padding-t32 { padding-top: 32px; } .padding-r32 { padding-right: 32px; } .padding-b32 { padding-bottom: 32px; } .margin-32 { margin: 32px; } .margin-r32 { margin-right: 32px; } .margin-t32 { margin-top: 32px; } .margin-b32 { margin-bottom: 32px; } .margin-l32 { margin-left: 32px; } .padding-33 { padding: 33px; } .padding-l33 { padding-left: 33px; } .padding-t33 { padding-top: 33px; } .padding-r33 { padding-right: 33px; } .padding-b33 { padding-bottom: 33px; } .margin-33 { margin: 33px; } .margin-r33 { margin-right: 33px; } .margin-t33 { margin-top: 33px; } .margin-b33 { margin-bottom: 33px; } .margin-l33 { margin-left: 33px; } .padding-34 { padding: 34px; } .padding-l34 { padding-left: 34px; } .padding-t34 { padding-top: 34px; } .padding-r34 { padding-right: 34px; } .padding-b34 { padding-bottom: 34px; } .margin-34 { margin: 34px; } .margin-r34 { margin-right: 34px; } .margin-t34 { margin-top: 34px; } .margin-b34 { margin-bottom: 34px; } .margin-l34 { margin-left: 34px; } .padding-35 { padding: 35px; } .padding-l35 { padding-left: 35px; } .padding-t35 { padding-top: 35px; } .padding-r35 { padding-right: 35px; } .padding-b35 { padding-bottom: 35px; } .margin-35 { margin: 35px; } .margin-r35 { margin-right: 35px; } .margin-t35 { margin-top: 35px; } .margin-b35 { margin-bottom: 35px; } .margin-l35 { margin-left: 35px; } .padding-36 { padding: 36px; } .padding-l36 { padding-left: 36px; } .padding-t36 { padding-top: 36px; } .padding-r36 { padding-right: 36px; } .padding-b36 { padding-bottom: 36px; } .margin-36 { margin: 36px; } .margin-r36 { margin-right: 36px; } .margin-t36 { margin-top: 36px; } .margin-b36 { margin-bottom: 36px; } .margin-l36 { margin-left: 36px; } .padding-37 { padding: 37px; } .padding-l37 { padding-left: 37px; } .padding-t37 { padding-top: 37px; } .padding-r37 { padding-right: 37px; } .padding-b37 { padding-bottom: 37px; } .margin-37 { margin: 37px; } .margin-r37 { margin-right: 37px; } .margin-t37 { margin-top: 37px; } .margin-b37 { margin-bottom: 37px; } .margin-l37 { margin-left: 37px; } .padding-38 { padding: 38px; } .padding-l38 { padding-left: 38px; } .padding-t38 { padding-top: 38px; } .padding-r38 { padding-right: 38px; } .padding-b38 { padding-bottom: 38px; } .margin-38 { margin: 38px; } .margin-r38 { margin-right: 38px; } .margin-t38 { margin-top: 38px; } .margin-b38 { margin-bottom: 38px; } .margin-l38 { margin-left: 38px; } .padding-39 { padding: 39px; } .padding-l39 { padding-left: 39px; } .padding-t39 { padding-top: 39px; } .padding-r39 { padding-right: 39px; } .padding-b39 { padding-bottom: 39px; } .margin-39 { margin: 39px; } .margin-r39 { margin-right: 39px; } .margin-t39 { margin-top: 39px; } .margin-b39 { margin-bottom: 39px; } .margin-l39 { margin-left: 39px; } .padding-40 { padding: 40px; } .padding-l40 { padding-left: 40px; } .padding-t40 { padding-top: 40px; } .padding-r40 { padding-right: 40px; } .padding-b40 { padding-bottom: 40px; } .margin-40 { margin: 40px; } .margin-r40 { margin-right: 40px; } .margin-t40 { margin-top: 40px; } .margin-b40 { margin-bottom: 40px; } .margin-l40 { margin-left: 40px; } .padding-41 { padding: 41px; } .padding-l41 { padding-left: 41px; } .padding-t41 { padding-top: 41px; } .padding-r41 { padding-right: 41px; } .padding-b41 { padding-bottom: 41px; } .margin-41 { margin: 41px; } .margin-r41 { margin-right: 41px; } .margin-t41 { margin-top: 41px; } .margin-b41 { margin-bottom: 41px; } .margin-l41 { margin-left: 41px; } .padding-42 { padding: 42px; } .padding-l42 { padding-left: 42px; } .padding-t42 { padding-top: 42px; } .padding-r42 { padding-right: 42px; } .padding-b42 { padding-bottom: 42px; } .margin-42 { margin: 42px; } .margin-r42 { margin-right: 42px; } .margin-t42 { margin-top: 42px; } .margin-b42 { margin-bottom: 42px; } .margin-l42 { margin-left: 42px; } .padding-43 { padding: 43px; } .padding-l43 { padding-left: 43px; } .padding-t43 { padding-top: 43px; } .padding-r43 { padding-right: 43px; } .padding-b43 { padding-bottom: 43px; } .margin-43 { margin: 43px; } .margin-r43 { margin-right: 43px; } .margin-t43 { margin-top: 43px; } .margin-b43 { margin-bottom: 43px; } .margin-l43 { margin-left: 43px; } .padding-44 { padding: 44px; } .padding-l44 { padding-left: 44px; } .padding-t44 { padding-top: 44px; } .padding-r44 { padding-right: 44px; } .padding-b44 { padding-bottom: 44px; } .margin-44 { margin: 44px; } .margin-r44 { margin-right: 44px; } .margin-t44 { margin-top: 44px; } .margin-b44 { margin-bottom: 44px; } .margin-l44 { margin-left: 44px; } .padding-45 { padding: 45px; } .padding-l45 { padding-left: 45px; } .padding-t45 { padding-top: 45px; } .padding-r45 { padding-right: 45px; } .padding-b45 { padding-bottom: 45px; } .margin-45 { margin: 45px; } .margin-r45 { margin-right: 45px; } .margin-t45 { margin-top: 45px; } .margin-b45 { margin-bottom: 45px; } .margin-l45 { margin-left: 45px; } .padding-46 { padding: 46px; } .padding-l46 { padding-left: 46px; } .padding-t46 { padding-top: 46px; } .padding-r46 { padding-right: 46px; } .padding-b46 { padding-bottom: 46px; } .margin-46 { margin: 46px; } .margin-r46 { margin-right: 46px; } .margin-t46 { margin-top: 46px; } .margin-b46 { margin-bottom: 46px; } .margin-l46 { margin-left: 46px; } .padding-47 { padding: 47px; } .padding-l47 { padding-left: 47px; } .padding-t47 { padding-top: 47px; } .padding-r47 { padding-right: 47px; } .padding-b47 { padding-bottom: 47px; } .margin-47 { margin: 47px; } .margin-r47 { margin-right: 47px; } .margin-t47 { margin-top: 47px; } .margin-b47 { margin-bottom: 47px; } .margin-l47 { margin-left: 47px; } .padding-48 { padding: 48px; } .padding-l48 { padding-left: 48px; } .padding-t48 { padding-top: 48px; } .padding-r48 { padding-right: 48px; } .padding-b48 { padding-bottom: 48px; } .margin-48 { margin: 48px; } .margin-r48 { margin-right: 48px; } .margin-t48 { margin-top: 48px; } .margin-b48 { margin-bottom: 48px; } .margin-l48 { margin-left: 48px; } .padding-49 { padding: 49px; } .padding-l49 { padding-left: 49px; } .padding-t49 { padding-top: 49px; } .padding-r49 { padding-right: 49px; } .padding-b49 { padding-bottom: 49px; } .margin-49 { margin: 49px; } .margin-r49 { margin-right: 49px; } .margin-t49 { margin-top: 49px; } .margin-b49 { margin-bottom: 49px; } .margin-l49 { margin-left: 49px; } .padding-50 { padding: 50px; } .padding-l50 { padding-left: 50px; } .padding-t50 { padding-top: 50px; } .padding-r50 { padding-right: 50px; } .padding-b50 { padding-bottom: 50px; } .margin-50 { margin: 50px; } .margin-r50 { margin-right: 50px; } .margin-t50 { margin-top: 50px; } .margin-b50 { margin-bottom: 50px; } .margin-l50 { margin-left: 50px; } .margin-t60 { margin-top: 60px; } .margin-tauto { margin-top: auto; } .margin-bauto { margin-bottom: auto; } /* Font Size Classes */ .fs8 { font-size: 8px; } .fs9 { font-size: 9px; } .fs10 { font-size: 10px; } .fs11 { font-size: 11px; } .fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs14 { font-size: 14px; } .fs15 { font-size: 15px; } .fs16 { font-size: 16px; } .fs17 { font-size: 17px; } .fs18 { font-size: 18px; } .fs19 { font-size: 19px; } .fs20 { font-size: 20px; } .fs21 { font-size: 21px; } .fs22 { font-size: 22px; } .fs23 { font-size: 23px; } .fs24 { font-size: 24px; } .fs25 { font-size: 25px; } .fs26 { font-size: 26px; } .fs27 { font-size: 27px; } .fs28 { font-size: 28px; } .fs29 { font-size: 29px; } .fs30 { font-size: 30px; } .fs31 { font-size: 31px; } .fs32 { font-size: 32px; } .fs33 { font-size: 33px; } .fs34 { font-size: 34px; } .fs35 { font-size: 35px; } .fs36 { font-size: 36px; } .fs37 { font-size: 37px; } .fs38 { font-size: 38px; } .fs39 { font-size: 39px; } .fs40 { font-size: 40px; } .bg-color-red { background-color: #e53935; } .text-color-red { color: #e53935; } .bg-topaz { background-color: #18cfa8; } .text-topaz { color: #18cfa8; } .bg-color-blue { background-color: #29b6f6; } .text-color-blue { color: #29b6f6; } .bg-color-green { background-color: #28c7bf; } .text-color-green { color: #28c7bf; } .bg-color-darkgreen { background-color: #2a8588; } .text-color-darkgreen { color: #2a8588; } .bg-color-white { background-color: #ffffff; } .text-color-white { color: #ffffff; } .bg-color-black { background-color: #000000; } .text-color-black { color: #000000; } .bg-color-grey { background-color: #999999; } .text-color-grey { color: #999999; } .bg-color-cc { background-color: #ccc; } .text-color-cc { color: #ccc; } .bg-color-66 { background-color: #666; } .text-color-66 { color: #666; } .bg-color-33 { background-color: #333; } .text-color-33 { color: #333; } .bg-color-primary { background-color: #00bac6; } .text-color-primary { color: #00bac6; } .bg-color-orange { background-color: #f18131; } .text-color-orange { color: #f18131; } .bg-color-bright-yellow { background-color: #faa61a; } .text-color-bright-yellow { color: #faa61a; } .bg-color_ee { background-color: #eeeeee; } .text-color_ee { color: #eeeeee; } .bg-color_white_smoke { background-color: #f5f5f5; } .text-color_white_smoke { color: #f5f5f5; } /* Letter Spacing */ .ls-1 { letter-spacing: 0.1px; } .ls-2 { letter-spacing: 0.2px; } .ls-3 { letter-spacing: 0.3px; } .ls-4 { letter-spacing: 0.4px; } .ls-5 { letter-spacing: 0.5px; } .ls-6 { letter-spacing: 0.6px; } .ls-7 { letter-spacing: 0.7px; } .ls-8 { letter-spacing: 0.8px; } .ls-9 { letter-spacing: 0.9px; } .ls-10 { letter-spacing: 1px; } .ls-11 { letter-spacing: 1.1px; } .ls-12 { letter-spacing: 1.2px; } .ls-13 { letter-spacing: 1.3px; } .ls-14 { letter-spacing: 1.4px; } .ls-15 { letter-spacing: 1.5px; } .ls-16 { letter-spacing: 1.6px; } .ls-17 { letter-spacing: 1.7px; } .ls-18 { letter-spacing: 1.8px; } .ls-19 { letter-spacing: 1.9px; } .ls-20 { letter-spacing: 2px; } .ls-21 { letter-spacing: 2.1px; } .ls-22 { letter-spacing: 2.2px; } .ls-23 { letter-spacing: 2.3px; } .ls-24 { letter-spacing: 2.4px; } .ls-25 { letter-spacing: 2.5px; } .ls-26 { letter-spacing: 2.6px; } .ls-27 { letter-spacing: 2.7px; } .ls-28 { letter-spacing: 2.8px; } .ls-29 { letter-spacing: 2.9px; } .ls-30 { letter-spacing: 3px; } /* Font Size Classes */ .border-radius2 { border-radius: 2px; } .border-radius3 { border-radius: 3px; } .border-radius4 { border-radius: 4px; } .border-radius5 { border-radius: 5px; } .border-radius6 { border-radius: 6px; } .border-radius7 { border-radius: 7px; } .border-radius8 { border-radius: 8px; } .border-radius9 { border-radius: 9px; } .border-radius10 { border-radius: 10px; } /* Layout setup */ .main-content-wrapper { max-width: 1600px; margin: 0 auto; position: relative; padding: 0 100px; -webkit-box-sizing: content-box; box-sizing: content-box; letter-spacing: 1px; } @media screen and (min-width: 1920px) { .main-content-wrapper { max-width: 1920px; } } .od-container { width: 100%; padding: 0 2vw; margin: 0 auto; } .od-container--lg { max-width: 1200px; } .od-container--xl { padding: 0 100px; } /* Text colors */ .text-black { color: #494949; } .text-red { color: #f00; } .max-width-100 { max-width: 100%; } img { max-width: 100%; } .text-center { text-align: center; text-align: -webkit-center; } .bg-white { background-color: transparent; } .no-padding { padding: 0 !important; } .bg-cyan { background-color: rgba(0, 185, 198, .08); } .search-inner-container { position: relative; } .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .font-bold { font-family: "FuturaStd-Heavy"; } .font-medium { font-family: "FuturaStd-Medium"; } strong { color: #000000; font-family: "NeuzeitGroBold"; font-weight: normal; } a { color: #329c92; text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; } .text-underline { text-decoration: underline; } .onhover-underline:hover { text-decoration: underline; } .color-green { color: #329c92; } .text-left { text-align: left; } .text-link { color: #329c92; cursor: pointer; } .text-link:hover { text-decoration: underline; } .text-link-gray { color: #333; cursor: pointer; } .text-link-gray:hover { color: #333; text-decoration: underline; } .text-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; line-height: 14px; vertical-align: text-top; background-image: url(//static.lenskart.com/skin/frontend/base/default/img/sprite-v2.png); background-repeat: no-repeat; vertical-align: middle; } .display-ib { display: inline-block; } .display-block { display: block; } .display-flex, .layout { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .display-grid { display: grid; } .grid-col-0 { grid-template-columns: repeat(0, 1fr); } .grid-row-0 { grid-template-rows: repeat(0, 1fr); } .grid-gap-0 { grid-gap: 0px; } .grid-col-1 { grid-template-columns: repeat(1, 1fr); } .grid-row-1 { grid-template-rows: repeat(1, 1fr); } .grid-gap-5 { grid-gap: 5px; } .grid-col-2 { grid-template-columns: repeat(2, 1fr); } .grid-row-2 { grid-template-rows: repeat(2, 1fr); } .grid-gap-10 { grid-gap: 10px; } .grid-col-3 { grid-template-columns: repeat(3, 1fr); } .grid-row-3 { grid-template-rows: repeat(3, 1fr); } .grid-gap-15 { grid-gap: 15px; } .grid-col-4 { grid-template-columns: repeat(4, 1fr); } .grid-row-4 { grid-template-rows: repeat(4, 1fr); } .grid-gap-20 { grid-gap: 20px; } .grid-col-5 { grid-template-columns: repeat(5, 1fr); } .grid-row-5 { grid-template-rows: repeat(5, 1fr); } .grid-gap-25 { grid-gap: 25px; } .layout.center, .align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .align-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-both-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .align-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .justify-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .justify-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .justify-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-content-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .star-rating { height: 15px; position: relative; width: 75px; } .star-rating:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGZpbGw9IiM3ZjhjOGQiID4gICAgPHBhdGggZD0iTSAyNSAyLjI3MzQzNzUgTCAxOC42MDkzNzUgMTguNDgwNDY5IEwgMC44MTA1NDY4OCAxOS40MTc5NjkgTCAxNC42NDg0MzggMzAuNDEyMTA5IEwgMTAuMDcwMzEyIDQ3LjIyMjY1NiBMIDI1IDM3Ljc3MTQ4NCBMIDM5LjkyOTY4OCA0Ny4yMjI2NTYgTCAzNS4zNTE1NjIgMzAuNDEyMTA5IEwgNDkuMTg5NDUzIDE5LjQxNzk2OSBMIDMxLjM5MDYyNSAxOC40ODA0NjkgTCAyNSAyLjI3MzQzNzUgeiI+PC9wYXRoPjwvc3ZnPg=="); background-repeat: repeat-x; background-size: 15px; bottom: 0; content: ""; display: block; height: 15px; left: 0; position: absolute; right: 0; top: 0; width: 75px; } .star-rating .star { display: block; text-indent: -10000px; width: 75px; height: 15px; position: absolute; overflow: hidden; } .star-rating .star:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGZpbGw9IiNmMWM0MGYiID4gICAgPHBhdGggZD0iTSAyNSAyLjI3MzQzNzUgTCAxOC42MDkzNzUgMTguNDgwNDY5IEwgMC44MTA1NDY4OCAxOS40MTc5NjkgTCAxNC42NDg0MzggMzAuNDEyMTA5IEwgMTAuMDcwMzEyIDQ3LjIyMjY1NiBMIDI1IDM3Ljc3MTQ4NCBMIDM5LjkyOTY4OCA0Ny4yMjI2NTYgTCAzNS4zNTE1NjIgMzAuNDEyMTA5IEwgNDkuMTg5NDUzIDE5LjQxNzk2OSBMIDMxLjM5MDYyNSAxOC40ODA0NjkgTCAyNSAyLjI3MzQzNzUgeiI+PC9wYXRoPjwvc3ZnPg=="); background-repeat: repeat-x; background-size: 15px; bottom: 0; content: ""; display: block; height: 15px; left: 0; position: absolute; right: 0; text-indent: 10000px; top: 0; } .cursor-pointer { cursor: pointer; } .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cursor-auto { cursor: auto; } .close-me-btn { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; cursor: pointer; z-index: 1103; display: block; background: #404042; border-radius: 50%; } .close-me-btn:before, .close-me-btn:after { position: absolute; left: 14px; content: " "; height: 16px; width: 2px; background-color: #fff; top: 7px; } .close-me-btn:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close-me-btn:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .uppercase { text-transform: uppercase; } .border-none { border: none; } .capitalize { text-transform: capitalize; } .nowrap { white-space: nowrap; } .white-space-normal { white-space: normal; } .border-green { border: 1px solid #28c7bf; } .border { border: 1px solid #ebebeb; } .border-topaz { border: 1px solid #d4ead5; } .border-blue { border: 1px solid #00bac6; } .margin-0-auto { margin: 0 auto; } .border-bottom { border-bottom: 1px solid #ebebeb; } .border-top { border-top: 1px solid #ebebeb; } .border-right { border-right: 1px solid #ebebeb; } .border-left { border-left: 1px solid #ebebeb; } .fw400 { font-weight: 400; } .fw500 { font-weight: 500; } .fw600 { font-weight: 600; } .fw700 { font-weight: 700; } .fw900 { font-weight: 900; } .bold { font-family: "FuturaStd-Heavy"; } .strike-through { text-decoration: line-through; } h1, h2, h3, h4, h5 { font-family: 'Founders Grotesk', sans-serif; font-weight: 400; } .btn.btn-primary { color: #fff; background-color: #f18132; border-color: #ef721a; font-family: 'Founders Grotesk', sans-serif; font-size: 14px; padding: 12px 2px; border-radius: 5px; letter-spacing: 1px; outline: none; white-space: normal; white-space: initial; } .btn.btn-primary:hover, .btn.btn-primary:focus { background-color: #e1660f; border-color: #bf570d; color: #fff; } .btn.btn-main { color: #fff; background-color: #00BAC6; border-color: #00BAC6; font-family: "FuturaStd-Medium"; font-size: 14px; padding: 12px 20px; border-radius: 5px; letter-spacing: 1px; outline: none; white-space: normal; white-space: initial; } .btn.btn-main:hover, .btn.btn-main:focus { background-color: #00BAC6; border-color: #00BAC6; color: #fff; } div:focus { outline: 0px solid transparent; } .width-vw { width: 28vw; } .full-width { width: 100% !important; } .display-none { display: none; } .h-100cent { height: 100%; } body { overflow-y: auto !important; } body.overflow-hidden.h-100cent { overflow: hidden !important; } input:focus, button:focus { outline: none; } .letter-spacing-1 { letter-spacing: 1px; } .inline-block { display: inline-block; } .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } /* Initial state */ .barLK { background-color: #ffffff; border: 1px solid #ffffff; float: left; margin-right: 4px; margin-top: 6px; width: 6px; height: 18px; /* Set the animation properties */ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: loadingbarLK; animation-name: loadingbarLK; } /* Delay both the second and third bar at the start */ .loaderLK .barLK:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .loaderLK .barLK:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } /* The actual animation */ @-webkit-keyframes loadingbarLK { 0% { } 10% { margin-top: 5px; height: 22px; border-color: #ffffff; background-color: #ffffff; } 20% { margin-top: 0px; height: 32px; border-color: #ffffff; background-color: #ffffff; } 30% { margin-top: 1px; height: 30px; border-color: #ffffff; background-color: #ffffff; } 40% { margin-top: 3px; height: 26px; } 50% { margin-top: 5px; height: 22px; } 60% { margin-top: 6px; height: 18px; } 70% { } /* Missing frames will cause the extra delay */ 100% { } } @keyframes loadingbarLK { 0% { } 10% { margin-top: 5px; height: 22px; border-color: #ffffff; background-color: #ffffff; } 20% { margin-top: 0px; height: 32px; border-color: #ffffff; background-color: #ffffff; } 30% { margin-top: 1px; height: 30px; border-color: #ffffff; background-color: #ffffff; } 40% { margin-top: 3px; height: 26px; } 50% { margin-top: 5px; height: 22px; } 60% { margin-top: 6px; height: 18px; } 70% { } /* Missing frames will cause the extra delay */ 100% { } } @-webkit-keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } .pos-fix { position: fixed; } .pos-rel { position: relative; } .pos-abs { position: absolute; } .component-loader-container { position: relative; min-height: 250px; } .component-loader-container .loader { position: absolute; } .component-loader-container .loader_overlay { position: absolute; background: #fff; } .hideElement { visibility: hidden; height: 0; } .screen-hidden { position: absolute !important; left: -9999px !important; height: 0px !important; } .no-decoration { text-decoration: none; } .no-decoration:hover { text-decoration: none; } .no-decoration:focus { text-decoration: none; outline: none; } /**tooltip**/ .tool-tip-hover { display: inline-block; } .tool-tip-hover:before { content: "?"; color: #fff; background: #515151; width: 20px; height: 20px; display: block; font-family: "FuturaStd-Heavy"; font-weight: normal; text-align: center; border-radius: 50%; font-size: 12px; line-height: 20px; cursor: pointer; } /**tooltip**/ .modal-backdrop { z-index: 1050 !important; } .beta-span { font-family: "FuturaStd-Medium"; position: relative; top: 10px; left: 2px; color: white; } .sans-serif-semi-bold { font-family: SourceSansProSemibold, sans-serif; } .futur-std { font-family: FuturaStd-Book; } /* Line Height Classes */ .line-height-12 { line-height: 12px; } .line-height-13 { line-height: 13px; } .line-height-14 { line-height: 14px; } .line-height-15 { line-height: 15px; } .line-height-16 { line-height: 16px; } .line-height-17 { line-height: 17px; } .line-height-18 { line-height: 18px; } .line-height-19 { line-height: 19px; } .line-height-20 { line-height: 20px; } .line-height-21 { line-height: 21px; } .line-height-22 { line-height: 22px; } .line-height-23 { line-height: 23px; } .line-height-24 { line-height: 24px; } .line-height-25 { line-height: 25px; } .line-height-26 { line-height: 26px; } .lh15 { line-height: 15px; } .font-style-normal { font-style: normal; } ul, li { list-style-type: none; } .clear-both { clear: both; } .float-right { float: right; } .float-left { float: left; } .table .thead-light th { font-weight: bold; font-size: 14px; } .separator { display: block; margin: 12px 0; height: 1px; padding: 0; } .separator.dashed { border-top: 1px dashed #ccc; } .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .pagination li:not(.disabled) a { color: #3bb3a9; } .pagination li:not(.disabled) a.active-page { background-color: #3bb3a9; color: #fff; border-color: #3bb3a9; } .text-right { text-align: right; } .text-left { text-align: left; } .tooltip-custom .tooltip-inner { background: #fff; -webkit-box-shadow: 0px 0px 16px -5px rgba(0, 0, 0, .75); box-shadow: 0px 0px 16px -5px rgba(0, 0, 0, .75); padding: 15px; } .tooltip-custom .arrow:before { border-right-color: rgba(0, 0, 0, .75); } .mr-0auto { margin: 0 auto; } .text-color_brick_red { color: #d54c44; } .text-color_primary { color: #329c92; } .text-color_green { color: green; } .bora-4 { border-radius: 4px; } .bora-8 { border-radius: 8px; } .bora-50cent { border-radius: 50%; } .justify-space-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .justify-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bg-topaz { background-color: #18cfa8; } .blur-text, .blur-text label { color: transparent; text-shadow: 0 0 1.5px rgba(0, 0, 0, .3); cursor: not-allowed; } .modal-center { margin: 0 auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .icon-info { background: url("https://static5.lenskart.com/images/cust_mailer/Mar-03/Info_SubmitPowerAlert.png") no-repeat 0 0; height: 16px; width: 16px; vertical-align: top; background-size: contain; } .bullet-list { list-style-type: disc; list-style-position: inside; } .width100 { width: 100%; } .width75 { width: 75%; } .width65 { width: 65%; } .width50 { width: 50%; } .width25 { width: 25%; } .width85 { width: 85%; } .width60 { width: 60%; } .width80 { width: 80%; } .width60 { width: 60%; } /* flex-basis classes */ .flex-basis-16 { -ms-flex-preferred-size: 16%; flex-basis: 16%; } .flex-basis-20 { -ms-flex-preferred-size: 20%; flex-basis: 20%; } .flex-basis-24 { -ms-flex-preferred-size: 24%; flex-basis: 24%; } .flex-basis-28 { -ms-flex-preferred-size: 28%; flex-basis: 28%; } .flex-basis-32 { -ms-flex-preferred-size: 32%; flex-basis: 32%; } .flex-basis-36 { -ms-flex-preferred-size: 36%; flex-basis: 36%; } .flex-basis-40 { -ms-flex-preferred-size: 40%; flex-basis: 40%; } .flex-basis-44 { -ms-flex-preferred-size: 44%; flex-basis: 44%; } .flex-basis-48 { -ms-flex-preferred-size: 48%; flex-basis: 48%; } .flex-basis-52 { -ms-flex-preferred-size: 52%; flex-basis: 52%; } .flex-basis-56 { -ms-flex-preferred-size: 56%; flex-basis: 56%; } .flex-basis-60 { -ms-flex-preferred-size: 60%; flex-basis: 60%; } .flex-basis-64 { -ms-flex-preferred-size: 64%; flex-basis: 64%; } .flex-basis-68 { -ms-flex-preferred-size: 68%; flex-basis: 68%; } .flex-basis-72 { -ms-flex-preferred-size: 72%; flex-basis: 72%; } .flex-basis-76 { -ms-flex-preferred-size: 76%; flex-basis: 76%; } .flex-basis-80 { -ms-flex-preferred-size: 80%; flex-basis: 80%; } .flex-basis-84 { -ms-flex-preferred-size: 84%; flex-basis: 84%; } .flex-basis-88 { -ms-flex-preferred-size: 88%; flex-basis: 88%; } .flex-basis-92 { -ms-flex-preferred-size: 92%; flex-basis: 92%; } .flex-basis-96 { -ms-flex-preferred-size: 96%; flex-basis: 96%; } .flex-basis-100 { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .align-self-center { -ms-flex-item-align: center; align-self: center; } .fw-bold { font-weight: bold; } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-30 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 30px !important; outline: none; } .country-code-display-30 ~ input { padding-left: 30px !important; } .country-code-display-30 ~ input ~ label { -webkit-transform: translateX(30px) !important; transform: translateX(30px) !important; } .country-code-display-30 ~ input:focus ~ label, .country-code-display-30 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-30 { width: 33px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-30 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-35 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 35px !important; outline: none; } .country-code-display-35 ~ input { padding-left: 35px !important; } .country-code-display-35 ~ input ~ label { -webkit-transform: translateX(35px) !important; transform: translateX(35px) !important; } .country-code-display-35 ~ input:focus ~ label, .country-code-display-35 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-35 { width: 38px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-35 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-40 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 40px !important; outline: none; } .country-code-display-40 ~ input { padding-left: 40px !important; } .country-code-display-40 ~ input ~ label { -webkit-transform: translateX(40px) !important; transform: translateX(40px) !important; } .country-code-display-40 ~ input:focus ~ label, .country-code-display-40 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-40 { width: 43px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-40 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-45 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 45px !important; outline: none; } .country-code-display-45 ~ input { padding-left: 45px !important; } .country-code-display-45 ~ input ~ label { -webkit-transform: translateX(45px) !important; transform: translateX(45px) !important; } .country-code-display-45 ~ input:focus ~ label, .country-code-display-45 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-45 { width: 48px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-45 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-50 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 50px !important; outline: none; } .country-code-display-50 ~ input { padding-left: 50px !important; } .country-code-display-50 ~ input ~ label { -webkit-transform: translateX(50px) !important; transform: translateX(50px) !important; } .country-code-display-50 ~ input:focus ~ label, .country-code-display-50 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-50 { width: 53px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-50 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .down-arrow { visibility: hidden; height: 7px; position: absolute; left: 36px; top: 5px; } .country-code-display-55 { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #999999 !important; -webkit-text-fill-color: #999999 !important; -webkit-opacity: 1; opacity: 1; left: 0; width: 55px !important; outline: none; } .country-code-display-55 ~ input { padding-left: 55px !important; } .country-code-display-55 ~ input ~ label { -webkit-transform: translateX(55px) !important; transform: translateX(55px) !important; } .country-code-display-55 ~ input:focus ~ label, .country-code-display-55 ~ input:not([value=""]) ~ label { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; } @supports (-moz-appearance: none) { .country-code-display-55 { width: 58px !important; } .moz-left { left: -3px !important; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root, .country-code-display-55 { -webkit-appearance: none; left: 3px; } _::-webkit-full-page-media, _:future, :root, .down-arrow { visibility: visible; } } .country-code-display-40.sa-country-class { width: 42px !important; } @media screen and (min-width: 1920px) { .big-screen-wrapper { max-width: 1920px; } } .verify-btn { height: 32px; width: 73px; background: #c2c2c2; border-radius: 4px; border: 1px solid transparent; color: #666666; letter-spacing: 0.02rem; line-height: 16px; } .verify-btn.isEnabled { background: #2440a6 !important; color: #ffffff !important; } @media screen and (min-width: 1920px) { .DittoSandbox { position: relative; left: calc(50vw - 960px); max-width: 1920px; } } .od-font-bold { font-family: 'Founders Grotesk', sans-serif; letter-spacing: 0.02em; } .od-font-light { font-family: "NeuzeitGroLig"; letter-spacing: -0.02em; } .od-font-reg { font-family: 'Founders Grotesk', sans-serif; letter-spacing: 0.05em; } .od-font-raleway { font-family: "Raleway"; letter-spacing: -0.24em; } .od-membership-status-bronze { color: #8E5010; } .od-membership-status-silver { color: #939393; } .od-membership-status-gold { color: #C7A907; } .od-separator { width: 100%; border: 1px solid #000000; opacity: 0.2; } #launcher { display: none; } @media only screen and (min-width: 900px) { .od-c-breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0px 5px 5px 0; border-top: 1px solid rgba(84, 96, 115, .1); border-bottom: 1px solid rgba(84, 96, 115, .1); border-radius: 0px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 11px; letter-spacing: 1px; } .od-c-breadcrumb ul { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; margin: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-c-breadcrumb ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000000; font-family: 'Founders Grotesk', sans-serif; font-size: 16px; line-height: 30px; letter-spacing: -0.02em; opacity: 0.3; } .od-c-breadcrumb ul li::after { content: '>'; padding: 0 15px; } .od-c-breadcrumb ul li:last-child { font-family: 'Founders Grotesk', sans-serif; } .od-c-breadcrumb ul li:last-child::after { content: ''; padding: 0; } .od-c-breadcrumb ul li a { color: #000000; font-family: 'Founders Grotesk', sans-serif; } } @media screen and (min-width: 900px) and (max-width: 1153px) { .od-c-breadcrumb { -webkit-transform: translateY(20px); transform: translateY(20px); } } @media only screen and (min-width: 1025px) { .od-c-breadcrumb { padding: 5px 5px 5px 50px; } .od-c-breadcrumb ul { text-overflow: ellipsis; white-space: normal; overflow: hidden; } } .product-details-wrapper .product-details-block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 18px; } .product-details-wrapper .product-details-block div:last-of-type { margin-left: auto; } .widget_dittoImg { width: 75%; height: 50%; margin: 0px auto; display: block; z-index: 2; } .tags-container { margin: 2px 0px; } .tags-content { color: #666666; padding: 2px 4px; background-color: #EEEEEE; border-radius: 2px; font-size: 12px; line-height: 14px; letter-spacing: 0.01em; } .pos-rel { position: relative; } .pos-abs { position: absolute; } .top-15 { top: 15px; } .right-10 { right: 10px; } .lh12 { line-height: 12px; } .lh14 { line-height: 14px; } .prod-img-container { min-height: 162px; background: url(https://static.lenskart.com/media/owndays/mobile/img/od-loaders/circle-loader.gif) center no-repeat; } .img-background { background-size: cover !important; background-position: left top; background-repeat: no-repeat !important; left: 0; top: 0; height: 100%; width: 100%; opacity: 0.4; z-index: 1; } .cygnus_img { max-height: 200px; } @media only screen and (min-width: 1440px) { .prod-img-container { min-height: 192px; } } @media only screen and (min-width: 1680px) { .prod-img-container { min-height: 228px; } } .wishlist { z-index: 11; display: grid; } .wishlist .wishlist-icon { -webkit-transform: scale(1); transform: scale(1); color: #737397; } .wishlist .wishlist-icon:hover { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: 0.3s all; transition: 0.3s all; color: red; } .wishlist .wishlist-count { right: -2px; top: 20px; cursor: pointer; text-align: center; } .product-info { margin-top: 0px; background: white; z-index: 2; } .product-info .product-colors { text-align: right; border-radius: 4px; min-height: 45px; } .product-info-container { position: relative; } /** OD Product Card Top */ .od-product-card-top { width: 100%; display: inline-block; } .od-product-card-top__rating-wishlist { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 25px 0; } /** OD Product Card Bottom */ .od-product-card-bottom { text-align: center; } .od-product-card-bottom .od-product-model-name { color: #333368; text-decoration: none; } .od-home-bet { margin: 0 auto; height: 100%; } .od-home-bet__content { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .od-home-bet__content__left { width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-home-bet__content__left__content { font-family: 'NeuzeitGroReg', sans-serif; } .od-home-bet__content__left__content__title { font-size: 35px; } .od-home-bet__content__left__content__description { font-size: 18px; margin-bottom: 32px; } .od-home-bet__content__right { width: 50%; } .product-category-filter-panel { width: 100%; } .no-result-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: start; min-height: 100vh; text-align: center; background-color: white; } @media screen and (max-width: 768px) { .no-result-container { min-height: 40vh; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .no-result-found { font-size: 20px; font-weight: 500; padding: 0 16px; color: #292929; } .sort-panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s ease, visibility 0.2s ease; transition: opacity 0.2s ease, visibility 0.2s ease; } .sort-panel-overlay.active { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); } @media screen and (min-width: 768px) { .sort-panel-overlay { opacity: 0; visibility: hidden; pointer-events: none; } } .product-category-active-filter { position: sticky; top: 0; z-index: 999; background-color: white; } .product-category-active-filter--search { position: relative; z-index: 1 !important; } .product-category-container { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 32px; background-color: #f7f7f7; } @media screen and (max-width: 768px) { .product-category-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .product-category-container__filter { position: sticky; top: 70px; -ms-flex-item-align: stretch; align-self: stretch; height: calc(100vh - 70px); overflow-y: auto; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 768px) { .product-category-container__filter { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; z-index: 1000000; overflow-y: hidden; opacity: 0; -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; pointer-events: none; } .product-category-container__filter.active { display: block; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; } } .product-category-container__list { padding: 8px 12; width: 100%; overflow-x: hidden; } @media screen and (min-width: 768px) { .product-category-container__list { padding: 32px 0; } } .product-category-container__list--search { padding: 32px 16px 32px 32px; } @media screen and (max-width: 768px) { .product-category-container__list--search { padding: 0; } } .product-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px; width: 100%; max-width: 1920px; -webkit-box-sizing: border-box; box-sizing: border-box; } .product-flex--search { max-width: 100%; } @media screen and (min-width: 768px) and (max-width: 1024px) { .product-flex { gap: 16px; } } @media screen and (min-width: 1025px) { .product-flex { gap: 32px; } } .product-grid { display: grid; width: 100%; max-width: 1920px; -webkit-box-sizing: border-box; box-sizing: border-box; } .product-grid--search { max-width: 100%; } .product-card { position: relative; width: calc(33.3333% - 32px); background: white; border-radius: 8px; font-family: "Founders Grotesk", sans-serif; overflow: hidden; } @media (max-width: 1024px) { .product-card { width: calc(50% - 12px); } } @media (max-width: 767px) { .product-card { width: 100%; padding: 8px 12px; border-radius: 0; } } .product-card__top-section { position: absolute; top: 0; left: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 12px 12px 0 12px; z-index: 2; } .product-card__top-section-tag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; } .product-card__top-section-tag-icon { width: 20px; height: auto; } .product-card__top-section-tag-icon-new { width: 28px; } .product-card__top-section-tag-text { font-size: 12px; font-weight: 600; line-height: 12px; color: #b47e00; } @media screen and (max-width: 768px) { .product-card__top-section-tag { padding-left: 12px; } } .product-card__top-section-badge-group { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; } @media screen and (max-width: 768px) { .product-card__top-section-badge-group { padding-right: 12px; } } .product-card__top-section-badge-group-wishlist-btn, .product-card__top-section-badge-group-ar-btn { background: none; border: none; cursor: pointer; width: 28px; height: 28px; } .product-card__image-section { position: relative; margin-bottom: 8px; cursor: pointer; } .product-card__image-section-img { width: 100%; max-height: 340px; aspect-ratio: 492 / 340; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } .product-card__image-section::after { content: ""; display: table; clear: both; } .product-card__image-section-badge { position: absolute; bottom: 0; right: 12px; font-size: 10px; font-style: normal; font-weight: 600; line-height: 12px; padding: 4px 8px; background-color: #f7f7f7; color: #b47e00; border-radius: 50px; height: 20px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 768px) { .product-card__image-section-badge { left: 119px; top: 17px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .product-card__image-section-badge--not-best { left: 12px; top: 17px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .product-card__color-swatches { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-card__color-swatches-warper { width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-card__color-swatches-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 28px; height: 28px; padding: 10px; margin: 0 auto; border-radius: 50%; cursor: pointer; } .product-card__color-swatches-item.active { border: 1px solid #292929; padding: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; } .product-card__color-swatches-swatch { width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-card__color-swatches-swatch .swatch-image { width: 20px; height: 20px; min-width: 20px; min-height: 20px; border-radius: 50%; display: block; -o-object-fit: cover; object-fit: cover; border: 1px solid transparent; } .product-card__color-swatches-swatch .swatch-image-src { -webkit-box-sizing: content-box !important; box-sizing: content-box !important; } .product-card__color-swatches-extra-count { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.12px; color: #9999b3; } .product-card__info { margin-top: 8px; padding-bottom: 16px; } .product-card__info-row-t { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4px 12px; } .product-card__info-row-bt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0px 12px 4px 12px; } .product-card__info-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 4px; } .product-card__info-name { font-size: 16px; font-weight: 600; line-height: 20px; font-style: normal; letter-spacing: 0.16px; color: #535353; } .product-card__info-code { font-size: 16px; color: #7c7c7c; margin-top: 4px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; } .product-card__info-tagline { font-size: 14px; font-weight: 400; line-height: 20px; font-style: normal; color: #292929; padding: 8px 12px; margin-top: 12px; background: -webkit-gradient(linear, left top, right top, from(#d9d9d9), color-stop(49.87%, #fff)); background: linear-gradient(90deg, #d9d9d9 0%, #fff 49.87%); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .product-card__info__price-original { color: #a5a5a5; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; letter-spacing: 0.12px; -webkit-text-decoration-line: line-through; text-decoration-line: line-through; text-decoration: line-through; } .product-card__info__price-discount { color: black; font-size: 18px; font-style: normal; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; } .product-card__slider .slick-dots { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; padding: 0; margin: 0; position: relative; top: -8px; } .product-card__slider .slick-dots li { width: 8px; height: 2px; border-radius: 2px; background-color: #d9d9d9; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; margin: 0; } .product-card__slider .slick-dots li.slick-active { background-color: #535353; } .product-card__slider .slick-dots li button { opacity: 0; width: 100%; height: 100%; padding: 0; cursor: pointer; } .product-card__divider { height: 1px; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); background-image: repeating-linear-gradient(to right, #f2f2f2, #f2f2f2 4px, transparent 4px, transparent 8px); } @media screen and (max-width: 768px) { .product-card__divider { margin-left: 0; margin-right: 12px; width: 100%; } } body { overflow: visible !important; } .header-zindex-override { z-index: 99999999 !important; } .mobile-filter { width: 100%; padding: 16px 0; background-color: #f7f7f7; display: block; overflow: hidden; font-family: "Founders Grotesk", sans-serif; } @media screen and (min-width: 768px) { .mobile-filter { display: none; } } .mobile-filter__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; padding: 0 12px; } .mobile-filter__header .mobile-filter__icon { width: 16px; height: 16px; background: url("https://static.lenskart.com/owndays/img/plp/filter-lines-icon.svg") no-repeat center; margin-right: 8px; } .mobile-filter__header .mobile-filter__title { font-size: 16px; font-weight: 600; letter-spacing: 0.16px; line-height: 20px; margin: 0; padding: 0; } .mobile-filter__section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin-bottom: 16px; } .mobile-filter__label { font-size: 14px; font-weight: 400; line-height: 20px; color: black; -ms-flex-negative: 0; flex-shrink: 0; width: 64px; padding: 10px 4px 10px 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; white-space: normal; word-break: break-word; -ms-hyphens: auto; hyphens: auto; } .mobile-filter__option-group { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: auto; gap: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mobile-filter__option-group::-webkit-scrollbar { display: none; } .mobile-filter__option { background-color: white; border-radius: 999px; padding: 12px; font-size: 16px; letter-spacing: 0.16px; font-weight: 400; line-height: 20px; color: black; border: 1px solid #f2f2f2; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; } .mobile-filter__option.active { border: 1px solid #0094c8; color: #0094c8; font-weight: 600; } .mobile-filter__option:last-child { margin-right: 12px; } .mobile-filter__option--color { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mobile-filter__option--count { display: inline-block; color: #a5a5a5; font-size: 14px; font-weight: 400; line-height: 20px; margin-left: 2px; } .mobile-filter__option--count--2 { display: inline-block; color: #a5a5a5; font-size: 14px; font-weight: 400; line-height: 20px; margin-right: 12px; margin-left: 2px; position: relative; top: 1px; } .mobile-filter__option--image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; border-radius: 8px; color: black; font-size: 16px; font-weight: 400; letter-spacing: 0.16px; line-height: 20px; border: 1px solid #f2f2f2; background-color: white; width: 120px; min-width: 120px; padding: 8px 0; } .mobile-filter__option--image.active { border: 1px solid #0094c8; color: #0094c8; font-weight: 600; } .mobile-filter__option--image:last-child { margin-right: 12px; } .mobile-filter__option--image img { width: 63px; min-width: 63px; margin-bottom: 8px; height: auto; } .mobile-filter__color-circle { width: 24px; height: 24px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; margin-left: 8px; margin-right: 12px; } .mobile-filter__submit { width: calc(100% - 24px); background-color: #d9d9d9; border: none; padding: 10px 0; margin: 4px 12px 0 12px; border-radius: 8px; font-weight: bold; font-size: 16px; color: white; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .mobile-filter__submit:disabled { cursor: not-allowed; background-color: #d9d9d9; } .mobile-filter__submit.active { background-color: #292929; } .filter-panel { background-color: white; width: -webkit-min-content; width: -moz-min-content; width: min-content; padding: 16px 32px 8px 32px; font-family: "Founders Grotesk", sans-serif; width: 300px; overflow: scroll; scrollbar-width: none; position: sticky; height: calc(100vh - 75px); } @media screen and (min-width: 768px) and (max-width: 1024px) { .filter-panel { width: 255px; } } .filter-panel--active { display: none; } @media screen and (max-width: 768px) { .filter-panel--active { display: block; width: 100%; height: 100%; } } .filter-panel__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: end; background-color: white; } .filter-panel__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 8px; } @media screen and (max-width: 768px) { .filter-panel__title { padding: 12px 16px; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } } .filter-panel__title--filter { font-size: 16px; font-weight: bold; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .filter-panel__title--filter::before { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url("https://static.lenskart.com/owndays/img/plp/filter-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } @media screen and (max-width: 768px) { .filter-panel__title--filter::before { display: none; } } .filter-panel__title--count { font-size: 14px; font-weight: 400; color: #7c7c7c; display: block; white-space: nowrap; } @media screen and (max-width: 768px) { .filter-panel__title--count { display: none; } } .filter-panel__title--close { background: none; border: none; padding: 0; cursor: pointer; display: block; } @media screen and (min-width: 768px) { .filter-panel__title--close { display: none; } } .filter-panel__title--close img { display: block; height: 32px; width: 32px; } .filter-panel__clear { font-size: 12px; font-weight: 700; color: #0094c8; background: none; border: none; line-height: 16px; cursor: pointer; white-space: nowrap; } @media screen and (max-width: 768px) { .filter-panel__clear { display: none; } } @media screen and (max-width: 768px) { .filter-panel__category-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 100%; height: 100%; } } @media screen and (min-width: 769px) { .filter-panel__desktop-layout { display: block; } } @media screen and (max-width: 768px) { .filter-panel__desktop-layout { display: none; } } @media screen and (max-width: 768px) { .filter-panel__mobile-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .filter-panel__mobile-wrapper { display: none; } @media screen and (max-width: 768px) { .filter-panel__mobile-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100vh; overflow: hidden; } } @media screen and (max-width: 768px) { .filter-panel__mobile-sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 140px; height: 100vh; overflow-y: auto; -ms-flex-negative: 0; flex-shrink: 0; background-color: #f7f7f7; } } @media screen and (max-width: 768px) { .filter-panel__content-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 16px; height: 100%; overflow-y: scroll; padding-bottom: 84px; } } .filter-panel__section-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; font-weight: 600; color: #7c7c7c; letter-spacing: 0.16px; line-height: 20px; cursor: pointer; margin-bottom: 18px; } @media screen and (max-width: 768px) { .filter-panel__section-title { margin-bottom: 0; padding: 16px; width: auto; max-width: 100%; font-weight: 400; white-space: normal; word-break: break-word; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; background-color: #f7f7f7; color: #535353; } } @media screen and (max-width: 768px) { .filter-panel__section-title.active { background-color: white; border-right: 1px solid white; color: #0094c8; white-space: normal; word-break: break-word; width: auto; max-width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 600; -webkit-box-shadow: inset 4px 0 0 0 #0094c8; box-shadow: inset 4px 0 0 0 #0094c8; } } .filter-panel__toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .filter-panel__badge-with-arrow { background-color: #0094c8; color: white; font-size: 10px; font-weight: 700; line-height: 12px; height: 24px; min-width: 37px; padding: 0 6px 0 12px; border-radius: 9999px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 768px) { .filter-panel__badge-with-arrow { min-width: 16px; width: 16px; height: 16px; padding: 4px; margin-left: 4px; } } .filter-panel__arrow { width: 20px; height: 20px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; display: block; } @media screen and (max-width: 768px) { .filter-panel__arrow { display: none; } } .filter-panel__arrow.up { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .filter-panel__arrow.down { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .filter-panel__arrow.white { background-image: url("https://static.lenskart.com/owndays/img/plp/arrow-icon-white.svg"); } .filter-panel__arrow.black { background-image: url("https://static.lenskart.com/owndays/img/plp/arrow-icon-black.svg"); } .filter-panel__checkbox-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media screen and (max-width: 768px) { .filter-panel__checkbox-group { gap: 0; } } .filter-panel__checkbox-group-img { gap: 0px; } .filter-panel__checkbox-item { position: relative; padding-left: 36px; font-size: 16px; color: #a5a5a5; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; font-weight: 400; letter-spacing: 0.16px; line-height: 20px; } @media screen and (max-width: 768px) { .filter-panel__checkbox-item { border-bottom: 1px solid #d9d9d9; } .filter-panel__checkbox-item:last-child { border-bottom: none; } .filter-panel__checkbox-item.is-filter-colors { margin-block: 0; } } .filter-panel__checkbox-item input[type="checkbox"] { -moz-appearance: none; appearance: none; -webkit-appearance: none; border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; background: transparent; position: absolute; left: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; } .filter-panel__checkbox-item input[type="checkbox"]::before { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("https://static.lenskart.com/owndays/img/plp/check-icon-white.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .filter-panel__checkbox-item input[type="checkbox"]:checked::before { background-image: url("https://static.lenskart.com/owndays/img/plp/check-icon-blue.svg"); } .filter-panel__checkbox-item input[type="checkbox"]:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .filter-panel__checkbox-item input[type="checkbox"]:focus-visible { outline: none; -webkit-box-shadow: none; box-shadow: none; } .filter-panel__checkbox-item input[type="checkbox"]:checked + span { color: #0094c8; font-weight: 600; } .filter-panel__checkbox-item-item-count { font-weight: 400; font-size: 12px; line-height: 16px; color: #a5a5a5; letter-spacing: 0.12px; margin-left: auto; min-width: 24px; text-align: center; } @media screen and (max-width: 768px) { .filter-panel__checkbox-item-item-count { font-weight: 600; } } .filter-panel__checkbox-item-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; white-space: nowrap; color: #535353; } .filter-panel__checkbox-item-label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; white-space: normal; word-break: break-word; width: auto; max-width: 100%; } .filter-panel__checkbox-item-label--no-image { margin: 22px 0; } @media screen and (min-width: 768px) { .filter-panel__checkbox-item-label--no-image { margin: 0; } } .filter-panel__checkbox-item-icon { width: 64px; height: 48px; -o-object-fit: contain; object-fit: contain; } .filter-panel__checkbox-item-icon img { width: 48px !important; height: 48px !important; } .filter-panel__checkbox-item-icon-color { width: 20px !important; height: 20px !important; border-radius: 50%; margin: 22px 0; } .filter-panel__checkbox-item-icon.checked { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: brightness(1) saturate(1) hue-rotate(0deg); filter: brightness(1) saturate(1) hue-rotate(0deg); } .filter-panel__button-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Founders Grotesk", sans-serif; width: 100%; gap: 16px; padding: 16px 16px 24px 16px; position: sticky; z-index: 1000; bottom: 0; background-color: white; border-top: 1px solid #d9d9d9; } .filter-panel__button-layout__apply { position: relative; background-color: #292929; color: white; cursor: pointer; border: 1.5px solid #292929; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; border-radius: 8px; padding: 10px 8px; } .filter-panel__button-layout__apply::after { content: ""; position: relative; top: 1px; width: 20px; height: 20px; background-image: url("https://static.lenskart.com/owndays/img/plp/chevron-right-white-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .filter-panel__button-layout__apply--text { font-size: 14px; font-weight: 600; line-height: 20px; padding-right: 6px; } .filter-panel__button-layout__clear { position: relative; background-color: white; color: #292929; cursor: pointer; border: 1.5px solid #292929; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; border-radius: 8px; padding: 10px 12px; } .filter-panel__button-layout__clear::after { content: ""; position: relative; top: 1px; width: 20px; height: 20px; background-image: url("https://static.lenskart.com/owndays/img/plp/chevron-right-black-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .filter-panel__button-layout__clear--text { font-size: 14px; font-weight: 600; line-height: 20px; padding-right: 6px; } .filter-panel__divider { height: 1px; background-color: #f7f7f7; margin: 18px 0; } @media screen and (max-width: 768px) { .filter-panel__divider { display: none; } } .filter-panel__divider--2 { background-color: #d9d9d9; margin: 0; height: 1px; } @media screen and (min-width: 768px) { .filter-panel__divider--2 { display: none; } } .active-filter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px 32px 24px 32px; font-family: "Founders Grotesk", sans-serif; } @media screen and (max-width: 768px) { .active-filter { padding: 12px; } } .active-filter__left { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; } .active-filter__breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .active-filter__category { color: black; font-size: 18px; font-weight: 600; letter-spacing: 0.18px; line-height: 24px; white-space: nowrap; } .active-filter__count { font-size: 18px; color: #a5a5a5; font-weight: 400; letter-spacing: 0.18px; line-height: 24px; white-space: pre-line; } .active-filter__count--keyword { color: #292929; font-weight: 600; padding-left: 4px; } .active-filter__tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .active-filter__tag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #7c7c7c; border-radius: 999px; padding: 8px 16px; font-size: 12px; letter-spacing: 0.12px; line-height: 16px; background: white; color: #292929; } .active-filter__tag-close { margin-left: 4px; width: 16px; height: 16px; display: inline-block; cursor: pointer; background-image: url("https://static.lenskart.com/owndays/img/plp/close-icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .active-filter__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .active-filter__sort { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #0094c8; border-radius: 8px; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.16px; color: #0094c8; background: transparent; cursor: pointer; position: relative; white-space: nowrap; } .active-filter__sort::before { content: ""; background-image: url("https://static.lenskart.com/owndays/img/plp/sort-icon.svg"); width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; } .active-filter__sort::after { content: ""; background-image: url("https://static.lenskart.com/owndays/img/plp/arrow-icon-blue.svg"); width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .active-filter__sort--open::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .search-hidden { display: none; } .product-skeletons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 !important; } @media (max-width: 1024px) { .product-skeletons { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .product-skeletons { grid-template-columns: 1fr; } } .product-skeletons.full-widget-width { width: calc(100% - 255px); } .product-skeletons__box { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; padding: 12px; background-color: #fff; } @media (max-width: 768px) { .product-skeletons__box { border-radius: 0; } } .product-skeletons__box__animated-bg { -webkit-animation: shimmer 1s linear infinite forwards; animation: shimmer 1s linear infinite forwards; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee)); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; border-radius: 4px; } .product-skeletons__box__header-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 8px; } .product-skeletons__box__header-wrap .product-skeletons__box__animated-bg--header-left { width: 80px; height: 16px; } .product-skeletons__box__header-wrap .product-skeletons__box__animated-bg--header-right { width: 24px; height: 16px; } .product-skeletons__box__image-wrap { margin-bottom: 12px; } .product-skeletons__box__image-wrap .product-skeletons__box__animated-bg--image { width: 100%; height: 180px; border-radius: 6px; } .product-skeletons__box__swatches-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; margin-bottom: 12px; } .product-skeletons__box__swatches-wrap .circle { width: 18px; height: 18px; border-radius: 50%; background: #ddd; } .product-skeletons__box__footer-wrap .line { height: 14px; margin-bottom: 8px; } .product-skeletons__box__footer-wrap .title { width: 100%; height: 18px; } .product-skeletons__box__footer-wrap .price { width: 100%; height: 32px; margin-top: 6px; } @-webkit-keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .bottom-filter-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; margin: 0; background-color: white; position: fixed; bottom: 0; width: 100%; -webkit-box-shadow: 0px -4px 12px 0px rgba(0, 0, 66, .04); box-shadow: 0px -4px 12px 0px rgba(0, 0, 66, .04); font-family: "Founders Grotesk", sans-serif; z-index: 800; } @media screen and (min-width: 768px) { .bottom-filter-bar { display: none; } } .bottom-filter-bar__divider { width: 1px; height: 29px; background-color: #f2f2f2; border-radius: 1px; -ms-flex-negative: 0; flex-shrink: 0; } .bottom-filter-bar__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 6px 45.166px 6px 43.834px; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .bottom-filter-bar__item__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin-bottom: 4px; } .bottom-filter-bar__item__icon { width: 20px; height: 20px; background-size: cover; background-repeat: no-repeat; display: inline-block; } .bottom-filter-bar__item--sort .bottom-filter-bar__item__icon { background-image: url("https://static.lenskart.com/owndays/img/plp/sort-sp-icon.svg"); } .bottom-filter-bar__item--filter .bottom-filter-bar__item__icon { background-image: url("https://static.lenskart.com/owndays/img/plp/filter-sp-icon.svg"); } .bottom-filter-bar__item__label { font-size: 14px; font-weight: 700; line-height: 20px; font-weight: 600; color: black; } .bottom-filter-bar__item__desc { font-size: 10px; font-style: normal; font-weight: 600; line-height: 12px; color: #9999b3; } .bottom-filter-bar__item__desc .filter-badge { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; font-weight: 600; color: #9999b3; } .bottom-filter-bar__item__desc .filter-badge__count { background-color: #0094c8; color: white; border-radius: 50%; width: 18px; height: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 10px; } .sort-panel { position: absolute; top: 100%; right: 32px; background: white; -webkit-box-shadow: 0px -4px 20px 0px rgba(0, 0, 66, .1); box-shadow: 0px -4px 20px 0px rgba(0, 0, 66, .1); border-radius: 12px; padding: 0 16px; width: 267px; z-index: 99; font-family: "Founders Grotesk", sans-serif; } @media screen and (max-width: 768px) { .sort-panel { position: fixed; bottom: 0; right: 0; top: auto; width: 100%; z-index: 1000000; border-radius: 16px 16px 0px 0px; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } } @media screen and (max-width: 768px) { .sort-panel { display: none; } } @media screen and (max-width: 768px) { .sort-panel.mount { display: block; } } .sort-panel.active { -webkit-transform: translateY(0%); transform: translateY(0%); } .sort-panel__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 13px; margin-bottom: 12px; } .sort-panel__header__title { font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: 0.18px; } .sort-panel__header__close { background: none; border: none; padding: 0; cursor: pointer; display: block; } @media screen and (min-width: 768px) { .sort-panel__header__close { display: none; } } .sort-panel__header__close img { display: block; height: 32px; width: 32px; } .sort-panel__list { list-style: none; margin: 0; padding: 0; } .sort-panel__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.16px; padding: 14px 0; cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; color: black; } .sort-panel__item.active { font-weight: 600; } .sort-panel__item .sort-panel__radio { width: 16px; height: 16px; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; position: relative; } .sort-panel__item .sort-panel__radio::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: white; display: block; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .sort-panel__item .sort-panel__radio.active { background-color: black; border: 1px solid black; } .sort-panel__item .sort-panel__radio.active::after { background-color: white; } .sort-panel__item .sort-panel__radio.inactive { background-color: transparent; border: 1px solid #d9d9d9; } .sort-panel__item .sort-panel__radio.inactive::after { background-color: transparent; } .sort-panel__divider { border-bottom: 1px solid #d9d9d9; width: 100%; display: block; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); } @media screen and (min-width: 768px) { .sort-panel__divider { display: none; } } .product-brand-banner { font-family: "Founders Grotesk", sans-serif; letter-spacing: 1px; line-height: 2; position: relative; background-color: #ffffff; width: 100%; margin: 0 auto; padding: 0; } @media screen and (min-width: 768px) { .product-brand-banner { padding: 0 32px 0 0; } } .product-brand-banner__bg { position: relative; } .product-brand-banner__bg picture { display: block; width: 100%; } .product-brand-banner__bg picture img { width: 100%; } .product-brand-banner__details { padding: 20px 5%; } .product-brand-banner__logo { width: auto; max-width: 220px; } .product-brand-banner__logo-text { font-family: "Founders Grotesk", sans-serif; font-size: 10px; font-weight: 700; color: #000000; } .product-brand-banner__logo--sp, .product-brand-banner__logo-text--sp { position: absolute; top: 100%; left: calc(5% + 2px); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .product-brand-banner__title, .product-brand-banner__logo-text--pc { font-size: 12px; font-weight: 500 !important; margin: 0 0 30px 0; } .product-brand-banner__text { font-size: 12px; font-weight: 400 !important; color: #000000; margin: 0; } .product-brand-banner__text_description { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 11px; } .product-brand-banner__description_dark { font-size: 12px; font-weight: 300; color: #000; margin: 0; } .product-brand-banner--light .product-brand-banner__logo-text--sp { color: #000000; } @media (max-width: 767px) { .product-brand-banner { margin-bottom: 25px; } .product-brand-banner__details { padding-top: 40px; } .product-brand-banner__logo--pc { display: none; } .product-brand-banner__title, .product-brand-banner__logo-text--pc { text-align: left; } .product-brand-banner__description_dark { font-size: 12px; font-weight: 300; color: #000000; } } @media (min-width: 768px) { .product-brand-banner__details { position: absolute; top: 50%; left: 0; right: 50%; padding-right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); max-width: 300px; } .product-brand-banner__bg__img { -o-object-fit: cover; object-fit: cover; } .product-brand-banner__logo { margin-bottom: 28px; } .product-brand-banner__logo-text--pc { font-size: 20px; font-weight: 700; margin-bottom: 40px; } .product-brand-banner__logo--sp, .product-brand-banner__logo-text--sp { display: none; } .product-brand-banner__title { font-size: 14px; } .product-brand-banner--light .product-brand-banner__title, .product-brand-banner--light .product-brand-banner__text, .product-brand-banner--light .product-brand-banner__logo-text--pc { color: #666; } } @media (min-width: 1296px) { .product-brand-banner__details { padding-left: 80px; max-width: 460px; } } .od-breadcrumb-mobile { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 20px; } .od-breadcrumb-mobile .breadcrumb-separator, .od-breadcrumb-mobile .breadcrumb-item a, .od-breadcrumb-mobile .breadcrumb-active a { font-family: "Founders Grotesk", sans-serif; color: #000; } .od-breadcrumb-mobile .breadcrumb-separator { padding: 0 15px; } .od-breadcrumb-mobile .breadcrumb-item a { opacity: 0.3; } .product-brand-banner__title span { color: #000; display: block; line-height: 1.5; } .product-brand-banner__title span:first-child { margin-bottom: 0.5rem; } .plp__outlet { color: #fff; font-family: 'Founders Grotesk', sans-serif; margin: 0 auto 25px; max-width: 1200px; } .plp__outlet-bg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; aspect-ratio: 390/134; background: #b47e00 url("https://static.lenskart.com/owndays/img/outlet/outlet-bg-2-sp.webp") no-repeat center/cover; } .plp__outlet-container, .plp__outlet-text { padding-inline: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; max-width: 1080px; margin-inline: auto; } .plp__outlet-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 35px; } .plp__outlet-title h1, .plp__outlet-title p { margin: 0; } .plp__outlet-title h1 { font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.7px; } .plp__outlet-title p { font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.7px; } .plp__outlet-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .plp__outlet-content p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; } .plp__outlet-subheading { font-size: 8px; font-style: normal; font-weight: 500; line-height: 9px; letter-spacing: 0.4px; gap: 3px; } .plp__outlet-subheading strong { color: inherit; font-family: inherit; font-size: 14px; font-style: normal; font-weight: 500; line-height: 9px; letter-spacing: 0.7px; } .plp__outlet-heading strong { color: inherit; font-family: inherit; font-size: 30px; font-style: normal; font-weight: 500; line-height: 20px; /* 66.667% */ letter-spacing: 3px; text-transform: uppercase; position: relative; padding: 5px 10px 5px 0; margin-right: 10px; } .plp__outlet-heading strong::before { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 30px; background-color: #fff; translate: 0 -50%; } .plp__outlet-heading > span { font-size: 8px; font-style: normal; font-weight: 500; line-height: 10px; /* 125% */ letter-spacing: 0.24px; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .plp__outlet-text { color: #000; margin-block: 30px 0; font-size: 14px; font-weight: 400; line-height: 20px; /* 142.857% */ letter-spacing: 0.7px; } @media (max-width: 767px) { .plp__outlet-title p { display: none; visibility: hidden; opacity: 0; } } @media (min-width: 768px) and (max-width: 1295px) { .plp__outlet-container, .plp__outlet-text { padding-inline: 5%; } } @media (min-width: 768px) { .plp__outlet { margin-block: 70px 0; } .plp__outlet-bg { aspect-ratio: 125/43; background-image: url("https://static.lenskart.com/owndays/img/outlet/outlet-bg-2-pc.webp"); padding-block: 0; margin-inline: -20px; } .plp__outlet-text { display: none; visibility: hidden; opacity: 0; } .plp__outlet-title h1 { font-size: 18px; letter-spacing: 0.9px; } .plp__outlet-content { gap: 25px; } .plp__outlet-subheading { font-size: 16px; letter-spacing: 0.8px; line-height: 16px; gap: 10px; } .plp__outlet-subheading strong { font-size: 25px; letter-spacing: 1.25px; line-height: 16px; } .plp__outlet-heading strong { font-size: 80px; line-height: 50px; letter-spacing: 8px; padding: 10px 20px 10px 0; margin-right: 20px; } .plp__outlet-heading strong::before { height: 70px; } .plp__outlet-heading > span { font-size: 18px; line-height: 18px; /* 100% */ letter-spacing: 0.54px; margin-top: 8px; } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .page-loading-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 40vh; } .lkspinner-container { padding: 20px 10px; position: relative; z-index: 3; } @media screen and (min-width: 768px) { .lkspinner-container { min-height: 40vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .lkspinner { height: 20px; width: 20px; -webkit-animation: rotate 0.8s infinite linear; animation: rotate 0.8s infinite linear; border: 2px solid #000000; border-right-color: transparent; border-radius: 20px; will-change: transform; margin: 0 auto; } .product-header { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; padding: 85px 32px; } @media screen and (min-width: 767px) and (max-width: 1024px) { .product-header { padding: 48px 32px; } } .product-header__name, .product-header__description { max-width: 100%; font-family: "Founders Grotesk", sans-serif; text-align: center; font-style: normal; } .product-header__name { font-size: 56px; color: black; font-weight: 600; line-height: 64px; margin: 0; } .product-header__description { font-size: 22px; font-weight: 400; line-height: 32px; color: #7c7c7c; margin: 0; max-width: 1072px; } @media (max-width: 767px) { .product-header { padding: 24px 16px; margin-bottom: 16px; -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 66, .08); box-shadow: 0px 4px 8px -2px rgba(0, 0, 66, .08); } .product-header__name { color: black; font-size: 22px; font-weight: 600; line-height: 24px; letter-spacing: 0.22px; } .product-header__description { max-width: 330px; font-size: 14px; line-height: 20px; } } .product-slider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; width: 100%; overflow: hidden; } .product-slider__btn { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; position: absolute; left: 16px; bottom: 16px; } .product-slider__btn .odButton { padding: 9px 14px; font-weight: 600; -webkit-box-shadow: 0px 4px 16px 0px rgba(0, 0, 66, .08); box-shadow: 0px 4px 16px 0px rgba(0, 0, 66, .08); text-transform: none; } .product-slider__btn .odButton--outline { background-color: #fff; } .product-slider .slick-slide * { display: -webkit-box; display: -ms-flexbox; display: flex; } .product-slider .slick-slide img { aspect-ratio: 480/300; -o-object-fit: cover; object-fit: cover; } .product-slider .slick-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; font: 0/0 a; width: 40px; height: 40px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; margin: 0; } .product-slider .slick-prev { left: 0; background-image: url("https://static1.lenskart.com/owndays/img/icons/slick-prev.svg"); } .product-slider .slick-next { right: 0; background-image: url("https://static1.lenskart.com/owndays/img/icons/slick-next.svg"); } .product-slider .slick-nav { width: 100%; max-height: 400px; } .product-slider .slick-nav .slick-track .product-slider .slick-nav .slick-slide { padding: 0 0 16px; margin: 0; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .product-slider .slick-nav .slick-track .product-slider .slick-nav .slick-slide * { display: -webkit-box; display: -ms-flexbox; display: flex; } .product-slider .slick-nav .slick-track .product-slider .slick-nav .slick-slide.slick-current .slick-img { border-color: #000; } .product-slider .slick-nav .slick-img { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; aspect-ratio: 1/1; width: 100%; border-radius: 4px; border: 1px solid #bcbcbc; overflow: hidden; background-color: #fff; cursor: pointer; margin: 0 8px; } .product-slider .slick-nav .slick-slide.slick-current .slick-img { border-color: #000; } .product-slider .slick-nav .slick-prev { display: none; visibility: hidden; opacity: 0; } .product-slider .slick-nav .slick-next { top: auto; left: 50%; right: auto; bottom: -15px; translate: -50% 0; width: 40px; height: 40px; border-radius: 10rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04); box-shadow: 0 1px 4px rgba(0, 0, 0, .04); background: #fff url("https://static.lenskart.com/owndays/img/pdp/chevron-down.svg") no-repeat center/24px auto; } .product-slider .slick-for { width: 100%; overflow: hidden; position: relative; background-color: #fff; } .product-slider .slick-for .slick-slider { padding-bottom: 20px; } .product-slider .slick-for .slick-slide img { width: 100%; max-height: 656px; margin-inline: auto; } .product-slider .slick-for .slick-img { aspect-ratio: 800/656; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 800px; margin-inline: auto; } @media (max-width: 1199px) { .product-slider .slick-nav { background-color: #fff; padding: 0 8px 40px; } .product-slider .slick-nav .slick-next { top: 50%; right: 8px; left: auto; bottom: auto; translate: 0% -50%; rotate: -90deg; } } @media (min-width: 1200px) { .product-slider { display: grid; grid-template-columns: 64px 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; } .product-slider__btn { left: 32px; bottom: 32px; } .product-slider .slick-prev { left: 24px; } .product-slider .slick-next { right: 24px; } .product-slider .slick-nav .slick-img { margin: 0 0 16px; } } .product { padding-bottom: 155px; font-family: 'Founders Grotesk', sans-serif; } .product-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-inline: 16px; margin-inline: auto; width: 100%; max-width: 1648px; } .product-top { display: grid; grid-template-columns: 1fr 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 32px; } .product-top__left { overflow: hidden; position: relative; } .product-top__left-actions { position: absolute; top: 0; right: 0; z-index: 2; } .product-top__left-actions .sidebar__footer__main__wishList { width: 48px; height: 48px; display: grid; place-items: center; } .product-top__tags { position: absolute; top: 32px; left: 32px; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-top__tag { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-top__tag img { height: 40px; } .product .modal { padding: 0; } .product .modal-dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 80vw; height: 80vh; margin: 0 auto; position: relative; top: 50%; translate: 0 -50%; } .product .modal-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; border: none; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); } .product .modal-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; padding: 0; } .product .modal .od-modal-close { display: block; font-size: 32px; position: fixed; right: 10px; top: 20px; z-index: 99999; background: #fff; border-radius: 50%; width: 40px; line-height: 34px; text-align: center; height: 40px; border: 1px solid #ddd; cursor: pointer; } .product .modal iframe { border: none; width: 80vw; height: 80vh; } @media (min-width: 768px) { .product { padding-block: 32px 64px; background-color: #f6f6f6; } } @media (min-width: 1200px) { .product-top { grid-template-columns: 1fr 440px; gap: 64px; } .product-top__left-actions { top: 32px; right: 20px; } } @import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap); @charset "UTF-8"; .product-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .product-details__price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 16px; padding-block: 8px; margin-bottom: 32px; } .product-details__price-eyeframe { width: 100%; font: 500 16px/24px 'Plus Jakarta Sans', sans-serif; } .product-details__price-section { font-size: 22px; font-weight: 600; line-height: 24px; letter-spacing: 0.22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 8px; } .product-details__price-section-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .product-details__price-section-offer-heading { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; white-space: nowrap; font-weight: 400; line-height: 1; color: #bf0000; } .product-details__price-section-pair-dis { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #fbf8ef; border: 1px solid #b47e00; border-radius: 8px; padding: 12px; } .product-details__price-section-mp { color: #a5a5a5; font-size: 80%; font-weight: 400; } .product-details__second-pair-dis { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; background-color: #fbf8ef; border: 1px solid #b47e00; border-radius: 8px; padding: 12px; margin-bottom: 32px; } .product-details__second-pair-dis-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; } .product-details__second-pair-dis-subtitle { margin: 0; color: #b47e00; font: 500 10px/12px 'Plus Jakarta Sans', sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .product-details__second-pair-dis-subtitle img { width: 12px; height: 12px; -o-object-fit: contain; object-fit: contain; } .product-details__second-pair-dis-description { font-size: 12px; font-weight: 400; line-height: 100%; margin: 0; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes slideOut { from { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } to { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes slideOut { from { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } to { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } @-webkit-keyframes slideIn { from { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes slideIn { from { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .important-notes-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .3); z-index: 9999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .important-notes-modal.fade-out { -webkit-animation: fadeOut 0.3s ease-in-out; animation: fadeOut 0.3s ease-in-out; } .important-notes-modal-content { background: #fff; max-width: 700px; width: 90%; padding: 60px 50px; position: relative; -webkit-animation: slideIn 0.3s ease-in-out; animation: slideIn 0.3s ease-in-out; } .fade-out .important-notes-modal-content { -webkit-animation: slideOut 0.3s ease-in-out; animation: slideOut 0.3s ease-in-out; } .important-notes-modal-content-close { position: absolute; width: 54px; height: 54px; top: 15px; right: 15px; background-size: 36px !important; opacity: 1; background: url(https://storage.owndays.com/icons/modal-close.svg) no-repeat 50%/26px; border: none; } .important-notes-modal-content-title { font-weight: bold; font-size: 20px; text-align: center; margin-bottom: 20px; line-height: 15px; letter-spacing: 0.2px; } .important-notes-modal-content-list { list-style: none; padding: 0; margin: 0; font-size: 16px; font-weight: 500; letter-spacing: 0.16px; color: #222; } .important-notes-modal-content-list li { position: relative; padding-left: 1.5em; text-indent: 0; line-height: 1.8; } .important-notes-modal-content-list li::before { content: '〇'; position: absolute; left: 0; top: 0; color: #222; width: 1.5em; display: inline-block; text-align: center; } .important-notes-container-item { border: 1px solid #bf0000; padding: 15px; background: #fff; } .important-notes-container-item-title { color: #bf0000; font-weight: bold; font-size: 16px; line-height: 180%; } .important-notes-container-item-subtitle { color: #000000; font-size: 14px; font-weight: 500; line-height: 180%; } .important-notes-container-item-description { color: #7c7c7c; font-size: 12px; font-weight: 500; text-indent: 0; position: relative; padding-left: 13px; line-height: 180%; } .important-notes-container-item-description::before { content: '*'; color: #7c7c7c; display: inline-block; position: absolute; left: 0; top: 0; width: 10px; text-align: center; } .important-notes-container-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 400; font-size: 13px; color: #535353 !important; cursor: pointer; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-bottom: 1px solid #535353; padding-bottom: 1px; position: relative; text-decoration: none; margin: 10px 0; } .important-notes-container-link:hover { text-decoration: none; border-bottom: 1px solid #535353; } .important-notes-container-link::after { content: ''; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 24px; height: 24px; background: url("https://static.lenskart.com/owndays/img/pdp/info.svg") no-repeat center; background-size: contain; } .product-details__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; margin-bottom: 16px; } .product-details__heading-title { font: 600 24px/1 "Founders Grotesk", sans-serif; letter-spacing: 0.22px; margin: 0; } .product-details__heading-brand { color: #7c7c7c; font: 400 16px/20px "Founders Grotesk", sans-serif; letter-spacing: 0.16px; margin: 0; } .contact-lens-params__delimiter { border: none; border-bottom: 1px solid rgba(0, 0, 0, .1); margin: 16px 0; } .contact-lens-params__title { margin: 24px 0 16px; color: rgba(68, 68, 68, .5); font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.4px; } .contact-lens-params__disclaimer { padding: 0 13px; margin: 24px 0 48px; color: #B59A50; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; } .contact-lens-params-grid { display: grid; padding: 0 13px; grid-template-columns: repeat(3, 1fr); row-gap: 11px; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } .contact-lens-params-grid__column-title { display: -webkit-box; display: -ms-flexbox; display: flex; height: 32px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 4px; color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; } .contact-lens-params-grid__row-title { display: -webkit-box; display: -ms-flexbox; display: flex; height: 48px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px; position: relative; color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; } .contact-lens-params-grid__tooltip { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact-lens-params-grid__tooltip:hover .contact-lens-params-grid__tooltip-text { display: block; } .contact-lens-params-grid__tooltip-icon { width: 16px; height: 16px; cursor: pointer; } .contact-lens-params-grid__tooltip-text { display: none; padding: 8px 16px; border-radius: 4px; margin-bottom: -15px; position: absolute; left: 0; bottom: 100%; color: #FFF; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.24px; white-space: nowrap; background: #27394F; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .35), 0px 18px 18px 0px rgba(0, 0, 0, .3), 0px 41px 25px 0px rgba(0, 0, 0, .18), 0px 73px 29px 0px rgba(0, 0, 0, .05), 0px 115px 32px 0px rgba(0, 0, 0, .01); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .35), 0px 18px 18px 0px rgba(0, 0, 0, .3), 0px 41px 25px 0px rgba(0, 0, 0, .18), 0px 73px 29px 0px rgba(0, 0, 0, .05), 0px 115px 32px 0px rgba(0, 0, 0, .01); } .h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } .contact-lens-params-dropdown-wrapper { position: relative; } .contact-lens-params-dropdown-toggler { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 11px 15px; border: 1px solid transparent; margin-bottom: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow-x: hidden; cursor: pointer; -webkit-transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out; } .contact-lens-params-dropdown-toggler--open { -webkit-box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, .1), 0px 29px 29px 0px rgba(0, 0, 0, .09), 0px 65px 39px 0px rgba(0, 0, 0, .05), 0px 116px 46px 0px rgba(0, 0, 0, .01), 0px 182px 51px 0px rgba(0, 0, 0, 0); box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, .1), 0px 29px 29px 0px rgba(0, 0, 0, .09), 0px 65px 39px 0px rgba(0, 0, 0, .05), 0px 116px 46px 0px rgba(0, 0, 0, .01), 0px 182px 51px 0px rgba(0, 0, 0, 0); } .contact-lens-params-dropdown-toggler--invalid { border-color: #ED194C; } .contact-lens-params-dropdown-toggler__input { padding: 0; border: none; color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.32px; opacity: 0.5; background-color: transparent; } .contact-lens-params-dropdown-toggler__input--selected { opacity: 1; } .contact-lens-params-dropdown-toggler__input--invalid { color: #ed194c; opacity: 1; } .contact-lens-params-dropdown-toggler__icon { width: 24px; height: 24px; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .contact-lens-params-dropdown-toggler__icon--open { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .contact-lens-params-dropdown-options { min-width: 100%; max-height: 264px; padding: 12px 16px 8px; position: absolute; top: calc(100% + 4px); z-index: 12; background-color: #fff; -webkit-box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, .1), 0px 29px 29px 0px rgba(0, 0, 0, .09), 0px 65px 39px 0px rgba(0, 0, 0, .05), 0px 116px 46px 0px rgba(0, 0, 0, .01), 0px 182px 51px 0px rgba(0, 0, 0, 0); box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, .1), 0px 29px 29px 0px rgba(0, 0, 0, .09), 0px 65px 39px 0px rgba(0, 0, 0, .05), 0px 116px 46px 0px rgba(0, 0, 0, .01), 0px 182px 51px 0px rgba(0, 0, 0, 0); overflow-y: auto; overflow-x: hidden; /* width */ /* Track */ /* Handle */ } .contact-lens-params-dropdown-options::-webkit-scrollbar { width: 6px; } .contact-lens-params-dropdown-options::-webkit-scrollbar-track { border-radius: 40px; background: #f4f4f4; } .contact-lens-params-dropdown-options::-webkit-scrollbar-thumb { border-radius: 40px; background: #546073; } .contact-lens-params-dropdown-options__option { display: grid; margin-bottom: 4px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: auto 12px; -webkit-column-gap: 14px; -moz-column-gap: 14px; column-gap: 14px; color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.32px; white-space: nowrap; cursor: pointer; } .contact-lens-params-dropdown-options__manual { display: grid; margin-bottom: 4px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: auto 12px; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } .contact-lens-params-dropdown-options__manual-input { width: 94px; padding: 0; border: none; color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.32px; outline: none; } .contact-lens-params-dropdown-options__manual-input:focus { border: none; outline: none; } .contact-lens-params-dropdown-options__manual-input::-webkit-input-placeholder { color: rgba(68, 68, 68, .5); font-family: 'NeuzeitGroLig', sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; } .contact-lens-params-dropdown-options__manual-input::-moz-placeholder { color: rgba(68, 68, 68, .5); font-family: 'NeuzeitGroLig', sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; } .contact-lens-params-dropdown-options__manual-input::-ms-input-placeholder { color: rgba(68, 68, 68, .5); font-family: 'NeuzeitGroLig', sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; } .contact-lens-params-dropdown-options__manual-input::placeholder { color: rgba(68, 68, 68, .5); font-family: 'NeuzeitGroLig', sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; } .product-details__colors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; margin-bottom: 56px; } .product-details__colors-title { color: #a5a5a5; font-size: 16px; line-height: 20px; letter-spacing: 0.16px; text-transform: capitalize; margin: 0; } .product-details__colors .od-pc-colors { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .product-details__colors .od-pc-colors-option { display: -webkit-box; display: -ms-flexbox; display: flex; width: 32px; height: 32px; border-radius: 50%; margin: 2px; outline: 1px solid transparent; outline-offset: 2px; cursor: pointer; } .product-details__colors .od-pc-colors-option-active { outline-color: #000; } .product-sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .product-sidebar__card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #fff; padding: 32px; } .product-sidebar__card .sidebar__btn-atc .odButton, .product-sidebar__card .sidebar__footer .odButton { font-weight: 600; font-size: 22px; padding-block: 11.5px; } .wishlist .wishlist-icon--main { color: #737397; } .wishlist .wishlist-icon--secondary { color: #000000; } .wishlist .text-color-red { color: red; } .wishlist--plp-mobile { display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; border-radius: 20px; border: 1px solid rgba(16, 24, 40, .15); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; position: absolute; top: 6px; right: 6px; } .wishlist--plp-mobile img { width: 14px; height: 14px; } .right-10 { right: 10px; } .top-15 { top: 15px; } .right-5 { right: 5px; } .top-5 { top: 5px; } .sidebar__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 16px; } .sidebar__footer__additional { background-color: #fbf9f7; border-radius: 8px; padding: 16px; margin-top: 32px; } .sidebar__footer__additional__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sidebar__footer__additional__items__item { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; } .sidebar__footer__additional__items__item img { aspect-ratio: 1/1; width: 32px; height: 32px; -o-object-fit: contain; object-fit: contain; } .sidebar__footer__additional__items__item p { color: #535353; font-size: 12px; line-height: 16px; letter-spacing: 0.12px; margin: 0; } .od-highlights-modal-wrapper { max-width: 550px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-highlights-modal-wrapper .od-highlights-modal { background: #FFF; padding: 24px 32px; } .od-highlights-modal-wrapper .od-highlights-modal__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 24px; width: 100%; } .od-highlights-modal-wrapper .od-highlights-modal__header__tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 23px; } .od-highlights-modal-wrapper .od-highlights-modal__header__tabs__tab { border-radius: 35px; } .od-highlights-modal-wrapper .od-highlights-modal__content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .od-highlights-modal-wrapper .od-highlights-modal__content__description { color: #546073; font-size: 20px; line-height: 30px; text-align: center; } .od-highlights-modal-wrapper .od-highlights-modal__content__button a { color: #444; text-decoration: underline; font-size: 20px; line-height: 24px; } .od-highlights-modal-wrapper .modal-body { padding: 0; } .store-availability-modal { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } @media (max-width: 767px) { .store-availability-modal { display: block !important; } } .store-availability-modal .store-availability { background: #fff; padding: 24px 40px; border-radius: 20px; } .store-availability-modal .store-availability__content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .store-availability-modal .store-availability__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; margin-bottom: 24px; } .store-availability-modal .store-availability__header__title { color: #444; font-size: 16px; line-height: 24px; } .store-availability-modal .store-availability__header__message { color: rgba(68, 68, 68, 0.69804); font-size: 14px; line-height: 19px; } .store-availability-modal .store-availability__find-store { padding: 12px 24px; width: 100%; font-size: 16px; line-height: 24px; } .store-availability-modal .store-availability__search-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; background-color: #fafafa; border-radius: 50px; padding: 14px 16px; } .store-availability-modal .store-availability__search-input { border: none; background-color: #fafafa; color: #444; width: 100%; } .store-availability-modal .store-availability__search-input::-webkit-input-placeholder { font-size: 14px; opacity: 0.5; } .store-availability-modal .store-availability__search-input::-moz-placeholder { font-size: 14px; opacity: 0.5; } .store-availability-modal .store-availability__search-input::-ms-input-placeholder { font-size: 14px; opacity: 0.5; } .store-availability-modal .store-availability__search-input::placeholder { font-size: 14px; opacity: 0.5; } .store-availability-modal .store-availability__store-list { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow-y: scroll; width: 100%; height: 400px; scrollbar-width: none; } .store-availability-modal .store-availability__store-list::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .store-availability-modal .store-availability__store-list { height: 250px; } } .store-availability-modal .store-availability .with-scroll { overflow-y: auto; } .store-availability-modal .store-availability__store-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 0; border-top: 1px solid #f1f1f1; } .store-availability-modal .store-availability__store-name { font-size: 16px; } .store-availability-modal .store-availability__store-availability { font-size: 16px; } .store-availability-modal .store-availability__checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; padding: 8px 0; cursor: pointer; } .store-availability-modal .store-availability__checkbox img { width: 16px; height: 16px; } .store-availability-modal .store-availability__checkbox__title { color: #444; font-size: 14px; } .store-availability-modal .store-availability__checkbox .od-checkbox { width: 16px; height: 16px; border-color: #000000; border: 2px solid #000000; cursor: pointer; } .store-availability-modal .store-availability__no-stores { font-size: 22px; color: #444; margin-top: 20px; } .store-availability-modal .modal-body { padding: 0; } .store-availability-modal .modal-content { margin: 0 auto; width: 672px; } .store-availability-modal .stores-title div { color: #444; font-size: 14px; opacity: 0.5; } .store-availability-modal .store-availability__find-store-wrapper { position: relative; bottom: 0; left: 0; right: 0; z-index: 999; background-color: #fff; padding-top: 24px; } .store-availability-modal-m { position: fixed; display: block; margin: 0 auto; top: 0; left: 0; z-index: 1200 !important; overflow-x: hidden; overflow-y: hidden; height: 100svh; width: 100%; background-color: #fff; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .store-availability-modal-m .store-availability { padding: 8px 16px; height: 100%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .store-availability-modal-m .store-availability .swipe-indicator { width: 32px; height: 4px; border-radius: 4px; background: #d9d9d9; margin: 0 auto; margin-bottom: 24px; } .store-availability-modal-m .store-availability__content { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 16px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: 100%; overflow: hidden; } .store-availability-modal-m .store-availability__store-list { height: 100%; overflow-y: visible; } .store-availability-modal-m .store-availability__store-list-scroll { overflow-y: auto; height: 100%; } .store-availability-modal-m .store-availability__find-store-wrapper { background-color: #fff; padding: 24px 0; margin-top: auto; } .store-statuses { margin-top: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .store-statuses img { width: 8px; height: 8px; } .store-status { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .store-status__title { color: #444; font-size: 12px; opacity: 0.5; } .compatible-lenses__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px 15px; padding: 0; margin-bottom: 16px; list-style: none; } .compatible-lenses__list li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #e6e6ec; border-radius: 4px; padding: 8px 12px; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.12px; color: #7c7c7c; } .compatible-lenses__notes { padding: 0; list-style: none; font-size: 14px; font-weight: 400; line-height: 20px; color: #535353; margin-top: 16px; } .compatible-lenses__notes li { position: relative; padding-left: 22px; } .compatible-lenses__notes li::before { content: ''; position: absolute; top: 8px; left: 8px; width: 4px; height: 4px; border-radius: 160px; border-radius: 10rem; background-color: #535353; } .compatible-lenses .odButton { padding: 10px 12px; font-size: 12px; line-height: 16px; letter-spacing: 0.12px; gap: 6px; } @media (max-width: 767px) { .compatible-lenses { border-bottom: 1px solid #d9d9d9; } } @media (min-width: 768px) { .compatible-lenses { border-top: 1px solid #d9d9d9; } } .collapse-header { color: #000; } .collapse-toggle { width: 100%; text-align: left; padding: 16px; font-weight: 600; background: none; border: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 18px; line-height: 24px; letter-spacing: 0.18px; background-color: transparent; background: url("https://static.lenskart.com/owndays/img/icons/arrow-right.svg") no-repeat right 16px center/20px auto; color: #000; } .collapse-content { overflow: hidden; -webkit-transition: max-height 0.4s ease; transition: max-height 0.4s ease; } @media (min-width: 768px) { .collapse-toggle { padding: 32px 0; font-size: 22px; letter-spacing: 0.22px; background-image: url("https://static.lenskart.com/owndays/img/icons/arrow-down.svg"); background-position: right center; } .collapse-toggle[aria-expanded='true'] { background-image: url("https://static.lenskart.com/owndays/img/icons/arrow-up.svg"); } } @media (max-width: 767px) { .collapse-toggle[disabled] { background-image: none; color: #000; } .collapse-content[data-show='false'] { position: fixed; top: 100%; left: 0; right: 0; z-index: 99; background-color: #fff; -webkit-box-shadow: 0px -4px 20px 0px rgba(0, 0, 66, .1); box-shadow: 0px -4px 20px 0px rgba(0, 0, 66, .1); border-radius: 16px 16px 0 0; translate: 0 0%; -webkit-transition: translate 0.3s ease; transition: translate 0.3s ease; } .collapse-content[data-show='false'].is-open { translate: 0 -100%; } .collapse-content[data-show='true'] { position: static; } .collapse-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 16px; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.18px; border-bottom: 1px solid #d9d9d9; margin: 0 0 16px; } .collapse-header button { font: 0/0 a; width: 32px; height: 32px; padding: 6px; background: transparent url("https://static.lenskart.com/owndays/img/pdp/close.svg") no-repeat center/20px auto; border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } .collapse-inner { padding: 0 16px 37px; } } .od-pc-technical-details dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 0; } .od-pc-technical-details dl dt, .od-pc-technical-details dl dd { font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: 0.16px; } .od-pc-technical-details dl dt { color: #7c7c7c; } .od-pc-technical-details dl dd { color: #535353; } .od-pc-technical-details .odButton { margin-top: 16px; padding: 10px 12px; color: #535353; font-weight: 600; text-transform: none; } .od-pc-technical-details__modal { background-color: #fff; border-radius: 8px; padding: 16px; width: 100%; max-width: 400px; } .od-pc-technical-details__modal-backdrop { position: fixed; inset: 0; z-index: 999; background-color: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 16px; } .od-pc-technical-details__modal-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 16px; } .od-pc-technical-details__modal-header h2 { font-weight: 600; color: #000; margin: 0; } .od-pc-technical-details__modal-header button { width: 24px; height: 24px; padding: 0; margin: 0; border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; background: transparent url("https://static.lenskart.com/owndays/img/pdp/close.svg") no-repeat center/contain; } .od-pc-technical-details__modal-body dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; } .od-pc-technical-details__modal-body dl dt { color: #7c7c7c; } .od-pc-technical-details__modal-body dl dd { color: #535353; margin: 0; } @media (min-width: 768px) { .od-pc-technical-details dl dt, .od-pc-technical-details dl dd { font-size: 18px; line-height: 24px; letter-spacing: 0.18px; } .od-pc-technical-details__modal { padding: 48px 56px; } .od-pc-technical-details__modal-header { margin-bottom: 32px; } .od-pc-technical-details__modal-header h2 { font-size: 22px; line-height: 24px; letter-spacing: 0.22px; } .od-pc-technical-details__modal-body dl { gap: 12px 16px; } .od-pc-technical-details__modal-body dl dt, .od-pc-technical-details__modal-body dl dd { font-size: 18px; line-height: 24px; letter-spacing: 0.18px; } } .pdp-icontact-lens-features__title { padding: 48px 0 32px; color: #444; font-size: 32px; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: -0.64px; } .pdp-icontact-lens-features__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .size-guide__text { display: grid; grid-template-columns: 1fr 117px; gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #535353; font-size: 14px; line-height: 20px; margin-bottom: 24px; } .size-guide__list { padding: 0; margin-bottom: 32px; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 767px) { .size-guide { border-top: 1px solid #d9d9d9; } } @media (min-width: 768px) { .size-guide + .compatible-lenses { border-top: 1px solid #d9d9d9; } } .store-benefit { padding: 16px; } .store-benefit__title { font-size: 18px; line-height: 24px; letter-spacing: 0.18px; font-weight: 600; margin: 0 0 16px; color: #000; } .store-benefit__list { border-radius: 8px; background-color: #fbf9f7; padding: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .store-benefit__list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: 6px; } .store-benefit__list li img { aspect-ratio: 1/1; width: 24px; -o-object-fit: contain; object-fit: contain; } .store-benefit__list li span { font-size: 12px; line-height: 16px; letter-spacing: 0.12px; color: #535353; } .store-benefit__locations { background: url("https://static.lenskart.com/owndays/img/pdp/store-benefit-locations-bg.webp") no-repeat center/cover; border-radius: 12px; padding: 24px 16px; margin: 0; } .store-benefit__locations-title { font-size: 20px; font-weight: 600; line-height: 20px; letter-spacing: 0.2px; color: #fff; margin: 0 0 16px; } .store-benefit__locations-tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px; margin-bottom: 47px; } .store-benefit__locations-tags span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 8px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(2px); font-size: 10px; line-height: 12px; letter-spacing: 0.1px; color: #fff; padding: 6px 12px; } .store-benefit__locations-link { padding: 8px 12px; } .store-benefit__locations-link:hover, .store-benefit__locations-link:focus { color: #fff; border-color: #fff; } @media (min-width: 768px) { .store-benefit { padding: 0; } .store-benefit__title { font-size: 22px; letter-spacing: 0.22px; } } .gundam-slider-card { width: 206px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #f2f2f2; border: 1px solid #f2f2f2; border-radius: 16px; overflow: hidden; } .gundam-slider-card__image { aspect-ratio: 480 / 300; -o-object-fit: cover; object-fit: cover; } .gundam-slider-card__image__wrapper { aspect-ratio: 206/131; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .gundam-slider-card__details { padding: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .gundam-slider-card__title { font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.16px; margin: 0 0 2px; color: #000; } .gundam-slider-card__subtitle { font-size: 14px; line-height: 20px; color: #535353; margin: 0 0 16px; } .gundam-slider-card__price { font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.16px; margin: 0; color: #000; } .gundam-slider-card__price-wrapper { margin-top: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .gundam-slider-card__btn { padding: 8px 17px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.12px; } .gundam-slider-card__btn:hover, .gundam-slider-card__btn:focus, .gundam-slider-card__btn:active { color: white !important; text-decoration: none !important; } .recommended-list { background-color: #fff; padding: 16px 15px; } .recommended-list__title { font-size: 18px; line-height: 24px; letter-spacing: 0.18px; font-weight: 600; margin: 0 0 16px; color: #000; } .recommended-list__slider { overflow-x: auto; margin-inline: -15px; cursor: ew-resize; padding-bottom: 20px; } .recommended-list__slider-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding-inline: 15px; } @media (min-width: 768px) { .recommended-list__title { font-size: 22px; letter-spacing: 0.22px; } } @media (min-width: 1200px) { .recommended-list { margin-left: 80px; padding: 20px 32px; } .recommended-list__slider { margin-inline: -32px; } .recommended-list__slider-list { padding-inline: 32px; } } .rich-content { padding: 16px; font-size: 14px; font-weight: 500; line-height: 180%; letter-spacing: 0.14px; color: #000; } .rich-content h3 { font-size: 25px; font-weight: 400; line-height: 1.6; margin-block: 60px 30px; } .rich-content h4 { font-size: 16px; font-weight: 600; margin: 0; } .rich-content p { margin: 0; } .rich-content__info { margin-bottom: 60px; } .rich-content__reservation { margin-bottom: 60px; } .rich-content__novelty { max-width: 1072px; border-radius: 10px; border: 1px solid #000; padding: 40px 20px 20px; margin-bottom: 60px; display: grid; gap: 20px; } .rich-content__novelty h3 { margin-block: 0 10px; } .rich-content__novelty img { width: 100%; max-width: 370px; margin-inline: auto; mix-blend-mode: multiply; } .rich-content__notes ul { list-style-type: disc; -webkit-padding-start: 1.5em; padding-inline-start: 1.5em; margin-bottom: 0; } .rich-content__notes ul li { list-style-type: inherit; } @media (min-width: 768px) { .rich-content { background-color: #fff; } .rich-content__novelty { padding: 20px; } } @media (min-width: 1024px) { .rich-content h3 { position: relative; font-size: 28px; } .rich-content h3::before { content: ''; display: block; position: absolute; width: 6px; height: 100%; left: -32px; top: 50%; translate: 0% -50%; border-left: 6px solid #000; } } @media (min-width: 1200px) { .rich-content { padding: 20px 32px; } .rich-content__wrapper { margin-left: 80px; } .rich-content__novelty { padding: 50px; gap: 40px; grid-template-columns: 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (max-width: 1199px) { .rich-content__novelty h3 { text-align: center; } .rich-content__novelty h3::before { display: none; } } .full-widget-width { width: calc(100% - 255px); } .blankwidgets { display: grid; grid-template-columns: repeat(3, 1fr); padding: 15px; } .blankwidgets_box { border: 1px solid #ddd; } .blankwidgets_box_animatedBackground { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #f6f7f8; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee)); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; } .blankwidgets_box_animatedBackground_header { height: 20px; } .blankwidgets_box_animatedBackground_image { height: 200px; } .blankwidgets_box_headerWrap { width: 80%; margin: 3px; } .blankwidgets_box_imageWrap { margin: 3px 3px 10px 3px; } .blankwidgets_box_footerWrap { margin: 3px; } .blankwidgets_box_footerWrap_left { width: 70%; display: inline-block; } .blankwidgets_box_footerWrap_right { float: right; width: 30%; } .blankwidgets_box_footerWrap_right div, .blankwidgets_box_footerWrap_left div { margin-bottom: 6px; height: 15px; } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .sidebarBlank .animatedBackground { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #f6f7f8; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee)); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; } .sidebarBlank .footerWrap { margin: 3px; } .sidebarBlank .footerLeft { width: 100%; display: inline-block; } .sidebarBlank .footerRight { width: 30%; display: inline-block; } .sidebarBlank .headerWrap { width: 80%; margin: 3px; } .sidebarBlank .animatedBackground .Header { height: 20px; } .sidebarBlank .imageWrap { margin: 3px 3px 10px 3px; } .sidebarBlank .animatedBackground .image { height: 100px; } .sidebarBlank .blankBox { border: 1px solid #ddd; } .sidebarBlank .blankBox1 { border: 0px solid #ddd; overflow: auto; margin-top: 20px; padding: 10px 0px 10px 0px; } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .leftBlankContent .product-images-list ul, .leftBlankContent .product-images-list li { margin: 0; padding: 0; } .leftBlankContent .product-images-list .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -25px 0 0 -25px; width: calc(97% + 25px); } .leftBlankContent .product-images-list .list li { width: calc(50% - 25px); margin: 25px 0 0 25px; border: 1px solid #eee; } .leftBlankContent .product-images-list .list li:before { content: ''; display: block; padding-top: 75%; } .leftBlankContent .animatedBackground { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #f6f7f8; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee)); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; } .cms { margin-top: 0px; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .od-adornment_form { position: relative; width: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .od-adornment_form__input { top: 0; left: 0; width: 100%; border: 1px solid #E2E2EE; background-color: #FFFFFF; font-size: 14px; padding: 16px 40px; } .od-adornment_form__label { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-adornment_form_adornment { position: absolute; top: 44px; left: 10px; } .od-adornment_form_adornment-text { color: #999; } .od-adornment_form_adornment-placeholder { margin-left: 5px; color: #bdbdbd; } .od-form-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 64px 100px 24px 100px; margin: 0 -100px 16px; background-color: #fff; } .od-form-header__title { color: #444; font-size: 24px; font-style: normal; font-weight: 400; line-height: normal; } .od-form-header img { cursor: pointer; } .od-form { padding-bottom: 32px; padding: 0 100px 32px; } .od-form label { font-weight: normal; } .od-form__shipping-header { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } .od-form .od-form-radio-select-text { color: #000000; font-size: 14px; line-height: 24px; } .od-form .od-form-radio-title { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); margin-right: 28px; } .od-form .od-form-ud { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 16px; } .od-form .od-form-ud__gender { padding-right: 0; margin: 0; width: 100%; } .od-form .od-form-ud__field { padding-right: 0; margin: 0; width: 49%; } .od-form .od-form-ud__default-address { margin: 15px 0 15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-form .od-form-ud__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .od-form .od-form-ud .od-form-input-container { width: 100%; } .od-form .od-form-ud .od-form-input-container label { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-form .od-form-ud .od-form-input-container .od-form-input { display: block; width: 100%; height: 56px; border: 1px solid #E2E2EE; background-color: #FFFFFF; color: #000000; font-size: 14px; line-height: 24px; padding: 16px 14px; } .color-lightgrey { color: rgba(60, 60, 60, .54); } .color-theme-blue { color: #00b9c6; } .theme-button { background-color: #00b9c6; color: #fff; } .theme-button:hover { background-color: #00b9c6; color: #fff; } .height-25 { height: 25px; } .margin-n15 { margin-left: -15px; } .postal-code { background: #ddd; padding: 1px 5px 3px 5px; border: 1px dashed #a5a5a5; font-size: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .postal-code i.fa-check { color: #35b2a0; margin-right: 8px; display: inline-block; } .postal-code i.fa-times { color: red; margin-right: 8px; display: inline-block; } .postal-code span { display: inline-block; vertical-align: top; padding: 6px 0 0; } .new-shipping-address .icon-gift { width: 24px; height: 24px; background-position: -1100px -250px; vertical-align: -5px; display: inline-block; line-height: 14px; background-image: url(//static.lenskart.com/media/desktop/img/sprite-v2.png); background-repeat: no-repeat; } .new-shipping-address .react-autosuggest__input { border-radius: 0; } .new-shipping-address .btn-submit { color: #fff; background: #00b9c6; font-size: 14px; display: block; border: none; padding: 12px 20px; letter-spacing: 2px; text-transform: uppercase; margin: 0; border-radius: 5px; min-width: 223px; } @media (min-width: 1200px) { .new-shipping-address .receiverName { margin-left: -15px; } } @media (min-width: 992px) { .new-shipping-address .receiverName { margin-left: -15px; } .new-shipping-address .user-details-container { margin-left: -15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .textfield label { font-size: 16px; } .textfield-legend-width-10 .MuiOutlinedInput-root legend { width: 10px !important; } .textfield-legend-width-11 .MuiOutlinedInput-root legend { width: 11px !important; } .textfield-legend-width-12 .MuiOutlinedInput-root legend { width: 12px !important; } .textfield-legend-width-13 .MuiOutlinedInput-root legend { width: 13px !important; } .textfield-legend-width-14 .MuiOutlinedInput-root legend { width: 14px !important; } .textfield-legend-width-15 .MuiOutlinedInput-root legend { width: 15px !important; } .textfield-legend-width-16 .MuiOutlinedInput-root legend { width: 16px !important; } .textfield-legend-width-17 .MuiOutlinedInput-root legend { width: 17px !important; } .textfield-legend-width-18 .MuiOutlinedInput-root legend { width: 18px !important; } .textfield-legend-width-19 .MuiOutlinedInput-root legend { width: 19px !important; } .textfield-legend-width-20 .MuiOutlinedInput-root legend { width: 20px !important; } .textfield-legend-width-21 .MuiOutlinedInput-root legend { width: 21px !important; } .textfield-legend-width-22 .MuiOutlinedInput-root legend { width: 22px !important; } .textfield-legend-width-23 .MuiOutlinedInput-root legend { width: 23px !important; } .textfield-legend-width-24 .MuiOutlinedInput-root legend { width: 24px !important; } .textfield-legend-width-25 .MuiOutlinedInput-root legend { width: 25px !important; } .textfield-legend-width-26 .MuiOutlinedInput-root legend { width: 26px !important; } .textfield-legend-width-27 .MuiOutlinedInput-root legend { width: 27px !important; } .textfield-legend-width-28 .MuiOutlinedInput-root legend { width: 28px !important; } .textfield-legend-width-29 .MuiOutlinedInput-root legend { width: 29px !important; } .textfield-legend-width-30 .MuiOutlinedInput-root legend { width: 30px !important; } .textfield-legend-width-31 .MuiOutlinedInput-root legend { width: 31px !important; } .textfield-legend-width-32 .MuiOutlinedInput-root legend { width: 32px !important; } .textfield-legend-width-33 .MuiOutlinedInput-root legend { width: 33px !important; } .textfield-legend-width-34 .MuiOutlinedInput-root legend { width: 34px !important; } .textfield-legend-width-35 .MuiOutlinedInput-root legend { width: 35px !important; } .textfield-legend-width-36 .MuiOutlinedInput-root legend { width: 36px !important; } .textfield-legend-width-37 .MuiOutlinedInput-root legend { width: 37px !important; } .textfield-legend-width-38 .MuiOutlinedInput-root legend { width: 38px !important; } .textfield-legend-width-39 .MuiOutlinedInput-root legend { width: 39px !important; } .textfield-legend-width-40 .MuiOutlinedInput-root legend { width: 40px !important; } .textfield-legend-width-41 .MuiOutlinedInput-root legend { width: 41px !important; } .textfield-legend-width-42 .MuiOutlinedInput-root legend { width: 42px !important; } .textfield-legend-width-43 .MuiOutlinedInput-root legend { width: 43px !important; } .textfield-legend-width-44 .MuiOutlinedInput-root legend { width: 44px !important; } .textfield-legend-width-45 .MuiOutlinedInput-root legend { width: 45px !important; } .textfield-legend-width-46 .MuiOutlinedInput-root legend { width: 46px !important; } .textfield-legend-width-47 .MuiOutlinedInput-root legend { width: 47px !important; } .textfield-legend-width-48 .MuiOutlinedInput-root legend { width: 48px !important; } .textfield-legend-width-49 .MuiOutlinedInput-root legend { width: 49px !important; } .textfield-legend-width-50 .MuiOutlinedInput-root legend { width: 50px !important; } .textfield-legend-width-51 .MuiOutlinedInput-root legend { width: 51px !important; } .textfield-legend-width-52 .MuiOutlinedInput-root legend { width: 52px !important; } .textfield-legend-width-53 .MuiOutlinedInput-root legend { width: 53px !important; } .textfield-legend-width-54 .MuiOutlinedInput-root legend { width: 54px !important; } .textfield-legend-width-55 .MuiOutlinedInput-root legend { width: 55px !important; } .textfield-legend-width-56 .MuiOutlinedInput-root legend { width: 56px !important; } .textfield-legend-width-57 .MuiOutlinedInput-root legend { width: 57px !important; } .textfield-legend-width-58 .MuiOutlinedInput-root legend { width: 58px !important; } .textfield-legend-width-59 .MuiOutlinedInput-root legend { width: 59px !important; } .textfield-legend-width-60 .MuiOutlinedInput-root legend { width: 60px !important; } .textfield-legend-width-61 .MuiOutlinedInput-root legend { width: 61px !important; } .textfield-legend-width-62 .MuiOutlinedInput-root legend { width: 62px !important; } .textfield-legend-width-63 .MuiOutlinedInput-root legend { width: 63px !important; } .textfield-legend-width-64 .MuiOutlinedInput-root legend { width: 64px !important; } .textfield-legend-width-65 .MuiOutlinedInput-root legend { width: 65px !important; } .textfield-legend-width-66 .MuiOutlinedInput-root legend { width: 66px !important; } .textfield-legend-width-67 .MuiOutlinedInput-root legend { width: 67px !important; } .textfield-legend-width-68 .MuiOutlinedInput-root legend { width: 68px !important; } .textfield-legend-width-69 .MuiOutlinedInput-root legend { width: 69px !important; } .textfield-legend-width-70 .MuiOutlinedInput-root legend { width: 70px !important; } .textfield-legend-width-71 .MuiOutlinedInput-root legend { width: 71px !important; } .textfield-legend-width-72 .MuiOutlinedInput-root legend { width: 72px !important; } .textfield-legend-width-73 .MuiOutlinedInput-root legend { width: 73px !important; } .textfield-legend-width-74 .MuiOutlinedInput-root legend { width: 74px !important; } .textfield-legend-width-75 .MuiOutlinedInput-root legend { width: 75px !important; } .textfield-legend-width-76 .MuiOutlinedInput-root legend { width: 76px !important; } .textfield-legend-width-77 .MuiOutlinedInput-root legend { width: 77px !important; } .textfield-legend-width-78 .MuiOutlinedInput-root legend { width: 78px !important; } .textfield-legend-width-79 .MuiOutlinedInput-root legend { width: 79px !important; } .textfield-legend-width-80 .MuiOutlinedInput-root legend { width: 80px !important; } .textfield-legend-width-81 .MuiOutlinedInput-root legend { width: 81px !important; } .textfield-legend-width-82 .MuiOutlinedInput-root legend { width: 82px !important; } .textfield-legend-width-83 .MuiOutlinedInput-root legend { width: 83px !important; } .textfield-legend-width-84 .MuiOutlinedInput-root legend { width: 84px !important; } .textfield-legend-width-85 .MuiOutlinedInput-root legend { width: 85px !important; } .textfield-legend-width-86 .MuiOutlinedInput-root legend { width: 86px !important; } .textfield-legend-width-87 .MuiOutlinedInput-root legend { width: 87px !important; } .textfield-legend-width-88 .MuiOutlinedInput-root legend { width: 88px !important; } .textfield-legend-width-89 .MuiOutlinedInput-root legend { width: 89px !important; } .textfield-legend-width-90 .MuiOutlinedInput-root legend { width: 90px !important; } .textfield-legend-width-91 .MuiOutlinedInput-root legend { width: 91px !important; } .textfield-legend-width-92 .MuiOutlinedInput-root legend { width: 92px !important; } .textfield-legend-width-93 .MuiOutlinedInput-root legend { width: 93px !important; } .textfield-legend-width-94 .MuiOutlinedInput-root legend { width: 94px !important; } .textfield-legend-width-95 .MuiOutlinedInput-root legend { width: 95px !important; } .textfield-legend-width-96 .MuiOutlinedInput-root legend { width: 96px !important; } .textfield-legend-width-97 .MuiOutlinedInput-root legend { width: 97px !important; } .textfield-legend-width-98 .MuiOutlinedInput-root legend { width: 98px !important; } .textfield-legend-width-99 .MuiOutlinedInput-root legend { width: 99px !important; } .textfield-legend-width-100 .MuiOutlinedInput-root legend { width: 100px !important; } .studio-flow-warning-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .9)), to(rgba(255, 255, 255, .9))), #FF9800; background: linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), #FF9800; padding: 12px; } .studio-flow-warning-header { font-size: 16px; line-height: 150%; } .studio-flow-warning-text { font-weight: 400; font-size: 14px; line-height: 143%; } .od-address-form-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000; background: rgba(0, 0, 0, .3); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .od-address-form { width: 768px; height: 100vh; background: #FAFAFA; position: relative; overflow-y: hidden; } .od-address-form .od-shipping-address-form__input-error { font-size: 14px; line-height: 24px; color: #a94442; } .od-address-form form { height: calc(100vh - 168px); overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } .od-address-form form::-webkit-scrollbar { display: none; } .od-address-form__footer { width: 100%; padding: 24px 100px; border-radius: 5px 5px 0px 0px; background: #FFF; position: absolute; bottom: 0; left: 0; -webkit-box-shadow: 0px -4px 14px 0px rgba(0, 0, 0, .05); box-shadow: 0px -4px 14px 0px rgba(0, 0, 0, .05); } .od-address-form__submit { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 16px 24px; border: none; border-radius: 50px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: stretch; align-self: stretch; background: #546073; outline: none; color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.4px; cursor: pointer; } .od-address-form-two-fields { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } .od-address-form-field { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 12px 16px; margin-bottom: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .od-address-form-field__input { width: 100%; border: none; outline: none; color: #000; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-field__input::-webkit-input-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-field__input::-moz-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-field__input::-ms-input-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-field__input::placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-field__phone-code { color: #444; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-checkout .saveasTextbox { padding: 0; -webkit-transition: 0.3s; transition: 0.3s; opacity: 0; margin: 16px 0 8px 0; height: 0px; overflow: hidden; margin: 8px 0; } .od-address-form-checkout .saveasTextbox.active { opacity: 1; height: 72px; overflow: visible; } .od-address-form-checkout .saveasTextbox input { width: 100%; border: none; outline: none; color: #000; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; line-height: 24px; padding: 12px 16px; } .od-address-form-checkout .saveasTextbox input::-webkit-input-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; opacity: 0.5; } .od-address-form-checkout .saveasTextbox input::-moz-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; opacity: 0.5; } .od-address-form-checkout .saveasTextbox input::-ms-input-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; opacity: 0.5; } .od-address-form-checkout .saveasTextbox input::placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; opacity: 0.5; } .od-address-form-checkout label { display: none; } .od-address-form-checkout .od-helper-text { display: none; } .od-address-form-checkout .od-form-ud { width: 100%; } .od-address-form-checkout .od-form-ud__dual-inputs { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16px; } .od-address-form-checkout .od-form-ud__field { width: 100%; padding: 12px 16px; margin-bottom: 16px; background-color: #FFF; } .od-address-form-checkout .od-form-ud__field .od-form-error { margin-top: 16px; } .od-address-form-checkout .od-form-ud__field__gender { color: #444; font-size: 16px; line-height: 24px; margin-right: 20px; } .od-address-form-checkout .od-form-ud__field__country { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, .5); } .od-address-form-checkout .od-form-ud__field__country span { opacity: 0.3; color: #444; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; } .od-address-form-checkout .od-form-ud__field input { width: 100%; height: 24px; min-height: 24px; padding: 0; border: none; outline: none; color: #000 !important; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; line-height: 24px; } .od-address-form-checkout .od-form-ud__field input::-webkit-input-placeholder { color: #444; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; line-height: 24px; opacity: 0.5; } .od-address-form-checkout .od-form-ud__field input::-moz-placeholder { color: #444; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; line-height: 24px; opacity: 0.5; } .od-address-form-checkout .od-form-ud__field input::-ms-input-placeholder { color: #444; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; line-height: 24px; opacity: 0.5; } .od-address-form-checkout .od-form-ud__field input::placeholder { color: #444; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; line-height: 24px; opacity: 0.5; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form__label { display: none; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form_adornment { position: static; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form_adornment input { width: 100%; height: 24px; min-height: 24px; padding: 0; border: none; outline: none; color: #000 !important; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form_adornment input::-webkit-input-placeholder { color: #000 !important; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; opacity: 1; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form_adornment input::-moz-placeholder { color: #000 !important; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; opacity: 1; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form_adornment input::-ms-input-placeholder { color: #000 !important; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; opacity: 1; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form_adornment input::placeholder { color: #000 !important; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; opacity: 1; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form__input { width: 100%; height: 24px; min-height: 24px; padding: 0; border: none; outline: none; color: #000; font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form__input::-webkit-input-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form__input::-moz-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form__input::-ms-input-placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-address-form-checkout .od-form-ud__field--phone .od-adornment_form__input::placeholder { color: rgba(0, 0, 0, .5); font-family: 'NeuzeitGroReg', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .od-form-error { font-size: 14px; line-height: 24px; color: #a94442; } .od-form-error label { color: #a94442; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .od-text-field { width: 100%; } .od-text-field__input { width: 100%; min-height: 56px; border: 1px solid #E2E2EE; font-size: 14px; padding: 16px 14px; } .od-text-field__input:disabled { background-color: #e3e3e3; } .od-text-field__label { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); font-weight: normal; } .od-text-field__label--mobile { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .form__input:focus ~ .form__label, .form__input:not(:placeholder-shown).form__input:not(:focus) ~ .form__label { top: -0.5rem; font-size: 1.2rem; left: 0.8rem; } .od-helper-text { color: rgba(0, 0, 0, .54); font-size: 1rem; margin-top: 3px; margin-left: 5px; margin-right: 14px; font-weight: 400; line-height: 1.66; letter-spacing: 0.03333em; } .od-error-text { color: rgba(226, 8, 8, .54); } .alert-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: 8px 0px; padding: 14px 10px; gap: 10px; } .alert-container .alert-img { width: 24px; height: 24px; } .alert-container .alert-img img { width: 100%; height: auto; } .alert-container .alert-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .alert-container .alert-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; } .alert-container .alert-body .alert-detail { font-weight: 400; line-height: 143%; letter-spacing: 0.15px; } .alert-container .alert-body .alert-note { font-weight: 500; line-height: 150%; letter-spacing: 0.15px; } .save-as-address-section { margin: 8px 0; } .save-as-address-section .save-as-list ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; white-space: nowrap; margin: 0; padding: 8px 0; } .save-as-address-section .save-as-list ul li { display: -webkit-box; display: -ms-flexbox; display: flex; } .save-as-address-section .save-as-list ul li label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; border-radius: 30px; background: #FFF; -webkit-transition: 0.3s; transition: 0.3s; padding: 8px 14px; } .save-as-address-section .save-as-list ul li input { display: none; } .save-as-address-section .save-as-list ul li span { font-size: 12px; line-height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; color: #555; font-family: 'NeuzeitGroReg', sans-serif; } .shipping-page .bottom-sheet-container-in .bottom-sheet .address-modal .add-new-address-box .save-as-address-section .saveasTextbox { padding: 0; -webkit-transition: 0.3s; transition: 0.3s; opacity: 0; margin: 16px 0 8px 0; height: 0px; overflow: hidden; } .shipping-page .bottom-sheet-container-in .bottom-sheet .address-modal .add-new-address-box .save-as-address-section .saveasTextbox.active { opacity: 1; height: 72px; overflow: visible; } .shipping-page .bottom-sheet-container-in .bottom-sheet .address-modal .add-new-address-box .save-as-address-section .saveasTextbox input { font-size: 14px; line-height: 24px; letter-spacing: -0.02em; color: #444; width: 100%; height: 56px; margin-top: 0; } .save-as-address-section .save-as-list ul li input:checked + label { background: #E9EEF6; border: 1px solid #E9EEF6; padding: 8px 20px; color: #546073; } .save-as-address-section .save-as-list ul li input:checked + label span { color: #546073; font-family: 'Founders Grotesk', sans-serif; } .od-shipping-address__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; color: #000000; text-transform: capitalize; } .od-shipping-address__title-backBTN { cursor: pointer; margin-bottom: -5px; margin-right: 15px; } .od-checkout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #FAFAFA; max-width: 1920px; margin: 0 auto; padding: 40px 100px; } .od-checkout__breadcrumbs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .od-checkout__breadcrumb { font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #666666; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .od-checkout__breadcrumb:hover { color: #000000; } .od-checkout__breadcrumb--active { font-size: 14px; line-height: 20px; letter-spacing: -0.02em; cursor: default; pointer-events: none; color: #000000; } .od-checkout__breadcrumbs-divider { font-size: 20px; color: #000000; } .od-checkout-step-two { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 40px; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .od-checkout-step-two__content { display: grid; grid-template-columns: auto 360px; gap: 40px; } .od-my-account-shimmer { max-width: 1920px; margin: 0 auto; padding: 40px 100px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; } .od-my-account-shimmer__sidebar { min-width: 360px; } .od-my-account-shimmer__main { width: 100%; } .returnlabel .info-icon { -ms-flex-preferred-size: 8%; flex-basis: 8%; } .returnlabel .info-icon img { width: 16px; } .returnlabel .info-text { -ms-flex-preferred-size: 90%; flex-basis: 90%; } .returnlabel .download { width: 75vw; } .payment-summary .items-count .total-incl-gst-price { color: #df1676; font-size: 24px; } .payment-summary .totals { border-top: 1px solid #ebebeb; } .payment-summary .net-amount-before-tax { border-top: 1px solid #ebebeb; } .payment-summary .border-top { border-top: 1px solid #ebebeb; } .payment-summary .tax-tooltip { background: #000; padding: 5px; position: absolute; color: #fff; width: 85vw; } .payment-summary .text-green { color: green; } @media screen and (max-width: 345px) { .payment-summary .items-count .total-incl-gst-price { font-size: 18px; } } .lkpanel .collapse { overflow: hidden; -webkit-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: all; transition-property: all; -webkit-transition-timing-function: cubic-bezier(0, 1, 0, 1); transition-timing-function: cubic-bezier(0, 1, 0, 1); max-height: 0; } .lkpanel .collapse.in { -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; max-height: 10000px; } .lk-return-exchange { padding-top: 0px; padding-bottom: 0px; } .lk-return-exchange .divider { width: 1px; background: #ebebeb; margin-top: 0px; margin-bottom: 0px; } .swapCircleWrapper { position: relative; left: -4%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .swapCircle { color: #fff; background: #00B9C6; font-size: x-large !important; border-radius: 100%; } .lk-return-exchange .lk-padding { padding-top: 15px; padding-bottom: 15px; } /* * Define scss variables here. */ .progress-container .horizontal .progress-item.active:after, .progress-container .horizontal .progress-item.current:after, .progress-container .flex-direction-column .progress-item.current:after, .progress-container ul .progress-item.active:after { content: '\A0'; border: solid #ffffff; border-width: 0 1.4px 1.4px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 4px; top: 1px; background: transparent; height: 10px; width: 5px; border-radius: 0; border-radius: initial; } .progress-container .horizontal .progress-item.negative:after, .progress-container .flex-direction-column .progress-item.negative:after { content: '\00D7'; color: #ffffff; position: absolute; font-size: 19px; } .progress-container .horizontal .progress-item:before, .progress-container .horizontal .progress-item.active:before, .progress-container .horizontal .progress-item.negative:before, .progress-container .horizontal .progress-item.current:before, .progress-container .flex-direction-column .progress-item:before, .progress-container .flex-direction-column .progress-item.negative:before, .progress-container .flex-direction-column .progress-item.current:before, .progress-container ul .progress-item .progress-circle:before, .progress-container ul .progress-item.active .progress-circle:before { position: absolute; content: ''; border-radius: 50%; height: 14px; width: 14px; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .desktop-return { display: 'flex'; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: 'column'; flex-direction: 'column'; position: 'relative'; top: '17px'; left: '-44px'; } .desktop-left { left: -41px; } .progress-container .horizontal { margin-left: 10px; margin-right: -5%; max-width: 750px; position: relative; } .progress-container .horizontal.img-banner .progress-item { left: 1%; width: 96%; border-top: 1px solid #dddddd; padding-left: 0; } .progress-container .horizontal.img-banner .progress-item:before { display: none; } .progress-container .horizontal.img-banner .progress-item .progressText { border-bottom: none; color: #666666; font-size: 14px; line-height: 17px; padding-bottom: 0; } .progress-container .horizontal.img-banner .progress-item .date { border-bottom: none; color: #666666; font-size: 14px; line-height: 17px; padding-bottom: 0; } .progress-container .horizontal.img-banner .img-circle { border: 1px solid #eeeeee; border-radius: 50%; padding: 6px; height: 32px; width: 32px; position: relative; left: -16px; background: #ffffff; } .progress-container .horizontal.img-banner .timeline-btn { border: 1px solid #00bac6; background: transparent; position: relative; left: 10%; width: 65vw; padding: 7px 8px; } .progress-container .horizontal.img-banner .text-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .progress-container .horizontal .progress-item { display: block; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 12px; padding-left: 0; padding-right: 15px; padding-top: 2%; max-width: 140px; min-width: 140px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; border-top: 2px solid #dddddd; } .progress-container .horizontal .progress-item .progressText { color: #3c3c3c; font-size: 14px; line-height: 16px; } .progress-container .horizontal .progress-item .date { color: #999999; font-size: 12px; line-height: 14px; } .progress-container .horizontal .progress-item:last-child { border-top: 2px solid transparent; padding-bottom: 0; } .progress-container .horizontal .progress-item:last-child .progressText, .progress-container .horizontal .progress-item:last-child .border-bottom { border: none; } .progress-container .horizontal .progress-item:before { left: 0; height: 20px; width: 20px; top: -10px; border: 1px solid #dddddd; background: #ffffff; } .progress-container .horizontal .progress-item.active { border-top: 2px solid #00bac6; } .progress-container .horizontal .progress-item.active:before { background: #00bac6; height: 20px; width: 20px; left: 0; } .progress-container .horizontal .progress-item.active:last-child { border-top: 2px solid transparent; } .progress-container .horizontal .progress-item.active .progressText { color: #3c3c3c; font-weight: 500; margin-top: 12%; margin-left: 0; } .progress-container .horizontal .progress-item.active .date { color: #999999; font-weight: 500; margin-top: 0; margin-left: 0; } .progress-container .horizontal .progress-item.active:after { left: 7px; top: -6px; } .progress-container .horizontal .progress-item.negative { border-top: 2px solid #f18132; } .progress-container .horizontal .progress-item.negative:before { background: #f18132; height: 20px; width: 20px; left: 0; border: 1px solid transparent; } .progress-container .horizontal .progress-item.negative:last-child { border-top: 2px solid transparent; } .progress-container .horizontal .progress-item.negative .progressText { color: #3c3c3c; font-weight: 500; margin-top: 12%; margin-left: 0; } .progress-container .horizontal .progress-item.negative .date { color: #999999; font-weight: 500; margin-top: 0; margin-left: 0; } .progress-container .horizontal .progress-item.negative:after { left: 4px; top: -15px; } .progress-container .horizontal .progress-item.current:before { background: #00bac6; height: 20px; width: 20px; left: 0; } .progress-container .horizontal .progress-item.current .progressText { color: #3c3c3c; font-weight: 500; margin-top: 12%; margin-left: 0; } .progress-container .horizontal .progress-item.current .date { color: #999999; font-weight: 500; margin-top: 0; margin-left: 0; } .progress-container .horizontal .progress-item.current:after { left: 7px; top: -6px; } .progress-container .horizontal .progressText { margin-top: 12%; margin-left: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-bottom: 12px; } .progress-container .horizontal .text-center { text-align: left; display: block; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .progress-container .flex-direction-column { position: inherit !important; position: relative; } .progress-container .flex-direction-column.img-banner .progress-item { left: 1%; width: 96%; border-left: 1px solid #dddddd; padding-left: 0; } .progress-container .flex-direction-column.img-banner .progress-item:before { display: none; } .progress-container .flex-direction-column.img-banner .progress-item .progressText { border-bottom: none; color: #666666; font-size: 14px; line-height: 17px; padding-bottom: 0; } .progress-container .flex-direction-column.img-banner .img-circle { border: 1px solid #eeeeee; border-radius: 50%; padding: 6px; height: 32px; width: 32px; position: relative; left: -16px; background: #ffffff; } .progress-container .flex-direction-column.img-banner .timeline-btn { border: 1px solid #18cfa8; background: transparent; position: relative; left: 10%; width: 65vw; padding: 7px 8px; } .progress-container .flex-direction-column.img-banner .text-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .progress-container .flex-direction-column .progress-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 12px; padding-left: 16px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; border-left: 2px solid #dddddd; } .progress-container .flex-direction-column .progress-item .progressText { color: #999999; font-size: 12px; line-height: 14px; } .progress-container .flex-direction-column .progress-item:last-child { border-left: 2px solid transparent; padding-bottom: 0; } .progress-container .flex-direction-column .progress-item:last-child .progressText, .progress-container .flex-direction-column .progress-item:last-child .border-bottom { border: none; } .progress-container .flex-direction-column .progress-item:before { left: -6px; height: 11px; width: 11px; top: 0; border: 1px solid #dddddd; background: #ffffff; } .progress-container .flex-direction-column .progress-item.active { border-left: 2px solid #18cfa8; } .progress-container .flex-direction-column .progress-item.active:before { height: 14px; width: 14px; left: -8px; } .progress-container .flex-direction-column .progress-item.active:last-child { border-left: 2px solid transparent; } .progress-container .flex-direction-column .progress-item.active .progressText { color: #333333; font-weight: 700; } .progress-container .flex-direction-column .progress-item.active:after { left: -3px; top: 3px; } .progress-container .flex-direction-column .progress-item.negative { border-left: 2px solid #f18132; } .progress-container .flex-direction-column .progress-item.negative:before { background: #f18132; height: 14px; width: 14px; left: -8px; border: 1px solid transparent; } .progress-container .flex-direction-column .progress-item.negative:last-child { border-left: 2px solid transparent; } .progress-container .flex-direction-column .progress-item.negative .progressText { color: #333333; font-weight: 700; } .progress-container .flex-direction-column .progress-item.negative:after { left: -5px; top: -3px; } .progress-container .flex-direction-column .progress-item.current:before { background: #18cfa8; height: 14px; width: 14px; left: -8px; } .progress-container .flex-direction-column .progress-item.current .progressText { color: #333333; font-weight: 700; } .progress-container .flex-direction-column .progress-item.current:after { left: -2px; top: 2px; } .progress-container .flex-direction-column .progressText { border-bottom: 1px solid #eeeeee; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-bottom: 12px; } .progress-container .flex-direction-column .border-bottom { border-bottom: 1px solid #eeeeee; } .progress-container .flex-direction-column .text-center { text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .progress-container ul .progress-item { list-style: none; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .progress-container ul .progress-item .progress-circle:before { height: 8px; width: 8px; left: -1px; top: -1px; background: #f5f5f5; } .progress-container ul .progress-item.active:before { background: #18cfa8; border: 1px solid transparent; } .progress-container ul .progress-item.active .progress-circle:before { background: #18cfa8; } .progress-container ul .progress-item.active .progressbar:before { content: ''; width: 100%; position: absolute; background: #18cfa8; height: 2px; top: -2px; left: 12px; } .progress-container ul .progress-item.current .progressbar:after { content: ''; width: 10px; position: absolute; top: -2px; left: 28%; border-top: 2px dotted #333333; height: 2px; } .view-label { border: 1px solid #00bac6; border-radius: 4px; display: inline-block; padding: 7px 10px; } .view-label.topaz { background: #00bac6; } .margin-auto { margin: auto; } .cta-buttons .exchange-btn { background: transparent; border: 1px solid #ddd; color: #ddd; padding: 10px; letter-spacing: 1.16px; } .cta-buttons .exchange-btn-disabled { background: #00bac6; color: #fff; } .cta-buttons .item-returned { background: #00bac6; color: #fff; border: none; } .cta-buttons .order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .cta-buttons .order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .addInfo { border-top: 1px solid #DDDDDD; } .sc-code-border { border: 2px dashed #DDDDDD; } .lkcash-amount { border: 1px solid #329c92; padding: 2px 3px 1px 3px; background: rgba(24, 207, 168, .1); } .border-none { border: none; } .border-dull_orange { border: 2px dashed #DDDDDD; } .margin-right25 { margin-right: 25%; } .multi-refund-sc { padding: 12px 16px; border-radius: 4px; } .background-f5 { background-color: #f5f5f5; } .cancel-popup .popup-wrapper { max-width: 310px; width: 100%; border-radius: 2px; } .cancel-popup .new-btn { letter-spacing: .5px; } .cancel-popup .dont-cancel { border: 1px solid #18cfa8; } .cancel-popup .action-btn span { width: 48%; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; } .exchange-timeline { overflow: scroll; padding-top: 10px; padding-left: 10px; margin: 0; width: 100%; margin-left: 0px !important; } .change-address { color: #3db0a6; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; } .return-address { color: #27394e; font-weight: 700; } .customer-address { padding-right: 12px; color: #424242; } .return-btn { padding: 6px 8px; } .color-lightgrey { color: rgba(60, 60, 60, .54); } .theme-button { background-color: #00b9c6; color: #fff; } .popup-container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 200; } .popup-wrapper { position: absolute; left: 50%; top: 50%; z-index: 201; pointer-events: auto; transform: translate(-50%, 1000%); -webkit-transform: translate(-50%, 1000%); min-height: 130px; min-width: 240px; } .popup-wrapper.popup-wrapper-in { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 101; } .isPdValue-del-popup { width: 90%; height: 240px; } .pfu-popup-visit-store { width: 360px; height: 245px; } .store-address-pfu { width: 360px; height: 65%; } .pfu-popup-position { top: -245px; } .store-address-pfu-position { top: -38px; } .search-area .sa-img { height: 40px; width: 40px; } .search-area .google-input-wrapper .icon-ic_gps_fixed, .search-area .google-input-wrapper .icon-spinner.animate-spin { top: 10px !important; right: 10px !important; } .voucher-detail { letter-spacing: 1px; } .voucher-detail .modal-content { width: 66.7%; margin: 0 auto; } .voucher-detail .modal-body { padding: 0px; } .voucher-detail .table { position: static; left: auto; margin: 0; height: auto; padding: 0; } .voucher-detail .table tr:hover { background-color: #f5f5f5; } .voucher-detail .table tr td { padding: 15px !important; margin: 0; line-height: normal; } .edit-neft form > div { width: 50%; margin-top: 15px; } .dittoProfiles_banner img { width: 100%; } .dittoProfiles_select { padding: 2px 0 10px 0; position: relative; } .dittoProfiles_select_info { -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; position: absolute; top: 10px; background: #fff; padding: 0 5px; } .dittoProfiles_list { margin: 0; padding: 0; width: 100%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .dittoProfiles_list_item { -ms-flex-preferred-size: 30%; flex-basis: 30%; margin: 0 1% 35px 1%; border: 1px solid #ccc; background: #efefef; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; -webkit-box-shadow: 0px 5px 5px #ccc; box-shadow: 0px 5px 5px #ccc; text-align: center; -webkit-transition: 0.8s all; transition: 0.8s all; -webkit-transform: scale(1); transform: scale(1); min-height: 250px; overflow: hidden; } .dittoProfiles_list_item.remove-ditto { width: 0; height: 0; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: scale(0); transform: scale(0); } .dittoProfiles_list_item.remove-ditto div { display: none; } .dittoProfiles_list_item img { max-width: 100% !important; } .dittoProfiles_list_item_nav { display: none; position: absolute; bottom: 0; z-index: 2; text-align: center; width: 92%; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; } .dittoProfiles_list_item_nav span { background: #f18132; border: 1px solid #ef721a; padding: 5px 10px; margin: 0 5px; border-radius: 5px; display: inline-block; cursor: pointer; } .dittoProfiles_list_item_nav span.default { cursor: default; } .dittoProfiles_list_item:hover .dittoProfiles_list_item_nav { display: block; bottom: 70px; } .dittoProfiles_list_item h4 { line-height: normal; padding: 0; margin: 10px 0 5px 0; font-size: 16px; text-transform: capitalize; } .dittoProfiles_list_item_defaultDitto { position: absolute; top: 20px; right: 20px; z-index: 2; width: 30px; height: 30px; } .dittoProfiles_list_item_created { font-size: 12px; display: block; padding-top: 5px; color: green; letter-spacing: 1px; } .dittoProfiles_list_item_editName { background-image: none; cursor: pointer; color: #f18132; } .dittoProfiles_list_item_cancelEditName { color: #ccc; cursor: pointer; } .dittoProfiles_list_item_saveNameBox { background: #efefef; position: absolute; bottom: 30px; width: 92%; overflow: hidden; } .dittoProfiles_list_item_saveNameBox_save { border: 0; border-bottom: 1px dashed #000; padding: 3px 5px; margin: 0; background: none; text-transform: capitalize; } .dittoProfiles_list_item_saveNameBox_ok { color: #f18132; cursor: pointer; } .dittoProfiles_list_item i { background-image: none; } .dittoProfiles_deleteDlg { width: 40%; } .dittoProfiles_deleteDlg_footer { padding: 0 10px; text-align: right; margin-top: 25px; } .dittoProfiles_deleteDlg_footer button { margin-left: 10px; } .saved-card-list .user-cards-image { border: 1px solid #ccc; border-radius: 5px; } .saved-card-list .user-card-image { height: 80px; line-height: 70px; text-align: center; } .saved-card-list .user-card-expiry-date { color: #999999; font-family: 'FuturaStd-Book'; } .saved-card-list .user-saved-card-type { font-weight: 500; color: #333333; font-family: 'FuturaStd-Book'; } .saved-card-list .user-saved-card-number { font-weight: 500; color: #333333; font-family: 'FuturaStd-Book'; } .saved-card-list .user-card-expired { color: #EF4E74; font-family: 'FuturaStd-Book'; } .saved-card-list .user-expired-cards { background: #efefef; border: #dfdfdf; } .saved-card-list .user-card-image .save-payment-card-image { background: url(//static.lenskart.com/media/desktop/img/savedcardimage.png) no-repeat scroll -175px -4px transparent; height: 29px; width: 43px; left: 15%; top: 20%; position: absolute; } .saved-card-list .user-card-image .save-payment-card-image.amex { background-position-x: -130px !important; } .saved-card-list .user-card-image .save-payment-card-image.visa { background-position-x: -45px !important; } .saved-card-list .user-card-image .save-payment-card-image.mastercard { background-position-x: -2px !important; } .saved-card-list .user-card-image .save-payment-card-image.maestro { background-position-x: -88px !important; } .allSavedCards { font-family: 'FuturaStd-Book'; } /* * Define scss variables here. */ .notificationBlock { border-bottom: 1px solid #E8E8E8; padding: 10px; margin-right: 15%; } .notificationBlock .notification-logo { width: 44px; margin-right: 3px; } .notificationBlock .whatsapp-logo-login { width: 25px; margin-left: 4px; } .notificationBlock .switch { padding-left: 5px; } .notificationBlock .toggleswitch { border: 1px solid white; border-color: white; background: #8e9bad; padding: 0; position: relative; height: 20px; width: 40px; border-radius: 20px; -webkit-box-sizing: content-box; box-sizing: content-box; } .notificationBlock .toggleswitch > .handle { top: 4px; } .notificationBlock .toggleswitch > .handle { position: absolute; top: 2.5px; left: 2.5px; width: 15px; height: 15px; border-radius: 15px; background: #fff; -webkit-transition: left 0.25s; transition: left 0.25s; } .notificationBlock .toggleswitch.active { -webkit-transition: background-color 0.25s; transition: background-color 0.25s; background-color: #45C476; } .notificationBlock .toggleswitch.active > .handle { left: 22.5px; -webkit-transition: left 0.25s; transition: left 0.25s; } .notificationBlock .justify-content-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .btn-container-non-fixed button { background-color: #5FB1A9; width: 20%; color: #ffffff; height: 46px; border: none; letter-spacing: 0.6px; cursor: pointer; -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px rgba(0, 0, 0, .14), 0px 1px 5px rgba(0, 0, 0, .12); box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px rgba(0, 0, 0, .14), 0px 1px 5px rgba(0, 0, 0, .12); border-radius: 4px; padding: 8px 22px; margin-top: 5%; margin-left: 65%; } .od-my-account { width: 100%; } .od-my-account .od-form-ud__field { width: 100% !important; } .od-my-account .od-form-header { margin-left: 0; margin-right: 0; } .my-account-wrapper { height: 100%; gap: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1920px; margin: 0 auto; padding: 40px 100px; background-color: #F7F7F7; } .my-account-wrapper .my-ac-list { margin: 0; padding: 0; min-width: 360px; } .my-account-wrapper .my-ac-list li { margin: 0; padding: 0; display: block; cursor: pointer; position: relative; } .my-account-wrapper .my-ac-list li a { font-size: 16px; font-family: 'NeuzeitGroReg', sans-serif; letter-spacing: -0.02em; text-shadow: none; -webkit-text-decoration-line: none; text-decoration-line: none; color: #000000; padding: 16px 33px; display: block; background-color: #FFFFFF; line-height: normal; } .my-account-wrapper .my-ac-list li a.active { background: #546073; color: #F7F7F7; font-family: 'Founders Grotesk', sans-serif; letter-spacing: -0.02em; } .my-account-wrapper .my-ac-list li a.active:after { content: url(/assets/svg/od-arrow-right.svg); position: absolute; top: 50%; right: 33px; margin: -10px 0 0; } .my-account-wrapper .my-ac-list li a:hover { background: #546073; color: #F7F7F7; } .my-account-wrapper .my-ac-list li.ditto-nav-item a { background-image: url("https://static.lenskart.com/media/desktop/img/icon-my-ditto.png"); background-repeat: no-repeat; background-position: right 15px center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .my-account-wrapper .dittoProfiles_list { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .edit-acc-info__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .edit-acc-info__title { font-size: 24px; line-height: 24px; color: #000000; } .edit-acc-info__form { margin-top: 25px; } .edit-acc-info__form__fields { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; } .edit-acc-info__form__fields label { font-weight: normal; font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .edit-acc-info__form__fields__main { width: 49%; } .edit-acc-info__form__fields__main.error { font-size: 14px; line-height: 24px; color: #a94442; } .edit-acc-info__form__fields__main.error label { color: #a94442; } .edit-acc-info__form__fields__passwords { width: 100%; } .edit-acc-info__form__fields__passwords.error { width: 100%; font-size: 14px; line-height: 24px; color: #a94442; } .edit-acc-info__form__fields__passwords .edit-acc-info__inputs { margin-top: 8px; } .edit-acc-info__form__checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 27px; margin: 29px 3px 0 0; } .edit-acc-info__form__checkbox span { color: #000000; font-size: 14px; line-height: 24px; } .edit-acc-info__form__checkbox .od-checkbox { width: 16px; height: 16px; border-color: #000000; border: 2px solid #000000; cursor: pointer; } .edit-acc-info__form__checkbox .od-checkbox-checked { background: url(/assets/svg/od-black-checkbox.svg); width: 16px; height: 16px; } .edit-acc-info__form input::-webkit-input-placeholder { color: #000000; } .edit-acc-info__form input::-moz-placeholder { color: #000000; } .edit-acc-info__form input::-ms-input-placeholder { color: #000000; } .edit-acc-info__form input::placeholder { color: #000000; } .edit-acc-info__inputs { display: block; width: 100%; height: 56px; border: 1px solid #E2E2EE; background-color: #FFFFFF; color: #000000; font-size: 14px; line-height: 24px; padding: 16px 14px; } input.edit-acc-info__inputs:-moz-read-only { background-color: #f7f7f7; } input.edit-acc-info__inputs:read-only { background-color: #f7f7f7; } .od-customer-delete-account { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100vw; height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; bottom: 0; left: 0; background: rgba(0, 0, 0, .3); } .od-customer-delete-account__toggler { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 8px 10px; border: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; color: #ED194C; font-size: 14px; font-style: normal; font-weight: 600; line-height: 24px; letter-spacing: -0.28px; text-transform: capitalize; background: transparent; outline: none; } .od-customer-delete-account__content { width: 575px; padding: 24px; border-radius: 10px; background: #ffffff; } .od-customer-delete-account__title { margin-bottom: 12px; color: #444; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.4px; } .od-customer-delete-account__disclaimer { margin-bottom: 24px; color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.32px; } .od-customer-delete-account__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 36px; } .od-customer-delete-account__cancel { display: -webkit-box; display: -ms-flexbox; display: flex; width: 128px; padding: 5px 16px; border: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 25px; color: #FFF; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; text-transform: capitalize; background: #546073; outline: none; } .od-customer-delete-account__confirm { padding: 0; border: none; color: #546073; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; text-transform: capitalize; background-color: transparent; outline: none; } .orders-list { padding-top: 1px; } .orders-list .listing-spinner { min-height: 150px; background: url(//static.lenskart.com/media/owndays/mobile/img/od-loaders/loader-no-bg.gif) no-repeat center; background-size: contain !important; background-color: #ffffff; background-position: 50%; border-radius: 4px; } .orders-list .message-display { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 50%; } .orders-list .toggle-style { background-color: white; padding: 8px 0; } .orders-list .toggle-style .whatsapp-logo { margin-right: 10px; width: 44px; height: 44px; } .orders-list .toggle-style .switch { margin-left: 10px; } .orders-list .toggle-style > span { font-size: 14px; font-weight: 400; } .od-order-wrapper { width: 100%; margin-top: 32px; } .od-pay-now { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; margin-bottom: 12px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; background-color: #fff; } .od-pay-now__title { color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; } .od-pay-now__subtitle { color: rgba(68, 68, 68, .7); font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.24px; } .od-pay-now__button { padding: 12px 20px; color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 16px; letter-spacing: -0.32px; text-decoration: none; background-color: #546073; } .od-pay-now__button:hover { color: #FFF; text-decoration: none; } .myOrder-showUploadedPower .modal-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .myOrder-showUploadedPower .close { position: absolute; right: -16px; top: -16px; background: #fff; border: 2px solid #535c60; width: 40px; height: 40px; border-radius: 50%; opacity: 1; font-size: 26px; margin-top: -2px; cursor: pointer; } .only-pd-modal-wrapper .modal { overflow-y: auto; } .myOrder-powerUpload .modal-body { padding: 0; } .myOrder-powerUpload .loader, .myOrder-powerUpload .loader_overlay { position: absolute; } .myOrder-powerUpload .modal-content { border: none; -webkit-box-shadow: none; box-shadow: none; padding: 20px; background-color: #f3f8fa; } .myOrder-powerUpload .frame-section { float: left; width: 30%; } .myOrder-powerUpload .frame-section img { width: 100%; } .myOrder-powerUpload .upload-modal { display: inline-block; } .myOrder-powerUpload .popup-body { margin-top: 20px; background: white; padding: 20px; border-radius: 8px; border: 1px solid #ebf0f2; min-height: 200px; position: relative; } .myOrder-powerUpload .popup-body.poupbody-overlay { max-height: 370px; overflow: auto; } .myOrder-powerUpload .popup-body p { text-align: center; font-size: 16px; line-height: 24px; font-family: FuturaStd-Book, sans-serif; letter-spacing: 1px; padding-bottom: 10px; } .myOrder-powerUpload .popup-body.upload-body { display: table; width: 100%; } .myOrder-powerUpload .popup-body .success-icon { background-image: url(//static.lenskart.com/media/wysiwyg/sccess/sprite-10.png); margin: 15px auto; } .myOrder-powerUpload .popup-body .success-icon.call-otp { background-position: -928px -42px; width: 61px; height: 51px; float: left; background-color: #f3f8fa; padding: 5px 20px; margin: 0 auto; border-right: 1px solid #d9dedf; } .myOrder-powerUpload .popup-body .success-icon.authenticated { width: 60px; height: 60px; background-position: -1001px -40px; } .myOrder-powerUpload .submit-eye-power, .myOrder-powerUpload .submit-btn { margin: 0 auto; display: block; margin-top: 20px; background: #1cbbb4; padding: 15px 30px 11px; border-radius: 5px; font-size: 16px; font-family: FuturaStd-Heavy, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; line-height: 20px; color: #fff; text-decoration: none; -webkit-box-shadow: 0 3px 0 #19a8a2; box-shadow: 0 3px 0 #19a8a2; border-color: transparent; } .myOrder-powerUpload .submit-eye-power:disabled, .myOrder-powerUpload .submit-btn:disabled { background: #d8d8d8; -webkit-box-shadow: 0 1px 0 #cecece; box-shadow: 0 1px 0 #cecece; } .myOrder-powerUpload .submit-eye-power:active, .myOrder-powerUpload .submit-eye-power:hover, .myOrder-powerUpload .submit-eye-power:visited, .myOrder-powerUpload .submit-btn:active, .myOrder-powerUpload .submit-btn:hover, .myOrder-powerUpload .submit-btn:visited { color: #fff; text-decoration: none; } .myOrder-powerUpload .submit-eye-power.saved-btn, .myOrder-powerUpload .submit-btn.saved-btn { margin: 0; padding: 7px 0; width: 88%; } .myOrder-powerUpload .support-email { font-size: 16px; } .infoContainer { border: 1px solid #d8d8d8; padding: 20px; border-radius: 5px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .infoContainer .message { -ms-flex-preferred-size: 78%; flex-basis: 78%; } .infoContainer .message .title { color: #309b92; } .infoContainer .appBtns { margin-left: 40px; -ms-flex-preferred-size: 22%; flex-basis: 22%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .infoContainer .appBtns img { width: 6vw; } .order-price .net-amount { border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; } .bottom-sheet-container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 200; } .bottom-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 201; pointer-events: none; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition-duration: .4s; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); transition-duration: .4s; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); } .bottom-sheet.bottom-sheet-in { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: auto; z-index: 101; } .top-border { border-radius: 12px 12px 0px 0px; } .scroll { max-height: 400px; overflow-y: scroll; } .six-over-six-height { height: 100vh; } .border-radius16 { border-radius: 16px 16px 0 0; } .height-expand { height: 100%; } /* lot of things that can be used from common*/ .carousel { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; position: relative; width: 100%; } .carousel .carousel-slide-container, .carousel .carousel-track { position: relative; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel .carousel-slide-container { overflow: hidden; margin: 0; padding: 0; } .carousel .carousel-track { display: -webkit-box; display: -ms-flexbox; display: flex; } .carousel .carousel-slide img { width: 100%; max-width: 100vw; } .carousel .carousel-next, .carousel .carousel-prev { position: absolute; display: block; height: 100%; width: 40px; cursor: pointer; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0; border: none; z-index: 1; } .carousel .carousel-next, .carousel .carousel-next:focus, .carousel .carousel-next:hover, .carousel .carousel-prev, .carousel .carousel-prev:focus, .carousel .carousel-prev:hover { background: transparent; color: transparent; outline: none; } .carousel .carousel-prev { left: 0; } .carousel .carousel-prev:before { content: "\27E8"; margin-left: 5px; color: #9e9e9e; opacity: 1; font-size: 40px; } .carousel .carousel-next { right: 0; } .carousel .carousel-next:before { content: "\27E9"; margin-right: 5px; color: #9e9e9e; opacity: 1; font-size: 40px; } .carousel .nav-dots-container { bottom: 30px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .carousel .nav-dot { height: 10px; width: 10px; margin: 0 5px; background: #8e949a; border-radius: 50%; -webkit-transition: background-color 0.6s ease; transition: background-color 0.6s ease; } .carousel .active { background-color: #000000; } .carousel .dot-container { width: 100%; position: absolute; bottom: 11vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; padding: 0 20px; z-index: 1; } .carousel .dot-container .dot-item { width: 8px; height: 8px; background: #FFFFFF; border: 0.5px solid #A2A2B8; border-radius: 99px; } .isPfu-container { display: contents; width: 358px; height: 96vh; } .pfu-carousel-prev { margin-left: 4px; margin-top: -4px; } /* * Define scss variables here. */ .power-table-block { width: 95%; overflow: hidden; max-height: 100vh; -webkit-transition: max-height 300ms ease-in-out; transition: max-height 300ms ease-in-out; border: 1px solid #eee; } .power-table-block .power-item > div { line-height: 25px; letter-spacing: 0.5px; } .power-table-block .power-item_msite > div { line-height: 20px; letter-spacing: 0.1px; } .power-table-block .display-grid { grid-template-columns: 100%; } .power-table-block .name-strip { background: #eee; margin-left: -15px; margin-right: -15px; } .power-table-block.shadow:not(:empty) { -webkit-box-shadow: 0px 1px 2px 1px #efefef; box-shadow: 0px 1px 2px 1px #efefef; } .power-table-block.desktop { border: 1px solid #ddd; border-top: none; width: calc(100% - 30px); } .power-table-block .accordion-group-header .power-accordion-title:before { content: "Show Power"; color: #00bac6; margin-right: 5px; font-size: 12px; } .power-table-block .accordion-group-header .power-accordion-title .icon { line-height: 1; } .power-table-block .accordion-group-header .power-accordion-title .icon:before { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .power-table-block .accordion-group-header.expanded .power-accordion-title:before { content: "Hide Power"; } .power-table-block .accordion-group-header.expanded .power-accordion-title .icon:before { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .padding_0_15 { padding: 0 15px; } .padding_0_7 { padding: 0 7px; } .mr-l15 { margin-left: 15px; } .border-top_grey { border-top: 1px solid lightgrey; } .new-style { font-family: "LenskartSans-Regular"; font-weight: 400; color: #000042; margin-left: 0 !important; } .table-new-style-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .table-new-style-container .table-new-style { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; padding: 5px 10px; } .table-new-style-container .col0 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 15px; } .table-new-style-container .col0 .left-text, .table-new-style-container .col0 .right-text { width: 10% !important; } .table-new-style-container .new-col1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: visible; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; gap: 5px; } .table-new-style-container .new-col1 .col1-sub { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .new-header-container { margin: 10px 0; } .new-header-container .new-header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 12px; line-height: 18px; letter-spacing: -0.02em; color: #000042; font-style: normal; } .new-header-container .new-header-content .header-text-primary { font-family: "LenskartSans-Regular"; font-weight: 400; } .new-header-container .new-header-content .header-text-secondary { font-family: "LenskartSans-Bold"; font-weight: 700; text-decoration: underline; } .new-header-container .new-header-content .header-text-fix { font-family: "LenskartSans-Regular"; font-weight: 400; font-size: 10px; line-height: 14px; color: #333368; } .new-header-container .new-header-content .icon { border: solid #000042; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; margin-left: 5px; } .new-header-container .new-header-content .arrow-down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .new-header-container .new-header-content .arrow-up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .cartView-body-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; background: #ffffff; border: 1px solid #e2e2ee; border-radius: 8px; font-family: "LenskartSans-Bold"; font-style: normal; font-weight: 700; font-size: 12px; line-height: 18px; letter-spacing: -0.02em; color: #000042; } .cartView-body-container .cart-view-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; background: #f5f5ff; padding: 12px; text-transform: uppercase; } .cartView-body-container .cart-view-table { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 12px; } .cartView-body-container .cart-view-table .table-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .cartView-body-container .cart-view-table .table-row .table-row-item { min-width: 30px; text-align: center; } .power-status-message { background-color: #eee; width: 95%; } .power-status-message .status-icon { width: 30px; height: 30px; } .power-status-message .status-icon .icon { width: 30px; height: 30px; border-radius: 50%; } .power-status-message.desktop { width: calc(100% - 30px); } .power-status-message__view-details { color: #444444; } .width_100 { width: 100%; } .padding_0_8 { padding: 0px 8px; } .new-style-details { color: #66668E; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; font-family: 'LenskartSans-Regular'; text-transform: capitalize; } .cartView-msg-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cartView-msg-container .cartView-primary-msg { font-style: normal; font-size: 12px; line-height: 20px; letter-spacing: -0.02em; color: #000042; } .cartView-msg-container .cartView-primary-msg .cartView-basicMsg { font-family: 'LenskartSans-Regular'; font-weight: 400; } .cartView-msg-container .cartView-primary-msg .cartView-moreInfo { font-family: 'LenskartSans-Bold'; font-weight: 700; text-decoration: underline; cursor: pointer; margin-left: 10px; } .cartView-msg-container .cartView-secondary-msg { font-family: 'LenskartSans-Regular'; font-style: normal; font-weight: 400; font-size: 10px; line-height: 14px; text-align: right; letter-spacing: -0.02em; color: #333368; } .border-top { border-top: 1px solid #d8d8d8; } .bottom-sheet .buy-with-call { margin: 0 -15px; } .btn-need-help .pd-t18 { padding-top: 18px; } /* * Define scss variables here. */ .power-submit-options .icon-question-circle { width: 41px; height: 41px; border-radius: 50%; text-align: center; font-size: 41px; border: 1px solid; color: #ffffff; background: #358d84; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .power-submit-options .icon-question-circle:before { content: "?"; font-family: 'FontAwesome'; } @charset "UTF-8"; /* * Define scss variables here. */ .popover { position: absolute; top: 100%; left: 0; z-index: 5; padding: 1px; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); } .popover-arrow { z-index: 5; position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 11px; } .popover-arrow.bottom { border-bottom-color: rgba(0, 0, 0, .25); } .popover-arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover-arrow:after { content: ""; border-width: 10px; } .popover-arrow.bottom:after { border-bottom-color: white; } .enter-my-power-manual .power-type { grid-template-columns: 3fr 2fr 2fr; grid-gap: 4px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .enter-my-power-manual .power-type.one-eye { grid-template-columns: 3fr 4fr; } .enter-my-power-manual .power-type select { width: 100%; max-width: 110px; } .enter-my-power-manual .power-type select.error { border: 1px solid red; } .enter-my-power-manual .power-type .icon-question-circle { width: 18px; height: 18px; border-radius: 50%; text-align: center; font-size: 15px; border: 1px solid; color: #ffffff; background: #18cfa8; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: bold; } .enter-my-power-manual .power-type .icon-question-circle:before { content: "?"; font-family: 'FontAwesome'; } .enter-my-power-manual .power-type .icon-close { width: 18px; height: 18px; border-radius: 50%; text-align: center; font-size: 15px; border: 1px solid; color: #ffffff; background: #27394e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: bold; position: absolute; top: 17px; z-index: 6; } .enter-my-power-manual .power-type .icon-close:before { content: "✕"; font-family: 'FontAwesome'; } .enter-my-power-manual .power-type .popover-close-axis, .enter-my-power-manual .power-type .popover-close-cyl { left: 218px; } .enter-my-power-manual .power-type .popover-close-sph { left: 222px; } .enter-my-power-manual .power-type .popover { min-width: 275px; padding: 10px; top: 23px; text-align: justify; } .enter-my-power-manual .power-type .popover-arrow.bottom { top: 5px; left: -4px; border-bottom-color: rgba(0, 0, 0, .25); } .enter-my-power-manual .power-type .popover-arrow.bottom:after { border-bottom-color: #ffffff; left: -10px; top: -9px; } .enter-my-power-manual .power-type .popover-style-sph { left: -38px; } .enter-my-power-manual .power-type .popover-style-cyl, .enter-my-power-manual .power-type .popover-style-axis { left: -41px; } .enter-my-power-manual select { background-color: #ffffff; border-radius: 3px; border: 1px solid #99a0a9; padding: 5px 10px; } .enter-my-power-manual .user-name-input { font-size: 14px; border: none transparent; border-bottom: 1px solid #99a0a9; outline: none; width: 100%; line-height: 20px; } .enter-my-power-manual .user-name-input.error { border-bottom: 1px solid #d54c44; } .enter-my-power-manual .field-power { width: 100%; background-color: #ffffff; border-radius: 3px; border: 1px solid #99a0a9; padding: 5px 10px; } /* * Define scss variables here. */ .saved-powers .user-name { border-bottom: 1px solid #eaeff4; } @charset "UTF-8"; /* * Define scss variables here. */ .dont-know-my-power .circle-right { width: 40px; height: 40px; border-radius: 50%; text-align: center; font-size: 25px; border: 1px solid; color: #ffffff; background: #18cfa8; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .dont-know-my-power .circle-right:before { content: "✔"; font-family: 'FontAwesome'; } .dont-know-my-power button.new-btn { margin: 0; padding: 3px; } /* * Define scss variables here. */ @-webkit-keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } .dropzone, .dropzone * { -webkit-box-sizing: border-box; box-sizing: border-box; } .dropzone { min-height: 150px; border: 2px solid rgba(0, 0, 0, .3); background: white; padding: 20px 20px; } .dropzone.dz-clickable { cursor: pointer; } .dropzone.dz-clickable * { cursor: default; } .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { cursor: pointer; } .dropzone.dz-started .dz-message { display: none; } .dropzone.dz-drag-hover { border-style: solid; } .dropzone.dz-drag-hover .dz-message { opacity: 0.5; } .dropzone .dz-message { text-align: center; margin: 2em 0; } .dropzone .dz-preview { position: relative; display: inline-block; vertical-align: top; margin: 16px; min-height: 100px; } .dropzone .dz-preview:hover { z-index: 1000; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 20px; background: #999; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); background: linear-gradient(to bottom, #eee, #ddd); } .dropzone .dz-preview.dz-file-preview .dz-details { opacity: 1; } .dropzone .dz-preview.dz-image-preview { background: white; } .dropzone .dz-preview.dz-image-preview .dz-details { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .dropzone .dz-preview .dz-remove { font-size: 14px; text-align: center; display: block; cursor: pointer; border: none; } .dropzone .dz-preview .dz-remove:hover { text-decoration: underline; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview .dz-details { z-index: 20; position: absolute; top: 0; left: 0; opacity: 0; font-size: 13px; min-width: 100%; max-width: 100%; padding: 2em 1em; text-align: center; color: rgba(0, 0, 0, .9); line-height: 150%; } .dropzone .dz-preview .dz-details .dz-size { margin-bottom: 1em; font-size: 16px; } .dropzone .dz-preview .dz-details .dz-filename { white-space: nowrap; } .dropzone .dz-preview .dz-details .dz-filename:hover span { border: 1px solid rgba(200, 200, 200, .8); background-color: rgba(255, 255, 255, .8); } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) { overflow: hidden; text-overflow: ellipsis; } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { border: 1px solid transparent; } .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { background-color: rgba(255, 255, 255, .4); padding: 0 0.4em; border-radius: 3px; } .dropzone .dz-preview:hover .dz-image img { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); -webkit-filter: blur(8px); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: blur(8px); } .dropzone .dz-preview .dz-image { border-radius: 20px; overflow: hidden; width: 120px; height: 120px; position: relative; display: block; z-index: 10; } .dropzone .dz-preview .dz-image img { display: block; } .dropzone .dz-preview.dz-success .dz-success-mark { -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { pointer-events: none; opacity: 0; z-index: 500; position: absolute; display: block; top: 50%; left: 50%; margin-left: -27px; margin-top: -27px; } .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { display: block; width: 54px; height: 54px; } .dropzone .dz-preview.dz-processing .dz-progress { opacity: 1; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .dropzone .dz-preview.dz-complete .dz-progress { opacity: 0; -webkit-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } .dropzone .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse 6s ease infinite; animation: pulse 6s ease infinite; } .dropzone .dz-preview .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; position: absolute; height: 16px; left: 50%; top: 50%; margin-top: -8px; width: 80px; margin-left: -40px; background: rgba(255, 255, 255, .9); -webkit-transform: scale(1); border-radius: 8px; overflow: hidden; } .dropzone .dz-preview .dz-progress .dz-upload { background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444)); background: linear-gradient(to bottom, #666, #444); position: absolute; top: 0; left: 0; bottom: 0; width: 0; -webkit-transition: width 300ms ease-in-out; transition: width 300ms ease-in-out; } .dropzone .dz-preview.dz-error .dz-error-message { display: block; } .dropzone .dz-preview.dz-error:hover .dz-error-message { opacity: 1; pointer-events: auto; } .dropzone .dz-preview .dz-error-message { pointer-events: none; z-index: 1000; position: absolute; display: block; display: none; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; border-radius: 8px; font-size: 13px; top: 130px; left: -10px; width: 140px; background: #be2626; background: -webkit-gradient(linear, left top, left bottom, from(#be2626), to(#a92222)); background: linear-gradient(to bottom, #be2626, #a92222); padding: 0.5em 1.2em; color: white; } .dropzone .dz-preview .dz-error-message:after { content: ''; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #be2626; } .upload-power { padding: 40px 16px; } .upload-power .dropzone { text-align: center; border: 1px dashed #27394e; background: #ffffff; } .upload-power .dropzone .dz-preview { margin: auto; margin-left: 13px; margin-bottom: 10px; } .upload-power .dropzone .dz-error-message { display: none !important; } .item-details { grid-template-columns: 42% 58%; } .item-details.grid-col-50 { grid-template-columns: 45% 55%; } .item-details.grid-col-30 { grid-template-columns: 30% 70%; } .item-details.exchange-card { border: 1px solid #e2e2e2; padding-top: 5px; padding-bottom: 5px; margin-bottom: 20px; } .item-details .item-info { position: relative; } .item-details .item-info .product-price { position: absolute; right: 0px; top: 14px; } .item-details .w70 { width: 70%; } .product-expanded { border: 1px solid #eee; } .product-expanded .item-expanded { border-bottom: 1px solid #eee; } .product-expanded .item-expanded:last-child { border-bottom: none; } .google-input-wrapper { border: 1px solid #99a0a9; padding: 6px 8px; } .google-input-wrapper.custom-inputbox { border: none; border-bottom: 1px solid #cccccc; padding: 0; border-radius: 4px; } .google-input-wrapper input { padding-right: 26px; border-bottom: none; line-height: 19px; font-size: 13px; } .google-input-wrapper input:focus { border-bottom: none; } .google-input-wrapper input.gm-err-autocomplete { background-size: 24px 24px; background-repeat: no-repeat; background-position: 94% 0; } .google-input-wrapper .current-location { width: 100%; z-index: 1; border: 1px solid #99a0a9; border-top: none; } .input-desktop { width: 70rem; height: 4rem; font-size: 14px; padding: 5px; } .MuiFormControl-root-box { width: 50vw; margin-left: 20px; margin-top: 10px; font-size: 1.25rem; } .border-bottom-1 { border-bottom: 1px solid !important; } /* * Define scss variables here. */ .search-area .search-box { border: 1px solid #eaeff4; border-radius: 5px; } .search-area .search-result { border: 1px solid #eaeff4; border-radius: 5px; } .search-area .md-radio:not(:first-child) { border-top: 1px solid #e2e2e2; } .search-area .md-radio label { display: -webkit-box; display: -ms-flexbox; display: flex; padding-right: 0px; font-weight: 400 !important; } .search-area .md-radio label:before, .search-area .md-radio label:after { border-color: #999999; } .search-area .md-radio label:before { top: 16px; } .search-area .md-radio label:after { top: 18px; } .change-address { color: #3db0a6; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; } .return-address { color: #27394e; font-weight: 700; } .customer-address { padding-right: 12px; color: #424242; } .return-btn { padding: 6px 8px; } .color-lightgrey { color: rgba(60, 60, 60, .54); } .theme-button { background-color: #00b9c6; color: #fff; } .title { font-size: 14px; letter-spacing: 0.1px; margin-bottom: 15px; } .monthWrapper { background: #979797; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; border-radius: 10px 0px 0px 10px; } .monthText { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); margin-left: 5px; text-transform: uppercase; margin-bottom: 9px; } .slot-notAvailable { color: rgba(60, 60, 60, .26); } .slot-notAvailable-border { border: 1px solid rgba(60, 60, 60, .23); } .scrollable { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; overflow: scroll; -ms-overflow-style: none; scrollbar-width: none; } .scrollable ::-webkit-scrollbar { display: none; } .slotsDate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid rgba(60, 60, 60, .23); border-radius: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px 12px; margin: 5px; min-width: 115px !important; height: 65px; text-align: center; overflow: hidden; } .slotDateSelected { background: #18cfa8; } .slotDateNotSelect { background: #FFF; } .date { opacity: 0.8; font-size: 20px; letter-spacing: 0.15px; } .dateSelected { color: #fff; } .dateNotSelect { color: #3C3C3C; } .todayTomorrow { font-size: 12px; letter-spacing: 0.25px; margin-top: 15px; } .tTSelected { color: #fff; } .tTNotSelect { color: rgba(60, 60, 60, .54); } .slotsTimeWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } .slotTime { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px 12px; margin: 4px; height: 78px; text-align: center; color: #3c3c3c; } .slotTimeselected { background: #18cfa8; border: ""; color: #fff; } .slotTimeNotSelect { background: #FFF; border: 1px solid rgba(60, 60, 60, .23); } .timeWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .time { opacity: 0.8; font-size: 20px; letter-spacing: 0.15px; } .timeselected { color: #fff; } .timeNotSelect { color: #3C3C3C; } .amPmNotSelect { color: rgba(60, 60, 60, .54); } .space-div { margin-left: 5px; margin-right: 5px; } .amPm { font-size: 12px; letter-spacing: 1px; } .fa-user:before { content: "\f007"; font-family: fontAwesome; margin-right: 10px; padding-left: 2px; } .fa-map-marker:before { content: "\f041"; font-family: fontAwesome; padding-left: 3px; margin-right: 10px; } .fa-clock-o:before { content: "\f017"; font-family: fontAwesome; margin-right: 7px; } .fa-calendar-check:before { content: "\f274"; font-family: fontAwesome; margin-right: 6px; } .update-power-container { height: 100vh; overflow-y: auto; } .update-power-container .power-type-header { top: 0; left: 0; width: 100vw; } .update-power-container .cross { right: 15px; z-index: 100; top: 13px; } .tabs-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 40px; margin-bottom: 16px; font-size: 14px; font-weight: 500; } .tabs-wrapper .tab .tab-count { padding: 5px; border-radius: 50%; background: #18cfa8; color: #fff; margin-right: 5px; font-size: 12px; } .tabs-wrapper .disabled { color: rgba(60, 60, 60, .54); } .tabs-wrapper .disabled .tab-count { background: rgba(60, 60, 60, .38); } .tabs-wrapper .tabs-seperator-div { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 10px; margin-right: 10px; } .tabs-wrapper .tabs-seperator-div .seperator { height: 1px; width: 100%; background: #DEDEDE; } .pd-value-header { margin-top: 20px; font-family: 'Roboto'; font-weight: 500; font-size: 13px; line-height: 21.9px; text-align: left; margin-left: 3px; } .pd-value-options { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 10px; } .pd-value-option { background: #fff; height: 82px; width: 109.67px; position: static; border-radius: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } .option-not-select { border: 1px solid rgba(60, 60, 60, .54); color: rgba(60, 60, 60, .54); } .fa-file-image::before { content: '\f1c5'; font-family: 'FontAwesome'; font-size: 22px; } .dont-have-pd-value::before { content: '\f095'; font-family: 'FontAwesome'; font-size: 26px; } .icons-container { font-size: 14px; } .manual-img-icon::before { content: ' \229E'; font-size: 30px; } .option-selected { border: 1px solid #18cfa8; color: #18cfa8; } .pd-value-steps { margin-top: 30px; margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .pd-step { font-family: 'Roboto'; font-weight: 700; font-size: 12px; line-height: 14.06px; font-size: 14px; background: -webkit-linear-gradient(#faa61a, #ed0973); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 3px; border-radius: 2px; width: 60px; } .step-primary-text { font-family: 'Roboto'; font-weight: 700; font-size: 14px; line-height: 20px; } .step2-img { margin-top: 10px; width: 300px; margin-bottom: 10px; border-radius: 14px; height: 226px; } .step-secondary-text { font-family: 'Roboto'; font-weight: 400; color: grey; font-size: 13px; } .pd-value-steps-new { margin-top: 30px; margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .pd-step-new { font-family: 'LenskartSans-Regular'; font-style: normal; font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: -0.02em; color: #000042; text-transform: lowercase; } .pd-step-new::first-letter { text-transform: uppercase; } .step-primary-text-new { font-family: 'Lenskart Sans'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px; text-align: center; letter-spacing: -0.02em; color: #333368; margin-top: 10px; } .step-image-1 { width: 136px; height: 88px; border-radius: 4px; margin-top: 20px; } .step-image-2 { width: 296px; height: 201px; margin-top: 20px; } .step-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pd-upload-btns-new { width: 100vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 16px 32px; position: fixed; bottom: 0; background: #ffffff; -webkit-box-shadow: 0px -4px 20px rgba(0, 0, 66, .1); box-shadow: 0px -4px 20px rgba(0, 0, 66, .1); border-radius: 16px 16px 0px 0px; } .upload-image-btn-new { width: 49%; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px 16px; background: #f5f5ff; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 66, .1); box-shadow: 0px 1px 2px rgba(0, 0, 66, .1); border-radius: 100px; font-family: 'LenskartSans-Regular'; font-style: normal; font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: -0.02em; color: #000042; text-transform: lowercase; display: block; text-align: center; } .upload-image-btn-new:first-letter { text-transform: uppercase; } .upload-option-selected-new { width: 49%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 8px 16px; height: 40px; background: #000042; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 66, .1); box-shadow: 0px 1px 2px rgba(0, 0, 66, .1); border-radius: 100px; font-family: 'LenskartSans-Regular'; font-style: normal; font-weight: 700; font-size: 14px; line-height: 24px; display: flex; align-items: center; letter-spacing: -0.02em; color: #e2e2ee; } .pd-upload-image { position: fixed; background: white; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100vw; margin-left: -14px; bottom: 0px; height: 60px; } .pd-upload-btns { width: 100vw; margin-right: 12px; margin-left: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upload-image-btn { width: 49%; color: #18cfa8; border: 1px solid #18cfa8; border-radius: 4px; padding: 5px; height: 41px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; font-size: 14px; } .upload-continue-btn { text-align: center; width: 90%; margin-left: 15px; margin-right: 15px; border-radius: 4px; font-size: 15px; height: 40px; color: #ffffff; background: #18cfa8; padding-top: 10px; } .upload-continue-container { position: fixed; bottom: 0; background: white; width: 100%; padding: 10px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upload-option-selected { width: 49%; background: #18cfa8; color: white; border: 1px solid #18cfa8; border-radius: 4px; padding: 5px; height: 41px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; } .uploaded-img-container { padding: 4px; } .img-sub-container { margin: 3px; margin-top: 10px; padding: 10px; font-size: 13px; height: 81px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fafafa; border-radius: 4px; } .img-saved-box { width: 100%; height: 37px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px; margin-left: 8px; margin-right: 8px; background: white; border-radius: 4px; border: 1px solid #dedede; } .bottom-sheet-new { height: 100vh; background-color: #fbf9f7; } .step-section { position: relative; } .upload-continue-container-new { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 16px 32px; position: fixed; bottom: 0; background: #ffffff; -webkit-box-shadow: 0px -4px 20px rgba(0, 0, 66, .1); box-shadow: 0px -4px 20px rgba(0, 0, 66, .1); border-radius: 16px 16px 0px 0px; width: 100%; } .upload-continue-container-button-new { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 12px 20px; height: 48px; background: #000042; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 66, .1); box-shadow: 0px 1px 2px rgba(0, 0, 66, .1); border-radius: 100px; width: 100%; } .upload-continue-btn-new { font-family: 'Lenskart Sans'; font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; color: #e2e2ee; } .cancel-popup { margin-top: -6px; font-weight: 300; font-size: 18px; } .delete-btns-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: 20px; margin-right: 20px; margin-top: 10px; } .delete-cancel-button { border: 1px solid #18cfa8; width: 100%; color: #18cfa8; margin-left: 5px; margin-right: 5px; border-radius: 4px; padding: 3px; text-align: center; font-size: 14px; } .delete-btn { border: 1px solid #18cfa8; color: #FFFFFF; background: #18cfa8; width: 100%; margin-left: 5px; margin-right: 5px; border-radius: 4px; padding: 3px; text-align: center; font-size: 14px; } /* * Define scss variables here. */ @-webkit-keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } .dropzone, .dropzone * { -webkit-box-sizing: border-box; box-sizing: border-box; } .dropzone { min-height: 150px; border: 2px solid rgba(0, 0, 0, .3); background: white; padding: 20px 20px; } .dropzone.dz-clickable { cursor: pointer; } .dropzone.dz-clickable * { cursor: default; } .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { cursor: pointer; } .dropzone.dz-started .dz-message { display: none; } .dropzone.dz-drag-hover { border-style: solid; } .dropzone.dz-drag-hover .dz-message { opacity: 0.5; } .dropzone .dz-message { text-align: center; margin: 2em 0; } .dropzone .dz-preview { position: relative; display: inline-block; vertical-align: top; margin: 16px; min-height: 100px; } .dropzone .dz-preview:hover { z-index: 1000; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 20px; background: #999; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); background: linear-gradient(to bottom, #eee, #ddd); } .dropzone .dz-preview.dz-file-preview .dz-details { opacity: 1; } .dropzone .dz-preview.dz-image-preview { background: white; } .dropzone .dz-preview.dz-image-preview .dz-details { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .dropzone .dz-preview .dz-remove { font-size: 14px; text-align: center; display: block; cursor: pointer; border: none; } .dropzone .dz-preview .dz-remove:hover { text-decoration: underline; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview .dz-details { z-index: 20; position: absolute; top: 0; left: 0; opacity: 0; font-size: 13px; min-width: 100%; max-width: 100%; padding: 2em 1em; text-align: center; color: rgba(0, 0, 0, .9); line-height: 150%; } .dropzone .dz-preview .dz-details .dz-size { margin-bottom: 1em; font-size: 16px; } .dropzone .dz-preview .dz-details .dz-filename { white-space: nowrap; } .dropzone .dz-preview .dz-details .dz-filename:hover span { border: 1px solid rgba(200, 200, 200, .8); background-color: rgba(255, 255, 255, .8); } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) { overflow: hidden; text-overflow: ellipsis; } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { border: 1px solid transparent; } .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { background-color: rgba(255, 255, 255, .4); padding: 0 0.4em; border-radius: 3px; } .dropzone .dz-preview:hover .dz-image img { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); -webkit-filter: blur(8px); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: blur(8px); } .dropzone .dz-preview .dz-image { border-radius: 20px; overflow: hidden; width: 120px; height: 120px; position: relative; display: block; z-index: 10; } .dropzone .dz-preview .dz-image img { display: block; } .dropzone .dz-preview.dz-success .dz-success-mark { -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { pointer-events: none; opacity: 0; z-index: 500; position: absolute; display: block; top: 50%; left: 50%; margin-left: -27px; margin-top: -27px; } .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { display: block; width: 54px; height: 54px; } .dropzone .dz-preview.dz-processing .dz-progress { opacity: 1; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .dropzone .dz-preview.dz-complete .dz-progress { opacity: 0; -webkit-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } .dropzone .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse 6s ease infinite; animation: pulse 6s ease infinite; } .dropzone .dz-preview .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; position: absolute; height: 16px; left: 50%; top: 50%; margin-top: -8px; width: 80px; margin-left: -40px; background: rgba(255, 255, 255, .9); -webkit-transform: scale(1); border-radius: 8px; overflow: hidden; } .dropzone .dz-preview .dz-progress .dz-upload { background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444)); background: linear-gradient(to bottom, #666, #444); position: absolute; top: 0; left: 0; bottom: 0; width: 0; -webkit-transition: width 300ms ease-in-out; transition: width 300ms ease-in-out; } .dropzone .dz-preview.dz-error .dz-error-message { display: block; } .dropzone .dz-preview.dz-error:hover .dz-error-message { opacity: 1; pointer-events: auto; } .dropzone .dz-preview .dz-error-message { pointer-events: none; z-index: 1000; position: absolute; display: block; display: none; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; border-radius: 8px; font-size: 13px; top: 130px; left: -10px; width: 140px; background: #be2626; background: -webkit-gradient(linear, left top, left bottom, from(#be2626), to(#a92222)); background: linear-gradient(to bottom, #be2626, #a92222); padding: 0.5em 1.2em; color: white; } .dropzone .dz-preview .dz-error-message:after { content: ''; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #be2626; } .upload-header-content { font-weight: 400; font-size: 20px; line-height: 32px; letter-spacing: -0.02em; color: #000042; font-family: 'LenskartSerif-Book'; font-style: normal; margin-bottom: 20px; } .upload-content { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #333368; padding-left: 23px; font-family: 'LenskartSans-Regular'; font-style: normal; } .upload-content li { margin-bottom: 15px; } .upload-button { padding: 8px 16px; height: 40px; background: rgba(0, 0, 66, .01); border: 1px solid #737397; border-radius: 100px; margin-top: 20px; font-family: 'LenskartSans-Regular'; font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: #000042; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .upload-back-icon { width: 44px; height: 32px; background: #FFFFFF; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upload-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } .upload-help { font-weight: 700; font-size: 12px; letter-spacing: -0.02em; color: #000042; -webkit-text-decoration-line: underline; text-decoration-line: underline; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upload-help-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-button-outer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 0px; position: fixed; width: 100%; height: 80px; bottom: 0; background: #FFFFFF; -webkit-box-shadow: 0px -4px 12px rgba(0, 0, 0, .16); box-shadow: 0px -4px 12px rgba(0, 0, 0, .16); border-radius: 0px; margin-left: -20px; } .bottom-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 12px 20px; height: 48px; background: #11DAAC; border-radius: 100px; border: none; width: 90%; font-family: 'LenskartSans-Regular'; font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.02em; color: #000042; } .disable-upload-bottom-button { background: #DBDBEA; color: #9999B3; } .upload-power-new { padding: 40px 16px 70px 16px; } .upload-power-new .dropzone { text-align: center; border: 1px dashed #27394e; background: #ffffff; } .upload-power-new .dropzone .dz-preview { margin: auto; margin-left: 13px; margin-bottom: 10px; } .upload-power-new .dropzone .dz-error-message { display: none !important; } @charset "UTF-8"; /* * Define scss variables here. */ .popover { position: absolute; top: 100%; left: 0; z-index: 5; padding: 1px; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); } .popover-arrow { z-index: 5; position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 11px; } .popover-arrow.bottom { border-bottom-color: rgba(0, 0, 0, .25); } .popover-arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover-arrow:after { content: ""; border-width: 10px; } .popover-arrow.bottom:after { border-bottom-color: white; } .manual-pd { margin-top: 30px; margin-left: 2px; position: absolute; width: 93%; } .manual-pd .pd-information .icon-question-circle { width: 18px; height: 18px; border-radius: 50%; text-align: center; font-size: 15px; border: 1px solid; color: #ffffff; background: #18cfa8; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: bold; } .manual-pd .pd-information .icon-question-circle:before { content: "?"; font-family: 'FontAwesome'; } .manual-pd .pd-information .popover-close-cyl { left: 218px; } .manual-pd .pd-information .popover { min-width: 275px; padding: 10px; right: 0px; position: relative; top: 27px; text-align: justify; } .manual-pd .pd-information .popover-arrow.bottom { top: 5px; left: -4px; border-bottom-color: rgba(0, 0, 0, .25); } .manual-pd .pd-information .popover-arrow.bottom:after { border-bottom-color: #ffffff; left: -10px; top: -9px; } .manual-pd .pd-information .popover-style-cyl { left: -41px; } .icon-close { width: 18px; height: 18px; border-radius: 50%; text-align: center; font-size: 15px; border: 1px solid; color: #ffffff; background: #27394e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: bold; position: relative; top: 25px; z-index: 6; } .icon-close:before { content: "✕"; font-family: 'FontAwesome'; } .manual-pd-input-div { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 10px; margin-bottom: 10px; } .manual-pd-input { width: 99.1%; height: 52px; font-size: 14px; padding: 10px; border: 1px solid rgba(60, 60, 60, .54); border-radius: 3px; } .manual-pd-btns-container { position: fixed; bottom: 0; background: white; width: 100%; margin-left: -17px; padding: 10px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .manual-pd-btn { text-align: center; width: 90%; margin-left: 15px; margin-right: 15px; border-radius: 4px; font-size: 15px; height: 40px; padding-top: 10px; } .btn-not-selected { background: -webkit-gradient(linear, left bottom, left top, from(rgba(60, 60, 60, .12)), to(rgba(60, 60, 60, .12))), #FFFFFF; background: linear-gradient(0deg, rgba(60, 60, 60, .12), rgba(60, 60, 60, .12)), #FFFFFF; color: rgba(60, 60, 60, .26); } .btn-selected { color: #FFFFFF; background: #18cfa8; } .dont-know-pd { height: 70vh; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .popup-header { background: #fff; overflow: auto; border-radius: 0; border: none; } .popup-header .close { position: absolute; right: -35px; top: -35px; background: #fff; border: 2px solid #535c60; width: 40px; height: 40px; border-radius: 50%; opacity: 1; font-size: 26px; margin-top: -2px; cursor: pointer; } .popup-header .prescription-section { float: left; width: 70%; padding-left: 15px; } .popup-header .prescription-section p { margin: 15px 0 0; font-size: 13px; line-height: 20px; font-family: 'FuturaStd-Book'; color: #445962; letter-spacing: 1px; } .popup-header .prescription-section strong { font-size: 16px; line-height: 24px; font-family: 'FuturaStd-Heavy'; color: #39b54a; margin-top: 5px; letter-spacing: 1px; } .add-pd-container { margin-top: 20px; background: white; padding: 20px; border-radius: 8px; border: 1px solid #ebf0f2; } .tabs-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 12px 0 20px; font-size: 14px; font-weight: 500; } .tabs-wrapper .tab .tab-count { padding: 5px 7px; border-radius: 50%; background: #00bac6; color: #fff; margin-right: 5px; font-size: 14px; } .tabs-wrapper .disabled { color: rgba(60, 60, 60, .54); } .tabs-wrapper .disabled .tab-count { background: rgba(60, 60, 60, .38); } .tabs-wrapper .tabs-seperator-div { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 10px; margin-right: 10px; } .tabs-wrapper .tabs-seperator-div .seperator { height: 1px; width: 100%; background: #DEDEDE; } .pd-value-header { font-family: 'Roboto'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #3C3C3C; } .pd-value-options { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; gap: 10px; margin-top: 10px; } .pd-value-option { padding: 10px; max-width: 33%; border-radius: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .option-not-select { border: 1px solid rgba(60, 60, 60, .54); color: rgba(60, 60, 60, .54); } .fa-file-image::before { content: "\f1c5"; font-family: 'FontAwesome'; font-size: 22px; } .dont-have-pd-value::before { content: "\f095"; font-family: 'FontAwesome'; font-size: 26px; } .icons-container { font-size: 14px; } .manual-img-icon::before { content: ' \229E'; font-family: 'FontAwesome'; font-size: 30px; } .option-selected { border: 1px solid #00bac6; color: #00bac6; } .pd-value-steps { margin-top: 30px; margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .pd-step { font-family: 'Roboto'; font-weight: 700; line-height: 14.06px; font-size: 16px; background: -webkit-linear-gradient(#faa61a, #ed0973); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 3px; border-radius: 2px; } .step-primary-text { font-family: 'Roboto'; font-weight: 700; font-size: 14px; line-height: 20px; } .step2-img { margin-top: 10px; width: 300px; margin-bottom: 10px; border-radius: 14px; height: 226px; } .step-secondary-text { font-family: 'Roboto'; font-weight: 400; color: grey; font-size: 13px; } .pd-upload-image { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pd-upload-image .img-uploaded { margin: auto; } .pd-upload-btns { width: 100%; margin: 20px 0 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upload-image-btn { width: 49%; color: #00bac6; border: 1px solid #00bac6; border-radius: 4px; padding: 5px; height: 41px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; font-size: 14px; background-color: white; } .upload-continue-btn { text-align: center; border-radius: 4px; font-size: 15px; padding: 12px 16px; color: #FFFFFF; background: #00bac6; width: 100%; } .upload-continue-container { padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; width: 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .upload-option-selected { width: 49%; background: #00bac6; color: white; border: 1px solid #00bac6; border-radius: 4px; padding: 5px; height: 41px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; } .uploaded-img-container { padding: 4px; } .img-sub-container { margin: 3px; margin-top: 10px; padding: 10px; font-size: 13px; height: 81px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fafafa; border-radius: 4px; } .img-saved-box { width: 100%; height: 37px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px; margin-left: 8px; margin-right: 8px; background: white; border-radius: 4px; border: 1px solid #DEDEDE; } /* * Define scss variables here. */ @-webkit-keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } .dropzone, .dropzone * { -webkit-box-sizing: border-box; box-sizing: border-box; } .dropzone { min-height: 150px; border: 2px solid rgba(0, 0, 0, .3); background: white; padding: 20px 20px; } .dropzone.dz-clickable { cursor: pointer; } .dropzone.dz-clickable * { cursor: default; } .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { cursor: pointer; } .dropzone.dz-started .dz-message { display: none; } .dropzone.dz-drag-hover { border-style: solid; } .dropzone.dz-drag-hover .dz-message { opacity: 0.5; } .dropzone .dz-message { text-align: center; margin: 2em 0; } .dropzone .dz-preview { position: relative; display: inline-block; vertical-align: top; margin: 16px; min-height: 100px; } .dropzone .dz-preview:hover { z-index: 1000; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 20px; background: #999; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); background: linear-gradient(to bottom, #eee, #ddd); } .dropzone .dz-preview.dz-file-preview .dz-details { opacity: 1; } .dropzone .dz-preview.dz-image-preview { background: white; } .dropzone .dz-preview.dz-image-preview .dz-details { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .dropzone .dz-preview .dz-remove { font-size: 14px; text-align: center; display: block; cursor: pointer; border: none; } .dropzone .dz-preview .dz-remove:hover { text-decoration: underline; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview .dz-details { z-index: 20; position: absolute; top: 0; left: 0; opacity: 0; font-size: 13px; min-width: 100%; max-width: 100%; padding: 2em 1em; text-align: center; color: rgba(0, 0, 0, .9); line-height: 150%; } .dropzone .dz-preview .dz-details .dz-size { margin-bottom: 1em; font-size: 16px; } .dropzone .dz-preview .dz-details .dz-filename { white-space: nowrap; } .dropzone .dz-preview .dz-details .dz-filename:hover span { border: 1px solid rgba(200, 200, 200, .8); background-color: rgba(255, 255, 255, .8); } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) { overflow: hidden; text-overflow: ellipsis; } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { border: 1px solid transparent; } .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { background-color: rgba(255, 255, 255, .4); padding: 0 0.4em; border-radius: 3px; } .dropzone .dz-preview:hover .dz-image img { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); -webkit-filter: blur(8px); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: blur(8px); } .dropzone .dz-preview .dz-image { border-radius: 20px; overflow: hidden; width: 120px; height: 120px; position: relative; display: block; z-index: 10; } .dropzone .dz-preview .dz-image img { display: block; } .dropzone .dz-preview.dz-success .dz-success-mark { -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { pointer-events: none; opacity: 0; z-index: 500; position: absolute; display: block; top: 50%; left: 50%; margin-left: -27px; margin-top: -27px; } .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { display: block; width: 54px; height: 54px; } .dropzone .dz-preview.dz-processing .dz-progress { opacity: 1; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .dropzone .dz-preview.dz-complete .dz-progress { opacity: 0; -webkit-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } .dropzone .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse 6s ease infinite; animation: pulse 6s ease infinite; } .dropzone .dz-preview .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; position: absolute; height: 16px; left: 50%; top: 50%; margin-top: -8px; width: 80px; margin-left: -40px; background: rgba(255, 255, 255, .9); -webkit-transform: scale(1); border-radius: 8px; overflow: hidden; } .dropzone .dz-preview .dz-progress .dz-upload { background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444)); background: linear-gradient(to bottom, #666, #444); position: absolute; top: 0; left: 0; bottom: 0; width: 0; -webkit-transition: width 300ms ease-in-out; transition: width 300ms ease-in-out; } .dropzone .dz-preview.dz-error .dz-error-message { display: block; } .dropzone .dz-preview.dz-error:hover .dz-error-message { opacity: 1; pointer-events: auto; } .dropzone .dz-preview .dz-error-message { pointer-events: none; z-index: 1000; position: absolute; display: block; display: none; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; border-radius: 8px; font-size: 13px; top: 130px; left: -10px; width: 140px; background: #be2626; background: -webkit-gradient(linear, left top, left bottom, from(#be2626), to(#a92222)); background: linear-gradient(to bottom, #be2626, #a92222); padding: 0.5em 1.2em; color: white; } .dropzone .dz-preview .dz-error-message:after { content: ''; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #be2626; } .upload-power .dropzone { text-align: center; border: 1px dashed #27394e; background: #ffffff; } .upload-power .dropzone .dz-preview { margin: auto; margin-left: 13px; margin-bottom: 10px; } .upload-power .dropzone .dz-error-message { display: none !important; } .text-orange { color: #f26c4f; } .bg-pale_grey { background-color: #ddd; } .upload-continue-btn { border-radius: 4px; font-size: 16px; padding: 10px; color: #FFFFFF; background: #00bac6; border: none; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: auto; text-transform: uppercase; } .camera .btn-container { position: fixed; bottom: 25px; left: 0; width: 100vw; z-index: 110; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .camera .click-photo.outer-circle { position: relative; border-radius: 50%; width: 65px; height: 65px; border: 1px solid #fff; } .camera .click-photo .inner-circle { position: absolute; border-radius: 50%; width: 55px; height: 55px; top: 4px; left: 4px; background: #fff; } .camera .click-photo-text > div { border-radius: 8px; min-width: 320px; letter-spacing: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #fff; } .camera .click-photo-text img { max-width: 80px; } .mobile-loader img { max-width: 44px; } .desktop .camera .btn-container { bottom: 100px; } .desktop .camera .photo { text-align: center; min-height: 240px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 40px; } .desktop .camera .photo img { max-width: 640px; } .desktop .popup-container { position: relative; top: auto; right: auto; left: auto; -webkit-transform: none; transform: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 40px 0; } .desktop .popup-wrapper.popup-wrapper-in { max-width: 200px; position: relative; top: auto; right: auto; left: auto; -webkit-transform: none; transform: none; } .desktop .popup-wrapper .new-btn { border: none; width: 100%; padding: 6px 0; border-radius: 4px; letter-spacing: 0.7px; } .skip-btn-container { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; top: 15px; left: 58.5%; width: 35%; opacity: 1; -webkit-transition: 1500ms ease opacity, 1500ms 1500ms ease transform; transition: 1500ms ease opacity, 1500ms 1500ms ease transform; } .skip-btn-container .skip-btn { border-radius: 100px; padding: 6px 12px; font-family: 'Lenskart Sans', sans-serif; font-weight: 700; font-size: 12px; } .skip-btn-container.hide { opacity: 0; -webkit-transform: translateX(9999px); transform: translateX(9999px); } .get-started-btn-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; width: 100%; position: absolute; bottom: 56px; opacity: 0; -webkit-transition: 1500ms ease opacity; transition: 1500ms ease opacity; -webkit-transform: translateX(9999px); transform: translateX(9999px); } .get-started-btn-container.show { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } .get-started-btn-container .get-started-btn { padding: 12px 48px; border-radius: 100px; font-family: 'Lenskart Sans', sans-serif; font-weight: 700; font-size: 18px; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .pd-home .carousel .carousel-track { height: 100% !important; } .pd-home .carousel .carousel-prev:before, .pd-home .carousel .carousel-next:before { color: #27394e; } .pd-calculator .camera { position: relative; } .pd-calculator .camera video, .pd-calculator .camera .image-overlay { height: 500px; width: 100%; -o-object-fit: cover; object-fit: cover; z-index: 100; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .pd-calculator .camera .video .btn-container { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin: 20px 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .pd-calculator .camera .video .btn-container .click-photo-text .loader img { height: 28px; } .pd-calculator .camera .video .btn-container .click-photo-text > div { padding: 12px 20px; font-size: 16px; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; } .pd-calculator .camera .video .btn-container .click-photo-text .bg-topaz { background-color: #00bac6; } .pd-calculator .camera .video .btn-container .fa-camera { font-size: 18px; } .pd-calculator .camera .photo { position: static !important; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .pd-calculator .camera .photo .snap-shot { width: 100% !important; height: 500px !important; } .desktop-container { height: 500px !important; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .desktop-container img { -o-object-fit: cover; object-fit: cover; position: relative; z-index: 101; } .desktop-container .shadow { background: rgba(0, 0, 0, .7); position: relative; z-index: 101; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .pd-calculator .close-btn { top: 64px; right: 15px; z-index: 102; } .pd-calc-screen1 { position: absolute; top: 0; left: 0; width: 100%; } .pd-calc-screen1 .info-container { z-index: 100; } .pd-calc-screen1 .info-container .info { padding: 0 34px; } .pd-calc-screen1 .click-info { width: 100%; z-index: 100; position: fixed; bottom: 61px; left: 0; right: 0; } .pd-calc-screen1 .instructions-container { width: 100%; z-index: 100; } .pd-calc-screen1 .instructions-container .instructions .link { color: #00B9C6; text-decoration: underline; } .pd-calc-screen1 .instructions-container .instructions .link:hover { color: #00B0C0; } .pd-calc-screen1 .offer-skip { z-index: 999; letter-spacing: .7px; cursor: pointer; } .camera .pd-calc-screen2 img { width: 60%; height: auto; top: 17%; left: 20%; } .desktop .camera .pd-calc-screen2 .pl-overlay { width: 45%; height: auto; top: 10%; left: 30%; } .pd-calc-screen2 .calc-pd-loader { position: fixed; top: 70%; left: 15%; width: 69%; z-index: 100; } .pd-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .pd-result .result-close-btn { right: 20px; cursor: pointer; top: 65px; z-index: 999; } .pd-result .face-shape-img { height: 45vh; } .pd-result.desktop .result-close-btn { display: none; } .pd-result.desktop .face-shape-img { height: 40vh; } .desktop .show-me-cta { padding: 0 40px; } .desktop .show-me-cta:hover, .desktop .show-me-cta:focus { text-decoration: none; } .desktop .show-me-cta > div { display: inline-block; padding: 20px 50px; border-radius: 8px; letter-spacing: .7px; } .desktop .show-me-cta span { text-transform: uppercase; } .retry-btn-pd { margin-top: 10px; border-radius: 8px; letter-spacing: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #fff; padding: 8px 20px; background-color: #00bac6; } .btn-back { border: none; background-color: transparent; margin-left: auto; position: absolute; top: 0; left: 0; margin: 10px 0; color: #00bac6; font-size: 16px; } .pd-calculator .btn-back { position: static; display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: auto; } .glasseson-loader { background: url(https://static.lenskart.com/media/owndays/mobile/img/od-loaders/circle-loader.gif) no-repeat; margin: 0; padding: 0; width: 92vw; height: 75vh; opacity: 1; background-position: center center; } .glasseson.webapp .go-close { top: 7vh !important; } .glasseson .go-webapp .go-container { top: 13vh !important; } .webapp .go-video-page .go-page-content .go-video-container video { margin-top: 0px !important; } .lens-width .material-group input { width: 40%; margin: 0 auto; border: 1px solid #99a0a9; padding: 15px; border-radius: 4px; } .lens-width .material-group input:focus { outline: none; border: 1px solid #00bac6; } .lens-width .material-group label { top: 20px; left: 0; width: 100%; } .cancel-popup { margin-top: -6px; font-weight: 300; font-size: 18px; } .delete-btns-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: 20px; margin-right: 20px; margin-top: 10px; } .delete-cancel-button { border: 1px solid #00bac6; width: 100%; color: #00bac6; margin-left: 5px; margin-right: 5px; border-radius: 4px; padding: 3px; text-align: center; font-size: 14px; } .delete-btn { border: 1px solid #00bac6; color: #FFFFFF; background: #00bac6; width: 100%; margin-left: 5px; margin-right: 5px; border-radius: 4px; padding: 3px; text-align: center; font-size: 14px; } .selfie { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cam, .preview { position: relative; } .preview-img { display: block; } .capture-btn { position: absolute; bottom: 9px; display: block; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: none; color: #fff; border: none; font-size: 40px; } .video-player { display: block; } .btn-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: absolute; bottom: 0; left: 0; } .back-btn, .download-btn { background: none; color: #fff; border: none; font-size: 40px; } .download-btn { margin-left: 25px; } .view-upload-img { position: fixed; top: 0; left: 0; z-index: 102; -webkit-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; width: 100%; bottom: 0; } .view-upload-img .close-btn { right: 4px; top: 8px; z-index: 1; color: white; } .view-upload-img .pinch-zoom-container { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; max-height: 100vh; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .view-upload-img .p-zoom-body { -webkit-transform: scale(1, 1) translate(0, 0); transform: scale(1, 1) translate(0, 0); width: 100%; height: 100vh; padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .view-upload-img .p-zoom-body img { width: 100%; } @charset "UTF-8"; /* * Define scss variables here. */ .popover { position: absolute; top: 100%; left: 0; z-index: 5; padding: 1px; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); } .popover-arrow { z-index: 5; position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 11px; } .popover-arrow.bottom { border-bottom-color: rgba(0, 0, 0, .25); } .popover-arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover-arrow:after { content: ""; border-width: 10px; } .popover-arrow.bottom:after { border-bottom-color: white; } .manual-pd { margin: 56px 0 0; } .manual-pd .pd-information { margin: 5px 0; } .manual-pd .pd-information .icon-question-circle { width: 18px; height: 18px; border-radius: 50%; text-align: center; font-size: 15px; border: 1px solid; color: #ffffff; background: #00BAC6; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: bold; } .manual-pd .pd-information .icon-question-circle:before { content: "?"; font-family: 'FontAwesome', sans-serif; } .manual-pd .popover-cyl { position: relative; } .manual-pd .popover-cyl .popover-arrow.bottom { top: 15px; right: 12px; border-bottom-color: rgba(0, 0, 0, .25); } .manual-pd .popover-cyl .popover-style-cyl { padding: 1px; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; } .icon-close { width: 18px; height: 18px; border-radius: 50%; text-align: center; font-size: 15px; border: 1px solid; color: #ffffff; background: #27394e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: bold; position: relative; top: 25px; z-index: 6; } .icon-close:before { content: "✕"; font-family: 'FontAwesome', sans-serif; } .manual-pd-input-div { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .manual-pd-input { height: 56px; font-size: 14px; padding: 10px; border: 1px solid rgba(60, 60, 60, .54); border-radius: 3px; width: 100%; } .manual-pd-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; gap: 10px; } .manual-pd-btns-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 52px; } .manual-pd-btn { text-align: center; width: 50%; border-radius: 4px; font-size: 15px; padding: 10px; } .btn-not-selected { background: -webkit-gradient(linear, left bottom, left top, from(rgba(60, 60, 60, .12)), to(rgba(60, 60, 60, .12))), #FFFFFF; background: linear-gradient(0deg, rgba(60, 60, 60, .12), rgba(60, 60, 60, .12)), #FFFFFF; color: rgba(60, 60, 60, .26); } .btn-selected { color: #FFFFFF; background: #00bac6; } .dont-know-pd { margin: 100px 0; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .addPd { background-color: #EEEEEE; } .addPd .addPd-btn { color: #00BAC6; } .od-item-header { padding: 24px 16px; margin-bottom: 16px; font-size: 14px; line-height: 20px; background-color: #fff; } .od-item-header__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .od-item-header__image-wrapper { width: 236px; -ms-flex-negative: 0; flex-shrink: 0; } .od-item-header__info { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .od-item-header__separator { width: 100%; border: 1px dashed rgba(68, 68, 68, .1); } .od-item-header__info-row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 16px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-item-header__brand { color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; } .od-item-header__name { color: rgba(68, 68, 68, .5); font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; text-transform: capitalize; } .od-item-header__title { color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; text-transform: capitalize; } .od-item-header__lens { color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; } .od-item-header__prescription { color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-transform: capitalize; cursor: pointer; } .od-order-header-storeName__bold { font-size: 21px; font-weight: normal; } .od-order-header-status { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-order-header-status__status { font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; text-transform: capitalize; } .od-order-header-status__status--payment-pending { color: #C8402D; } .od-order-header-status__status--in-progress { color: #D79954; } .od-order-header-status__status--delivered { color: #4D9855; } .od-order-header-status__details { color: #444; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-transform: capitalize; cursor: pointer; } .od-order-header-status__support { color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-transform: capitalize; } .od-order-header-status__support:hover { color: #444; } .od-order-header-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 20px; } .od-order-header-details__left, .od-order-header-details__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-order-header-details__name { color: rgba(68, 68, 68, .5); font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; text-transform: capitalize; } .od-order-header-details__name--right { font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; text-transform: capitalize; } .od-order-header-details__title { color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; text-transform: capitalize; } .od-order-header-details__title--right { font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; text-transform: capitalize; } .od-order-header-details__separator { width: 20px; height: 0; border: 1px solid rgba(68, 68, 68, .1); -webkit-transform: rotate(90deg); transform: rotate(90deg); margin: auto 16px; } .od-my-orders__title { color: #444; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; } .od-my-orders__filters { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 25px; gap: 25px; } .od-my-orders__filter { padding: 8px 80px; color: #555; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; background-color: #fff; cursor: pointer; -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; } .od-my-orders__filter:hover { color: #FFF; background-color: #546073; } .od-my-orders__filter--active { color: #FFF; background-color: #546073; } .od-my-orders__filter--active:hover { color: #555; background-color: #fff; } .od-my-orders__empty { margin-top: 25px; color: rgba(0, 0, 0, .5); font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; } .od-my-prescriptions__title { color: #444; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; } .od-my-prescriptions__content { padding: 16px; margin-top: 25px; background-color: #fff; } .od-my-prescriptions__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .od-my-prescriptions__subtitle { color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.32px; } .od-my-prescriptions__date { margin-right: auto; color: rgba(68, 68, 68, .5); font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; } .od-my-prescriptions__action { color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.32px; -webkit-text-decoration-line: underline; text-decoration-line: underline; cursor: pointer; } .od-my-prescriptions__table { display: grid; border-top: 1px solid #d0d0d0; border-left: 1px solid #d0d0d0; margin-top: 16px; grid-template-columns: repeat(5, 1fr); } .od-my-prescriptions__cell { padding: 13px; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.32px; } .od-my-prescriptions__cell--title { color: rgba(68, 68, 68, .5); text-transform: capitalize; } .od-my-prescriptions__add-new { width: 100%; padding: 15px; margin-top: 25px; color: #fff; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.4px; background-color: #546073; backdrop-filter: blur(7px); } .od-my-prescriptions__add-new:hover { color: #fff; background-color: #546073; } .od-prescription-active-tab { color: #fff; background-color: #546073; } .od-my-prescription-d__filters { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 25px 0px; gap: 25px; } .od-my-prescription-d__filter { padding: 8px 80px; color: #555; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.28px; background-color: #fff; cursor: pointer; border: 1px solid #555555; } .od-my-prescription-d__filter--active { color: #fff; background-color: #546073; } .od_offline_prescription { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 10px 20px; background-color: #fff; font-family: 'Founders Grotesk', sans-serif; margin-bottom: 16px; } .od_offline_prescription__left { margin-right: 10px; text-align: center; } .od_offline_prescription__left img { height: 200px; } .od_offline_prescription__left__product { margin-top: -30px; color: #8e8e8e; font-size: 16px; font-style: normal; } .od-prescription-container { border-radius: 8px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-family: 'Founders Grotesk', sans-serif; } .od-prescription-header { font-family: 'Founders Grotesk', sans-serif; letter-spacing: 0.02em; font-size: 16px; font-style: normal; line-height: 20px; margin-bottom: 10px; } .od-prescription-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; } .od-prescription-table th, .od-prescription-table td { border: 1px solid #ddd; padding: 8px; text-align: center; } .od-prescription-table th { background-color: #f0f0f0; font-weight: bold; } .od-prescrption-memo { font-style: italic; text-align: center; color: #666; font-size: 16px; } .od-prescription-label { color: rgba(68, 68, 68, 0.50196); font-size: 16px; } .od-membership-acc { width: 100%; margin-bottom: 107px; } .od-membership-acc__title { width: 100%; color: #000000; font-size: 24px; line-height: 24px; } .od-membership-acc__content { width: 100%; background-color: #FFFFFF; padding: 24px; margin-top: 25px; } .od-membership-acc__content__user-info { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 24px; margin-bottom: 25px; } .od-membership-acc__content__user-info svg { width: 144px !important; height: 144px !important; } .od-membership-acc__content__user-info .od-membership-user-info { width: 100%; } .od-membership-acc__content__user-info .od-membership-user-info__name { font-size: 24px; line-height: 28px; color: #000000; } .od-membership-acc__content__user-info .od-membership-user-info__membership { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; margin-top: 12px; } .od-membership-acc__content__user-info .od-membership-user-info__membership__status { font-size: 16px; line-height: 19px; text-transform: capitalize; } .od-membership-acc__content__user-info .od-membership-user-info__membership__id { color: rgba(0, 0, 0, 0.50196); font-size: 16px; line-height: 19px; } .od-membership-acc__content__user-info .od-membership-user-info .od-membership-acc__points { width: 100%; } .od-membership-acc__content__user-info .od-membership-user-info .od-membership-acc__points__scale-container { margin-top: 32px; width: 100%; height: 12px; background-color: #FAFAFA; } .od-membership-acc__content__user-info .od-membership-user-info .od-membership-acc__points__scale-container .od-membership-acc__points__scale { height: 100%; background-color: #546073; } .od-membership-acc__content__user-info .od-membership-user-info .od-membership-acc__points-info { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000000; font-size: 16px; line-height: 19px; margin-top: 12px; } .od-membership-acc__content__user-info .od-membership-user-info .od-membership-acc__points-info__next-lvl { opacity: 0.5; } .od-membership-acc__content__points { margin-top: 21px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; } .od-membership-acc__content__points .points-block { width: 100%; min-height: 145px; background-color: #FAFAFA; padding: 24px; color: #000000; } .od-membership-acc__content__points .points-block__title { font-size: 14px; line-height: 16px; opacity: 0.5; } .od-membership-acc__content__points .points-block__points { margin-top: 24px; font-size: 24px; line-height: 28px; } .od-membership-acc__content__points .points-block__description { margin-top: 15px; font-size: 12px; line-height: 14px; opacity: 0.5; } .od-membership-acc__content__points .points-block__description span { text-decoration: underline; cursor: pointer; } .od-membership-acc-separator-text { border-left: 1px solid rgba(0, 0, 0, 0.2); height: 18px; } .od-membership-acc-banner { width: 100%; height: auto; margin-top: 21px; } .od-membership-acc-banner__img { height: 203px; } @media (max-width: 1024px) { .od-membership-acc-banner__img { height: 135px; } } .h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } .od-points-history { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .od-points-history__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .od-points-history__heading img { cursor: pointer; } .od-points-history__heading__title { color: #000; font-size: 24px; line-height: 24px; color: #000; } .od-points-history__items { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } .points-history-item { width: 100%; padding: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; } .points-history-item__info { color: #000; font-size: 16px; } .points-history-item__info__timestamp { opacity: 0.5; } .points-history-item__points { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 6px; } .points-history-item__points span { margin-left: 2px; } .points-history-item__points__debit { font-size: 32px; line-height: 28px; color: #000; } .points-history-item__points__referral { font-size: 32px; line-height: 28px; color: #4d9855; } .points-history-item__points__credit { font-size: 32px; line-height: 28px; color: #4d9855; } .points-history-item__points__text { font-size: 16px; color: #000; opacity: 0.5; } .od-eye-test-booking { max-width: 860px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px; } .od-eye-test-booking__appointments { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px; } .od-eye-test-booking__title { color: #444; font-size: 24px; line-height: 24px; } .od-eye-test-booking__new-appointment-btn { width: 100%; margin-top: 25px; } .od-eye-test-booking__new-appointment-btn button { border-radius: 60px; } .od-appointment { background-color: #fff; padding: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; min-height: 208px; } .od-appointment__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .od-appointment__content__btns { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .od-appointment__content__btns button { border-radius: 40px; } .od-appointment__content__btns span { margin: 0 12px; white-space: nowrap; } .od-appointment__content__btns__cencel { color: #546073; line-height: 24px; letter-spacing: -0.32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-eye-test-booking-info__heading { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-eye-test-booking-info__heading .od-rating { padding: 4px 7px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 99px; gap: 2px; background-color: rgba(255, 169, 68, 0.10196); } .od-eye-test-booking-info__heading .od-rating__value { color: #000; opacity: 0.5; font-family: 'Founders Grotesk', sans-serif; } .od-eye-test-booking-info__heading .od-rating__icon { width: 12px; height: 12px; } .od-eye-test-booking-info__title { color: #546073; font-size: 18px; line-height: 18px; letter-spacing: -0.36px; } .od-eye-test-booking-info__get-directions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; cursor: pointer; } .od-eye-test-booking-info__get-directions span { color: #546073; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; -webkit-text-decoration-line: underline; text-decoration-line: underline; } .od-eye-test-booking-info__address { margin-top: 12px; color: #546073; opacity: 0.7; font-size: 14px; } .od-eye-test-booking-info__appointment { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 8px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; margin-top: 24px; } .od-eye-test-booking-info__appointment__label, .od-eye-test-booking-info__appointment__date, .od-eye-test-booking-info__appointment__time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; padding: 12px; border-radius: 5px; background: #FAFAFA; width: 100%; } .od-eye-test-booking-info__appointment__label span, .od-eye-test-booking-info__appointment__date span, .od-eye-test-booking-info__appointment__time span { color: #444; font-size: 16px; letter-spacing: -0.32px; white-space: nowrap; } .od-rating-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 32px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .od-rating { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 6px 12px; border-radius: 89px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; font-size: 12px; line-height: 16px; letter-spacing: -0.02em; /* for proper font rendering in safari */ font-synthesis: none; background-color: #FAFAFE; } .od-rating--mobile { padding: 4px 8px; font-size: 10px; line-height: 14px; font-family: Raleway; } .od-rating--mobile .od-rating__value { font-weight: 700; color: #000000; } .od-rating--mobile .od-rating__count { font-weight: 400; color: rgba(0, 0, 0, 0.50196); } .od-rating__product { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-rating__value { color: #000042; } .od-rating__count { color: #66668E; } .od-rating__icon img { vertical-align: text-top; } .h6 { font-weight: 500; font-size: 20px; line-height: 160%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: #3c3c3c; } .body2 { font-weight: 400; font-size: 14px; line-height: 143%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.15px; color: rgba(60, 60, 60, .54); } .body3 { font-weight: 400; font-size: 12px; line-height: 110%; letter-spacing: 0.25px; color: #ffffff; } .subtitle1 { font-weight: 400; font-size: 12px; line-height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1px; text-transform: uppercase; color: #3c3c3c; } .subtitle2 { font-weight: 500; font-size: 14px; line-height: 157%; letter-spacing: 0.1px; color: #000000; } body { padding: 0; margin: 0; } .od-reset-pass { font-family: "Founders Grotesk"; width: 100%; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-reset-pass__success { width: 620px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .od-reset-pass__success__title { color: #444; font-size: 20px; line-height: 36px; } .od-reset-pass .od-close-icon-container { top: 61px; right: 83px; padding: 24px; border-radius: 0; background-color: #fff; -webkit-box-shadow: none; box-shadow: none; } .od-reset-pass .od-close-icon-container img { width: 12px; height: 12px; } .od-reset-pass__logo { height: 100vh; } .od-reset-pass__logo img { height: 16vh; } .od-reset-pass__content { height: 100%; width: 620px; padding: 32px 48px; max-width: 564px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; max-height: 620px; gap: 32px; } .od-reset-pass__content__title { font-size: 24px; line-height: 36px; color: #444; } .od-reset-pass__content .form-SLA { max-width: 620px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .od-reset-pass__content .form-SLA__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .od-reset-pass__content .form-SLA__content__input-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 16px 0 16px 14px; background: #fff; border: 1px solid #e2e2ee; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); box-shadow: 0px 1px 2px rgba(16, 24, 40, .05); font-size: 14px; line-height: 20px; color: #333368; } .od-reset-pass__content .form-SLA__content__input-wrapper .form-SLA-input { width: 100%; height: 100%; border: none; letter-spacing: -0.02em; font-size: 14px; line-height: 24px; color: #000; } .od-reset-pass__content .form-SLA__content__input-wrapper .form-SLA-input::-webkit-input-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-reset-pass__content .form-SLA__content__input-wrapper .form-SLA-input::-moz-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-reset-pass__content .form-SLA__content__input-wrapper .form-SLA-input::-ms-input-placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-reset-pass__content .form-SLA__content__input-wrapper .form-SLA-input::placeholder { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.50196); } .od-reset-pass__content .form-SLA__content__input-wrapper .form-SLA-input-img { cursor: pointer; margin-right: 14px; } .od-reset-pass__content .form-SLA__content__input-wrapper .od-strike-through { background: -webkit-gradient(linear, right bottom, left top, color-stop(47.75%, transparent), color-stop(49.5%, #66668e), color-stop(50.5%, #66668e), color-stop(52.25%, transparent)); background: linear-gradient(to left top, transparent 47.75%, #66668e 49.5%, #66668e 50.5%, transparent 52.25%); z-index: 100; } .od-reset-pass__content .form-SLA__content__error-msg { font-size: 14px; line-height: 24px; color: #a94442; } .cart-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 175px 148px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 40px; background-color: #FAFAFA; } @media (max-width: 1200px) { .cart-wrapper { padding: 40px; } } .cart-wrapper__content { display: grid; grid-template-columns: 2.4fr 1fr; gap: 40px; } .cart-wrapper__items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; } .cart-wrapper__add-items { width: 100%; background-color: #FFF; padding: 20px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .cart-wrapper__add-items span { color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; } .cart-items__empty { margin: 40px 0; font-family: Raleway, sans-serif; font-size: 24px; font-weight: 500; line-height: 24px; letter-spacing: -0.02em; color: rgba(0, 0, 0, .5); } .cart-items__title-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cart-items__title { font-size: 24px; font-weight: 400; line-height: 24px; letter-spacing: -0.48px; color: #444444; } .cart-items__list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 24px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .cart-items-wish-list { margin-top: 28px; background-color: #ffffff; cursor: pointer; } .cart-items-wish-list__layout { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 20px 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .cart-items-wish-list__text { font-family: Raleway, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.02em; color: #000000; } .cart-items-wish-list__button { border: none; background-color: transparent; } .login-cart { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 20px 16px; margin-top: 28px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: #ffffff; } .login-cart__text { font-family: Raleway, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.02em; color: #000000; } .login-cart__button { border: none; background-color: transparent; } .od-item-product-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; background-color: #ffffff; overflow: hidden; padding: 0 16px; } .od-item-product-card-right { width: 100%; padding: 24px 0; } .od-item-product-card__upload_prescription { color: #444; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.24px; } .od-item-product-card__high-power { color: #66668E; font-size: 12px; font-style: normal; font-weight: 400; line-height: 14px; letter-spacing: -0.24px; white-space: nowrap; } .od-item-product-card__image { width: 236px; -ms-flex-negative: 0; flex-shrink: 0; padding: 10px 0; } .od-item-product-card__description { display: grid; grid-template-columns: auto -webkit-min-content; grid-template-columns: auto min-content; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 16px; -webkit-column-gap: 32px; -moz-column-gap: 32px; column-gap: 32px; } .od-item-product-card__title { color: #444; font-size: 16px; line-height: 18px; letter-spacing: -0.32px; } .od-item-product-card__title:hover { color: #444; text-decoration: none; } .od-item-product-card__addon { font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.02em; color: #000000; } .od-item-product-card__quantity-warning { font-family: Raleway, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.02em; color: red; } .od-item-product-card__divider { width: 100%; border-top: 1px dashed rgba(0, 0, 0, .1); margin: 0; grid-column: span 2; } .od-item-product-card__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 16px; grid-column: span 2; } .od-item-product-card__actions__prescription-status--gold { color: #B59A50; font-size: 14px; letter-spacing: -0.28px; } .od-item-product-card__actions__prescription-status--green { color: #4D9855; font-size: 14px; letter-spacing: -0.28px; } .od-item-product-card__action { border: none; color: #444; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-transform: capitalize; background-color: transparent; } .od-item-product-card__counter { padding: 8px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .od-item-product-card__counter div { cursor: pointer; width: 16px; height: 16px; } .od-item-product-card__counter span { color: #444; font-size: 14px; letter-spacing: -0.28px; } .od-item-product-card__actions-divider { border-right: 1px solid #E2E2EE; } .od-item-product-card-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 12px; } .od-item-product-card-price__sale-tag { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 16px; border: 1px solid transparent; padding-inline: 8px; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.36px; } .od-item-product-card-price__sale-tag--red { border-color: #bf0000; color: #bf0000; white-space: nowrap; } .od-item-product-card-price__discounted { color: #666; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; -webkit-text-decoration-line: strikethrough; text-decoration-line: strikethrough; } .od-item-product-card-price__discounted--product { color: #444; } .od-item-product-card-price__final { color: #444; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; white-space: nowrap; } .od-item-product-card-price__disclaimer { font-size: 10px; font-weight: 400; line-height: 14px; letter-spacing: -0.02em; color: #66668E; } .od-item-product-card-quantity { grid-column: span 2; } .od-item-product-card-quantity__warning { margin-top: 8px; color: #a94442; letter-spacing: -0.02em; font-size: 14px; line-height: 24px; } .item-product-card-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #ffffff; border-radius: 12px; padding: 32px; padding-bottom: 0; -webkit-transition: all ease 0.1s; transition: all ease 0.1s; } .item-product-card-container .item-product-card-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; gap: 16px; } .item-product-card-container .item-product-card-wrapper .item-product-card-image { width: 236px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; gap: 50px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .card-desc-price { margin-left: auto; letter-spacing: -0.02em; font-size: 14px; line-height: 20px; /* for proper font rendering in safari */ font-synthesis: none; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .card-desc-price .card-desc-price-light { color: #9999b3; font-weight: 400; font-family: "LenskartSans-Regular", sans-serif; margin-right: 6px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .card-desc-price .card-desc-price-bold { color: #000042; font-weight: 700; font-family: "LenskartSans-Bold", sans-serif; margin-left: 6px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .card-desc-price .free-price-text { font-family: "LenskartSans-Bold", sans-serif; font-weight: 700; font-size: 14px; line-height: 20px; color: #0fbd95; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .card-desc-price .color-dark { color: #000042; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .card-desc-title { font-family: "LenskartSans-Bold", sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: #000042; text-transform: capitalize; /* for proper font rendering in safari */ font-synthesis: none; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .card-desc-heading { color: #66668e; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; font-family: "LenskartSans-Regular", sans-serif; text-transform: capitalize; width: 100%; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .font14 { font-size: 14px; line-height: 24px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .cart-modify-text { font-size: 14px; text-decoration: underline; cursor: pointer; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .bullet-sign { font-weight: 700; color: #000042; font-family: "LenskartSans-Bold", sans-serif; margin: 0 2px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .vertical-sep { height: 20px; border-left: 1px solid #cecedf; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .item-quantity-warning { font-weight: 400; color: red; font-family: "LenskartSans-Regular", sans-serif; margin: 0 2px; line-height: 20px; letter-spacing: -0.02em; -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .color-dark { color: #000042; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-product-card-description-row .font-light-title { font-family: "LenskartSans-Regular", sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: #000042; text-transform: capitalize; /* for proper font rendering in safari */ font-synthesis: none; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; gap: 20px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-discount-container, .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-final-price-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-discount-container .text-regular, .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-final-price-container .text-regular { font-family: "LenskartSans-Regular", sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #333368; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-discount-container .text-bold, .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-final-price-container .text-bold { font-family: 'LenskartSans-Bold', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #333368; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-discount-container .price-discount, .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-final-price-container .price-discount { color: #0fbd95; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-discount-container .price-final, .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-final-price-container .price-final { color: #000042; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-discount-container .price-final .free-amount-text, .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-final-price-container .price-final .free-amount-text { color: #9999b3; margin-right: 6px; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-discount-container .price-final .free-price-text, .item-product-card-container .item-product-card-wrapper .item-product-card-description .item-final-price-container .item-final-price-container .price-final .free-price-text { color: #0fbd95; } .item-product-card-container .item-product-card-wrapper .item-product-card-description .cart-item-sep { width: 100%; margin: 0; border-bottom: 1px dashed #cecedf; border-top: none; overflow: hidden; } .item-product-card-container .align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .item-product-card-container-padding-remove { padding: 0px; } .know-more-modal-container { z-index: 1050 !important; width: 100%; height: 100%; position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 0; left: 0; cursor: auto; } .know-more-modal-container .know-more-modal-backdrop { opacity: 0.5; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #000; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; z-index: 1; } .know-more-modal-container .know-more-modal-content { position: relative; margin: 100px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 20px; gap: 20px; z-index: 2; background: #fff; border-radius: 12px; font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: #000042; } .know-more-modal-container .know-more-modal-content a { text-decoration: none; color: inherit; } .know-more-modal-container .know-more-modal-content .know-more-modal-image img { border-radius: 12px; height: 720px; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } @media screen and (max-width: 1441px) { .know-more-modal-container .know-more-modal-content .know-more-modal-image img { height: 620px; } } @media screen and (max-width: 1366px) { .know-more-modal-container .know-more-modal-content .know-more-modal-image img { height: 420px; } } @media screen and (max-width: 720px) { .know-more-modal-container .know-more-modal-content .know-more-modal-image img { height: 380px; } } .know-more-modal-container .know-more-modal-content .know-more-text { text-decoration: underline; cursor: pointer; } .know-more-modal-container .know-more-modal-content .know-more-modal-close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px; gap: 4px; position: absolute; width: 40px; height: 40px; top: 16px; right: 16px; background: #ffffff; border-radius: 100px; cursor: pointer; } .know-more-modal-container .animate-top { -webkit-animation: animatetop 0.5s !important; animation: animatetop 0.5s !important; } @-webkit-keyframes shake { 10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 20%, 80% { -webkit-transform: translate3d(2px, 0, 0); transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 40%, 60% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); } } @keyframes shake { 10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 20%, 80% { -webkit-transform: translate3d(2px, 0, 0); transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 40%, 60% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); } } @-webkit-keyframes animatetop { from { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes animatetop { from { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .od-cart-item-counter { padding: 8px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; margin: auto 0 auto auto; } .od-cart-item-counter div { cursor: pointer; width: 16px; height: 16px; } .od-cart-item-counter span { color: #444; font-size: 14px; letter-spacing: -0.28px; } .odclp { width: 100%; } .odclp_table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; } .odclp_tr { background-color: #f8f8f8; border: 1px solid #ddd; padding: 0.35em; } .odclp_th, .odclp_td { padding: .625em; text-align: center; } .odclp_th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; } .login-cart-alert-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 32px 16px; gap: 15px; height: 64px; background: #ffebea; -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .08); box-shadow: 0px 1px 4px rgba(0, 0, 0, .08); border-radius: 12px; cursor: pointer; border: 1px solid #ffa499; -webkit-transition: -webkit-box-shadow 0.2s ease-in-out; transition: -webkit-box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out; } .login-cart-alert-container:hover { -webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .1); box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .1); overflow: hidden; position: relative; z-index: 1; width: 100%; border-radius: 12px; } .login-cart-alert-container .login-cart-alert-text { font-family: "LenskartSans-Bold"; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #000042; text-transform: capitalize; } .login-cart-alert-container .alert-close-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #000042; font-family: "LenskartSans-Bold"; height: 32px; width: 32px; } .mobile-view { background: #ffebea; border: 1px solid #ffa499; border-radius: 8px; padding: 14px 16px; gap: 18px; width: 100%; height: 78px; } .mobile-view-text { font-size: 12px; line-height: 18px; } /*# sourceMappingURL=main.b4194078ae5b7ddd4f03.css.map*/