:root { --themeFontColor: #000; --viewportWidth: 100vw; --containerSidePadding: 55px; --viewportSidePadding: 55px; --containerWidth: calc(var(--viewportWidth) - var(--containerSidePadding)*2); --gridMargin: 30px; --gridCol4NoMargin: calc(var(--containerWidth)/3); --gridCol3: calc(var(--containerWidth)/4 - var(--gridMargin)*3/4); --gridCol4: calc(var(--containerWidth)/3 - var(--gridMargin)*2/3); --responsiveGridCol4: calc(33.33333% - var(--gridMargin)*2/3); --gridCol6: calc(var(--containerWidth)/2 - var(--gridMargin)*1/2); --instagramAspectRatio: 125%; --maxContentScaling: max(100vw, 1600px) } html[data-theme=dark] { --themeFontColor: #fff; background-color: #292a2e; color: #fff } html[data-theme=dark] body, html[data-theme=dark] input { color: #fff } @media only screen and (max-width:1023px) { :root { --containerSidePadding: 20px; --viewportSidePadding: 20px; --gridMargin: 20px } } @media only screen and (min-width:1024px)and (max-width:1199px) { :root { --containerSidePadding: 30px; --viewportSidePadding: 30px } } @media only screen and (min-width:1600px) { :root { --containerWidth: 1490px; --viewportSidePadding: calc(var(--containerSidePadding) + (var(--viewportWidth) - 1600px)/2) } } body.-scrollLock { height: 100vh; overflow: hidden; position: relative } .loginLink { display: flex; justify-content: center } [data-micro-anim] * { pointer-events: none } .artworkUploadedPopup, .c-getInspiration, .contactUsForm__container, .deleteArtworkConfirmation__container, .editProfilePopup__container { align-items: center; background-color: rgba(0, 0, 0, .6); display: none; height: 100%; justify-content: center; left: 0; overflow: auto; padding: 0 20px; position: fixed; top: 0; width: 100%; z-index: 29 } .c-camlinKit .c-camlinKit__imageWrapper .c-kit__image, .c-categoryBanner__image, .c-featuredArt__artworkPoster, .c-forBestResults__itemImage, .c-heritage__cardImg, .c-hobbyistsBanner__productPoster, .c-howToUse__itemImage, .c-invester__productImage, .c-kidsBanner__productImage, .c-makeTheMost__productImage, .c-productsUsed__itemImage, .c-trending__itemImage, .c-worksBestWith__productImage, .c-youCanAlsoTry__productImage, .earlyLearning__productImg, .memberModal__img, [data-page=aboutUs] .banner__img, [data-page=aboutUs] .banner__imgWrapper, [data-page=aboutUs] .banner__imgs, [data-page=aboutUs] .jointVenture__canvas, [data-page=glossaryPage] .wordExplanation__image, [data-page=glossaryPage] .wordExplanation__imageWrapper, [data-page=heritage] .timeline__yearImg, [data-page=home] .officeSupplies .officeSupplies__itemImage, [data-page=team] .member__img, html[data-page=paintingKits] .paintingKits__bannerImage { height: 100%; left: 0; position: absolute; top: 0; width: 100% } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeInput { background-color: #f9f9f9; border: 1px solid transparent; border-radius: 5px; color: #000; display: block; height: 50px; padding: 0 15px; width: 100% } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeInput::placeholder { color: #727272 } @media(hover:hover) { .c-getInspiration__submitButton:hover, .editProfilePopup__submitButton:hover, [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton:hover { background-color: #888 } } @media(max-width:767px) { .is-desktop { display: none !important } } @media(min-width:768px) { .is-phone { display: none !important } } @media(min-width:1024px) { .is-below-1024 { display: none !important } } @media(max-width:1023px) { .is-above-1023 { display: none !important } } @media screen and (min-width:321px) { .is-below-321 { display: none !important } } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; outline: inherit; padding: 0 } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none } table { border-collapse: collapse; border-spacing: 0 } body, html { text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-synthesis: none; width: 100% } * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: none; border-radius: 0; box-sizing: border-box; margin: 0; padding: 0 } *, :focus { outline: none } :focus { border: none } a, a:active, a:focus, a:hover, a:visited { text-decoration: none } input { -webkit-appearance: none; appearance: none; background-color: transparent; outline: none } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } img { object-fit: cover; object-position: center } .disable-pointer-events, .disable-pointer-events * { pointer-events: none !important } @font-face { font-display: block; font-family: LexendZetta-Light; font-style: normal; font-weight: 300; src: url(../assets/common/fonts/LexendZetta/LexendZetta-Light.ttf) format("truetype") } @font-face { font-display: block; font-family: LexendZetta-Medium; font-style: normal; font-weight: 300; src: url(../assets/common/fonts/LexendZetta/LexendZetta-Medium.ttf) format("truetype") } @font-face { font-display: block; font-family: NeueMontreal-Regular; font-style: normal; font-weight: 400; src: url(../assets/common/fonts/NeueMontreal/PPNeueMontreal-Regular.woff2) format("woff2"), url(../assets/common/fonts/NeueMontreal/PPNeueMontreal-Regular.woff) format("woff") } @font-face { font-display: block; font-family: NeueMontreal-Medium; font-style: normal; font-weight: 500; src: url(../assets/common/fonts/NeueMontreal/PPNeueMontreal-Medium.woff2) format("woff2"), url(../assets/common/fonts/NeueMontreal/PPNeueMontreal-Medium.woff) format("woff") } @font-face { font-display: block; font-family: NeueMontreal-Bold; font-style: normal; font-weight: 700; src: url(../assets/common/fonts/NeueMontreal/PPNeueMontreal-Bold.woff2) format("woff2"), url(../assets/common/fonts/NeueMontreal/PPNeueMontreal-Bold.woff) format("woff") } body, html, input, textarea { color: #000; font-family: NeueMontreal-Regular } a { color: currentColor } .font__topNav12 { font-size: 12px; letter-spacing: .02em; line-height: 20px } .c-header+.c-header .c-header__navLink, .c-productDetail__colorPickerHeading, .c-productDetail__packItemsHeading, .c-productDetail__productFeaturesHeading, .font__topNav15 { font-size: 15px; letter-spacing: .02em; line-height: 20px } .c-header:first-of-type .c-header__announcement .c-button__text, .c-header:first-of-type .c-header__announcementText, .c-header:first-of-type .c-header__link, .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOption, .font__topNav13 { color: #939393; font-size: 13px; line-height: 20px } .font__display240 { font-size: 240px; letter-spacing: -.05em; line-height: 1 } .font__display90 { font-size: 90px; letter-spacing: -.03em; line-height: 1 } .font__display50 { font-family: NeueMontreal-Medium; font-size: 50px; line-height: 1 } .c-quote__quotation-marks, .font__heading70, [data-page=aboutUs] .management__heading, [data-page=editProfile] .intro__defaultProfilePictureText { font-size: 70px; line-height: 1 } .c-heritage__heading, .c-showcaseBanner__title, .font__heading50, [data-page=aboutUs] .legacy__heading, [data-page=camlinError404] .error404__heading { font-size: 50px; line-height: 1 } .font__heading40, [data-page=contactUs] .careers__heading, [data-page=contactUs] .contactDetails__heading, [data-page=contactUs] .faqs__heading, [data-page=contactUs] .subscribe__subheading, [data-page=error404] .error404__heading, [data-page=glossaryPage] .wordList .word, [data-page=jointVenture] .jointVenture__sectionHeading { font-size: 40px; line-height: 1 } .c-featuredArticles__articleTitle, .c-productDetail__productPrice, .contactUsForm__submittedHeading, .font__title30, [data-page=aboutUs] .codeOfConduct__heading, [data-page=editArtwork] .editArtworkForm__thumbnailLabel:before, [data-page=editProfile] .editProfile__sectionHeading, [data-page=glossaryPage] .wordExplanation__title, [data-page=otherArtistArtwork] .gallery__heading, [data-page=profile] .artistsYouFollow__heading, [data-page=uploadArtwork] .uploadArtworkForm__thumbnailLabel:before { font-size: 30px; line-height: 1 } .font__title24 { font-size: 24px; line-height: 1 } .c-artistIntro__name, .c-fluidArtKit__name, .c-getInspiration__heading, .c-hobbyistsBanner__subheading, .c-invester__productName, .c-kidsBanner__headerSubtitle, .c-makeTheMost__productName, .c-productDetail__aboutProduct, .c-productDetail__productDescriptor, .c-productsUsed__heading, .c-subcategoryListing__introducedIn, .c-youCanAlsoTry__productName, .contactUsForm__heading, .deleteArtworkConfirmation__heading, .editProfilePopup__heading, .font__title20, [data-page=checkEmail] .checkEmail__heading, [data-page=contactUs] .latestNewsletter__title, [data-page=editProfile] .intro__artistName, [data-page=home] .officeSupplies .officeSupplies__subheading, [data-page=login] .loginForm__welcomeBackHeading, [data-page=otherArtistArtwork] .artwork__artistName, [data-page=pickNewPassword] .pickNewPasswordForm__heading, [data-page=profile] .intro__name, [data-page=resetPassword] .resetPasswordForm__heading, [data-page=tellUsAboutYourself] .tellUsAboutYourself__heading, [data-page=verifyEmail] .verifyEmail__heading { font-size: 20px; line-height: 25px } .c-artworkPreview__dropdownOption, .c-dropdownInput__label.-smallFont, .c-dropdownInput__option, .c-header__userDropdownOption, .c-header__userEmail, .c-liveTag, .c-productDetail__color__text, .c-productDetail__dropdownLabel, .c-productDetail__dropdownOption, .c-productDetail__dropdownOptionSelected, .c-productDetail__packItemDescriptor, .c-productDetail__packItemName, .c-productDetail__productFeatureDesc, .c-productDetail__productFeatureTitle, .c-searchPopup__resultText .subcopy, .c-textInput__label.-smallFont, .c-textareaInput__label.-smallFont, .editProfilePopup__input, .editProfilePopup__input::placeholder, .editProfilePopup__subheading, .editProfilePopup__textareaInput, .font__title13, [data-page=editArtwork] .uploadYourCreation__mediumName, [data-page=editArtwork] .uploadYourCreation__mediumSizeLimit, [data-page=editArtwork] .uploadYourCreation__subheading, [data-page=editProfile] .editProfile__checkboxText, [data-page=editProfile] .editProfile__input.-textarea, [data-page=login] .loginForm__input, [data-page=login] .loginForm__input::placeholder, [data-page=pickNewPassword] .pickNewPasswordForm__input, [data-page=pickNewPassword] .pickNewPasswordForm__input::placeholder, [data-page=resetPassword] .resetPasswordForm__input, [data-page=resetPassword] .resetPasswordForm__input::placeholder, [data-page=signUp] .signUpForm__input, [data-page=signUp] .signUpForm__input::placeholder, [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeInput, [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeOptions>*, [data-page=tellUsAboutYourself] .tellUsAboutYourself__input, [data-page=tellUsAboutYourself] .tellUsAboutYourself__input::placeholder, [data-page=uploadArtwork] .uploadYourCreation__mediumName, [data-page=uploadArtwork] .uploadYourCreation__mediumSizeLimit, [data-page=uploadArtwork] .uploadYourCreation__subheading { font-size: 13px; letter-spacing: .03em; line-height: 15px } .font__bodyCopy12 { font-size: 12px; letter-spacing: .02em; line-height: 20px } .-camlinPage .c-productDetail.-individual .c-productDetail__camlinRecommends .camlinRecommends__content .camlinRecommends__title, .c-artistIntro__about, .c-artistIntro__artistType, .c-artistIntro__instagram, .c-artistIntro__phoneEmailWrapper, .c-artistPreview__followButton, .c-artistPreview__followButton:before, .c-artistPreview__title, .c-artworkPreview__followButton, .c-artworkPreview__title, .c-backButton__text, .c-camlinKit .c-camlinKit__desc, .c-checkboxSwitch__text, .c-featuredArt__artistLink, .c-featuredArticle__subheading, .c-featuredArticles__articleReadingTime, .c-featuredArticles__articleTag, .c-featuredProduct__desc, .c-featuredProduct__itemsInsideDescriptor, .c-fluidArtKit__price, .c-header__userName, .c-heritage__cardDesc, .c-hobbyistsBanner__productPrice, .c-invester__productQuantity, .c-kit__itemsInsideDescriptor, .c-makeTheMost__productQuantity, .c-productDetail__firstIntroducedIn, .c-productDetail__packItem:before, .c-productsUsed__itemTitle, .c-quote__author, .c-quote__quote, .c-searchPopup__noResults, .c-searchPopup__resultText, .c-showcaseBanner__desc, .c-subcategoryListing__productName, .c-subcategoryListing__productPrice, .c-subcategoryListing__subtitle, .c-youCanAlsoTry__productQuantity, .contactUsForm__submittedSubheading, .earlyLearning__productName, .earlyLearning__productPrice, .editProfilePopup__inputLabel, .editProfilePopup__textareaLabel, .font__bodyCopy15, .memberModal__designation, .memberModal__detail, [data-page=aboutUs] .codeOfConduct__subheading, [data-page=aboutUs] .jointVenture__subheading, [data-page=aboutUs] .vision__cardDesc, [data-page=aboutUs] .vision__tag, [data-page=camlinError404] .error404__subheading, [data-page=codeOfConduct] .chairmansStatement__designation, [data-page=codeOfConduct] .chairmansStatement__text, [data-page=codeOfConduct] .intro__bulletPointHeading, [data-page=codeOfConduct] .intro__bulletPointIndex, [data-page=codeOfConduct] .intro__bulletPointSubheading, [data-page=contactUs] .contactDetails__address, [data-page=contactUs] .contactDetails__email, [data-page=contactUs] .contactDetails__tel, [data-page=contactUs] .latestNewsletter__heading, [data-page=contactUs] .subscribe__copy, [data-page=contactUs] .topics__subheading, [data-page=editProfile] .editProfile__input:not(.-textarea), [data-page=editProfile] .editProfile__inputLabel, [data-page=editProfile] .intro__artistType, [data-page=error404] .error404__subheading, [data-page=glossaryPage] .index__inner, [data-page=glossaryPage] .wordExplanation__definition, [data-page=heritage] .timeline__yearDesc, [data-page=jointVenture] .jointVenture__sectionDetail, [data-page=otherArtistArtwork] .artwork__artistType, [data-page=productDetail] .c-productDetail.-assorted .-camlinPackItemsRow #seeAll, [data-page=productDetail] .c-productDetail__colorPickerHeading .-selectedColor, [data-page=profile] .intro__about, [data-page=profile] .intro__artistType, [data-page=profile] .intro__instagram, [data-page=profile] .intro__phoneEmailWrapper, [data-page=profile] .uploadArtworkButton__text, [data-page=profile] .uploadArtwork__subheading, [data-page=showcaseLanding] .banner__subheading, [data-page=team] .member__name, [data-page=webStory] .banner__subheading, html[data-page=paintingKits] .paintingKits__bannerSubheading, html[data-page=techniques] .techniques__bannerSubheading { font-size: 15px; letter-spacing: .02em; line-height: 20px } .-camlinPage .c-productDetail.-individual .c-productDetail__camlinRecommends .camlinRecommends__content .camlinRecommends__desc, .c-artworkPreview__commentsCount, .c-checkboxSwitch__note, .c-footer__breadcrumbsLink, .c-footer__breadcrumbsSeperator, .c-header__breadcrumbsLink, .c-header__breadcrumbsSeperator, .c-invester__productDesc, .c-makeTheMost__productDesc, .c-productDetail__checkboxText, .c-productDetail__productCode, .c-textareaInput__input, .c-youCanAlsoTry__productDesc, .deleteArtworkConfirmation__subheading, .editProfilePopup__submitButtonText, .font__bodyCopy13, [data-page=artistLanding] .sharePopup__heading, [data-page=checkEmail] .checkEmail__message, [data-page=contactUs] .latestNewsletter__para, [data-page=contactUs] .subscribe__heading, [data-page=login] .loginForm__createAccountLink, [data-page=login] .loginForm__or, [data-page=otherArtistArtwork] .artwork__commentsCount, [data-page=otherArtistArtwork] .artwork__description, [data-page=otherArtistArtwork] .artwork__materialsUsed, [data-page=otherArtistArtwork] .artwork__publishedDate, [data-page=otherArtistArtwork] .artwork__surface, [data-page=pickNewPassword] .pickNewPasswordForm__loginLink, [data-page=previewArtwork] .previewArtwork__artworkDescription, [data-page=previewArtwork] .previewArtwork__materialsUsed, [data-page=previewArtwork] .previewArtwork__publishedDate, [data-page=previewArtwork] .previewArtwork__surface, [data-page=profile] .sharePopup__heading, [data-page=resetPassword] .resetPasswordForm__subheading, [data-page=signUp] .signUpForm__loginLink, [data-page=signUp] .signUpForm__or, [data-page=team] .member__designation, [data-page=tellUsAboutYourself] .tellUsAboutYourself__createAccountLink, [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submittingText, [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButtonText, [data-page=verifyEmail] .verifyEmail__message, [data-page=webStory] .webStory__storyWrapper .sharePopup__heading, html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__heading { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } .c-button .c-button__text, .c-cancelButton, .c-getInspiration__cancelButton, .editProfilePopup__cancelButton, .editProfilePopup__radioButtonText, .font__cta15, [data-page=contactUs] .subscribe__formInput { font-size: 15px; line-height: 18px } .c-button.-font__cta13 .c-button__text, .font__cta13 { font-size: 13px; letter-spacing: .03em; line-height: 15px } .c-artistPreview__subtitle, .c-artworkPreview__subtitle, .c-dropdownInput__input, .c-getInspiration__categoryName, .c-productDetail__shippingInfo, .c-seo__text, .c-subcategoryListing__recommendedFor, .c-tagInput__input, .c-tagInput__selectedTag, .c-tagInput__tagOption, .c-textInput__input, .c-textareaInput__charLimit, .font__disclaimer13, [data-page=contactUs] .contactDetails__telAvailability { font-size: 13px; line-height: 1 } .c-hobbyistsBanner__introHeadingPartTwo, .font__unique144 { font-family: LexendZetta-Light; font-size: 144px; letter-spacing: -.2em; line-height: 1; text-transform: uppercase } @media(max-width:1023px) { .c-hobbyistsBanner__introHeadingPartTwo, .font__unique144 { font-size: 100px } } .c-hobbyistsBanner__introHeadingPartOne, .font__unique40 { font-family: LexendZetta-Light; font-size: 40px; letter-spacing: -.2em; line-height: 1; text-transform: uppercase } @media(max-width:1023px) { .c-hobbyistsBanner__introHeadingPartOne, .font__unique40 { font-size: 30px } } .artworkUploadedPopup__heading, .c-dropdownInput__label, .c-tagInput__label, .c-textInput__label, .c-textareaInput__label, .font__footer20 { font-size: 20px; line-height: 1 } .font__footer15 { font-size: 15px; letter-spacing: .01em; line-height: 25px } @media(max-width:1023px) { .font__footer15 { letter-spacing: 0; line-height: 20px } } .font__footer13, [data-page=login] .loginForm__forgotPasswordLink, [data-page=resetPassword] .resetPasswordForm__returnToLoginLink { font-size: 13px; letter-spacing: .05em; line-height: 20px } @media(max-width:1023px) { .font__footer13, [data-page=login] .loginForm__forgotPasswordLink, [data-page=resetPassword] .resetPasswordForm__returnToLoginLink { letter-spacing: 0; line-height: 15px } } .font__bottomNav11 { font-size: 11px; letter-spacing: 0; line-height: 1 } .c-footer__subscribeFormSuccessMessage, .c-inputError__text, .editProfilePopup__forgotPasswordLink, .editProfilePopup__passwordCondition, .font__form11, [data-page=artistLanding] .sharePopup__linkCopiedMessage, [data-page=contactUs] .latestNewsletter__date, [data-page=contactUs] .subscribe__formSuccessMessage, [data-page=editArtwork] .editArtworkForm__uploadNote, [data-page=pickNewPassword] .pickNewPasswordForm__passwordCondition, [data-page=profile] .sharePopup__linkCopiedMessage, [data-page=signUp] .signUpForm__passwordCondition, [data-page=tellUsAboutYourself] .tellUsAboutYourself__subscribeToEmailsCheckboxText, [data-page=uploadArtwork] .uploadArtworkForm__uploadNote, [data-page=webStory] .webStory__storyWrapper .sharePopup__linkCopiedMessage, html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__linkCopiedMessage { font-size: 11px; letter-spacing: .03em; line-height: 13px } .c-submitButton__submittingText, .c-submitButton__text, .font__button13, [data-page=checkEmail] .checkEmail__reenterEmailLink, [data-page=verifyEmail] .verifyEmail__reenterEmailLink { font-size: 13px; letter-spacing: .02em; line-height: 1 } @keyframes scaleRotateAnim { 0% { transform: scale(1) rotate(0deg) } 50% { transform: scale(1.05) rotate(20deg) } to { transform: scale(1) rotate(0deg) } } @keyframes rotateAnim { 0% { transform: rotate(0deg) } to { transform: rotate(1turn) } } @keyframes scaleAnim { 0% { transform: scale(1) } 50% { transform: scale(1.1) } to { transform: scale(1) } } .anim-imageContainer { overflow: hidden; position: relative } .anim-imageContainer .anim-image, .anim-imageContainer .anim-imageWrapper { height: 100%; left: 0; position: absolute; top: 0; transition-duration: 0s; transition-property: opacity, transform; transition-timing-function: cubic-bezier(.82, 0, .175, 1); width: 100% } .anim-imageContainer .anim-imageWrapper { opacity: 0; overflow: hidden; transform: translate3d(0, 100%, 0); will-change: opacity, transform } .anim-imageContainer .anim-image { object-fit: cover; object-position: center; transform: scale(1.1) translate3d(0, -60%, 0); will-change: transform } .animateImagesIn .anim-imageContainer .anim-image, .animateImagesIn .anim-imageContainer .anim-imageWrapper { transition-duration: 1.4s } .animateImagesIn .anim-imageContainer .anim-image, .animateImagesIn .anim-imageContainer .anim-imageWrapper { opacity: 1; transform: translateZ(0) } .-videoContainer { cursor: pointer } .-videoContainer:after { background-image: url(../assets/common/vectors/icon_play.svg); background-position: 50%; background-size: contain; content: ""; height: 40px; left: calc(50% - 20px); position: absolute; top: calc(50% - 20px); width: 40px; will-change: transform } .-videoContainer.is-playing:after { opacity: 0 } [postload-image][with-transition] { opacity: 0; transition: opacity .32s cubic-bezier(.39, .575, .565, 1); will-change: opacity } [postload-image][with-transition].is-loaded { opacity: 1 } [observer-animation=gif] { z-index: 21 } @media(hover:hover) { .anim-hoverFadeContainer { cursor: pointer } .anim-hoverFade, .anim-hoverFadeContainer .anim-hoverFade { opacity: 1; transition: opacity .2s ease } .anim-hoverFade:hover, .anim-hoverFadeContainer:hover .anim-hoverFade { opacity: .6 !important } .anim-hoverUnderlineContainer .anim-hoverUnderline { opacity: 1; position: relative; transition: opacity .5s ease } .anim-hoverUnderlineContainer .anim-hoverUnderline:after { background-color: currentColor; content: ""; height: 1px; left: 0; position: absolute; top: calc(100% + 1px); transform: scaleX(0); transform-origin: top right; transition: transform .6s cubic-bezier(.19, 1, .22, 1); width: 100% } .anim-hoverUnderlineContainer:hover .anim-hoverUnderline { opacity: .6 } .anim-hoverUnderlineContainer:hover .anim-hoverUnderline:after { transform: scaleX(1); transform-origin: top left } .anim-hoverArrowContainer:hover .anim-hoverArrow { animation-duration: .6s; animation-fill-mode: forwards; animation-name: animateArrowOnMouseover; animation-timing-function: cubic-bezier(.39, .575, .565, 1) } .anim-hoverBoxArrowContainer:hover { background-color: #000; color: #fff; transition: background-color .1s cubic-bezier(.26, 1, .48, 1) } .anim-hoverBoxArrowContainer:hover path { fill: #fff } .anim-hoverBoxArrowContainer:hover .anim-hoverBoxArrowWrapper { overflow: hidden } .anim-hoverBoxArrowContainer:hover .anim-hoverBoxArrowWrapper.c-button__arrowWrapper { border-left: 1px solid #fff } .anim-hoverBoxArrowContainer:hover .anim-hoverBoxArrow { animation-duration: .6s; animation-fill-mode: forwards; animation-name: animateArrowOnMouseover; animation-timing-function: cubic-bezier(.39, .575, .565, 1) } @keyframes animateArrowOnMouseover { 0% { opacity: 1; transform: translateX(0) } 50% { opacity: 0; transform: translate3d(8px, 0, 0) } 51% { opacity: 0; transform: translate3d(-8px, 0, 0) } to { opacity: 1; transform: translateX(0) } } } html[data-os=Windows] .anim-line { will-change: unset !important } html[data-theme=dark] .anim-line { background-color: rgba(95, 98, 107, .5) } .anim-line { background-color: #000; position: absolute; transition-duration: 0s; transition-property: transform; transition-timing-function: cubic-bezier(.39, .575, .565, 1); will-change: transform; z-index: 20 } @media(min-width:1025px) { .anim-line.-aboveTheFold { transition-delay: .5s } } .anim-line.-top { top: 0 } .anim-line.-bottom, .anim-line.-top { height: 1px; left: 0; transform: scaleX(.001); transform-origin: top center; width: 100% } .anim-line.-bottom { bottom: 0 } .anim-line.-left { left: 0 } .anim-line.-left, .anim-line.-right { height: 100%; top: 0; transform: scaleY(.001); transform-origin: left center; width: 1px } .anim-line.-right { right: 0 } .anim-line.-middle { height: 100%; left: 50%; top: 0; transform: scaleY(.001); transform-origin: left center; width: 1px } .anim-line[transform-origin="top left"] { transform-origin: top left !important } .anim-line.animateSingleLineIn, .animateAllLinesIn .anim-line { transform: translateZ(0); transition-duration: .6s } .-linearEasing { transition-timing-function: linear } .-delayBy1Line { transition-delay: .6s } .-delayBy2Line { transition-delay: 1.2s } .-delayBy3Line { transition-delay: 1.8s } .-delayBy4Line { transition-delay: 2.4s } .-delayBy5Line { transition-delay: 3s } .-delayBy6Line { transition-delay: 3.6s } .-delayBy7Line { transition-delay: 4.2s } .-delayBy8Line { transition-delay: 4.8s } .-delayBy9Line { transition-delay: 5.4s } .anim-paragraph[observer-animation=paragraph] { opacity: 0 } .anim-paragraph[observer-animation=paragraph] .word { transform-origin: left center } .anim-paragraph[observer-animation=paragraph] .wordWrapper { display: inline-flex; margin-bottom: -5px; overflow: hidden; padding-bottom: 5px } .anim-paragraph[observer-animation=paragraph]:not(.is-unobserved) { will-change: opacity } .anim-paragraph[observer-animation=paragraph]:not(.is-unobserved) .word { will-change: opacity, transform } [observer-animation=fadeInUpPara] { opacity: 0; transform: translate3d(0, 10px, 0); will-change: opacity, transform } [observer-animation=fadeInUpPara].fadeInUpPara { animation-duration: .6s; animation-fill-mode: forwards; animation-name: fadeInUp; animation-timing-function: cubic-bezier(.77, 0, .175, 1) } .anim-title[observer-animation=title] { opacity: 0 } .anim-title[observer-animation=title] .wordWrapper { display: inline-flex; margin-bottom: -17px; overflow: hidden; padding-bottom: 17px } .anim-title[observer-animation=title] .word { transform-origin: left center; vertical-align: top } .anim-title[observer-animation=title]:not(.is-unobserved) { will-change: opacity } .anim-title[observer-animation=title]:not(.is-unobserved) .word { will-change: opacity, transform } .dur__100 { animation-duration: .1s } .dur__200 { animation-duration: .2s } .dur__300 { animation-duration: .3s } .dur__400 { animation-duration: .4s } .dur__500 { animation-duration: .5s } .dur__600 { animation-duration: .6s } .dur__700 { animation-duration: .7s } .dur__800 { animation-duration: .8s } .dur__900 { animation-duration: .9s } .dur__1000 { animation-duration: 1s } .dur__1100 { animation-duration: 1.1s } .dur__1200 { animation-duration: 1.2s } .dur__1300 { animation-duration: 1.3s } .dur__1400 { animation-duration: 1.4s } .dur__1500 { animation-duration: 1.5s } .dur__1600 { animation-duration: 1.6s } .dur__1700 { animation-duration: 1.7s } .dur__1800 { animation-duration: 1.8s } .dur__1900 { animation-duration: 1.9s } .dur__2000 { animation-duration: 2s } .dur__2100 { animation-duration: 2.1s } .dur__2200 { animation-duration: 2.2s } .dur__2300 { animation-duration: 2.3s } .dur__2400 { animation-duration: 2.4s } .dur__2500 { animation-duration: 2.5s } .dur__2600 { animation-duration: 2.6s } .dur__2700 { animation-duration: 2.7s } .dur__2800 { animation-duration: 2.8s } .dur__2900 { animation-duration: 2.9s } .dur__3000 { animation-duration: 3s } .dur__3100 { animation-duration: 3.1s } .dur__3200 { animation-duration: 3.2s } .dur__3300 { animation-duration: 3.3s } .dur__3400 { animation-duration: 3.4s } .dur__3500 { animation-duration: 3.5s } .dur__3600 { animation-duration: 3.6s } .dur__3700 { animation-duration: 3.7s } .dur__3800 { animation-duration: 3.8s } .dur__3900 { animation-duration: 3.9s } .dur__4000 { animation-duration: 4s } .dur__4100 { animation-duration: 4.1s } .dur__4200 { animation-duration: 4.2s } .dur__4300 { animation-duration: 4.3s } .dur__4400 { animation-duration: 4.4s } .dur__4500 { animation-duration: 4.5s } .dur__4600 { animation-duration: 4.6s } .dur__4700 { animation-duration: 4.7s } .dur__4800 { animation-duration: 4.8s } .dur__4900 { animation-duration: 4.9s } .dur__5000 { animation-duration: 5s } .del__20 { animation-delay: 20ms } .del__40 { animation-delay: 40ms } .del__60 { animation-delay: 60ms } .del__80 { animation-delay: 80ms } .del__100 { animation-delay: .1s } .del__120 { animation-delay: .12s } .del__140 { animation-delay: .14s } .del__160 { animation-delay: .16s } .del__180 { animation-delay: .18s } .del__200 { animation-delay: .2s } .del__220 { animation-delay: .22s } .del__240 { animation-delay: .24s } .del__260 { animation-delay: .26s } .del__280 { animation-delay: .28s } .del__300 { animation-delay: .3s } .del__320 { animation-delay: .32s } .del__340 { animation-delay: .34s } .del__360 { animation-delay: .36s } .del__380 { animation-delay: .38s } .del__400 { animation-delay: .4s } .del__420 { animation-delay: .42s } .del__440 { animation-delay: .44s } .del__460 { animation-delay: .46s } .del__480 { animation-delay: .48s } .del__500 { animation-delay: .5s } .del__520 { animation-delay: .52s } .del__540 { animation-delay: .54s } .del__560 { animation-delay: .56s } .del__580 { animation-delay: .58s } .del__600 { animation-delay: .6s } .del__620 { animation-delay: .62s } .del__640 { animation-delay: .64s } .del__660 { animation-delay: .66s } .del__680 { animation-delay: .68s } .del__700 { animation-delay: .7s } .del__720 { animation-delay: .72s } .del__740 { animation-delay: .74s } .del__760 { animation-delay: .76s } .del__780 { animation-delay: .78s } .del__800 { animation-delay: .8s } .del__820 { animation-delay: .82s } .del__840 { animation-delay: .84s } .del__860 { animation-delay: .86s } .del__880 { animation-delay: .88s } .del__900 { animation-delay: .9s } .del__920 { animation-delay: .92s } .del__940 { animation-delay: .94s } .del__960 { animation-delay: .96s } .del__980 { animation-delay: .98s } .del__1000 { animation-delay: 1s } .del__1020 { animation-delay: 1.02s } .del__1040 { animation-delay: 1.04s } .del__1060 { animation-delay: 1.06s } .del__1080 { animation-delay: 1.08s } .del__1100 { animation-delay: 1.1s } .del__1120 { animation-delay: 1.12s } .del__1140 { animation-delay: 1.14s } .del__1160 { animation-delay: 1.16s } .del__1180 { animation-delay: 1.18s } .del__1200 { animation-delay: 1.2s } .del__1220 { animation-delay: 1.22s } .del__1240 { animation-delay: 1.24s } .del__1260 { animation-delay: 1.26s } .del__1280 { animation-delay: 1.28s } .del__1300 { animation-delay: 1.3s } .del__1320 { animation-delay: 1.32s } .del__1340 { animation-delay: 1.34s } .del__1360 { animation-delay: 1.36s } .del__1380 { animation-delay: 1.38s } .del__1400 { animation-delay: 1.4s } .del__1420 { animation-delay: 1.42s } .del__1440 { animation-delay: 1.44s } .del__1460 { animation-delay: 1.46s } .del__1480 { animation-delay: 1.48s } .del__1500 { animation-delay: 1.5s } .del__1520 { animation-delay: 1.52s } .del__1540 { animation-delay: 1.54s } .del__1560 { animation-delay: 1.56s } .del__1580 { animation-delay: 1.58s } .del__1600 { animation-delay: 1.6s } .del__1620 { animation-delay: 1.62s } .del__1640 { animation-delay: 1.64s } .del__1660 { animation-delay: 1.66s } .del__1680 { animation-delay: 1.68s } .del__1700 { animation-delay: 1.7s } .del__1720 { animation-delay: 1.72s } .del__1740 { animation-delay: 1.74s } .del__1760 { animation-delay: 1.76s } .del__1780 { animation-delay: 1.78s } .del__1800 { animation-delay: 1.8s } .del__1820 { animation-delay: 1.82s } .del__1840 { animation-delay: 1.84s } .del__1860 { animation-delay: 1.86s } .del__1880 { animation-delay: 1.88s } .del__1900 { animation-delay: 1.9s } .del__1920 { animation-delay: 1.92s } .del__1940 { animation-delay: 1.94s } .del__1960 { animation-delay: 1.96s } .del__1980 { animation-delay: 1.98s } .del__2000 { animation-delay: 2s } @keyframes floating { 0% { transform: translate(0) } 50% { transform: translateY(8px) } to { transform: translate(0) } } .floating { animation-duration: 3s; animation-iteration-count: infinite; animation-name: floating; animation-timing-function: ease-in-out } [observer-animation=fadeInUp] { opacity: 0; transform: translate3d(0, 10px, 0); will-change: opacity, transform } [observer-animation=fadeInUp].fadeInUp { animation-duration: .4s; animation-fill-mode: forwards; animation-name: fadeInUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1) } [observer-animation=fadeInUp].fadeInUp.-sineOut { animation-timing-function: cubic-bezier(.39, .575, .565, 1) } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 10px, 0) } to { opacity: 1; transform: translateZ(0) } } @keyframes fadeInUp20 { 0% { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } @keyframes fadeInUp30 { 0% { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } } @keyframes fadeInUp40 { 0% { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: translateY(0) } } html[data-theme=dark] .c-headerWrapper { background-color: #292a2e } html[data-theme=dark] .c-headerWrapper svg path { fill: #fff } html[data-theme=dark] .c-header__logo.-dark { display: block } html[data-theme=dark] .c-header__logo.-light { display: none } html[data-theme=dark] .c-header.-camlin .c-header__announcement .c-button__text { color: #888 } .c-header__logo.-dark { display: none } .c-header__logo.-light { display: block } .c-headerWrapper { background-color: #fff; left: 0; position: fixed; right: 0; top: 0; width: 100%; will-change: transform; z-index: 27 } .c-headerWrapper.-signedIn .c-header__link.-signIn { display: none } .c-headerWrapper.-productOpen { max-height: 550px; position: fixed !important; transform: translateY(0) !important; transition: transform .4s cubic-bezier(.785, .135, .15, .86) } html.-hasStickySecondaryMenu .c-headerWrapper { background-color: transparent; position: absolute } html.-hasStickySecondaryMenu .c-header__stickyWrapper { background-color: #fff; position: sticky; top: 0 } .c-header { margin: 0 auto; max-width: 1600px; padding: 0 var(--containerSidePadding) } .c-header__userImage { border-radius: 50% } .c-header__user { align-items: center; display: flex; height: 100% } .c-header__userDropdown.is-opened .c-header__userDropdownArrow { transform: rotate(180deg) } .c-header__userDropdownButton { align-items: center; cursor: pointer; display: flex } .c-header__userDropdownArrow { margin-left: 8px } .c-header__userDropdownOptions { background-color: #fff; border-left: 1px solid #000; border-right: 1px solid #000; height: 0; overflow: hidden; position: absolute; right: 0; top: calc(100% + 1px) } .c-header__userDropdownOptions:before { background-color: #000; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 100% } .c-header__userProfilePreview { align-items: center; backface-visibility: hidden; display: flex; padding: 20px; will-change: transform } .c-header__userNameAndEmailWrapper { margin-left: 9px } .c-header__userName { color: #000 } .c-header__userEmail { color: #888; margin-top: 5px } .c-header__userDropdownOption { align-items: center; border-top: 1px solid #c4c4c4; display: flex; padding: 20px } .c-header__userDropdownOptionText { color: #000; margin-left: 12px } .c-header__userDropdownOption:hover { background-color: #f3f3f3 } .c-header:first-of-type { position: relative; z-index: 32 } .c-header:first-of-type .c-header__inner { align-items: center; display: flex; height: 45px; justify-content: space-between; position: relative } .c-header:first-of-type .c-header__inner>:not(.c-header__announcement) { position: relative; z-index: 1 } .c-header:first-of-type .c-header__announcement { align-items: center; display: flex; display: none !important; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; z-index: 0 } .c-header:first-of-type .c-header__announcementText { color: #888 } .c-header:first-of-type .c-header__announcement .c-button.-underline { padding-bottom: 0 } .c-header:first-of-type .c-header__announcement .c-button__text { color: #000 } .c-header:first-of-type .c-header__announcement .c-button .c-button__line.-bottom { bottom: 1px } .c-header:first-of-type .c-header__links { align-items: center; display: flex; display: none !important; height: 100% } .c-header:first-of-type .c-header__links>:not(:first-child) { margin-left: 8px } .c-header:first-of-type .c-header__link { color: #000 } .c-header:first-of-type.-camel .c-header__logo { width: 70px } @media(max-width:1023px) { .c-header:first-of-type.-camel .c-header__logo { width: 54px } } .c-header:first-of-type.-camel+.c-header.-camlin .c-header__logo { width: 85px } @media(max-width:1023px) { .c-header:first-of-type.-camel+.c-header.-camlin .c-header__logo { width: 84px } } .c-header:first-of-type.-camlin .c-header__logo { width: 55px } @media(max-width:1023px) { .c-header:first-of-type.-camlin .c-header__logo { height: auto; width: 50px } } .c-header:first-of-type.-camlin+.c-header.-camel .c-header__logo { width: 85px } @media(max-width:1023px) { .c-header:first-of-type.-camlin+.c-header.-camel .c-header__logo { height: auto; width: 68px } } .c-header+.c-header .c-header__inner { align-items: center; display: flex; height: 63px; justify-content: space-between; position: relative } .c-header+.c-header .c-header__nav { align-items: center; display: flex; height: 100%; justify-content: center; left: 0; pointer-events: none; position: absolute; top: 0; width: 100% } .c-header+.c-header .c-header__nav>:not(:first-child) { margin-left: 20px } .c-header+.c-header .c-header__navLink { align-items: center; display: flex; height: 100%; pointer-events: auto; position: relative } .c-header+.c-header .c-header__navLink.active { color: #e1251b } .c-header+.c-header .c-header__navLink.active:after { background-color: #e1251b; bottom: 0; content: ""; height: 3px; left: 0; opacity: 1; position: absolute; -webkit-transition: .3s cubic-bezier(.77, 0, .175, 1); -o-transition: .3s cubic-bezier(.77, 0, .175, 1); transition: .3s cubic-bezier(.77, 0, .175, 1); width: 100% } .c-header+.c-header .c-header__navLink.-dropdownOption { cursor: pointer; position: relative } .c-header+.c-header .c-header__navLink.-dropdownOption.-opened { cursor: auto } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownIcon, .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__subDropdownIcon { height: 7px; margin-left: 5px; transform-origin: center center; width: 12px; z-index: -1 } .c-header+.c-header .c-header__navLink.-dropdownOption:hover:before { background-image: url(../assets/common/vectors/icon_dropdown-arrow-red.svg) } @media(hover:hover) { .c-header+.c-header .c-header__navLink.-dropdownOption:hover { color: #e1251b; z-index: 10 } .c-header+.c-header .c-header__navLink.-dropdownOption:hover .c-header__dropdownIcon { transform: rotate(-180deg) } .c-header+.c-header .c-header__navLink.-dropdownOption:hover .c-header__dropdownIcon path { fill: #e1251b } } .c-header+.c-header .c-header__navLink.-dropdownOption.-opened { color: #e1251b } .c-header+.c-header .c-header__navLink.-dropdownOption.-opened .c-header__dropdownIcon { transform: rotate(-180deg) } .c-header+.c-header .c-header__navLink.-dropdownOption.-opened .c-header__dropdownIcon path { fill: #e1251b } .c-header+.c-header .c-header__navLink.-dropdownOption.active { color: #e1251b } .c-header+.c-header .c-header__navLink.-dropdownOption.active .c-header__dropdownIcon path { fill: #e1251b } .c-header+.c-header .c-header__navLink.-dropdownOption.active:after { width: 100% } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOption { text-wrap: pretty; border-bottom: 1px solid #e3e3e3; color: #000; display: flex; font-size: 15px; letter-spacing: .02em; line-height: 20px; max-width: 177px; padding-bottom: 8px; padding-top: 8px; position: relative } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOption:hover { color: #000 } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOption:hover .c-header__subDropdownIcon { rotate: 180deg } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOption.-hasSubOptions { align-items: flex-start; flex-direction: column } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOption.-hasSubOptions:hover .c-header__subDropdown { display: flex } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__subDropdown { display: none; flex-direction: column; gap: 4px; margin-top: 8px } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__subDropdown.-open { display: flex; flex-direction: column; gap: 4px } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__subDropdownOption { font-size: 12px; letter-spacing: .02em; line-height: 20px; padding: 4px 0; text-decoration: none; transition: color .2s ease } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__subDropdownOption:hover { color: #000 } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOptions { background-color: #fff; border-bottom: 0; border-left: 1px solid #000; border-right: 1px solid #000; height: 0; opacity: 0; overflow: hidden; padding-left: 24px; padding-right: 24px; position: absolute; top: calc(100% - 1px); transition: height .25s ease-out } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOptionsContainer { min-width: 150px; width: max-content } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOptions--split-columns { display: flex; gap: 15px; max-width: 402px } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOptions .c-header__dropdownOptionsContainer:before { content: ""; display: block; padding-top: 24px } .c-header+.c-header .c-header__navLink.-dropdownOption .c-header__dropdownOptions .c-header__dropdownOptionsContainer:after { content: ""; display: block; padding-bottom: 40px } .c-header+.c-header .c-header__navLink.-dropdownOption:not(:last-child) .c-header__dropdownOptions { left: -15px } .c-header+.c-header .c-header__navLink.-dropdownOption:last-child .c-header__dropdownOptions { right: -15px } @media(hover:hover) { .c-header+.c-header .c-header__navLink:hover span { color: #e1251b } } .c-header+.c-header .c-header__search { align-items: center; display: flex; height: 100%; justify-content: center; padding: 0; position: relative } @media(max-width:1023px) { .c-header+.c-header .c-header__search { padding: 0; width: 55px } } @media(hover:hover) { .c-header+.c-header .c-header__search:hover .c-header__searchIcon { opacity: .6 } } .c-header+.c-header .c-header__search a { align-items: center; display: flex; height: 100%; justify-content: center; width: 76px } .c-header+.c-header .c-header__search .c-header-closeSearch { display: none } .c-header+.c-header .c-header__search .c-header__searchIcon { display: flex } .c-header+.c-header .c-header__search .c-header__searchIcon svg, .c-header+.c-header .c-header__searchIcon { height: 16px; width: 16px } .c-header__logo { object-fit: contain } .c-header__camlin_logo { height: 15px; overflow: hidden } .c-header__camlin_logo .c-header__camlin_logoText { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px; transform: translateY(50px) } .-hasStickySecondaryMenu .c-headerWrapper.-productOpen { height: 120px !important } @media only screen and (max-width:1134px)and (min-width:1024px) { .c-header+.c-header .c-header__navLink { font-size: 12px; line-height: 12px } } @media(max-width:1023px) { .product-menu--accordion { padding-top: 0 !important; padding-inline: 16px !important } .product-menu--accordion.-opened { z-index: 999 } .product-menu--accordion .product-menu__close { background: #fff; cursor: pointer; display: inline-block; display: block; font-size: 24px; line-height: 1; margin-left: auto; padding-bottom: 10px; padding-top: 32px; position: sticky; text-align: right; top: 0; width: 100%; z-index: 2 } .product-menu--accordion .product-menu__listing { margin-block-start: 40px } .product-menu--accordion .product-menu__title { color: #000; font-size: 40px; line-height: 1 } .product-menu--accordion .product-menu__section { border-bottom: 1px solid #c4c4c4 } .product-menu--accordion .product-menu__section:first-child { border-top: 1px solid #c4c4c4 } .product-menu--accordion .product-menu__section--open .product-menu__section-icon { transform: rotateX(180deg) } .product-menu--accordion .product-menu__section-header { align-items: center; color: #000; cursor: pointer; display: flex; font-size: 18px; font-weight: 500; gap: 20px; justify-content: space-between; padding-block: 24px; padding-inline-start: 12px; position: relative; transition: all .2s ease } .product-menu--accordion .product-menu__section-icon { display: inline-block; transition: transform .4s ease; width: 20px } .product-menu--accordion .product-menu__section-content { height: 0; overflow: hidden; transition: height .3s ease } .product-menu--accordion .product-menu__list { padding-bottom: 10px; padding-inline-end: 0; padding-inline-start: 12px } .product-menu--accordion .product-menu__item:first-child .product-menu__link { padding-top: 3px } .product-menu--accordion .product-menu__link { color: #000; display: block; font-size: 15px; letter-spacing: .02em; line-height: 20px; padding: 15px 12px; text-decoration: none } .product-menu--accordion .product-menu__link.--sub { display: flex; justify-content: space-between; padding-inline: 12px } .product-menu--accordion .product-menu__subLink { color: #000; display: block; font-size: 12px; letter-spacing: .02em; line-height: 20px; padding: 0 12px; text-decoration: none } .product-menu--accordion .product-menu__subAccordion--open .product-menu__section-subicon { transform: rotateX(180deg); transition: transform .4s ease } .product-menu--accordion .product-menu__subAccordion-header { align-items: center; background: #f8f8f8; border-radius: 4px; color: #000; cursor: pointer; display: flex; font-size: 15px; font-weight: 500; justify-content: space-between; margin-bottom: 6px; padding-block: 12px; padding-inline: 12px; transition: all .2s ease } .product-menu--accordion .product-menu__subAccordion-content { height: 0; overflow: hidden; transition: height .3s ease } .product-menu--accordion .product-menu__subAccordion-link { color: #000; display: block; font-size: 14px; padding: 2px 0; text-decoration: none } .product-menu--accordion .product-menu__subAccordion-link:hover { color: #727272 } } html[data-theme=dark] .c-footer { background-color: #202124 } .c-footer { background-color: #000; position: relative } .c-footer__inner { margin: 0 auto; max-width: 1600px; padding-bottom: 30px; padding-left: var(--containerSidePadding); padding-right: var(--containerSidePadding); padding-top: 30px } @media(max-width:1023px) { .c-footer__inner { padding-bottom: 90px; padding-top: 36px } } .c-footer__breadcrumbs { align-items: center; display: none } @media(max-width:1023px) { .c-footer__breadcrumbs { background-color: hsla(0, 0%, 100%, .1); flex-flow: row wrap; margin-left: -20px; margin-top: -36px; padding: 20px; width: 100vw; width: calc(100% + 40px) } } @media(min-width:767px)and (max-width:1023px) { .c-footer__breadcrumbs { padding-right: 30% } } @media(max-width:1023px) { .c-footer__breadcrumbs+.c-footer__nav { margin-top: 20px } } @media(min-width:1024px) { .c-footer__breadcrumbs+.c-footer__nav { margin-top: 45px } } .c-footer__breadcrumbsSeperator { padding-left: 13px; padding-right: 13px } @media(max-width:1023px) { .c-footer__breadcrumbsSeperator { padding-left: 11px; padding-right: 11px } } .c-footer__breadcrumbsLink, .c-footer__breadcrumbsSeperator { color: #888 } @media(max-width:1023px) { .c-footer__breadcrumbsLink, .c-footer__breadcrumbsSeperator { line-height: 24px } } .c-footer__nav { display: flex; flex-flow: row wrap; width: 100% } @media(max-width:1023px) { .c-footer__nav { margin-top: -20px } } @media(min-width:1024px) { .c-footer__nav>:nth-child(n+7) { margin-top: 25px } } .c-footer__navColumn { flex-basis: 16.6666666667%; flex-shrink: 0 } @media(max-width:1023px) { .c-footer__navColumn { flex-basis: 100% } .c-footer__navGroup { border-bottom: 1px solid #242424; display: block; padding-bottom: 10px; padding-top: 20px } .c-footer__navGroup.is-expanded .c-footer__navGroupHeader:after { content: "-" } } @media(min-width:1024px) { .c-footer__navGroup:not(.is-below-1024)+.c-footer__navGroup { margin-top: 50px } } @media(max-width:1023px) { .c-footer__navGroup.-home .c-footer__navGroupHeader:after { display: none } .c-footer__navGroup.-home .c-footer__navGroupHeader svg { height: 10px; position: absolute; right: 0; top: calc(50% - 5px); width: 12px } } .c-footer__navGroupHeader { color: #fff } @media(max-width:1023px) { .c-footer__navGroupHeader { font-size: 20px; line-height: 1; position: relative } .c-footer__navGroupHeader:after { color: #fff; content: "+"; position: absolute; right: 0; top: 0 } } @media(min-width:1024px) { .c-footer__navGroupHeader { font-size: 15px; letter-spacing: .01em; line-height: 25px } } @media(min-width:1024px)and (max-width:1023px) { .c-footer__navGroupHeader { letter-spacing: 0; line-height: 20px } } .c-footer__navGroupHeader+.c-footer__navGroupLinks { margin-top: 25px } @media(max-width:1023px) { .c-footer__navGroupHeader+.c-footer__navGroupLinks { margin-top: 0 } } .c-footer__navGroupLinks { display: flex; flex-direction: column } @media(max-width:1023px) { .c-footer__navGroupLinks { height: 0; overflow: hidden; position: relative } .c-footer__navGroupLinks:before { content: ""; padding-top: 20px } .c-footer__navGroupLinks:after { content: ""; padding-bottom: 20px } .c-footer__navGroupLinks>:not(:first-child) { margin-top: 20px } } .c-footer__navGroupLink { color: #888 } @media(max-width:1023px) { .c-footer__navGroupLink { font-size: 15px; letter-spacing: .01em; line-height: 25px } } @media(max-width:1023px)and (max-width:1023px) { .c-footer__navGroupLink { letter-spacing: 0; line-height: 20px } } @media(min-width:1024px) { .c-footer__navGroupLink { font-size: 13px; letter-spacing: .05em; line-height: 20px } } @media(min-width:1024px)and (max-width:1023px) { .c-footer__navGroupLink { letter-spacing: 0; line-height: 15px } } .c-footer__subscribe { width: 100% } @media(min-width:1024px) { .c-footer__subscribe { border-bottom: 1px solid #242424; border-top: 1px solid #242424; display: flex; margin-top: 60px } } .c-footer__subscribeLhs { flex: 1; padding: 23px 0 20px 53px; position: relative } @media(max-width:1023px) { .c-footer__subscribeLhs { padding: 27px 0 30px 58px } } @media(min-width:1024px) { .c-footer__subscribeLhs { border-right: 1px solid #242424 } } .c-footer__subscribeRhs { width: 465px } @media(max-width:1023px) { .c-footer__subscribeRhs { width: 100% } } .c-footer__subscribeIcon { left: 0; position: absolute; top: 30px; width: 43px } .c-footer__subscribeHeading { color: #fff } @media(max-width:1023px) { .c-footer__subscribeHeading { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { .c-footer__subscribeHeading { font-size: 20px; line-height: 1 } } .c-footer__subscribeSubheading { color: #888; margin-top: 5px } @media(max-width:1023px) { .c-footer__subscribeSubheading { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } } @media(min-width:1024px) { .c-footer__subscribeSubheading { font-size: 15px; letter-spacing: .01em; line-height: 25px } } @media(min-width:1024px)and (max-width:1023px) { .c-footer__subscribeSubheading { letter-spacing: 0; line-height: 20px } } .c-footer__subscribeForm { align-items: center; display: flex; height: 100%; position: relative; width: 100% } @media(max-width:1023px) { .c-footer__subscribeForm { border-top: 1px solid #242424; flex-flow: row wrap } .c-footer__subscribeForm:after { background-color: #242424; content: ""; height: 1px; left: 0; position: absolute; top: 55px; width: 100% } } @media(min-width:1024px) { .c-footer__subscribeForm { padding-left: 20px } } .c-footer__subscribeFormInputWrapper { height: 100% } @media(max-width:1023px) { .c-footer__subscribeFormInputWrapper { width: calc(100% - 16px) } } @media(min-width:1024px) { .c-footer__subscribeFormInputWrapper { flex: 1 } } .c-footer__subscribeFormInputWrapper.is-empty~.c-inputError, .c-footer__subscribeFormInputWrapper.is-invalid~.c-inputError { opacity: 1 } @media(max-width:1023px) { .c-footer__subscribeFormInputWrapper.is-empty~.c-inputError, .c-footer__subscribeFormInputWrapper.is-invalid~.c-inputError { max-height: 48px } } .c-footer__subscribeFormInput { color: #fff; font-size: 15px; height: 100%; letter-spacing: .01em; line-height: 25px; padding-top: 6px; width: 100% } @media(max-width:1023px) { .c-footer__subscribeFormInput { height: 55px; letter-spacing: 0; line-height: 20px; padding-top: 0 } } .c-footer__subscribeFormInput::placeholder { color: #888; opacity: 1 } .c-footer__subscribeFormSubmitButtonArrow { margin-top: 7px; width: 36px } @media(max-width:1023px) { .c-footer__subscribeFormSubmitButtonArrow { margin-top: 0; width: 16px } } .c-footer__subscribeForm.is-submitting .c-footer__subscribeFormSubmitButton { pointer-events: none } .c-footer__subscribeForm.is-submitting .c-footer__subscribeFormSubmitButtonArrow { opacity: 0 } .c-footer__subscribeForm.is-submitting .c-footer__subscribeFormSubmitting { opacity: 1 } .c-footer__subscribeForm.is-submitted .c-footer__subscribeFormSubmitButton { pointer-events: none } .c-footer__subscribeForm.is-submitted .c-footer__subscribeFormSuccessMessage { opacity: 1 } @media(max-width:1023px) { .c-footer__subscribeForm.is-submitted .c-footer__subscribeFormSuccessMessage { max-height: 48px } } .c-footer__subscribeForm.is-submitted .c-footer__subscribeFormSubmitButtonArrow { opacity: 0 } .c-footer__subscribeForm.is-submitted .c-footer__subscribeFormSubmitted svg { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.86, 0, .07, 1) } .c-footer__subscribeFormErrorMessage, .c-footer__subscribeFormSuccessMessage { opacity: 0; transition: opacity .2s ease } @media(max-width:1023px) { .c-footer__subscribeFormErrorMessage, .c-footer__subscribeFormSuccessMessage { transition: max-height 0s; width: 100% } } @media(min-width:1024px) { .c-footer__subscribeFormErrorMessage, .c-footer__subscribeFormSuccessMessage { max-height: unset !important; position: absolute; top: 100% } } .c-footer__subscribeFormSuccessMessage { align-items: flex-start; color: #619276; display: flex; flex-flow: row wrap } @media(max-width:1023px) { .c-footer__subscribeFormSuccessMessage { max-height: 0; overflow: hidden } } .c-footer__subscribeFormSuccessMessage:before { content: ""; padding-top: 11px; width: 100% } .c-footer__subscribeFormSubmitted { align-items: center; display: flex; height: 100%; justify-content: center; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; width: 50px } @media(max-width:1023px) { .c-footer__subscribeFormSubmitted { height: 55px; justify-content: flex-end } } .c-footer__subscribeFormSubmitted svg { stroke-dasharray: 26px; stroke-dashoffset: 26px } .c-footer__subscribeFormSubmitting { align-items: center; display: flex; height: 100%; justify-content: center; opacity: 0; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity .8s ease; width: 50px; will-change: opacity } @media(max-width:1023px) { .c-footer__subscribeFormSubmitting { height: 55px; justify-content: flex-end } } .c-footer__subscribeFormSubmittingDots { display: flex } .c-footer__subscribeFormSubmittingDots>:not(:first-child) { margin-left: 3px } .c-footer__subscribeFormSubmittingDot { animation: dotFlashing .6s infinite alternate; background-color: #fff; height: 4px; opacity: 1; width: 4px } .c-footer__subscribeFormSubmittingDot:first-of-type { animation-delay: .6s } .c-footer__subscribeFormSubmittingDot:nth-of-type(2) { animation-delay: .7s } .c-footer__subscribeFormSubmittingDot:nth-of-type(3) { animation-delay: .8s } .c-footer__bottomRow { display: flex; margin-top: 30px; width: 100% } @media(max-width:1023px) { .c-footer__bottomRow { flex-flow: column-reverse } .c-footer__secondaryLinksAndCopyright { margin-top: 30px } } @media(min-width:1024px) { .c-footer__secondaryLinksAndCopyright { width: 50% } } .c-footer__secondaryLinks { display: flex } .c-footer__secondaryLinks>:not(:first-child) { margin-left: 10px } .c-footer__secondaryLink, .c-footer__secondaryLinksSeperator { color: #fff; font-size: 15px; letter-spacing: .01em; line-height: 25px } @media(max-width:1023px) { .c-footer__secondaryLink, .c-footer__secondaryLinksSeperator { letter-spacing: 0; line-height: 20px } } .c-footer__copyright { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 20px; margin-top: 20px } @media(max-width:1023px) { .c-footer__copyright { letter-spacing: 0; line-height: 15px } } .c-footer__socialMediaLinks { display: flex; justify-content: flex-end; width: 50% } @media(max-width:1023px) { .c-footer__socialMediaLinks { justify-content: flex-start; width: 100% } } .c-footer__socialMediaLinks>:not(:first-child) { margin-left: 10px } .c-footer__socialMediaIcon { height: 34px; width: 34px } .c-footer__secondaryDesignedBy { align-self: flex-end } .c-footer__designed-by { align-items: center; color: #888; display: flex; font-size: 15px; justify-content: flex-end; letter-spacing: .01em; line-height: 25px; text-align: right } @media(max-width:1023px) { .c-footer__designed-by { letter-spacing: 0; line-height: 20px } } .c-footer__designed-by__logo { background-color: #ffd400; border-radius: 50%; height: 12px; width: 12px } .c-footer__designed-by__bdc { text-transform: uppercase } @media(min-width:1024px) { .c-footer__designed-by__label { opacity: 1; will-change: opacity, transform } .c-footer__designed-by__label, .c-footer__designed-by__logo { transform: translate3d(76px, 0, 0); transition: transform .7s cubic-bezier(.645, .045, .355, 1), opacity .7s cubic-bezier(.645, .045, .355, 1) } .c-footer__designed-by__logo { will-change: transform } .c-footer__designed-by__bdc { opacity: 0; pointer-events: none; transform: translate3d(76px, 0, 0); transition: transform .7s cubic-bezier(.645, .045, .355, 1), opacity .7s cubic-bezier(.645, .045, .355, 1); will-change: opacity, transform } .c-footer__designed-by:hover .c-footer__designed-by__label { opacity: 0; transform: translateZ(0) } .c-footer__designed-by:hover .c-footer__designed-by__logo { transform: translateZ(0) } .c-footer__designed-by:hover .c-footer__designed-by__bdc { opacity: 1; pointer-events: auto; transform: translateZ(0) } } @media(max-width:1023px) { .c-footer__secondaryDesignedBy { margin-top: 30px; order: -1; width: 100% } .c-footer__designed-by { justify-content: flex-start } .c-footer__designed-by__bdc { display: none } } .scrollToTop { bottom: 75px; display: block; height: 60px; margin-left: auto; margin-top: -60px; opacity: 0; position: -webkit-sticky; position: sticky; right: 55px; transform: translateY(30px); transition: all .6s cubic-bezier(.19, 1, .22, 1); width: 60px; z-index: 24 } .scrollToTop__img { height: 100%; width: 100% } @media(hover:hover) { .scrollToTop:hover .st1 { opacity: .6 } } @media(max-width:1023px)and (min-width:768px) { .scrollToTop { bottom: 105px; right: 20px } } @media(max-width:767px) { .scrollToTop { bottom: 100px; height: 50px; margin-top: -50px; right: 20px; transform: translateY(25px); width: 50px } } [data-theme=dark] .scrollToTop .st0 { fill: #fff !important } [data-theme=dark] .scrollToTop .st1 { fill: none !important; stroke: #292a2e !important; stroke-width: 2 !important } .c-footer__breadcrumbs+.c-footer__tabsWrapper { margin-top: 50px } @media(max-width:1023px) { .c-footer__breadcrumbs+.c-footer__tabsWrapper { margin-top: 30px } } .c-footer__tabsWrapper { align-items: center; border-bottom: 1px solid #727272; display: flex; justify-content: space-between } .c-footer__tabsWrapper~.c-footer__nav { margin-top: 50px } @media(max-width:1023px) { .c-footer__tabsWrapper~.c-footer__nav { margin-top: 30px } } .c-footer__tabs { color: #fff; display: flex; font-size: 70px; line-height: 1 } @media(max-width:1023px) { .c-footer__tabs { font-size: 40px } } .c-footer__tabSeperator { opacity: .45 } .c-footer__tab { cursor: pointer; opacity: .45; padding-bottom: 20px; position: relative; transition: opacity .2s ease } @media(max-width:1023px) { .c-footer__tab { padding-bottom: 10px } } .c-footer__tab:after { background-color: #fff; bottom: -1px; content: ""; height: 5px; left: 0; opacity: 0; position: absolute; transition: opacity .2s ease; width: 100% } @media(max-width:1023px) { .c-footer__tab:after { height: 3px } } @media(hover:hover) { .c-footer__tab:hover, .c-footer__tab:hover:after { opacity: 1 } } .c-footer__tabInput { display: none; height: 0; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 0 } #camelFooter:checked~.c-footer__tabsWrapper .c-footer__tabs .c-footer__tab[for=camelFooter], #camelFooter:checked~.c-footer__tabsWrapper .c-footer__tabs .c-footer__tab[for=camelFooter]:after, #camlinFooter:checked~.c-footer__tabsWrapper .c-footer__tabs .c-footer__tab[for=camlinFooter], #camlinFooter:checked~.c-footer__tabsWrapper .c-footer__tabs .c-footer__tab[for=camlinFooter]:after { opacity: 1 } #camelFooter:not(:checked)~.c-footer__subscribe { display: none !important } #camelFooter:checked~.c-footer__nav.-camel, #camelFooter:checked~.c-footer__tabsWrapper .c-footer__homepageBtn.-camel, #camlinFooter:checked~.c-footer__nav.-camlin, #camlinFooter:checked~.c-footer__tabsWrapper .c-footer__homepageBtn.-camlin { display: flex } .c-footer__nav { display: none } .c-footer__homepageBtn { align-items: center; animation-duration: .4s; animation-fill-mode: backwards; animation-name: fadeIn; animation-timing-function: cubic-bezier(.39, .575, .565, 1); background: #242424; border-radius: 5px; color: #fff; display: flex; display: none; font-family: NeueMontreal-Medium; font-size: 15px; height: 50px; justify-content: center; line-height: 1; padding: 0 15px } @media(max-width:1023px) { .c-footer__homepageBtn { display: none !important } } @media(hover:hover) { .c-footer__homepageBtn { transition: opacity .2s ease } .c-footer__homepageBtn:hover { opacity: .7 } } html[data-os=Windows] .c-footer__homepageBtn { padding: 2px 15px 0 } .c-header__breadcrumbs+.c-categoryBanner__text { padding-top: 30px !important } @media(max-width:1023px) { .c-header__breadcrumbs+.c-categoryBanner__text { padding-top: 2px !important } } .hobby main { padding-top: 122px !important } .hobby .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } @media(max-width:1023px) { .hobby .c-header__breadcrumbs { padding-bottom: 0 !important } } .techniques main { padding-top: 122px } .techniques .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .techniquesGeneric main { padding-top: 122px !important } .techniquesGeneric .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .otherArtistArtwork main { padding-top: 122px !important } .otherArtistArtwork .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .investorLanding .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 20px; z-index: 10 } .artistLanding main { padding-top: 122px !important } .artistLanding .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .glossaryPage main { padding-top: 122px !important } .glossaryPage .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .sitemap main { padding-top: 122px !important } .sitemap .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .contactUs main { padding-top: 108px !important } .paintingListing main { padding-top: 122px !important } .paintingListing .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .paintingRange main { padding-top: 122px } .paintingRange .c-categoryBanner .c-categoryBanner__text { padding-top: 0 } @media(max-width:1023px) { .paintingRange .c-categoryBanner .c-categoryBanner__text { padding-top: 0 } } .paintingRange .c-categoryBanner { padding-bottom: 30px !important; padding-top: 0 !important } .paintingRange .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .editArtwork main { padding-top: 122px !important } .editArtwork .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .showcaseLanding main { padding-top: 122px } .showcaseLanding .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .kidsLanding main { padding-top: 122px !important } .kidsLanding .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .canvasListing main { padding-top: 122px !important } .canvasListing .c-header__breadcrumbs { padding-bottom: 0; padding-top: 6px; z-index: 10 } .annualReports .c-categoryBanner, .canvasListing .c-categoryBanner, .companyInfo .c-categoryBanner, .quarterlyResults .c-categoryBanner, .shareholdingPattern .c-categoryBanner, .updatesForms .c-categoryBanner { padding-bottom: 30px !important; padding-top: 0 !important } @media(max-width:1023px) { .annualReports .c-categoryBanner, .companyInfo .c-categoryBanner, .quarterlyResults .c-categoryBanner, .shareholdingPattern .c-categoryBanner, .updatesForms .c-categoryBanner { padding-bottom: 20px !important; padding-top: 0 !important } .annualReports .c-categoryBanner .c-categoryBanner__text, .companyInfo .c-categoryBanner .c-categoryBanner__text, .quarterlyResults .c-categoryBanner .c-categoryBanner__text, .shareholdingPattern .c-categoryBanner .c-categoryBanner__text, .updatesForms .c-categoryBanner .c-categoryBanner__text { padding-top: 0 !important } } .drawingListing main { padding-top: 122px !important } .drawingListing .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .uploadArtwork main { padding-top: 122px !important } .uploadArtwork .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .investorFaq .c-header__breadcrumbs, .quarterlyResults .c-header__breadcrumbs, .transferUnclaimedShares .c-header__breadcrumbs { padding-bottom: 15px; padding-top: 20px; z-index: 10 } .codeofconduct .techniquesGeneric_banner_container { padding-top: 50px } @media(max-width:1023px) { .codeofconduct .techniquesGeneric_banner_container { padding-top: 0 } } .investorFaq .c-categoryBanner { padding-bottom: 30px !important; padding-top: 10px !important } @media(max-width:1023px) { .investorFaq .c-categoryBanner { padding-top: 0 } } .transferUnclaimedShares .c-investorData { padding-top: 0 } .productDetail main { padding-top: 122px } .productDetail .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } .c-categoryBanner .c-header__breadcrumbs { z-index: 30 } .c-header__breadcrumbs { align-items: center; display: flex; flex-wrap: wrap; padding-top: 20px; position: relative } .c-header__breadcrumbs .anim-hoverFadeContainer:hover { color: #888 !important; cursor: pointer } @media(max-width:1023px) { .c-header__breadcrumbs { display: inline-block; flex-flow: row wrap; margin-left: -20px; padding: 20px; width: 100vw; width: calc(100% + 40px) } .c-header__breadcrumbs .c-footer__breadcrumbsSeperator { padding-left: 5px; padding-right: 5px } } .c-header__breadcrumbsLink, .c-header__breadcrumbsSeperator { color: #888; line-height: 24px } @media(max-width:1023px) { .c-header__breadcrumbsLink, .c-header__breadcrumbsSeperator { line-height: 24px } } .c-header__breadcrumbs .anim-hoverFade:hover, .c-header__breadcrumbs .anim-hoverFadeContainer:hover .anim-hoverFade { opacity: 1 !important } .c-header__breadcrumbs .c-header__breadcrumbsBtn { display: none } .c-header__breadcrumbs .c-header__breadcrumbsBtn .c-header__breadcrumbsSeperator { color: #000; padding-left: 5px; padding-right: 5px } @media(max-width:1023px) { .c-header__breadcrumbs .c-header__breadcrumbsBtn { align-items: baseline; color: gray; display: inline-flex } .c-header__breadcrumbs .c-footer__breadcrumbsLink { font-size: 15px } } .c-header__breadcrumbs .c-footer__breadcrumbsLink:last-child .c-footer__breadcrumbsSeperator { display: none } @media(max-width:1023px) { .c-header__breadcrumbs.-showAllBreadcrumb .c-header__breadcrumbsBtn { display: none !important } .c-header__breadcrumbs .c-footer__breadcrumbsLink:not(:nth-last-child(-n+3)), .c-header__breadcrumbs .c-footer__breadcrumbsSeperator:not(:nth-last-child(-n+3)) { display: none } .c-header__breadcrumbs.-showAllBreadcrumb .c-footer__breadcrumbsLink:not(:nth-last-child(-n+3)), .c-header__breadcrumbs.-showAllBreadcrumb .c-footer__breadcrumbsSeperator:not(:nth-last-child(-n+3)) { display: inline-block } .c-header__breadcrumbs.-showAllBreadcrumb .c-footer__breadcrumbsSeperator:not(:nth-last-child(-n+3)) { padding-left: 5px } } .c-footer__contentWrapper { display: grid; gap: 25px; grid-template-columns: 1fr; padding: 30px 125px } @media(max-width:1023px) { .c-footer__contentWrapper { padding-left: 0; padding-right: 0; width: 95% } } .c-footer__contentWrapperCol { display: flex; flex-direction: column; gap: 30px } @media(min-width:1024px) { .c-footer__contentWrapperCol:last-child { gap: 5px; padding-bottom: 30px } } @media(max-width:1023px) { .c-footer__contentWrapperCol .c-footer__content:last-child { padding-top: 13px } } .c-footer__contentWrapper .accordion__title, .c-footer__contentWrapper h1, .c-footer__contentWrapper h4, .c-footer__contentWrapper h5, .c-footer__contentWrapper h6, .c-footer__contentWrapper p { color: #727272; font-family: NeueMontreal-Regular; font-size: 12px; font-weight: 400; line-height: 1.5; margin-bottom: 1px } .c-footer__contentWrapper .accordion__title strong, .c-footer__contentWrapper h1 strong, .c-footer__contentWrapper h4 strong, .c-footer__contentWrapper h5 strong, .c-footer__contentWrapper h6 strong, .c-footer__contentWrapper p strong { font-family: NeueMontreal-Medium; font-weight: 600; padding-top: 5px } .c-footer__contentWrapper h2, .c-footer__contentWrapper h3 { color: #727272; font-family: NeueMontreal-Medium; font-size: 12px; font-weight: 700; line-height: 1.5; margin-bottom: 1px; padding-top: 5px } .c-footer__contentWrapper a, .c-footer__contentWrapper u { color: #727272; font-family: NeueMontreal-Regular; font-size: 12px; position: relative; text-decoration: underline } @media(max-width:1023px) { .c-footer__contentTitle { padding-bottom: 10px } } @media(min-width:1024px) { .c-footer__contentTitle { grid-column: span 2 } } .c-header__breadcrumbs .c-footer__breadcrumbsLink { color: #000; font-size: 12px; letter-spacing: 0 } .c-header__breadcrumbs .c-footer__breadcrumbsSeperator { color: #000; font-size: 13px; padding: 0 4px } .c-footer__faqs .accordion__contain { padding-bottom: 20px; position: relative } .c-footer__faqs .accordion__contain:nth-child(n+2) { margin-top: 40px } @media(max-width:1023px) { .c-footer__faqs .accordion__contain:nth-child(n+2) { margin-top: 30px } } .c-footer__faqs .accordion { cursor: pointer; position: relative; text-align: left; width: 100% } .c-footer__faqs .accordion:after { background-image: url(../assets/common/vectors/icon_plus.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; bottom: 0; content: ""; height: 12px; margin-top: 6px; position: absolute; right: 4px; top: 0; width: 12px } .c-footer__faqs .accordion.-active:after { background-image: url(../assets/common/vectors/icon_minus.svg) } .c-footer__faqs .accordion__title { display: inline-block; width: 80% } @media(min-width:768)and (max-width:1023px) { .c-footer__faqs .accordion__title { max-width: 80% } } @media(max-width:768) { .c-footer__faqs .accordion__title { display: inline-block; max-width: 232px } } .c-footer__faqs .accordion__content { max-height: 0; overflow: hidden; text-align: left; transition: max-height .3s cubic-bezier(.445, .05, .55, .95); width: 100%; will-change: max-height } .c-footer__faqs .accordion__content__inner { padding-top: 20px } @media(max-width:1023px) { .c-footer__faqs .accordion__content__inner { padding-top: 12px } } .c-footer__faqs .accordion__content__inner>.accordion_bulletPara:first-of-type { margin-top: 0 } .c-footer__faqs .accordion__content__para { color: #727272; font-size: 17px; line-height: 22px; max-width: 580px } @media(min-width:768)and (max-width:1023px) { .c-footer__faqs .accordion__content__para { max-width: 80% } } @media(max-width:767px) { .c-footer__faqs .accordion__content__para { display: inline-block; font-size: 15px; letter-spacing: .02em; line-height: 20px; max-width: 260px } } .c-footer__faqs .accordion__content .accordion__content__para+.accordion__content__para { margin-top: 15px } .c-footer__faqs .accordion__content__para+.accordion_table_container { margin-bottom: 20px; margin-top: 20px } .c-footer__faqs .accordion_table_container:last-child { margin-bottom: 0 } .c-footer__faqs .accordion_bulletTitle { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 20px; margin-right: auto; margin-top: 40px; padding-left: 17px; position: relative } .c-footer__faqs .accordion_bulletTitle:before { background-color: #000; border-radius: 50%; content: ""; display: inline-block; height: 6px; left: 4px; position: absolute; top: 7px; width: 6px } @media(max-width:1023px) { .c-footer__faqs .accordion_bulletTitle { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 10px; padding-top: 0 } .c-footer__faqs .accordion_bulletTitle:before { top: 7px } } .c-footer__faqs .accordion_bulletPara { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 20px; margin-right: auto; margin-top: 20px; max-width: 632px; padding-left: 17px; position: relative } .c-footer__faqs .accordion_bulletPara:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 4px; left: 5px; position: absolute; top: 8px; width: 4px } @media(max-width:1023px) { .c-footer__faqs .accordion_bulletPara { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 10px; padding-top: 0 } .c-footer__faqs .accordion_bulletPara:before { top: 7px } } .c-footer__faqs .accordion_bulletPara2 { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-bottom: 20px; margin-right: auto; margin-top: 20px; max-width: 632px; padding-left: 17px; position: relative } .c-footer__faqs .accordion_bulletPara2:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 3px; left: 5px; position: absolute; top: 6px; width: 3px } @media(max-width:1023px) { .c-footer__faqs .accordion_bulletPara2 { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-bottom: 10px; padding-top: 0 } .c-footer__faqs .accordion_bulletPara2:before { top: 7px } } .c-footer__faqs .accordion_table_container { margin-right: auto; max-width: 800px; overflow: hidden; overflow-x: auto; position: relative; width: 100% } @media(max-width:1023px) { .c-footer__faqs .accordion_table_container { -ms-overflow-style: none; scrollbar-width: none; width: calc(100% + 20px) } .c-footer__faqs .accordion_table_container::-webkit-scrollbar { display: none } } .c-footer__faqs .accordion_table { border-collapse: collapse; scroll-snap-align: start; width: 100% } .c-footer__faqs .accordion_table_heading { border: 1px solid #c4c4c4; padding: 20px; text-align: left } @media(max-width:1023px) { .c-footer__faqs .accordion_table_heading { min-width: 250px; padding: 15px } } .c-footer__faqs .accordion_table_data { border: 1px solid #c4c4c4; padding: 20px } @media(max-width:1023px) { .c-footer__faqs .accordion_table_data { min-width: 250px; padding: 15px } } .c-footer__faqs .accordion_table .accordion_bulletPara, .c-footer__faqs .accordion_table .accordion_bulletPara2 { margin: 0 } .c-footer__faqs .accordion_table .accordion_bulletPara2:nth-child(n+2) { margin-top: 20px } @media(max-width:1023px) { .c-footer__faqs .accordion_table { margin-right: 20px } .c-footer__faqs .accordion_table .techniquesGeneric_bulletText { margin-bottom: 0 } } .c-footer__faqs .c-footer__contentTitle h2 { color: #000; font-size: 24px; font-weight: 500; letter-spacing: .24px; line-height: 28.8px } @media(max-width:1024px) { .c-footer__faqs .c-footer__contentTitle h2 { font-size: 20px; line-height: 22px } } @media(min-width:1025px) { .c-footer__faqs .c-footer__contentWrapperCol { gap: 12px } } @media(max-width:1024px) { .c-footer__faqs .accordion__contain:nth-child(n+2) { margin-top: 20px } .c-footer__faqs .c-footer__contentTitle { padding-bottom: 20px } } .c-seo__inner { padding: 30px } @media(max-width:1023px) { .c-seo__inner { padding: 30px 0 } } .c-seo__text { color: #c4c4c4 } .c-quote { position: relative; top: -1px } .c-quote__inner { align-items: center; display: flex; justify-content: center; padding: 30px 0; position: relative } @media(max-width:767px) { .c-quote__inner { padding: 40px 0 30px } } .c-quote__quotation-marks { background-color: #000; border-radius: 50%; color: #fff; height: 60px; left: 125px; padding-top: 11px; position: absolute; text-align: center; top: -30px; width: 60px; z-index: 20 } @media(max-width:1023px) { .c-quote__quotation-marks { left: 30px } } html[data-theme=dark] .c-quote__quotation-marks { background-color: #44464c } @media(min-width:768px)and (max-width:1023px) { .c-quote__quote { max-width: 70% } } @media(max-width:767px) { .c-quote__quote { max-width: 300px } } .c-quote__author, .c-quote__quote { text-align: center } .c-quote__author { color: #888 } .c-bottomNavBar { transition: transform .4s cubic-bezier(.785, .135, .15, .86) } @media(max-width:1023px) { .c-bottomNavBar { background-color: #000; border-top: 1px solid #000; bottom: 0; height: 60px; left: 0; position: fixed; width: 100vw; will-change: transform; z-index: 28 } .c-bottomNavBar .c-bottomNavBar__navButton svg .svgShape { fill: #fff } .c-bottomNavBar .c-bottomNavBar__navButton.is-active svg .svgShape { fill: #e52d23 } .c-bottomNavBar .c-bottomNavBar__navButtonText { color: #fff } } @media(min-width:1024px) { .c-bottomNavBar { display: none } } .c-bottomNavBar.-hide { transform: translateY(100%) !important } .c-bottomNavBar__navButtons { align-items: center; display: flex; gap: 35px; height: 60px; justify-content: center } .c-bottomNavBar__navButton { align-items: center; display: flex; flex-direction: column; min-width: 70px; padding: 0 20px } .c-bottomNavBar__navButton.is-active .svgShape { fill: #e52d23 } .c-bottomNavBar__navButton.is-active .c-bottomNavBar__navButtonText { color: #e52d23 } .c-bottomNavBar__navButtonIcon { path-fill: #000; height: 20px; width: 20px } .c-bottomNavBar__navButtonText { color: #000; font-size: 11px; letter-spacing: .55px; line-height: 14px; margin-top: 5px; text-align: center } .c-overlay { background-color: #fff; height: 100vh; left: 0; opacity: 1; pointer-events: none; position: fixed; top: 0; width: var(--viewportWidth); z-index: 31 } html[data-theme=dark] .c-button.-box, html[data-theme=dark] .c-button.-box .c-button__arrowWrapper { border-color: #fff } html[data-theme=dark] .c-button__line { background-color: currentColor !important } .c-backButton { align-items: center; display: flex } .c-backButton__icon { height: auto; width: 20px } .c-backButton__text { margin-left: 10px } .c-button { align-items: center; cursor: pointer; display: inline-flex; position: relative } .c-button.-secondary .c-button__arrowWrapper { margin-left: 7px } @media(min-width:1025px) { .c-button.-secondary .c-button__arrowWrapper { top: 1px } } .c-button.-underline { padding-bottom: 6px } .c-button.-underline .c-button__arrowWrapper { margin-left: 19px } .c-button.-googleLogin, .c-button.-openGmail { border: 1px solid #000; border-radius: 5px; height: 50px; justify-content: center; padding: 0 30px 0 20px; width: 100% } .c-button.-googleLogin .c-button__gmailLogo, .c-button.-googleLogin .c-button__googleLogo, .c-button.-openGmail .c-button__gmailLogo, .c-button.-openGmail .c-button__googleLogo { height: 20px } .c-button.-googleLogin .c-button__text, .c-button.-openGmail .c-button__text { margin-left: 10px } .c-button.-googleLogin { background-color: #4285f4; border: 1px solid #4285f4; transition: .3s linear } .c-button.-googleLogin .c-button__googleLogo { background-color: #fff; border-radius: 100px; height: 30px; padding: 5px } .c-button.-googleLogin .c-button__text { color: #fff } .c-button.-googleLogin:hover { background-color: #226de9 } .c-button.-box { border: 1px solid #000; height: 50px } .c-button.-box:hover { border-color: #888 } .c-button.-box .c-button__text { align-items: center; display: flex; height: 100%; justify-content: center; padding: 0 20px } .c-button.-box .c-button__arrowWrapper { align-items: center; border-left: 1px solid #000; display: flex; height: 100%; justify-content: center; transition: border .25s cubic-bezier(.26, 1, .48, 1); width: 50px } .c-button.-dark { background-color: #000 } .c-button.-dark .c-button__text { color: #fff } .c-button.-dark .c-button__arrow path { fill: #fff } .c-button.-dark .c-button__arrowWrapper { border-left: 1px solid #fff } .c-button .c-button__text { position: relative } .c-button.-font__cta13 { padding-bottom: 1px } .c-button .c-button__arrowWrapper { position: relative } .c-button .c-button__arrow { height: auto; width: 16px } .c-button .c-button__line { position: absolute } .c-button .c-button__line.-top { background-color: #000; height: 1px; left: 0; top: 0; transform: scaleX(1); transform-origin: right center; width: 100% } .c-button .c-button__line.-right { background-color: #000; height: 100%; right: 0; top: 0; transform: scaleY(1); transform-origin: top center; width: 1px } .c-button .c-button__line.-bottom { background-color: #000; bottom: 0; height: 1px; left: 0; transform: scaleX(1); transform-origin: left center; width: 100% } .c-button .c-button__line.-left { background-color: #000; height: 100%; left: 0; top: 0; transform: scaleY(1); transform-origin: bottom center; width: 1px } .c-LogSignButton { align-items: center; border: 1px solid #000; border-radius: 5px; color: #000; cursor: pointer; display: flex; display: inline-block; font-size: 13px; justify-content: center; line-height: 15px; margin: 0 5px; padding: 7px 17px; position: relative; transition: .2s linear; width: auto } .c-LogSignButton:hover { border-color: #727272; color: #727272 !important } .c-SignHighlight { align-items: center; background-color: #d60812; border-radius: 5px; color: #fff !important; cursor: pointer; display: inline-flex; font-size: 11px !important; justify-content: center; letter-spacing: .05em; line-height: 11px; margin-left: 15px !important; padding: 4px 12px; position: relative; transition: .2s linear; width: auto } @media(max-width:1023px) { .c-SignHighlight { font-size: 11px !important } } .c-SignHighlight:hover { background-color: #b9020b } .c-SignHighlight:hover .anim-hoverFade { opacity: 1 !important } .c-banner { height: 70.3125vh; position: relative } @media(max-width:1023px) { .c-banner { height: calc(125vw - 50px) } } .c-banner__image, .c-banner__imageWrapper { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .c-banner__heading { color: #fff; position: absolute } @media(min-width:1024px) { .c-banner__heading { bottom: 79px; font-size: 60px; left: 25px; letter-spacing: -.03em; line-height: 55px } } @media(max-width:1023px) { .c-banner__heading { bottom: 59px; font-size: 50px; left: 20px; line-height: 1; line-height: 40px } } .c-banner { overflow: hidden } .c-banner__train { display: flex; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; white-space: nowrap; width: 100% } .c-banner__train.-normal { z-index: 1 } .c-banner__train.-over { z-index: 3 } .c-banner__trainInner { display: flex; height: 100% } .c-banner__trainItem { display: inline-flex; height: 100%; margin-left: -2px; position: relative } .c-banner__trainImage.-full, .c-banner__trainImage.-medium, .c-banner__trainImage.-small { width: 95.0168918919vh } .c-banner__trainImage.-small { margin-left: -140px } @media only screen and (max-width:767px) { .c-banner__trainImage.-full, .c-banner__trainImage.-medium, .c-banner__trainImage.-small { width: calc(168.91892vw - 67.56757px) } .c-banner__trainImage.-small { margin-left: -120px } } .c-banner__trainImageMask, .c-banner__trainImageMaskPath { height: 100%; width: 700px } .c-banner__trainImage { overflow: hidden; position: relative } .c-banner__train.-over .c-banner__trainInner>:first-child .c-banner__trainImage, .c-banner__train.-over .c-banner__trainInner>:last-child .c-banner__trainImage { opacity: 0 } .c-banner__trainImageInner { background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0; position: absolute; top: 0; width: 100% } .c-banner__trainImageInner.-firstImage { transform: scale(1.12); transition: transform 1.5s cubic-bezier(.215, .61, .355, 1); will-change: transform } .c-banner__trainImageInner.-firstImage.is-loaded { transform: scale(1) } .c-banner__trainImageMask { left: 0; position: absolute; top: 0 } .c-banner__heading.-normal { z-index: 2 } .c-banner__heading.-over .wordWrapper { visibility: hidden } .c-banner__heading.-over { z-index: 4 } .c-banner__startExploringButton { bottom: 36px; left: 25px; position: absolute; z-index: 4 } @media only screen and (max-width:1023px) { .c-banner__startExploringButton { bottom: 20px; left: 20px; position: absolute; z-index: 4 } } .c-banner__startExploringButton .c-button__text { color: #fff; font-size: 18px; line-height: 20px } .c-banner__startExploringButton .c-button__line { background-color: #fff !important } .c-categoryBanner { padding-bottom: 60px; position: relative } @media(max-width:1023px) { .c-categoryBanner { padding-bottom: 30px; padding-top: 0 } } .c-categoryBanner__imageWrapper { height: 70.3125vh; position: relative; width: 100% } @media(max-width:1023px) { .c-categoryBanner__imageWrapper { height: calc(125vw - 50px) } .c-categoryBanner__imageWrapper+.c-categoryBanner__text { padding-top: 15px } .c-categoryBanner__text { flex-direction: column } } @media(min-width:1024px) { .c-categoryBanner__text { align-items: center; display: flex; padding-top: 20px; width: 100% } .c-categoryBanner__lhs { flex: 1 } } @media(max-width:1023px) { .c-categoryBanner__rhs { margin-top: 30px } } @media(min-width:1024px) { .c-categoryBanner__rhs { align-self: flex-end; margin-left: var(--gridMargin); padding-bottom: calc(7px + var(--gridMargin)); width: var(--gridCol3) } .c-categoryBanner__rhs.-pb7 { padding-bottom: 7px } } .c-categoryBanner__heading { position: relative } @media(max-width:1023px) { .c-categoryBanner__heading { font-size: 70px; left: -4px; line-height: 1 } } @media(min-width:1024px) { .c-categoryBanner__heading { font-size: 240px; left: -16px; letter-spacing: -.05em; line-height: 1; top: -17px } .c-categoryBanner__heading.-reducedFontSize { font-size: 120px; left: -7px } } .c-categoryBanner__subheading h1, .c-categoryBanner__subheading h2, .c-categoryBanner__subheading p { display: inline; padding-right: 4px } @media(max-width:1023px) { .c-categoryBanner__subheading { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { .c-categoryBanner__subheading { font-size: 15px; letter-spacing: .02em; line-height: 20px; max-width: 170px } } .c-categoryMenu { position: sticky !important; position: -webkit-sticky !important; top: 0; z-index: 24; z-index: 23 } .c-categoryMenu.isPositionStatic { position: static !important } .c-categoryMenu__inner { background-color: #fff; margin-left: calc(0px - var(--viewportSidePadding)); margin-right: calc(0px - var(--viewportSidePadding)); padding: 0 var(--viewportSidePadding); position: relative; width: var(--viewportWidth) } .c-categoryMenu__menuList { -ms-overflow-style: none; display: flex; overflow-x: scroll; padding: 20px 0; position: relative; scrollbar-width: none } .c-categoryMenu__menuList::-webkit-scrollbar { display: none } .c-categoryMenu__menuList>:not(:first-child) { margin-left: var(--gridMargin) } .c-categoryMenu__menuList>.anim-line { margin-left: 0 } .c-categoryMenu__menuItem { cursor: pointer; flex-shrink: 0; opacity: .47; position: relative; will-change: opacity } @media(max-width:1023px) { .c-categoryMenu__menuItem { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { .c-categoryMenu__menuItem { font-size: 20px; line-height: 25px } } .c-categoryMenu__menuItem.is-active { opacity: 1 } .c-categoryMenu__menuItem.is-active:after { background-color: #000; bottom: -20px; content: ""; height: 3px; left: 0; opacity: 1; position: absolute; -webkit-transition: .3s cubic-bezier(.77, 0, .175, 1); -o-transition: .3s cubic-bezier(.77, 0, .175, 1); transition: .3s cubic-bezier(.77, 0, .175, 1); width: 100% } @media(hover:hover) { .c-categoryMenu__menuItem:hover { opacity: 1 } .c-categoryMenu__menuItem:hover:after { background-color: #000; bottom: -20px; content: ""; height: 3px; left: 0; opacity: 1; position: absolute; -webkit-transition: .3s cubic-bezier(.77, 0, .175, 1); -o-transition: .3s cubic-bezier(.77, 0, .175, 1); transition: .3s cubic-bezier(.77, 0, .175, 1); width: 100% } } html[data-os=Windows] .c-categoryMenu__menuList { cursor: grab } html[data-os=Windows] .c-categoryMenu__menuList:active { cursor: grabbing } .c-subcategoryListing__inner { padding-bottom: 60px; padding-top: 40px; position: relative } @media(max-width:1023px) { .c-subcategoryListing__inner { padding-bottom: 50px; padding-top: 30px } } .c-subcategoryListing__headerMiddle { position: relative } @media(min-width:1024px) { .c-subcategoryListing__header { align-items: flex-start; display: flex } .c-subcategoryListing__header>:not(:first-child) { margin-left: var(--gridMargin) } .c-subcategoryListing__headerLhs, .c-subcategoryListing__headerRhs { width: var(--gridCol3) } .c-subcategoryListing__headerMiddle { margin-left: calc(var(--gridCol3) + var(--gridMargin)); width: calc(var(--gridCol3)*2 + 30px) } .c-subcategoryListing__headerLhs+.c-subcategoryListing__headerMiddle { margin-left: var(--gridMargin) } } @media(max-width:1023px) { .c-subcategoryListing__header { display: flex; flex-direction: column; gap: 15px } } .c-subcategoryListing__introducedIn.c-tooltip { display: inline-block } .c-subcategoryListing__introducedIn.c-tooltip .c-tooltip__text { left: 20px; padding-right: 12px; width: 140px } @media(max-width:1023px) { .c-subcategoryListing__introducedIn.c-tooltip .c-tooltip__text { bottom: -12px; left: 70px !important; top: unset } .c-subcategoryListing__introducedIn.c-tooltip .c-tooltip__text:before { left: -10px !important; right: unset !important; top: 18px; transform: rotate(-90deg) } } .c-subcategoryListing__title { position: relative } @media(max-width:1023px) { .c-subcategoryListing__title { font-size: 40px; line-height: 1 } } @media(min-width:1024px) { .c-subcategoryListing__title { font-size: 70px; left: -1px; line-height: 1; line-height: 60px; top: 3px } } .c-subcategoryListing__subtitle { max-width: 163px } @media(max-width:1023px) { .c-subcategoryListing__subtitle { max-width: unset } } .c-subcategoryListing__link { margin-top: 20px } @media(max-width:1023px) { .c-subcategoryListing__link { margin-top: 21px } } .c-subcategoryListing__products { display: flex; margin-top: 40px; overflow: hidden } .c-subcategoryListing__products:after { content: "" } @media(max-width:1023px) { .c-subcategoryListing__products:after { padding-left: 20px } .c-subcategoryListing__products { -ms-overflow-style: none; margin-left: 0; margin-top: 30px; overflow-x: scroll; overflow-y: hidden; padding-left: 0; scroll-padding-left: 20px; scroll-padding-left: var(--viewportSidePadding); scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; width: calc(100% + 20px) } } @media(max-width:1023px) { .c-subcategoryListing__products::-webkit-scrollbar { display: none } } .c-subcategoryListing__products>:not(:first-child) { margin-left: var(--gridMargin) } .c-subcategoryListing__product { flex-shrink: 0; width: var(--gridCol3) } .c-subcategoryListing__product>* { pointer-events: none } @media(max-width:767px) { .c-subcategoryListing__product { scroll-snap-align: start; width: 58.8235294118% } } @media(max-width:1023px)and (min-width:768px) { .c-subcategoryListing__product { scroll-snap-align: start; width: 40% } } .c-subcategoryListing__productImageWrapper { background-color: #f3f3f3; padding-top: 125%; position: relative } .c-subcategoryListing__productImage { height: 100%; left: 0; object-fit: cover; object-position: center; position: absolute; top: 0; width: 100% } .c-subcategoryListing__productName { margin-top: 10px } @media(max-width:1023px) { .c-subcategoryListing__productName { margin-top: 5px } } .c-subcategoryListing__recommendedFor { color: #888; display: inline-block; letter-spacing: .7px; position: relative; white-space: nowrap; z-index: 1 } @media(max-width:1023px) { .c-subcategoryListing__recommendedFor { line-height: 15px } } .c-subcategoryListing__productInfo { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 10px; max-width: 237px } @media(max-width:1023px) { .c-subcategoryListing__productInfo { max-width: 335px } } .c-subcategoryListing__productInfo+.c-subcategoryListing__productInfo { margin-top: 5px } .c-subcategoryListing__productPrice { margin-top: 10px } @media(min-width:1024px) { .c-subcategoryListing.-hideNav .c-subcategoryListing__nav { display: none } } .c-subcategoryListing__nav { pointer-events: none } @media(max-width:1023px) { .c-subcategoryListing__nav { display: none } } .c-subcategoryListing__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: calc(var(--containerWidth)*337/1170/2 - 28px); transition: opacity .2s ease } .c-subcategoryListing__navButton.is-disabled { opacity: 0; pointer-events: none } .c-subcategoryListing__navButtonArrow { height: 12px; width: auto } .c-subcategoryListing__navButton.-previous { left: -55px } .c-subcategoryListing__navButton.-next { right: -55px } @media(hover:hover) { .c-subcategoryListing__navButton:hover { opacity: .6 } } @media(max-width:1198px) { .c-subcategoryListing__navButton.-previous { left: -24px; padding-left: 0; padding-right: 0 } .c-subcategoryListing__navButton.-next { padding-left: 0; padding-right: 0; right: -24px } } .c-subcategoryListing__pContain { position: relative } @media(max-width:1024px) { .c-categoryMenu__nav { display: flex } } .c-categoryMenu__navButton { align-items: center; bottom: unset; display: flex; height: 100%; justify-content: center; left: unset; right: unset; top: unset; inset: unset; top: 0 !important; touch-action: manipulation } @media(max-width:1024px) { .c-categoryMenu__navButton { background: #fff; padding-bottom: 0; padding-top: 0 } .c-categoryMenu__navButton:hover { opacity: 1 } } .c-categoryMenu__navButton.-previousPencilsBtn { left: -55px; right: unset; transform: rotate(180deg) } @media(max-width:1200px) { .c-categoryMenu__navButton.-previousPencilsBtn { left: -20px } } .c-categoryMenu__navButton.-nextPencilsBtn { left: unset; right: -55px } @media(max-width:1200px) { .c-categoryMenu__navButton.-nextPencilsBtn { right: -20px } } @media(min-width:1024px) { .c-categoryMenu.-hideNav .c-categoryMenu__nav { display: none } } .c-trending { padding-bottom: 60px; position: relative } .c-trending.-withBoxButton { margin-bottom: 100px } @media(max-width:1023px) { .c-trending.-withBoxButton { margin-bottom: 50px } } @media(min-width:1024px) { .c-trending { align-items: center; display: flex; flex-direction: column } } .c-trending__heading { padding-bottom: 30px } @media(max-width:1023px) { .c-trending__heading { font-size: 30px; line-height: 1; padding-bottom: 20px } } @media(min-width:1024px) { .c-trending__heading { font-size: 40px; line-height: 1; text-align: center } } .c-trending__list { display: flex; max-width: 100%; position: relative; width: auto } @media(max-width:1023px) { .c-trending__list { flex-flow: row wrap } } .c-trending__item { cursor: pointer; flex-shrink: 0; padding: 30px 30px 26px; position: relative } @media(min-width:1024px) { .c-trending__item { width: var(--gridCol4NoMargin) } } @media(max-width:1023px) { .c-trending__item { flex-basis: 100%; padding: 20px } } .c-trending__itemImageContainer { padding-top: 125%; position: relative } .c-trending__itemImage { object-fit: cover; object-position: center } .c-trending__itemImage.-hoverImage { opacity: 0 } .c-trending__itemName { margin-top: 20px } @media(min-width:1024px) { .c-trending__itemName { font-size: 20px; line-height: 25px } } @media(max-width:1023px) { .c-trending__itemName { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 15px } } .c-trending__buttonWrapper { display: flex; justify-content: flex-end; margin-top: -1px; position: absolute; right: 0; top: 100% } .c-trending__button { margin-top: 19px } @media(max-width:1023px) { .c-trending__button { margin-top: 14px } } .c-trending__lines { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .c-trending__lines, .c-trending__nav { pointer-events: none } @media(max-width:1023px) { .c-trending__nav { display: none } } .c-trending__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: 50%; transition: opacity .2s ease } .c-trending__navButton.is-disabled { opacity: 0; pointer-events: none } .c-trending__navButtonArrow { height: 12px; pointer-events: none; width: auto } .c-trending__navButton.-prev { left: -55px; transform: rotate(180deg) } .c-trending__navButton.-next { right: -55px } @media(hover:hover) { .c-trending__navButton:hover { opacity: .6 } } .c-featuredProduct__inner { background-color: #f4f4f4; border: 1px solid #000; height: calc(var(--maxContentScaling)*540/1280); overflow: hidden; position: relative } @media(max-width:1023px) { .c-featuredProduct__inner { height: 515px; padding: 20px } } .c-featuredProduct__curve { left: 9.5726495726%; position: absolute; top: 140px; width: 22.2222222222%; z-index: 1 } @media screen and (max-width:1400px) { .c-featuredProduct__curve { width: 17.094017094% } } @media(max-width:1023px) { .c-featuredProduct__curve { display: none } } @media(min-width:1024px) { .c-featuredProduct__imageWrapper { height: 100%; left: 0; overflow: hidden; padding-bottom: 28px; padding-left: 37.1794871795%; padding-top: 12px; position: absolute; top: 0; width: 100% } } @media(max-width:1023px) { .c-featuredProduct__imageWrapper { display: flex; justify-content: center; margin-top: 15px } } .c-featuredProduct__image { height: 100%; width: auto } @media(max-width:1023px) { .c-featuredProduct__image { flex-shrink: 0; height: auto; width: 174px } } @media(min-width:1024px) { .c-featuredProduct__name { font-size: 50px; left: 30px; line-height: 1; position: absolute; top: 30px } } @media(max-width:1023px) { .c-featuredProduct__name { font-size: 40px; line-height: 1 } } @media(min-width:1024px) { .c-featuredProduct__desc { bottom: 26px; left: 30px; padding-top: 60px; position: absolute } } @media(max-width:1023px) { .c-featuredProduct__desc { margin-top: 21px } } .c-featuredProduct__button { position: absolute } @media(min-width:1024px) { .c-featuredProduct__button { bottom: 30px; right: 30px } } @media(max-width:1023px) { .c-featuredProduct__button { bottom: 20px; left: 20px } } .c-featuredProduct__itemsInside { align-items: center; background-color: #fff; border: 1px solid #000; display: flex; flex-direction: column; justify-content: center; padding: 14px; position: absolute } @media(max-width:1023px) { .c-featuredProduct__itemsInside { bottom: -1px; padding: 20px 14px; right: -1px } } @media(min-width:1024px) { .c-featuredProduct__itemsInside { right: -1px; top: -1px } } .c-featuredProduct__itemsInsideCount { font-size: 50px; line-height: 1 } @media(hover:hover) { .c-featuredArticles__article:hover { opacity: .6 } } .c-featuredArticles__article { align-items: flex-start; contain: content; display: flex; flex-flow: row wrap; padding: 20px 0 30px; position: relative; transition: opacity .4s ease } @media(max-width:1023px) { .c-featuredArticles__article { align-items: center; justify-content: space-between; padding: 15px 0 } } .c-featuredArticles__articleTag { color: currentColor; min-height: 2px; order: 1; width: calc(25% - 22.5px) } @media(max-width:1023px) { .c-featuredArticles__articleTag { width: 50% } } .c-featuredArticles__articleTitle { color: currentColor; margin-left: var(--gridMargin); max-width: 271px; min-height: 2px; order: 2; width: calc(25% - 22.5px) } @media(max-width:1023px) { .c-featuredArticles__articleTitle { margin-left: 0; margin-top: 20px; order: 3; width: 228px } } .c-featuredArticles__articleSpacer { flex: 1; margin-left: var(--gridMargin); min-height: 2px; order: 3 } @media(max-width:1023px) { .c-featuredArticles__articleSpacer { display: none; margin-left: 0 } } .c-featuredArticles__articleReadingTime { color: currentColor; margin-left: var(--gridMargin); min-height: 2px; order: 4; width: calc(25% - 22.5px) } @media(max-width:1023px) { .c-featuredArticles__articleReadingTime { margin-left: 0; order: 2; text-align: right; width: 50% } } .c-featuredArticles__articleLink { font-size: 0; line-height: 0; order: 5; position: absolute } @media(max-width:1023px) { .c-featuredArticles__articleLink { bottom: 24px; right: 0 } } @media(min-width:1024px) { .c-featuredArticles__articleLink { margin-left: var(--gridMargin); right: 0; top: 26px } } .c-featuredArticles__articleLinkArrow { width: 16px } .c-featuredArticle { height: 70.3125vh; max-height: 686px; position: relative } @media(max-width:1023px) { .c-featuredArticle { height: 143vw; padding: 20px } } .c-featuredArticle__image, .c-featuredArticle__imageContainer { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .c-featuredArticle__headingAndSubheadingWrapper.-black .c-button, .c-featuredArticle__headingAndSubheadingWrapper.-black .c-featuredArticle__additionalInfo, .c-featuredArticle__headingAndSubheadingWrapper.-black .c-featuredArticle__heading, .c-featuredArticle__headingAndSubheadingWrapper.-black .c-featuredArticle__subheading { color: #000 } @media(min-width:1024px) { .c-featuredArticle__headingAndSubheadingWrapper { align-items: flex-end; display: flex; padding-top: 47px } } .c-featuredArticle__heading { color: #fff } @media(max-width:1023px) { .c-featuredArticle__heading { font-size: 40px; line-height: 1 } } @media(min-width:1024px) { .c-featuredArticle__heading { font-size: 50px; line-height: 1; margin-left: calc(var(--gridCol6) + 30px); width: var(--gridCol3) } } .c-featuredArticle .ipad-specific { display: none } @media(min-width:1024px) { .c-featuredArticle.-pos2 .c-featuredArticle__headingAndSubheadingWrapper { flex-wrap: wrap; padding-top: 87px; width: 100% } .c-featuredArticle.-pos2 .c-featuredArticle__subheading { margin-left: calc(var(--gridCol6) + 30px); margin-top: 4px; width: var(--gridCol3) } .c-featuredArticle.-pos2 .c-button { margin-left: calc(var(--gridCol6) + 30px); margin-top: 26px } .c-featuredArticle.-pos2 .c-featuredArticle__additionalInfo { bottom: unset; margin-left: auto; position: relative; right: unset } } @media(max-width:1023px)and (min-width:768px) { .c-featuredArticle.-pos2 { height: 335px } .c-featuredArticle.-pos2 .ipad-specific { display: block } .c-featuredArticle.-pos2 .desktopMob-specific { display: none } .c-featuredArticle.-pos2 .c-featuredArticle__headingAndSubheadingWrapper { flex-wrap: wrap; padding-top: 40px; width: 100% } .c-featuredArticle.-pos2 .c-featuredArticle__heading { margin-left: calc(var(--gridCol6) + 30px) } .c-featuredArticle.-pos2 .c-featuredArticle__heading br { display: none } .c-featuredArticle.-pos2 .c-featuredArticle__subheading { width: var(--gridCol3); width: calc(100% - var(--gridCol6) - 30px) } .c-featuredArticle.-pos2 .c-button, .c-featuredArticle.-pos2 .c-featuredArticle__subheading { margin-left: calc(var(--gridCol6) + 30px); margin-top: 15px } .c-featuredArticle.-pos2 .c-featuredArticle__additionalInfo { bottom: unset; font-size: 15px; left: unset; letter-spacing: .02em; line-height: 20px; margin-left: calc(var(--gridCol6) + 30px); margin-top: 15px; position: relative; right: unset; width: calc(100% - var(--gridCol6) - 30px) } } @media(max-width:767px) { .c-featuredArticle.-pos2 { height: 70vh; min-height: 540px } .c-featuredArticle.-pos2 .c-featuredArticle__heading br { display: none } .c-featuredArticle.-pos2 .c-button, .c-featuredArticle.-pos2 .c-featuredArticle__subheading { margin-top: 15px } .c-featuredArticle.-pos2 .c-featuredArticle__additionalInfo { bottom: unset; font-size: 15px; left: unset; letter-spacing: .02em; line-height: 20px; margin-top: 15px; position: relative; right: unset } } .c-featuredArticle__subheading { color: #fff } @media(max-width:1023px) { .c-featuredArticle__subheading { margin-top: 20px } } @media(min-width:1024px) { .c-featuredArticle__subheading { margin-left: var(--gridMargin); padding-top: 20px; width: var(--gridCol3) } } .c-featuredArticle__additionalInfo { align-items: center; bottom: 30px; color: #fff; display: flex; position: absolute; right: 0; width: var(--gridCol3) } @media(max-width:1023px) { .c-featuredArticle__additionalInfo { bottom: 20px; font-size: 20px; left: 20px; line-height: 25px; right: unset; width: 100% } } @media(min-width:1024px) { .c-featuredArticle__additionalInfo { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-featuredArticle__additionalInfoSeperator { background-color: #fff; border-radius: 50%; height: 4px; margin-left: 4px; margin-right: 4px; width: 4px } @media(hover:hover) { .c-hobbyistsBanner__product.permit-hovers .c-hobbyistsBanner__productPoster { transition-duration: .24s !important; transition-timing-function: linear !important } .c-hobbyistsBanner__product.permit-hovers:hover .c-hobbyistsBanner__productPoster { transform: scale(1.012) } } .c-hobbyistsBanner__inner { align-items: center; display: flex; flex-direction: column; padding-bottom: 30px; padding-top: 8px } @media(max-width:1023px) { .c-hobbyistsBanner__inner { padding-bottom: 0; padding-top: 20px } } .c-hobbyistsBanner__intro { align-items: flex-end; display: flex; flex-direction: column; position: relative } @media(max-width:1023px) { .c-hobbyistsBanner__intro { align-items: flex-start; width: 100% } } .c-hobbyistsBanner__birds { position: absolute; right: 196px; top: -7px; width: 57px } @media(max-width:1023px) { .c-hobbyistsBanner__birds { left: 213px; right: unset; top: -32px } } .c-hobbyistsBanner__introHeading { position: relative } .c-hobbyistsBanner__introHeadingPartOne { background-color: #fff; display: block; letter-spacing: 0; position: absolute; z-index: 1 } @media(max-width:1023px) { .c-hobbyistsBanner__introHeadingPartOne { left: 26px; padding: 0 12px 2px; top: 17px } } @media(min-width:1024px) { .c-hobbyistsBanner__introHeadingPartOne { left: 63px; padding: 0 12px 4px; top: 37px } } .c-hobbyistsBanner__introHeadingPartTwo { -webkit-text-fill-color: transparent; background: linear-gradient(90deg, #000 25%, #feac5e 40%, #c779d0 55%, #4bc0c8 70%, #000 75%); background-clip: text; -webkit-background-clip: text; background-position: 100% 0; background-repeat: no-repeat; background-size: 400% 100%; color: #000; display: block; left: -14px; padding: 0 20px; position: relative; transition: background-position 8s cubic-bezier(.19, 1, .22, 1) .4s } @media(max-width:1023px) { .c-hobbyistsBanner__introHeadingPartTwo { left: -28px; line-height: 81px; transition: background-position 8s cubic-bezier(.19, 1, .22, 1) 0s } } .c-hobbyistsBanner.animateIn .c-hobbyistsBanner__introHeadingPartTwo { background-position: 0 0 } .c-hobbyistsBanner__header { margin-top: 10px; width: 100% } @media(max-width:1023px) { .c-hobbyistsBanner__header { margin-top: 8px } .c-hobbyistsBanner__headerRow>:not(:first-child) { margin-top: 30px } } @media(min-width:1024px) { .c-hobbyistsBanner__headerRow { align-items: flex-end; display: flex; justify-content: space-between } .c-hobbyistsBanner__headerRow>:not(:first-child) { margin-left: var(--gridMargin) } .c-hobbyistsBanner__headerCol { display: flex; flex: 1 } .c-hobbyistsBanner__headerCol:first-child { justify-content: flex-end } .c-hobbyistsBanner__heading { color: #000; font-size: 90px; line-height: 90px; position: relative } .c-hobbyistsBanner__heading .-leftSpace { margin-left: 120px } } @media(max-width:1023px) { .c-hobbyistsBanner__heading { font-size: 70px; line-height: 1 } .c-hobbyistsBanner__heading .-leftSpace { margin-left: 60px } } @media screen and (max-width:320px) { .c-hobbyistsBanner__heading { font-size: 60px; line-height: 1 } .c-hobbyistsBanner__heading .-leftSpace { margin-left: 50px } } .-headerColManage .-col9 { flex: 0 0 65% } .-headerColManage .-col3 { flex: 0 0 35%; justify-content: flex-end; margin-left: 0 } @media(min-width:1024px) { .-headerColManage .-col3 { flex: none; justify-content: flex-start; padding-bottom: 6px; width: var(--gridCol3) } } .c-hobbyistsBanner__products { display: flex; margin-top: 30px; width: 100% } @media(max-width:1023px) { .c-hobbyistsBanner__products { flex-direction: column } } .c-hobbyistsBanner__products>:not(:first-child) { margin-left: var(--gridMargin) } @media(max-width:1023px) { .c-hobbyistsBanner__products>:not(:first-child) { margin-left: 0; margin-top: 30px } } .c-hobbyistsBanner__product { flex-basis: calc(50% - 15px) } @media(max-width:1023px) { .c-hobbyistsBanner__product { flex-basis: 100% } } .c-hobbyistsBanner__productPosterWrapper { padding-top: 50%; position: relative } .c-hobbyistsBanner__productPreview { background-color: #e8e9eb; padding: 32px 30px 32px 140px; position: relative } @media(max-width:1023px) { .c-hobbyistsBanner__productPreview { padding: 20px 20px 20px 100px } } .c-hobbyistsBanner__productThumbnail { height: 120px; left: 0; position: absolute; top: 0; width: 120px } @media(max-width:1023px) { .c-hobbyistsBanner__productThumbnail { height: 80px; width: 80px } } @media(min-width:1024px) { .c-hobbyistsBanner__productName { font-size: 20px; line-height: 25px } } @media(max-width:1023px) { .c-hobbyistsBanner__productName { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-hobbyistsBanner__productPrice { margin-top: 10px } @media(hover:hover) { .c-kidsBanner.permit-hovers .c-kidsBanner__productImageContainer { background-color: #f3f3f3 } .c-kidsBanner.permit-hovers img.c-kidsBanner__productImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } .c-kidsBanner.permit-hovers img.c-kidsBanner__productImage:not(.-hoverImage) { opacity: 1 } .c-kidsBanner.permit-hovers img.c-kidsBanner__productImage.-hoverImage { opacity: 0 } .c-kidsBanner.permit-hovers .c-kidsBanner__product:hover img.c-kidsBanner__productImage:not(.-hoverImage) { opacity: 0; transition-delay: 0s !important } .c-kidsBanner.permit-hovers .c-kidsBanner__product:hover img.c-kidsBanner__productImage.-hoverImage { opacity: 1 } } .c-kidsBanner { position: relative } .c-kidsBanner__inner { padding: 30px 0 } .c-kidsBanner__header { display: flex } @media(max-width:1023px) { .c-kidsBanner__header { flex-direction: column } } @media(max-width:1023px)and (max-width:1023px) { .c-kidsBanner__header>:first-child { order: 2 } .c-kidsBanner__header>:not(:first-child) { order: 1 } .c-kidsBanner__header.-headerColManage .c-kidsBanner__headerCol:first-child { font-size: 20px; line-height: 25px; order: 0 } } @media(max-width:1023px) { .c-kidsBanner__header.-headerColManage .c-trending__button { margin-top: 19px } } @media(min-width:1024px) { .c-kidsBanner__header { align-items: flex-end } .c-kidsBanner__headerCol { flex: 1 } .c-kidsBanner__header>:first-child { display: flex; justify-content: flex-end } .c-kidsBanner__header>:not(:first-child) { margin-left: var(--gridMargin) } .c-kidsBanner__header.-headerColManage .-smallTopText { align-self: flex-start; flex: none; justify-content: flex-start; width: calc(25% - 22.5px) } .c-kidsBanner__header.-headerColManage .-smallTopText .c-kidsBanner__headerTopTitle { color: #000; font-size: 20px; line-height: 25px } .c-kidsBanner__header.-headerColManage .c-kidsBanner__headerCol:nth-child(3) { flex: none; width: calc(25% - 22.5px) } } @media(max-width:1023px) { .c-kidsBanner__headerTitle { font-size: 40px; line-height: 1; margin-top: 20px } } @media(min-width:1024px) { .c-kidsBanner__headerTitle { font-size: 50px; left: 11px; line-height: 1; position: relative } .c-kidsBanner__headerSubtitle { margin-bottom: 4px } } .c-kidsBanner__products { display: flex; flex-flow: row wrap; margin-top: 30px } @media(max-width:1023px) { .c-kidsBanner__products>:nth-child(2n) { margin-left: 20px } .c-kidsBanner__products>:nth-child(n+3) { margin-top: 30px } } @media(min-width:1024px) { .c-kidsBanner__products>:not(:first-child) { margin-left: var(--gridMargin) } } .c-kidsBanner__product { position: relative; width: calc(25% - 22.5px) } @media(max-width:1023px) { .c-kidsBanner__product { width: calc(50% - 10px) } } @media(min-width:1024px) { .c-kidsBanner__product { padding-top: 30px } } .c-kidsBanner__productImageContainer { padding-top: var(--instagramAspectRatio) } .c-kidsBanner__productImage.-hoverImage { opacity: 0 } .c-kidsBanner__productName { margin-top: 20px } @media(max-width:1023px) { .c-kidsBanner__productName { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 10px } } @media(min-width:1024px) { .c-kidsBanner__productName { font-size: 20px; line-height: 25px } } .c-showcaseBanner { margin-left: calc(0px - var(--viewportSidePadding)); overflow: hidden; padding-left: var(--viewportSidePadding); padding-right: var(--viewportSidePadding); position: relative; width: var(--viewportWidth) } .c-showcaseBanner__inner { display: flex; position: relative } @media(max-width:1023px) { .c-showcaseBanner__inner { align-items: center; flex-direction: column } } .c-showcaseBanner__details { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; padding-bottom: 266px; padding-top: 100px; width: var(--gridCol3) } @media(max-width:1023px) { .c-showcaseBanner__details { margin-left: auto; margin-right: auto; max-width: 250px; padding-bottom: 0; padding-top: 0; width: 100% } } @media(max-width:767px) { .c-showcaseBanner__details { max-width: 100%; padding-bottom: 0; padding-top: 0; width: 100% } } @media(min-width:1024px) { .c-showcaseBanner__details { margin-left: var(--gridMargin) } } .c-showcaseBanner__desc { margin-top: 20px; padding-right: 34px } .c-showcaseBanner__button { margin-top: 20px } .c-showcaseBanner__curveWrapper { align-items: center; display: flex; height: 100%; left: calc(0px - var(--viewportSidePadding)); overflow: hidden; position: absolute; top: 0; width: var(--viewportWidth) } .c-showcaseBanner__curve { stroke-dasharray: 2000; stroke-dashoffset: 4000; flex-shrink: 0; left: -9vw; width: 118vw } @keyframes animateShowcaseCurve { 0% { stroke-dashoffset: 2000 } to { stroke-dashoffset: 4000 } } .c-showcaseBanner__posters { position: relative } @media(max-width:1023px) { .c-showcaseBanner__posters.-lhs { height: 500px; max-width: 320px; width: 100% } } @media(min-width:1024px) { .c-showcaseBanner__posters.-lhs { width: var(--gridCol6) } } @media(max-width:1023px) { .c-showcaseBanner__posters.-rhs { height: 470px; max-width: 320px; width: 100% } } @media(min-width:1024px) { .c-showcaseBanner__posters.-rhs { flex: 1 } } .c-showcaseBanner__posterWrapper.-one { height: 122px; left: -5px; position: absolute; top: 51px; transform: rotate(24deg); width: 122px } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-one { height: 111px; left: -30px; top: 67px; width: 111px } } .c-showcaseBanner__posterWrapper.-two { height: 300px; left: 22px; position: absolute; top: 194px; transform: rotate(-22deg); width: 300px } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-two { height: 250px; left: -2px; top: 134px; width: 250px } } .c-showcaseBanner__posterWrapper.-three { height: 122px; left: 3px; position: absolute; top: 459px; transform: rotate(24deg); width: 122px } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-three { height: 111px; left: -16px; top: 338px; width: 111px } } .c-showcaseBanner__posterWrapper.-four { height: 122px; left: 279px; position: absolute; top: 206px; transform: rotate(10deg); width: 122px } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-four { height: 111px; left: unset; right: -21px; top: 112px; width: 111px } } .c-showcaseBanner__posterWrapper.-five { height: 88px; left: 351px; position: absolute; top: 118px; transform: rotate(-30deg); width: 88px } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-five { left: unset; right: 36px; top: 332px; transform: rotate(17deg) } } .c-showcaseBanner__posterWrapper.-six { height: 88px; left: 317px; position: absolute; top: 494px; transform: rotate(12deg); width: 88px } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-six { display: none } } .c-showcaseBanner__posterWrapper.-seven { height: 95px; position: absolute; right: 119px; top: 377px; transform: rotate(3deg); width: 95px } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-seven { left: -3px; right: unset; top: 51px; transform: rotate(-11deg) } } .c-showcaseBanner__posterWrapper.-eight { height: 122px; position: absolute; right: 70px; top: 150px; transform: rotate(-18deg); width: 122px; z-index: 1 } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-eight { height: 108px; left: -38px; right: unset; top: 214px; width: 108px; z-index: 1 } } .c-showcaseBanner__posterWrapper.-nine { height: 320px; position: absolute; right: -212px; top: 147px; transform: rotate(19deg); width: 320px } @media(max-width:1023px) { .c-showcaseBanner__posterWrapper.-nine { height: 280px; left: 53px; right: unset; top: 69px; width: 280px } } .c-showcaseBanner__poster { height: 100%; left: 0; position: absolute; top: 0; width: 100%; will-change: transform } .c-featuredArt__inner { position: relative } .c-featuredArt__heading { font-size: 40px; line-height: 1 } @media(min-width:1024px) { .c-featuredArt__heading { text-align: center } } .c-featuredArt__artworks { display: flex; flex-flow: row wrap; margin-top: 30px; position: relative } @media(max-width:1023px) { .c-featuredArt__artworks { margin-top: 20px } } @media(min-width:1024px) { .c-featuredArt__artworks>:nth-child(2n) { flex-basis: calc(50% + 1px); margin-left: -1px } } .c-featuredArt__artwork { flex-basis: 50%; padding: 30px; position: relative } @media(max-width:1023px) { .c-featuredArt__artwork { flex-basis: 100%; padding: 20px } } .c-featuredArt__artworkPosterWrapper { padding-top: 80%; position: relative } .c-featuredArt__artist { align-items: center; display: flex; margin-top: 20px } @media(max-width:1023px) { .c-featuredArt__artist { margin-top: 10px } } .c-featuredArt__artistProfileImage { border-radius: 50%; flex-shrink: 0; height: 60px; width: 60px } @media(max-width:1023px) { .c-featuredArt__artistProfileImage { height: 30px; width: 30px } } .c-featuredArt__artistNameAndLinkWrapper { margin-left: 10px } @media(max-width:1023px) { .c-featuredArt__artistNameAndLinkWrapper { align-items: center; display: flex; flex: 1; justify-content: space-between; margin-left: 7px } .c-featuredArt__artistName { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { .c-featuredArt__artistName { font-size: 20px; line-height: 25px } } .c-featuredArt__artistLink { color: #888 } .c-featuredArt__buttonWrapper { display: flex; justify-content: flex-end; margin-top: -1px } @media(hover:hover) { .c-worksBestWith.permit-hovers .c-worksBestWith__productImageContainer { background-color: #f3f3f3 } .c-worksBestWith.permit-hovers img.c-worksBestWith__productImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } .c-worksBestWith.permit-hovers img.c-worksBestWith__productImage:not(.-hoverImage) { opacity: 1 } .c-worksBestWith.permit-hovers .c-worksBestWith__product:hover img.c-worksBestWith__productImage:not(.-hoverImage), .c-worksBestWith.permit-hovers img.c-worksBestWith__productImage.-hoverImage { opacity: 0 } .c-worksBestWith.permit-hovers .c-worksBestWith__product:hover img.c-worksBestWith__productImage.-hoverImage { opacity: 1 } } .c-worksBestWith__inner { padding-bottom: 60px; padding-top: 60px; position: relative; top: -1px } @media(max-width:1023px) { .c-worksBestWith__inner { padding-bottom: 50px; padding-top: 50px } .c-worksBestWith__heading { font-size: 30px; line-height: 1 } } @media(min-width:1024px) { .c-worksBestWith__heading { font-size: 40px; line-height: 1; text-align: center } } .c-worksBestWith__products { display: flex; margin-top: 30px } @media(max-width:1023px) { .c-worksBestWith__products { -ms-overflow-style: none; margin-left: 0; margin-top: 30px; overflow-x: scroll; overflow-y: hidden; padding-left: 0; scroll-padding-left: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; width: calc(100% + 20px) } .c-worksBestWith__products::-webkit-scrollbar { display: none } .c-worksBestWith__products:after { content: ""; padding-left: 20px } } @media(min-width:1024px) { .c-worksBestWith__products { justify-content: center } } .c-worksBestWith__products>:not(:first-child) { margin-left: var(--gridMargin) } .c-worksBestWith__products.-carousel { justify-content: flex-start; overflow: hidden; scroll-snap-type: x mandatory; width: 100% } .c-worksBestWith__products.-carousel .c-worksBestWith__product { flex-shrink: 0; scroll-snap-align: start } @media(max-width:1023px) { .c-worksBestWith__products.-carousel { overflow-x: auto; width: calc(100% + 20px) } } .c-worksBestWith__product { width: var(--gridCol3) } @media(max-width:767px) { .c-worksBestWith__product { flex-shrink: 0; scroll-snap-align: start; width: 58.8235294118% } } @media(max-width:1023px)and (min-width:768px) { .c-worksBestWith__product { flex-shrink: 0; scroll-snap-align: start; width: 40% } } .c-worksBestWith__productImageContainer { background-color: #f3f3f3; padding-top: 125% } .c-worksBestWith__productImage { object-fit: cover; object-position: center } .c-worksBestWith__productImage.-hoverImage { opacity: 0 } .c-worksBestWith__productName { margin-top: 20px } @media(max-width:1023px) { .c-worksBestWith__productName { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { .c-worksBestWith__productName { font-size: 20px; line-height: 25px } } @media(max-width:767px) { .c-worksBestWith__productName { margin-top: 10px } } @media(min-width:1024px) { .c-worksBestWith__products.-carousel+.c-worksBestWith__nav { display: block } } .c-worksBestWith__nav { display: none; pointer-events: none } @media(max-width:1023px) { .c-worksBestWith__nav { display: none } } .c-worksBestWith__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: 50% } .c-worksBestWith__navButton.is-disabled { opacity: 0; pointer-events: none } .c-worksBestWith__navButtonArrow { height: 12px; width: auto } .c-worksBestWith__navButton.-previous { left: -55px; transform: rotate(180deg) } .c-worksBestWith__navButton.-next { right: -55px } .c-forBestResults__inner { padding-bottom: 60px; padding-top: 60px; position: relative; top: -1px } @media(max-width:1023px) { .c-forBestResults__inner { padding-bottom: 50px; padding-top: 50px } .c-forBestResults__heading { font-size: 30px; line-height: 1 } } @media(min-width:1024px) { .c-forBestResults__heading { font-size: 40px; line-height: 1; text-align: center } } .c-forBestResults__list { display: flex; margin-top: 40px } @media(max-width:1023px) { .c-forBestResults__list { -ms-overflow-style: none; margin-left: 0; margin-top: 25px; overflow-x: scroll; overflow-y: hidden; padding-left: 0; scroll-padding-left: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; width: calc(100% + 20px) } .c-forBestResults__list::-webkit-scrollbar { display: none } .c-forBestResults__list:after { content: ""; padding-left: 20px } } @media(min-width:1024px) { .c-forBestResults__list { justify-content: center } } .c-forBestResults__list>:not(:first-child) { margin-left: var(--gridMargin) } .c-forBestResults__list.-carousel { justify-content: flex-start; overflow: hidden; scroll-snap-type: x mandatory; width: 100% } .c-forBestResults__list.-carousel .c-forBestResults__item { flex-shrink: 0; scroll-snap-align: start } @media(max-width:1023px) { .c-forBestResults__list.-carousel { overflow-x: auto; width: calc(100% + 20px) } } .c-forBestResults__item { padding-top: 30px; position: relative; width: var(--gridCol4) } @media(max-width:767px) { .c-forBestResults__item { flex-shrink: 0; padding-top: 15px; scroll-snap-align: start; width: 58.8235294118% } } @media(max-width:1023px)and (min-width:768px) { .c-forBestResults__item { flex-shrink: 0; padding-top: 15px; scroll-snap-align: start; width: 40% } } .c-forBestResults__itemImageContainer { padding-top: 125% } .c-forBestResults__itemImage { object-fit: cover; object-position: center } .c-forBestResults__itemImage.-hoverImage { opacity: 0 } .c-forBestResults__itemTitle { padding-top: 30px } @media(max-width:1023px) { .c-forBestResults__itemTitle { font-size: 20px; line-height: 25px; padding-right: 20px; padding-top: 20px } } @media(min-width:1024px) { .c-forBestResults__itemTitle { font-size: 20px; line-height: 25px } } .c-forBestResults__itemDesc { max-width: 350px; padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-forBestResults__itemDesc { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px; padding-right: 20px } } @media(min-width:1024px) { .c-forBestResults__itemDesc { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-forBestResults__itemLink { margin-top: 30px } @media(max-width:1023px) { .c-forBestResults__itemLink { margin-top: 20px } } @media(min-width:1024px) { .c-forBestResults__list.-carousel+.c-forBestResults__nav { display: block } } .c-forBestResults__nav { display: none; pointer-events: none } @media(max-width:1023px) { .c-forBestResults__nav { display: none } } .c-forBestResults__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: 41% } .c-forBestResults__navButton.is-disabled { opacity: 0; pointer-events: none } .c-forBestResults__navButtonArrow { height: 12px; width: auto } .c-forBestResults__navButton.-previous { left: -55px; transform: rotate(180deg) } .c-forBestResults__navButton.-next { right: -55px } @media(hover:hover) { .c-youCanAlsoTry.permit-hovers .c-youCanAlsoTry__productImageContainer { background-color: #f3f3f3 } .c-youCanAlsoTry.permit-hovers img.c-youCanAlsoTry__productImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } .c-youCanAlsoTry.permit-hovers img.c-youCanAlsoTry__productImage:not(.-hoverImage) { opacity: 1 } .c-youCanAlsoTry.permit-hovers .c-youCanAlsoTry__product:hover img.c-youCanAlsoTry__productImage:not(.-hoverImage), .c-youCanAlsoTry.permit-hovers img.c-youCanAlsoTry__productImage.-hoverImage { opacity: 0 } .c-youCanAlsoTry.permit-hovers .c-youCanAlsoTry__product:hover img.c-youCanAlsoTry__productImage.-hoverImage { opacity: 1 } } .c-youCanAlsoTry__inner { padding-bottom: 60px; padding-top: 60px; position: relative; top: -1px } @media(max-width:1023px) { .c-youCanAlsoTry__inner { padding-bottom: 0; padding-top: 50px } } @media(min-width:1024px) { .c-youCanAlsoTry__inner { align-items: center; display: flex; flex-direction: column } } @media(max-width:1023px) { .c-youCanAlsoTry__heading { font-size: 30px; line-height: 1 } } @media(min-width:1024px) { .c-youCanAlsoTry__heading { font-size: 40px; line-height: 1; text-align: center } } .c-youCanAlsoTry__products { display: flex; margin-top: 30px; position: relative } @media(max-width:1023px) { .c-youCanAlsoTry__products { -ms-overflow-style: none; margin-left: 0; margin-top: 25px; overflow-x: scroll; overflow-y: hidden; padding-left: 0; scroll-padding-left: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; width: calc(100% + 20px) } .c-youCanAlsoTry__products::-webkit-scrollbar { display: none } .c-youCanAlsoTry__products:after { content: ""; padding-left: 20px } } @media(min-width:1024px) { .c-youCanAlsoTry__products { justify-content: center } } .c-youCanAlsoTry__products.-carousel { justify-content: flex-start; overflow: hidden; scroll-snap-type: x mandatory; width: 100% } .c-youCanAlsoTry__products.-carousel .c-youCanAlsoTry__product { flex-shrink: 0; scroll-snap-align: start } @media(max-width:1023px) { .c-youCanAlsoTry__products.-carousel { overflow-x: auto; width: calc(100% + 20px) } } .c-youCanAlsoTry__product { padding: 30px; position: relative; width: calc(var(--containerWidth)*25/100) } @media(max-width:767px) { .c-youCanAlsoTry__product { flex-shrink: 0; padding: 20px 20px 30px; scroll-snap-align: start; width: 70.5882352941% } } @media(max-width:1023px)and (min-width:768px) { .c-youCanAlsoTry__product { flex-shrink: 0; padding: 20px 20px 30px; scroll-snap-align: start; width: 40% } } .c-youCanAlsoTry__productImageContainer { padding-top: 125% } .c-youCanAlsoTry__productImage { object-fit: cover; object-position: center } .c-youCanAlsoTry__productImage.-hoverImage { opacity: 0 } .c-youCanAlsoTry__productName { padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-youCanAlsoTry__productName { padding-right: 15px } } .c-youCanAlsoTry__productQuantity { padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-youCanAlsoTry__productQuantity { padding-right: 15px } } .c-youCanAlsoTry__productDesc { padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-youCanAlsoTry__productDesc { padding-right: 15px } } .c-youCanAlsoTry__productLink { margin-top: 10px } @media(min-width:1024px) { .c-youCanAlsoTry__products.-carousel+.c-youCanAlsoTry__nav { display: block } } .c-youCanAlsoTry__nav { display: none; pointer-events: none } @media(max-width:1023px) { .c-youCanAlsoTry__nav { display: none } } .c-youCanAlsoTry__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: 47% } .c-youCanAlsoTry__navButton.is-disabled { opacity: 0; pointer-events: none } .c-youCanAlsoTry__navButtonArrow { height: 12px; width: auto } .c-youCanAlsoTry__navButton.-previous { left: -55px; transform: rotate(180deg) } .c-youCanAlsoTry__navButton.-next { right: -55px } .c-proTips { padding-bottom: 60px; padding-top: 60px; position: relative; top: -1px } @media(min-width:1024px) { .c-proTips { align-items: center; display: flex; flex-direction: column } } @media(max-width:1023px) { .c-proTips { padding-bottom: 50px; padding-top: 50px } .c-proTips__heading { font-size: 30px; line-height: 1 } } @media(min-width:1024px) { .c-proTips__heading { font-size: 40px; line-height: 1; text-align: center } } .c-proTips__list { display: flex; margin-top: 30px; position: relative } @media(max-width:1023px) { .c-proTips__list { -ms-overflow-style: none; margin-left: 0; margin-top: 15px; overflow-x: scroll; overflow-y: hidden; padding-left: 0; scroll-padding-left: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; width: calc(100% + 20px) } .c-proTips__list::-webkit-scrollbar { display: none } .c-proTips__list:after { content: ""; padding-left: 20px } } .c-proTips__list>:not(:first-child) { margin-left: var(--gridMargin) } .c-proTips__list.-carousel { overflow: hidden; scroll-snap-type: x mandatory; width: 100% } .c-proTips__list.-carousel .c-proTips__item { flex-shrink: 0; scroll-snap-align: start } @media(max-width:1023px) { .c-proTips__list.-carousel { overflow-x: auto; width: calc(100% + 20px) } } .c-proTips__item { padding: 30px 30px 40px; position: relative; width: var(--gridCol3) } @media(max-width:767px) { .c-proTips__item { flex-shrink: 0; padding: 20px; scroll-snap-align: start; width: 55.8823529412% } } @media(max-width:1023px)and (min-width:768px) { .c-proTips__item { flex-shrink: 0; padding: 20px; scroll-snap-align: start; width: 40% } } .c-proTips__item.-withLightbulb { display: flex; flex-direction: column; min-height: 437px } @media(max-width:1023px) { .c-proTips__item.-withLightbulb { min-height: 304px } } .c-proTips__item.-withLightbulb:before { background-image: url(../assets/common/vectors/icon_lightbulb.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 24px; width: 24px } .c-proTips__item.-withLightbulb.-animate:before { animation-duration: .6s; animation-name: scaleAnim; animation-timing-function: linear } .c-proTips__item.-withLightbulb .c-proTips__itemText { margin-top: 0; padding-top: 10px } @media(max-width:1023px) { .c-proTips__item.-withLightbulb .c-proTips__itemText { font-size: 20px; letter-spacing: .02em; line-height: 25px; line-height: 23px; padding-top: 20px } } @media(min-width:1024px) { .c-proTips__item.-withLightbulb .c-proTips__itemText { font-size: 30px; line-height: 1 } } .c-proTips__itemImageContainer { padding-top: 125% } .c-proTips__itemText { margin-top: -50px; padding-top: 70px } @media(max-width:1023px) { .c-proTips__itemText { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 0; padding-top: 20px } } @media(min-width:1024px) { .c-proTips__itemText { font-size: 15px; letter-spacing: .02em; line-height: 20px } .c-proTips__list.-carousel+.c-proTips__nav { display: block } } .c-proTips__nav { display: none; pointer-events: none } @media(max-width:1023px) { .c-proTips__nav { display: none } } .c-proTips__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: calc(50% - 28px) } .c-proTips__navButton.is-disabled { opacity: 0; pointer-events: none } .c-proTips__navButtonArrow { height: 12px; width: auto } .c-proTips__navButton.-previous { left: -55px; transform: rotate(180deg) } .c-proTips__navButton.-next { right: -55px } .c-productDetail { display: flex; position: relative } @media(max-width:1023px) { .c-productDetail { flex-direction: column } } @media(min-width:1024px) { .c-productDetail { align-items: flex-end } } .c-productDetail__productImages { display: flex; flex-shrink: 0; width: 57.264957265% } @media(max-width:1023px) { .c-productDetail__productImages { overflow: hidden; width: 100% } } @media(min-width:1024px) { .c-productDetail__productImages { bottom: calc(0px - var(--gridMargin)); flex-flow: row wrap; min-height: calc(100vh - 108px); padding-bottom: 60px; position: sticky } .c-productDetail__productImages.-alignStretch { align-self: stretch; min-height: unset } .c-productDetail__productImages>:nth-child(2n) { margin-left: var(--gridMargin) } .c-productDetail__productImages>:nth-child(n+3) { margin-top: var(--gridMargin) } } .c-productDetail__productImageContainer { flex-shrink: 0; height: 0; padding-top: 59.7014925373%; position: relative; width: calc(50% - 15px) } @media(max-width:1023px) { .c-productDetail__productImageContainer { padding-top: 125%; width: 100% } } .c-productDetail__productImageIndex { display: none } @media(max-width:1023px) { .c-productDetail__productImageIndex { display: block; font-size: 13px; letter-spacing: .03em; line-height: 15px; position: absolute; right: 15px; top: 15px; transform: translateZ(0); z-index: 1 } } .c-productDetail__productInfo { padding-bottom: 60px } @media(max-width:767px) { .c-productDetail__productInfo { padding-bottom: 50px } } @media(max-width:1023px) { .c-productDetail__productInfo { margin-top: 30px } } @media(min-width:1024px) { .c-productDetail__productInfo { align-self: stretch; flex: 1; margin-left: var(--gridMargin) } .c-productDetail__productInfo.-alignStart { align-self: flex-start } } @media(max-width:1023px) { .c-productDetail__productName { font-size: 40px; line-height: 1 } } @media(min-width:1024px) { .c-productDetail__productName { font-size: 50px; line-height: 1 } } .c-productDetail__productDescriptor, .c-productDetail__productPrice { margin-top: 20px } .c-productDetail__shippingInfo { color: #888 } .c-productDetail__colorPicker { overflow: hidden } .c-productDetail__colorPickerHeading { align-items: center; display: flex; font-family: NeueMontreal-Medium; padding-bottom: 10px } .c-productDetail__colorPickerHeading:before { background-image: url(../assets/common/vectors/icon_color-palette.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 16px; margin-right: 10px; width: 16px } .c-productDetail__colorPickerHeading.-animate:before { animation-duration: .6s; animation-name: scaleRotateAnim; animation-timing-function: linear } .c-productDetail__colorPickerHeading__colorName { font-family: inherit; font-size: inherit; margin-left: auto } @media(max-width:767px) { .c-productDetail__colorPickerHeading__colorName { display: none } } .c-productDetail__colorPicker.-pencil .c-productDetail__colorPickerHeading:before { background-image: url(../assets/common/vectors/icon_pencil.svg) } .c-productDetail__colorPicker.-pencil .c-productDetail__colorWrapper:nth-child(n+2) { margin-left: 20px } .c-productDetail__colorPicker.-pencil .c-productDetail__colorPickerHeading { padding-bottom: 10px } .c-productDetail__colorPicker.-pencil .c-productDetail__colorRangeWrapper { padding-bottom: 0 } .c-productDetail__colorRangeWrapper { align-items: flex-start; display: flex; margin-left: -10px; padding-bottom: 20px; position: relative } .c-productDetail__colorPickerSeeMoreButton { display: none; flex-shrink: 0; margin-left: 10px; margin-top: 18px } .c-productDetail__colorRange { display: flex; flex-flow: row wrap } .c-productDetail__colorRange.-grid { margin-top: 35px; width: 100% } @media(max-width:1023px) { .c-productDetail__colorRange.-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 25px } } .c-productDetail__colorWrapper { cursor: pointer; margin-left: 10px; margin-top: 20px; position: relative } @media(max-width:767px) { .c-productDetail__colorWrapper { width: calc(12.5vw - 15px) } } @media(max-width:1023px)and (min-width:768px) { .c-productDetail__colorWrapper { width: calc(8vw - 15px) } } .c-productDetail__colorInput { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } .c-productDetail__colorInput:checked+.c-productDetail__color:after, .c-productDetail__colorInput:checked+.c-productDetail__color:before { opacity: 1 } .c-productDetail__colorInput:checked+.c-productDetail__color.-white:before { border: 2px solid #000 } .c-productDetail__color { border-radius: 50%; flex-shrink: 0; height: 24px; margin-left: auto; margin-right: auto; position: relative; width: 24px } .c-productDetail__color:before { border: 2px solid #000; border-radius: 50% } .c-productDetail__color:after, .c-productDetail__color:before { box-sizing: border-box; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100% } .c-productDetail__color:after { background-image: url(../assets/common/vectors/icon_color-tick.svg); background-position: 50%; background-repeat: no-repeat; background-size: 10px auto } .c-productDetail__color.-dark:after { filter: invert(100%) } .c-productDetail__color.-white:before { border: 1px solid #dfdfdf; opacity: 1 } @media(max-width:1023px) { .c-productDetail__color { padding-top: 100%; width: 100% } } .c-productDetail__color__text { display: block; padding-top: 10px; position: relative; text-align: center } @keyframes scaleColorBlot { 0% { transform: scale(0) } to { transform: scale(1) } } .c-productDetail__colorPicker.is-collapsed .c-productDetail__colorPickerSeeMoreButton { display: inline-flex } @media only screen and (max-width:1023px) { .c-productDetail__colorPicker.is-collapsed .c-productDetail__colorWrapper:nth-child(n+7) { display: none } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+7) { animation-delay: 0s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+8) { animation-delay: .02s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+9) { animation-delay: .04s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+10) { animation-delay: .06s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+11) { animation-delay: .08s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+12) { animation-delay: .1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+13) { animation-delay: .12s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+14) { animation-delay: .14s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+15) { animation-delay: .16s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+16) { animation-delay: .18s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+17) { animation-delay: .2s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+18) { animation-delay: .22s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+19) { animation-delay: .24s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+20) { animation-delay: .26s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+21) { animation-delay: .28s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+22) { animation-delay: .3s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+23) { animation-delay: .32s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+24) { animation-delay: .34s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+25) { animation-delay: .36s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+26) { animation-delay: .38s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+27) { animation-delay: .4s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+28) { animation-delay: .42s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+29) { animation-delay: .44s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+30) { animation-delay: .46s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+31) { animation-delay: .48s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+32) { animation-delay: .5s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+33) { animation-delay: .52s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+34) { animation-delay: .54s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+35) { animation-delay: .56s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+36) { animation-delay: .58s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+37) { animation-delay: .6s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+38) { animation-delay: .62s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+39) { animation-delay: .64s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+40) { animation-delay: .66s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+41) { animation-delay: .68s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+42) { animation-delay: .7s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+43) { animation-delay: .72s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+44) { animation-delay: .74s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+45) { animation-delay: .76s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+46) { animation-delay: .78s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+47) { animation-delay: .8s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+48) { animation-delay: .82s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+49) { animation-delay: .84s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+50) { animation-delay: .86s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+51) { animation-delay: .88s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+52) { animation-delay: .9s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+53) { animation-delay: .92s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+54) { animation-delay: .94s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+55) { animation-delay: .96s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+56) { animation-delay: .98s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+57) { animation-delay: 1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+58) { animation-delay: 1.02s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+59) { animation-delay: 1.04s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+60) { animation-delay: 1.06s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+61) { animation-delay: 1.08s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+62) { animation-delay: 1.1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+63) { animation-delay: 1.12s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+64) { animation-delay: 1.14s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+65) { animation-delay: 1.16s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+66) { animation-delay: 1.18s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+67) { animation-delay: 1.2s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+68) { animation-delay: 1.22s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+69) { animation-delay: 1.24s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+70) { animation-delay: 1.26s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+71) { animation-delay: 1.28s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+72) { animation-delay: 1.3s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+73) { animation-delay: 1.32s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+74) { animation-delay: 1.34s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+75) { animation-delay: 1.36s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+76) { animation-delay: 1.38s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+77) { animation-delay: 1.4s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+78) { animation-delay: 1.42s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+79) { animation-delay: 1.44s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+80) { animation-delay: 1.46s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+81) { animation-delay: 1.48s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+82) { animation-delay: 1.5s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+83) { animation-delay: 1.52s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+84) { animation-delay: 1.54s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+85) { animation-delay: 1.56s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+86) { animation-delay: 1.58s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+87) { animation-delay: 1.6s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+88) { animation-delay: 1.62s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+89) { animation-delay: 1.64s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+90) { animation-delay: 1.66s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+91) { animation-delay: 1.68s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+92) { animation-delay: 1.7s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+93) { animation-delay: 1.72s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+94) { animation-delay: 1.74s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+95) { animation-delay: 1.76s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+96) { animation-delay: 1.78s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+97) { animation-delay: 1.8s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+98) { animation-delay: 1.82s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+99) { animation-delay: 1.84s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } } @media only screen and (min-width:1024px)and (max-width:1279px) { .c-productDetail__colorPicker.is-collapsed .c-productDetail__colorWrapper:nth-child(n+11) { display: none } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+11) { animation-delay: 0s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+12) { animation-delay: 8ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+13) { animation-delay: 16ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+14) { animation-delay: 24ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+15) { animation-delay: 32ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+16) { animation-delay: .04s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+17) { animation-delay: 48ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+18) { animation-delay: 56ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+19) { animation-delay: 64ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+20) { animation-delay: 72ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+21) { animation-delay: .08s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+22) { animation-delay: 88ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+23) { animation-delay: 96ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+24) { animation-delay: .104s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+25) { animation-delay: .112s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+26) { animation-delay: .12s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+27) { animation-delay: .128s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+28) { animation-delay: .136s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+29) { animation-delay: .144s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+30) { animation-delay: .152s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+31) { animation-delay: .16s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+32) { animation-delay: .168s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+33) { animation-delay: .176s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+34) { animation-delay: .184s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+35) { animation-delay: .192s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+36) { animation-delay: .2s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+37) { animation-delay: .208s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+38) { animation-delay: .216s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+39) { animation-delay: .224s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+40) { animation-delay: .232s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+41) { animation-delay: .24s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+42) { animation-delay: .248s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+43) { animation-delay: .256s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+44) { animation-delay: .264s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+45) { animation-delay: .272s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+46) { animation-delay: .28s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+47) { animation-delay: .288s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+48) { animation-delay: .296s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+49) { animation-delay: .304s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+50) { animation-delay: .312s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+51) { animation-delay: .32s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+52) { animation-delay: .328s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+53) { animation-delay: .336s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+54) { animation-delay: .344s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+55) { animation-delay: .352s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+56) { animation-delay: .36s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+57) { animation-delay: .368s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+58) { animation-delay: .376s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+59) { animation-delay: .384s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+60) { animation-delay: .392s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+61) { animation-delay: .4s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+62) { animation-delay: .408s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+63) { animation-delay: .416s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+64) { animation-delay: .424s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+65) { animation-delay: .432s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+66) { animation-delay: .44s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+67) { animation-delay: .448s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+68) { animation-delay: .456s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+69) { animation-delay: .464s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+70) { animation-delay: .472s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+71) { animation-delay: .48s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+72) { animation-delay: .488s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+73) { animation-delay: .496s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+74) { animation-delay: .504s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+75) { animation-delay: .512s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+76) { animation-delay: .52s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+77) { animation-delay: .528s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+78) { animation-delay: .536s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+79) { animation-delay: .544s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+80) { animation-delay: .552s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+81) { animation-delay: .56s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+82) { animation-delay: .568s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+83) { animation-delay: .576s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+84) { animation-delay: .584s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+85) { animation-delay: .592s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+86) { animation-delay: .6s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+87) { animation-delay: .608s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+88) { animation-delay: .616s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+89) { animation-delay: .624s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+90) { animation-delay: .632s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+91) { animation-delay: .64s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+92) { animation-delay: .648s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+93) { animation-delay: .656s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+94) { animation-delay: .664s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+95) { animation-delay: .672s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+96) { animation-delay: .68s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+97) { animation-delay: .688s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+98) { animation-delay: .696s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+99) { animation-delay: .704s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } } @media only screen and (min-width:1280px)and (max-width:1439px) { .c-productDetail__colorPicker.is-collapsed .c-productDetail__colorWrapper:nth-child(n+14) { display: none } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+14) { animation-delay: 0s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+15) { animation-delay: 8ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+16) { animation-delay: 16ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+17) { animation-delay: 24ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+18) { animation-delay: 32ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+19) { animation-delay: .04s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+20) { animation-delay: 48ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+21) { animation-delay: 56ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+22) { animation-delay: 64ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+23) { animation-delay: 72ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+24) { animation-delay: .08s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+25) { animation-delay: 88ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+26) { animation-delay: 96ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+27) { animation-delay: .104s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+28) { animation-delay: .112s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+29) { animation-delay: .12s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+30) { animation-delay: .128s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+31) { animation-delay: .136s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+32) { animation-delay: .144s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+33) { animation-delay: .152s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+34) { animation-delay: .16s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+35) { animation-delay: .168s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+36) { animation-delay: .176s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+37) { animation-delay: .184s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+38) { animation-delay: .192s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+39) { animation-delay: .2s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+40) { animation-delay: .208s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+41) { animation-delay: .216s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+42) { animation-delay: .224s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+43) { animation-delay: .232s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+44) { animation-delay: .24s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+45) { animation-delay: .248s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+46) { animation-delay: .256s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+47) { animation-delay: .264s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+48) { animation-delay: .272s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+49) { animation-delay: .28s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+50) { animation-delay: .288s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+51) { animation-delay: .296s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+52) { animation-delay: .304s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+53) { animation-delay: .312s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+54) { animation-delay: .32s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+55) { animation-delay: .328s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+56) { animation-delay: .336s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+57) { animation-delay: .344s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+58) { animation-delay: .352s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+59) { animation-delay: .36s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+60) { animation-delay: .368s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+61) { animation-delay: .376s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+62) { animation-delay: .384s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+63) { animation-delay: .392s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+64) { animation-delay: .4s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+65) { animation-delay: .408s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+66) { animation-delay: .416s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+67) { animation-delay: .424s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+68) { animation-delay: .432s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+69) { animation-delay: .44s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+70) { animation-delay: .448s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+71) { animation-delay: .456s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+72) { animation-delay: .464s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+73) { animation-delay: .472s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+74) { animation-delay: .48s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+75) { animation-delay: .488s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+76) { animation-delay: .496s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+77) { animation-delay: .504s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+78) { animation-delay: .512s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+79) { animation-delay: .52s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+80) { animation-delay: .528s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+81) { animation-delay: .536s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+82) { animation-delay: .544s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+83) { animation-delay: .552s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+84) { animation-delay: .56s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+85) { animation-delay: .568s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+86) { animation-delay: .576s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+87) { animation-delay: .584s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+88) { animation-delay: .592s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+89) { animation-delay: .6s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+90) { animation-delay: .608s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+91) { animation-delay: .616s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+92) { animation-delay: .624s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+93) { animation-delay: .632s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+94) { animation-delay: .64s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+95) { animation-delay: .648s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+96) { animation-delay: .656s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+97) { animation-delay: .664s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+98) { animation-delay: .672s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+99) { animation-delay: .68s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } } @media only screen and (min-width:1440px)and (max-width:1599px) { .c-productDetail__colorPicker.is-collapsed .c-productDetail__colorWrapper:nth-child(n+15) { display: none } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+15) { animation-delay: 0s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+16) { animation-delay: 8ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+17) { animation-delay: 16ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+18) { animation-delay: 24ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+19) { animation-delay: 32ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+20) { animation-delay: .04s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+21) { animation-delay: 48ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+22) { animation-delay: 56ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+23) { animation-delay: 64ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+24) { animation-delay: 72ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+25) { animation-delay: .08s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+26) { animation-delay: 88ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+27) { animation-delay: 96ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+28) { animation-delay: .104s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+29) { animation-delay: .112s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+30) { animation-delay: .12s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+31) { animation-delay: .128s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+32) { animation-delay: .136s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+33) { animation-delay: .144s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+34) { animation-delay: .152s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+35) { animation-delay: .16s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+36) { animation-delay: .168s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+37) { animation-delay: .176s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+38) { animation-delay: .184s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+39) { animation-delay: .192s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+40) { animation-delay: .2s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+41) { animation-delay: .208s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+42) { animation-delay: .216s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+43) { animation-delay: .224s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+44) { animation-delay: .232s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+45) { animation-delay: .24s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+46) { animation-delay: .248s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+47) { animation-delay: .256s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+48) { animation-delay: .264s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+49) { animation-delay: .272s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+50) { animation-delay: .28s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+51) { animation-delay: .288s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+52) { animation-delay: .296s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+53) { animation-delay: .304s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+54) { animation-delay: .312s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+55) { animation-delay: .32s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+56) { animation-delay: .328s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+57) { animation-delay: .336s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+58) { animation-delay: .344s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+59) { animation-delay: .352s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+60) { animation-delay: .36s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+61) { animation-delay: .368s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+62) { animation-delay: .376s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+63) { animation-delay: .384s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+64) { animation-delay: .392s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+65) { animation-delay: .4s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+66) { animation-delay: .408s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+67) { animation-delay: .416s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+68) { animation-delay: .424s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+69) { animation-delay: .432s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+70) { animation-delay: .44s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+71) { animation-delay: .448s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+72) { animation-delay: .456s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+73) { animation-delay: .464s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+74) { animation-delay: .472s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+75) { animation-delay: .48s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+76) { animation-delay: .488s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+77) { animation-delay: .496s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+78) { animation-delay: .504s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+79) { animation-delay: .512s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+80) { animation-delay: .52s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+81) { animation-delay: .528s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+82) { animation-delay: .536s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+83) { animation-delay: .544s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+84) { animation-delay: .552s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+85) { animation-delay: .56s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+86) { animation-delay: .568s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+87) { animation-delay: .576s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+88) { animation-delay: .584s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+89) { animation-delay: .592s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+90) { animation-delay: .6s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+91) { animation-delay: .608s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+92) { animation-delay: .616s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+93) { animation-delay: .624s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+94) { animation-delay: .632s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+95) { animation-delay: .64s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+96) { animation-delay: .648s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+97) { animation-delay: .656s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+98) { animation-delay: .664s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+99) { animation-delay: .672s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } } @media only screen and (min-width:1600px) { .c-productDetail__colorPicker.is-collapsed .c-productDetail__colorWrapper:nth-child(n+17) { display: none } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+17) { animation-delay: 0s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+18) { animation-delay: 8ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+19) { animation-delay: 16ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+20) { animation-delay: 24ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+21) { animation-delay: 32ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+22) { animation-delay: .04s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+23) { animation-delay: 48ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+24) { animation-delay: 56ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+25) { animation-delay: 64ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+26) { animation-delay: 72ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+27) { animation-delay: .08s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+28) { animation-delay: 88ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+29) { animation-delay: 96ms; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+30) { animation-delay: .104s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+31) { animation-delay: .112s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+32) { animation-delay: .12s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+33) { animation-delay: .128s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+34) { animation-delay: .136s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+35) { animation-delay: .144s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+36) { animation-delay: .152s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+37) { animation-delay: .16s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+38) { animation-delay: .168s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+39) { animation-delay: .176s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+40) { animation-delay: .184s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+41) { animation-delay: .192s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+42) { animation-delay: .2s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+43) { animation-delay: .208s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+44) { animation-delay: .216s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+45) { animation-delay: .224s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+46) { animation-delay: .232s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+47) { animation-delay: .24s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+48) { animation-delay: .248s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+49) { animation-delay: .256s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+50) { animation-delay: .264s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+51) { animation-delay: .272s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+52) { animation-delay: .28s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+53) { animation-delay: .288s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+54) { animation-delay: .296s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+55) { animation-delay: .304s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+56) { animation-delay: .312s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+57) { animation-delay: .32s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+58) { animation-delay: .328s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+59) { animation-delay: .336s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+60) { animation-delay: .344s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+61) { animation-delay: .352s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+62) { animation-delay: .36s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+63) { animation-delay: .368s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+64) { animation-delay: .376s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+65) { animation-delay: .384s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+66) { animation-delay: .392s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+67) { animation-delay: .4s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+68) { animation-delay: .408s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+69) { animation-delay: .416s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+70) { animation-delay: .424s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+71) { animation-delay: .432s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+72) { animation-delay: .44s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+73) { animation-delay: .448s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+74) { animation-delay: .456s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+75) { animation-delay: .464s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+76) { animation-delay: .472s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+77) { animation-delay: .48s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+78) { animation-delay: .488s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+79) { animation-delay: .496s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+80) { animation-delay: .504s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+81) { animation-delay: .512s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+82) { animation-delay: .52s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+83) { animation-delay: .528s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+84) { animation-delay: .536s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+85) { animation-delay: .544s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+86) { animation-delay: .552s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+87) { animation-delay: .56s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+88) { animation-delay: .568s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+89) { animation-delay: .576s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+90) { animation-delay: .584s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+91) { animation-delay: .592s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+92) { animation-delay: .6s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+93) { animation-delay: .608s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+94) { animation-delay: .616s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+95) { animation-delay: .624s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+96) { animation-delay: .632s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+97) { animation-delay: .64s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+98) { animation-delay: .648s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } .c-productDetail__colorPicker .c-productDetail__colorWrapper:nth-child(n+99) { animation-delay: .656s; animation-duration: 1.5s; animation-fill-mode: forwards; animation-name: scaleColorBlot; animation-timing-function: cubic-bezier(.075, .82, .165, 1); transform: scale(0) } } .c-productDetail__productAvailabilityBtn { margin-top: 20px; position: relative } @media(hover:hover) { .c-productDetail__amazonLink:hover { background-color: #3c3c3c } } .c-productDetail__productAvailability { align-items: center; display: flex } @media(max-width:1023px) { .c-productDetail__productAvailability { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { .c-productDetail__productAvailability { font-size: 20px; line-height: 25px } } .c-productDetail__productAvailability:before { background-image: url(../assets/common/vectors/icon_retail-store.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 24px; margin-right: 10px; width: 24px } @media(max-width:1023px) { .c-productDetail__productAvailability:before { height: 20px; width: 20px } } .c-productDetail__productAvailability.-animate:before { animation-duration: .6s; animation-name: scaleRotateAnim; animation-timing-function: linear } .c-productDetail__packItems { margin-top: 60px } @media(max-width:1023px) { .c-productDetail__packItems { margin-top: 50px } } .c-productDetail__packItems+.c-productDetail__productFeatures { margin-top: 60px } @media(max-width:1023px) { .c-productDetail__packItems+.c-productDetail__productFeatures { margin-top: 50px } } .c-productDetail__packItems.numItems-1 .c-productDetail__packItem { width: unset !important } .c-productDetail__productPrice+.c-productDetail__packItems { margin-top: 30px } .c-productDetail__packItemsHeading { align-items: center; display: flex; font-family: NeueMontreal-Medium; padding-bottom: 10px } .c-productDetail__packItemsHeading:before { background-image: url(../assets/common/vectors/icon_assorted-pack.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 16px; margin-right: 10px; width: 16px } .c-productDetail__packItemsHeading.-animate:before { animation-duration: .6s; animation-name: packScaleAnim; animation-timing-function: linear } @keyframes packScaleAnim { 0% { transform: scale(1) } 50% { transform: scale(1.2) } to { transform: scale(1) } } .c-productDetail__packItemsRow { column-gap: 32px; display: flex; flex-wrap: wrap; padding: 20px 0; position: relative; row-gap: 20px } .c-productDetail__packItemsRow:last-of-type>:last-child:before { display: none } @media(max-width:1023px) { .c-productDetail__packItemsRow { column-gap: 30px } } .c-productDetail__packItem { padding-right: 32px; position: relative; width: 167px } @media(max-width:767px) { .c-productDetail__packItem { width: calc(50% - 15px) } } @media(min-width:768px)and (max-width:1023px) { .c-productDetail__packItem { width: calc(33.33333% - 20px) } } .c-productDetail__packItem:before { content: "+"; padding-left: 10px; padding-right: 0; position: absolute; right: 0; top: -2px } @media(max-width:1023px) { .c-productDetail__packItem:before { padding-right: 10px } } .c-productDetail__packItem.-lastPackItem:before { display: none } @media(max-width:1023px)and (min-width:768px) { .c-productDetail__packItemName { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-productDetail__packItemDescriptor { color: #888; margin-top: 8px } @media(max-width:1023px)and (min-width:768px) { .c-productDetail__packItemDescriptor { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-productDetail__productFeaturesHeading { align-items: center; display: flex; font-family: NeueMontreal-Medium; padding-bottom: 10px } .c-productDetail__productFeaturesHeading:before { background-image: url(../assets/common/vectors/icon_star.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 16px; margin-right: 10px; position: relative; top: -1px; width: 16px } .c-productDetail__productFeaturesHeading.-animate:before { animation-duration: .6s; animation-name: rotateAnim; animation-timing-function: linear; transform-origin: center } table.c-productDetail__productFeatures { width: 100% } @media(max-width:1023px) { .c-productDetail__productFeatures.-equalColumnsOnMobile .c-productDetail__productFeatureDescCol, .c-productDetail__productFeatures.-equalColumnsOnMobile .c-productDetail__productFeatureTitleCol { width: calc(50% - var(--gridMargin)/2) } .c-productDetail__productFeatures.-withIndex .c-productDetail__productFeatureTitleCol { width: 50px } .c-productDetail__productFeatures.-withIndex .c-productDetail__productFeatureDescCol { width: calc(100% - 70px) } } .c-productDetail__productFeature { display: flex; position: relative } .c-productDetail__productFeatureDescCol, .c-productDetail__productFeatureTitleCol { padding: 20px 0 } @media(max-width:1023px) { .c-productDetail__productFeatureDescCol, .c-productDetail__productFeatureTitleCol { padding: 15px 0 } } @media(max-width:1023px)and (min-width:768px) { .c-productDetail__productFeatureDesc, .c-productDetail__productFeatureTitle { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(max-width:1023px) { .c-productDetail__productFeatureTitleCol { min-width: 20px } } @media(min-width:1024px) { .c-productDetail__productFeatureTitleCol { width: calc(100% - var(--gridCol3) - var(--gridMargin)) } } .c-productDetail__productFeatureDescCol { margin-left: var(--gridMargin) } @media(min-width:1024px) { .c-productDetail__productFeatureDescCol { width: calc(var(--gridCol3)) } } .c-productDetail__colorPicker+.c-productDetail__dropdown { top: -1px } .c-productDetail__dropdown { display: flex; margin-bottom: 1px; min-height: 54px; position: relative } @media(max-width:1023px) { .c-productDetail__dropdown { min-height: 45px } } .c-productDetail__dropdown.-dropdownDisabled .c-productDetail__dropdownOptionSelected { padding-left: 0; padding-right: 0 } .c-productDetail__dropdown.-dropdownDisabled .c-productDetail__dropdownRhs { pointer-events: none } .c-productDetail__dropdown.-dropdownDisabled .c-productDetail__dropdownRhs:after { background-image: none } .c-productDetail__dropdownLabel { flex: 1; padding-top: 20px } @media(max-width:1023px)and (min-width:768px) { .c-productDetail__dropdownLabel { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-productDetail__dropdownInput { height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; width: 100% } .c-productDetail__dropdownRhs { cursor: pointer; height: 100%; position: relative } .c-productDetail__dropdownRhs:after { background-image: url(../assets/common/vectors/icon_dropdown-arrow.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 6px; position: absolute; right: 10px; top: calc(50% - 3px); width: 10px } .c-productDetail__dropdownOptionSelected { align-items: center; border-bottom: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; display: flex; height: 100%; padding-left: 20px; padding-right: 30px } @media(max-width:1023px) { .c-productDetail__dropdownOptionSelected { padding-left: 10px } } .c-productDetail__dropdownOptions { background-color: #fff; border-left: 1px solid #000; border-right: 1px solid #000; box-sizing: border-box; height: 0; overflow: hidden; position: absolute; right: 0; top: 100%; width: 100% } .c-productDetail__dropdownOptions:after { background-color: #000; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 100% } .c-productDetail__dropdown.is-opened .c-productDetail__dropdownOptionSelected { background-color: #f3f3f3; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000 } .c-productDetail__dropdown.is-opened .c-productDetail__dropdownRhs:after { transform: rotate(180deg) } .c-productDetail__dropdownOption { padding-left: 20px; padding-top: 20px } @media(max-width:1023px) { .c-productDetail__dropdownOption { padding-left: 10px; padding-right: 0 } } @media(max-width:1023px)and (min-width:768px) { .c-productDetail__dropdownOption { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-productDetail__dropdownOption:last-of-type { padding-bottom: 20px } .c-productDetail__dropdown.is-opened .c-productDetail__dropdownOptions { border-bottom: 1px solid #000 } .c-productDetail__dropdown .c-productDetail__dropdownRhs { min-width: max-content } .c-productDetail__dropdown .c-productDetail__dropdownOption { background-color: #fff; justify-content: flex-end; min-width: max-content; padding: 20px 0 0 10px; position: relative; text-align: right } .c-productDetail__dropdown .c-productDetail__dropdownOption:first-child { padding-top: 0 } .c-productDetail__dropdown .c-productDetail__dropdownOptionSelected { justify-content: flex-end; padding-right: 36px } @media(max-width:1023px)and (min-width:768px) { .c-productDetail__dropdown .c-productDetail__dropdownOptionSelected { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-productDetail__dropdown .c-productDetail__dropdownOptions { min-width: max-content } .c-productDetail__dropdown .c-productDetail__dropdownOptions:after { content: none } .c-productDetail__dropdown .c-productDetail__dropdownOptionsContainer { margin: 20px 10px; max-height: 155px; overflow-y: auto; padding-right: 26px } @media(min-width:768px)and (max-width:1023px) { .c-productDetail__dropdown .c-productDetail__dropdownOptionsContainer { max-height: 180px } } html.is-touch-device .c-productDetail__dropdownOptionsContainer { --scrollbarTy: 0; --scrollbarHeight: 30px; -ms-overflow-style: none; scrollbar-width: none } html.is-touch-device .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar { display: none } html.is-touch-device .c-productDetail__dropdownOptionsContainer:after { background: #e6e8eb; border-radius: 10px; content: ""; display: none; height: var(--scrollbarHeight); position: absolute; right: 10px; top: 20px; transform: translateY(var(--scrollbarTy)); width: 6px; will-change: transform } html.is-touch-device .c-productDetail__dropdownOptionsContainer.isScrollable:after { display: block } html:not(.is-touch-device) .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar { width: 6px } html:not(.is-touch-device) .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar-track { background: #fff } html:not(.is-touch-device) .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar-thumb { background: #e6e8eb; border-radius: 10px } html:not(.is-touch-device) .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar-thumb:hover { background: #c4c4c4 } .c-productDetail__checkboxLabel { align-items: center; cursor: pointer; display: flex } .c-productDetail__checkboxInput { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } .c-productDetail__checkboxTick { border: 1px solid #888; height: 15px; width: 15px } .c-productDetail__checkboxText { color: #888; margin-left: 10px } .c-productDetail.-assorted .c-productDetail__dropdown { margin-top: 30px } .c-productDetail.-assorted .c-productDetail__dropdown+.c-productDetail__dropdown { margin-top: -1px } .c-productDetail.-assorted .c-productDetail__amazonLink, .c-productDetail.-assorted .c-productDetail__shippingInfo { margin-top: 30px } .c-productDetail.-assorted .c-productDetail__firstIntroducedIn { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-assorted .c-productDetail__firstIntroducedIn { margin-top: 52px } } .c-productDetail.-assorted .c-productDetail__aboutProduct { margin-top: 10px } .c-productDetail.-assorted .c-productDetail__aboutProduct.-withoutHead { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-assorted .c-productDetail__aboutProduct.-withoutHead { margin-top: 52px } } .c-productDetail.-assorted .c-productDetail__colorPicker { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-assorted .c-productDetail__colorPicker { margin-top: 56px } } .c-productDetail.-assorted .c-productDetail__productFeatures { margin-top: 60px } .c-productDetail.-assorted .c-productDetail__productFeatures.-equalColumnsOnMobile { margin-top: 0 } @media(max-width:1023px) { .c-productDetail.-assorted .c-productDetail__productFeatures { margin-top: 50px } } .c-productDetail.-assorted .c-productDetail__productFeatures+.c-productDetail__productFeatures { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-assorted .c-productDetail__productFeatures+.c-productDetail__productFeatures { margin-top: 50px } } .c-productDetail.-assorted .c-productDetail__productCode { margin-top: 30px } .c-productDetail__productAvailability { margin-top: 40px } @media(max-width:1023px) { .c-productDetail__productAvailability { margin-top: 30px } } .c-productDetail.-individual .c-productDetail__dropdown { margin-top: 30px } .c-productDetail.-individual .c-productDetail__dropdown+.c-productDetail__dropdown { margin-top: -1px } .c-productDetail.-individual .c-productDetail__colorPicker { margin-top: 40px } .c-productDetail.-individual .c-productDetail__colorPicker+.c-productDetail__dropdown { margin-top: 0 } @media(max-width:1023px) { .c-productDetail.-individual .c-productDetail__colorPicker { margin-top: 30px } } .c-productDetail.-individual .c-productDetail__firstIntroducedIn { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-individual .c-productDetail__firstIntroducedIn { margin-top: 40px } } .c-productDetail.-individual .c-productDetail__aboutProduct { margin-top: 10px } .c-productDetail.-individual .c-productDetail__productFeatures { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-individual .c-productDetail__productFeatures { margin-top: 50px } } .c-productDetail.-individual .c-productDetail__productFeatures+.c-productDetail__productFeatures { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-individual .c-productDetail__productFeatures+.c-productDetail__productFeatures { margin-top: 50px } } .c-productDetail.-individual .c-productDetail__productCode { margin-top: 20px } @media(max-width:1023px) { .c-productDetail.-individual .c-productDetail__productCode { margin-top: 30px } } .c-productDetail.-canvas .c-productDetail__amazonLink { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-canvas .c-productDetail__amazonLink { margin-top: 30px } } .c-productDetail.-canvas .c-productDetail__shippingInfo { margin-top: 30px } .c-productDetail.-canvas .c-productDetail__dropdown { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-canvas .c-productDetail__dropdown { margin-top: 30px } } .c-productDetail.-canvas .c-productDetail__dropdown+.c-productDetail__dropdown { margin-top: -1px } .c-productDetail.-canvas .c-productDetail__checkbox { margin-top: 20px } .c-productDetail.-canvas .c-productDetail__firstIntroducedIn { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-canvas .c-productDetail__firstIntroducedIn { margin-top: 50px } } .c-productDetail.-canvas .c-productDetail__aboutProduct { margin-top: 10px } .c-productDetail.-canvas .c-productDetail__productFeatures { margin-top: 60px } @media(max-width:1023px) { .c-productDetail.-canvas .c-productDetail__productFeatures { margin-top: 50px } } .c-productDetail.-canvas .c-productDetail__productCode { margin-top: 30px } @media(min-width:1024px) { .c-productDetail.-canvas .c-productDetail__productImages, .c-productDetail.-canvas .c-productDetail__productInfo { padding-bottom: 0 } .c-productDetail.-canvas .c-productDetail__productImages { bottom: var(--gridMargin) } } .-camlinPage .c-productDetail.-individual .c-productDetail__aboutProduct { margin-top: 60px } .-camlinPage .c-productDetail.-individual .c-productDetail__camlinRecommends { align-items: flex-start; display: flex; padding-bottom: 15px; padding-top: 15px; position: relative } .-camlinPage .c-productDetail.-individual .c-productDetail__camlinRecommends .anim-line { z-index: 0 } .-camlinPage .c-productDetail.-individual .c-productDetail__camlinRecommends:before { background-image: url(../assets/common/vectors/icon_star_filled.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 20px; margin-right: 10px; width: 16px } .-camlinPage .c-productDetail.-individual .c-productDetail__camlinRecommends .camlinRecommends__content .camlinRecommends__title { color: #000; font-family: NeueMontreal-Medium } .-camlinPage .c-productDetail.-individual .c-productDetail__camlinRecommends .camlinRecommends__content .camlinRecommends__desc { margin-top: 5px } .-camlinPage .c-productDetail.-canvas .c-productDetail__aboutProduct { margin-top: 60px } .-camlinPage .c-productDetail.-canvas .c-productDetail__amazonLink { margin-top: 30px } [data-page=productDetail] .c-productDetail>.anim-line.-bottom { display: none !important } [data-page=productDetail] .c-productDetail+.c-quote { margin-top: 30px } @media(min-width:768px) { [data-page=productDetail] .c-productDetail__amazonLink+a { margin-left: 20px } } [data-page=productDetail] .c-productDetail__amazonLink, [data-page=productDetail] .c-productDetail__shippingInfo { margin-top: 30px } [data-page=productDetail] .c-productDetail__productImageContainer { cursor: pointer } [data-page=productDetail] .c-productDetail__colorRange>.c-productDetail__packItemName.-kitListings { padding-left: 10px; padding-top: 20px } [data-page=productDetail] .c-productDetail__colorPickerHeading .-selectedColor { position: absolute; right: 0 } [data-page=productDetail] .c-productDetail__dropdown { margin-top: 30px } [data-page=productDetail] .c-productDetail__dropdown .c-productDetail__dropdownOptionSelected { align-items: flex-end; font-family: NeueMontreal-Medium; gap: 2px; justify-content: center; padding-bottom: 20px; padding-top: 20px } [data-page=productDetail] .c-productDetail__dropdown .c-productDetail__dropdownOptionSelected .extDetails { color: #727272; font-family: NeueMontreal-Regular } [data-page=productDetail] .c-productDetail__dropdown+.c-productDetail__dropdown { margin-top: -1px } [data-page=productDetail] .c-productDetail__dropdownOptionSelected { flex-direction: column; text-align: right } [data-page=productDetail] .c-productDetail__dropdownOption { display: flex; flex-direction: column; gap: 2px } [data-page=productDetail] .c-productDetail__dropdownOption .extDetails { color: #727272; font-family: NeueMontreal-Regular } [data-page=productDetail] .c-productDetail.-assorted .-camlinPackItemsRow #seeAll { display: inline-block; overflow: hidden; padding-bottom: 6px; position: relative } [data-page=productDetail] .c-productDetail.-assorted .-camlinPackItemsRow #seeAll:before { border-bottom: 1px solid #000; bottom: 0; content: ""; height: 1px; position: absolute; width: 100% } [data-page=productDetail] .c-productDetail.-assorted .-camlinPackItemsRow #seeAll:hover:before { animation-duration: .6s; animation-name: borderSlideBottom; animation-timing-function: linear } @keyframes borderSlideBottom { 0% { transform: translateX(0) } 50% { transform: translateX(101%) } 51% { transform: translateX(-101%) } to { transform: translateX(0) } } [data-page=productDetail] .c-productDetail.-assorted .-camlinPackItemsRow .itemHide { display: none } .c-productDetail__amazonLink+.c-productDetail__aboutProduct, .c-productDetail__productAvailabilityBtn+.c-productDetail__aboutProduct { margin-top: 60px !important } @media(max-width:1023px) { .c-productDetail__amazonLink+.c-productDetail__aboutProduct, .c-productDetail__productAvailabilityBtn+.c-productDetail__aboutProduct { margin-top: 50px !important } } .c-reviews { position: relative } .c-reviews:before { background-color: #fff; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 4px; z-index: 3 } @media(max-width:1023px) { .c-reviews:before { left: -20px; width: 23px } } .c-reviews:after { background-color: transparent; content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 4px; z-index: 3 } @media(max-width:1023px) { .c-reviews:after { right: -20px; width: 23px } } .c-reviews__reviewers { display: flex; overflow: hidden; position: relative; width: 100% } @media(max-width:1023px) { .c-reviews__reviewers { -ms-overflow-style: none; margin-left: 0; overflow-x: scroll; overflow-y: hidden; padding-left: 0; scroll-padding-left: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; width: calc(100% + 20px) } .c-reviews__reviewers::-webkit-scrollbar { display: none } .c-reviews__reviewers:after { content: ""; padding-left: 20px } } .c-reviews__reviewer { align-items: center; display: flex; flex-direction: column; flex-shrink: 0; padding: 60px 30px; position: relative; width: 33.3333333333%; will-change: transform } @media(max-width:767px) { .c-reviews__reviewer { padding: 20px; scroll-snap-align: start; width: 70.5882352941% } } @media(max-width:1023px)and (min-width:768px) { .c-reviews__reviewer { padding: 20px; scroll-snap-align: start; width: 40% } } .c-reviews__reviewerImage { background-color: hsla(0, 0%, 75%, .2); border-radius: 50%; height: 70px; width: 70px } .c-reviews__reviewerRatings { align-items: center; display: none; justify-content: center; margin-top: 30px } .c-reviews__reviewerRatings>:not(:first-child) { margin-left: 5px } .c-reviews__reviewerName, .c-reviews__reviewerOpinion { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 20px; text-align: center } .c-reviews__reviewerOpinion { max-width: 320px } @media(max-width:1023px) { .c-reviews__reviewerOpinion { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 15px } } .c-reviews__nav { pointer-events: none } @media(max-width:1023px) { .c-reviews__nav { display: none } } .c-reviews__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: calc(50% - 28px) } .c-reviews__navButton.is-disabled { opacity: 0; pointer-events: none } .c-reviews__navButtonArrow { height: 12px; width: auto } .c-reviews__navButton.-previous { left: -55px; transform: rotate(180deg) } .c-reviews__navButton.-next { right: -55px } .c-listingColorsGroup { -ms-overflow-style: none; display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 52px; overflow: auto; position: relative; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100% } .c-listingColorsGroup::-webkit-scrollbar { display: none } @media(max-width:1023px) { .c-listingColorsGroup { margin-top: 20px; width: calc(100% + 20px) } .c-listingColorsGroup:after { content: ""; display: block; padding-left: 20px } } .c-listingColorsGroup__item { border: 2px solid transparent; flex-shrink: 0; height: 50px; min-width: 50px; position: relative; scroll-snap-align: start; width: auto } .c-listingColorsGroup__item[data-active=true] { border-color: #000 } .c-listingColorsGroup__item[data-active=true]:after { bottom: 0; content: url(../assets/common/vectors/icon_color-tick.svg); height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px } .c-listingColorsGroup__item[data-active=true].-dark:after { content: url(../assets/common/vectors/icon_color-tick-white.svg) } .c-radioInputWrapper { align-items: flex-start; cursor: pointer; display: flex; flex-direction: row; margin-top: 20px; position: relative } .c-radioInputWrapper:nth-child(n+2) { margin-left: 20px } .c-radioInputWrapper .c-radioInput { background-color: transparent; height: 0; position: relative; transition: all .5s cubic-bezier(.455, .03, .515, .955); width: 0; z-index: 1 } .c-radioInputWrapper .c-radioInput:checked~.c-radioInputBackgroud__color:after { background-image: url(../assets/common/vectors/icon_color-tick-white.svg); background-position: 50%; background-repeat: no-repeat; bottom: 0; content: ""; cursor: pointer; left: 0; margin: auto; position: absolute; right: 0; text-align: center; top: 0; transition: all .5s cubic-bezier(.455, .03, .515, .955) } .c-radioInputWrapper .c-radioInput:checked+.c-radioInputBackgroud__color { background-color: #000; border-color: #000 } .c-radioInputWrapper[data-checkbox] .c-radioInputBackgroud__color { border-radius: 3px } .c-radioInputWrapper .c-radioInputBackgroud__color { background-color: transparent; border: 1px solid #888; border-radius: 50%; flex-shrink: 0; height: 19px; margin-top: 1px; position: relative; width: 19px; z-index: -1 } .c-radioInputWrapper .c-radioInputText { color: #000; font-size: 15px; font-weight: 400; line-height: 20px; margin-left: 10px } @media(max-width:767px) { .c-radioInputWrapper .c-radioInputText { max-width: 110px } } .c-radioInputWrapper[data-pills] .c-radioInput:checked~.pill:before { background-color: #000; transform: translateX(calc(100% - 2px)) } .c-radioInputWrapper[data-pills] .c-radioInput:checked~.pill { border-color: #000 } .c-radioInputWrapper[data-pills] .c-radioInput:checked:after { content: "" } .c-radioInputWrapper[data-pills] .pill { background-color: transparent; border: 1px solid #888; border-radius: 120px; cursor: pointer; height: 24px; position: relative; transition: .5s cubic-bezier(.455, .03, .515, .955); width: 40px } .c-radioInputWrapper[data-pills] .pill:before { background-color: #888; border-radius: 50%; bottom: 4px; content: ""; height: 16px; left: 4px; position: absolute; top: 3px; transition: .5s cubic-bezier(.455, .03, .515, .955); width: 16px } @media(max-width:1023px) { .c-radioInputWrapper:nth-child(n+2) { margin-left: 0 } } .c-tooltip { cursor: pointer; display: inline-block; left: 5px; position: relative; top: 2px; z-index: 22 } .c-tooltip__text { background-color: #f1f1f1; border-radius: 5px; color: #000; font-size: 11px; left: -5px; letter-spacing: .03em; line-height: 13px; opacity: 0; padding: 10px 18px 10px 10px; pointer-events: none; position: absolute; top: calc(100% + 12px); transition: opacity .3s; width: 170px; will-change: opacity; z-index: 23 } .c-tooltip__text:before { border: 5px solid transparent; border-bottom-color: #f1f1f1; bottom: 100%; content: ""; left: 7px; margin-left: 0; position: absolute } @media(max-width:1023px) { .c-tooltip__text { display: none } } .c-tooltip__svg, .c-tooltip__svg_filled { display: block; height: 14px; width: 14px; will-change: opacity } .c-tooltip__svg { opacity: 1 } .c-tooltip__svg_filled { left: 0; opacity: 0; position: absolute; top: 0 } .c-tooltip.is-opened .c-tooltip__text { opacity: 1 } .c-tooltip.is-opened .c-tooltip__svg { opacity: 0 } .c-tooltip.is-opened .c-tooltip__svg_filled { opacity: 1 } @media(max-width:1023px) { .c-tooltip.is-opened .c-tooltip__text { display: block; left: -150px } .c-tooltip.is-opened .c-tooltip__text:before { left: unset; right: 8px } } @media(hover:hover) { .c-tooltip:hover .c-tooltip__text { opacity: 1 } .c-tooltip:hover .c-tooltip__svg { opacity: 0 } .c-tooltip:hover .c-tooltip__svg_filled { opacity: 1 } } .c-filterSection { padding-bottom: 24px; padding-top: 4px; position: relative; width: 100% } .c-filterSection .c-filterSection__wrapper { display: flex; flex-direction: row; flex-wrap: wrap; position: relative } @media(max-width:1023px)and (min-width:768px) { .c-filterSection .c-filterSection__wrapper { display: grid; grid-template-columns: repeat(3, 1fr) } } @media(max-width:767px) { .c-filterSection .c-filterSection__wrapper { display: grid; grid-template-columns: repeat(2, 1fr) } } @media(hover:hover) { .c-invester.permit-hovers .c-invester__productImageContainer { background-color: #f3f3f3 } .c-invester.permit-hovers img.c-invester__productImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } .c-invester.permit-hovers img.c-invester__productImage:not(.-hoverImage) { opacity: 1 } .c-invester.permit-hovers .c-invester__product:hover img.c-invester__productImage:not(.-hoverImage), .c-invester.permit-hovers img.c-invester__productImage.-hoverImage { opacity: 0 } .c-invester.permit-hovers .c-invester__product:hover img.c-invester__productImage.-hoverImage { opacity: 1 } } .c-invester__inner { padding-bottom: 60px; position: relative; width: 100% } @media(max-width:1023px) { .c-invester__inner { padding-bottom: 50px } } @media(min-width:1024px) { .c-invester__inner { align-items: center; display: flex; flex-direction: column } } @media(max-width:1023px) { .c-invester__heading { font-size: 30px; line-height: 1 } } @media(min-width:1024px) { .c-invester__heading { font-size: 40px; line-height: 1; text-align: center } } .c-invester__container { padding-left: 30px } @media(max-width:1023px) { .c-invester__container { padding-left: 0 } } .c-invester__products { display: flex; margin-top: 32px; position: relative } @media(max-width:1023px) { .c-invester__products { flex-direction: column; margin-left: 0; margin-top: 25px; padding-left: 0; width: 100% } .c-invester__products:after { content: ""; padding-left: 20px } } @media(min-width:1024px) { .c-invester__products { justify-content: center } } .c-invester__product { display: flex; flex-direction: row; flex-shrink: 0; padding: 30px; position: relative; width: calc(var(--containerWidth)/2) } @media(max-width:1023px) { .c-invester__product { flex-direction: column; padding: 20px 20px 30px; width: 100% } } .c-invester__productImageContainer { padding-right: calc(52% - 15px); padding-top: calc(65% - 15px); position: relative } @media(max-width:1023px) { .c-invester__productImageContainer { padding-right: 100%; padding-top: 125% } } .c-invester__productImage { object-fit: cover; object-position: center } .c-invester__productImage.-hoverImage { opacity: 0 } .c-invester__productName { padding-right: 50px; padding-top: 10px } @media(max-width:1023px) { .c-invester__productName { padding-right: 15px } } .c-invester__productQuantity { padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-invester__productQuantity { padding-right: 15px } } .c-invester__productDesc { padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-invester__productDesc { padding-right: 15px } } .c-invester .c-invester__productLink { align-items: flex-end; margin-top: 10px } .c-invester .c-invester__productLink .c-button__arrowWrapper { margin-left: 0 } @media(max-width:1023px) { .c-invester .c-invester__productLink .c-button__arrowWrapper { margin-left: 7px } } @media(hover:hover) { .c-makeTheMost.permit-hovers .c-makeTheMost__productImageContainer { background-color: #f3f3f3 } .c-makeTheMost.permit-hovers img.c-makeTheMost__productImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } .c-makeTheMost.permit-hovers img.c-makeTheMost__productImage:not(.-hoverImage) { opacity: 1 } .c-makeTheMost.permit-hovers .c-makeTheMost__product:hover img.c-makeTheMost__productImage:not(.-hoverImage), .c-makeTheMost.permit-hovers img.c-makeTheMost__productImage.-hoverImage { opacity: 0 } .c-makeTheMost.permit-hovers .c-makeTheMost__product:hover img.c-makeTheMost__productImage.-hoverImage { opacity: 1 } } .c-makeTheMost__inner { padding-bottom: 60px; position: relative } @media(max-width:1023px) { .c-makeTheMost__inner { padding-bottom: 0 } } @media(min-width:1024px) { .c-makeTheMost__inner { align-items: center; display: flex; flex-direction: column } } @media(max-width:1023px) { .c-makeTheMost__heading { font-size: 40px; line-height: 1 } } @media(min-width:1024px) { .c-makeTheMost__heading { font-size: 40px; line-height: 1; text-align: center } } .c-makeTheMost__products { display: flex; margin-top: 32px; position: relative } @media(max-width:1023px) { .c-makeTheMost__products { -ms-overflow-style: none; margin-left: 0; margin-top: 25px; overflow-x: scroll; overflow-y: hidden; padding-left: 0; scroll-padding-left: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; width: calc(100% + 20px) } .c-makeTheMost__products::-webkit-scrollbar { display: none } .c-makeTheMost__products:after { content: ""; padding-left: 20px } } @media(min-width:1024px) { .c-makeTheMost__products { justify-content: center } } .c-makeTheMost__product { padding: 15px; position: relative; width: calc(var(--containerWidth)*25/100) } @media(max-width:767px) { .c-makeTheMost__product { flex-shrink: 0; padding: 10px 0; scroll-snap-align: start; width: 70.5882352941% } .c-makeTheMost__product:not(:last-child) { margin-right: 20px } } @media(max-width:1023px)and (min-width:768px) { .c-makeTheMost__product { flex-shrink: 0; padding: 10px 0; scroll-snap-align: start; width: 40% } .c-makeTheMost__product:not(:last-child) { margin-right: 20px } } .c-makeTheMost__productImageContainer { padding-top: 125% } .c-makeTheMost__productImage { object-fit: cover; object-position: center } .c-makeTheMost__productImage.-hoverImage { opacity: 0 } .c-makeTheMost .c-makeTheMost__content { margin-top: 20px; padding-bottom: 20px; padding-top: 10px; position: relative } .c-makeTheMost__productName { padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-makeTheMost__productName { padding-right: 15px } } .c-makeTheMost__productQuantity { padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-makeTheMost__productQuantity { padding-right: 15px } } .c-makeTheMost__productDesc { padding-right: 30px; padding-top: 10px } @media(max-width:1023px) { .c-makeTheMost__productDesc { padding-right: 15px } } .c-makeTheMost__productLink { margin-top: 10px } @media(min-width:1024px) { .c-fluidArtKits__heading { font-size: 50px; line-height: 1 } } @media(max-width:1023px) { .c-fluidArtKits__heading { font-size: 30px; line-height: 1 } } .c-fluidArtKits__list { display: flex; justify-content: flex-start; margin-top: 30px; padding-bottom: 50px; position: relative } @media(max-width:1023px) { .c-fluidArtKits__list { flex-direction: column; margin-top: 25px } } .c-fluidArtKit { display: flex; overflow: hidden; position: relative; width: var(--gridCol4) } @media(max-width:1023px) { .c-fluidArtKit:not(:first-child) { margin-top: 30px } } @media(min-width:1024px) { .c-fluidArtKit:not(:first-child) { margin-left: var(--gridMargin) } } @media(max-width:1023px) { .c-fluidArtKit { flex-direction: column; padding: 30px; width: 100% } } @media(min-width:1024px) { .c-fluidArtKit__lhs { flex: 1; padding: 20px } } .c-fluidArtKit__rhs { position: relative } @media(min-width:1024px) { .c-fluidArtKit__rhs { width: 100px } } .c-fluidArtKit__imageContainer { padding-top: 125%; position: relative } .c-fluidArtKit__name { margin-top: 20px } .c-fluidArtKit__price { margin-top: 10px } .c-fluidArtKit__contents { align-items: center; display: flex; text-align: center } @media(max-width:1023px) { .c-fluidArtKit__contents { margin-top: 10px } } @media(min-width:1024px) { .c-fluidArtKit__contents { flex-direction: column; padding: 20px } } @media(max-width:1023px) { .c-fluidArtKit__contents>:not(:first-child) { margin-left: 20px } } @media(min-width:1024px) { .c-fluidArtKit__contents>:not(:first-child) { margin-top: 33px } } .c-fluidArtKit__itemName { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 10px } .c-kit__inner { background-color: #f4f4f4; border: 1px solid #000; height: 70.3125vh; overflow: hidden; position: relative } @media(min-width:1024px) { .c-kit__inner { min-height: 640px } } @media(max-width:1023px) { .c-kit__inner { height: 515px; padding: 20px } } @keyframes animateCurve { 0% { stroke-dashoffset: 500 } to { stroke-dashoffset: 1 } } @media(min-width:1024px) { .c-kit__imageWrapper { bottom: 20px; display: flex; height: calc(100% - 40px); justify-content: center; left: 0; overflow: hidden; position: absolute; top: 20px; width: 100% } } @media(max-width:767px) { .c-kit__imageWrapper { bottom: 90px; display: flex; justify-content: center; left: 0; position: absolute; width: 100% } } @media(max-width:1023px) { .c-kit__imageWrapper { bottom: 90px; display: flex; display: block; justify-content: center; left: 0; margin-left: auto; margin-right: auto; max-width: 300px; position: absolute; right: 0; top: 80px; width: 100% } } .c-kit__image { height: 100%; position: relative; width: auto } @media(max-width:767px) { .c-kit__image { flex-shrink: 0; height: auto; width: 200px } } @media(max-width:1023px) { .c-kit__image { flex-shrink: 0; height: auto; width: 100% } } @media(min-width:1024px) { .c-kit__nameAndPriceWrapper { left: 30px; position: absolute; top: 30px } .c-kit__name { font-size: 50px; line-height: 1 } } @media(max-width:1023px) { .c-kit__name { font-size: 30px; line-height: 1 } } .c-kit__price { margin-top: 30px } @media(min-width:1024px) { .c-kit__price { font-size: 30px; line-height: 1 } } @media(max-width:1023px) { .c-kit__price { font-size: 20px; line-height: 25px; margin-top: 20px } } .c-kit__idealFor { align-items: center; display: flex } .c-kit__idealForIcon { height: 16px; width: 16px } .c-kit__idealForIcon.-animate path:nth-child(2) { animation-duration: .6s; animation-name: rotateTickCirle3; animation-timing-function: linear; transform-origin: center } @keyframes rotateTickCirle3 { 0% { transform: scale(1) rotate(0deg) } 50% { transform: scale(1.1) rotate(35deg) } to { transform: scale(1) rotate(70deg) } } .c-kit__idealForText { font-size: 15px; letter-spacing: .3px; line-height: 17px; margin-left: 5px } @media(min-width:1024px) { .c-kit__idealFor { bottom: 30px; left: 30px; position: absolute } } @media(max-width:1023px) { .c-kit__idealFor { margin-top: 20px; position: relative } } .c-kit__button { position: absolute } @media(min-width:1024px) { .c-kit__button { bottom: 30px; right: 30px } } @media(max-width:1023px) { .c-kit__button { bottom: 20px; left: 20px } } .c-kit__itemsInside { align-items: center; background-color: #fff; border: 1px solid #000; display: flex; flex-direction: column; justify-content: center; padding: 14px; position: absolute } @media(max-width:1023px) { .c-kit__itemsInside { bottom: -1px; padding: 20px 14px; right: -1px } } @media(min-width:1024px) { .c-kit__itemsInside { right: -1px; top: -1px } } .c-kit__itemsInsideCount { font-size: 50px; line-height: 1 } .c-kit.-varient2 { padding-bottom: 50px; position: relative } .c-kit.-varient2 .c-kit__inner { background-color: transparent; border: 0; column-gap: 62px; display: flex; flex-direction: row; height: auto; min-height: 480px } @media(max-width:1023px) { .c-kit.-varient2 .c-kit__inner { flex-direction: column; justify-content: flex-end; min-height: 617px; padding: 0 } } .c-kit.-varient2 .c-kit__imageWrapper { bottom: unset; display: block; height: auto; justify-content: unset; left: unset; margin-left: auto; position: relative; top: 0; width: calc(80% - 63px) } .c-kit.-varient2 .c-kit__imageWrapper .c-kit__image { width: 100% } @media(max-width:1023px) { .c-kit.-varient2 .c-kit__imageWrapper { flex-basis: 100%; max-width: 100%; top: unset; width: 100% } .c-kit.-varient2 .c-kit__imageWrapper .c-kit__image { min-height: 400px } } .c-kit.-varient2 .c-kit__name { font-size: 30px; line-height: 1 } @media(min-width:1024px) { .c-kit.-varient2 .c-kit__name { max-width: 190px } } .c-kit.-varient2 .c-kit__idealFor { bottom: unset; left: unset } @media(max-width:1023px) { .c-kit.-varient2 .c-kit__idealFor { margin-top: 0; position: absolute; top: 0 } } .c-kit.-varient2 .c-kit__nameAndPriceWrapper { left: unset; top: 44px } .c-kit.-varient2 .c-kit__nameAndPriceWrapper .c-kit__price { margin-top: 20px } @media(max-width:1023px) { .c-kit.-varient2 .c-kit__nameAndPriceWrapper { position: absolute; top: 32px; width: 100% } .c-kit.-varient2 .c-kit__nameAndPriceWrapper .c-kit__price { margin-top: 10px } } .c-kit.-varient2 .c-kit__button { bottom: unset; margin-top: 20px; position: relative; right: unset } @media(max-width:1023px) { .c-kit.-varient2 .c-kit__button { left: 0 } } .c-kit.-varient2 .c-kit__itemsInside { border: 0; border-bottom: 1px solid #000; border-top: 1px solid #000; bottom: 0; display: flex; flex-direction: row; padding: 10px 0; right: unset; top: unset } @media(max-width:1023px) { .c-kit.-varient2 .c-kit__itemsInside { background: transparent; bottom: unset; padding: 5px 0; position: absolute; right: 0; top: 135px } } .c-kit.-varient2 .c-kit__itemsInsideCount { font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-right: 4px } .c-camlinKit { display: block; padding: 30px 0; position: relative } .c-camlinKit .c-camlinKit__inner { display: flex; gap: 60px; min-height: 480px } @media(max-width:1023px) { .c-camlinKit .c-camlinKit__inner { flex-direction: column; gap: 30px } } .c-camlinKit .c-camlinKit__imageWrapper { padding-top: 41.0256410256%; position: relative; width: calc(80% - 60px) } .c-camlinKit .c-camlinKit__imageWrapper .c-kit__image { width: 100% } @media(max-width:1023px) { .c-camlinKit .c-camlinKit__imageWrapper { width: 100% } } @media(min-width:768px)and (max-width:1023px) { .c-camlinKit .c-camlinKit__imageWrapper { padding-top: 51.0067114094% } } @media(max-width:767px) { .c-camlinKit .c-camlinKit__imageWrapper { padding-top: 133vw } } .c-camlinKit .c-camlinKit__lhs { display: flex; flex: 1; flex-direction: column } .c-camlinKit .c-camlinKit__desc { margin-top: 20px } @media(max-width:1023px) { .c-camlinKit .c-camlinKit__desc { margin-top: 10px } } .c-camlinKit .c-camlinKit__name { font-size: 30px; line-height: 1 } .c-camlinKit .c-camlinKit__buttonItemsGroup { align-items: flex-start; display: flex; flex: 1; justify-content: space-between; margin-top: 20px } @media(max-width:1023px) { .c-camlinKit .c-camlinKit__buttonItemsGroup { align-items: flex-end } } @media(min-width:1024px) { .c-camlinKit .c-camlinKit__buttonItemsGroup { flex-direction: column } } .c-camlinKit .c-camlinKit__button { position: relative } .c-camlinKit .c-camlinKit__itemsInside { border-bottom: 1px solid #000; border-top: 1px solid #000; display: flex; flex-direction: row; padding: 10px 0 } @media(max-width:1023px) { .c-camlinKit .c-camlinKit__itemsInside { background: transparent; padding: 5px 0 } } .c-camlinKit .c-camlinKit__itemsInsideCount { font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-right: 4px } @keyframes fadePopupIn { 0% { opacity: 0; transform: translateY(100px) } to { opacity: 1; transform: translateY(0) } } [data-theme=dark] .c-getInspiration { color: #000 } .c-getInspiration { display: flex; z-index: 30 } .c-getInspiration.hide { display: none } @media(max-width:767px) { .c-getInspiration { align-items: flex-start } } .c-getInspiration__form { animation-delay: .1s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadePopupIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); background-color: #fff; max-width: 962px; opacity: 0; padding: 45px 60px; will-change: transform, opacity } @media only screen and (min-width:768px)and (max-width:1023px) { .c-getInspiration__form { padding-left: 20px; padding-right: 20px } } @media(max-width:767px) { .c-getInspiration__form { padding: 45px 50px 40px } } .c-getInspiration__heading { text-align: center } .c-getInspiration__subheading { margin-top: 10px; text-align: center } @media(max-width:767px) { .c-getInspiration__subheading { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px } } @media(min-width:768px) { .c-getInspiration__subheading { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-getInspiration__categoryList { display: flex; flex-flow: row wrap; justify-content: center; margin-top: 40px } @media(max-width:767px) { .c-getInspiration__categoryList { margin-top: 10px } .c-getInspiration__categoryList>:nth-child(2n) { margin-left: 20px } } @media(min-width:768px) { .c-getInspiration__categoryList>:not(:first-child) { margin-left: 20px } } .c-getInspiration__categoryItem { border: 1px solid #e3e3e3; border-radius: 5px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: 15px; width: 100px } .c-getInspiration__categoryItem.is-selected { border-color: #000 } .c-getInspiration__categoryItem.is-hover-disabled { border-color: #e3e3e3 !important } @media(max-width:767px) { .c-getInspiration__categoryItem { margin-top: 20px } } @media(min-width:768px) { .c-getInspiration__categoryItem { max-width: calc(16.66667% - 20px) } } @media(hover:hover) { .c-getInspiration__categoryItem:hover { border-color: #000 } } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+0) { animation-delay: .15s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+1) { animation-delay: .2s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+2) { animation-delay: .25s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+3) { animation-delay: .3s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+4) { animation-delay: .35s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+5) { animation-delay: .4s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+6) { animation-delay: .45s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+7) { animation-delay: .5s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+8) { animation-delay: .55s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-getInspiration .c-getInspiration__categoryItem:nth-child(n+9) { animation-delay: .6s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadeCategoryItemUp; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } @keyframes fadeCategoryItemUp { 0% { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } } .c-getInspiration__categoryImageContainer { margin-top: 15px } .c-getInspiration__categoryImageWrapper { height: 0; padding-top: 125%; position: relative } .c-getInspiration__categoryImage { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .c-getInspiration__buttonGroup { align-items: center; display: flex; justify-content: center; margin-top: 40px; width: 100% } .c-getInspiration__buttonGroup>:not(:first-child) { margin-left: 30px } @media(max-width:1023px) { .c-getInspiration__buttonGroup>:not(:first-child) { margin-left: 20px } } @media(hover:hover) { .c-getInspiration__cancelButton { transition: opacity .2s ease } .c-getInspiration__cancelButton:hover { opacity: .6 } } .c-getInspiration__submitButton { align-items: center; background-color: #000; border-radius: 5px; display: flex; height: 40px; justify-content: center; width: 100px } .c-getInspiration__submitButtonText { color: #fff; font-size: 13px; letter-spacing: .02em; line-height: 20px } @media(max-width:767px) { .c-getInspiration { height: var(--viewportHeight); padding-left: 0; padding-right: 0 } .c-getInspiration>* { transition: height .4s linear } .c-getInspiration .c-getInspiration__form { -ms-overflow-style: none; height: var(--viewportHeight); overflow: hidden; overflow-y: auto; padding-bottom: 0; scrollbar-width: none } .c-getInspiration .c-getInspiration__form::-webkit-scrollbar { display: none } .c-getInspiration .c-getInspiration__buttonGroup { background: #fff; border-top: 1px solid #000; bottom: 0; left: 0; padding: 15px 0; position: sticky; transform: translateX(-50px); width: 100%; width: calc(100% + 100px) } } .c-artworkPreviews { display: flex; flex-flow: row wrap; width: 100% } @media(max-width:1023px) { .c-artworkPreviews>:not(:first-child) { margin-top: 30px } } @media(min-width:1024px) { .c-artworkPreviews>:not(:nth-child(3n+1)) { margin-left: 74px } .c-artworkPreviews>:nth-child(n+4) { margin-top: 70px } } .c-artworkPreview { position: relative; width: calc(33.33333% - 49.33333px) } @media(max-width:1023px) { .c-artworkPreview { width: 100% } } .c-artworkPreview.is-starred .featureTag { background-image: url(../assets/common/vectors/icon_starred.svg); background-position: 0 0; background-repeat: no-repeat; background-size: contain; cursor: pointer; height: 38px; position: absolute; right: 10px; top: -1px; width: 26px; z-index: 2 } @media(max-width:1023px) { .c-artworkPreview.is-starred .featureTag { transition: all .6s cubic-bezier(.77, 0, .175, 1) } } .c-artworkPreview.is-starred .featureTag.-hide { opacity: 0 } .c-artworkPreview.is-starred .featureTagContent { background-color: #fff; cursor: pointer; display: inline-flex; opacity: 0; padding: 10px; position: absolute; right: 10px; top: 0; visibility: hidden; z-index: 3 } @media(max-width:1023px) { .c-artworkPreview.is-starred .featureTagContent { flex-direction: column; max-width: 80px; transition: all .6s cubic-bezier(.77, 0, .175, 1) } } .c-artworkPreview.is-starred .featureTagContent.-visible { opacity: 1; top: 10px; visibility: visible } .c-artworkPreview.is-starred .featureTagContent__tag { height: 22px; position: relative; top: -11px; width: 15px } .c-artworkPreview.is-starred .featureTagContent__container { display: inline-flex; flex-direction: column; margin-left: 10px } @media(max-width:1023px) { .c-artworkPreview.is-starred .featureTagContent__container { margin-left: 0 } } .c-artworkPreview.is-starred .featureTagContent__title { font-size: 13px; letter-spacing: .03em; line-height: 15px } @media(max-width:1023px) { .c-artworkPreview.is-starred .featureTagContent__title { font-size: 11px; line-height: 13px } } .c-artworkPreview.is-starred .featureTagContent__date { color: #888; font-size: 11px; line-height: 15px; margin-top: 5px } @media(max-width:1023px) { .c-artworkPreview.is-starred .featureTagContent__date { font-size: 9px; letter-spacing: .6px; line-height: 10px } } .c-artworkPreview:hover .c-artworkPreview__artworkImage { transform: scale(1.025) } .c-artworkPreview__artworkImage { transition: all .24s linear !important } .c-artworkPreview__link { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .c-artworkPreview__artworkContainer { padding-top: 80%; position: relative } .c-artworkPreview__artworkContainer .anim-imageWrapper { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .c-artworkPreview__artworkContainer .c-artworkPreview__artworkImage { top: 1px } .c-artworkPreview.animateImagesIn .c-artworkPreview__dropdown, .c-artworkPreview.animateImagesIn .c-artworkPreview__status { opacity: 1; transform: translateY(0) } .c-artworkPreview__dropdown { cursor: pointer; opacity: 0; position: absolute; right: 10px; top: 10px; transform: translateY(50px); transition: opacity .4s ease-in-out .8s; z-index: 2 } .c-artworkPreview__dropdownOptions { background-color: #fff; height: 0; overflow: hidden; position: absolute; right: 0; top: calc(100% + 10px); width: 120px } .c-artworkPreview__dropdownOptions>:not(:first-child) { border-top: 1px solid #c4c4c4 } .c-artworkPreview__dropdownOption { display: block; padding: 15px; text-align: left; width: 100% } @media(hover:hover) { .c-artworkPreview__dropdownOption:hover { background-color: #f3f3f3 } } .c-artworkPreview__status { background-color: #fff; color: #888; color: #000; font-size: 13px; left: 10px; letter-spacing: .05em; line-height: 15px; line-height: 20px; opacity: 0; padding: 5px 10px; position: absolute; top: 10px; transform: translateY(50px); transition: opacity .4s ease-in-out .8s; z-index: 2 } html[data-theme=dark] .c-artworkPreview__dropdownOption { color: #000 } .c-artworkPreview__footer { align-items: flex-start; display: flex; justify-content: space-between; margin-top: 11px } .c-artworkPreview__footerLhs { position: relative } .c-artworkPreview__profilePicture { border-radius: 50%; height: 40px; left: 0; position: absolute; top: calc(50% - 20px); width: 40px } .c-artworkPreview__profilePicture~.c-artworkPreview__subtitle, .c-artworkPreview__profilePicture~.c-artworkPreview__title { padding-left: 50px } .c-artworkPreview__subtitle { color: #888; margin-top: 5px } .c-artworkPreview__comments { align-items: center; cursor: pointer; display: flex; position: relative; z-index: 2 } @media(hover:hover) { .c-artworkPreview__comments { transition: opacity .2s ease } .c-artworkPreview__comments:hover { opacity: .6 } .c-artworkPreview__comments:hover .c-artworkPreview__commentsIcon { animation-duration: .6s; animation-name: scaleAnim; animation-timing-function: linear; transform-origin: bottom right } } .c-artworkPreview__commentsIcon { height: 18px; position: relative; top: 2px; width: 18px } .c-artworkPreview__commentsCount { color: #000; display: flex; flex-direction: column; justify-content: stretch; margin-left: 5px } .c-artworkPreview__commentsCount:after { background-color: currentColor; content: ""; height: 1px; margin-top: 2px; width: 100% } html[data-theme=dark] .c-artworkPreview__commentsCount { color: #fff } .c-artworkPreview__followButton { color: #888; position: relative } .c-artworkPreview__followButton:after { background-color: #888; content: ""; height: 1px; left: 0; position: absolute; top: calc(100% - 2px); width: 100% } .c-artworkPreview__footerLhs__link { display: inline-block; position: relative; transition: opacity .2s ease; z-index: 2 } @media(hover:hover) { .c-artworkPreview__footerLhs__link:hover { opacity: .5 } } .c-artistPreviews { display: flex; flex-flow: row wrap; width: 100% } @media(max-width:1023px) { .c-artistPreviews>:not(:first-child) { margin-top: 30px } } @media(min-width:1024px) { .c-artistPreviews>:not(:nth-child(3n+1)) { margin-left: 74px } .c-artistPreviews>:nth-child(n+4) { margin-top: 70px } } .c-artistPreview { position: relative; width: calc(33.33333% - 49.33333px) } @media(max-width:1023px) { .c-artistPreview { width: 100% } } .c-artistPreview:hover .c-artistPreview__artworkImage { transform: scale(1.025) } .c-artistPreview__artworkImage { transition: all .24s linear !important } .c-artistPreview__artworkContainer { padding-top: 80%; position: relative } .c-artistPreview__artworkContainer .anim-imageWrapper { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .c-artistPreview__footer { align-items: flex-start; display: flex; justify-content: space-between; margin-top: 10px } .c-artistPreview__footerLhs { min-height: 40px; padding-left: 50px; position: relative } @media(hover:hover) { .c-artistPreview__footerLhs:hover { opacity: .5 } } .c-artistPreview__profilePicture { border-radius: 50%; height: 40px; left: 0; position: absolute; top: calc(50% - 20px); width: 40px } .c-artistPreview__subtitle { color: #888; margin-top: 5px } .c-artistPreview.is-following .c-artistPreview__followButton:before { content: "Following" } .c-artistPreview.is-following .c-artistPreview__followButton:hover:before { content: "Unfollow" } .c-artistPreview__followButton { cursor: pointer; opacity: .44; position: relative; transition: opacity .2s ease } @media(hover:hover) { .c-artistPreview__followButton:hover { opacity: 1 } } .c-artistPreview__followButton:before { color: currentColor; content: "Follow" } .c-artistPreview__followButton:after { background-color: #888; content: ""; height: 1px; left: 0; position: absolute; top: calc(100% + 2px); width: 100% } .c-commentSection { padding-bottom: 60px; position: relative } .c-commentSection__title { font-size: 20px; line-height: 25px; margin-bottom: 30px; position: relative } .c-commentSection__inputContain { align-items: flex-start; display: flex; flex-wrap: wrap; position: relative } .c-commentSection__left { position: relative; width: 70px } .c-commentSection__right { margin-left: 20px; position: relative; width: calc(100% - 90px) } .c-commentSection__comments { margin-top: 5px; position: relative; transition: margin-top .3s ease-in-out; width: 100% } .c-commentSection__comments.active { margin-top: 20px } .c-commentSection__userIcon { border-radius: 50%; height: 70px; width: 70px } .c-commentSection__label { display: block; margin-top: 15px; position: relative; width: 100% } .c-commentSection__input { border-bottom: 1px solid #e6e8eb; display: block; font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-bottom: 20px; width: 100% } .c-commentSection__input::placeholder { color: #888 } .c-commentSection__input-spanLine { background-color: #000; bottom: 0; height: 1px; left: 0; position: absolute; transition: width .3s ease-in-out; width: 0 } .c-commentSection__input:focus+.c-commentSection__input-spanLine { width: 100% } .c-commentSection__buttons { display: flex; justify-content: flex-end; margin-top: 15px; opacity: 0; transition: opacity .3s ease-in-out, visibility .3s ease-in-out; visibility: hidden } .c-commentSection__buttons.active { opacity: 1; visibility: visible } .c-commentSection__cancelBtn { color: #888 } .c-commentSection__cancelBtn, .c-commentSection__commentBtn { font-size: 15px; letter-spacing: .02em; line-height: 20px; line-height: 18px } .c-commentSection__commentBtn { color: #000; margin-left: 20px } .c-commentSection__commentBtn:after { background-color: #000; bottom: -5px; content: ""; display: block; height: 1px; position: relative; width: 100% } .c-commentSection__comment { align-items: flex-start; display: flex; padding-left: 13.5px; padding-right: 13.5px } .c-commentSection__comment:nth-child(n+2) { margin-top: 30px } .c-commentSection__commentuserIcon { border-radius: 50%; height: 50px; width: 50px } .c-commentSection__commentRight { display: flex; flex-direction: column; margin-left: 20px } .c-commentSection__commentName { color: #000; font-family: NeueMontreal-Regular; font-size: 15px; font-weight: 400; letter-spacing: .02em; line-height: 20px } .c-commentSection__commentText { color: #888; font-family: NeueMontreal-Regular; font-size: 13px; font-weight: 400; letter-spacing: .05em; line-height: 15px; margin-top: 5px } .c-commentSection__loadMore { color: #000; font-size: 15px; letter-spacing: .02em; line-height: 20px; line-height: 18px; margin-left: 13.5px; margin-top: 30px } .c-commentSection__loadMore:after { background-color: #000; bottom: -5px; content: ""; display: block; height: 1px; position: relative; width: 100% } .c-commentSection__message { align-items: center; display: flex; position: absolute; top: 70px } .c-commentSection__message[data-validation-state=success] .-success, .c-commentSection__message[data-validation-state=success] .-successIcon { display: block } .c-commentSection__message[data-validation-state=empty] .-success, .c-commentSection__message[data-validation-state=empty] .-successIcon, .c-commentSection__message[data-validation-state=success] .-empty, .c-commentSection__message[data-validation-state=success] .-error, .c-commentSection__message[data-validation-state=success] .-errorIcon { display: none } .c-commentSection__message[data-validation-state=empty] .-empty, .c-commentSection__message[data-validation-state=empty] .-errorIcon { display: block } .c-commentSection__message[data-validation-state=empty] .-error, .c-commentSection__message[data-validation-state=error] .-empty, .c-commentSection__message[data-validation-state=error] .-success, .c-commentSection__message[data-validation-state=error] .-successIcon { display: none } .c-commentSection__message[data-validation-state=error] .-error, .c-commentSection__message[data-validation-state=error] .-errorIcon { display: block } .c-commentSection__messageIcon { display: none } .c-commentSection__messageText { color: #888; color: #000; display: none; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-left: 5px } @media(max-width:1023px) { .c-commentSection { padding-bottom: 50px } .c-commentSection__title { margin-bottom: 20px } .c-commentSection__left { width: 40px } .c-commentSection__left .c-commentSection__userIcon { height: 40px; width: 40px } .c-commentSection__right .c-commentSection__label { margin-top: 0 } .c-commentSection__right .c-commentSection__input { font-size: 15px; line-height: 20px; padding-bottom: 10px } .c-commentSection__comments.active { margin-top: 30px } .c-commentSection__comment { padding-left: 0; padding-right: 0 } .c-commentSection__comment .c-commentSection__commentuserIcon { height: 40px; width: 40px } .c-commentSection__loadMore { margin-left: 0 } } .c-artistIntro { align-items: center; display: flex; flex-direction: column; padding-bottom: 40px; padding-top: 10px } @media(max-width:1023px) { .c-artistIntro { padding-bottom: 50px; padding-top: 0 } } .c-artistIntro__profilePicture { border-radius: 50%; height: 120px; width: 120px } .c-artistIntro__name { margin-top: 15px; text-align: center } .c-artistIntro__artistType { color: #888; margin-top: 5px; text-align: center } .c-artistIntro__instagram { color: #888; margin-top: 14px; max-width: 427px; text-align: center } .c-artistIntro__about { color: #888; margin-top: 10px; max-width: 427px; text-align: center } .c-artistIntro__phoneEmailWrapper { align-items: center; color: #888; display: flex; margin-top: 10px } @media(hover:hover) { .c-artistIntro__email, .c-artistIntro__phone { transition: color .2 ease } .c-artistIntro__email:hover, .c-artistIntro__phone:hover { color: var(--themeFontColor) } } .c-artistIntro__email { align-items: center; display: flex } .c-artistIntro__email:before { background-color: var(--themeFontColor); border-radius: 50%; content: ""; height: 4px; margin-left: 10px; margin-right: 10px; margin-top: 2px; width: 4px } .c-artistIntro__followButton { cursor: pointer; margin-top: 10px } .c-artistIntro__followButton .c-submitButton__text { position: relative } .c-artistIntro__followButton .c-submitButton__text:before { content: "Follow" } .c-artistIntro__followButton.is-following { background-color: #888 } .c-artistIntro__followButton.is-following .c-submitButton__text:before { content: "Following" } @media(hover:hover) { .c-artistIntro__followButton.is-following:hover .c-submitButton__text:before { content: "Unfollow" } .c-productsUsed img.c-productsUsed__itemImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } .c-productsUsed img.c-productsUsed__itemImage:not(.-hoverImage) { opacity: 1 } .c-productsUsed .c-productsUsed__item:hover img.c-productsUsed__itemImage:not(.-hoverImage), .c-productsUsed img.c-productsUsed__itemImage.-hoverImage { opacity: 0 } .c-productsUsed .c-productsUsed__item:hover img.c-productsUsed__itemImage.-hoverImage { opacity: 1 } } .c-productsUsed__inner { padding-top: 40px; position: relative } @media(max-width:1023px) { .c-productsUsed__inner { padding-top: 50px } } .c-productsUsed__list { display: flex; margin-top: 20px } @media(max-width:1023px) { .c-productsUsed__list { -ms-overflow-style: none; margin-left: 0; overflow-x: scroll; overflow-y: hidden; padding-left: 0; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw; width: calc(100% + 20px) } .c-productsUsed__list::-webkit-scrollbar { display: none } .c-productsUsed__list:after { content: ""; padding-left: 20px } .c-productsUsed__list>:not(:first-child) { margin-left: var(--gridMargin) } } @media(min-width:1024px) { .c-productsUsed__list { flex-flow: row wrap } .c-productsUsed__list>:not(:nth-child(3n+1)) { margin-left: var(--gridMargin) } .c-productsUsed__list>:nth-child(n+4) { margin-top: var(--gridMargin) } } .c-productsUsed__item { flex-shrink: 0; position: relative; width: var(--responsiveGridCol4) } @media(max-width:1023px) { .c-productsUsed__item { flex-shrink: 0; scroll-snap-align: start; width: 58.8235294118% } } .c-productsUsed__itemImageContainer { padding-top: 125% } .c-productsUsed__itemImage { object-fit: cover; object-position: center } .c-productsUsed__itemImage.-hoverImage { opacity: 0 } .c-productsUsed__itemTitle { padding-top: 10px } @media(max-width:1023px) { .c-productsUsed__itemTitle { padding-top: 20px } } .c-productsUsed__itemDesc { color: #888; padding-top: 15px } @media(max-width:1023px) { .c-productsUsed__itemDesc { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; padding-top: 10px } } @media(min-width:1024px) { .c-productsUsed__itemDesc { font-size: 13px; letter-spacing: .03em; line-height: 15px } } .c-productsUsed__itemLink { margin-top: 15px } @media(max-width:1023px) { .c-productsUsed__itemLink { margin-top: 20px } } html[data-theme=dark] .c-searchPopup { background-color: #292a2e } html[data-theme=dark] .c-searchPopup svg path { fill: #fff } html[data-theme=dark] .c-searchPopup__resultsWrapper { background-color: #292a2e } html[data-theme=dark] .c-searchPopup__inputWrapper { background-color: #38393e } html[data-theme=dark] .c-searchPopup__inputWrapper, html[data-theme=dark] .c-searchPopup__resultsWrapper { border-color: rgba(95, 98, 107, .502) } html[data-theme=dark] .c-searchPopup__result:not(:first-child):after, html[data-theme=dark] .c-searchPopup__resultsWrapper:after { background-color: rgba(95, 98, 107, .502) } html[data-theme=dark] .c-searchPopup__searchTerm { color: #fff } html.showSearchPopup .c-searchPopup { display: block } @media(max-width:1023px) { html.showSearchPopup body>:not(.c-searchPopup) { display: none } } .c-searchPopup { display: none; opacity: 0; width: 360px } .c-searchPopup.forceShow { display: block !important } .c-searchPopup.no-searches-found .c-searchPopup__noResults, .c-searchPopup.searches-found .c-searchPopup__results { display: block } @media(min-width:1024px) { .c-searchPopup { position: fixed; right: var(--viewportSidePadding); top: 45px; z-index: 102 } } @media(max-width:1023px) { .c-searchPopup { background-color: #fff; height: 100vh; left: 0; overflow-y: scroll; padding: 0 20px; position: fixed; top: 0; width: 100%; z-index: 33 } } .c-searchPopup__inputWrapper { display: flex; height: 63px } @media(min-width:1024px) { .c-searchPopup__inputWrapper { background-color: #f9f9f9; border: 1px solid #000 } } @media(max-width:1023px) { .c-searchPopup__inputWrapper { background-color: #fff; height: 103px; left: 0; padding: 40px 20px 0; position: fixed; top: 0; width: 100vw; z-index: 1 } .c-searchPopup__inputWrapper:after, .c-searchPopup__inputWrapper:before { background-color: #000; content: ""; height: 1px; left: 20px; position: absolute; width: calc(100% - 40px) } .c-searchPopup__inputWrapper:before { top: 40px } .c-searchPopup__inputWrapper:after { bottom: 0 } } .c-searchPopup__input { flex: 1; height: 100%; padding: 0 20px } @media(max-width:1023px) { .c-searchPopup__input { font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-left: 0 } } @media(min-width:1024px) { .c-searchPopup__input { color: #888; font-size: 20px; line-height: 25px } .c-searchPopup__input::placeholder { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-searchPopup__closeButtonWrapper { align-items: center; display: flex; height: 100%; justify-content: center; padding: 0 17px } @media(max-width:1023px) { .c-searchPopup__closeButtonWrapper { border-left: 1px solid #000; padding: 0; width: 55px } } .c-searchPopup__closeButton { height: 16px; width: 16px } .c-searchPopup__resultsWrapper { background-color: #fff; padding: 0 20px } @media(min-width:1024px) { .c-searchPopup__resultsWrapper { border-left: 1px solid #000; border-right: 1px solid #000; display: flex; flex-direction: column; height: 0; overflow: hidden; position: relative } .c-searchPopup__resultsWrapper:after { background-color: #000; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 100% } } @media(max-width:1023px) { .c-searchPopup__resultsWrapper { padding: 113px 0 60px } } .c-searchPopup__noResults { animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); border-bottom: 1px solid #dfdfdf; color: #888; display: none; opacity: 0; padding: 20px 0 } .c-searchPopup__noResults .c-searchPopup__searchTerm { color: #000 } .c-searchPopup__results { display: none } @media(min-width:1024px) { .c-searchPopup__results { flex: 1; overflow-y: scroll; padding-right: 18px } .c-searchPopup__results::-webkit-scrollbar { width: 8px } .c-searchPopup__results::-webkit-scrollbar-thumb { background: #e6e8eb; border-radius: 10px } .c-searchPopup__results::-webkit-scrollbar-track { background: transparent; margin-bottom: 20px; margin-top: 20px } } @media(max-width:1023px) { .c-searchPopup__results>:not(:first-child):after { background-color: #000 } } .c-searchPopup__results>:nth-child(n+0) { animation-delay: .05s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+1) { animation-delay: .1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+2) { animation-delay: .15s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+3) { animation-delay: .2s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+4) { animation-delay: .25s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+5) { animation-delay: .3s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+6) { animation-delay: .35s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+7) { animation-delay: .4s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+8) { animation-delay: .45s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+9) { animation-delay: .5s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+10) { animation-delay: .55s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+11) { animation-delay: .6s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+12) { animation-delay: .65s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+13) { animation-delay: .7s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+14) { animation-delay: .75s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+15) { animation-delay: .8s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+16) { animation-delay: .85s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+17) { animation-delay: .9s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+18) { animation-delay: .95s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+19) { animation-delay: 1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+20) { animation-delay: 1.05s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+21) { animation-delay: 1.1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+22) { animation-delay: 1.15s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+23) { animation-delay: 1.2s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+24) { animation-delay: 1.25s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+25) { animation-delay: 1.3s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+26) { animation-delay: 1.35s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+27) { animation-delay: 1.4s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+28) { animation-delay: 1.45s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+29) { animation-delay: 1.5s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+30) { animation-delay: 1.55s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+31) { animation-delay: 1.6s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+32) { animation-delay: 1.65s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+33) { animation-delay: 1.7s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+34) { animation-delay: 1.75s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+35) { animation-delay: 1.8s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+36) { animation-delay: 1.85s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+37) { animation-delay: 1.9s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+38) { animation-delay: 1.95s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+39) { animation-delay: 2s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+40) { animation-delay: 2.05s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+41) { animation-delay: 2.1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+42) { animation-delay: 2.15s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+43) { animation-delay: 2.2s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+44) { animation-delay: 2.25s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+45) { animation-delay: 2.3s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+46) { animation-delay: 2.35s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+47) { animation-delay: 2.4s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+48) { animation-delay: 2.45s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+49) { animation-delay: 2.5s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+50) { animation-delay: 2.55s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+51) { animation-delay: 2.6s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+52) { animation-delay: 2.65s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+53) { animation-delay: 2.7s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+54) { animation-delay: 2.75s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+55) { animation-delay: 2.8s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+56) { animation-delay: 2.85s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+57) { animation-delay: 2.9s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+58) { animation-delay: 2.95s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+59) { animation-delay: 3s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+60) { animation-delay: 3.05s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+61) { animation-delay: 3.1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+62) { animation-delay: 3.15s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+63) { animation-delay: 3.2s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+64) { animation-delay: 3.25s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+65) { animation-delay: 3.3s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+66) { animation-delay: 3.35s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+67) { animation-delay: 3.4s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+68) { animation-delay: 3.45s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+69) { animation-delay: 3.5s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+70) { animation-delay: 3.55s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+71) { animation-delay: 3.6s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+72) { animation-delay: 3.65s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+73) { animation-delay: 3.7s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+74) { animation-delay: 3.75s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+75) { animation-delay: 3.8s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+76) { animation-delay: 3.85s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+77) { animation-delay: 3.9s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+78) { animation-delay: 3.95s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+79) { animation-delay: 4s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+80) { animation-delay: 4.05s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+81) { animation-delay: 4.1s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+82) { animation-delay: 4.15s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+83) { animation-delay: 4.2s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+84) { animation-delay: 4.25s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+85) { animation-delay: 4.3s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+86) { animation-delay: 4.35s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+87) { animation-delay: 4.4s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+88) { animation-delay: 4.45s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+89) { animation-delay: 4.5s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+90) { animation-delay: 4.55s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+91) { animation-delay: 4.6s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+92) { animation-delay: 4.65s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+93) { animation-delay: 4.7s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+94) { animation-delay: 4.75s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+95) { animation-delay: 4.8s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+96) { animation-delay: 4.85s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+97) { animation-delay: 4.9s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+98) { animation-delay: 4.95s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__results>:nth-child(n+99) { animation-delay: 5s; animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0 } .c-searchPopup__result { align-items: center; display: flex; padding: 20px 0; position: relative } .c-searchPopup__resultImage { flex-shrink: 0; height: 50px; width: 40px } .c-searchPopup__resultText { margin-left: 10px } .c-searchPopup__resultText .subcopy { color: #888; display: block; margin-top: 3px; width: 100% } .c-searchPopup__result:not(:first-child):after { background-color: #dfdfdf; content: ""; height: 1px; left: 0; position: absolute; top: 0; width: 100%; will-change: transform } .c-liveTag { background-color: #fff; border: 1px solid #000; padding: 10px; position: absolute; right: 10px; text-transform: uppercase; top: 10px } .c-subMenu { background-color: #fff; height: 40px; position: sticky !important; position: -webkit-sticky !important; top: 0; z-index: 24 } @media(max-width:1023px) { .c-subMenu { height: 50px } } .c-subMenu .c-subMenu__inner { align-items: center; display: flex; justify-content: center; position: relative } .c-subMenu .c-subMenu__dropdownOption, .c-subMenu .c-subMenu__dropdownOptionSelected { font-size: 15px; letter-spacing: .02em; line-height: 20px } @media(min-width:1024px) { .c-subMenu .c-subMenu__dropdown.-mobileOption { display: flex; width: 100% } .c-subMenu .c-subMenu__dropdown.-mobileOption .c-subMenu__dropdownOptionSelected.-mobileOption { bottom: 0; font-family: NeueMontreal-Medium; font-weight: 500; left: 0; position: absolute; top: 0 } } @media(min-width:1024px)and (hover:hover) { .c-subMenu .c-subMenu__dropdown.-mobileOption .c-subMenu__dropdownOptionSelected.-mobileOption:hover { color: #e1251b } } @media(min-width:1024px) { .c-subMenu .c-subMenu__dropdown.-mobileOption .c-subMenu__dropdownOptions.-desktopListing { width: 100% } .c-subMenu .c-subMenu__dropdown.-mobileOption .c-subMenu__dropdownOptions.-desktopListing>.c-subMenu__dropdownOptionsContainer { align-items: center; column-gap: 20px; display: flex; justify-content: center } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption { position: relative } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption:after { background-image: url(../assets/common/vectors/icon_dropdown-arrow.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 7px; position: absolute; right: 15px; top: calc(50% - 3px); transform-origin: center center; width: 12px; z-index: -1 } .c-subMenu .c-subMenu__dropdownOption { padding: 10px 15px } } @media(min-width:1024px)and (hover:hover) { .c-subMenu .c-subMenu__dropdownOption:hover { color: #e1251b } } @media(min-width:1024px) { .c-subMenu .c-subMenu__dropdownOption.-active { color: #e1251b } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption { border-left: 1px solid transparent; border-right: 1px solid transparent; cursor: pointer } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption.-opened { border-left: 1px solid #000; border-right: 1px solid #000 } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption.-opened .c-subMenu__dropdownOptionSelected { color: #e1251b } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption.-opened:after { transform: rotate(-180deg) } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption>.c-subMenu__dropdownOptionSelected { padding-right: 16px } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOptions { background-color: #fff; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; height: 0; left: -1px; overflow: hidden; position: absolute; top: 39px; transition: height .25s ease-out } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOptions .c-subMenu__dropdownOptionsContainer { min-width: 162px; width: max-content } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOption { color: #000; display: flex; padding: 15px; position: relative } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOption:nth-child(n+2) { border-top: 1px solid #c4c4c4 } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOption:hover { background-color: #f3f3f3; color: #000 } } @media(max-width:1023px) { .c-subMenu .c-subMenu__dropdown.-mobileOption { border-left: 1px solid transparent; border-right: 1px solid transparent; display: flex; flex-direction: column; width: 100% } .c-subMenu .c-subMenu__dropdown.-mobileOption .arrow__img { height: 10px; position: absolute; right: 18px; top: calc(50% - 5px); transform-origin: center center; width: 14px } .c-subMenu .c-subMenu__dropdown.-mobileOption.-opened { background: #f3f3f3; border-left: 1px solid #000; border-right: 1px solid #000; padding-left: 14.5px } .c-subMenu .c-subMenu__dropdown.-mobileOption.-opened .arrow__img { transform: rotate(-180deg) } .c-subMenu .c-subMenu__dropdown.-mobileOption .c-subMenu__dropdownOptionSelected.-mobileOption { padding-bottom: 15px; padding-top: 15px; text-align: left } .c-subMenu .c-subMenu__dropdown.-mobileOption .c-subMenu__dropdownOptions.-desktopListing { background-color: #fff; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; height: 0; left: 0; overflow: hidden; position: absolute; top: 49px; transition: height .25s ease-out; width: 100% } .c-subMenu .c-subMenu__dropdown.-mobileOption .c-subMenu__dropdownOptions.-desktopListing>.c-subMenu__dropdownOptionsContainer { display: flex; flex-direction: column } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption { position: relative } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .plus__img { height: 12px; position: absolute; right: 18px; top: 18.5px; width: 12px } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOptionSelected { transition: all .3s ease-out } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOptionsContainer .c-subMenu__dropdownOption { padding-left: 16px } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOptionsContainer .c-subMenu__dropdownOption:before { background-color: #000; border-radius: 50%; content: ""; height: 4px; left: 3px; position: absolute; top: 23px; width: 4px } .c-subMenu .c-subMenu__dropdownOption { border-bottom: 1px solid #c4c4c4; padding: 15px } .c-subMenu .c-subMenu__dropdownOption.-active { color: #e1251b } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption { border-left: 1px solid transparent; border-right: 1px solid transparent } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption.-opened .plus__img { height: 2px; top: 24px } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption.-opened .c-subMenu__dropdownOptionSelected { padding-bottom: 15px } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption>.c-subMenu__dropdownOptionSelected { padding-right: 15px; text-align: left; width: 100% } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOptions { background-color: #fff; height: 0; overflow: hidden; position: relative; transition: height .25s ease-out } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOptions .c-subMenu__dropdownOptionsContainer { width: 100% } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOption { border-bottom: none; color: #000; display: flex; padding: 15px 0; position: relative } .c-subMenu .c-subMenu__dropdown.c-subMenu__dropdownOption .c-subMenu__dropdownOption.-active { background-color: #f3f3f3; color: #000 } } .c-investorData__row { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative } .c-investorData__row.mt-30 { margin-top: 30px } .c-investorData__row.mb-30 { margin-bottom: 30px } .c-investorData__row.investorData__download .c-investorData__right { -ms-flex-item-align: end; align-self: flex-end } .c-investorData__row.investorData__download .c-investorData__right .c-investorData__list-items { padding-bottom: 0 } @media(max-width:1023px) { .c-investorData__row, .c-investorData__row.investorData__download .c-investorData__list-items { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .c-investorData__row.investorData__download .c-investorData__list-items .quarterly-txt { font-size: 30px; line-height: 1 } .c-investorData__row.investorData__download .c-investorData__list-items .quarterly-img { margin-top: 20px; padding: 0 } } .c-investorData__left { -ms-flex-item-align: start; -ms-flex-preferred-size: 47%; align-self: flex-start; flex-basis: 47%; padding-bottom: 30px; padding-right: 32px; padding-top: 30px; position: relative } @media(max-width:1023px) { .c-investorData__left { -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0; width: 100% } } .c-investorData__right { -ms-flex-item-align: center; -ms-flex-preferred-size: 53%; align-self: center; flex-basis: 53%; padding-bottom: 30px; padding-left: 32px; padding-top: 30px; position: relative } @media(max-width:1023px) { .c-investorData__right { -ms-flex-item-align: start; -ms-flex-preferred-size: 100%; align-self: flex-start; flex-basis: 100%; margin-top: 30px; padding: 0; width: 100% } } .c-investorData__title-1 { font-size: 90px; letter-spacing: -.03em; line-height: 1 } @media(max-width:1023px) { .c-investorData__title-1 { font-size: 50px; line-height: 1 } } .c-investorData__title-2 { font-size: 70px; line-height: 1 } @media(max-width:1023px) { .c-investorData__title-2 { font-size: 50px; line-height: 1 } } .c-investorData__title-3 { font-size: 40px; line-height: 1 } .c-investorData__desc { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 20px } .c-investorData__list-items { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; padding-bottom: 20px; padding-top: 20px; position: relative } .c-investorData__list-items:first-child { padding-top: 0 } .c-investorData__list .quarterly-num { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-right: 20px } .c-investorData__list .quarterly-txt { display: -webkit-box; display: -ms-flexbox; display: flex } .c-investorData__list .quarterly-txt__text { font-size: 15px; letter-spacing: .02em; line-height: 20px } @media(max-width:1023px) { .c-investorData__list .quarterly-txt__text { max-width: 170px } } .c-investorData__list .quarterly-img { padding-left: 15px } .c-investorData .investorUpdates_download { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative } .c-investorData .investorUpdates_download_text { color: #e1251b; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-right: 10px } .c-investorData .investorUpdates_downloadIcon { -webkit-box-orient: vertical; -webkit-box-direction: normal; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .c-investorData .investorUpdates_downloadIcon_line { background-color: #e1251b; height: 1px; margin-top: 2px; width: 100% } .c-investorData .investorUpdates_downloadIcon.-opened { opacity: .5 } @media(hover:hover) { .c-investorData .investorUpdates_download:hover .investorUpdates_downloadIcon svg { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: animateArrowOnMouseover2; animation-name: animateArrowOnMouseover2 } } .c-investorData .investorUpdates_downloadTooltip { background-color: #fff; border: 1px solid #888; min-width: 100px; opacity: 0; position: absolute; right: 0; top: calc(100% - 12px); transition: all .24s linear; visibility: hidden } .c-investorData .investorUpdates_downloadTooltip.-opened { opacity: 1; visibility: visible; z-index: 22 } .c-investorData .investorUpdates_downloadTooltipLink { background-color: #fff; display: block; font-size: 13px; letter-spacing: .03em; line-height: 15px; padding: 15px; position: relative; text-align: left } .c-investorData .investorUpdates_downloadTooltipLink:nth-child(n+2) { border-top: 1px solid #888 } @media(max-width:1023px) { .c-investorData .investorUpdates_downloadTooltip { top: calc(100% - 20px) } } .c-investorData:nth-of-type(n+2) { margin-top: 20px } @media(hover:hover) { .c-howToUse__item.permit-hovers .c-howToUse__itemImageContainer { background-color: #f3f3f3 } .c-howToUse__item.permit-hovers img.c-howToUse__itemImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } .c-howToUse__item.permit-hovers img.c-howToUse__itemImage:not(.-hoverImage) { opacity: 1 } .c-howToUse__item.permit-hovers img.c-howToUse__itemImage.-hoverImage, .c-howToUse__item.permit-hovers:hover img.c-howToUse__itemImage:not(.-hoverImage) { opacity: 0 } .c-howToUse__item.permit-hovers:hover img.c-howToUse__itemImage.-hoverImage { opacity: 1 } } .c-howToUse { padding-bottom: 60px; padding-top: 60px; position: relative } .c-howToUse.-withBoxButton { margin-bottom: 50px } @media(min-width:1024px) { .c-howToUse { align-items: center; display: flex; flex-direction: column } } @media(max-width:1023px) { .c-howToUse { padding-bottom: 50px; padding-top: 50px } } .c-howToUse__heading { padding-bottom: 30px } @media(max-width:1023px) { .c-howToUse__heading { font-size: 30px; line-height: 1; padding-bottom: 20px } } @media(min-width:1024px) { .c-howToUse__heading { font-size: 40px; line-height: 1; text-align: center } } .c-howToUse__list { display: flex; overflow: hidden; position: relative; width: 100% } @media(max-width:1023px) { .c-howToUse__list { flex-flow: row wrap } } .c-howToUse__item { cursor: pointer; flex-basis: 100%; flex-shrink: 0; position: relative } .c-howToUse__itemImageContainer { padding-top: 46.1538461538%; position: relative } @media(max-width:1023px) { .c-howToUse__itemImageContainer { padding-top: 125% } } .c-howToUse__itemImage { object-fit: cover; object-position: center } .c-howToUse__itemImage.-hoverImage { opacity: 0 } .c-howToUse__stepListing { border: 1px solid #000; display: flex } @media(max-width:1023px) { .c-howToUse__stepListing { flex-wrap: wrap } } .c-howToUse__step { align-items: center; display: inline-flex; padding: 25px 50px; position: relative } @media(max-width:1023px) { .c-howToUse__step { padding: 20px; width: 100% } } .c-howToUse__step:nth-child(n+2) { border-left: 1px solid #000 } @media(max-width:1023px) { .c-howToUse__step:nth-child(n+2) { border-left: 0; border-top: 1px solid #000 } } .c-howToUse__step_count { font-size: 20px; line-height: 25px } @media(max-width:1023px) { .c-howToUse__step_count { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-howToUse__step_line { background-color: #e8e9eb; height: 40px; margin-left: 20px; margin-right: 20px; width: 1px } .c-howToUse__step_text { font-size: 20px; line-height: 25px; max-width: 240px } @media(max-width:1023px) { .c-howToUse__step_text { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-product__menu { background: #fff; display: none; height: 100%; overflow-y: auto; padding-bottom: 60px; padding-left: var(--containerSidePadding); padding-right: var(--containerSidePadding); padding-top: 103px; position: fixed; scroll-behavior: smooth; width: 100%; will-change: transform; z-index: 26 } .c-product__menu.-opened { animation-duration: .6s; animation-fill-mode: forwards; animation-name: transformTheProductMenu; display: block } .c-product__menu__title { font-size: 40px; line-height: 1; margin-bottom: 40px; margin-top: 40px; position: relative } .c-product__menu__listing { display: grid; gap: 21px; grid-template-columns: repeat(2, 1fr); margin-bottom: 40px; position: relative } .c-product__menu__listTitle { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 10px; position: relative } .c-product__menu__listItem { padding: 10px 20px 20px; position: relative } .c-product__menuImageContainer { padding-top: 125% } .c-product__menuImage { object-fit: cover; object-position: center } .c-product__menuImage.-hoverImage { opacity: 0 } @media only screen and (max-width:388px) { .c-product__menu .c-product__menu__listing { gap: 14px } .c-product__menu .c-product__menu__listItem { padding: 10px 14px 14px } } @keyframes transformTheProductMenu { 0% { opacity: 0; transform: translateY(350px); visibility: hidden } to { opacity: 1; transform: translate(0); visibility: visible } } .c-productModal { background-color: #fff; height: 100%; left: 0; opacity: 0; overflow-y: auto; position: fixed; scroll-behavior: smooth; top: 0; transition: opacity .6s cubic-bezier(1, 0, 0, 1); visibility: hidden; width: 100%; z-index: 999 } .c-productModal.opened { opacity: 1; visibility: visible } .c-productModal__close { padding: 20px 40px; position: fixed; right: 0; z-index: 1 } @media(max-width:1023px) { .c-productModal__close { padding: 20px } } .c-productModal__close img { display: block; height: 15px; width: 15px } .c-productModal__container { display: block; margin-left: auto; margin-right: auto; max-width: 740px; padding: 110px 20px; position: relative; width: 100% } .c-productModal__images { display: flex; flex-direction: column; position: relative } .c-productModal__image { height: auto; position: relative; width: 100% } .c-productModal__image:nth-child(n+2) { margin-top: 40px } .c-heritage { margin-bottom: 44px; margin-left: calc(0px - var(--viewportSidePadding)); padding-bottom: 30px; padding-left: var(--viewportSidePadding); padding-top: 30px; position: relative; width: var(--viewportWidth) } .c-heritage .anim-line { left: var(--viewportSidePadding); width: calc(var(--viewportWidth) - var(--viewportSidePadding)*2) } @media(max-width:1023px) { .c-heritage { padding-bottom: 30px; padding-top: 30px } } @media(min-width:1024px) { .c-heritage { display: flex; gap: 30px } .c-heritage__intro { display: flex; flex-direction: column; width: var(--gridCol3) } } @media(max-width:1023px) { .c-heritage__heading { font-size: 40px; line-height: 1 } } .c-heritage__link { align-items: center; display: flex; margin-top: 40px } @media(max-width:1023px) { .c-heritage__link { margin-top: 30px } } .c-heritage__cards { -ms-overflow-style: none; align-items: stretch; display: flex; flex: 1; overflow: scroll; position: relative; scroll-snap-type: x mandatory; scrollbar-width: none } .c-heritage__cards::-webkit-scrollbar { display: none } .c-heritage__cards:after { content: ""; padding-left: calc(var(--viewportSidePadding) - 30px) } @media(max-width:1023px) { .c-heritage__cards { margin-top: 30px } } .c-heritage__card { padding-right: 30px } @media(max-width:1023px) { .c-heritage__card { padding-right: 20px } } .c-heritage__cardInner { background-color: #f3f3f3; display: block; flex-shrink: 0; height: 100%; padding: 20px 30px 30px; scroll-snap-align: start; scroll-snap-stop: always } @media(max-width:1023px) { .c-heritage__cardInner { padding: 10px 20px 30px; width: 66vw } } @media(min-width:1024px) { .c-heritage__cardInner { width: var(--gridCol3) } } .c-heritage .c-heritage__card.-followHeritage .c-heritage__cardInner { background-color: #fff; border: 1px solid #000; padding: 80px 20px 20px } .c-heritage .c-heritage__card.-followHeritage .c-heritage__cardTitle { font-size: 40px; line-height: 40px } .c-heritage .c-heritage__card.-followHeritage .c-heritage__cardTitle+svg { margin-top: 30px } .c-heritage__cardTitle { font-size: 60px; line-height: 72px } .c-heritage__cardImgWrapper { margin-top: 10px; padding-top: 125%; position: relative } .c-heritage__cardDesc { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; margin-top: 20px; overflow: hidden } @media(min-width:1024px) { .c-heritage__cardDesc { padding-right: 20px } } .c-heritage__slider-btn--wrapper { align-items: center; display: flex; gap: 8px; margin-bottom: 0; margin-top: auto } @media(max-width:1023px) { .c-heritage__slider-btn--wrapper { display: none } } .c-heritage__slider--next-btn, .c-heritage__slider--prev-btn { color: #292a2e } .c-heritage__slider--next-btn .icon-fill, .c-heritage__slider--prev-btn .icon-fill { display: none } .c-heritage__slider--next-btn .icon-arrow, .c-heritage__slider--prev-btn .icon-arrow { stroke: #292a2e } .c-heritage__slider--next-btn:not(.is-disabled) .icon-fill, .c-heritage__slider--prev-btn:not(.is-disabled) .icon-fill { display: block } .c-heritage__slider--next-btn:not(.is-disabled) .icon-outline, .c-heritage__slider--prev-btn:not(.is-disabled) .icon-outline { display: none } .c-heritage__slider--next-btn:not(.is-disabled) .icon-arrow, .c-heritage__slider--prev-btn:not(.is-disabled) .icon-arrow { stroke: #fff } .c-heritage__slider--next-btn.is-disabled, .c-heritage__slider--prev-btn.is-disabled { color: #292a2e; pointer-events: none } .c-officeSupplies { height: 70.3125vh; max-height: 686px; position: relative } @media(max-width:767px) { .c-officeSupplies { height: 70vh; min-height: 540px } .c-officeSupplies .forDesktop, .c-officeSupplies .forIpad { display: none } .c-officeSupplies .forMobile { display: block !important } } @media(min-width:768px)and (max-width:1023px) { .c-officeSupplies { height: 335px } .c-officeSupplies .forDesktop, .c-officeSupplies .forMobile { display: none } .c-officeSupplies .forIpad { display: block !important } } @media(min-width:1024px) { .c-officeSupplies .forIpad, .c-officeSupplies .forMobile { display: none } .c-officeSupplies .forDesktop { display: block !important } } @media(max-width:1023px) { .c-officeSupplies { padding: 20px } } .c-officeSupplies .forDesktop, .c-officeSupplies .forIpad, .c-officeSupplies .forMobile { display: none } .c-officeSupplies__image, .c-officeSupplies__imageContainer { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .c-officeSupplies__textWrapper { position: relative } @media(min-width:768px) { .c-officeSupplies__textWrapper { display: flex; gap: var(--gridMargin) } } @media(min-width:1024px) { .c-officeSupplies__textWrapper { padding-left: 30px } } .c-officeSupplies__heading { font-family: NeueMontreal-Medium; font-size: 90px; letter-spacing: -.01em; line-height: 80px } @media(max-width:1023px) { .c-officeSupplies__heading { font-size: 40px; letter-spacing: 0; line-height: 40px } } @media(min-width:768px) { .c-officeSupplies__heading { flex: 1 } } @media(min-width:1024px) { .c-officeSupplies__heading { margin-top: 54px; padding-left: 20px } } @media(max-width:767px) { .c-officeSupplies__rhs { margin-top: 15px } } @media(min-width:1024px) { .c-officeSupplies__rhs { margin-top: 65px } } @media(min-width:768px) { .c-officeSupplies__rhs { width: var(--gridCol3) } } .c-officeSupplies__subheading { color: #000; font-size: 20px; line-height: 25px } @media(max-width:1023px) { .c-officeSupplies__subheading { font-size: 15px; letter-spacing: .02em; line-height: 20px } } .c-officeSupplies__link { margin-top: 20px } @media(max-width:1023px) { .c-officeSupplies__link { margin-top: 15px } } .c-officeSupplies .highlighted { position: relative } .c-officeSupplies .highlighted svg { bottom: 8px; left: -9px; position: absolute } @media(max-width:1023px) { .c-officeSupplies .highlighted svg { bottom: 1px; height: auto; left: -4px; width: 221px } } .c-officeSupplies+.c-quote { margin-top: 90px !important } @media(max-width:1023px) { .c-officeSupplies+.c-quote { margin-top: 80px !important } } @media(max-width:767px) { html.isOfficeSuppliesModalOpen body>:not(.c-officeSuppliesModal) { display: none } } @media(min-width:768px) { html.isOfficeSuppliesModalOpen body { height: 100vh; overflow: hidden; position: relative } } .c-officeSuppliesModal { align-items: center; background-color: rgba(0, 0, 0, .6); display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: fixed; top: 0; transition: opacity .4s cubic-bezier(.445, .05, .55, .95); visibility: hidden; width: 100%; z-index: 9999 } @media(max-width:767px) { .c-officeSuppliesModal { background-color: #fff; display: block; height: auto; padding: 0 20px; position: fixed } } .c-officeSuppliesModal.show { opacity: 1; visibility: visible } @media(max-width:767px) { .c-officeSuppliesModal.show { position: relative } } .c-officeSuppliesModal__inner { background-color: #fff; padding: 30px; position: relative; width: 740px } @media(max-width:767px) { .c-officeSuppliesModal__inner { margin: 0 auto; padding: 40px 0; width: 90% } } @media(min-width:768px)and (max-width:1023px) { .c-officeSuppliesModal__inner { width: 728px } } @media(min-width:768px) { .c-officeSuppliesModal__inner { display: flex } } .c-officeSuppliesModal__closeBtn { padding: 12px; position: absolute; right: 0; top: 0; z-index: 1 } @media(hover:hover) { .c-officeSuppliesModal__closeBtn { transition: opacity .2s ease } .c-officeSuppliesModal__closeBtn:hover { opacity: .6 } } @media(max-width:767px) { .c-officeSuppliesModal__closeBtn { padding: 10px } } .c-officeSuppliesModal__closeBtn img { display: block; height: 11px; width: 11px } @media(max-width:767px) { .c-officeSuppliesModal__closeBtn img { height: 15px; width: 15px } } @media(min-width:768px) { .c-officeSuppliesModal__lhs { width: 320px } .c-officeSuppliesModal__rhs { flex: 1; padding-left: 30px } } @media(max-width:767px) { .c-officeSuppliesModal__rhs { margin-top: 20px } } .c-officeSuppliesModal__itemImageContainer { padding-top: 125% } .c-officeSuppliesModal__title { font-size: 30px; line-height: 1 } .c-officeSuppliesModal__bulletPoints { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; padding-top: 20px; position: relative } .c-officeSuppliesModal__bulletPoint { color: #888; font-size: 13px; letter-spacing: .03em; line-height: 15px; padding-left: 17px; position: relative } @media(max-width:767px) { .c-officeSuppliesModal__bulletPoint { padding-right: 20px } } .c-officeSuppliesModal__bulletPoint:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 4px; left: 3px; position: absolute; top: 5px; width: 4px } .c-tagInput__wrapper { position: relative } .c-tagInput__wrapper:after { background-image: url(../assets/common/vectors/icon_dropdown-arrow.svg); background-position: 50%; background-repeat: no-repeat; background-size: 10px auto; content: ""; height: 10px; position: absolute; right: 15px; top: 50px; width: 10px } .c-tagInput__wrapper.is-opened .c-tagInput__input, .c-tagInput__wrapper.is-opened .c-tagInput__selectedTags { border: 1px solid #dfdfdf; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: border-color 0ms ease, border-radius 0s ease 0s } .c-tagInput__wrapper.is-opened:after { transform: rotate(180deg) } .c-tagInput__wrapper .c-inputError { height: 0; max-height: unset; transition: height .4s ease } .c-tagInput__wrapper.is-empty .c-inputError, .c-tagInput__wrapper.is-invalid .c-inputError { height: 48px } .c-tagInput__wrapper.has-value .c-tagInput__selectedTags { opacity: 1 } .c-tagInput__label { align-items: flex-end; display: flex; justify-content: space-between; padding-bottom: 10px } .c-tagInput__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: transparent; color: #000; cursor: pointer; display: block; height: 50px; left: 0; padding: 0 15px; position: absolute; top: 30px; transition: border-color .4s linear, border-radius 0s ease .4s; width: 100% } .c-tagInput__input::placeholder { color: #727272 } .c-tagInput__selectedTags { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; display: flex; flex-flow: row wrap; min-height: 50px; opacity: 0; padding-bottom: 10px; padding-left: 5px; padding-right: 50px; pointer-events: none; position: relative; width: 100% } .c-tagInput__selectedTag { align-items: center; background-color: #ebebeb; border-radius: 100px; color: #000; cursor: pointer; display: flex; height: 30px; margin-left: 10px; margin-top: 10px; padding: 0 8px; pointer-events: auto } .c-tagInput__selectedTag .c-tagInput__deleteSelectedTag { background-image: url(../assets/common/vectors/icon_close-popup.svg); background-position: 50%; background-repeat: no-repeat; background-size: 8px 8px; padding: 10px } .c-tagInput__tagOptions { border-bottom: 1px solid #dfdfdf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; height: 0; margin-top: -10px; overflow: hidden; width: 100% } .c-tagInput__tagOptionsInner { display: flex; flex-flow: row wrap; padding: 15px 15px 15px 5px } .c-tagInput__tagOption { background-color: #ebebeb; border-radius: 100px; color: #888; cursor: pointer; margin-left: 10px; margin-top: 10px; padding: 8px } @media(hover:hover) { .c-tagInput__tagOption { transition: background-color .2s cubic-bezier(.19, 1, .22, 1), color .2s cubic-bezier(.19, 1, .22, 1) } .c-tagInput__tagOption:hover { background-color: #000; color: #fff } } .c-textInput__wrapper { position: relative } .c-textInput__wrapper.is-focused .c-textInput__input { border: 1px solid #dfdfdf } .c-textInput__wrapper .c-inputError { height: 0; max-height: unset; transition: height .4s ease } .c-textInput__wrapper.is-empty .c-inputError, .c-textInput__wrapper.is-invalid .c-inputError { height: 48px } .c-textInput__label { align-items: flex-end; display: flex; justify-content: space-between; padding-bottom: 10px } .c-textInput__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: #000; display: block; height: 50px; padding: 0 15px; width: 100% } .c-textInput__input::placeholder { color: #727272 } .c-textareaInput__wrapper { position: relative } .c-textareaInput__wrapper.is-focused .c-textareaInput__input { border: 1px solid #dfdfdf } .c-textareaInput__wrapper.is-empty .c-inputError, .c-textareaInput__wrapper.is-invalid .c-inputError { max-height: 48px } .c-textareaInput__charLimit { color: #727272 } .c-textareaInput__label { align-items: flex-end; display: flex; justify-content: space-between; padding-bottom: 10px } .c-textareaInput__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: #000; display: block; min-height: 120px; padding: 10px 15px 15px; resize: none; width: 100% } .c-textareaInput__input::placeholder { color: #727272 } .c-checkboxSwitch { position: relative } .c-checkboxSwitch__label { align-items: center; cursor: pointer; display: flex } .c-checkboxSwitch__input { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } .c-checkboxSwitch__input:checked~.c-checkboxSwitch__toggleButton { border-color: #000 } .c-checkboxSwitch__input:checked~.c-checkboxSwitch__toggleButton:after { background-color: #000; border-color: #000; transform: translateX(16px) } .c-checkboxSwitch__toggleButton { border: 1px solid #c4c4c4; border-radius: 120px; box-sizing: content-box; height: 24px; margin-left: 10px; position: relative; transition: border-color .6s cubic-bezier(.075, .82, .165, 1); width: 40px } .c-checkboxSwitch__toggleButton:after { background-color: #c4c4c4; border: 1px solid #c4c4c4; border-radius: 50%; box-sizing: border-box; content: ""; height: 16px; left: 4px; position: absolute; top: 4px; transition: transform .6s cubic-bezier(.075, .82, .165, 1); width: 16px; will-change: transform } .c-checkboxSwitch__note { color: #888; margin-top: 10px } @media(max-width:1023px) { .c-checkboxSwitch__note { max-width: 263px } } form.is-submitting .c-submitButton { background-color: #888 } form.is-submitting .c-submitButton__submitting { display: flex } form.is-submitting .c-submitButton__text { display: none } .c-submitButton { align-items: center; background-color: #000; border-radius: 5px; cursor: pointer; display: flex; height: 40px; justify-content: center; min-width: 102px; padding: 0 30px; position: relative } .c-submitButton__submittingText, .c-submitButton__text { color: #fff; white-space: nowrap } .c-submitButton__submitting { align-items: center; display: none; justify-content: center } .c-submitButton__submittingDots { display: flex; margin-left: 10px } .c-submitButton__submittingDots>:not(:first-child) { margin-left: 3px } .c-submitButton__submittingDot { animation: dotFlashing .6s infinite alternate; background-color: #fff; height: 4px; opacity: 1; width: 4px } .c-submitButton__submittingDot:first-of-type { animation-delay: .6s } .c-submitButton__submittingDot:nth-of-type(2) { animation-delay: .7s } .c-submitButton__submittingDot:nth-of-type(3) { animation-delay: .8s } @media(hover:hover) { .c-submitButton:hover { background-color: #888 } } .c-cancelButton { transition: opacity .2s ease; white-space: nowrap } @media(hover:hover) { .c-cancelButton:hover { opacity: .6 } } .c-dropdownInput__wrapper { cursor: pointer; position: relative } .c-dropdownInput__wrapper:after { background-image: url(../assets/common/vectors/icon_dropdown-arrow.svg); background-position: 50%; background-repeat: no-repeat; background-size: 10px auto; content: ""; height: 10px; position: absolute; right: 15px; top: 50px; width: 10px } .c-dropdownInput__wrapper.is-opened:after { transform: rotate(180deg) } .c-dropdownInput__wrapper.is-opened .c-dropdownInput__input { border: 1px solid #dfdfdf; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: border-color 0s linear, border-radius 0s ease 0s } .c-dropdownInput__label { align-items: flex-end; display: flex; justify-content: space-between; padding-bottom: 10px } .c-dropdownInput__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: #000; cursor: pointer; display: block; height: 50px; padding: 0 15px; position: relative; transition: border-color .4s linear, border-radius 0s ease .4s; width: 100% } .c-dropdownInput__input::placeholder { color: #727272 } .c-dropdownInput__options { background-color: #fff; border-left: 1px solid #dfdfdf; border-radius: 0 0 5px 5px; border-right: 1px solid #dfdfdf; height: 0; left: 0; overflow: hidden; position: absolute; top: 100%; width: 100%; z-index: 23 } .c-dropdownInput__options:before { background-color: #dfdfdf; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 100% } .c-dropdownInput__options>:first-child { padding-top: 15px } .c-dropdownInput__options>:last-child { padding-bottom: 15px } .c-dropdownInput__options>:not(:first-child) { margin-top: 20px } .c-dropdownInput__option { padding-left: 15px; padding-right: 15px } .c-inputError { align-items: flex-start; display: flex; flex-flow: row wrap; max-height: 0; overflow: hidden; transition: max-height .4s ease } .c-inputError:before { content: ""; padding-top: 11px; width: 100% } .c-inputError__icon { bottom: 1px; flex-shrink: 0; height: 14px; position: relative; width: 15px } .c-inputError__text { color: #e1251b; flex: 1; margin-left: 5px } .c-inputError.-redTextWithoutIcon .c-inputError__icon { display: none } .c-inputError.-redTextWithoutIcon .c-inputError__text { color: #e1251b; margin-left: 0 } [data-page=styleGuide] .grid__row { display: flex; flex-flow: row wrap } [data-page=styleGuide] .grid__row>:last-child { flex: 1 } [data-page=styleGuide] .grid__col2 { width: 50% } @media(max-width:1023px) { [data-page=styleGuide] .grid__col2 { width: 100% } } [data-page=styleGuide] .grid__col4 { width: 25% } @media(max-width:1023px) { [data-page=styleGuide] .grid__col4 { width: 100% } } [data-page=styleGuide]:not(.-components) main { padding-bottom: 100px; padding-top: 60px } @media(max-width:1023px) { [data-page=styleGuide]:not(.-components) main { padding-top: 30px } } [data-page=styleGuide] .pageTitle { color: #000 } @media(max-width:1023px) { [data-page=styleGuide] .pageTitle { font-size: 30px; line-height: 1; line-height: 1.2 } } @media(min-width:1024px) { [data-page=styleGuide] .pageTitle { font-size: 50px; line-height: 1 } } [data-page=styleGuide] .pageTitle a { color: currentColor } [data-page=styleGuide] .pageTitle a.is-active, [data-page=styleGuide] .pageTitle a:hover { color: red } [data-page=styleGuide] .seperator { background-color: #c3c3c3; display: block; height: 1px; margin-bottom: 2px; margin-top: 100px; width: 100% } @media(max-width:1023px) { [data-page=styleGuide] .seperator { margin-top: 60px } } [data-page=styleGuide] .seperator.-pageTitle { background-color: #000 !important; margin-bottom: 50px !important; margin-top: 8px !important } [data-page=styleGuide].-components .seperator { background-color: transparent; margin-bottom: 85px; margin-top: 0 } [data-page=styleGuide].-buttons .seperator { background-color: transparent; margin-bottom: 60px; margin-top: 0 } [data-page=styleGuide] .sectionTitle { color: red; font-size: 13px; line-height: 25px } [data-page=styleGuide].-buttons .sectionTitle, [data-page=styleGuide].-components .sectionTitle { margin-bottom: 15px } main { margin: 0 auto; max-width: 1600px; padding-left: var(--containerSidePadding); padding-right: var(--containerSidePadding); padding-top: 132px } @media(max-width:1023px) { main { max-width: 100%; padding-left: var(--containerSidePadding); padding-right: var(--containerSidePadding) } } ::-ms-reveal { display: none } input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill { -webkit-text-fill-color: #000; -webkit-box-shadow: inset 0 0 0 100px #f9f9f9; box-shadow: inset 0 0 0 100px #f9f9f9; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s } input:-webkit-autofill, input:-webkit-autofill:active, input:-webkit-autofill:focus, input:-webkit-autofill:hover, input:autofill, select:-webkit-autofill, select:-webkit-autofill:active, select:-webkit-autofill:focus, select:-webkit-autofill:hover, select:autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:active, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:hover, textarea:autofill { -webkit-text-fill-color: #000; -webkit-box-shadow: inset 0 0 0 100px #f9f9f9; box-shadow: inset 0 0 0 100px #f9f9f9; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s } .c-blob { --blob-seed: 173411; --blob-num-points: 10; --blob-variance: 0.2; --blob-smoothness: 1; background-image: paint(blob) } .c-blob.-darkPurple { --blob-fill: #4d5cc8; height: 486px; width: 471px } .c-blob.-yellow { --blob-fill: #fee834; left: unset; right: 0 } .pos-r { position: relative } .c-green { color: #46975d } .c-888 { color: #888 } [data-page=home] main { padding-top: 138px } @media(max-width:1023px) { [data-page=home] main { padding-top: 136px } } [data-page=home] .officeSupplies { padding-bottom: 78px; padding-top: 30px; position: relative } @media(hover:hover) { [data-page=home] .officeSupplies .officeSupplies__item.permit-hovers .officeSupplies__itemImageContainer { background-color: #f3f3f3 } [data-page=home] .officeSupplies .officeSupplies__item.permit-hovers img.officeSupplies__itemImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } [data-page=home] .officeSupplies .officeSupplies__item.permit-hovers img.officeSupplies__itemImage:not(.-hoverImage) { opacity: 1 } [data-page=home] .officeSupplies .officeSupplies__item.permit-hovers img.officeSupplies__itemImage.-hoverImage { opacity: 0 } [data-page=home] .officeSupplies .officeSupplies__item.permit-hovers:hover img.officeSupplies__itemImage:not(.-hoverImage) { opacity: 0; transition-delay: 0s !important } [data-page=home] .officeSupplies .officeSupplies__item.permit-hovers:hover img.officeSupplies__itemImage.-hoverImage { opacity: 1 } } @media(min-width:1024px) { [data-page=home] .officeSupplies { align-items: center; display: flex; flex-direction: column } } /* OLD STYLES - COMMENTED OUT */ /* [data-page=home] .officeSupplies .officeSupplies__header { width: 100% } @media(max-width:1023px) { [data-page=home] .officeSupplies .officeSupplies__header { margin-top: 8px } [data-page=home] .officeSupplies .officeSupplies__headerRow>:not(:first-child) { margin-top: 30px } } @media(min-width:1024px) { [data-page=home] .officeSupplies .officeSupplies__headerRow { align-items: flex-end; display: flex; justify-content: space-between } [data-page=home] .officeSupplies .officeSupplies__headerRow>:not(:first-child) { margin-left: var(--gridMargin) } [data-page=home] .officeSupplies .officeSupplies__headerCol { display: flex; flex: 1 } [data-page=home] .officeSupplies .officeSupplies__headerCol:first-child { justify-content: center; margin-left: auto; } [data-page=home] .officeSupplies .officeSupplies__heading { color: #000; font-size: 90px; line-height: 90px; position: relative } [data-page=home] .officeSupplies .officeSupplies__heading .-leftSpace { margin-left: 120px } } @media(max-width:1023px) { [data-page=home] .officeSupplies .officeSupplies__heading { font-size: 70px; line-height: 1 } [data-page=home] .officeSupplies .officeSupplies__heading .-leftSpace { margin-left: 60px } } @media screen and (max-width:320px) { [data-page=home] .officeSupplies .officeSupplies__heading { font-size: 60px; line-height: 1 } [data-page=home] .officeSupplies .officeSupplies__heading .-leftSpace { margin-left: 50px } } [data-page=home] .officeSupplies .-headerColManage .-col9 { flex: 0 0 65% } [data-page=home] .officeSupplies .-headerColManage .-col3 { flex: 0 0 35%; justify-content: flex-end; margin-left: 0 } @media(min-width:1024px) { [data-page=home] .officeSupplies .-headerColManage .-col3 { flex: none; justify-content: flex-start; padding-bottom: 6px; width: var(--gridCol3) } } */ /* NEW STYLES - Matching c-trending__header format */ [data-page=home] .officeSupplies .officeSupplies__header { display: flex; justify-content: flex-start; margin-bottom: 40px; margin-top: 10px; width: 100%; } [data-page=home] .officeSupplies .officeSupplies__headerContent { display: flex; flex-direction: column } [data-page=home] .officeSupplies .officeSupplies__heading { font-size: 50px; line-height: 1 } @media(max-width:1023px) { [data-page=home] .officeSupplies .officeSupplies__heading { font-size: 40px; line-height: 1 } } [data-page=home] .officeSupplies .officeSupplies__headerText { font-size: 20px; line-height: 25px; margin-top: 20px } [data-page=home] .officeSupplies .officeSupplies__list { display: flex; margin-top: 30px; max-width: 100%; position: relative; width: auto } @media(max-width:1023px) { [data-page=home] .officeSupplies .officeSupplies__list { flex-flow: row wrap } } [data-page=home] .officeSupplies .officeSupplies__item { cursor: pointer; flex-shrink: 0; padding: 30px 30px 26px; position: relative } @media(min-width:1024px) { [data-page=home] .officeSupplies .officeSupplies__item { width: var(--gridCol4NoMargin) } } @media(max-width:1023px) { [data-page=home] .officeSupplies .officeSupplies__item { flex-basis: 100%; padding: 20px } } [data-page=home] .officeSupplies .officeSupplies__itemImageContainer { padding-top: 125%; position: relative } [data-page=home] .officeSupplies .officeSupplies__itemImage { object-fit: cover; object-position: center } [data-page=home] .officeSupplies .officeSupplies__itemImage.-hoverImage { opacity: 0 } [data-page=home] .officeSupplies .officeSupplies__itemName { margin-top: 20px } @media(min-width:1024px) { [data-page=home] .officeSupplies .officeSupplies__itemName { font-size: 20px; line-height: 25px } } @media(max-width:1023px) { [data-page=home] .officeSupplies .officeSupplies__itemName { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 15px } } [data-page=home] .officeSupplies .officeSupplies__buttonWrapper { display: flex; justify-content: flex-end; margin-top: -1px; position: absolute; right: 0; top: 100% } [data-page=home] .officeSupplies .officeSupplies__button { margin-top: 19px } @media(max-width:1023px) { [data-page=home] .officeSupplies .officeSupplies__button { margin-top: 14px } } [data-page=home] .officeSupplies .officeSupplies__lines { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100% } [data-page=home] .c-heritage { padding-bottom: 30px; padding-top: 30px } @media(max-width:1023px) { [data-page=home] .c-heritage { padding-bottom: 30px; padding-top: 30px } } [data-page=home] .c-banner__heading { bottom: 100px; font-size: 50px; left: 40px; line-height: 45px; z-index: 5 } @media(max-width:1023px) { [data-page=home] .c-banner__heading { bottom: 80px; left: 20px } } [data-page=home] .c-banner__startExploringButton { background-color: #fff; bottom: 40px; left: 40px; margin-top: 20px; padding: 10px 28.5px } [data-page=home] .c-banner__startExploringButton .c-button__text { color: #000; font-size: 16px } @media(max-width:1023px) { [data-page=home] .c-banner__startExploringButton { bottom: 20px; left: 20px } } [data-page=home] .c-featuredArticles, [data-page=home] .c-featuredProduct, [data-page=home] .c-trending { margin-top: 30px } @media(max-width:1023px) { [data-page=home] .c-featuredArticles { margin-top: 38px } } @media(min-width:1023) { [data-page=home] .c-featuredProduct .c-featuredProduct__inner { height: 70.3125vh; min-height: 640px } } @media(max-width:1023px)and (min-width:768px) { [data-page=home] .c-featuredProduct .c-featuredProduct__imageWrapper { left: 0; position: absolute; right: 0; width: 100% } [data-page=home] .c-featuredProduct .c-featuredProduct__desc, [data-page=home] .c-featuredProduct .c-featuredProduct__name { position: relative } [data-page=home] .c-featuredProduct .c-featuredProduct__image { display: block; position: relative } } [data-page=home] .c-trending { padding-bottom: 30px } @media(hover:hover) { [data-page=home] .c-trending .c-trending__item.permit-hovers .c-trending__itemImageContainer { background-color: #f3f3f3 } [data-page=home] .c-trending .c-trending__item.permit-hovers img.c-trending__itemImage { transition-duration: .12s !important; transition-property: opacity !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; will-change: opacity } [data-page=home] .c-trending .c-trending__item.permit-hovers img.c-trending__itemImage:not(.-hoverImage) { opacity: 1 } [data-page=home] .c-trending .c-trending__item.permit-hovers img.c-trending__itemImage.-hoverImage, [data-page=home] .c-trending .c-trending__item.permit-hovers:hover img.c-trending__itemImage:not(.-hoverImage) { opacity: 0 } [data-page=home] .c-trending .c-trending__item.permit-hovers:hover img.c-trending__itemImage.-hoverImage { opacity: 1 } } [data-page=home] .camBanner .c-wonderlandBanner { background-color: #f3f3f3; height: 70.3125vh; overflow: hidden; position: relative } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner { background-color: #fff; display: flex; flex-direction: column-reverse; height: auto } } [data-page=home] .camBanner .c-wonderlandBanner__img, [data-page=home] .camBanner .c-wonderlandBanner__imgWrapper { height: 100%; left: 0; object-fit: cover; object-position: center; position: absolute; top: 0; width: 100%; z-index: 0 } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__img, [data-page=home] .camBanner .c-wonderlandBanner__imgWrapper, [data-page=home] .camBanner .c-wonderlandBanner__imgs { height: calc(var(--viewportWidth)*400/320); height: calc(125vw - 100px) } [data-page=home] .camBanner .c-wonderlandBanner__imgs { overflow: hidden } } @media(min-width:1024px) { [data-page=home] .camBanner .c-wonderlandBanner__imgs { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0 } } [data-page=home] .camBanner .c-wonderlandBanner__imgWrapper { will-change: opacity } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__text { margin-top: 10px } } @media(min-width:1024px) { [data-page=home] .camBanner .c-wonderlandBanner__text { bottom: 40px; left: 40px; position: absolute; z-index: 1 } } [data-page=home] .camBanner .c-wonderlandBanner__heading { color: #fff; font-size: 60px; letter-spacing: -.03em; line-height: 60px; position: relative } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__heading { color: #000; font-size: 35px; letter-spacing: -.03em; line-height: 37px } } [data-page=home] .camBanner .c-wonderlandBanner__heading.--washablecolormarkers { color: #525252 } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__heading.--washablecolormarkers { color: #000 } } [data-page=home] .camBanner .c-wonderlandBanner__subheading { color: #fff; font-size: 40px; letter-spacing: -.03em; line-height: 40px; position: relative } @media(min-width:1025px) { [data-page=home] .camBanner .c-wonderlandBanner__subheading.--washablecolormarkers { color: #525252 } } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__subheading.--washablecolormarkers.--washablecolormarkers { color: #525252; display: none } } [data-page=home] .camBanner .c-wonderlandBanner__btnGroup { display: flex; gap: 20px; margin-top: 20px } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__btnGroup { gap: 10px; margin-top: 15px } } [data-page=home] .camBanner .c-wonderlandBanner__startExploringButton { align-items: center; background: #fff; border-radius: 5px; display: inline-flex; justify-content: center; padding: 15px } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__startExploringButton { background-color: #000 } } [data-page=home] .camBanner .c-wonderlandBanner__startExploringButton p { color: #000; font-size: 15px; letter-spacing: .02em; line-height: 20px } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__startExploringButton p { color: #fff; font-size: 15px; line-height: 15px } } [data-page=home] .camBanner .c-wonderlandBanner__meetArtistsButton { align-items: center; border: 1px solid #fff; border-radius: 5px; display: inline-flex; justify-content: center; padding: 15px } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__meetArtistsButton { background-color: #fff; border-color: #000 } } [data-page=home] .camBanner .c-wonderlandBanner__meetArtistsButton p { color: #fff; font-size: 15px; letter-spacing: .02em; line-height: 20px } @media(max-width:1023px) { [data-page=home] .camBanner .c-wonderlandBanner__meetArtistsButton p { color: #000; font-size: 15px; line-height: 15px } } [data-page=home] .camBanner .c-cambanner { background-color: #f3f3f3; height: 70.3125vh; overflow: hidden; position: relative } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner { background-color: #fff; display: flex; flex-direction: column-reverse; height: auto } } [data-page=home] .camBanner .c-cambanner__img, [data-page=home] .camBanner .c-cambanner__imgWrapper { height: 100%; left: 0; object-fit: cover; object-position: center; position: absolute; top: 0; width: 100%; z-index: 0 } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner__img, [data-page=home] .camBanner .c-cambanner__imgWrapper { border-radius: 10px; height: calc(var(--viewportWidth)*400/320); height: 100% } [data-page=home] .camBanner .c-cambanner__imgs { height: calc(var(--viewportWidth)*400/320); height: calc(125vw - 100px); overflow: hidden } } @media(min-width:1024px) { [data-page=home] .camBanner .c-cambanner__imgs { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0 } } [data-page=home] .camBanner .c-cambanner__imgWrapper { will-change: opacity } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner__text { margin-top: 10px } } @media(min-width:1024px) { [data-page=home] .camBanner .c-cambanner__text { bottom: 40px; left: 40px; position: absolute; z-index: 1 } } [data-page=home] .camBanner .c-cambanner__heading { color: #fff; font-size: 60px; letter-spacing: -.03em; line-height: 60px; position: relative } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner__heading { color: #000; font-size: 35px; letter-spacing: -.03em; line-height: 37px } } [data-page=home] .camBanner .c-cambanner__btnGroup { display: flex; gap: 20px; margin-top: 20px } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner__btnGroup { gap: 10px; margin-top: 15px } } [data-page=home] .camBanner .c-cambanner__startExploringButton { align-items: center; background: #fff; border-radius: 5px; display: inline-flex; justify-content: center; padding: 15px } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner__startExploringButton { background-color: #000 } } [data-page=home] .camBanner .c-cambanner__startExploringButton p { color: #000; font-size: 15px; letter-spacing: .02em; line-height: 20px } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner__startExploringButton p { color: #fff; font-size: 15px; line-height: 15px } } [data-page=home] .camBanner .c-cambanner__meetArtistsButton { align-items: center; border: 1px solid #fff; border-radius: 5px; display: inline-flex; justify-content: center; padding: 15px } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner__meetArtistsButton { background-color: #fff; border-color: #000 } } [data-page=home] .camBanner .c-cambanner__meetArtistsButton p { color: #fff; font-size: 15px; letter-spacing: .02em; line-height: 20px } @media(max-width:1023px) { [data-page=home] .camBanner .c-cambanner__meetArtistsButton p { color: #000; font-size: 15px; line-height: 15px } } [data-page=home] .camBanner .c-slider { height: 100%; position: relative; width: 100% } [data-page=home] .camBanner .c-slider__slides { border-radius: 10px; left: 0; min-height: 590px; overflow: hidden; position: relative; right: 0; top: 0; width: 100% } @media only screen and (min-width:1600px) { [data-page=home] .camBanner .c-slider__slides { min-height: 630px } } @media only screen and (min-width:768px)and (max-width:1024px) { [data-page=home] .camBanner .c-slider__slides { min-height: 780px } } @media(max-width:1023px) { [data-page=home] .camBanner .c-slider__slides { overflow: visible } } [data-page=home] .camBanner .c-slider__slide>.c-artWorkBanner, [data-page=home] .camBanner .c-slider__slide>.c-wonderlandBanner, [data-page=home] .camBanner .c-slider__slide>.c-wonderlandBanner .c-wonderlandBanner__imgs { height: 100% } [data-page=home] .camBanner .c-slider__slide>.c-wonderlandBanner .c-wonderlandBanner__imgWrapper { border-radius: 10px; height: 100%; overflow: hidden; position: relative } [data-page=home] .camBanner .c-slider__slide>.c-wonderlandBanner .c-wonderlandBanner__imgWrapper .c-wonderlandBanner__img { height: 100% } @media(min-width:1025px) { [data-page=home] .camBanner .c-slider .-makeyourmarkTitle { color: #525252 } } [data-page=home] .camBanner .c-slider .-makeyourmark { object-position: center } @media only screen and (min-width:1400px) { [data-page=home] .camBanner .c-slider .-makeyourmark { object-position: center } } @media(max-width:1023px) { [data-page=home] .camBanner .c-slider .-makeyourmark { object-position: bottom center } } @media(max-width:766px) { [data-page=home] .camBanner .c-slider .-makeyourmark { object-position: center } } [data-page=home] .camBanner .c-slider__slide>.c-banner, [data-page=home] .camBanner .c-slider__slide>.c-banner .c-banner__imgs { height: 100% } [data-page=home] .camBanner .c-slider__slide>.c-banner .c-banner__imgWrapper { border-radius: 10px; height: 100%; overflow: hidden; position: relative } [data-page=home] .camBanner .c-slider__slide>.c-banner .c-banner__imgWrapper .c-banner__img { height: 100% } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing { height: 100%; margin-top: 0; width: 100% } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .-contained { margin-top: 0 } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__artworkSubmitted { color: #727272; font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-top: 10px; text-align: center } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__artworkSubmitState { gap: 9px; padding-bottom: 20px } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__artworkSubmitStateIcon { height: 25px; width: 25px } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__artworkSubmitState span { font-size: 20px; line-height: 25px } @media(max-width:1023px) { [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__artworkSubmitStateIcon { flex-shrink: 0; height: 18px; width: 18px } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__artworkSubmitState span { font-size: 14px; line-height: 20px } } @media only screen and (max-width:420px) { [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__artworkSubmitStateIcon { margin-top: 2px } } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-showcaseBanner, [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-showcaseBanner__inner { height: 100% } @media(max-width:1023px) { [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-showcaseBanner__details { margin-top: 100px } } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__buttonGroup { justify-content: center; margin-top: 20px } @media(max-width:1023px) { [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__detailsSub { margin-top: 120px } } [data-page=home] .camBanner .c-slider__slide>.c-artcontest__landing .c-artcontest__artworkSubmitState { align-items: center; display: flex; flex-direction: row; gap: 10px } [data-page=home] .camBanner .c-slider__slide { height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity .5s ease-in-out; width: 100%; z-index: 1 } [data-page=home] .camBanner .c-slider__slide.show { opacity: 1 } [data-page=home] .camBanner .c-slider__slide:not(.show) { z-index: -1 } [data-page=home] .camBanner .c-slider__button { align-items: center; cursor: pointer; display: flex; position: absolute; transform: translateY(-50%) } [data-page=home] .camBanner .c-slider__button.-nextButton { right: -47px; top: 50% } [data-page=home] .camBanner .c-slider__button.-prevButton { left: -47px; top: 50% } [data-page=home] .camBanner .c-slider__tabs { align-items: center; display: flex; gap: 20px; justify-content: center; margin-top: 20px } @media(max-width:1023px) { [data-page=home] .camBanner .c-slider__tabs { margin-top: 30px } } [data-page=home] .camBanner .c-slider__tab { background-color: transparent; border: 1px solid #333; border-radius: 50%; cursor: pointer; height: 10px; width: 10px } [data-page=home] .camBanner .c-slider__tab.active { background-color: #333 } @media(max-width:1023px) { [data-page=category] main { padding-top: 123px } [data-page=category] .c-categoryBanner { padding-bottom: 20px } [data-page=category] .c-categoryBanner .c-categoryBanner__rhs { margin-top: 20px } [data-page=category] .c-categoryBanner .c-categoryBanner__heading { letter-spacing: -.05em } } @media(min-width:1024px) { [data-page=category] .c-categoryBanner .c-categoryBanner__text { align-items: flex-end; padding-top: 40px } [data-page=category] .c-categoryBanner .-is-drawingMaterial, [data-page=category] .c-categoryBanner .c-categoryBanner__heading { font-size: 120px; left: -7px; top: 0 } [data-page=category] .c-categoryBanner .c-categoryBanner__rhs { padding-bottom: 11px } } [data-page=category] .c-featuredArticle, [data-page=category] .c-showcaseBanner { margin-top: 60px } @media(max-width:1023px) { [data-page=category] .c-featuredArticle, [data-page=category] .c-showcaseBanner { margin-top: 50px } [data-page=category] .c-worksBestWith .c-worksBestWith__inner { padding-top: 50px } } [data-page=category] .c-trending { margin-top: 60px } @media(max-width:1023px) { [data-page=category] .c-trending { margin-top: 50px; padding-bottom: 50px } } [data-page=category] .c-featuredArt { margin-top: 60px } @media(max-width:1023px) { [data-page=category] .c-featuredArt { margin-top: 50px } } [data-page=category] .c-subcategoryListing { margin-top: -1px; position: relative } [data-page=category] .c-quote { margin-top: 30px } [data-page=category] .-with-dropdowns { display: flex } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs:after { bottom: 0; display: block; height: 10px; margin: auto; right: 20px; top: 0; transform-origin: center; width: 15px } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened:after { transform: rotate(180deg) } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened:first-child .c-productDetail__dropdownOptionSelected { border-left: 1px solid #000; border-right: 1px solid transparent } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened:first-child .c-productDetail__dropdownOptions { background-color: #fff; right: -1px; width: calc(100% + 1px) } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened .c-productDetail__dropdownOptions { border-bottom: 1px solid #000 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened .c-productDetail__dropdownOptionSelected { background-color: #f3f3f3; border-left: 1px solid #000; border-right: 1px solid #000 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs:nth-child(n+2) .c-productDetail__dropdownOptionSelected { border-left: 1px solid #000 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptionSelected { font-size: 20px; line-height: 25px; padding-bottom: 20px; padding-right: 48px; padding-top: 20px; text-align: left } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptionSelected.-grayText { color: #888 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptionSelected__icon { margin-right: 20px } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOption { background-color: #fff; font-size: 15px; letter-spacing: .02em; line-height: 20px; min-height: 35px; overflow: hidden; padding: 20px 0; text-overflow: ellipsis; white-space: nowrap } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOption:first-child { padding-top: 0 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOption:nth-child(n+2) { border-top: 1px solid #c4c4c4 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOption:last-child { padding-bottom: 0 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptions { max-height: 460px; overflow-y: hidden } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptions:after { content: none } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptions .c-productDetail__dropdownOptionsContainer { margin: 20px; max-height: 420px; overflow-y: auto; padding-right: 20px } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptions .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar { width: 6px } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptions .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar-track { background: #fff } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptions .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar-thumb { background: #e6e8eb; border-radius: 10px } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptions .c-productDetail__dropdownOptionsContainer::-webkit-scrollbar-thumb:hover { background: #c4c4c4 } @media(max-width:1023px) { [data-page=category] .-with-dropdowns { flex-wrap: wrap } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs { width: 100% } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs:nth-child(n+2) .c-productDetail__dropdownOptionSelected { border-left: 1px solid transparent; border-top: 1px solid #000 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened .c-productDetail__dropdownOptionSelected { padding-left: 20px } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened:first-child .c-productDetail__dropdownOptionSelected { border-bottom: 1px solid #000; border-right: 1px solid #000 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened:first-child .c-productDetail__dropdownOptions { right: 0; width: 100% } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened:nth-child(n+2) .c-productDetail__dropdownOptionSelected { border-left: 1px solid #000; border-top: 1px solid #000 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownRhs.is-opened .c-productDetail__dropdownOptions { border-bottom: 1px solid #000 } [data-page=category] .-with-dropdowns .c-productDetail__dropdownOptionSelected { font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-left: 0; width: 100% } } [data-page=category] [data-filter-section], [data-page=category] [data-filtered] { display: block } [data-page=category] [data-filter-section].show, [data-page=category] [data-filtered].show { display: block !important } [data-page=category] [data-filter-section].show-no, [data-page=category] [data-filtered].show-no { display: none !important } [data-page=category] .c-trending { padding-bottom: 120px } @media(max-width:1023px) { [data-page=category] .c-trending { padding-bottom: 100px } } [data-page=productDetail] .c-forBestResults+.c-quote, [data-page=productDetail] .c-proTips+.c-quote, [data-page=productDetail] .c-worksBestWith+.c-quote, [data-page=productDetail] .c-youCanAlsoTry+.c-quote { margin-top: 30px } @media(max-width:1023px) { [data-page=productDetail] .c-youCanAlsoTry { padding-bottom: 50px } } [data-page=productDetail] .c-trending { margin-top: 50px; padding-bottom: 120px } @media(max-width:1023px) { [data-page=productDetail] .c-trending { padding-bottom: 100px } } [data-page=productDetail] .c-showcaseBanner { margin-top: 60px } @media(max-width:1023px) { [data-page=productDetail] .c-showcaseBanner { margin-top: 0 } } [data-page=productDetail] .c-tooltip__text { left: -150px } [data-page=productDetail] .c-tooltip__text:before { left: unset; right: 8px } @media(max-width:1023px) { [data-page=productDetail] .c-tooltip { left: unset; padding-left: 10px; padding-right: 10px; z-index: 16 !important } [data-page=productDetail] .c-tooltip.is-opened { z-index: 21 !important } [data-page=productDetail] .c-tooltip.is-opened .c-tooltip__svg_filled { left: unset } [data-page=productDetail] .c-tooltip.is-opened .c-tooltip__text { left: -140px } } [data-page=productDetail] .c-productDetail.-assorted .c-productDetail__shippingInfo+.c-productDetail__aboutProduct, [data-page=productDetail] .c-productDetail.-individual .c-productDetail__shippingInfo+.c-productDetail__aboutProduct { margin-top: 60px } [data-page=paintingListing] main { padding-top: 148px } @media(max-width:1023px) { [data-page=paintingListing] main { padding-top: 128px } } [data-page=paintingListing] .c-categoryBanner { align-items: flex-end; padding-bottom: 40px; padding-top: 0 } @media(min-width:1024px) { [data-page=paintingListing] .c-categoryBanner { display: flex } } [data-page=paintingListing] .c-categoryBanner[data-wrap] { flex-wrap: wrap } @media(min-width:1024px) { [data-page=paintingListing] .c-categoryBanner__text { padding-top: 0 } } [data-page=paintingListing] .c-categoryBanner .c-categoryBanner__heading { font-size: 90px; left: 0; top: 0 } @media(min-width:1024px) { [data-page=paintingListing] .c-categoryBanner .c-categoryBanner__rhs { padding-bottom: 7px; padding-top: 0 } } [data-page=paintingListing] .c-categoryBanner .c-categoryBanner__subheading { max-width: 238px } @media(max-width:1023px) { [data-page=paintingListing] .c-categoryBanner { padding-bottom: 20px } [data-page=paintingListing] .c-categoryBanner .c-categoryBanner__lhs .c-categoryBanner__heading { font-size: 50px } [data-page=paintingListing] .c-categoryBanner .c-categoryBanner__rhs { margin-top: 20px } } [data-page=paintingListing] .c-categoryBanner .c-listingColorsGroup__item[data-filter=all] { border: 0 } [data-page=paintingListing] .c-categoryBanner .c-listingColorsGroup__item[data-filter=all]:after { color: #fff; content: "All"; font-size: 20px; height: 20px; line-height: 20px } [data-page=paintingListing] .c-categoryBanner .c-listingColorsGroup__item[data-filter=all][data-active=true] { border: 2px solid } [data-page=paintingListing] .c-categoryBanner .c-listingColorsGroup__item[data-filter=all][data-active=true]:after { color: #fff; content: "All"; font-size: 20px; height: 20px; line-height: 20px } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__inner { padding-bottom: 60px } @media(max-width:1023px) { [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__inner { padding-bottom: 50px } } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__products { grid-gap: 30px; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 0; position: relative; width: 100% } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__products:after { display: none } @media(max-width:1023px) { [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__products { gap: 30px 20px; grid-template-columns: repeat(1, 1fr) } } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__product { margin: 0 } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__product.show { display: block; width: 100% } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__product.show-no { display: none } @media(max-width:1023px) { [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__product { flex-basis: calc(50% - 10px); width: 100% } } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__productNew { align-items: center; display: flex; flex-direction: row; left: 0; position: absolute; top: 0 } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__productNew__img { height: 16px; width: 16px } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__productNew__text { color: #000; font-size: 13px; font-style: normal; font-weight: 400; letter-spacing: .05em; line-height: 15px; margin-left: 5px } [data-page=paintingListing] .c-subcategoryListing .c-subcategoryListing__productMedium { color: #888; font-size: 13px; font-style: normal; font-weight: 400; letter-spacing: .02em; line-height: 20px; margin-top: 10px } @media(min-width:768px)and (max-width:1023px) { [data-page=paintingListing] .c-subcategoryListing#artistAcrylicColours .c-subcategoryListing__inner .anim-line.-top { margin-top: 80% } } [data-page=paintingListing] .c-productDetail__colorRange.-grid { margin-top: 20px } [data-page=paintingListing] .c-categoryBanner.-withRadio { padding-bottom: 20px } @media(max-width:767px) { [data-page=paintingListing] .c-radioInputWrapper { margin-top: 0 } [data-page=paintingListing] .c-radioInputWrapper:nth-child(n+3) { margin-top: 20px } } @media(max-width:1023px)and (min-width:768px) { [data-page=paintingListing] .c-productDetail__colorRange.-grid { display: flex; gap: 20px } } [data-page=paintingListing] .c-quote { margin-top: 30px } @media(max-width:1023px) { [data-page=paintingRange] main { padding-top: 123px } } [data-page=paintingRange] .c-categoryBanner { align-items: flex-end; padding-bottom: 40px; padding-top: 10px } [data-page=paintingRange] .c-categoryBanner[data-wrap] { flex-wrap: wrap } [data-page=paintingRange] .c-categoryBanner .c-categoryBanner__lhs .c-categoryBanner__heading { font-size: 90px; left: 0; top: 0 } [data-page=paintingRange] .c-categoryBanner .c-categoryBanner__rhs .c-categoryBanner__subheading { font-size: 15px; line-height: 20px } [data-page=paintingRange] .c-categoryBanner .c-categoryBanner__rhs .c-categoryBanner__subheading h1, [data-page=paintingRange] .c-categoryBanner .c-categoryBanner__rhs .c-categoryBanner__subheading h2 { display: inline; padding-right: 4px } @media(max-width:1023px) { [data-page=paintingRange] .c-categoryBanner { padding-bottom: 20px; padding-top: 0 } [data-page=paintingRange] .c-categoryBanner .c-categoryBanner__lhs .c-categoryBanner__heading { font-size: 50px } [data-page=paintingRange] .c-categoryBanner .c-categoryBanner__rhs { margin-top: 20px } [data-page=paintingRange] .c-categoryBanner .c-categoryBanner__rhs .c-categoryBanner__subheading { max-width: 100% } } @media(max-width:767px) { [data-page=paintingRange] .c-categoryBanner .c-categoryBanner__heading br { display: none !important } } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner { padding-bottom: 60px } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products { margin-top: 0; position: relative } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products[data-individual] { grid-gap: 30px; display: grid; grid-template-columns: repeat(4, 1fr) } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products[data-individual] .c-subcategoryListing__product { margin: 0 } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products[data-individual] .c-subcategoryListing__product.show { display: block } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products[data-individual] .c-subcategoryListing__product.show-no { display: none } @media(max-width:1023px) { [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products[data-individual] { grid-gap: 20px; grid-template-columns: repeat(2, 1fr) } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products[data-individual] .c-subcategoryListing__product { flex-basis: 100%; width: 100% } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products[data-individual] .c-subcategoryListing__product:nth-child(2n), [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products[data-individual] .c-subcategoryListing__product:nth-child(n+3) { margin: 0 } } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products .c-subcategoryListing__productNew { align-items: center; display: flex; flex-direction: row; left: 0; position: absolute; top: 0 } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products .c-subcategoryListing__productNew__img { height: 16px; width: 16px } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products .c-subcategoryListing__productNew__text { color: #000; font-size: 13px; font-style: normal; font-weight: 400; letter-spacing: .05em; line-height: 15px; margin-left: 5px } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products .c-subcategoryListing__productImageWrapper { padding-top: 122.5454545455% } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products .c-subcategoryListing__productMedium { color: #888; font-size: 13px; font-style: normal; font-weight: 400; letter-spacing: .02em; line-height: 20px; margin-top: 10px } @media(min-width:768px)and (max-width:1023px) { [data-page=paintingRange] .c-subcategoryListing#artistAcrylicColours .c-subcategoryListing__inner .anim-line.-top { margin-top: 80% } } @media(max-width:1023px) { [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner { padding-bottom: 30px } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner:last-child { padding-bottom: 0 } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .anim-line.-top { margin-top: 100% } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products { flex-wrap: wrap; margin-top: 0; width: 100% } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products .c-subcategoryListing__product { flex-basis: calc(50% - 10px); margin-bottom: 30px; margin-left: 0 } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products .c-subcategoryListing__product:nth-child(2n) { margin-left: 20px } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products .c-subcategoryListing__product:nth-child(n+3) { margin-top: 30px } [data-page=paintingRange] .c-subcategoryListing .c-subcategoryListing__inner .c-subcategoryListing__products:after { padding: 0 } } [data-page=paintingRange] .c-featuredArt { margin-top: 60px } [data-page=paintingRange] .c-trending { margin-bottom: 50px; margin-top: 60px; padding-bottom: 110px } @media(max-width:1023px) { [data-page=paintingRange] .c-trending { margin-bottom: 40px } [data-page=paintingRange] .c-trending__heading { max-width: 80% } } [data-page=paintingRange] .c-invester { margin-top: 28px } [data-page=paintingRange] .c-featuredArt__inner { padding-bottom: 60px } @media(max-width:1023px) { [data-page=paintingRange] .c-featuredArt__inner { padding-bottom: 0 } [data-page=paintingRange] .c-quote { margin-top: 44px } html[data-page=paintingKits] main { padding-top: 123px } } html[data-page=paintingKits] .paintingKits__banner { padding-bottom: 60px; padding-top: 0; position: relative } @media(max-width:1023px) { html[data-page=paintingKits] .paintingKits__banner { padding-bottom: 20px } } html[data-page=paintingKits] .paintingKits__bannerImageWrapper { height: 70.3125vh; position: relative; width: 100% } @media(max-width:1023px) { html[data-page=paintingKits] .paintingKits__bannerImageWrapper { height: calc(125vw - 50px) } html[data-page=paintingKits] .paintingKits__bannerText { padding-top: 20px } } @media(min-width:1024px) { html[data-page=paintingKits] .paintingKits__bannerText { align-items: flex-end; display: flex; justify-content: space-between; padding-top: 30px } html[data-page=paintingKits] .paintingKits__bannerHeading { flex: 1; font-size: 90px; letter-spacing: -.03em; line-height: 1 } } @media(max-width:1023px) { html[data-page=paintingKits] .paintingKits__bannerHeading { font-size: 50px; line-height: 1 } } @media(min-width:1024px) { html[data-page=paintingKits] .paintingKits__bannerSubheading { margin-left: 30px; width: var(--gridCol3) } } @media(max-width:1023px) { html[data-page=paintingKits] .paintingKits__bannerSubheading { margin-top: 20px } } html[data-page=paintingKits] .paintingKits__secondaryMenu { position: sticky !important; position: -webkit-sticky !important; top: 0; z-index: 24 } html[data-page=paintingKits] .paintingKits__secondaryMenuInner { background-color: #fff; display: flex; margin-left: calc(0px - var(--viewportSidePadding)); padding: 20px var(--viewportSidePadding); width: var(--viewportWidth) } html[data-page=paintingKits] .paintingKits__secondaryMenuItem { color: #888; cursor: pointer; position: relative } html[data-page=paintingKits] .paintingKits__secondaryMenuItem.is-active, html[data-page=paintingKits] .paintingKits__secondaryMenuItem:hover { color: #000 } html[data-page=paintingKits] .paintingKits__secondaryMenuItem.is-active:after, html[data-page=paintingKits] .paintingKits__secondaryMenuItem:hover:after { background-color: #000; bottom: -20px; content: ""; height: 3px; left: 0; opacity: 1; position: absolute; -webkit-transition: .3s cubic-bezier(.77, 0, .175, 1); -o-transition: .3s cubic-bezier(.77, 0, .175, 1); transition: .3s cubic-bezier(.77, 0, .175, 1); width: 100% } @media(max-width:1023px) { html[data-page=paintingKits] .paintingKits__secondaryMenuItem { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { html[data-page=paintingKits] .paintingKits__secondaryMenuItem { font-size: 20px; line-height: 25px } } html[data-page=paintingKits] .paintingKits__secondaryMenuItem:not(:first-of-type) { margin-left: 40px } @media(max-width:1023px) { html[data-page=paintingKits] .paintingKits__secondaryMenuItem:not(:first-of-type) { margin-left: 30px } } html[data-page=paintingKits] .c-fluidArtKits { padding-top: 40px } @media(max-width:1023px) { html[data-page=paintingKits] .c-fluidArtKits { padding-top: 30px } } @media(min-width:1024px) { html[data-page=paintingKits] .c-fluidArtKits .c-fluidArtKit__itemImage { height: auto; width: 100% } } html[data-page=paintingKits] .c-kit { padding-top: 50px } @media(max-width:1023px) { html[data-page=paintingKits] .c-kit .c-kit__imageWrapper { top: 150px } html[data-page=paintingKits] .c-kit.-varient2 .c-kit__imageWrapper { top: unset } html[data-page=paintingKits] .c-kit.-varient2#camlin-colouring-kit .c-kit__inner, html[data-page=paintingKits] .c-kit.-varient2#colouring .c-kit__inner { min-height: 647px } html[data-page=paintingKits] .c-kit.-varient2#camlin-colouring-kit .c-kit__itemsInside, html[data-page=paintingKits] .c-kit.-varient2#colouring .c-kit__itemsInside { top: 165px } } html[data-page=paintingKits] .c-trending { margin-top: 60px; padding-top: 40px; position: relative } @media(max-width:1023px) { html[data-page=paintingKits] .c-trending { margin-top: 50px; padding-top: 50px } } html[data-page=techniques] .scroll-lock { overflow: hidden } @media(max-width:1023px) { html[data-page=techniques] main { padding-top: 123px } } html[data-page=techniques] .techniques__banner { padding-bottom: 60px; padding-top: 0; position: relative } @media(max-width:1023px) { html[data-page=techniques] .techniques__banner { padding-bottom: 20px } } @media(min-width:1024px) { html[data-page=techniques] .techniques__banner { align-items: flex-end; display: flex; justify-content: space-between } html[data-page=techniques] .techniques__bannerHeading { flex: 1; font-size: 90px; letter-spacing: -.03em; line-height: 1 } } @media(max-width:1023px) { html[data-page=techniques] .techniques__bannerHeading { font-size: 50px; line-height: 1 } } @media(min-width:1024px) { html[data-page=techniques] .techniques__bannerSubheading { margin-left: 30px; width: var(--gridCol3) } } @media(max-width:1023px) { html[data-page=techniques] .techniques__bannerSubheading { margin-top: 20px } } html[data-page=techniques] .techniques__listingWrapper { position: relative } @media(min-width:1024px) { html[data-page=techniques] .techniques__listingWrapper { padding-bottom: 60px } } html[data-page=techniques] .techniques__listing { display: grid; gap: 40px 30px; grid-template-columns: repeat(4, 1fr) } @media(max-width:1023px) { html[data-page=techniques] .techniques__listing { gap: 20px; grid-template-columns: repeat(2, 1fr); padding-top: 30px } } @media(min-width:1024px) { html[data-page=techniques] .techniques__listing { padding-top: 40px } } html[data-page=techniques] .techniques__technique { cursor: pointer; position: relative; transition: .6s cubic-bezier(.445, .05, .55, .95) } html[data-page=techniques] .techniques__technique.show { display: block; opacity: 1; visibility: visible } html[data-page=techniques] .techniques__technique.show-no { display: none; opacity: 0; visibility: hidden } html[data-page=techniques] .techniques__technique.-span2 { grid-column: span 2; grid-row: span 2 } html[data-page=techniques] .techniques__technique.-span2 .techniques__techniqueInner { padding-top: 125% } @media(min-width:1024px) { html[data-page=techniques] .techniques__technique { width: 100% } html[data-page=techniques] .techniques__technique:hover .techniques__techniqueHoverContainer { opacity: 1; visibility: visible } } html[data-page=techniques] .techniques__techniqueInner { padding-top: 124.6%; position: relative } html[data-page=techniques] .techniques__techniqueImageContainer { height: 100%; left: 0; position: absolute; top: 0; width: 100% } html[data-page=techniques] .techniques__technique .live-tag { background-color: #fff; border: 1px solid #000; font-family: NeueMontreal-Regular; font-size: 13px; line-height: 1; padding: 10px; position: absolute; right: 20px; top: 20px } html[data-page=techniques] .techniques__techniqueHoverContainer { background-color: rgba(0, 0, 0, .5); height: 100%; left: 0; opacity: 0; padding: 30px; position: absolute; top: 0; transition: opacity .6s cubic-bezier(.445, .05, .55, .95); visibility: hidden; width: 100% } html[data-page=techniques] .techniques__techniqueHoverTitle { color: #fff; font-family: NeueMontreal-Regular; font-size: 20px; line-height: 25px; margin-right: auto; max-width: 157px } html[data-page=techniques] .techniques__techniqueActivity { align-items: center; display: flex; margin-top: 20px } html[data-page=techniques] .techniques__techniqueActivity_icon { margin-right: 6px } html[data-page=techniques] .techniques__techniqueActivity_para { color: #c4c4c4; font-family: NeueMontreal-Regular; font-size: 13px; line-height: 1 } html[data-page=techniques] .techniques__technique .-videoContainer:after { background-image: none } @media(max-width:1023px) { html[data-page=techniques] .techniques__technique .live-tag { font-size: 11px; padding: 8px; right: 15px; top: 15px } html[data-page=techniques] .techniques__techniqueHoverContainer { background-color: transparent; height: auto; left: unset; opacity: 1; padding: 10px 0 0; position: relative; top: unset; visibility: visible; width: 100% } html[data-page=techniques] .techniques__techniqueHoverTitle { color: #000; font-size: 13px; line-height: 13px; max-width: 100% } html[data-page=techniques] .techniques__techniqueActivity { margin-top: 10px } html[data-page=techniques] .techniques__techniqueActivity_para { color: #888 } } html[data-page=techniques] .diytut_popup { align-items: center; background-color: rgba(0, 0, 0, .6); display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: fixed; top: 0; transition: opacity .6s cubic-bezier(.445, .05, .55, .95); visibility: hidden; width: 100%; z-index: 9999 } html[data-page=techniques] .diytut_popup.show { opacity: 1; visibility: visible } html[data-page=techniques] .diytut_popup_content { align-items: center; background-color: #fff; display: flex; flex-direction: row; gap: 20px 30px; max-width: 528px; padding: 30px; position: relative; width: 80% } html[data-page=techniques] .diytut_popup__innerContent, html[data-page=techniques] .diytut_popup__leftImage { flex: 1 } html[data-page=techniques] .diytut_popup__itemImageContainer { padding-top: 125% } html[data-page=techniques] .diytut_popup__itemText { color: #000; font-family: NeueMontreal-Regular; font-size: 20px; line-height: 25px } html[data-page=techniques] .diytut_popup__itemPara { color: #888; font-family: NeueMontreal-Regular; font-size: 15px; font-style: normal; font-weight: 400; letter-spacing: .02em; line-height: 20px; margin-top: 10px } html[data-page=techniques] .diytut_popup .c-button { margin-top: 30px } html[data-page=techniques] .diytut_popup .close_btn { position: absolute; right: 12.5px; top: 12.5px } @media(max-width:1023px) { html[data-page=techniques] .diytut_popup_content { flex-direction: column } html[data-page=techniques] .diytut_popup_content .diytut_popup__leftImage { width: 100% } html[data-page=techniques] .diytut_popup__itemText { font-size: 15px; line-height: 20px } html[data-page=techniques] .diytut_popup .close_btn { right: 12px; top: 10px } } html[data-page=techniques] .protip_popup { align-items: center; background-color: rgba(0, 0, 0, .6); display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: fixed; top: 0; transition: opacity .6s cubic-bezier(.445, .05, .55, .95); visibility: hidden; width: 100%; z-index: 9999 } html[data-page=techniques] .protip_popup.show { opacity: 1; visibility: visible } @media(max-width:1023px) { html[data-page=techniques] .protip_popup.show { overflow-y: auto } } html[data-page=techniques] .protip_popup .c-proTips__item { background-color: #fff; border: 20px solid #fff; padding: 0; width: 739px } html[data-page=techniques] .protip_popup .c-proTips__itemPara { color: #888; font-family: NeueMontreal-Regular; font-size: 15px; font-style: normal; font-weight: 400; letter-spacing: .02em; line-height: 20px; margin-top: 20px } html[data-page=techniques] .protip_popup .close_btn { position: absolute; right: -6px; top: -8px; z-index: 1 } html[data-page=techniques] .protip_popup__row { display: flex; flex-wrap: wrap } html[data-page=techniques] .protip_popup__left { width: 320px } html[data-page=techniques] .protip_popup__right { padding: 30px; position: relative; width: calc(100% - 320px) } html[data-page=techniques] .protip_popup__title { font-size: 30px; line-height: 1; margin-bottom: 20px } html[data-page=techniques] .protip_popup__para { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } html[data-page=techniques] .protip_popup__para:nth-of-type(n+2) { margin-top: 15px } html[data-page=techniques] .protip_popup .c-proTips__itemImageContainer { padding-top: 125% } @media(max-width:1023px) { html[data-page=techniques] .protip_popup { align-items: flex-start; background-color: #fff } html[data-page=techniques] .protip_popup .c-proTips__item { border: 0; max-width: 425px; width: calc(100% - 40px) } html[data-page=techniques] .protip_popup .close_btn { position: fixed; right: -15px; right: 10px; top: -17px; top: 10px } html[data-page=techniques] .protip_popup .close_btn img { height: 15px; width: 15px } html[data-page=techniques] .protip_popup .protip_popup__row { margin: 40px auto; width: 90% } html[data-page=techniques] .protip_popup .protip_popup__left { width: 100% } html[data-page=techniques] .protip_popup .protip_popup__right { height: auto; margin-top: 15px; overflow-y: auto; padding: 0; width: 100% } html[data-page=techniques] .protip_popup .protip_popup__right::-webkit-scrollbar { height: 50%; width: 3px } html[data-page=techniques] .protip_popup .protip_popup__right::-webkit-scrollbar-track { background: #fff } html[data-page=techniques] .protip_popup .protip_popup__right::-webkit-scrollbar-thumb { background: #e6e8eb; border-radius: 10px } html[data-page=techniques] .protip_popup .protip_popup__right::-webkit-scrollbar-thumb:hover { background: #c4c4c4 } html[data-page=techniques] .protip_popup .protip_popup__title { margin-bottom: 14px } } html[data-page=techniquesGeneric] main { padding-top: 143px } @media(max-width:1023px) { html[data-page=techniquesGeneric] main { padding-top: 123px } } html[data-page=techniquesGeneric] .-mw-100 { max-width: 100% } html[data-page=techniquesGeneric] .techniquesGeneric_banner { margin-left: auto; margin-right: auto; max-width: 800px; width: 100% } html[data-page=techniquesGeneric] .techniquesGeneric_banner_container { padding-bottom: 40px; position: relative } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_banner_container { padding-bottom: 20px } } html[data-page=techniquesGeneric] .techniquesGeneric_banner .banner_title { font-size: 70px; line-height: 1; max-width: 740px; position: relative } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_banner .banner_title { font-size: 40px; line-height: 1 } } html[data-page=techniquesGeneric] .techniquesGeneric_banner .banner_category { display: inline-block; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 20px } html[data-page=techniquesGeneric] .techniquesGeneric_banner .banner_category:after { background-color: #000; content: ""; display: block; height: 1px; margin-top: 2px; width: 100% } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .details__items { align-items: center; display: flex; padding-top: 15px; position: relative } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .details__items { padding-top: 20px } } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .detail__item__date { align-items: center; display: inline-flex } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .detail__item__date__icon { height: 20px; width: 20px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .detail__item__date__text { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-left: 10px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .detail__item__comments { margin-left: 30px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .detail__item__comments .c-artworkPreview__commentsCount { font-size: 15px; letter-spacing: .02em; line-height: 20px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .detail__item__share { cursor: pointer; margin-left: auto } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .detail__item__share:hover .detail__item__share__icon { animation-duration: .6s; animation-name: scaleAnim; animation-timing-function: linear } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup { background-color: #fff; border: 1px solid #c4c4c4; opacity: 0; pointer-events: none; position: absolute; right: 0; top: calc(100% + 8px); transform: translateY(20px); transition: opacity .2s cubic-bezier(.39, .575, .565, 1), transform .4s cubic-bezier(.39, .575, .565, 1); width: 231px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup.show { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 9 } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__heading { background-color: #f3f3f3; border-bottom: 1px solid #c4c4c4; color: #000; padding: 20px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLinks { display: flex; flex-flow: row wrap; padding: 20px; width: 100% } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLinks>:nth-child(n+4) { margin-top: 20px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLinks>:not(:nth-child(3n+1)) { margin-left: 15px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLink { align-items: center; display: flex; flex-direction: column; position: relative; width: 53px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLink.is-active .sharePopup__socialMediaIconCircle, html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLink:hover .sharePopup__socialMediaIconCircle { opacity: .23 } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLink.is-active .sharePopup__socialMediaLinkText, html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLink:hover .sharePopup__socialMediaLinkText { opacity: .47 } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLinkIcon { height: 30px; width: 30px } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaIconCircle { fill: #000; opacity: 1; transition: opacity .2s ease; will-change: opacity } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__socialMediaLinkText { color: #000; font-size: 11px; letter-spacing: .05em; line-height: 15px; margin-top: 5px; opacity: 1; transition: opacity .2s ease; will-change: opacity } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__linkCopiedMessage { align-items: center; background-color: #000; border-radius: 5px; color: #fff; display: flex; left: 50%; opacity: 0; padding: 10px 10px 12px 12px; pointer-events: none; position: absolute; top: calc(100% + 7px); transform: translateX(-50%) translateY(10px); transition: opacity .2s cubic-bezier(.39, .575, .565, 1), transform .4s cubic-bezier(.39, .575, .565, 1); white-space: nowrap } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__linkCopiedMessage.show { opacity: 1; transform: translateX(-50%) translateY(0) } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__linkCopiedMessageArrow { height: 10px; left: calc(50% - 5px); position: absolute; top: -5px; width: 10px; z-index: 0 } html[data-page=techniquesGeneric] .techniquesGeneric_banner_detailsContainer .sharePopup__linkCopiedMessageTick { margin-right: 5px } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer { display: flex; flex-wrap: wrap; gap: 30px; height: auto; margin: 20px auto; max-width: 800px; width: 100% } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer { -ms-overflow-style: none; flex-wrap: nowrap; gap: 20px; justify-content: flex-start; margin-top: 20px; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; width: calc(100% + 20px) } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer::-webkit-scrollbar { display: none } } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer.-banner { margin-top: 40px } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer.-banner .techniquesGeneric_figure__caption { text-align: left } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer.-banner { margin-bottom: 30px; margin-top: 30px; width: 100% } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer.-banner .techniquesGeneric_figure, html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer.-banner .techniquesGeneric_figure .techniquesGeneric_figure__picture img { width: 100% } } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure { height: auto; width: auto } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure { scroll-snap-align: start; width: calc(100% - 20px) } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure.-moreThanOne { flex-shrink: 0; width: calc(100% - 80px) } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure.-moreThanOne:last-child { margin-right: 20px } } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure__picture { display: flex; height: auto; justify-content: center; width: 100% } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure__picture { justify-content: flex-start; width: 100% } } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure__image { height: auto; max-width: 100%; width: auto } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure__image { width: 100% } } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure__caption { color: #a8a8a8; display: block; font-size: 13px; letter-spacing: .03em; line-height: 15px; margin-top: 5px; text-align: left } html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure__caption a { color: #888 } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_figureContainer .techniquesGeneric_figure__caption { text-align: left } } html[data-page=techniquesGeneric] .techniquesGeneric_para { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 30px; margin-left: auto; margin-right: auto; max-width: 800px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_para { margin-bottom: 20px } } html[data-page=techniquesGeneric] .techniquesGeneric_h3 { color: #000; font-size: 20px; line-height: 25px; margin-bottom: 10px; margin-left: auto; margin-right: auto; max-width: 800px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_h3 { font-size: 15px; letter-spacing: .02em; line-height: 20px } } html[data-page=techniquesGeneric] .techniquesGeneric_h4 { color: #000; font-size: 20px; line-height: 25px; margin-bottom: 10px; margin-left: auto; margin-right: auto; max-width: 800px; padding-top: 30px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_h4 { font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-top: 0 } } html[data-page=techniquesGeneric] .techniquesGeneric_h5 { color: #000; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-left: auto; margin-right: auto; max-width: 800px; width: 100% } html[data-page=techniquesGeneric] .techniquesGeneric_h2 { font-size: 30px; line-height: 1; margin-bottom: 10px; margin-left: auto; margin-right: auto; max-width: 800px; padding-top: 30px; text-align: left } html[data-page=techniquesGeneric] .c-subcategoryListing { margin-left: auto; margin-right: auto; max-width: 800px; width: 100% } html[data-page=techniquesGeneric] .c-subcategoryListing .c-subcategoryListing__product>* { pointer-events: inherit } html[data-page=techniquesGeneric] .c-subcategoryListing .c-subcategoryListing__inner { padding-bottom: 30px; padding-top: 20px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .c-subcategoryListing .c-subcategoryListing__inner { padding-bottom: 20px; padding-top: 10px } } html[data-page=techniquesGeneric] .c-subcategoryListing .c-subcategoryListing__products { margin-top: 0 } html[data-page=techniquesGeneric] .c-subcategoryListing .techniquesGeneric_figureContainer { margin-bottom: 0; margin-top: 0; width: auto } html[data-page=techniquesGeneric] .c-subcategoryListing .techniquesGeneric_figureContainer:nth-child(n+2) { margin-left: 30px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .c-subcategoryListing .techniquesGeneric_figureContainer:nth-child(n+2) { margin-left: 20px } } html[data-page=techniquesGeneric] .c-subcategoryListing .techniquesGeneric_figureContainer .techniquesGeneric_figure__image { max-width: 380px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .c-subcategoryListing .techniquesGeneric_figureContainer .techniquesGeneric_figure { width: 100% } } html[data-page=techniquesGeneric] .c-subcategoryListing .c-subcategoryListing__navButton { top: 42% } @media(max-width:1023px) { html[data-page=techniquesGeneric] .c-subcategoryListing .techniquesGeneric_figureContainer { width: 80% } html[data-page=techniquesGeneric] .c-subcategoryListing .techniquesGeneric_figureContainer .techniquesGeneric_figure__image { width: 100% } } html[data-page=techniquesGeneric] .techniquesGeneric_bulletTitle { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; max-width: 800px; padding-left: 17px; padding-top: 20px; position: relative } html[data-page=techniquesGeneric] .techniquesGeneric_bulletTitle:before { background-color: #000; content: ""; display: inline-block; height: 6px; left: 3px; position: absolute; top: 27px; width: 6px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_bulletTitle { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 10px; padding-top: 0 } html[data-page=techniquesGeneric] .techniquesGeneric_bulletTitle:before { top: 7px } } html[data-page=techniquesGeneric] .techniquesGeneric_bullets { position: relative } html[data-page=techniquesGeneric] .techniquesGeneric_bulletText { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-left: auto; margin-right: auto; max-width: 800px; padding-left: 17px; position: relative } html[data-page=techniquesGeneric] .techniquesGeneric_bulletText:nth-child(n+2) { margin-top: 15px } html[data-page=techniquesGeneric] .techniquesGeneric_bulletText:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 4px; left: 3px; position: absolute; top: 8px; width: 4px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_bulletText { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } html[data-page=techniquesGeneric] .techniquesGeneric_bulletText:nth-child(n+2) { margin-top: 15px } html[data-page=techniquesGeneric] .techniquesGeneric_bulletText:before { top: 4px } html[data-page=techniquesGeneric] .techniquesGeneric_bulletText:last-child { margin-bottom: 20px } } html[data-page=techniquesGeneric] .techniquesGeneric_tableText { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-left: auto; margin-right: auto; max-width: 800px; position: relative } html[data-page=techniquesGeneric] .techniquesGeneric_tableText:nth-child(n+2) { margin-top: 15px } html[data-page=techniquesGeneric] .techniquesGeneric_table_container { margin-left: auto; margin-right: auto; max-width: 800px; overflow: hidden; overflow-x: auto; position: relative; width: 100% } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_table_container { -ms-overflow-style: none; scrollbar-width: none; width: calc(100% + 20px) } html[data-page=techniquesGeneric] .techniquesGeneric_table_container::-webkit-scrollbar { display: none } } html[data-page=techniquesGeneric] .techniquesGeneric_table { border-collapse: collapse; scroll-snap-align: start; width: 100% } html[data-page=techniquesGeneric] .techniquesGeneric_table_heading { border: 1px solid #c4c4c4; padding: 20px; text-align: left } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_table_heading { min-width: 250px; padding: 15px } } html[data-page=techniquesGeneric] .techniquesGeneric_table_data { border: 1px solid #c4c4c4; padding: 20px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniquesGeneric_table_data { min-width: 250px; padding: 15px } html[data-page=techniquesGeneric] .techniquesGeneric_table { margin-right: 20px } html[data-page=techniquesGeneric] .techniquesGeneric_table .techniquesGeneric_bulletText { margin-bottom: 0 } } html[data-page=techniquesGeneric] .techniques__featured { margin-left: auto; margin-right: auto; max-width: 800px; padding-top: 50px; width: 100% } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__inner { padding-bottom: 60px; padding-top: 50px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__inner { padding-bottom: 50px } } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list { flex-wrap: nowrap; overflow: hidden } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list { overflow-x: scroll; overflow-y: hidden } } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list .c-productsUsed__item { margin-left: 0; margin-top: 0; width: calc(25% - 30px) } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list .c-productsUsed__item:nth-child(n+2) { margin-left: 30px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list .c-productsUsed__item { width: calc(70% - 30px) } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list .c-productsUsed__item:nth-child(n+2) { margin-left: 20px } } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list.-carousel { overflow: hidden; scroll-snap-type: x mandatory; width: 100% } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list.-carousel .c-productsUsed__item { flex-shrink: 0; scroll-snap-align: start } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list.-carousel { overflow-x: auto; width: calc(100% + 20px) } } @media(min-width:1024px) { html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__list.-carousel+.c-productsUsed__nav { display: block } } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__nav { display: none; pointer-events: none } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__nav { display: none } } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: calc(50% - 28px) } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__navButton.is-disabled { opacity: 0; pointer-events: none } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__navButtonArrow { height: 12px; width: auto } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__navButton.-previous { left: -55px; transform: rotate(180deg) } html[data-page=techniquesGeneric] .techniques__featured .c-productsUsed__navButton.-next { right: -55px } html[data-page=techniquesGeneric] .techniques__listingWrapper { margin-left: auto; margin-right: auto; max-width: 800px; position: relative; width: 100% } @media(min-width:1024px) { html[data-page=techniquesGeneric] .techniques__listingWrapper { padding-bottom: 60px; padding-top: 60px } } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__listingWrapper { padding-bottom: 50px; padding-top: 50px } } html[data-page=techniquesGeneric] .techniques__listingWrapper__heading { font-size: 30px; line-height: 1 } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__listingWrapper__heading { font-size: 20px; line-height: 25px } } html[data-page=techniquesGeneric] .techniques__listing { display: flex; flex-wrap: nowrap } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__listing { -ms-overflow-style: none; overflow-x: auto; overflow-y: hidden; padding-top: 20px; scrollbar-width: none; width: calc(100% + 20px) } html[data-page=techniquesGeneric] .techniques__listing::-webkit-scrollbar { display: none } html[data-page=techniquesGeneric] .techniques__listing:after { content: ""; padding-left: 20px } } @media(min-width:1024px) { html[data-page=techniquesGeneric] .techniques__listing { padding-top: 30px } } html[data-page=techniquesGeneric] .techniques__technique { cursor: pointer; position: relative; transition: .6s cubic-bezier(.445, .05, .55, .95) } @media(min-width:1024px) { html[data-page=techniquesGeneric] .techniques__technique { max-width: 33.3333333333%; width: 100% } html[data-page=techniquesGeneric] .techniques__technique:hover .techniques__techniqueHoverContainer { opacity: 1; visibility: visible } html[data-page=techniquesGeneric] .techniques__technique:nth-child(n+2) { margin-left: 30px } } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__technique { flex-shrink: 0; width: calc(70% - 20px) } html[data-page=techniquesGeneric] .techniques__technique:nth-child(n+2) { margin-left: 20px } } html[data-page=techniquesGeneric] .techniques__techniqueInner { padding-top: 124.6%; position: relative } html[data-page=techniquesGeneric] .techniques__techniqueImageContainer { height: 100%; left: 0; position: absolute; top: 0; width: 100% } html[data-page=techniquesGeneric] .techniques__technique .live-tag { background-color: #fff; border: 1px solid #000; font-family: NeueMontreal-Regular; font-size: 13px; line-height: 1; padding: 10px; position: absolute; right: 20px; top: 20px } html[data-page=techniquesGeneric] .techniques__techniqueHoverContainer { background-color: rgba(0, 0, 0, .5); height: 100%; left: 0; opacity: 0; padding: 30px; position: absolute; top: 0; transition: opacity .6s cubic-bezier(.445, .05, .55, .95); visibility: hidden; width: 100% } html[data-page=techniquesGeneric] .techniques__techniqueHoverTitle { color: #fff; font-family: NeueMontreal-Regular; font-size: 20px; line-height: 25px; margin-right: auto; max-width: 157px } html[data-page=techniquesGeneric] .techniques__techniqueActivity { align-items: center; display: flex; margin-top: 20px } html[data-page=techniquesGeneric] .techniques__techniqueActivity_icon { margin-right: 6px } html[data-page=techniquesGeneric] .techniques__techniqueActivity_para { color: #c4c4c4; font-family: NeueMontreal-Regular; font-size: 13px; line-height: 1 } html[data-page=techniquesGeneric] .techniques__technique .-videoContainer:after { background-image: none } @media(max-width:1023px) { html[data-page=techniquesGeneric] .techniques__technique .live-tag { font-size: 11px; padding: 8px; right: 15px; top: 15px } html[data-page=techniquesGeneric] .techniques__techniqueHoverContainer { background-color: transparent; height: auto; left: unset; opacity: 1; padding: 10px 0 0; position: relative; top: unset; visibility: visible; width: 100% } html[data-page=techniquesGeneric] .techniques__techniqueHoverTitle { color: #000; font-size: 13px; line-height: 13px; max-width: 100% } html[data-page=techniquesGeneric] .techniques__techniqueActivity { margin-top: 10px } html[data-page=techniquesGeneric] .techniques__techniqueActivity_para { color: #727272 } } html[data-page=techniquesGeneric] .c-commentSection { margin-left: auto; margin-right: auto; max-width: 800px; padding-top: 60px; width: 100% } @media(max-width:1023px) { html[data-page=techniquesGeneric] .c-commentSection { padding-bottom: 54px; padding-top: 50px } } html[data-page=techniquesGeneric] .c-quote { margin-top: 62px } @media(max-width:1023px) { html[data-page=techniquesGeneric] .c-quote { margin-top: 52px } } .deleteArtworkConfirmation__container { color: #000 } .deleteArtworkConfirmation__container.show { display: flex } .deleteArtworkConfirmation__wrapper { animation-duration: .8s; animation-fill-mode: forwards; animation-name: fadePopupIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0; position: relative; will-change: transform, opacity } @media(max-width:1023px) { .deleteArtworkConfirmation__wrapper { width: 100% } } .deleteArtworkConfirmation__form { background-color: #fff; border-radius: 5px; min-width: 364px; padding: 30px; position: relative } @media(max-width:1023px) { .deleteArtworkConfirmation__form { min-width: unset; padding: 30px 20px; width: 100% } } .deleteArtworkConfirmation__form.-verifyEmail { padding: 30px } .deleteArtworkConfirmation__subheading { color: #727272; margin-top: 10px } .deleteArtworkConfirmation__footer { align-items: center; display: flex; justify-content: center; margin-top: 30px } .deleteArtworkConfirmation__buttonGroup { align-items: center; display: flex; justify-content: flex-end; width: 100% } .deleteArtworkConfirmation__buttonGroup>:not(:first-child) { margin-left: 30px } @media(max-width:1023px) { .deleteArtworkConfirmation__buttonGroup>:not(:first-child) { margin-left: 20px } } .deleteArtworkConfirmation__closeButton { cursor: pointer; padding: 12px; position: absolute; right: 0; top: 0 } html[data-theme=dark] .c-header.-camel .c-header__logo svg path { fill: #d60812 !important } html[data-theme=dark] [data-page=profile] svg:not(.c-footer__subscribeFormSubmitButtonArrow) path { fill: #fff } html[data-theme=dark] [data-page=profile] .c-quote__quotation-marks svg [clip-path="url(#__lottie_element_56)"] g:first-of-type path, html[data-theme=dark] [data-page=profile] .scrollToTop__img svg [clip-path="url(#__lottie_element_11)"] g:first-of-type path { fill: #292a2e !important } html[data-theme=dark] [data-page=profile] .uploadArtwork { border-color: rgba(95, 98, 107, .5) } html[data-theme=dark] [data-page=profile] .uploadArtwork__icon { background-color: #44464c } html[data-theme=dark] [data-page=profile] .uploadArtworkButton { background-color: hsla(0, 0%, 100%, .1) } html[data-theme=dark] [data-page=profile] .intro__instagram { color: #c4c4c4 } html[data-theme=dark] [data-page=profile] .c-artworkPreview__commentsIcon path { stroke: #000; stroke-width: .1 } @media(hover:hover) { html[data-theme=dark] [data-page=profile] .artistsYouFollow__footer .c-button:hover { background-color: #fff; border-color: #292a2e; color: #000 } html[data-theme=dark] [data-page=profile] .artistsYouFollow__footer .c-button:hover svg path { fill: #000 } html[data-theme=dark] [data-page=profile] .artistsYouFollow__footer .c-button:hover .c-button__arrowWrapper { border-left-color: #292a2e } } [data-page=profile] .intro { align-items: center; display: flex; flex-direction: column; padding-top: 10px; position: relative; z-index: 21 } @media(max-width:1023px) { [data-page=profile] .intro { padding-top: 0 } } [data-page=profile] .intro .-ctaCollection { column-gap: 30px; display: inline-flex } [data-page=profile] .intro .-ctaCollection .c-button { margin-top: 20px; padding-bottom: 0 } [data-page=profile] .intro .-ctaCollection .c-button__text { font-size: 15px } [data-page=profile] .intro__picture { border-radius: 50%; height: 120px; width: 120px } [data-page=profile] .intro__name { margin-top: 15px; text-align: center } [data-page=profile] .intro__artistType { color: #888; margin-top: 5px; text-align: center } [data-page=profile] .intro__instagram { color: #000; margin-top: 10px; max-width: 427px; text-align: center } [data-page=profile] .intro__about { color: #888; margin-top: 10px; max-width: 427px; text-align: center } [data-page=profile] .intro__phoneEmailWrapper { align-items: center; color: #888; display: flex; margin-top: 10px } @media(hover:hover) { [data-page=profile] .intro__email, [data-page=profile] .intro__phone { transition: color .2 ease } [data-page=profile] .intro__email:hover, [data-page=profile] .intro__phone:hover { color: var(--themeFontColor) } } [data-page=profile] .intro__email { align-items: center; display: flex } [data-page=profile] .intro__email:before { background-color: var(--themeFontColor); border-radius: 50%; content: ""; height: 4px; margin-left: 10px; margin-right: 10px; margin-top: 2px; width: 4px } [data-page=profile] .intro__editProfileLink { cursor: pointer; margin-top: 10px } [data-page=profile] .tabs { align-items: center; display: flex; justify-content: center; margin-top: 40px; position: relative } [data-page=profile] .tab { color: #888; cursor: pointer; padding: 20px; transition: color .2s ease } @media(max-width:1023px) { [data-page=profile] .tab { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { [data-page=profile] .tab { font-size: 20px; line-height: 25px } } @media(hover:hover) { [data-page=profile] .tab:hover { color: var(--themeFontColor) } } [data-page=profile][data-active-tab=artistsYouFollow] .artistsYouFollow { display: flex } [data-page=profile][data-active-tab=artistsYouFollow] .tab[data-tab=artistsYouFollow] { color: var(--themeFontColor); cursor: pointer; pointer-events: none } [data-page=profile][data-active-tab=yourArtwork] .yourArtwork { display: flex } [data-page=profile][data-active-tab=yourArtwork] .tab[data-tab=yourArtwork] { color: var(--themeFontColor); cursor: pointer; pointer-events: none } [data-page=profile][data-active-tab=artistsYouFollow][data-artist-count="0"] .artistsYouFollow { padding-top: 40px } [data-page=profile][data-active-tab=artistsYouFollow][data-artist-count="0"] .c-artistPreviews { margin-top: 40px } @media(max-width:1023px) { [data-page=profile][data-active-tab=artistsYouFollow][data-artist-count="0"] .c-artistPreviews { margin-top: 20px } } [data-page=profile][data-active-tab=artistsYouFollow][data-artist-count="0"] .artistsYouFollow__heading, [data-page=profile][data-active-tab=artistsYouFollow][data-artist-count="0"] .artistsYouFollow__line, [data-page=profile][data-active-tab=artistsYouFollow][data-artist-count="0"] .artistsYouFollow__subheading { display: block } [data-page=profile][data-active-tab=artistsYouFollow][data-artist-count="0"] .c-button { display: flex } [data-page=profile] .artistsYouFollow { align-items: center; display: none; flex-direction: column } [data-page=profile] .artistsYouFollow__heading { display: none; text-align: center } [data-page=profile] .artistsYouFollow__subheading { color: #fff; display: none; font-size: 20px; line-height: 25px; margin-top: 30px; text-align: center } @media(max-width:1023px) { [data-page=profile] .artistsYouFollow__subheading { font-size: 15px; letter-spacing: .02em; line-height: 20px } } [data-page=profile] .artistsYouFollow__line { display: none; height: 2px; margin-left: auto; margin-right: auto; margin-top: 30px; max-width: 30px; position: relative; width: 100% } [data-page=profile] .artistsYouFollow__line .anim-line { height: 2px } [data-page=profile] .artistsYouFollow .c-artistPreviews { margin-top: 40px } @media(max-width:1023px) { [data-page=profile] .artistsYouFollow .c-artistPreviews { margin-top: 35px } } [data-page=profile] .artistsYouFollow .c-button { display: none; margin-bottom: 75px; margin-top: 60px } @media(max-width:1023px) { [data-page=profile] .artistsYouFollow .c-button { margin-bottom: 80px; margin-top: 50px } } [data-page=profile] .artistsYouFollow__footer { min-height: 143px } @media(max-width:1023px) { [data-page=profile] .artistsYouFollow__footer { min-height: 80px } } [data-page=profile][data-active-tab=yourArtwork]:not([data-atrwork-count="0"]) .uploadArtworkButton { display: flex; right: 0; top: 0 } [data-page=profile][data-active-tab=yourArtwork][data-atrwork-count="0"] .yourArtwork { padding: 80px 0 174px } @media(max-width:1023px) { [data-page=profile][data-active-tab=yourArtwork][data-atrwork-count="0"] .yourArtwork { padding: 40px 0 80px } } [data-page=profile][data-active-tab=yourArtwork][data-atrwork-count="0"] .yourArtwork .c-artworkPreviews, [data-page=profile][data-active-tab=yourArtwork][data-atrwork-count="0"] .yourArtwork .c-button { display: none } [data-page=profile][data-active-tab=yourArtwork][data-atrwork-count="0"] .yourArtwork .uploadArtwork { display: flex } [data-page=profile] .yourArtwork { align-items: center; display: none; flex-direction: column; padding: 40px 0 174px } @media(max-width:1023px) { [data-page=profile] .yourArtwork { padding: 40px 0 80px } } [data-page=profile] .yourArtwork .c-button { display: none } @media(max-width:1023px) { [data-page=profile] .yourArtwork .c-button { display: flex; margin-top: 50px } } [data-page=profile] .yourArtwork__footer { display: none } @media(max-width:1023px) { [data-page=profile] .yourArtwork__footer { bottom: 70px; display: block; position: sticky } [data-page=profile] .yourArtwork__footer .c-button { background-color: #292a2e } } [data-page=profile] .uploadArtwork { align-items: center; animation-duration: .65s; animation-fill-mode: forwards; animation-name: fadeInUp30; animation-timing-function: cubic-bezier(.215, .61, .355, 1); border: 1px dashed #000; border-radius: 10px; display: none; flex-direction: column; justify-content: center; margin: 0 auto; opacity: 0; padding: 80px 0; width: 570px; will-change: opacity, transform } @media(max-width:1023px) { [data-page=profile] .uploadArtwork { padding: 40px 0; width: 100% } } [data-page=profile] .uploadArtwork__icon { align-items: center; background-color: #000; border-radius: 50%; color: #fff; display: flex; height: 114px; justify-content: center; width: 114px } @media(max-width:1023px) { [data-page=profile] .uploadArtwork__icon { font-size: 30px; height: 60px; line-height: 1; width: 60px } } @media(min-width:1024px) { [data-page=profile] .uploadArtwork__icon { font-size: 40px; line-height: 1 } } [data-page=profile] .uploadArtwork__heading { margin-top: 20px; text-align: center } @media(max-width:1023px) { [data-page=profile] .uploadArtwork__heading { font-size: 20px; line-height: 25px } } @media(min-width:1024px) { [data-page=profile] .uploadArtwork__heading { font-size: 30px; line-height: 1 } } [data-page=profile] .uploadArtwork__subheading { color: #888; margin-top: 20px; text-align: center } @media(max-width:1023px) { [data-page=profile] .uploadArtwork__subheading { max-width: 253px } } [data-page=profile] .uploadArtwork .uploadArtwork__icon { position: relative } [data-page=profile] .uploadArtwork .uploadArtwork__icon span { align-items: center; display: inline-flex; justify-content: center } @media(hover:hover) { [data-page=profile] .uploadArtwork:hover .uploadArtwork__icon { opacity: .5 } [data-page=profile] .uploadArtwork:hover .uploadArtwork__icon span { animation-duration: .6s; animation-name: uploadRotateAnim; animation-timing-function: linear; transform-origin: center } } [data-page=profile] .uploadArtworkButton { align-items: center; display: none; height: 100%; justify-content: center; padding: 0 20px; position: absolute; right: 9999px; top: 9999px } @media(hover:hover) { [data-page=profile] .uploadArtworkButton:hover .uploadArtworkButton__icon, [data-page=profile] .uploadArtworkButton:hover .uploadArtworkButton__text { opacity: .6 } } @media(max-width:1023px) { [data-page=profile] .uploadArtworkButton { display: none !important } } [data-page=profile] .uploadArtworkButton__icon { opacity: 1; transition: opacity .2s ease; width: 15px } [data-page=profile] .uploadArtworkButton:hover .uploadArtworkButton__icon [clip-path="url(#c)"] g { transition: transform .6s linear } [data-page=profile] .uploadArtworkButton:hover .uploadArtworkButton__icon [clip-path="url(#c)"] g:first-child, [data-page=profile] .uploadArtworkButton:hover .uploadArtworkButton__icon [clip-path="url(#c)"] g:nth-child(2) { transform: translateY(-250px) } [data-page=profile] .uploadArtworkButton__text { margin-left: 10px; opacity: 1; transition: opacity .2s ease } [data-page=profile] .detail__item__share { cursor: pointer; position: relative } [data-page=profile] .sharePopup { background-color: #fff; border: 1px solid #c4c4c4; opacity: 0; pointer-events: none; position: absolute; top: calc(100% + 8px); transform: translateY(20px); transition: opacity .2s cubic-bezier(.39, .575, .565, 1), transform .4s cubic-bezier(.39, .575, .565, 1); width: 231px } @media(max-width:1023px) { [data-page=profile] .sharePopup { right: 0 } } [data-page=profile] .sharePopup.show { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 9999999 } [data-page=profile] .sharePopup__heading { background-color: #f3f3f3; border-bottom: 1px solid #c4c4c4; color: #000; padding: 20px } [data-page=profile] .sharePopup__socialMediaLinks { display: flex; flex-flow: row wrap; padding: 20px; width: 100% } [data-page=profile] .sharePopup__socialMediaLinks>:nth-child(n+4) { margin-top: 20px } [data-page=profile] .sharePopup__socialMediaLinks>:not(:nth-child(3n+1)) { margin-left: 15px } [data-page=profile] .sharePopup__socialMediaLinks svg path { fill: #000 !important } [data-page=profile] .sharePopup__socialMediaLinks svg path:nth-of-type(2) { fill: #fff !important } [data-page=profile] .sharePopup__socialMediaLink { align-items: center; display: flex; flex-direction: column; position: relative; width: 53px } [data-page=profile] .sharePopup__socialMediaLink.is-active .sharePopup__socialMediaIconCircle, [data-page=profile] .sharePopup__socialMediaLink:hover .sharePopup__socialMediaIconCircle { opacity: .23 } [data-page=profile] .sharePopup__socialMediaLink.is-active .sharePopup__socialMediaLinkText, [data-page=profile] .sharePopup__socialMediaLink:hover .sharePopup__socialMediaLinkText { opacity: .47 } [data-page=profile] .sharePopup__socialMediaLinkIcon { height: 30px; width: 30px } [data-page=profile] .sharePopup__socialMediaIconCircle { fill: #000; opacity: 1; transition: opacity .2s ease; will-change: opacity } [data-page=profile] .sharePopup__socialMediaLinkText { color: #000; font-size: 11px; letter-spacing: .05em; line-height: 15px; margin-top: 5px; opacity: 1; transition: opacity .2s ease; will-change: opacity } [data-page=profile] .sharePopup__linkCopiedMessage { align-items: center; background-color: #000; border-radius: 5px; color: #fff; display: flex; left: 50%; opacity: 0; padding: 10px 10px 12px 12px; pointer-events: none; position: absolute; top: calc(100% + 7px); transform: translateX(-50%) translateY(10px); transition: opacity .2s cubic-bezier(.39, .575, .565, 1), transform .4s cubic-bezier(.39, .575, .565, 1); white-space: nowrap } [data-page=profile] .sharePopup__linkCopiedMessage.show { opacity: 1; transform: translateX(-50%) translateY(0) } [data-page=profile] .sharePopup__linkCopiedMessageArrow { height: 10px; left: calc(50% - 5px); position: absolute; top: -5px; width: 10px; z-index: 0 } [data-page=profile] .sharePopup__linkCopiedMessageTick { margin-right: 5px } [data-theme=dark] [data-page=editProfile] .editProfile__input.-textarea { color: #fff } [data-theme=dark] [data-page=editProfile] .editProfile__input.-instagram-link:after { background-image: url(../assets/common/vectors/icon_external-link-white.svg) } [data-theme=dark] [data-page=editProfile] .editProfile__dropdown:after { background-image: url(../assets/common/vectors/icon_dropdown-arrow-white.svg) } [data-theme=dark] [data-page=editProfile] .editProfile__dropdownSelect { color: #fff; opacity: 1 } [data-theme=dark] [data-page=editProfile] .editProfile__checkboxTick:after { background-image: url(../assets/common/vectors/icon_checkbox-tick-white.svg) } [data-theme=dark] [data-page=editProfile] .editProfile__inputUpdateButton:hover { color: #fff } @keyframes fadeEditProfilePopupIn { 0% { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: translateY(0) } } .editProfilePopup__container { color: #000 } .editProfilePopup__container input { color: #000 !important } .editProfilePopup__container.show { display: flex } .editProfilePopup__container#changeEmail [data-step] { animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeEditProfilePopupIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); display: none; opacity: 0; will-change: transform, opacity } .editProfilePopup__container#changeEmail [data-step=verifyEmail] { padding: 30px } .editProfilePopup__container#changeEmail[data-active-step=changeEmail] [data-step=changeEmail], .editProfilePopup__container#changeEmail[data-active-step=reenterPassword] [data-step=reenterPassword], .editProfilePopup__container#changeEmail[data-active-step=verifyEmail] [data-step=verifyEmail] { display: block } .editProfilePopup__wrapper { animation-duration: .8s; animation-fill-mode: forwards; animation-name: fadeEditProfilePopupIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0; position: relative; will-change: transform, opacity } @media(max-width:1023px) { .editProfilePopup__wrapper { width: 100% } } .editProfilePopup__form { background-color: #fff; border-radius: 5px; padding: 30px 76px; position: relative; width: 428px } @media(max-width:1023px) { .editProfilePopup__form { padding: 30px 20px; width: 100% } } .editProfilePopup__form.-verifyEmail { padding: 30px } .editProfilePopup__heading { padding-bottom: 20px } .editProfilePopup__heading+.editProfilePopup__subheading { margin-top: -10px } .editProfilePopup__subheading { color: #727272 } .editProfilePopup__subheading+.editProfilePopup__inputWrapper { margin-top: 20px } .editProfilePopup .c-button.-openGmail { margin-top: 30px } .editProfilePopup__radioButton { border-bottom: 1px solid #e3e3e3; position: relative } .editProfilePopup__radioButtonLabel { align-items: center; cursor: pointer; display: flex; flex-flow: row wrap; padding: 20px 0 } .editProfilePopup__radioButtonLabel+.editProfilePopup__inputWrapper { padding-bottom: 20px } .editProfilePopup__radioButtonInput { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } .editProfilePopup__radioButtonInput:checked~.editProfilePopup__radioButtonTick:after { transform: scale(1) } .editProfilePopup__radioButtonInput#other~.editProfilePopup__inputWrapper { max-height: 0; overflow: hidden; transition: max-height .4s ease; width: 100% } .editProfilePopup__radioButtonInput#other~.editProfilePopup__inputWrapper:before { content: ""; display: block; padding-top: 20px } .editProfilePopup__radioButtonInput#other:checked~.editProfilePopup__inputWrapper { max-height: 70px } .editProfilePopup__radioButtonTick { border: 1px solid #000; border-radius: 50%; height: 15px; position: relative; width: 15px } .editProfilePopup__radioButtonTick:after { background-color: #000; border-radius: 50%; content: ""; height: 9px; left: calc(50% - 4.5px); position: absolute; top: calc(50% - 4.5px); transform: scale(0); transition: transform .2s ease; width: 9px; will-change: transform } .editProfilePopup__radioButtonText { flex: 1; margin-left: 10px } .editProfilePopup__textareaInput::-webkit-scrollbar { width: 6px } .editProfilePopup__textareaInput::-webkit-scrollbar-track { background: #fff } .editProfilePopup__textareaInput::-webkit-scrollbar-thumb { background: #e6e8eb; border-radius: 10px } .editProfilePopup__textareaInput::-webkit-scrollbar-thumb:hover { background: #c4c4c4; cursor: pointer } .editProfilePopup__textareaWrapper.is-empty .c-inputError { max-height: 48px } .editProfilePopup__inputWrapper { position: relative } .editProfilePopup__inputWrapper+.editProfilePopup__inputWrapper { margin-top: 10px } .editProfilePopup__inputWrapper.is-focused .editProfilePopup__input { border: 1px solid #dfdfdf } .editProfilePopup__inputWrapper.is-focused .editProfilePopup__passwordConditions { max-height: 70px } .editProfilePopup__inputWrapper.is-empty .c-inputError, .editProfilePopup__inputWrapper.is-invalid .c-inputError { max-height: 48px } .editProfilePopup__textareaLabel { color: #888; display: flex; justify-content: space-between; padding-bottom: 10px } .editProfilePopup__inputLabel { color: #888; display: block; padding-bottom: 10px } .editProfilePopup__textareaInput { border: 1px solid #dfdfdf; height: 125px; padding: 10px 20px 10px 10px; resize: none } .editProfilePopup__input, .editProfilePopup__textareaInput { background-color: #f5f5f5; border-radius: 5px; display: block; width: 100% } .editProfilePopup__input { border: 1px solid transparent; color: #000; height: 50px; padding: 0 15px } .editProfilePopup__input::placeholder { -webkit-text-stroke-width: 0; color: #727272; font-family: NeueMontreal-Regular; font-size: 13px; font-weight: 400; letter-spacing: .03em; line-height: 15px } .editProfilePopup__input#passwordInput, .editProfilePopup__input#reenterPasswordInput { padding-right: 40px } @media(max-width:767px) { .editProfilePopup__input[type=password] { letter-spacing: 3px } } @media(min-width:768px) { .editProfilePopup__input[type=password] { -webkit-text-stroke-width: 1px; font-family: Verdana, sans-serif; font-weight: 700; letter-spacing: 7px } } .editProfilePopup__forgotPasswordLink { color: #727272; display: block; margin-top: 10px } .editProfilePopup__forgotPasswordLink:hover { color: #000 } .editProfilePopup__forgotPasswordLink+.editProfilePopup__inputWrapper { margin-top: 20px } .editProfilePopup__passwordConditions { max-height: 0; overflow: hidden; transition: max-height .2s ease-out } .editProfilePopup__passwordCondition, .editProfilePopup__passwordConditionTick { align-items: center; display: flex; position: relative } .editProfilePopup__passwordConditionTick { height: 15px; justify-content: flex-start; margin-right: 8px; width: 15px } .editProfilePopup__passwordConditionTick:before { background-color: #000; background-image: url(../assets/common/vectors/icon_red-cross.svg); background-position: 50%; background-repeat: no-repeat; background-size: 0; border-radius: 50%; content: ""; flex-shrink: 0; height: 5px; left: 50%; position: relative; transform: translateX(-50%); width: 5px } .editProfilePopup__passwordConditionTick:after { background-image: url(../assets/common/vectors/icon_green-tick.svg); background-position: 50%; background-repeat: no-repeat; background-size: 15px 15px; content: ""; flex-shrink: 0; height: 15px; left: -6px; opacity: 0; position: relative; width: 15px } .editProfilePopup__passwordCondition:first-child { padding-top: 10px } .editProfilePopup__passwordCondition:not(:first-child) { padding-top: 5px } .editProfilePopup__passwordCondition:last-child { padding-bottom: 10px } .editProfilePopup__passwordCondition.is-satisfied .editProfilePopup__passwordConditionTick:before { opacity: 0 } .editProfilePopup__passwordCondition.is-satisfied .editProfilePopup__passwordConditionTick:after { opacity: 1 } .editProfilePopup__passwordCondition.is-not-satisfied .editProfilePopup__passwordConditionTick:before { background-color: transparent; background-size: 15px 15px; border-radius: 100%; height: 15px; left: 0; transform: translateX(0); width: 15px } .editProfilePopup__passwordVisibility { align-items: center; cursor: pointer; display: flex; height: 50px; justify-content: center; position: absolute; right: 0; top: 0; width: 40px } .editProfilePopup__passwordVisibilityIcon { height: auto; width: 20px } .editProfilePopup__passwordVisibility:after { background-color: #000; bottom: 0; content: ""; height: 1px; left: 0; margin: auto; opacity: 0; position: absolute; right: 0; top: 0; transform: rotate(139deg); width: 21px } .editProfilePopup__passwordVisibility.is-visible:after { opacity: 1 } .editProfilePopup__footer { align-items: center; display: flex; justify-content: center; margin-top: 30px } .editProfilePopup__buttonGroup { align-items: center; display: flex; justify-content: flex-end; width: 100% } .editProfilePopup__buttonGroup>:not(:first-child) { margin-left: 30px } @media(max-width:1023px) { .editProfilePopup__buttonGroup>:not(:first-child) { margin-left: 20px } } @media(hover:hover) { .editProfilePopup__cancelButton { transition: opacity .2s ease } .editProfilePopup__cancelButton:hover { opacity: .6 } } .editProfilePopup__submitButton { align-items: center; background-color: #000; border-radius: 5px; cursor: pointer; display: flex; height: 40px; justify-content: center; min-width: 102px; padding: 0 30px; position: relative } .editProfilePopup__submitButtonText { color: #fff } .editProfilePopup__submitButton.-resendEmailButton { padding: 0 20px } .editProfilePopup__container#changePassword .editProfilePopup__submitButton { padding: 0 35px } .editProfilePopup__closeButton { cursor: pointer; padding: 12px; position: absolute; right: 0; top: 0 } @media(hover:hover) { .editProfilePopup__closeButton:hover { opacity: .5 } } [data-page=editProfile] .intro { align-items: center; display: flex; margin-top: 10px } [data-page=editProfile] .intro__profilePictureWrapper { height: 120px; position: relative; width: 120px } [data-page=editProfile] .intro__profilePictureWrapper .editProfile__uploadProfilePicture { bottom: 9px; cursor: pointer; position: absolute; right: 0; z-index: 2 } [data-page=editProfile] .intro__profilePictureWrapper .editProfile__uploadProfilePicture input { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } @media(hover:hover) { [data-page=editProfile] .intro__profilePictureWrapper .editProfile__uploadProfilePicture:hover img { opacity: .8 } } [data-page=editProfile] .intro__defaultProfilePicture { align-items: center; background-color: #9cc9f2; border-radius: 50%; display: flex; height: calc(100% - 4px); justify-content: center; left: 2px; position: absolute; top: 2px; width: calc(100% - 4px); z-index: 0 } [data-page=editProfile] .intro__defaultProfilePictureText { color: #fff } [data-page=editProfile] .intro__profilePicture { border-radius: 50%; height: 100%; position: relative; width: 100%; z-index: 1 } [data-page=editProfile] .intro__text { margin-left: 15px } [data-page=editProfile] .intro__artistType { color: #888; margin-top: 5px } [data-page=editProfile] .intro+.editProfile__section { margin-top: 60px } @media(max-width:1023px) { [data-page=editProfile] .intro+.editProfile__section { margin-top: 40px } } [data-page=editProfile] .editProfile__section { padding-bottom: 80px } @media(min-width:1024px) { [data-page=editProfile] .editProfile__section.-showcaseFeed .editProfile__sectionHeading .anim-paragraph { max-width: 210px } } @media(max-width:1023px) { [data-page=editProfile] .editProfile__section.-showcaseFeed { padding-bottom: 50px } } [data-page=editProfile] .editProfile__sectionHeading { align-items: center; display: flex } [data-page=editProfile] .editProfile__sectionHeading .c-tooltip { top: 4px } [data-page=editProfile] .editProfile__sectionHeading .c-tooltip__text { left: -147px } @media(min-width:1024px) { [data-page=editProfile] .editProfile__sectionHeading .c-tooltip__text:before { left: unset; right: 8px } } [data-page=editProfile] .editProfile__sectionHeading .c-tooltip__svg, [data-page=editProfile] .editProfile__sectionHeading .c-tooltip__svg_filled { height: 20px; width: 20px } [data-page=editProfile] .editProfile__sectionRow { display: flex; margin-top: 20px } @media(max-width:1023px) { [data-page=editProfile] .editProfile__sectionRow { flex-direction: column } } [data-page=editProfile] .editProfile__sectionRow>:not(:first-child) { margin-left: var(--gridMargin) } @media(max-width:1023px) { [data-page=editProfile] .editProfile__sectionRow>:not(:first-child) { margin-left: 0 } } [data-page=editProfile] .editProfile__sectionCol { padding-top: 20px; position: relative; width: var(--gridCol3) } @media(max-width:1023px) { [data-page=editProfile] .editProfile__sectionCol { padding-bottom: 30px; width: 100% } } [data-page=editProfile] .editProfile__inputLabel { color: #888; display: block } [data-page=editProfile] .editProfile__inputLabel+.editProfile__dropdown, [data-page=editProfile] .editProfile__inputLabel+.editProfile__input { margin-top: 10px } [data-page=editProfile] .editProfile__dropdown { align-items: center; cursor: pointer; display: inline-flex; position: relative } [data-page=editProfile] .editProfile__dropdown:after { background-image: url(../assets/common/vectors/icon_dropdown-arrow.svg); background-position: 0; background-repeat: no-repeat; background-size: contain; content: ""; height: 6px; margin-left: 10px; position: relative; width: 10px } [data-page=editProfile] .editProfile__dropdown .editProfile__input { cursor: pointer } [data-page=editProfile] .editProfile__dropdownSelect { -webkit-appearance: none; appearance: none; -moz-appearance: none; background-color: transparent; cursor: pointer } [data-page=editProfile] .editProfile__input { display: block } [data-page=editProfile] .editProfile__input.-textarea { color: #000; padding-right: 20px; width: 100% } @media(max-width:1023px) { [data-page=editProfile] .editProfile__input.-textarea { padding-right: 50px } } [data-page=editProfile] .editProfile__input.-instagram-link { align-items: flex-end; display: flex; text-decoration: underline } [data-page=editProfile] .editProfile__input.-instagram-link:after { background-image: url(../assets/common/vectors/icon_external-link.svg); background-position: 0; background-repeat: no-repeat; background-size: contain; bottom: 2px; content: ""; height: 11px; left: 5px; position: relative; width: 11px } [data-page=editProfile] .editProfile__input+.editProfile__checkbox { margin-top: 15px } [data-page=editProfile] .editProfile__message { align-items: center; display: none; margin-top: 20px; position: absolute } @media(max-width:1023px) { [data-page=editProfile] .editProfile__message { position: relative } } [data-page=editProfile] .editProfile__messageText { color: #888; color: #fff; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-left: 5px; margin-top: 3px } [data-page=editProfile] .editProfile__messageIcon { height: 15px; width: 15px } [data-page=editProfile] .editProfile__message.-successState { display: flex } [data-page=editProfile] .editProfile__message.-successState .-success { display: block } [data-page=editProfile] .editProfile__message.-successState .-error { display: none } [data-page=editProfile] .editProfile__message.-errorState { display: flex } [data-page=editProfile] .editProfile__message.-errorState .-success { display: none } [data-page=editProfile] .editProfile__message.-errorState .-error { display: block } [data-page=editProfile] .editProfile__checkbox { position: relative } [data-page=editProfile] .editProfile__checkboxLabel { cursor: pointer; display: flex } [data-page=editProfile] .editProfile__checkboxInput { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } [data-page=editProfile] .editProfile__checkboxInput:checked~.editProfile__checkboxTick:after { opacity: 1 } [data-page=editProfile] .editProfile__checkboxTick { align-items: center; border: 1px solid #727272; border-radius: 2px; display: flex; height: 15px; justify-content: center; width: 15px } [data-page=editProfile] .editProfile__checkboxTick:after { background-image: url(../assets/common/vectors/icon_checkbox-tick.svg); background-position: 50%; background-repeat: no-repeat; background-size: 8px auto; content: ""; height: 8px; opacity: 0; width: 8px } [data-page=editProfile] .editProfile__checkboxText { color: #888; margin-left: 5px } [data-page=editProfile] .editProfile__inputUpdateButton { color: #888; display: block; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 10px; position: relative; transition: color .2s ease } [data-page=editProfile] .editProfile__inputUpdateButton:after { background-color: currentColor; content: ""; height: 1px; left: 0; position: absolute; top: 100%; width: 100% } @media(hover:hover) { [data-page=editProfile] .editProfile__inputUpdateButton:hover { color: #000 } } [data-page=editProfile] #editProfile__yourInterests { color: #888; color: #fff; font-size: 13px; letter-spacing: .05em; line-height: 15px } [data-page=editProfile] #editProfile__email { width: 100% } [data-page=editProfile] .logged-google { font-size: 13px; font-weight: 400; letter-spacing: .02em; line-height: 20px; margin-top: 10px } [data-page=editProfile] .c-quote { margin-top: 10px } .artworkUploadedPopup__cta { margin-top: 20px; position: relative } [data-page=uploadArtwork] main { padding-top: 142px } @media(max-width:1023px) { [data-page=uploadArtwork] main { padding-top: 130px } } [data-page=uploadArtwork] .uploadYourCreation { align-items: center; border: 1px dashed #888; display: flex; flex-direction: column; height: 100%; justify-content: center; min-height: 256px; padding: 40px 0 } [data-page=uploadArtwork] .uploadYourCreation__heading { text-align: center } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadYourCreation__heading { font-size: 20px; line-height: 25px } } @media(min-width:1024px) { [data-page=uploadArtwork] .uploadYourCreation__heading { font-size: 30px; line-height: 1 } } [data-page=uploadArtwork] .uploadYourCreation__medium { align-items: center; display: flex; flex-direction: column; margin-top: 40px } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadYourCreation__medium { margin-top: 30px } } [data-page=uploadArtwork] .uploadYourCreation__label { align-items: center; background-color: #000; border-radius: 50%; cursor: pointer; display: flex; height: 90px; justify-content: center; position: relative; width: 90px } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadYourCreation__label { height: 70px; width: 70px } } [data-page=uploadArtwork] .uploadYourCreation__label span { align-items: center; display: inline-flex; justify-content: center } @media(hover:hover) { [data-page=uploadArtwork] .uploadYourCreation__label:hover { opacity: .5 } [data-page=uploadArtwork] .uploadYourCreation__label:hover span { animation-duration: .6s; animation-name: uploadRotateAnim; animation-timing-function: linear; transform-origin: center } @keyframes uploadRotateAnim { 0% { transform: scale(1) rotate(0deg) } 50% { transform: scale(1.1) rotate(45deg) } to { transform: scale(1) rotate(91deg) } } } [data-page=uploadArtwork] .uploadYourCreation__input { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } [data-page=uploadArtwork] .uploadYourCreation__mediumName { margin-top: 10px } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadYourCreation__mediumName { margin-top: 10px } } [data-page=uploadArtwork] .uploadYourCreation__mediumSizeLimit { color: #888; margin-top: 6px } [data-page=uploadArtwork] .uploadYourCreation__subheading { color: #888; margin-top: 25px; text-align: center } [data-page=uploadArtwork] .uploadArtworkForm { padding-bottom: 170px } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadArtworkForm { padding-bottom: 110px } [data-page=uploadArtwork] .uploadArtworkForm.show-next-form .uploadArtworkForm__lhs, [data-page=uploadArtwork] .uploadArtworkForm__rhs { display: none } [data-page=uploadArtwork] .uploadArtworkForm.show-next-form .uploadArtworkForm__rhs { display: block } } @media(min-width:1024px) { [data-page=uploadArtwork] .uploadArtworkForm { align-items: flex-start; display: flex } [data-page=uploadArtwork] .uploadArtworkForm>* { flex-basis: calc(50% - 20px) } [data-page=uploadArtwork] .uploadArtworkForm__rhs { margin-left: 40px; padding-bottom: 0; padding-right: 80px } [data-page=uploadArtwork] .uploadArtworkForm__lhs { position: sticky; top: 142px } } [data-page=uploadArtwork] .uploadArtworkForm__preview { height: 520px; position: relative } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadArtworkForm__preview { height: unset } } [data-page=uploadArtwork] .uploadArtworkForm__previewDeleteButton { cursor: pointer; height: 40px; opacity: 0; pointer-events: none; position: absolute; right: 20px; top: 20px; width: 40px; z-index: 2 } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadArtworkForm__previewDeleteButton { height: 30px; right: 10px; top: 10px; width: 30px } } [data-page=uploadArtwork] .uploadArtworkForm__preview .c-inputError { height: 0; margin-top: 40px; max-height: unset; transition: height .4s ease } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadArtworkForm__preview .c-inputError { margin-top: 0 } } [data-page=uploadArtwork] .uploadArtworkForm__preview.is-empty .c-inputError { height: 48px } [data-page=uploadArtwork] .uploadArtworkForm__preview.has-image .uploadArtworkForm__previewDeleteButton { opacity: 1; pointer-events: auto } [data-page=uploadArtwork] .uploadArtworkForm__preview.has-image .uploadYourCreation__label { pointer-events: none } @media(hover:hover) { [data-page=uploadArtwork] .uploadArtworkForm__preview .uploadArtworkForm__previewDeleteButton:hover { opacity: .5 } } [data-page=uploadArtwork] .uploadArtworkForm__previewImage, [data-page=uploadArtwork] .uploadArtworkForm__previewVideo { height: 100%; left: 0; object-fit: cover; object-position: center; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1 } [data-page=uploadArtwork] .uploadArtworkForm__thumbnails { display: flex; margin-top: 20px } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadArtworkForm__thumbnails { flex-flow: row wrap; margin-top: 25px } [data-page=uploadArtwork] .uploadArtworkForm__thumbnails>:nth-child(n+4) { margin-top: 25px } [data-page=uploadArtwork] .uploadArtworkForm__thumbnails>:not(:nth-child(3n+1)) { margin-left: 25px } } @media(min-width:1024px) { [data-page=uploadArtwork] .uploadArtworkForm__thumbnails>:not(:first-child) { margin-left: 20px } } [data-page=uploadArtwork] .uploadArtworkForm__thumbnail { flex-basis: calc(16.66667% - 16.66667px); user-select: none } [data-page=uploadArtwork] .uploadArtworkForm__thumbnail:not(:first-child) { opacity: .4; pointer-events: none } [data-page=uploadArtwork] .uploadArtworkForm__thumbnail.has-image+.uploadArtworkForm__thumbnail { opacity: 1; pointer-events: auto } @media(max-width:1023px) { [data-page=uploadArtwork] .uploadArtworkForm__thumbnail { flex-basis: calc(33.33333% - 16.66667px) } } [data-page=uploadArtwork] .uploadArtworkForm__thumbnailInner { padding-top: 80%; position: relative } [data-page=uploadArtwork] .uploadArtworkForm__thumbnailLabel { border: 1px dashed #888; cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100% } [data-page=uploadArtwork] .uploadArtworkForm__thumbnailLabel:before { align-items: center; content: "+"; display: flex; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100% } [data-page=uploadArtwork] .uploadArtworkForm__thumbnailLabel input { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } [data-page=uploadArtwork] .uploadArtworkForm__thumbnailImage, [data-page=uploadArtwork] .uploadArtworkForm__thumbnailVideo { cursor: grab; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100% } [data-page=uploadArtwork] .uploadArtworkForm__thumbnailImage:active, [data-page=uploadArtwork] .uploadArtworkForm__thumbnailVideo:active { cursor: grabbing } [data-page=uploadArtwork] .uploadArtworkForm__thumbnailDeleteButton { cursor: pointer; height: 20px; opacity: 0; pointer-events: none; position: absolute; right: 5px; top: 5px; width: 20px } [data-page=uploadArtwork] .uploadArtworkForm__thumbnail.has-image .uploadArtworkForm__thumbnailImage { pointer-events: auto } [data-page=uploadArtwork] .uploadArtworkForm__thumbnail.has-image .uploadArtworkForm__thumbnailDeleteButton { opacity: 1; pointer-events: auto } [data-page=uploadArtwork] .uploadArtworkForm__uploadNote { color: #888; margin-top: 30px } [data-page=uploadArtwork] .uploadArtworkForm__nextButton { margin-top: 40px } @media(min-width:1024px) { [data-page=uploadArtwork] .c-backButton { display: none } } @media(max-width:1023px) { [data-page=uploadArtwork] .c-backButton+.c-input__wrapper { margin-top: 40px } } [data-page=uploadArtwork] .c-input__wrapper+.c-input__wrapper { margin-top: 30px } [data-page=uploadArtwork] .c-input__wrapper.-other { height: 0; margin-top: 0; overflow: hidden } [data-page=uploadArtwork] .c-input__wrapper.-other label { padding-top: 30px } [data-page=uploadArtwork] .uploadArtworkForm__footer { margin-top: 40px } [data-page=uploadArtwork] .uploadArtworkForm__buttonGroup { display: flex } [data-page=uploadArtwork] .uploadArtworkForm__buttonGroup>:not(:first-child) { margin-left: 30px } [data-page=uploadArtwork] .c-checkboxSwitch__note .-on { display: inline-block } [data-page=uploadArtwork] .c-checkboxSwitch__note .-off, [data-page=uploadArtwork] .c-checkboxSwitch__note.-off .-on { display: none } [data-page=uploadArtwork] .c-checkboxSwitch__note.-off .-off { display: inline-block } [data-page=uploadArtwork] .c-inputError__text { color: #d60812 } .artworkUploadedPopup.show { display: flex } .artworkUploadedPopup__inner { align-items: center; animation-delay: .1s; animation-duration: 1.2s; animation-fill-mode: forwards; animation-name: fadePopupIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); background-color: #fff; display: flex; flex-direction: column; height: 408px; justify-content: center; opacity: 0; position: relative; width: 510px; will-change: transform, opacity } @media(max-width:1023px) { .artworkUploadedPopup__inner { width: 100% } } .artworkUploadedPopup__wigglies { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .artworkUploadedPopup__smiley { height: 58px; width: 58px } .artworkUploadedPopup__heading { margin-top: 20px; text-align: center } .artworkUploadedPopup__closeButtonWrapper { cursor: pointer; padding: 20px; position: absolute; right: 0; top: 0 } @media(max-width:1023px) { .artworkUploadedPopup__closeButtonWrapper { padding: 10px } } .artworkUploadedPopup__closeButton { height: 10px; width: 10px } @media(max-width:1023px) { .artworkUploadedPopup__closeButton { height: 8px; width: 8px } } [data-page=editArtwork] main { padding-top: 142px } @media(max-width:1023px) { [data-page=editArtwork] main { padding-top: 130px } } [data-page=editArtwork] .uploadYourCreation { align-items: center; border: 1px dashed #888; display: flex; flex-direction: column; height: 100%; justify-content: center; min-height: 256px; padding: 40px 0 } [data-page=editArtwork] .uploadYourCreation__heading { text-align: center } @media(max-width:1023px) { [data-page=editArtwork] .uploadYourCreation__heading { font-size: 20px; line-height: 25px } } @media(min-width:1024px) { [data-page=editArtwork] .uploadYourCreation__heading { font-size: 30px; line-height: 1 } } [data-page=editArtwork] .uploadYourCreation__medium { align-items: center; display: flex; flex-direction: column; margin-top: 40px } @media(max-width:1023px) { [data-page=editArtwork] .uploadYourCreation__medium { margin-top: 30px } } [data-page=editArtwork] .uploadYourCreation__label { align-items: center; background-color: #000; border-radius: 50%; cursor: pointer; display: flex; height: 90px; justify-content: center; position: relative; width: 90px } @media(max-width:1023px) { [data-page=editArtwork] .uploadYourCreation__label { height: 70px; width: 70px } } [data-page=editArtwork] .uploadYourCreation__label:after { color: #fff; content: "+"; font-size: 40px } @media(max-width:1023px) { [data-page=editArtwork] .uploadYourCreation__label:after { font-size: 30px } } [data-page=editArtwork] .uploadYourCreation__input { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } [data-page=editArtwork] .uploadYourCreation__mediumName { margin-top: 10px } @media(max-width:1023px) { [data-page=editArtwork] .uploadYourCreation__mediumName { margin-top: 10px } } [data-page=editArtwork] .uploadYourCreation__mediumSizeLimit { color: #888; margin-top: 6px } [data-page=editArtwork] .uploadYourCreation__subheading { color: #888; margin-top: 25px; text-align: center } [data-page=editArtwork] .editArtworkForm { padding-bottom: 170px } @media(max-width:1023px) { [data-page=editArtwork] .editArtworkForm { padding-bottom: 110px } [data-page=editArtwork] .editArtworkForm.show-next-form .editArtworkForm__lhs, [data-page=editArtwork] .editArtworkForm__rhs { display: none } [data-page=editArtwork] .editArtworkForm.show-next-form .editArtworkForm__rhs { display: block } } @media(min-width:1024px) { [data-page=editArtwork] .editArtworkForm { align-items: flex-start; display: flex } [data-page=editArtwork] .editArtworkForm>* { flex-basis: calc(50% - 20px) } [data-page=editArtwork] .editArtworkForm__rhs { margin-left: 40px; padding-bottom: 0; padding-right: 80px } [data-page=editArtwork] .editArtworkForm__lhs { position: sticky; top: 142px } } [data-page=editArtwork] .editArtworkForm__preview { height: 520px; position: relative } @media(max-width:1023px) { [data-page=editArtwork] .editArtworkForm__preview { height: unset } } [data-page=editArtwork] .editArtworkForm__previewDeleteButton { cursor: pointer; height: 40px; opacity: 0; pointer-events: none; position: absolute; right: 20px; top: 20px; width: 40px; z-index: 2 } @media(max-width:1023px) { [data-page=editArtwork] .editArtworkForm__previewDeleteButton { height: 30px; right: 10px; top: 10px; width: 30px } } [data-page=editArtwork] .editArtworkForm__preview .c-inputError { height: 0; margin-top: 40px; max-height: unset; transition: height .4s ease } @media(max-width:1023px) { [data-page=editArtwork] .editArtworkForm__preview .c-inputError { margin-top: 0 } } [data-page=editArtwork] .editArtworkForm__preview.is-empty .c-inputError { height: 48px } [data-page=editArtwork] .editArtworkForm__preview.has-image .editArtworkForm__previewDeleteButton { opacity: 1; pointer-events: auto } [data-page=editArtwork] .editArtworkForm__preview.has-image .uploadYourCreation__label { pointer-events: none } [data-page=editArtwork] .editArtworkForm__previewImage, [data-page=editArtwork] .editArtworkForm__previewVideo { height: 100%; left: 0; object-fit: cover; object-position: center; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1 } [data-page=editArtwork] .editArtworkForm__thumbnails { display: flex; margin-top: 20px } @media(max-width:1023px) { [data-page=editArtwork] .editArtworkForm__thumbnails { flex-flow: row wrap; margin-top: 25px } [data-page=editArtwork] .editArtworkForm__thumbnails>:nth-child(n+4) { margin-top: 25px } [data-page=editArtwork] .editArtworkForm__thumbnails>:not(:nth-child(3n+1)) { margin-left: 25px } } @media(min-width:1024px) { [data-page=editArtwork] .editArtworkForm__thumbnails>:not(:first-child) { margin-left: 20px } } [data-page=editArtwork] .editArtworkForm__thumbnail { flex-basis: calc(16.66667% - 16.66667px); user-select: none } [data-page=editArtwork] .editArtworkForm__thumbnail:not(:first-child) { opacity: .4; pointer-events: none } [data-page=editArtwork] .editArtworkForm__thumbnail.has-image+.editArtworkForm__thumbnail { opacity: 1; pointer-events: auto } @media(max-width:1023px) { [data-page=editArtwork] .editArtworkForm__thumbnail { flex-basis: calc(33.33333% - 16.66667px) } } [data-page=editArtwork] .editArtworkForm__thumbnailInner { padding-top: 80%; position: relative } [data-page=editArtwork] .editArtworkForm__thumbnailLabel { border: 1px dashed #888; cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100% } [data-page=editArtwork] .editArtworkForm__thumbnailLabel:before { align-items: center; content: "+"; display: flex; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100% } [data-page=editArtwork] .editArtworkForm__thumbnailLabel input { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } [data-page=editArtwork] .editArtworkForm__thumbnailImage, [data-page=editArtwork] .editArtworkForm__thumbnailVideo { cursor: grab; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100% } [data-page=editArtwork] .editArtworkForm__thumbnailImage:active, [data-page=editArtwork] .editArtworkForm__thumbnailVideo:active { cursor: grabbing } [data-page=editArtwork] .editArtworkForm__thumbnailDeleteButton { cursor: pointer; height: 20px; opacity: 0; pointer-events: none; position: absolute; right: 5px; top: 5px; width: 20px } [data-page=editArtwork] .editArtworkForm__thumbnail.has-image .editArtworkForm__thumbnailImage { pointer-events: auto } [data-page=editArtwork] .editArtworkForm__thumbnail.has-image .editArtworkForm__thumbnailDeleteButton { opacity: 1; pointer-events: auto } [data-page=editArtwork] .editArtworkForm__uploadNote { color: #888; margin-top: 30px } [data-page=editArtwork] .editArtworkForm__nextButton { margin-top: 40px } @media(min-width:1024px) { [data-page=editArtwork] .c-backButton { display: none } } @media(max-width:1023px) { [data-page=editArtwork] .c-backButton+.c-input__wrapper { margin-top: 40px } } [data-page=editArtwork] .c-input__wrapper+.c-input__wrapper { margin-top: 30px } [data-page=editArtwork] .c-input__wrapper.-other { height: 0; margin-top: 0; overflow: hidden } [data-page=editArtwork] .c-input__wrapper.-other label { padding-top: 30px } [data-page=editArtwork] .editArtworkForm__footer { margin-top: 40px } [data-page=editArtwork] .editArtworkForm__buttonGroup { display: flex } [data-page=editArtwork] .editArtworkForm__buttonGroup>:not(:first-child) { margin-left: 30px } body.scroll-lock { overflow: hidden } [data-page=previewArtwork] main { padding-top: 142px } @media(max-width:1023px) { [data-page=previewArtwork] main { padding-top: 130px } } [data-page=previewArtwork] .previewArtwork { padding-bottom: 80px } @media(max-width:1023px) { [data-page=previewArtwork] .previewArtwork { padding-bottom: 120px } [data-page=previewArtwork] .previewArtwork__rhs { margin-top: 30px } } @media(min-width:1024px) { [data-page=previewArtwork] .previewArtwork { align-items: flex-start; display: flex } [data-page=previewArtwork] .previewArtwork>* { flex-basis: calc(50% - 20px) } [data-page=previewArtwork] .previewArtwork__rhs { margin-left: 40px; padding-bottom: 0; padding-right: 80px } [data-page=previewArtwork] .previewArtwork__lhs { position: sticky; top: 142px } } [data-page=previewArtwork] .previewArtwork__preview { height: 520px; position: relative } @media(max-width:1023px) { [data-page=previewArtwork] .previewArtwork__preview { height: 256px } } [data-page=previewArtwork] .previewArtwork__previewDeleteButton { cursor: pointer; height: 40px; opacity: 0; pointer-events: none; position: absolute; right: 20px; top: 20px; width: 40px; z-index: 2 } [data-page=previewArtwork] .previewArtwork__preview.has-image .previewArtwork__previewDeleteButton { opacity: 1; pointer-events: auto } [data-page=previewArtwork] .previewArtwork__preview.has-image .uploadYourCreation__label { pointer-events: none } [data-page=previewArtwork] .previewArtwork__previewImage, [data-page=previewArtwork] .previewArtwork__previewVideo { height: 100%; left: 0; object-fit: cover; object-position: center; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1 } @media(max-width:1023px) { [data-page=previewArtwork] .previewArtwork__artworkTitle { font-size: 40px; line-height: 1 } } @media(min-width:1024px) { [data-page=previewArtwork] .previewArtwork__artworkTitle { font-size: 30px; line-height: 1 } } [data-page=previewArtwork] .previewArtwork__artworkDescription { color: #000; margin-top: 20px } [data-page=previewArtwork] .previewArtwork__materialsUsed, [data-page=previewArtwork] .previewArtwork__publishedDate, [data-page=previewArtwork] .previewArtwork__surface { margin-top: 20px } [data-page=previewArtwork] .previewArtwork__label { color: #000 } [data-page=previewArtwork] .previewArtwork__buttonGroup { display: flex; margin-top: 60px } @media(max-width:1023px) { [data-page=previewArtwork] .previewArtwork__buttonGroup { margin-top: 40px } } [data-page=previewArtwork] .previewArtwork__buttonGroup>:not(:first-child) { margin-left: 30px } [data-page=previewArtwork] .previewArtwork__buttonGroup.is-disabled .c-cancelButton, [data-page=previewArtwork] .previewArtwork__buttonGroup.is-disabled .c-submitButton { opacity: .15; pointer-events: none } [data-page=previewArtwork] .previewArtwork__status+.previewArtwork__buttonGroup { margin-top: 36px } [data-page=previewArtwork] .previewArtwork__status { display: flex; margin-top: 40px; padding-top: 23px; position: relative } [data-page=previewArtwork] .previewArtwork__status__icon { height: 23px; margin-right: 11px; width: 23px } [data-page=previewArtwork] .previewArtwork__status__text { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px; max-width: 420px } [data-page=previewArtwork] .previewArtwork__status__text .guideline_cta { display: inline-block; text-decoration: underline } [data-page=previewArtwork] .previewArtwork__status .bold { font-family: NeueMontreal-Medium } [data-page=previewArtwork] .guidelines_modal { align-items: center; background-color: rgba(0, 0, 0, .6); display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: fixed; top: 0; transition: opacity .6s cubic-bezier(.445, .05, .55, .95); visibility: hidden; width: 100%; z-index: 9999 } [data-page=previewArtwork] .guidelines_modal.show { opacity: 1; visibility: visible } [data-page=previewArtwork] .guidelines_modal .guidelines__item { background-color: #fff; padding: 0; position: relative; width: 510px } [data-page=previewArtwork] .guidelines_modal .guidelines__itemPara { color: #888; font-family: NeueMontreal-Regular; font-size: 15px; font-style: normal; font-weight: 400; letter-spacing: .02em; line-height: 20px; margin-top: 20px } [data-page=previewArtwork] .guidelines_modal .close_btn { position: absolute; right: 12.5px; top: 12.5px; z-index: 1 } [data-page=previewArtwork] .guidelines_modal__row { display: flex; flex-wrap: wrap } [data-page=previewArtwork] .guidelines_modal__right { padding: 30px; position: relative; width: 100% } [data-page=previewArtwork] .guidelines_modal__title { font-size: 30px; line-height: 1; margin-bottom: 20px } [data-page=previewArtwork] .guidelines_modal_inner { padding-top: 20px; position: relative } [data-page=previewArtwork] .guidelines_modal__para { color: #000; font-size: 13px; letter-spacing: .03em; line-height: 15px } [data-page=previewArtwork] .guidelines_modal .guidelines__itemImageContainer { padding-top: 125% } @media(max-width:1023px) { [data-page=previewArtwork] .guidelines_modal .guidelines__item { max-width: 425px; padding: 25px; width: calc(100% - 40px) } [data-page=previewArtwork] .guidelines_modal .close_btn { right: 9px; top: 5px } [data-page=previewArtwork] .guidelines_modal .guidelines_modal__title { margin-bottom: 14px } } [data-page=previewArtwork] .guidelines_bullets { margin-left: 12px; margin-top: 20px; position: relative } [data-page=previewArtwork] .guidelines_bulletText { color: #000; font-size: 13px; letter-spacing: .03em; line-height: 15px; margin-left: auto; margin-right: auto; max-width: 800px; padding-left: 17px; position: relative } [data-page=previewArtwork] .guidelines_bulletText:nth-child(n+2) { margin-top: 15px } [data-page=previewArtwork] .guidelines_bulletText:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 4px; left: 3px; position: absolute; top: 5px; width: 4px } @media(max-width:1023px) { [data-page=previewArtwork] .guidelines_bulletText { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } [data-page=previewArtwork] .guidelines_bulletText:nth-child(n+2) { margin-top: 15px } [data-page=previewArtwork] .guidelines_bulletText:before { top: 4px } [data-page=previewArtwork] .guidelines_bulletText:last-child { margin-bottom: 20px } } [data-page=artistLanding] .artwork { align-items: center; display: flex; flex-direction: column; padding: 60px 0 90px; position: relative } @media(max-width:1023px) { [data-page=artistLanding] .artwork { padding: 50px 0 90px } } [data-page=artistLanding] .c-artistIntro { position: relative; z-index: 21 } [data-page=artistLanding] .c-artistIntro__instagram { margin-top: 20px; padding-bottom: 0 } [data-page=artistLanding] .c-artistIntro__followButton { margin-top: 20px } [data-page=artistLanding] .-ctaCollection { column-gap: 30px; display: inline-flex } [data-page=artistLanding] .detail__item__share { cursor: pointer; margin-top: 20px; padding-bottom: 0; position: relative } [data-page=artistLanding] .detail__item__share .c-button__text { color: #888 } [data-page=artistLanding] .detail__item__share .c-button__line { background-color: #888 } [data-page=artistLanding] .sharePopup { background-color: #fff; border: 1px solid #c4c4c4; opacity: 0; pointer-events: none; position: absolute; top: calc(100% + 8px); transform: translateY(20px); transition: opacity .2s cubic-bezier(.39, .575, .565, 1), transform .4s cubic-bezier(.39, .575, .565, 1); width: 231px } @media(max-width:1023px) { [data-page=artistLanding] .sharePopup { right: 0 } } [data-page=artistLanding] .sharePopup.show { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 9999999 } [data-page=artistLanding] .sharePopup__heading { background-color: #f3f3f3; border-bottom: 1px solid #c4c4c4; color: #000; padding: 20px } [data-page=artistLanding] .sharePopup__socialMediaLinks { display: flex; flex-flow: row wrap; padding: 20px; width: 100% } [data-page=artistLanding] .sharePopup__socialMediaLinks>:nth-child(n+4) { margin-top: 20px } [data-page=artistLanding] .sharePopup__socialMediaLinks>:not(:nth-child(3n+1)) { margin-left: 15px } [data-page=artistLanding] .sharePopup__socialMediaLinks svg path { fill: #000 !important } [data-page=artistLanding] .sharePopup__socialMediaLinks svg path:nth-of-type(2) { fill: #fff !important } [data-page=artistLanding] .sharePopup__socialMediaLink { align-items: center; display: flex; flex-direction: column; position: relative; width: 53px } [data-page=artistLanding] .sharePopup__socialMediaLink.is-active .sharePopup__socialMediaIconCircle, [data-page=artistLanding] .sharePopup__socialMediaLink:hover .sharePopup__socialMediaIconCircle { opacity: .23 } [data-page=artistLanding] .sharePopup__socialMediaLink.is-active .sharePopup__socialMediaLinkText, [data-page=artistLanding] .sharePopup__socialMediaLink:hover .sharePopup__socialMediaLinkText { opacity: .47 } [data-page=artistLanding] .sharePopup__socialMediaLinkIcon { height: 30px; width: 30px } [data-page=artistLanding] .sharePopup__socialMediaIconCircle { fill: #000; opacity: 1; transition: opacity .2s ease; will-change: opacity } [data-page=artistLanding] .sharePopup__socialMediaLinkText { color: #000; font-size: 11px; letter-spacing: .05em; line-height: 15px; margin-top: 5px; opacity: 1; transition: opacity .2s ease; will-change: opacity } [data-page=artistLanding] .sharePopup__linkCopiedMessage { align-items: center; background-color: #000; border-radius: 5px; color: #fff; display: flex; left: 50%; opacity: 0; padding: 10px 10px 12px 12px; pointer-events: none; position: absolute; top: calc(100% + 7px); transform: translateX(-50%) translateY(10px); transition: opacity .2s cubic-bezier(.39, .575, .565, 1), transform .4s cubic-bezier(.39, .575, .565, 1); white-space: nowrap } [data-page=artistLanding] .sharePopup__linkCopiedMessage.show { opacity: 1; transform: translateX(-50%) translateY(0) } [data-page=artistLanding] .sharePopup__linkCopiedMessageArrow { height: 10px; left: calc(50% - 5px); position: absolute; top: -5px; width: 10px; z-index: 0 } [data-page=artistLanding] .sharePopup__linkCopiedMessageTick { margin-right: 5px } [data-page=otherArtistArtwork].-hideNav .gallery__nav { display: none !important } [data-page=otherArtistArtwork] main { padding-top: 142px } @media(max-width:1023px) { [data-page=otherArtistArtwork] main { padding-top: 130px } } [data-page=otherArtistArtwork] .followArtistButton .c-button__text { font-size: 13px; letter-spacing: .03em; line-height: 15px; position: relative } [data-page=otherArtistArtwork] .followArtistButton .c-button__text:before { content: "Follow" } [data-page=otherArtistArtwork] .followArtistButton.is-following .c-button__text:before { content: "Following" } [data-page=otherArtistArtwork] .followArtistButton.is-following .c-button__text:hover:before { content: "Unfollow" } [data-page=otherArtistArtwork] .followArtistButton.c-submitButton { align-items: stretch; padding: 0 } [data-page=otherArtistArtwork] .followArtistButton.c-submitButton .c-submitButton__text.c-button__text { display: block; flex-grow: 1; text-align: center; width: 100% } [data-page=otherArtistArtwork] .followArtistButton.c-submitButton .c-submitButton__text.c-button__text:before { left: 50%; position: absolute; top: 12px; transform: translateX(-50%) } [data-page=otherArtistArtwork] .previewArtwork__label { color: #000 } [data-page=otherArtistArtwork] .artwork { padding-bottom: 40px } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork { padding-bottom: 50px } [data-page=otherArtistArtwork] .artwork__details { margin-top: 50px } } @media(min-width:1024px) { [data-page=otherArtistArtwork] .artwork { align-items: flex-start; display: flex; flex-flow: row wrap } [data-page=otherArtistArtwork] .artwork>* { flex-basis: calc(50% - 20px) } [data-page=otherArtistArtwork] .artwork__details { margin-left: 40px; padding-bottom: 0; padding-right: 80px } [data-page=otherArtistArtwork] .artwork__imagesWrapper { position: sticky; top: 142px } } [data-page=otherArtistArtwork] .artwork__imagesWrapper { overflow: hidden } [data-page=otherArtistArtwork] .artwork__images { display: flex; height: 520px; position: relative } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork__images { height: 256px } } [data-page=otherArtistArtwork] .artwork__imageWrapper { flex-shrink: 0; overflow: hidden; position: relative; width: 100% } [data-page=otherArtistArtwork] .artwork__image, [data-page=otherArtistArtwork] .artwork__video { height: 100%; left: 0; object-fit: contain; object-position: top center; pointer-events: none; position: absolute; top: 0; width: 100% } [data-page=otherArtistArtwork] .artwork__imageIndex { display: none } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork__imageIndex { display: block; font-size: 13px; letter-spacing: .03em; line-height: 15px; position: absolute; right: 15px; top: 15px; transform: translateZ(0); z-index: 1 } } [data-page=otherArtistArtwork] .artwork__nav { display: flex; position: absolute; right: 20px; top: 20px; z-index: 1 } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork__nav { display: none !important } } [data-page=otherArtistArtwork] .artwork__nav.is-hidden { display: none !important } [data-page=otherArtistArtwork] .artwork__navButton { flex-shrink: 0; height: 36px; width: 36px } [data-page=otherArtistArtwork] .artwork__navButton path { transition: opacity .2s ease } [data-page=otherArtistArtwork] .artwork__navButton.-prev { left: 1px; position: relative; transform: rotate(180deg) } [data-page=otherArtistArtwork] .artwork__navButton.is-disabled { pointer-events: none } [data-page=otherArtistArtwork] .artwork__navButton.is-disabled path { opacity: .4 } @media(hover:hover) { [data-page=otherArtistArtwork] .artwork__navButton:hover path { opacity: .4 } } [data-page=otherArtistArtwork] .artwork__aboutArtist { align-items: flex-start; display: flex } [data-page=otherArtistArtwork] .artwork__aboutArtist>:not(:first-child) { margin-left: 20px } [data-page=otherArtistArtwork] .artwork__artistProfilePicture { border-radius: 50%; height: 80px; width: 80px } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork__artistProfilePicture { height: 70px; width: 70px } } [data-page=otherArtistArtwork] .artwork__artistType { color: #888; margin-top: 5px } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork__artistType { margin-top: 2px } } [data-page=otherArtistArtwork] .artwork .followArtistButton { line-height: 1 !important; margin-top: 20px; padding-bottom: 0; text-align: center } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork .followArtistButton { margin-top: 10px } } [data-page=otherArtistArtwork] .artwork .followArtistButton .c-button__text { font-size: 13px; letter-spacing: .03em; line-height: 15px } [data-page=otherArtistArtwork] .artwork__title { margin-top: 40px; padding-top: 40px; position: relative } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork__title { font-size: 40px; line-height: 1; margin-top: 20px; padding-top: 50px } } @media(min-width:1024px) { [data-page=otherArtistArtwork] .artwork__title { font-size: 30px; line-height: 1 } } [data-page=otherArtistArtwork] .artwork__description { color: #000; margin-top: 20px } [data-page=otherArtistArtwork] .artwork__materialsUsed, [data-page=otherArtistArtwork] .artwork__publishedDate, [data-page=otherArtistArtwork] .artwork__surface { margin-top: 20px } [data-page=otherArtistArtwork] .artwork__label { color: #000 } [data-page=otherArtistArtwork] .artwork__comments { align-items: center; cursor: pointer; display: flex; margin-top: 40px; position: relative; z-index: 2 } @media(max-width:1023px) { [data-page=otherArtistArtwork] .artwork__comments { margin-top: 50px } } @media(hover:hover) { [data-page=otherArtistArtwork] .artwork__comments { transition: opacity .2s ease } [data-page=otherArtistArtwork] .artwork__comments:hover { opacity: .6 } } [data-page=otherArtistArtwork] .artwork__commentsIcon { height: 18px; position: relative; top: 2px; width: 18px } [data-page=otherArtistArtwork] .artwork__commentsCount { color: #000; display: flex; flex-direction: column; justify-content: stretch; margin-left: 5px } [data-page=otherArtistArtwork] .artwork__commentsCount:after { background-color: currentColor; content: ""; height: 1px; margin-top: 2px; width: 100% } @media(max-width:1023px) { [data-page=otherArtistArtwork] .c-commentSection { padding-top: 50px; position: relative } } [data-page=otherArtistArtwork] .gallery { align-items: center; display: flex; flex-direction: column; padding: 60px 0 90px; position: relative } [data-page=otherArtistArtwork] .gallery__header { display: flex } @media(max-width:1023px) { [data-page=otherArtistArtwork] .gallery__header { align-items: center; justify-content: space-between; width: 100% } } @media(min-width:1024px) { [data-page=otherArtistArtwork] .gallery__header { align-items: center; flex-direction: column } } [data-page=otherArtistArtwork] .gallery__heading { text-align: center } @media(max-width:1023px) { [data-page=otherArtistArtwork] .gallery__heading { text-align: left } } [data-page=otherArtistArtwork] .gallery .followArtistButton { line-height: 1 !important; margin-top: 20px; padding-bottom: 0; text-align: center } @media(max-width:1023px) { [data-page=otherArtistArtwork] .gallery .followArtistButton { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 0 } } @media(min-width:1024px) { [data-page=otherArtistArtwork] .gallery .followArtistButton { font-size: 13px; letter-spacing: .03em; line-height: 15px } } [data-page=otherArtistArtwork] .gallery__sliderContainer { margin-top: 40px; width: 100% } @media(max-width:1023px) { [data-page=otherArtistArtwork] .gallery__sliderContainer { margin-top: 20px } } [data-page=otherArtistArtwork] .gallery__slider { display: flex; overflow: hidden } @media(max-width:1023px) { [data-page=otherArtistArtwork] .gallery__slider { -ms-overflow-style: none; margin-left: -20px; overflow-x: scroll; overflow-y: hidden; padding-left: 20px; scroll-padding-left: 20px; scroll-padding-left: var(--viewportSidePadding); scroll-snap-type: x mandatory; scrollbar-width: none; width: 100vw } [data-page=otherArtistArtwork] .gallery__slider::-webkit-scrollbar { display: none } [data-page=otherArtistArtwork] .gallery__slider:after { content: ""; padding-left: 20px } } [data-page=otherArtistArtwork] .gallery__slider>:not(:first-child) { margin-left: 74px } @media(max-width:1023px) { [data-page=otherArtistArtwork] .gallery__slider>:not(:first-child) { margin-left: 30px } } [data-page=otherArtistArtwork] .gallery__slide { flex-shrink: 0; width: calc(33.33333% - 49.33333px) } @media(max-width:1023px) { [data-page=otherArtistArtwork] .gallery__slide { scroll-snap-align: start; width: 69.1176470588% } } [data-page=otherArtistArtwork] .gallery__nav { pointer-events: none } @media(max-width:1023px) { [data-page=otherArtistArtwork] .gallery__nav { display: none } } [data-page=otherArtistArtwork] .gallery__navButton { cursor: pointer; padding: 20px; pointer-events: auto; position: absolute; top: 50%; transition: opacity .2s ease } [data-page=otherArtistArtwork] .gallery__navButton.is-disabled { opacity: 0; pointer-events: none } [data-page=otherArtistArtwork] .gallery__navButtonArrow { height: 12px; width: auto } [data-page=otherArtistArtwork] .gallery__navButton.-previous { left: -55px; transform: rotate(180deg) } [data-page=otherArtistArtwork] .gallery__navButton.-next { right: -55px } @media(hover:hover) { [data-page=otherArtistArtwork] .gallery__navButton:hover { opacity: .6 } } [data-page=otherArtistArtwork] .previewArtwork__status+.previewArtwork__buttonGroup { margin-top: 36px } [data-page=otherArtistArtwork] .previewArtwork__status { display: flex; margin-top: 40px; padding-top: 23px; position: relative } [data-page=otherArtistArtwork] .previewArtwork__status__icon { height: 23px; margin-right: 11px; width: 23px } [data-page=otherArtistArtwork] .previewArtwork__status__text { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px; max-width: 420px } [data-page=otherArtistArtwork] .previewArtwork__status__text .guideline_cta { display: inline-block; text-decoration: underline } [data-page=otherArtistArtwork] .previewArtwork__status .bold { font-family: NeueMontreal-Medium } [data-page=otherArtistArtwork] .guidelines_modal { align-items: center; background-color: rgba(0, 0, 0, .6); display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: fixed; top: 0; transition: opacity .6s cubic-bezier(.445, .05, .55, .95); visibility: hidden; width: 100%; z-index: 9999 } [data-page=otherArtistArtwork] .guidelines_modal.show { opacity: 1; visibility: visible } [data-page=otherArtistArtwork] .guidelines_modal .guidelines__item { background-color: #fff; padding: 0; position: relative; width: 510px } [data-page=otherArtistArtwork] .guidelines_modal .guidelines__itemPara { color: #888; font-family: NeueMontreal-Regular; font-size: 15px; font-style: normal; font-weight: 400; letter-spacing: .02em; line-height: 20px; margin-top: 20px } [data-page=otherArtistArtwork] .guidelines_modal .close_btn { position: absolute; right: 12.5px; top: 12.5px; z-index: 1 } [data-page=otherArtistArtwork] .guidelines_modal__row { display: flex; flex-wrap: wrap } [data-page=otherArtistArtwork] .guidelines_modal__right { padding: 30px; position: relative; width: 100% } [data-page=otherArtistArtwork] .guidelines_modal__title { font-size: 30px; line-height: 1; margin-bottom: 20px } [data-page=otherArtistArtwork] .guidelines_modal_inner { padding-top: 20px; position: relative } [data-page=otherArtistArtwork] .guidelines_modal__para { color: #000; font-size: 13px; letter-spacing: .03em; line-height: 15px } [data-page=otherArtistArtwork] .guidelines_modal .guidelines__itemImageContainer { padding-top: 125% } @media(max-width:1023px) { [data-page=otherArtistArtwork] .guidelines_modal .guidelines__item { max-width: 425px; padding: 25px; width: calc(100% - 40px) } [data-page=otherArtistArtwork] .guidelines_modal .close_btn { right: 9px; top: 5px } [data-page=otherArtistArtwork] .guidelines_modal .guidelines_modal__title { margin-bottom: 14px } } [data-page=otherArtistArtwork] .guidelines_bullets { margin-left: 12px; margin-top: 20px; position: relative } [data-page=otherArtistArtwork] .guidelines_bulletText { color: #000; font-size: 13px; letter-spacing: .03em; line-height: 15px; margin-left: auto; margin-right: auto; max-width: 800px; padding-left: 17px; position: relative } [data-page=otherArtistArtwork] .guidelines_bulletText:nth-child(n+2) { margin-top: 15px } [data-page=otherArtistArtwork] .guidelines_bulletText:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 4px; left: 3px; position: absolute; top: 5px; width: 4px } @media(max-width:1023px) { [data-page=otherArtistArtwork] .guidelines_bulletText { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } [data-page=otherArtistArtwork] .guidelines_bulletText:nth-child(n+2) { margin-top: 15px } [data-page=otherArtistArtwork] .guidelines_bulletText:before { top: 4px } [data-page=otherArtistArtwork] .guidelines_bulletText:last-child { margin-bottom: 20px } [data-page=showcaseLanding] main { padding-top: 123px } } [data-page=showcaseLanding] .banner { padding-bottom: 40px; padding-top: 0; position: relative } [data-page=showcaseLanding] .banner .editProfilePopup__submitButton { background-color: #d60812; display: inline-flex; margin-top: 30px; position: relative } [data-page=showcaseLanding] .banner .editProfilePopup__submitButton .editProfilePopup__submitButtonText { font-size: 15px } @media(max-width:1023px) { [data-page=showcaseLanding] .banner .editProfilePopup__submitButton { margin-top: 20px } } [data-page=showcaseLanding] .banner .editProfilePopup__submitButton:hover { background-color: #c6030d } [data-page=showcaseLanding] .banner .editProfilePopup__submitButton.-upload, [data-page=showcaseLanding] .banner .editProfilePopup__submitButton.-upload:hover { background-color: #000; color: #fff } @media(max-width:1023px) { [data-page=showcaseLanding] .banner { padding-bottom: 20px } } @media(max-width:1023px)and (min-width:768px) { [data-page=showcaseLanding] .banner { padding-bottom: 40px } } @media(min-width:1024px) { [data-page=showcaseLanding] .banner .innerBanner { align-items: flex-end; display: flex; justify-content: space-between } [data-page=showcaseLanding] .banner__heading { flex: 1; font-size: 90px; letter-spacing: -.03em; line-height: 1 } } @media(max-width:1023px) { [data-page=showcaseLanding] .banner__heading { font-size: 50px; line-height: 1 } } @media(min-width:1024px) { [data-page=showcaseLanding] .banner__subheading { margin-left: 30px; width: var(--gridCol3) } } @media(max-width:1023px) { [data-page=showcaseLanding] .banner__subheading { margin-top: 20px } } @media(max-width:1023px)and (min-width:768px) { [data-page=showcaseLanding] .banner__subheading { margin-top: 20px; width: 80% } } [data-page=showcaseLanding] .filters { position: sticky !important; position: -webkit-sticky !important; top: 0; z-index: 24 } [data-page=showcaseLanding] .filters__inner { -ms-overflow-style: none; background-color: #fff; display: flex; margin-left: calc(0px - var(--viewportSidePadding)); overflow-x: scroll; padding: 20px var(--viewportSidePadding); scrollbar-width: none; width: var(--viewportWidth) } [data-page=showcaseLanding] .filters__inner::-webkit-scrollbar { display: none } [data-page=showcaseLanding] .filters__item { color: #888; cursor: pointer; position: relative; white-space: nowrap } [data-page=showcaseLanding] .filters__item.is-active, [data-page=showcaseLanding] .filters__item:hover { color: #000 } [data-page=showcaseLanding] .filters__item.is-active:after, [data-page=showcaseLanding] .filters__item:hover:after { background-color: #000; bottom: -20px; content: ""; height: 3px; left: 0; opacity: 1; position: absolute; -webkit-transition: .3s cubic-bezier(.77, 0, .175, 1); -o-transition: .3s cubic-bezier(.77, 0, .175, 1); transition: .3s cubic-bezier(.77, 0, .175, 1); width: 100% } @media(max-width:1023px) { [data-page=showcaseLanding] .filters__item { font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:1024px) { [data-page=showcaseLanding] .filters__item { font-size: 20px; line-height: 25px } } [data-page=showcaseLanding] .filters__item:not(:first-of-type) { margin-left: 40px } @media(max-width:1023px) { [data-page=showcaseLanding] .filters__item:not(:first-of-type) { margin-left: 20px } } [data-page=showcaseLanding] .artwork { align-items: center; display: flex; flex-direction: column; padding: 60px 0; position: relative } @media(max-width:1023px) { [data-page=showcaseLanding] .artwork { padding: 40px 0 50px } } @media(min-width:1024px) { [data-page=showcaseLanding] .c-artworkPreviews { margin-left: -74px; margin-top: -70px; width: calc(100% + 74px) } } @media(max-width:1023px) { [data-page=showcaseLanding] .c-artworkPreviews { margin-top: -30px } } @media(min-width:1024px) { [data-page=showcaseLanding] .c-artworkPreview { margin-left: 74px; margin-top: 70px; width: calc(33.33333% - 74px) } } @media(max-width:1023px) { [data-page=showcaseLanding] .c-artworkPreview { margin-top: 30px } } [data-page=showcaseLanding] .showcaseYourArtwork { margin-left: calc(0px - var(--viewportSidePadding)); overflow: hidden; padding-bottom: 194px; padding-left: var(--viewportSidePadding); padding-right: var(--viewportSidePadding); padding-top: 80px; position: relative; width: var(--viewportWidth) } [data-page=showcaseLanding] .showcaseYourArtwork:before { animation: hueRotate 20s ease infinite; background-image: url(../assets/pages/showcase-landing/gradient_780x456.png); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 456px; left: 50%; position: absolute; top: 20px; width: 780px; z-index: -1 } @media(max-width:1023px) { [data-page=showcaseLanding] .showcaseYourArtwork:before { height: 460px; left: unset; right: -80px; top: 110px; width: 460px } } @media(min-width:1024px) { [data-page=showcaseLanding] .showcaseYourArtwork:before { transform: translateX(-60%) } [data-page=showcaseLanding] .showcaseYourArtwork__inner { padding-left: 39.1452991453% } } @media(max-width:1023px) { [data-page=showcaseLanding] .showcaseYourArtwork__heading { font-size: 40px; line-height: 1; width: 217px } } @media(min-width:1024px) { [data-page=showcaseLanding] .showcaseYourArtwork__heading { font-size: 50px; line-height: 1 } } [data-page=showcaseLanding] .showcaseYourArtwork__button { margin-top: 40px } @keyframes hueRotate { 0% { filter: hue-rotate(0deg) } 25% { filter: hue-rotate(90deg) } 50% { filter: hue-rotate(0deg) } 75% { filter: hue-rotate(-90deg) } to { filter: hue-rotate(0deg) } } [data-page=showcaseLanding] .showcaseDiscoverModal { background-color: #fff; border: 1px solid #000; bottom: 20px; max-width: 318px; opacity: 0; padding: 20px; position: fixed; right: 20px; transform: translateY(100%); z-index: 25 } @media(max-width:1023px) { [data-page=showcaseLanding] .showcaseDiscoverModal { bottom: 70px; max-width: 250px } } [data-page=showcaseLanding] .showcaseDiscoverModal__close { position: absolute; right: 9px; top: 9px } [data-page=showcaseLanding] .showcaseDiscoverModal__title { font-size: 20px; line-height: 25px; padding-right: 24px } @media(max-width:1023px) { [data-page=showcaseLanding] .showcaseDiscoverModal__title { font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-right: 0 } } [data-page=showcaseLanding] .showcaseDiscoverModal .c-button { margin-top: 20px } @media(max-width:1023px) { [data-page=showcaseLanding] .showcaseDiscoverModal .c-button { margin-top: 10px } } [data-page=showcaseLanding] .showcaseDiscoverModal.-openState { opacity: 1; transform: translateY(0); transition: .6s cubic-bezier(.785, .135, .15, .86) } [data-page=showcaseLanding] .showcaseDiscoverModal.-closeState { opacity: 0; transform: translateY(100%); transition: .6s cubic-bezier(.075, .82, .165, 1) } [data-page=investorLanding] main { padding-top: 108px } [data-page=investorLanding] .investorBanner { display: flex } [data-page=investorLanding] .investorBanner__left { align-self: center; flex-basis: 47%; padding-bottom: 30px; padding-top: 30px; position: relative } [data-page=investorLanding] .investorBanner__right { align-self: center; flex-basis: 53%; margin-left: -1px; padding-bottom: 30px; padding-left: 32px; padding-top: 30px; position: relative } [data-page=investorLanding] .investorBanner__preText { font-size: 40px; line-height: 1; margin-bottom: 10px } [data-page=investorLanding] .investorBanner__title { font-size: 90px; letter-spacing: -.03em; line-height: 1; line-height: 89% } [data-page=investorLanding] .investorBanner__para { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 10px; max-width: 452px } [data-page=investorLanding] .investorBanner .investorUpdates_container { max-width: 336px; position: relative } [data-page=investorLanding] .investorBanner .investorUpdates_listing { -ms-overflow-style: none; cursor: grab; display: flex; flex-direction: row; max-width: 336px; overflow: hidden; overflow-x: scroll; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none } [data-page=investorLanding] .investorBanner .investorUpdates_listing::-webkit-scrollbar { display: none } [data-page=investorLanding] .investorBanner .investorUpdates_listing.active { cursor: grabbing } [data-page=investorLanding] .investorBanner .investorUpdates_slide { display: inline-flex; flex-direction: column; flex-shrink: 0; margin-right: 30px; max-width: 306px; scroll-snap-align: start; user-select: none; width: 306px } [data-page=investorLanding] .investorBanner .investorUpdates_pretitleContain { align-items: center; display: inline-flex } [data-page=investorLanding] .investorBanner .investorUpdates_icon { height: 16px; margin-right: 5px; width: 15px } [data-page=investorLanding] .investorBanner .investorUpdates_pretitle { font-size: 15px; letter-spacing: .02em; line-height: 20px } [data-page=investorLanding] .investorBanner .investorUpdates_bottomContain { display: inline-flex; flex-direction: column } [data-page=investorLanding] .investorBanner .bottomline { background: #000; height: 1px; margin-top: 20px; position: relative; width: 100% } [data-page=investorLanding] .investorBanner .investorUpdates_para { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 10px } [data-page=investorLanding] .investorBanner .investorUpdates_download { align-items: center; display: inline-flex; margin-top: 30px; overflow: hidden } [data-page=investorLanding] .investorBanner .investorUpdates_download_text { color: #e1251b; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-right: 10px } [data-page=investorLanding] .investorBanner .investorUpdates_downloadIcon { display: flex; flex-direction: column } [data-page=investorLanding] .investorBanner .investorUpdates_downloadIcon_line { background-color: #e1251b; height: 1px; margin-top: 2px; width: 100% } @media(hover:hover) { [data-page=investorLanding] .investorBanner .investorUpdates_download:hover .investorUpdates_downloadIcon svg { animation-duration: 1s; animation-name: animateArrowOnMouseover2 } } [data-page=investorLanding] .investorBanner .investorUpdates_bullets { display: flex; margin-top: 30px; position: relative } [data-page=investorLanding] .investorBanner .investorUpdates_bullet { border: 1px solid #000; border-radius: 50%; height: 8px; position: relative; width: 8px } [data-page=investorLanding] .investorBanner .investorUpdates_bullet.-active { background-color: #000 } [data-page=investorLanding] .investorBanner .investorUpdates_bullet:nth-child(n+2) { margin-left: 12px } @media(max-width:1023px) { [data-page=investorLanding] .investorBanner { flex-wrap: wrap } [data-page=investorLanding] .investorBanner__left { flex-basis: 100%; padding-bottom: 40px; padding-top: 20px } [data-page=investorLanding] .investorBanner__right { border-bottom: 1px solid #000; border-top: 1px solid #000; flex-basis: 100%; padding: 0 } [data-page=investorLanding] .investorBanner__preText { font-size: 30px; line-height: 1; margin-bottom: 5px } [data-page=investorLanding] .investorBanner__title { font-size: 50px; line-height: 1 } [data-page=investorLanding] .investorBanner__para { margin-top: 20px; width: 90% } [data-page=investorLanding] .investorBanner .investorUpdates_container { max-width: calc(100vw - 40px) } [data-page=investorLanding] .investorBanner .investorUpdates_listing { max-width: unset; width: calc(100% + 19px) } [data-page=investorLanding] .investorBanner .investorUpdates_listing:after { content: ""; height: 100%; padding-left: 19px } [data-page=investorLanding] .investorBanner .investorUpdates_slide { border-right: 1px solid #000; margin-right: 0; max-width: unset; padding-bottom: 30px; padding-right: 50px; padding-top: 30px; width: 270px } [data-page=investorLanding] .investorBanner .investorUpdates_slide:nth-child(n+2) { padding-left: 30px; width: 300px } [data-page=investorLanding] .investorBanner .bottomline { margin-top: 30px } [data-page=investorLanding] .investorBanner .investorUpdates_bullets { display: none } } [data-page=investorLanding] .investorPdfs { display: flex; position: relative } [data-page=investorLanding] .investorPdfs__left { align-self: flex-start; border-top: 1px solid #000; flex-basis: calc(47% - 1px); flex-shrink: 0; position: relative } [data-page=investorLanding] .investorPdfs__right { align-self: flex-start; flex-basis: 53%; flex-shrink: 0; position: relative } [data-page=investorLanding] .investorPdfs__right>.anim-line { max-width: 612px; transform: scale(1); transform-origin: top left } [data-page=investorLanding] .investorPdfs__title { font-size: 40px; line-height: 1; padding-bottom: 48px; padding-top: 50px } [data-page=investorLanding] .investorPdfs__pdfListing { display: flex; flex-direction: row; position: relative } [data-page=investorLanding] .investorPdfs__pdfContain { align-items: center; border-bottom: 1px solid #000; border-right: 1px solid #000; border-top: 1px solid #000; display: inline-flex; flex-shrink: 0; height: 140px; position: relative; width: 153px } [data-page=investorLanding] .investorPdfs__pdfContain:first-child { border-left: 1px solid #000 } @media(hover:hover) { [data-page=investorLanding] .investorPdfs__pdfContain:hover .investorPdfs__pdfContain__box { display: block } } [data-page=investorLanding] .investorPdfs__pdfContain__box { background-color: #000; display: none; height: 100%; left: 0; padding: 40px; position: absolute; text-align: center; top: 0; width: 100% } [data-page=investorLanding] .investorPdfs__pdfContain__box img { margin-top: 12px } [data-page=investorLanding] .investorPdfs__pdfText { display: inline-block; font-size: 30px; line-height: 1; padding: 40px; position: relative; text-align: center; width: 100% } @media(max-width:1023px) { [data-page=investorLanding] .investorPdfs { flex-wrap: wrap; padding-bottom: 50px; padding-top: 50px } [data-page=investorLanding] .investorPdfs__left { border-top: 0; flex-basis: 100% } [data-page=investorLanding] .investorPdfs__right { flex-basis: 100%; padding-left: 0 } [data-page=investorLanding] .investorPdfs__title { font-size: 30px; line-height: 1; padding-bottom: 20px; padding-top: 0 } [data-page=investorLanding] .investorPdfs__pdfContain { border: 1px solid #000; height: 110px; width: 50% } [data-page=investorLanding] .investorPdfs__pdfContain:nth-child(2), [data-page=investorLanding] .investorPdfs__pdfContain:nth-child(4) { border-left: 0 } [data-page=investorLanding] .investorPdfs__pdfContain:nth-child(n+3) { border-top: 0 } [data-page=investorLanding] .investorPdfs__pdfListing { flex-wrap: wrap } [data-page=investorLanding] .investorPdfs__pdfText { font-size: 20px; line-height: 25px; padding: 20px } [data-page=investorLanding] .investorPdfs__pdfText img { margin-bottom: -2px; margin-left: 5px } } @media only screen and (min-width:1024px)and (max-width:1178px)and (orientation:landscape) { [data-page=investorLanding] .investorPdfs .investorPdfs__title { padding-bottom: 43px; padding-top: 43px } [data-page=investorLanding] .investorPdfs .investorPdfs__pdfContain { height: 128px; width: 127.8px } [data-page=investorLanding] .investorPdfs .investorPdfs__pdfContain .investorPdfs__pdfText { padding: 20px } } @media only screen and (min-width:1079px)and (max-width:1180px)and (orientation:landscape) { [data-page=investorLanding] .investorPdfs .investorPdfs__title { padding-bottom: 48px; padding-top: 48px } [data-page=investorLanding] .investorPdfs .investorPdfs__pdfContain { height: 138px; width: 148.5px } [data-page=investorLanding] .investorPdfs .investorPdfs__pdfContain .investorPdfs__pdfText { padding: 20px } } [data-page=investorLanding] .c-investorData .investorUpdates_downloadTooltip { left: 0; margin-left: auto; margin-right: auto; max-width: 100px; top: calc(100% - 30px) } @media(min-width:1024px) { [data-page=investorLanding] .investorPdfs+.investorPdfs { margin-top: -1px } } [data-page=investorLanding] .annualReport .investorPdfs__left { border-bottom: 1px solid #000 } @media(max-width:1023px) { [data-page=investorLanding] .annualReport { padding-bottom: 0 } [data-page=investorLanding] .annualReport .investorPdfs__left { border-bottom: 0 } } [data-page=investorLanding] .c-quote { margin-top: 150px } @media(max-width:1023px) { [data-page=investorLanding] .c-quote { margin-top: 93px } } @keyframes animateArrowOnMouseover2 { 0% { opacity: 1; transform: translateY(0) } 50% { opacity: 0; transform: translate3d(0, 4px, 0) } 51% { opacity: 0; transform: translate3d(0, -4px, 0) } to { opacity: 1; transform: translateY(0) } } [data-page=companyInfo] main { padding-top: 108px } [data-page=companyInfo] .c-categoryBanner { padding-bottom: 60px; padding-top: 40px } [data-page=companyInfo] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=companyInfo] .c-categoryBanner__subheading { max-width: 234px } [data-page=companyInfo] .c-categoryBanner__rhs { padding-bottom: 10px } @media(max-width:1023px) { [data-page=companyInfo] .c-categoryBanner { padding-bottom: 30px; padding-top: 20px } [data-page=companyInfo] .c-categoryBanner__heading { font-family: NeueMontreal-Medium; font-size: 50px; left: -3px; line-height: 1 } [data-page=companyInfo] .c-categoryBanner__subheading { max-width: 240px } [data-page=companyInfo] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=companyInfo] .c-categoryMenu { top: 40px; z-index: 23 } @media(hover:hover) { [data-page=companyInfo] .c-categoryMenu__menuItem:hover { color: #e1251b } } [data-page=companyInfo] .c-categoryMenu__menuItem.is-active { color: #e1251b } @media(max-width:1023px) { [data-page=companyInfo] .c-categoryMenu { top: 50px } } [data-page=companyInfo] .c-categoryMenu__menuItem.is-active:after, [data-page=companyInfo] .c-categoryMenu__menuItem:hover:after { background-color: #e1251b } [data-page=companyInfo] .investor__row { display: flex } [data-page=companyInfo] .investor__row .investor__colLeft { flex-basis: 47%; position: relative } [data-page=companyInfo] .investor__row .investor__colRight { flex-basis: 53%; padding-left: 30px; position: relative } @media(max-width:1023px) { [data-page=companyInfo] .investor__row { flex-wrap: wrap } [data-page=companyInfo] .investor__row .investor__colLeft, [data-page=companyInfo] .investor__row .investor__colRight { flex-basis: 100% } [data-page=companyInfo] .investor__row .investor__colRight { padding-left: 0 } } [data-page=companyInfo] .companyInformation { padding-bottom: 60px; padding-top: 40px; position: relative } [data-page=companyInfo] .companyInformation .c-productDetail__productFeatureTitleCol .c-productDetail__productFeatureTitle { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px } [data-page=companyInfo] .companyInformation .c-productDetail__productFeatureDesc { font-size: 15px; letter-spacing: .02em; line-height: 20px } @media(max-width:1023px) { [data-page=companyInfo] .companyInformation .c-productDetail__productFeature .c-productDetail__productFeatureDescCol, [data-page=companyInfo] .companyInformation .c-productDetail__productFeature .c-productDetail__productFeatureTitleCol { width: 50% } [data-page=companyInfo] .companyInformation .c-productDetail__productFeature .c-productDetail__productFeatureDescCol { padding-left: 20px } } [data-page=companyInfo] .governance { padding-bottom: 60px; padding-top: 40px; position: relative } [data-page=companyInfo] .governance .investor__row+.investor__row { margin-top: 80px } @media(max-width:1023px) { [data-page=companyInfo] .governance .investor__row+.investor__row { margin-top: 50px } } [data-page=companyInfo] .governance .management__list { column-gap: 30px; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 60px } @media(max-width:1023px) { [data-page=companyInfo] .governance .management__list { column-gap: 20px; row-gap: 50px } } [data-page=companyInfo] .governance .management__list .management { position: relative; width: 100% } [data-page=companyInfo] .governance .management__list .management__itemImageContainer { padding-top: 124.8148148148% } [data-page=companyInfo] .governance .management__list .management__lineContainer { height: 1px; margin-top: 20px; position: relative } [data-page=companyInfo] .governance .management__list .management__position { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 20px } @media(max-width:1023px) { [data-page=companyInfo] .governance .management__list .management__position { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } } [data-page=companyInfo] .governance .management__list .management__name { font-size: 20px; line-height: 25px; margin-top: 5px } @media(max-width:1023px) { [data-page=companyInfo] .governance .management__list .management__name { font-size: 15px; letter-spacing: .02em; line-height: 20px } } [data-page=companyInfo] .governance .board__listing { column-gap: 30px; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 80px } @media(max-width:1023px) { [data-page=companyInfo] .governance .board__listing { column-gap: 20px; row-gap: 50px } } [data-page=companyInfo] .governance .board__listing .boardBox { position: relative; width: 100% } [data-page=companyInfo] .governance .board__listing .boardBox__lineContainer { height: 1px; margin-bottom: 20px; position: relative } [data-page=companyInfo] .governance .board__listing .boardBox__preTitle { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } [data-page=companyInfo] .governance .board__listing .boardBox__title { font-size: 20px; line-height: 25px; margin-top: 5px } @media(max-width:1023px) { [data-page=companyInfo] .governance .board__listing .boardBox__title { font-size: 15px; letter-spacing: .02em; line-height: 20px } } [data-page=companyInfo] .governance .board__listing .boardBox__para { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 20px } @media(max-width:1023px) { [data-page=companyInfo] .governance .board__listing .boardBox.-spanFull { grid-column: 1/3 } } [data-page=companyInfo] .factories { padding-bottom: 60px; padding-top: 60px; position: relative } @media(max-width:1023px) { [data-page=companyInfo] .factories { padding-bottom: 50px; padding-top: 30px } } [data-page=companyInfo] .factories .factories__listing { column-gap: 30px; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 60px } @media(max-width:1023px) { [data-page=companyInfo] .factories .factories__listing { column-gap: 20px; row-gap: 30px } } [data-page=companyInfo] .factories .factories__listing .factory { position: relative; width: 100% } [data-page=companyInfo] .factories .factories__listing .factory__top { align-items: flex-end; display: flex } [data-page=companyInfo] .factories .factories__listing .factory__icon { height: 27px; margin-bottom: 3px; width: 26px } [data-page=companyInfo] .factories .factories__listing .factory__title { font-size: 20px; line-height: 25px; margin-left: 15px } @media(max-width:1023px) { [data-page=companyInfo] .factories .factories__listing .factory__title { font-size: 15px; letter-spacing: .02em; line-height: 20px } } [data-page=companyInfo] .factories .factories__listing .factory__para { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 10px; max-width: 260px } @media(max-width:1023px) { [data-page=companyInfo] .factories .factories__listing .factory__para { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px } } [data-page=companyInfo] .contact { padding-top: 60px; position: relative } @media(max-width:1023px) { [data-page=companyInfo] .contact { padding-top: 30px } } [data-page=companyInfo] .contact .contact__listing { display: flex; flex-direction: column } [data-page=companyInfo] .contact .contact__listing .contactBox { column-gap: 30px; display: grid; grid-template-columns: repeat(2, 1fr) } [data-page=companyInfo] .contact .contact__listing .contactBox:nth-child(n+2) { margin-top: 20px } [data-page=companyInfo] .contact .contact__listing .contactBox:nth-child(2) .contactBox__address { max-width: 230px } [data-page=companyInfo] .contact .contact__listing .contactBox__right { display: flex; flex-direction: column } [data-page=companyInfo] .contact .contact__listing .contactBox__preTitle { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px } [data-page=companyInfo] .contact .contact__listing .contactBox__address { font-size: 15px; letter-spacing: .02em; line-height: 20px; max-width: 220px } [data-page=companyInfo] .contact .contact__listing .contactBox__mail, [data-page=companyInfo] .contact .contact__listing .contactBox__tel { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 20px } [data-page=companyInfo] .contact .contact__listing .contactBox__lineContainer { grid-column: 1/3; height: 1px; margin-top: 40px; position: relative } @media(max-width:1023px) { [data-page=companyInfo] .contact .contact__listing .contactBox__preTitle { grid-column: 1/3; margin-bottom: 15px } [data-page=companyInfo] .contact .contact__listing .contactBox__right { grid-column: 1/3 } [data-page=companyInfo] .contact .contact__listing .contactBox__lineContainer { margin-top: 20px } } [data-page=companyInfo] .companyInformation .anim-line, [data-page=companyInfo] .contact .anim-line, [data-page=companyInfo] .factories .anim-line, [data-page=companyInfo] .governance .anim-line { transform: scale(1) !important } [data-page=companyInfo] .heading__3 { font-size: 40px; line-height: 1; margin-bottom: 40px } @media(max-width:1023px) { [data-page=companyInfo] .heading__3 { margin-bottom: 30px } } [data-page=companyInfo] .heading__4 { color: #e1251b; font-size: 30px; line-height: 1 } @media(max-width:1023px) { [data-page=companyInfo] .heading__4 { font-size: 20px; line-height: 25px; margin-bottom: 20px } } [data-page=companyInfo] .c-quote { margin-top: 156px } @media(max-width:1023px) { [data-page=companyInfo] .c-quote { margin-top: 114px } } [data-page=quarterlyResults] main { padding-top: 108px } [data-page=quarterlyResults] .c-categoryBanner { padding-bottom: 60px; padding-top: 40px } [data-page=quarterlyResults] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=quarterlyResults] .c-categoryBanner__subheading { max-width: 234px } [data-page=quarterlyResults] .c-categoryBanner__rhs { padding-bottom: 10px } @media(max-width:1023px) { [data-page=quarterlyResults] .c-categoryBanner { padding-bottom: 30px; padding-top: 20px } [data-page=quarterlyResults] .c-categoryBanner__heading { font-size: 50px; left: -3px; line-height: 1 } [data-page=quarterlyResults] .c-categoryBanner__subheading { max-width: 240px } [data-page=quarterlyResults] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=quarterlyResults] .c-categoryMenu { top: 40px; z-index: 23 } @media(hover:hover) { [data-page=quarterlyResults] .c-categoryMenu__menuItem:hover { color: #e1251b } } [data-page=quarterlyResults] .c-categoryMenu__menuItem.is-active { color: #e1251b } @media(max-width:1023px) { [data-page=quarterlyResults] .c-categoryMenu { top: 50px } } [data-page=quarterlyResults] .c-categoryMenu__menuItem.is-active:after, [data-page=quarterlyResults] .c-categoryMenu__menuItem:hover:after { background-color: #e1251b } [data-page=quarterlyResults] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=quarterlyResults] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=quarterlyResults] .c-investorData { padding-bottom: 50px; padding-top: 40px } [data-page=quarterlyResults] .c-investorData+.c-investorData { padding-top: 50px } } [data-page=quarterlyResults] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=quarterlyResults] .c-quote { margin-top: 71px } } [data-page=shareholdingPattern] main { padding-top: 108px } [data-page=shareholdingPattern] .c-categoryBanner { padding-bottom: 60px; padding-top: 40px } [data-page=shareholdingPattern] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=shareholdingPattern] .c-categoryBanner__subheading { max-width: 234px } [data-page=shareholdingPattern] .c-categoryBanner__rhs { padding-bottom: 10px } @media(max-width:1023px) { [data-page=shareholdingPattern] .c-categoryBanner { padding-bottom: 30px; padding-top: 20px } [data-page=shareholdingPattern] .c-categoryBanner__heading { font-size: 50px; left: -3px; line-height: 1 } [data-page=shareholdingPattern] .c-categoryBanner__subheading { max-width: 240px } [data-page=shareholdingPattern] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=shareholdingPattern] .c-categoryMenu { top: 40px; z-index: 23 } @media(hover:hover) { [data-page=shareholdingPattern] .c-categoryMenu__menuItem:hover { color: #e1251b } } [data-page=shareholdingPattern] .c-categoryMenu__menuItem.is-active { color: #e1251b } @media(max-width:1023px) { [data-page=shareholdingPattern] .c-categoryMenu { top: 50px } } [data-page=shareholdingPattern] .c-categoryMenu__menuItem.is-active:after, [data-page=shareholdingPattern] .c-categoryMenu__menuItem:hover:after { background-color: #e1251b } [data-page=shareholdingPattern] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=shareholdingPattern] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=shareholdingPattern] .c-investorData { padding-bottom: 50px; padding-top: 40px } } [data-page=shareholdingPattern] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=shareholdingPattern] .c-quote { margin-top: 71px } } [data-page=updatesForms] main { padding-top: 108px } [data-page=updatesForms] .c-categoryBanner { padding-bottom: 60px; padding-top: 40px } [data-page=updatesForms] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=updatesForms] .c-categoryBanner__subheading { max-width: 234px } [data-page=updatesForms] .c-categoryBanner__rhs { padding-bottom: 10px } @media(max-width:1023px) { [data-page=updatesForms] .c-categoryBanner { padding-bottom: 30px; padding-top: 20px } [data-page=updatesForms] .c-categoryBanner__heading { font-size: 50px; left: -3px; line-height: 1 } [data-page=updatesForms] .c-categoryBanner__subheading { max-width: 240px } [data-page=updatesForms] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=updatesForms] .c-categoryMenu { top: 40px; z-index: 23 } @media(hover:hover) { [data-page=updatesForms] .c-categoryMenu__menuItem:hover { color: #e1251b } } [data-page=updatesForms] .c-categoryMenu__menuItem.is-active { color: #e1251b } @media(max-width:1023px) { [data-page=updatesForms] .c-categoryMenu { top: 50px } } [data-page=updatesForms] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=updatesForms] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=updatesForms] .c-investorData { padding-bottom: 50px; padding-top: 40px } } [data-page=updatesForms] .c-investorData__right { align-self: flex-start } [data-page=updatesForms] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=updatesForms] .c-quote { margin-top: 71px } } [data-page=annualReports] main { padding-top: 108px } [data-page=annualReports] .c-categoryBanner { padding-bottom: 60px; padding-top: 40px } [data-page=annualReports] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=annualReports] .c-categoryBanner__subheading { max-width: 234px } [data-page=annualReports] .c-categoryBanner__rhs { padding-bottom: 10px } @media(max-width:1023px) { [data-page=annualReports] .c-categoryBanner { padding-bottom: 30px; padding-top: 20px } [data-page=annualReports] .c-categoryBanner__heading { font-size: 50px; left: -3px; line-height: 1 } [data-page=annualReports] .c-categoryBanner__subheading { max-width: 240px } [data-page=annualReports] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=annualReports] .c-categoryMenu__menuItem.is-active:after, [data-page=annualReports] .c-categoryMenu__menuItem:hover:after { background-color: #e1251b } [data-page=annualReports] .c-productDetail__dropdownRhs { border: 1px solid #000; max-width: 230px } [data-page=annualReports] .c-productDetail__dropdownRhs .c-productDetail__dropdownOptionSelected { padding-bottom: 20px; padding-top: 20px } [data-page=annualReports] .c-productDetail__dropdownRhs:after { right: 20px } [data-page=annualReports] .c-productDetail__dropdownRhs .c-productDetail__dropdownOptions { left: -1px; top: calc(100% + 1px); width: calc(100% + 2px); z-index: 23 } [data-page=annualReports] .c-productDetail__dropdownRhs .c-productDetail__dropdownOption { padding: 15px } @media(hover:hover) { [data-page=annualReports] .c-productDetail__dropdownRhs .c-productDetail__dropdownOption:hover { background-color: #f3f3f3 } } [data-page=annualReports] .c-productDetail__dropdownRhs .c-productDetail__dropdownOption:nth-child(n+2) { border-top: 1px solid #c4c4c4 } [data-page=annualReports] .c-productDetail__dropdownRhs.is-opened:after { transform: rotate(180deg) } [data-page=annualReports] .c-categoryMenu { top: 40px; z-index: 22 } @media(hover:hover) { [data-page=annualReports] .c-categoryMenu__menuItem:hover { color: #e1251b } } [data-page=annualReports] .c-categoryMenu__menuItem.is-active { color: #e1251b } [data-page=annualReports] .c-categoryMenu.show { display: block } [data-page=annualReports] .c-categoryMenu.show-no { display: none } @media(max-width:1023px) { [data-page=annualReports] .c-categoryMenu { top: 50px } } [data-page=annualReports] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=annualReports] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=annualReports] .c-investorData { padding-bottom: 50px; padding-top: 40px } } [data-page=annualReports] .c-investorData.show { display: block } [data-page=annualReports] .c-investorData.show-no { display: none } @media(max-width:1023px) { [data-page=annualReports] .c-investorData[data-company=alphakids] { padding-bottom: 20px } [data-page=annualReports] .c-investorData[data-company=alphakids] .c-investorData__right { margin-top: 0 } } [data-page=annualReports] .c-investorData#currentfy, [data-page=annualReports] .c-investorData:nth-of-type(2) { margin-top: 0 } [data-page=annualReports] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=annualReports] .c-quote { margin-top: 71px } } [data-page=announcements] main { padding-top: 108px } [data-page=announcements] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=announcements] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=announcements] .c-investorData { padding-bottom: 50px; padding-top: 40px } [data-page=announcements] .c-investorData:nth-child(2) { padding-top: 20px } [data-page=announcements] .c-investorData:nth-child(2) .c-investorData__title-2 { padding-bottom: 20px } } [data-page=announcements] .c-investorData__right { align-self: flex-start } [data-page=announcements] .c-investorData .c-investorData__list .quarterly-txt__text { max-width: 466px } @media(max-width:1023px) { [data-page=announcements] .c-investorData .c-investorData__title-2 { font-size: 40px; line-height: 1 } } [data-page=announcements] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=announcements] .c-quote { margin-top: 51px } } [data-page=policies] main { padding-top: 108px } [data-page=policies] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=policies] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=policies] .c-investorData { padding-bottom: 50px; padding-top: 40px } [data-page=policies] .c-investorData:nth-child(2) { padding-top: 20px } [data-page=policies] .c-investorData:nth-child(2) .c-investorData__title-2 { padding-bottom: 20px } [data-page=policies] .c-investorData .c-investorData__title-2 { font-size: 70px; line-height: 1 } } [data-page=policies] .c-investorData__right { align-self: flex-start } [data-page=policies] .c-investorData .c-investorData__list .quarterly-txt__text { max-width: 466px } [data-page=policies] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=policies] .c-quote { margin-top: 51px } } [data-page=transferUnclaimedShares] main { padding-top: 108px } [data-page=transferUnclaimedShares] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=transferUnclaimedShares] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=transferUnclaimedShares] .c-investorData { padding-bottom: 50px; padding-top: 40px } [data-page=transferUnclaimedShares] .c-investorData:nth-child(2) { padding-top: 20px } [data-page=transferUnclaimedShares] .c-investorData:nth-child(2) .c-investorData__title-2 { padding-bottom: 20px } } [data-page=transferUnclaimedShares] .c-investorData__right { align-self: flex-start } [data-page=transferUnclaimedShares] .c-investorData .c-investorData__list .quarterly-txt__text { max-width: 370px } [data-page=transferUnclaimedShares] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=transferUnclaimedShares] .c-quote { margin-top: 51px } } [data-page=unclaimedDividend] main { padding-top: 108px } [data-page=unclaimedDividend] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=unclaimedDividend] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=unclaimedDividend] .c-investorData { padding-bottom: 50px; padding-top: 40px } [data-page=unclaimedDividend] .c-investorData:nth-child(2) { padding-top: 20px } [data-page=unclaimedDividend] .c-investorData:nth-child(2) .c-investorData__desc { padding-bottom: 20px } } [data-page=unclaimedDividend] .c-investorData__right { align-self: flex-start } [data-page=unclaimedDividend] .c-investorData .c-investorData__list .quarterly-txt__text { max-width: 370px } [data-page=unclaimedDividend] .c-investorData .c-investorData__desc { max-width: 345px } [data-page=unclaimedDividend] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=unclaimedDividend] .c-quote { margin-top: 41px } } @keyframes fadeContactUsPopupIn { 0% { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: translateY(0) } } @keyframes animateSVGTick { 0% { stroke-dashoffset: 60px } to { stroke-dashoffset: 0px } } input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } input[type=number] { -moz-appearance: textfield } .contactUsForm__container.show { display: flex } .contactUsForm__wrapper { animation-duration: .8s; animation-fill-mode: forwards; animation-name: fadeContactUsPopupIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); opacity: 0; position: relative; will-change: transform, opacity } @media(max-width:1023px) { .contactUsForm__wrapper { width: 100% } } .contactUsForm { background-color: #fff; padding: 30px; position: relative } @media(max-width:1023px) { .contactUsForm { align-items: center; display: flex; flex-direction: column; padding: 30px 20px } } @media(min-width:768px)and (max-width:1023px) { .contactUsForm { margin-left: auto; margin-right: auto; width: 400px } } @media(min-width:1024px) { .contactUsForm { width: 400px } } .contactUsForm .c-input__wrapper+.c-input__wrapper { margin-top: 20px } .contactUsForm .c-input__wrapper { width: 100% } .contactUsForm .c-input__wrapper .c-inputError { height: unset; max-height: 0; transition: max-height .4s ease } .contactUsForm .c-input__wrapper.is-empty .c-inputError, .contactUsForm .c-input__wrapper.is-invalid .c-inputError { max-height: 48px } .contactUsForm .c-inputError { transition-duration: .2s } .contactUsForm .input_group { position: relative } .contactUsForm .input_group .input__preText { background-color: #f5f5f5; border-right: 1px solid #dfdfdf; bottom: 0; color: #888; color: #000; display: block; flex-shrink: 0; font-size: 13px; left: 0; left: 1px; letter-spacing: .05em; line-height: 15px; margin: auto; max-height: 19px; padding: 2px 15px; position: absolute; top: 0 } .contactUsForm .input_group .c-textInput__input { padding-left: 67px } .contactUsForm__heading { padding-bottom: 20px; width: 100% } @media(max-width:1023px) { .contactUsForm__heading { padding-bottom: 30px } } .contactUsForm__heading+.editProfilePopup__subheading { margin-top: -10px } .contactUsForm__submitButton { color: #fff; margin-top: 30px } .contactUsForm__submitButton .c-button__text:before { content: "Send" } .contactUsForm.is-submitting .c-button__text:before { content: "Sending" } .contactUsForm.is-submitting .contactUsForm__submitButton { padding-right: 50px; pointer-events: none } .contactUsForm.is-submitting .contactUsForm__submitting { height: 40px; opacity: 1 } .contactUsForm.is-submitting .contactUsForm__submitting .contactUsForm__submittingDot { background-color: #fff } .contactUsForm.is-submitting .c-button__arrow { opacity: 0 !important } .contactUsForm__submitting { align-items: center; display: flex; height: 50px; justify-content: center; opacity: 0; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity .8s ease; width: 50px; will-change: opacity } .contactUsForm__submittingDots { display: flex } .contactUsForm__submittingDots>:not(:first-child) { margin-left: 3px } .contactUsForm__submittingDot { animation: dotFlashing .6s infinite alternate; background-color: #000; height: 4px; opacity: 1; width: 4px } .contactUsForm__submittingDot:first-of-type { animation-delay: .6s } .contactUsForm__submittingDot:nth-of-type(2) { animation-delay: .7s } .contactUsForm__submittingDot:nth-of-type(3) { animation-delay: .8s } .contactUsForm__closeButton { cursor: pointer; padding: 12px; position: absolute; right: 0; top: 0 } .contactUsForm.is-submitted { display: none } .contactUsForm.is-submitted+.contactUsForm__submitted { display: flex } [data-os=iOS] textarea { appearance: none; -moz-appearance: none; -webkit-appearance: none } .contactUsForm__submitted { align-items: center; animation-duration: .4s; animation-fill-mode: forwards; animation-name: fadeContactUsPopupIn; animation-timing-function: cubic-bezier(.215, .61, .355, 1); background-color: #fff; display: none; flex-direction: column; opacity: 0; padding-top: 92px; width: 100%; will-change: transform, opacity } @media(max-width:1023px) { .contactUsForm__submitted { padding: 50px 0 80px } } @media(min-width:768px)and (max-width:1023px) { .contactUsForm__submitted { margin-left: auto; margin-right: auto; width: 336px } } @media(min-width:1024px) { .contactUsForm__submitted { height: 445px; width: 336px } } .contactUsForm__submitted>:first-child { animation-delay: .1s; animation-duration: .5s; animation-fill-mode: forwards; animation-name: fadeInUp40; animation-timing-function: cubic-bezier(.165, .84, .44, 1); opacity: 0 } .contactUsForm__submitted>:nth-child(2) { animation-delay: .15s; animation-duration: .5s; animation-fill-mode: forwards; animation-name: fadeInUp40; animation-timing-function: cubic-bezier(.165, .84, .44, 1); opacity: 0 } .contactUsForm__submitted>:nth-child(3) { animation-delay: .2s; animation-duration: .5s; animation-fill-mode: forwards; animation-name: fadeInUp40; animation-timing-function: cubic-bezier(.165, .84, .44, 1); opacity: 0 } @media(max-width:1023px) { .contactUsForm__submittedIcon { height: 65px; width: 65px } } .contactUsForm__submittedHeading { margin-top: 30px } @media(max-width:1023px) { .contactUsForm__submittedHeading { margin-top: 20px } } .contactUsForm__submittedSubheading { color: #888; margin-top: 10px; max-width: 260px; text-align: center } @media(max-width:1023px) { .contactUsForm__submittedSubheading { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; max-width: 230px } } .contactUsForm__submittedSubheading a { color: #000; white-space: nowrap } [data-page=contactUs] input:-webkit-autofill, [data-page=contactUs] select:-webkit-autofill, [data-page=contactUs] textarea:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: inset 0 0 0 100px #000; box-shadow: inset 0 0 0 100px #000; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s } [data-page=contactUs] input:-webkit-autofill, [data-page=contactUs] input:-webkit-autofill:active, [data-page=contactUs] input:-webkit-autofill:focus, [data-page=contactUs] input:-webkit-autofill:hover, [data-page=contactUs] input:autofill, [data-page=contactUs] select:-webkit-autofill, [data-page=contactUs] select:-webkit-autofill:active, [data-page=contactUs] select:-webkit-autofill:focus, [data-page=contactUs] select:-webkit-autofill:hover, [data-page=contactUs] select:autofill, [data-page=contactUs] textarea:-webkit-autofill, [data-page=contactUs] textarea:-webkit-autofill:active, [data-page=contactUs] textarea:-webkit-autofill:focus, [data-page=contactUs] textarea:-webkit-autofill:hover, [data-page=contactUs] textarea:autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: inset 0 0 0 100px #000; box-shadow: inset 0 0 0 100px #000; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s } [data-page=contactUs] main { padding-top: 103px } @media(min-width:1024px) { [data-page=contactUs] .careers, [data-page=contactUs] .contactDetails__lhs, [data-page=contactUs] .subscribe__lhs, [data-page=contactUs] .topics__lhs { width: 48.7179487179% } [data-page=contactUs] .contactDetails__rhs, [data-page=contactUs] .faqs, [data-page=contactUs] .subscribe__rhs, [data-page=contactUs] .topics__rhs { flex: 1 } } [data-page=contactUs] .topics { position: relative } @media(min-width:1024px) { [data-page=contactUs] .topics { display: flex } } [data-page=contactUs] .topics__lhs, [data-page=contactUs] .topics__rhs { position: relative } [data-page=contactUs] .topics__lhs { padding-top: 40px } @media(max-width:1023px) { [data-page=contactUs] .topics__lhs { padding-top: 20px } [data-page=contactUs] .topics__rhs { margin-top: 30px } } @media(min-width:1024px) { [data-page=contactUs] .topics__rhs { padding-bottom: 40px; padding-right: 30px; padding-top: 5px } } @media(max-width:1023px) { [data-page=contactUs] .topics__heading { font-size: 50px; line-height: 1 } } @media(min-width:1024px) { [data-page=contactUs] .topics__heading { font-size: 80px; line-height: 75px } } [data-page=contactUs] .topics__subheading { margin-top: 20px } @media(max-width:1023px) { [data-page=contactUs] .topics__list { display: flex; flex-flow: row wrap } } [data-page=contactUs] .topics__topic { width: 100% } @media(max-width:1023px) { [data-page=contactUs] .topics__topic { border-top: 1px solid #000; width: 50% } [data-page=contactUs] .topics__topic:nth-child(2n) { border-left: 1px solid #000 } } @media(min-width:1024px) { [data-page=contactUs] .topics__topic:not(:last-child) { border-bottom: 1px solid #c4c4c4 } } [data-page=contactUs] .topics__topic:first-child:hover .topics__topicIcon { animation-duration: .6s; animation-name: scaleAnim; animation-timing-function: linear } [data-page=contactUs] .topics__topic:nth-child(2):hover .topics__topicIcon, [data-page=contactUs] .topics__topic:nth-child(3):hover .topics__topicIcon { animation-duration: .6s; animation-name: scaleRotateAnim; animation-timing-function: linear } [data-page=contactUs] .topics__topic:nth-child(4):hover .topics__topicIcon, [data-page=contactUs] .topics__topic:nth-child(5):hover .topics__topicIcon { animation-duration: .6s; animation-name: scaleAnim; animation-timing-function: linear } [data-page=contactUs] .topics__topic:nth-child(6):hover .topics__topicIcon path:first-child { animation-duration: .6s; animation-name: rotateTickCirle; animation-timing-function: linear; transform-origin: center } @keyframes rotateTickCirle { 0% { transform: scale(1) rotate(0deg) } 50% { transform: scale(1.05) rotate(20deg) } to { transform: scale(1) rotate(39deg) } } [data-page=contactUs] .topics__topicInner { align-items: center; display: flex; padding: 35px 20px 20px } @media(max-width:1023px) { [data-page=contactUs] .topics__topicInner { flex-direction: column; justify-content: center; padding: 25px 0 } } @media(min-width:1024px) { [data-page=contactUs] .topics__topicInner>:not(:first-child) { margin-left: 20px } } [data-page=contactUs] .topics__topicIcon { height: 35px; padding: 0; width: 35px } [data-page=contactUs] .topics__topicTitle { text-align: center } @media(max-width:1023px) { [data-page=contactUs] .topics__topicTitle { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 10px } } @media(min-width:1024px) { [data-page=contactUs] .topics__topicTitle { font-size: 20px; line-height: 25px } } [data-page=contactUs] .contactDetails { position: relative } @media(min-width:1024px) { [data-page=contactUs] .contactDetails { display: flex } } [data-page=contactUs] .contactDetails__lhs, [data-page=contactUs] .contactDetails__rhs { position: relative } [data-page=contactUs] .contactDetails__lhs { padding: 60px 0 } @media(max-width:1023px) { [data-page=contactUs] .contactDetails__lhs { padding: 50px 0 40px } } @media(min-width:1024px) { [data-page=contactUs] .contactDetails__rhs { padding: 30px 0 } } [data-page=contactUs] .contactDetails__lhs { display: flex } @media(max-width:1023px) { [data-page=contactUs] .contactDetails__lhs { justify-content: space-between } } @media(min-width:1024px) { [data-page=contactUs] .contactDetails__lhs>* { flex-basis: calc(50% - 15px) } [data-page=contactUs] .contactDetails__lhs>:not(:first-child) { margin-left: 30px } [data-page=contactUs] .contactDetails__lhs>.contactDetails__heading { margin-left: 0 } } @media(max-width:1023px) { [data-page=contactUs] .contactDetails__heading { font-size: 30px; line-height: 1 } } [data-page=contactUs] .contactDetails__imageContainer { width: 41.9607843137% } @media(max-width:1023px) { [data-page=contactUs] .contactDetails__imageContainer { width: 150px } } @media(min-width:1024px) { [data-page=contactUs] .contactDetails__imageContainer { padding-right: 60px } } [data-page=contactUs] .contactDetails__imageContainer .anim-imageContainer { padding-top: 125.2336448598% } [data-page=contactUs] .contactDetails__address, [data-page=contactUs] .contactDetails__email, [data-page=contactUs] .contactDetails__tel { padding: 30px; position: relative } @media(max-width:1023px) { [data-page=contactUs] .contactDetails__address, [data-page=contactUs] .contactDetails__email, [data-page=contactUs] .contactDetails__tel { padding: 20px 0 40px } } [data-page=contactUs] .contactDetails__address, [data-page=contactUs] .contactDetails__email, [data-page=contactUs] .contactDetails__tel { display: flex } @media(min-width:1024px) { [data-page=contactUs] .contactDetails__address>*, [data-page=contactUs] .contactDetails__email>*, [data-page=contactUs] .contactDetails__tel>* { flex-basis: calc(50% - var(--gridMargin)) } [data-page=contactUs] .contactDetails__addressValue, [data-page=contactUs] .contactDetails__emailValue, [data-page=contactUs] .contactDetails__telValue { margin-left: var(--gridMargin) } } @media(max-width:1023px) { [data-page=contactUs] .contactDetails__addressLabel, [data-page=contactUs] .contactDetails__emailLabel, [data-page=contactUs] .contactDetails__telLabel { flex-shrink: 0; width: 42% } } [data-page=contactUs] .contactDetails__telAvailability { color: #000; display: block; margin-top: 5px } @media(max-width:1023px) { [data-page=contactUs] .contactDetails__telAvailability { margin-top: 10px } } @media(min-width:1024px) { [data-page=contactUs] .careersAndFaqs { display: flex } } [data-page=contactUs] .careers, [data-page=contactUs] .faqs { padding: 60px 0 40px; position: relative } @media(max-width:1023px) { [data-page=contactUs] .careers, [data-page=contactUs] .faqs { padding: 40px 0 } } @media(min-width:1024px) { [data-page=contactUs] .careers { border-right: 1px solid #000 } [data-page=contactUs] .faqs { padding-left: 30px } } @media(max-width:1023px) { [data-page=contactUs] .careers__heading, [data-page=contactUs] .faqs__heading { font-size: 30px; line-height: 1 } } [data-page=contactUs] .careers__link, [data-page=contactUs] .faqs__link { margin-top: 40px } @media(max-width:1023px) { [data-page=contactUs] .careers__link, [data-page=contactUs] .faqs__link { margin-top: 30px } } [data-page=contactUs] .subscribe { background-color: #000; display: flex; margin-top: 30px } @media(max-width:1023px) { [data-page=contactUs] .subscribe { flex-direction: column } } [data-page=contactUs] .subscribe__lhs { padding: 60px } @media(max-width:1023px) { [data-page=contactUs] .subscribe__lhs { padding: 30px 40px 50px 30px } } [data-page=contactUs] .subscribe__heading { color: #fff } @media(max-width:1023px) { [data-page=contactUs] .subscribe__heading { font-size: 15px; letter-spacing: .02em; line-height: 20px } } [data-page=contactUs] .subscribe__subheading { color: #fff; margin-top: 5px } [data-page=contactUs] .subscribe__copy { color: #fff; margin-top: 20px } [data-page=contactUs] .subscribe__form { position: relative } [data-page=contactUs] .subscribe__formInputWrapper { border: 1px solid #fff; display: flex; height: 50px; margin-top: 50px; position: relative; width: 250px } [data-page=contactUs] .subscribe__formInputWrapper.is-empty~.c-inputError, [data-page=contactUs] .subscribe__formInputWrapper.is-invalid~.c-inputError { opacity: 1; transform: translateY(0) } [data-page=contactUs] .subscribe__formInput { color: #fff; flex: 1; padding: 0 20px; width: 200px } [data-page=contactUs] .subscribe__formInput::placeholder { color: #fff; opacity: 1 } [data-page=contactUs] .subscribe__formSubmitButton { align-items: center; border-left: 1px solid #fff; display: flex; height: 100%; justify-content: center; position: relative; transition: border .25s cubic-bezier(.26, 1, .48, 1); width: 50px } @media(hover:hover) { [data-page=contactUs] .subscribe__formSubmitButton:hover .subscribe__formSubmitButtonArrow { animation-duration: .6s; animation-fill-mode: forwards; animation-name: animateArrowOnMouseover; animation-timing-function: cubic-bezier(.39, .575, .565, 1) } } [data-page=contactUs] .subscribe__formSubmitButtonArrow { height: auto; width: 16px } [data-page=contactUs] .subscribe__form.is-submitting .subscribe__formSubmitButton { pointer-events: none } [data-page=contactUs] .subscribe__form.is-submitting .subscribe__formSubmitButtonArrow { opacity: 0 !important } [data-page=contactUs] .subscribe__form.is-submitting .subscribe__formSubmitting { opacity: 1 } [data-page=contactUs] .subscribe__form.is-submitted .subscribe__formSubmitButton { pointer-events: none } [data-page=contactUs] .subscribe__form.is-submitted .subscribe__formSuccessMessage { opacity: 1; transform: translateY(0) } [data-page=contactUs] .subscribe__form.is-submitted .subscribe__formSubmitButtonArrow { opacity: 0 } [data-page=contactUs] .subscribe__form.is-submitted .subscribe__formSubmitted svg { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.86, 0, .07, 1) } [data-page=contactUs] .subscribe__formErrorMessage, [data-page=contactUs] .subscribe__formSuccessMessage { max-height: unset; opacity: 0; position: absolute; top: 100%; transform: translateY(-5px); transition: opacity .2s ease, transform .4s ease; will-change: opacity, transform } [data-page=contactUs] .subscribe__formSuccessMessage { align-items: flex-start; color: #619276; display: flex; flex-flow: row wrap } [data-page=contactUs] .subscribe__formSuccessMessage:before { content: ""; padding-top: 11px; width: 100% } [data-page=contactUs] .subscribe__formSubmitted { align-items: center; display: flex; height: 50px; justify-content: center; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; width: 50px } [data-page=contactUs] .subscribe__formSubmitted svg { stroke-dasharray: 26px; stroke-dashoffset: 26px } [data-page=contactUs] .subscribe__formSubmitting { align-items: center; display: flex; height: 50px; justify-content: center; opacity: 0; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity .8s ease; width: 50px; will-change: opacity } [data-page=contactUs] .subscribe__formSubmittingDots { display: flex } [data-page=contactUs] .subscribe__formSubmittingDots>:not(:first-child) { margin-left: 3px } [data-page=contactUs] .subscribe__formSubmittingDot { animation: dotFlashing .6s infinite alternate; background-color: #fff; height: 4px; opacity: 1; width: 4px } [data-page=contactUs] .subscribe__formSubmittingDot:first-of-type { animation-delay: .6s } [data-page=contactUs] .subscribe__formSubmittingDot:nth-of-type(2) { animation-delay: .7s } [data-page=contactUs] .subscribe__formSubmittingDot:nth-of-type(3) { animation-delay: .8s } [data-page=contactUs] .latestNewsletter { background-color: #1d1d1d; padding: 60px 30px } @media(max-width:1023px) { [data-page=contactUs] .latestNewsletter { padding: 30px 20px } } @media(min-width:1024px) { [data-page=contactUs] .latestNewsletter { align-items: flex-end; display: flex } [data-page=contactUs] .latestNewsletter>* { width: calc(50% - var(--gridMargin)/2) } [data-page=contactUs] .latestNewsletter__rhs { margin-left: var(--gridMargin) } } [data-page=contactUs] .latestNewsletter__imageContainer { padding-top: 125.9259259259%; width: 100% } @media(max-width:1023px) { [data-page=contactUs] .latestNewsletter__image { margin-top: 20px } } [data-page=contactUs] .latestNewsletter__heading { align-items: center; color: #fff; display: flex; position: relative } [data-page=contactUs] .latestNewsletter__heading svg { height: 15px; margin-right: 5px; width: 15px } [data-page=contactUs] .latestNewsletter__heading:after { background-color: #3e3d3d; content: ""; display: block; height: 1px; max-width: 143px; position: absolute; top: calc(100% + 10px); width: 100% } [data-page=contactUs] .latestNewsletter__title { color: #fff; margin-top: 30px } @media(max-width:1023px) { [data-page=contactUs] .latestNewsletter__title { font-size: 15px; letter-spacing: .02em; line-height: 20px } } [data-page=contactUs] .latestNewsletter__para { color: #888; margin-top: 30px } @media(min-width:768px) { [data-page=contactUs] .latestNewsletter__para { max-width: 160px } } [data-page=contactUs] .latestNewsletter__date { color: #c4c4c4; margin-top: 5px } [data-page=contactUs] .c-quote { margin-top: 100px } [data-page=error404] main { align-items: center; display: flex; flex-direction: column; height: var(--viewportHeight); padding-top: 34vh } @media(max-width:1023px) { [data-page=error404] main { justify-content: flex-end; padding-bottom: 95px; padding-top: 132px } } [data-page=error404] .error404__heading { text-align: center } [data-page=error404] .error404__subheading { color: #888; margin-top: 20px; text-align: center; will-change: opacity, transform } [data-page=error404] .error404__subheading .c-button { color: #000; padding-bottom: 3px } [data-page=error404] .error404__imageWrapper { bottom: 10px; left: 0; position: absolute; width: var(--viewportWidth) } @media(max-width:1023px) { [data-page=error404] .error404__imageWrapper { height: 130px; margin-top: 56px; overflow: hidden; position: relative } } [data-page=error404] .error404__image { bottom: 0; height: auto; left: 0; position: absolute; width: var(--viewportWidth) } @media(max-width:1023px) { [data-page=error404] .error404__image { left: unset; right: -21px; width: 638px } [data-page=error404] .mountainPath { stroke-width: 3px } [data-page=error404] .camelPath { transform: scale(2); transform-origin: 1195px 214px } } [data-page=camlinError404] main { align-items: center; display: flex; flex-direction: row; height: var(--viewportHeight); overflow: hidden; padding-top: 132px; position: relative } @media(max-width:1023px) { [data-page=camlinError404] main { align-items: center; flex-direction: column-reverse; justify-content: start; padding-bottom: 0; padding-top: 108px } } @media(min-width:1024px) { [data-page=camlinError404] main { padding-left: calc(var(--gridCol3) + var(--viewportSidePadding)) } } @media(max-width:1023px) { [data-page=camlinError404] .error404__imageWrapper { flex: 1; position: relative; width: 100% } } @media(min-width:1024px) { [data-page=camlinError404] .error404__imageWrapper { align-self: flex-end; margin-left: var(--gridMargin); width: var(--gridCol3) } } [data-page=camlinError404] .error404__image { display: block } @media(max-width:1023px) { [data-page=camlinError404] .error404__image { height: 100%; left: 0; margin: 0 auto; position: absolute; right: 0; top: 0; width: auto } } @media(min-width:1024px) { [data-page=camlinError404] .error404__image { height: 74vh; width: auto } } [data-page=camlinError404] .error404__textWrapper { display: flex; flex-direction: column } @media screen and (max-width:767px)and (max-height:800px) { [data-page=camlinError404] .error404__textWrapper { padding: 50px 0 } } @media screen and (max-width:1023px)and (min-height:801px) { [data-page=camlinError404] .error404__textWrapper { padding: 100px 0 } } @media(max-width:1023px) { [data-page=camlinError404] .error404__textWrapper { align-items: center } } @media(min-width:1024px) { [data-page=camlinError404] .error404__textWrapper { margin-left: var(--gridMargin); width: var(--gridCol3) } } @media(max-width:1023px) { [data-page=camlinError404] .error404__heading { font-size: 40px; line-height: 1; text-align: center } } [data-page=camlinError404] .error404__subheading { color: #888; margin-top: 20px } @media(max-width:1023px) { [data-page=camlinError404] .error404__subheading { margin-top: 10px; text-align: center } } [data-page=camlinError404] .error404__subheading .c-button { color: #000; padding-bottom: 3px } [data-page=camlinError404] .error404__backToHome { margin-top: 18px } @media(max-width:1023px) { [data-page=camlinError404] .error404__backToHome { margin-top: 8px } } @keyframes fadeWordExplanationsIn { 0% { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: translateY(0) } } [data-page=glossaryPage] main { padding-top: 0 } @media(max-width:1023px) { [data-page=glossaryPage] main { padding-bottom: 60px; padding-top: 0 } } [data-page=glossaryPage] .c-quote { margin-top: 40px } @media(min-width:1024px) { [data-page=glossaryPage] .c-quote { margin-top: 100px } } [data-page=glossaryPage] .glossary { display: flex; padding-top: 103px } @media(max-width:1023px) { [data-page=glossaryPage] .glossary { padding-bottom: 60px; padding-top: 103px; width: 100% } } @media(min-width:1024px) { [data-page=glossaryPage] .glossary__col:not(:first-child) { margin-left: var(--gridMargin) } } [data-page=glossaryPage] .index { display: flex } @media(max-width:1023px) { [data-page=glossaryPage] .index { align-items: flex-start; height: 308px; order: 2; padding-bottom: 4px; padding-top: 8px; position: sticky; top: 143px } } @media(min-width:1024px) { [data-page=glossaryPage] .index { align-items: center; height: calc(var(--viewportHeight) - 103px); position: sticky; top: 103px; width: var(--gridCol3) } } [data-page=glossaryPage] .index__inner { align-items: center; color: #727272; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; text-transform: uppercase } [data-page=glossaryPage] .index__inner>* { flex-shrink: 0 } [data-page=glossaryPage] .index__blackDot { align-items: center; cursor: pointer; display: flex; justify-content: center; padding: 10px; position: relative } [data-page=glossaryPage] .index__blackDot:before { background-color: #c4c4c4; border-radius: 50%; content: ""; height: 6px; width: 6px } @media(hover:hover) { [data-page=glossaryPage] .index__blackDot:hover:before { background-color: #000 } } [data-page=glossaryPage] .index__blackDot.is-active:before { background-color: #000 } @media(max-width:1023px) { [data-page=glossaryPage] .wordScroller { flex: 1; order: 1; padding-top: 40px } } @media(min-width:1024px) { [data-page=glossaryPage] .wordScroller { padding-top: 74px; width: calc(var(--gridCol3)*2 + var(--gridMargin)) } } [data-page=glossaryPage] .wordList { align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-start } [data-page=glossaryPage] .wordList .word { line-height: 1.2; margin-bottom: 50px; text-align: left; text-transform: capitalize } [data-page=glossaryPage] .wordList .word span.firstLetter, [data-page=glossaryPage] .wordList .word span:not(.firstLetter) { color: #000; opacity: .47 } @media(max-width:1023px) { [data-page=glossaryPage] .wordList .word:last-child { margin-bottom: 0 } [data-page=glossaryPage] .wordList .word span { transition: opacity 1s cubic-bezier(.39, .575, .565, 1); will-change: opacity } } @media(min-width:1024px) { [data-page=glossaryPage] .wordList .word { white-space: nowrap } } [data-page=glossaryPage] .wordList .word.is-active span.firstLetter, [data-page=glossaryPage] .wordList .word.is-active span:not(.firstLetter), [data-page=glossaryPage] .wordList .word:hover span.firstLetter, [data-page=glossaryPage] .wordList .word:hover span:not(.firstLetter) { opacity: 1 } [data-page=glossaryPage] .wordExplanations { left: calc(0px - var(--gridCol3)/2); position: relative } @media(max-width:1023px) { [data-page=glossaryPage] .wordExplanations { align-items: center; background-color: rgba(0, 0, 0, .6); display: flex; display: none; height: var(--viewportHeight); justify-content: center; left: 0; padding: 0 var(--gridMargin); padding-left: 0; padding-right: 0; position: fixed; top: 0; width: 100vw; z-index: 29 } [data-page=glossaryPage] .wordExplanations.show { display: flex } } @media(min-width:1024px) { [data-page=glossaryPage] .wordExplanations { height: calc(var(--viewportHeight) - 177px); left: unset; margin-left: calc(30px - var(--gridCol3)/2) !important; position: sticky; top: 177px; width: var(--gridCol3) } } [data-page=glossaryPage] .wordExplanation { border: 1px solid #000; min-height: 413px; padding: 30px 30px 40px; position: relative; width: 100% } @media(max-width:1023px) { [data-page=glossaryPage] .wordExplanation { animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeWordExplanationsIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); background-color: #fff; border: 0; display: none; height: 100%; left: 0; min-height: unset; opacity: 0; padding-top: 50px; position: fixed; top: 0; will-change: transform, opacity } [data-page=glossaryPage] .wordExplanation.show { display: inline-flex; flex-direction: column } } @media(min-width:1024px) { [data-page=glossaryPage] .wordExplanation { left: 0; max-height: calc(var(--viewportHeight) - 207px); opacity: 0; overflow: auto; pointer-events: none; position: absolute; top: 0; transform: translateY(30px); transition: opacity .1s cubic-bezier(.39, .575, .565, 1), transform .1s cubic-bezier(.39, .575, .565, 1) 0ms; width: 100%; will-change: opacity, transform } [data-page=glossaryPage] .wordExplanation.show { opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity .4s cubic-bezier(.39, .575, .565, 1) .2s, transform .4s cubic-bezier(.39, .575, .565, 1) .2s } } [data-page=glossaryPage] .wordExplanation__imageContainer { padding-top: var(--instagramAspectRatio); position: relative } [data-page=glossaryPage] .wordExplanation__title { margin-top: 0; padding-right: 0 } [data-page=glossaryPage] .wordExplanation__title+.wordExplanation__imageContainer { margin-top: 20px } [data-page=glossaryPage] .wordExplanation__definition { margin-top: 20px; padding-right: 20px } [data-page=glossaryPage] .wordExplanation__closeButtonWrapper { padding: 12px; position: absolute; right: 0; top: 0 } @media(min-width:1024px) { [data-page=glossaryPage] .wordExplanation__closeButtonWrapper { display: none } } [data-page=glossaryPage] .wordExplanation__closeButton { height: 10px; width: 10px } @media(max-width:1023px) { [data-page=glossaryPage] .wordExplanation__closeButton { height: 15px; width: 15px } } [data-page=disclaimer] main { padding-top: 108px } [data-page=disclaimer] .c-categoryBanner { padding-bottom: 60px; padding-top: 40px } [data-page=disclaimer] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=disclaimer] .c-categoryBanner__subheading { max-width: 234px } [data-page=disclaimer] .c-categoryBanner__rhs { padding-bottom: 10px } @media(max-width:1023px) { [data-page=disclaimer] .c-categoryBanner { padding-bottom: 20px; padding-top: 20px } [data-page=disclaimer] .c-categoryBanner .c-categoryBanner__heading { font-size: 50px; left: -3px; line-height: 1 } [data-page=disclaimer] .c-categoryBanner__subheading { max-width: 240px } [data-page=disclaimer] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=disclaimer] .pp-txt, [data-page=disclaimer] .pp__desc { font-size: 15px; letter-spacing: .02em; line-height: 20px } [data-page=disclaimer] .pp-txt { color: #888 } [data-page=disclaimer] .pp-txt .c-black { color: #000 } [data-page=disclaimer] .pp_bullets { margin-top: 20px } [data-page=disclaimer] .pp_bullets .pp_bulletText { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-left: 17px; position: relative } [data-page=disclaimer] .pp_bullets .pp_bulletText:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 4px; left: 3px; position: absolute; top: 8px; width: 4px } [data-page=disclaimer] .c-investorData { padding-bottom: 20px; padding-top: 20px; position: relative } @media(max-width:1023px) { [data-page=disclaimer] .c-investorData { padding-bottom: 50px; padding-top: 40px } [data-page=disclaimer] .c-investorData__title-3 { font-size: 30px; line-height: 1 } [data-page=disclaimer] .c-investorData .c-investorData__right { margin-top: 20px } } [data-page=disclaimer] .c-investorData__right { align-self: flex-start } [data-page=disclaimer] .c-investorData.show { display: block } [data-page=disclaimer] .c-investorData.show-no { display: none } [data-page=disclaimer] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=disclaimer] .c-quote { margin-top: 61px } } [data-page=privacyPolicy] main { padding-top: 108px } [data-page=privacyPolicy] .c-categoryBanner { padding-bottom: 60px; padding-top: 40px } [data-page=privacyPolicy] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=privacyPolicy] .c-categoryBanner__subheading { max-width: 234px } [data-page=privacyPolicy] .c-categoryBanner__rhs { padding-bottom: 10px } [data-page=privacyPolicy] .c-categoryBanner .pp__desc { max-width: 204px } @media(max-width:1023px) { [data-page=privacyPolicy] .c-categoryBanner { padding-bottom: 30px; padding-top: 20px } [data-page=privacyPolicy] .c-categoryBanner__heading { font-size: 50px; left: -3px; line-height: 1 } [data-page=privacyPolicy] .c-categoryBanner__subheading { max-width: 240px } [data-page=privacyPolicy] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=privacyPolicy] .pp-txt, [data-page=privacyPolicy] .pp__desc { font-size: 15px; letter-spacing: .02em; line-height: 20px } [data-page=privacyPolicy] .pp-txt { color: #888 } [data-page=privacyPolicy] .pp-txt .c-black { color: #000 } [data-page=privacyPolicy] .pp_bullets { margin-top: 20px } [data-page=privacyPolicy] .pp_bullets .pp_bulletText { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-left: 17px; position: relative } [data-page=privacyPolicy] .pp_bullets .pp_bulletText:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 4px; left: 3px; position: absolute; top: 8px; width: 4px } [data-page=privacyPolicy] .c-investorData { padding-bottom: 20px; padding-top: 20px; position: relative } @media(max-width:1023px) { [data-page=privacyPolicy] .c-investorData { padding-bottom: 50px; padding-top: 40px } [data-page=privacyPolicy] .c-investorData__title-3 { font-size: 30px; line-height: 1 } [data-page=privacyPolicy] .c-investorData .c-investorData__right { margin-top: 20px } } [data-page=privacyPolicy] .c-investorData__right { align-self: flex-start } [data-page=privacyPolicy] .c-investorData.show { display: block } [data-page=privacyPolicy] .c-investorData.show-no { display: none } [data-page=privacyPolicy] .c-quote { margin-top: 80px } @media(max-width:1023px) { [data-page=privacyPolicy] .c-quote { margin-top: 61px } } [data-page=investorFaq] main { padding-top: 108px } [data-page=investorFaq] .c-categoryBanner { padding-bottom: 40px; padding-top: 40px } [data-page=investorFaq] .c-categoryBanner .c-categoryBanner__text { padding-top: 0 } [data-page=investorFaq] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=investorFaq] .c-categoryBanner__subheading { max-width: 234px } [data-page=investorFaq] .c-categoryBanner__rhs { padding-bottom: 10px } @media(max-width:1023px) { [data-page=investorFaq] .c-categoryBanner { padding-bottom: 30px; padding-top: 20px } [data-page=investorFaq] .c-categoryBanner__heading { font-size: 50px; left: -3px; line-height: 1 } [data-page=investorFaq] .c-categoryBanner__subheading { max-width: 240px } [data-page=investorFaq] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=investorFaq] .c-categoryMenu { display: -webkit-box; display: -ms-flexbox; display: flex; position: -webkit-sticky; position: sticky; top: 40px; z-index: 23 } [data-page=investorFaq] .c-categoryMenu__menuItem { position: relative } [data-page=investorFaq] .c-categoryMenu__menuItem:after { background-color: #e1251b; bottom: -20px; content: ""; height: 3px; left: 0; opacity: 0; position: absolute; -webkit-transition: .3s cubic-bezier(.77, 0, .175, 1); -o-transition: .3s cubic-bezier(.77, 0, .175, 1); transition: .3s cubic-bezier(.77, 0, .175, 1); width: 100% } @media(hover:hover) { [data-page=investorFaq] .c-categoryMenu__menuItem:hover { color: #e1251b } } [data-page=investorFaq] .c-categoryMenu__menuItem.is-active { color: #e1251b } [data-page=investorFaq] .c-categoryMenu__menuItem.is-active:after { opacity: 1 } @media(max-width:1023px) { [data-page=investorFaq] .c-categoryMenu { top: 50px } } [data-page=investorFaq] .c-investorData { padding-bottom: 30px; padding-top: 10px; position: relative } [data-page=investorFaq] .c-investorData .anim-line { transform: scale(1) } @media(max-width:1023px) { [data-page=investorFaq] .c-investorData { padding-bottom: 50px; padding-top: 40px } } [data-page=investorFaq] .c-investorData.show { display: block } [data-page=investorFaq] .c-investorData.show-no { display: none } [data-page=investorFaq] .c-investorData .accordion__contain { padding-bottom: 20px; position: relative } [data-page=investorFaq] .c-investorData .accordion__contain:nth-child(n+2) { margin-top: 40px } @media(max-width:1023px) { [data-page=investorFaq] .c-investorData .accordion__contain:nth-child(n+2) { margin-top: 30px } } [data-page=investorFaq] .c-investorData .accordion { cursor: pointer; position: relative; text-align: left; width: 100% } [data-page=investorFaq] .c-investorData .accordion:after { background-image: url(../assets/common/vectors/icon_plus.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; bottom: 0; content: ""; height: 12px; margin-top: 6px; position: absolute; right: 4px; top: 0; width: 12px } [data-page=investorFaq] .c-investorData .accordion.-active:after { background-image: url(../assets/common/vectors/icon_minus.svg) } [data-page=investorFaq] .c-investorData .accordion__title { display: inline-block; font-size: 20px; line-height: 25px; width: 80% } @media(max-width:1023px) { [data-page=investorFaq] .c-investorData .accordion__title { display: inline-block; font-size: 15px; letter-spacing: .02em; line-height: 20px } } @media(min-width:768)and (max-width:1023px) { [data-page=investorFaq] .c-investorData .accordion__title { max-width: 80% } } @media(max-width:768) { [data-page=investorFaq] .c-investorData .accordion__title { display: inline-block; max-width: 232px } } [data-page=investorFaq] .c-investorData .accordion__content { max-height: 0; overflow: hidden; text-align: left; width: 100%; will-change: max-height } [data-page=investorFaq] .c-investorData .accordion__content__inner { padding-top: 20px } @media(max-width:1023px) { [data-page=investorFaq] .c-investorData .accordion__content__inner { padding-top: 12px } } [data-page=investorFaq] .c-investorData .accordion__content__para { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; max-width: 580px } @media(min-width:768)and (max-width:1023px) { [data-page=investorFaq] .c-investorData .accordion__content__para { max-width: 80% } } @media(max-width:767px) { [data-page=investorFaq] .c-investorData .accordion__content__para { display: inline-block; max-width: 260px } } [data-page=investorFaq] .c-investorData .accordion__content .accordion__content__para+.accordion__content__para { margin-top: 15px } [data-page=investorFaq] .c-investorData .accordion__content__para+.accordion_table_container { margin-bottom: 20px; margin-top: 20px } [data-page=investorFaq] .c-investorData .accordion_table_container:last-child { margin-bottom: 0 } [data-page=investorFaq] .c-quote { margin-top: 70px } [data-page=contactFaq] main { padding-top: 108px } [data-page=contactFaq] .c-categoryBanner { padding-bottom: 40px; padding-top: 40px } [data-page=contactFaq] .c-categoryBanner .c-categoryBanner__text { padding-top: 0 } [data-page=contactFaq] .c-categoryBanner__heading { font-size: 90px; left: -5px; letter-spacing: -.03em; line-height: 1; top: 0 } [data-page=contactFaq] .c-categoryBanner__subheading { max-width: 234px } [data-page=contactFaq] .c-categoryBanner__rhs { padding-bottom: 10px } @media(max-width:1023px) { [data-page=contactFaq] .c-categoryBanner { padding-bottom: 30px; padding-top: 20px } [data-page=contactFaq] .c-categoryBanner__heading { font-size: 50px; left: -3px; line-height: 1 } [data-page=contactFaq] .c-categoryBanner__subheading { max-width: 240px } [data-page=contactFaq] .c-categoryBanner__rhs { margin-top: 20px } } [data-page=contactFaq] .c-categoryMenu { top: 0; z-index: 23 } [data-page=contactFaq] .c-categoryMenu__menuItem { position: relative } [data-page=contactFaq] .c-categoryMenu__menuItem:after { background-color: #000; bottom: -20px; content: ""; height: 3px; left: 0; opacity: 0; position: absolute; transition: .3s cubic-bezier(.77, 0, .175, 1); width: 100% } @media(hover:hover) { [data-page=contactFaq] .c-categoryMenu__menuItem:hover { color: #000 } } [data-page=contactFaq] .c-categoryMenu__menuItem.is-active { color: #000 } [data-page=contactFaq] .c-categoryMenu__menuItem.is-active:after { opacity: 1 } [data-page=contactFaq] .c-investorData { padding-bottom: 15px; padding-top: 10px; position: relative } [data-page=contactFaq] .c-investorData__right { flex-basis: 76% } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData { padding-bottom: 50px; padding-top: 40px } } [data-page=contactFaq] .c-investorData.show { display: block } [data-page=contactFaq] .c-investorData.show-no { display: none } [data-page=contactFaq] .c-investorData .accordion__contain { padding-bottom: 20px; position: relative } [data-page=contactFaq] .c-investorData .accordion__contain:nth-child(n+2) { margin-top: 40px } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion__contain:nth-child(n+2) { margin-top: 30px } } [data-page=contactFaq] .c-investorData .accordion { cursor: pointer; position: relative; text-align: left; width: 100% } [data-page=contactFaq] .c-investorData .accordion:after { background-image: url(../assets/common/vectors/icon_plus.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; bottom: 0; content: ""; height: 12px; margin-top: 6px; position: absolute; right: 4px; top: 0; width: 12px } [data-page=contactFaq] .c-investorData .accordion.-active:after { background-image: url(../assets/common/vectors/icon_minus.svg) } [data-page=contactFaq] .c-investorData .accordion__title { display: inline-block; font-size: 15px; letter-spacing: .02em; line-height: 20px; width: 80% } @media(min-width:768)and (max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion__title { max-width: 80% } } @media(max-width:768) { [data-page=contactFaq] .c-investorData .accordion__title { display: inline-block; max-width: 232px } } [data-page=contactFaq] .c-investorData .accordion__content { max-height: 0; overflow: hidden; text-align: left; width: 100%; will-change: max-height } [data-page=contactFaq] .c-investorData .accordion__content__inner { padding-top: 20px } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion__content__inner { padding-top: 12px } } [data-page=contactFaq] .c-investorData .accordion__content__inner>.accordion_bulletPara:first-of-type { margin-top: 0 } [data-page=contactFaq] .c-investorData .accordion__content__para { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; max-width: 580px } @media(min-width:768)and (max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion__content__para { max-width: 80% } } @media(max-width:767px) { [data-page=contactFaq] .c-investorData .accordion__content__para { display: inline-block; max-width: 260px } } [data-page=contactFaq] .c-investorData .accordion__content .accordion__content__para+.accordion__content__para { margin-top: 15px } [data-page=contactFaq] .c-investorData .accordion__content__para+.accordion_table_container { margin-bottom: 20px; margin-top: 20px } [data-page=contactFaq] .c-investorData .accordion_table_container:last-child { margin-bottom: 0 } [data-page=contactFaq] .c-investorData .accordion_bulletTitle { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 20px; margin-right: auto; margin-top: 40px; padding-left: 17px; position: relative } [data-page=contactFaq] .c-investorData .accordion_bulletTitle:before { background-color: #000; border-radius: 50%; content: ""; display: inline-block; height: 6px; left: 4px; position: absolute; top: 7px; width: 6px } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion_bulletTitle { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 10px; padding-top: 0 } [data-page=contactFaq] .c-investorData .accordion_bulletTitle:before { top: 7px } } [data-page=contactFaq] .c-investorData .accordion_bulletPara { color: #888; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 20px; margin-right: auto; margin-top: 20px; max-width: 632px; padding-left: 17px; position: relative } [data-page=contactFaq] .c-investorData .accordion_bulletPara:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 4px; left: 5px; position: absolute; top: 8px; width: 4px } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion_bulletPara { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 10px; padding-top: 0 } [data-page=contactFaq] .c-investorData .accordion_bulletPara:before { top: 7px } } [data-page=contactFaq] .c-investorData .accordion_bulletPara2 { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-bottom: 20px; margin-right: auto; margin-top: 20px; max-width: 632px; padding-left: 17px; position: relative } [data-page=contactFaq] .c-investorData .accordion_bulletPara2:before { background-color: #888; border-radius: 50%; content: ""; display: inline-block; height: 3px; left: 5px; position: absolute; top: 6px; width: 3px } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion_bulletPara2 { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-bottom: 10px; padding-top: 0 } [data-page=contactFaq] .c-investorData .accordion_bulletPara2:before { top: 7px } } [data-page=contactFaq] .c-investorData .accordion_table_container { margin-right: auto; max-width: 800px; overflow: hidden; overflow-x: auto; position: relative; width: 100% } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion_table_container { -ms-overflow-style: none; scrollbar-width: none; width: calc(100% + 20px) } [data-page=contactFaq] .c-investorData .accordion_table_container::-webkit-scrollbar { display: none } } [data-page=contactFaq] .c-investorData .accordion_table { border-collapse: collapse; scroll-snap-align: start; width: 100% } [data-page=contactFaq] .c-investorData .accordion_table_heading { border: 1px solid #c4c4c4; padding: 20px; text-align: left } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion_table_heading { min-width: 250px; padding: 15px } } [data-page=contactFaq] .c-investorData .accordion_table_data { border: 1px solid #c4c4c4; padding: 20px } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion_table_data { min-width: 250px; padding: 15px } } [data-page=contactFaq] .c-investorData .accordion_table .accordion_bulletPara, [data-page=contactFaq] .c-investorData .accordion_table .accordion_bulletPara2 { margin: 0 } [data-page=contactFaq] .c-investorData .accordion_table .accordion_bulletPara2:nth-child(n+2) { margin-top: 20px } @media(max-width:1023px) { [data-page=contactFaq] .c-investorData .accordion_table { margin-right: 20px } [data-page=contactFaq] .c-investorData .accordion_table .techniquesGeneric_bulletText { margin-bottom: 0 } } [data-page=contactFaq] .findAnswers { margin-bottom: 90px; position: relative } @media(max-width:1023px) { [data-page=contactFaq] .findAnswers { margin-bottom: 83px } } [data-page=contactFaq] .findAnswers__row { display: flex; position: relative } [data-page=contactFaq] .findAnswers__left { align-self: flex-start; flex-basis: 47%; padding-right: 32px; position: relative } @media(max-width:1023px) { [data-page=contactFaq] .findAnswers__left { flex-basis: 0%; padding-right: 0 } } [data-page=contactFaq] .findAnswers__right { align-self: flex-start; flex-basis: 76%; padding-left: 32px; position: relative } @media(max-width:1023px) { [data-page=contactFaq] .findAnswers__right { flex-basis: 100%; padding-left: 0 } } [data-page=contactFaq] .findAnswers__container { background-color: #f5f5f5; border-radius: 5px; padding: 20px } [data-page=contactFaq] .findAnswers__title { font-size: 40px; line-height: 1; max-width: 400px } @media(max-width:1023px) { [data-page=contactFaq] .findAnswers__title { font-size: 30px; line-height: 1 } } [data-page=contactFaq] .findAnswers__subtitle { color: #727272; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 40px } @media(max-width:1023px) { [data-page=contactFaq] .findAnswers__subtitle { line-height: 30px } } [data-page=contactFaq] .findAnswers__link { color: #000; text-decoration: underline } [data-page=contactFaq] .c-quote { margin-top: 30px } @media(max-width:1023px) { [data-page=contactFaq] .c-quote { margin-top: 70px } } html[data-page=sitemap] main { padding-top: 143px } @media(max-width:1023px) { html[data-page=sitemap] main { padding-top: 123px } } html[data-page=sitemap] .-mw-100 { max-width: 100% } html[data-page=sitemap] .anim-line { transform: unset } html[data-page=sitemap] .sitemap_banner { margin-left: auto; margin-right: auto; width: 100% } html[data-page=sitemap] .sitemap_banner_container { padding-bottom: 40px; position: relative } @media(max-width:1023px) { html[data-page=sitemap] .sitemap_banner_container { padding-bottom: 20px } } html[data-page=sitemap] .sitemap_banner .banner_title { font-size: 70px; line-height: 1; max-width: 740px; position: relative } @media(max-width:1023px) { html[data-page=sitemap] .sitemap_banner .banner_title { font-size: 40px; line-height: 1 } } html[data-page=sitemap] .sitemap_innerLink { color: inherit; display: inline-block; font-family: inherit; font-size: inherit; line-height: inherit; text-decoration: none } html[data-page=sitemap] .sitemap_section { padding-bottom: 60px; padding-top: 30px; position: relative } html[data-page=sitemap] .sitemap_section__title { color: #000; font-size: 30px; line-height: 1; margin-bottom: 10px } html[data-page=sitemap] .sitemap_section__row { display: flex; flex-wrap: wrap; max-width: 870px } html[data-page=sitemap] .sitemap_section__listing { display: flex; flex-direction: column; margin-right: 30px; margin-top: 20px } html[data-page=sitemap] .sitemap_section__listing:nth-child(3n) { margin-right: 0 } @media(max-width:1023px) { html[data-page=sitemap] .sitemap_section__listing:nth-child(3n) { margin-right: 30px } } @media(min-width:1024px) { html[data-page=sitemap] .sitemap_section__listing { min-width: 270px } } @media(max-width:767px) { html[data-page=sitemap] .sitemap_section__listing { width: 100% } } @media(min-width:768px)and (max-width:1023px) { html[data-page=sitemap] .sitemap_section__listing { width: calc(33.33% - 30px) } } html[data-page=sitemap] .sitemap_section__listing__title { color: #000; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-bottom: 10px } html[data-page=sitemap] .sitemap_section__listing__links { color: #a8a8a8; font-size: 15px; letter-spacing: .02em; line-height: 20px } html[data-page=sitemap] .c-quote { margin-top: 90px } @media(max-width:1023px) { html[data-page=sitemap] .c-quote { margin-top: 52px } } [data-page=camlinComingSoon] main { align-items: center; display: flex; flex-direction: column; padding-top: 143px } [data-page=camlinComingSoon] .camlinComingSoon__heading { color: #727272; display: block; font-size: 20px; line-height: 25px; margin-left: auto; margin-right: auto; margin-top: 20px; max-width: 342px; position: relative; text-align: center } [data-page=camlinComingSoon] .camlinComingSoon__subheading { color: #000; display: block; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; position: relative; text-align: center } [data-page=camlinComingSoon] .camlinComingSoon__link { color: inherit; text-decoration: underline } [data-page=camlinComingSoon] .camlinComingSoon__imageWrapper.-illustrationImage { margin: 30px auto 90px; max-width: 949px; width: 100% } [data-page=camlinComingSoon] .camlinComingSoon__imageWrapper.-illustrationImage img { width: 100% } @media(max-width:767px) { [data-page=camlinComingSoon] .camlinComingSoon__imageWrapper.-illustrationImage img { height: 46vw; object-fit: cover; width: 100% } [data-page=camlinComingSoon] .camlinComingSoon__imageWrapper.-illustrationImage { margin-top: 40px } } @media(max-width:1023px) { [data-html=earlyLearning] main { overflow-x: hidden } } [data-html=earlyLearning] header { visibility: hidden } [data-page=earlyLearning] { opacity: 0; transition: opacity .4s cubic-bezier(.25, .46, .45, .94) } [data-page=earlyLearning].isLoaded { opacity: 1 } .earlyLearning__sky { background: radial-gradient(93% 93% at 40% 12%, #fefefc 0, #fff7ab 10%, #dbf5fb 30%, rgba(217, 254, 255, 0) 70%); background-position: 50% 0; background-repeat: no-repeat; background-size: 200% 200%; height: var(--viewportHeight); left: calc(0px - var(--viewportSidePadding)); position: absolute; top: -132px; width: var(--viewportWidth) } @media(min-width:768px)and (max-width:1023px) { .earlyLearning__sky { background: radial-gradient(94% 54% at 42% 170px, #fefefc 0, #fff7ab 24.69%, #dbf5fb 63.75%, rgba(217, 254, 255, 0) 100%) } } @media(max-width:767px) { .earlyLearning__sky { background: radial-gradient(circle at 40% 170px, #fefefc 0, #fff7ab 8%, #dbf5fb 20%, rgba(231, 248, 252, .66) 40%, rgba(254, 255, 255, 0) 60%); background-position: 50% 0; background-repeat: no-repeat; background-size: 200% 200%; height: 100vh } } [data-page=earlyLearning].isLoaded .earlyLearning__sky { animation-duration: 6s; animation-fill-mode: backwards; animation-name: animSky; animation-timing-function: cubic-bezier(.19, 1, .22, 1) } @media(max-width:1023px) { [data-page=earlyLearning].isLoaded .earlyLearning__sky { animation-name: animSkyMobile } } @keyframes animSky { 0% { background-position: 60% 40%; opacity: .5 } to { background-position: 50% 0; opacity: 1 } } @keyframes animSkyMobile { 0% { background-position: 63% 8%; opacity: .5 } to { background-position: 50% 0; opacity: 1 } } .earlyLearning__sun { left: 25%; position: absolute; top: 8% } @media(min-width:768px)and (max-width:1023px) { .earlyLearning__sun { height: 30px; left: 40%; top: 30px; width: 30px } } @media(max-width:767px) { .earlyLearning__sun { height: 45px; left: 21%; top: 30px; width: 45px } } [data-page=earlyLearning].isLoaded .earlyLearning__sun { animation-delay: 0s, 4.2s; animation-duration: 4s, 30s; animation-fill-mode: backwards, forwards; animation-iteration-count: 1, infinite; animation-name: animSunEntry, animSunRotate; animation-timing-function: cubic-bezier(.075, .82, .165, 1), linear } @keyframes animSunEntry { 0% { transform: scale(0) } to { transform: scale(1) } } @keyframes animSunEntryMobile { 0% { opacity: 0; transform: translate(-10px, -20px) rotate(180deg) scale(.2) } to { opacity: 1; transform: translateZ(0) rotate(0deg) scale(1) } } @keyframes animSunRotate { 0% { transform: rotate(1turn) } to { transform: rotate(0deg) } } .earlyLearning__cloud, .earlyLearning__clouds { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .earlyLearning__clouds>:nth-child(n+4) .earlyLearning__cloud { left: 100% } @media(max-width:1023px) { .earlyLearning__clouds>:nth-child(n+4) .earlyLearning__cloud { left: 300% } } .earlyLearning__cloud { height: auto; object-position: top center; will-change: transform } @media(max-width:767px) { .earlyLearning__cloud { height: auto; width: 300% } } .earlyLearning__cloud.-faraway { animation-duration: 55s; top: -100px; z-index: 1 } @media(max-width:767px) { .earlyLearning__cloud.-faraway { top: 0 } } .earlyLearning__cloud.-midway { animation-duration: 35s; z-index: 2 } .earlyLearning__cloud.-closest { animation-duration: 25s; z-index: 3 } [data-page=earlyLearning].isLoaded .earlyLearning__cloud { animation-fill-mode: backwards; animation-iteration-count: infinite; animation-name: animClouds; animation-timing-function: linear } @keyframes animClouds { 0% { transform: translateZ(0) } to { transform: translateX(-100%) } } .earlyLearning__greenland { bottom: 0; height: auto; position: absolute; right: 0; width: 100% } @media(max-width:767px) { .earlyLearning__greenland { margin-left: calc(0px - var(--viewportSidePadding)); width: var(--viewportWidth) } } [data-page=earlyLearning].isLoaded .earlyLearning__greenland { animation-duration: 2s; animation-fill-mode: backwards; animation-name: animGreenland; animation-timing-function: cubic-bezier(.23, 1, .32, 1) } @keyframes animGreenland { 0% { transform: scale(4) translate(200px, 200px) } to { transform: scale(1) translateZ(0) } } .earlyLearning__bush, .earlyLearning__cow, .earlyLearning__pig, .earlyLearning__pony, .earlyLearning__ponyGrass { bottom: 0; height: 70.3125vh; position: absolute; right: 0; transform-origin: top center; width: auto; will-change: transform; z-index: 4 } @media(min-width:768px)and (max-width:1023px) { .earlyLearning__bush, .earlyLearning__cow, .earlyLearning__pig, .earlyLearning__pony, .earlyLearning__ponyGrass { height: 518px } } @media(min-width:1024px)and (max-width:1279px) { .earlyLearning__bush, .earlyLearning__cow, .earlyLearning__pig, .earlyLearning__pony, .earlyLearning__ponyGrass { height: 420px } } @media(max-width:767px) { .earlyLearning__bush, .earlyLearning__cow, .earlyLearning__pig, .earlyLearning__pony, .earlyLearning__ponyGrass { height: auto; left: 0; margin: 0 auto; max-width: 360px; width: 100% } } [data-page=earlyLearning].isLoaded .earlyLearning__bannerBottomGradient { animation-duration: 4s; animation-fill-mode: backwards; animation-name: animBottomGradient; animation-timing-function: cubic-bezier(.23, 1, .32, 1) } [data-page=earlyLearning].isLoaded .earlyLearning__bush, [data-page=earlyLearning].isLoaded .earlyLearning__cow, [data-page=earlyLearning].isLoaded .earlyLearning__pig, [data-page=earlyLearning].isLoaded .earlyLearning__pony, [data-page=earlyLearning].isLoaded .earlyLearning__ponyGrass { animation-duration: 2s; animation-fill-mode: backwards; animation-name: animAnimal; animation-timing-function: cubic-bezier(.23, 1, .32, 1) } .earlyLearning__pony { animation-delay: .1s } @media(max-width:1023px) { .earlyLearning__pony { animation-delay: .15s } } .earlyLearning__ponyGrass { animation-delay: .3s } .earlyLearning__pig { animation-delay: .2s } .earlyLearning__cow { animation-delay: .25s } .earlyLearning__bush { animation-delay: .4s } @keyframes animBottomGradient { 0% { transform: translateY(var(--viewportHeight)) } to { transform: translateZ(0) } } @keyframes animAnimal { 0% { transform: translateY(900px) scale(.8) } to { transform: translateZ(0) scale(1) } } .earlyLearning__birds { left: 30%; position: absolute; top: 84px; will-change: transform } @media(max-width:1023px) { .earlyLearning__birds { height: auto; left: 53%; top: 23%; width: 55px } } @media(max-width:767px) { .earlyLearning__birds { height: auto; left: 52%; top: 12%; width: 35px } } [data-page=earlyLearning].isLoaded .earlyLearning__birds { animation-delay: -2s; animation-duration: 10s; animation-fill-mode: backwards; animation-name: animBirds; animation-timing-function: cubic-bezier(.445, .05, .55, .95) } .earlyLearning__leftBirdWing, .earlyLearning__rightBirdWing { will-change: transform } @keyframes animBirds { 0% { opacity: 0; transform: scale(.5) } to { opacity: 1; transform: scale(1) } } .earlyLearning__bannerHeading { display: flex; flex-direction: column; font-family: Readex Pro, sans-serif; text-transform: uppercase; will-change: opacity } .earlyLearning__bannerHeadingEarly { -webkit-text-fill-color: transparent; text-fill-color: transparent; background: linear-gradient(100.44deg, #baf074 -5%, #59ab27 20%); -webkit-background-clip: text; background-clip: text; font-size: 50px; left: 45px; line-height: 80px; position: relative; top: -3px } @media(max-width:1023px) { .earlyLearning__bannerHeadingEarly { font-size: 40px; left: 34px } } @media(max-width:767px) { .earlyLearning__bannerHeadingEarly { font-size: 30px; left: 33px } } .earlyLearning__bannerHeadingLearning { -webkit-text-fill-color: transparent; text-fill-color: transparent; background: linear-gradient(91.38deg, #f8a75c, #cf533b 30%); -webkit-background-clip: text; background-clip: text; font-size: 80px; left: -2px; letter-spacing: -.06em; line-height: 80px; position: relative; top: -26px } @media(max-width:1023px) { .earlyLearning__bannerHeadingLearning { font-size: 60px; top: -38px } } @media(max-width:767px) { .earlyLearning__bannerHeadingLearning { font-size: 55px; left: 0; top: -46px } } .earlyLearning__bannerHeadingLearning>:nth-child(3) { margin-left: 42px } @media(max-width:1023px) { .earlyLearning__bannerHeadingLearning>:nth-child(3) { margin-left: 29px } } .earlyLearning__bannerHeadingTree { height: 152px; left: 185px; position: absolute; top: -40px; transform-origin: bottom left; width: 287px } @media(max-width:1023px) { .earlyLearning__bannerHeadingTree { left: 148px; top: -9px } } @media(max-width:767px) { .earlyLearning__bannerHeadingTree { left: 132px; top: -8px } } @media(max-width:1023px) { .earlyLearning__bannerHeadingTree { height: auto; width: 186px } } [data-page=earlyLearning].isLoaded .earlyLearning__bannerHeading { animation-delay: 1.2s; animation-duration: 1s; animation-fill-mode: backwards; animation-name: fadeIn; animation-timing-function: ease } [data-page=earlyLearning].isLoaded .earlyLearning__bannerHeadingTree { animation-delay: 1.2s; animation-duration: .5s; animation-fill-mode: backwards; animation-name: animTree; animation-timing-function: cubic-bezier(.175, .885, .44, 1.145) } @keyframes animTree { 0% { transform: scaleY(0) scaleX(.8) } to { transform: scaleY(1) scaleX(1) } } .earlyLearning__banner { background-color: #fff; border-radius: 20px; height: 70.3125vh; overflow: hidden; position: relative; transform: scaleX(2) scaleY(2); width: 100%; z-index: 27 } @media(min-width:768px)and (max-width:1023px) { .earlyLearning__banner { height: 518px } } @media(max-width:767px) { .earlyLearning__banner { height: 420px } } .earlyLearning__bannerInner { height: 100%; padding-left: 86px; padding-top: 164px; position: relative; transform: scaleX(.5) scaleY(.5); width: 100% } @media(max-width:1023px) { .earlyLearning__bannerInner { padding-left: 46px; padding-top: 121px } } @media(max-width:767px) { .earlyLearning__bannerInner { display: flex; justify-content: center; padding-left: 16px; padding-right: 16px; padding-top: 80px } } .earlyLearning__bannerBottomGradient { background-image: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, 0) 10%); bottom: 0; height: 100%; left: calc(0px - var(--viewportSidePadding)); position: absolute; width: var(--viewportWidth) } .earlyLearning__pageHeading { color: #404040; display: none; font-family: NeueMontreal-Medium; font-size: 30px; line-height: 30px; padding: 40px 0; text-align: center } @media(max-width:1023px) { .earlyLearning__pageHeading { font-size: 20px; line-height: 20px } } @media(max-width:767px) { .earlyLearning__pageHeading { padding: 30px 0 } } .earlyLearning__pageHeading.animateIn { display: block } .earlyLearning__pageHeading .green { color: #77c13f } .earlyLearning__pageHeading .green+.fullstop { margin-left: -5px } @media(max-width:1023px) { .earlyLearning__pageHeading .green+.fullstop { margin-left: -4px } } .earlyLearning__pageHeading .orange { color: #fca221 } .earlyLearning__products { display: flex; gap: 30px; opacity: 0 } .earlyLearning__products.animateIn { animation-duration: .6s; animation-fill-mode: forwards; animation-name: fadeInUp20 } @media(min-width:768px)and (max-width:1023px) { .earlyLearning__products { flex-flow: row wrap } } @media(max-width:767px) { .earlyLearning__products { align-items: center; flex-direction: column; gap: 40px } } .earlyLearning__product { flex: 1; will-change: transform } @media(min-width:768px)and (max-width:1023px) { .earlyLearning__product { flex-shrink: 0; flex: unset; width: calc(50% - 15px) } .earlyLearning__product:nth-child(odd) { padding-left: 60px } .earlyLearning__product:nth-child(2n) { padding-right: 60px } } @media(max-width:767px) { .earlyLearning__product { flex: unset; width: 270px } } @media(hover:hover) { .earlyLearning__product:nth-child(2n) .earlyLearning__productInner:before { transform-origin: bottom center } .earlyLearning__product .earlyLearning__productInner { overflow: hidden; position: relative } .earlyLearning__product .earlyLearning__productInner:before { background-color: red; border-radius: 10px; content: ""; height: calc(100% + 10px); left: -5px; opacity: 0; position: absolute; top: -5px; transition: opacity .8s cubic-bezier(.19, 1, .22, 1); width: calc(100% + 10px) } .earlyLearning__product:hover .earlyLearning__productInner:before { opacity: 1 } .earlyLearning__product:hover .earlyLearning__productImg { transform: scale(1.05) } } .earlyLearning__productInner { border-radius: 10px; padding: 30px } .earlyLearning__productImgWrapper { overflow: hidden; padding-top: 124.7619047619%; position: relative } .earlyLearning__productImg { height: calc(100% + 10px); left: -5px; top: -5px; transform: translateZ(0); transition: transform .8s cubic-bezier(.19, 1, .22, 1); width: calc(100% + 10px); will-change: transform } .earlyLearning__productName { margin-top: 20px; position: relative } .earlyLearning__productPrice { margin-top: 10px; position: relative } .earlyLearning__productTwinkle { display: none; position: absolute } .earlyLearning__productTwinkle.animateTwinkleIn { animation-delay: 0s, 12s; animation-duration: 3s, 6s; animation-fill-mode: forwards; animation-iteration-count: 1, infinite; animation-name: animateTwinkle, rotateTwinkleForever; animation-timing-function: cubic-bezier(.175, .885, .32, 1.275), cubic-bezier(.645, .045, .355, 1) } .earlyLearning__product:first-child .earlyLearning__productInner { border: 1px solid #ffed92 } .earlyLearning__product:first-child .earlyLearning__productInner:before { background-color: #ffed92 } .earlyLearning__product:nth-child(2) .earlyLearning__productInner { border: 1px solid #b2eafa } .earlyLearning__product:nth-child(2) .earlyLearning__productInner:before { background-color: #b2eafa } .earlyLearning__product:nth-child(2) .earlyLearning__productTwinkle { left: 30px; top: -14px; transform: rotate(19.62deg) } .earlyLearning__product:nth-child(3) .earlyLearning__productInner { border: 1px solid #c3eea2 } .earlyLearning__product:nth-child(3) .earlyLearning__productInner:before { background-color: #c3eea2 } .earlyLearning__product:nth-child(4) .earlyLearning__productInner { border: 1px solid #fdd09e } .earlyLearning__product:nth-child(4) .earlyLearning__productInner:before { background-color: #fdd09e } .earlyLearning__product:nth-child(4) .earlyLearning__productTwinkle { bottom: -14px; right: 40px; transform: rotate(-12.75deg) } .earlyLearning__product:nth-child(4) .earlyLearning__productTwinkle.animateTwinkleIn { animation-delay: 0s, 12s; animation-duration: 3s, 6s; animation-fill-mode: forwards; animation-iteration-count: 1, infinite; animation-name: animateTwinkleInReverse, rotateTwinkleForeverInReverse; animation-timing-function: cubic-bezier(.175, .885, .32, 1.275), cubic-bezier(.645, .045, .355, 1) } .earlyLearning .c-quote { margin-top: 100px } @keyframes rotateTwinkleForever { 0% { transform: rotate(0deg) } 50% { transform: rotate(1turn) } to { transform: rotate(1turn) } } @keyframes rotateTwinkleForeverInReverse { 0% { transform: rotate(0deg) } 50% { transform: rotate(-1turn) } to { transform: rotate(-1turn) } } @keyframes animateTwinkle { 0% { transform: rotate(0deg) } to { transform: rotate(1turn) } } @keyframes animateTwinkleInReverse { 0% { transform: rotate(0deg) } to { transform: rotate(-1turn) } } .c-red { color: #e1251b } [data-page=aboutUs].isLoaded .banner__imgs { opacity: 1; transform: scale(1); transition: opacity 1.5s cubic-bezier(.215, .61, .355, 1), transform 1.5s cubic-bezier(.215, .61, .355, 1) } [data-page=aboutUs] .banner { height: 70.3125vh; overflow: hidden; position: relative } @media(max-width:1023px) { [data-page=aboutUs] .banner { height: calc(125vw - 50px) } } [data-page=aboutUs] .banner__imgs { opacity: 0; overflow: hidden; transform: scale(1.12); transition: opacity 0s, transform 0s; will-change: transform; z-index: 0 } [data-page=aboutUs] .banner__imgs>:not(:first-child) { opacity: 0 } [data-page=aboutUs] .banner__imgs>:first-child { z-index: 0 } [data-page=aboutUs] .banner__imgs>:nth-child(2) { z-index: 1 } [data-page=aboutUs] .banner__imgs>:nth-child(3) { z-index: 2 } [data-page=aboutUs] .banner__imgWrapper { overflow: hidden } [data-page=aboutUs] .banner__img { will-change: transform } [data-page=aboutUs] .banner__topRightText { color: #fff; font-size: 15px; line-height: 15px; position: absolute; right: 28px; z-index: 1 } @media(max-width:1023px) { [data-page=aboutUs] .banner__topRightText { right: 41px; top: 20px } } @media(min-width:1024px) { [data-page=aboutUs] .banner__topRightText { bottom: 46px; min-width: 124px } } [data-page=aboutUs] .banner__bottomLeftText { bottom: 0; color: #fff; font-size: 30px; left: 0; line-height: 30px; overflow: hidden; padding-bottom: 16px; position: absolute; width: 100%; z-index: 1 } [data-page=aboutUs] .banner__bottomLeftText p { padding-left: 50px } @media(max-width:1023px) { [data-page=aboutUs] .banner__bottomLeftText p { padding-left: 27px } [data-page=aboutUs] .banner__bottomLeftText { font-size: 20px; line-height: 25px; padding-bottom: 16px } } [data-page=aboutUs] .banner__rotatingText { color: #fff; font-family: NeueMontreal-Medium; font-size: 160px; left: 0; letter-spacing: -.04em; line-height: 1; padding-left: 41px; position: relative; top: -8px; white-space: nowrap } @media(max-width:1023px) { [data-page=aboutUs] .banner__rotatingText { display: flex } } @media(min-width:1024px) { [data-page=aboutUs] .banner__rotatingText>:not(:first-child) { display: none } } @media(max-width:1023px) { [data-page=aboutUs] .banner__rotatingText span { padding-left: 20px; position: relative } } @media(min-width:1024px) { [data-page=aboutUs] .banner__rotatingText span { display: block; width: 100% } } @media(max-width:1023px) { [data-page=aboutUs] .banner__rotatingText { font-size: 120px; padding-left: 0 } } [data-page=aboutUs] .vision { margin-top: 30px; padding-bottom: 30px; padding-top: 40px; position: relative } @media(max-width:1023px) { [data-page=aboutUs] .vision { padding-top: 30px } [data-page=aboutUs] .vision__tag { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px } } [data-page=aboutUs] .vision__heading { font-size: 50px; line-height: 1; margin-top: 10px } @media(max-width:1023px) { [data-page=aboutUs] .vision__heading { font-size: 40px; margin-top: 15px } } [data-page=aboutUs] .vision__cards { -ms-overflow-style: none; display: flex; gap: 30px; margin-top: 67px; overflow: scroll; scrollbar-width: none } [data-page=aboutUs] .vision__cards::-webkit-scrollbar { display: none } @media(max-width:1023px) { [data-page=aboutUs] .vision__cards { gap: 20px; margin-top: 50px } } @media(min-width:1024px) { [data-page=aboutUs] .vision__cards { margin-left: calc(var(--gridCol3) + 30px) } } [data-page=aboutUs] .vision__card { flex-shrink: 0; width: var(--gridCol3) } @media(max-width:1023px) { [data-page=aboutUs] .vision__card { width: calc(50% - 10px) } } [data-page=aboutUs] .vision__cardTitle { font-size: 30px; line-height: 1; margin-top: 20px } @media(max-width:1023px) { [data-page=aboutUs] .vision__cardTitle { font-size: 20px } } [data-page=aboutUs] .vision__cardDesc { color: #727272; margin-top: 20px } @media(max-width:1023px) { [data-page=aboutUs] .vision__cardDesc { margin-top: 10px } } @media(min-width:1024px) { [data-page=aboutUs] .vision__cardDesc { max-width: 245px } } [data-page=aboutUs] .vision__cardsNav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 30px } @media(max-width:1023px) { [data-page=aboutUs] .vision__cardsNav { margin-top: 40px } } @media(hover:hover) { [data-page=aboutUs] .vision__cardsNavBtn:hover { opacity: .6 } } [data-page=aboutUs] .vision__cardsNavBtn.is-disabled { opacity: .2; pointer-events: none } [data-page=aboutUs] .jointVenture { display: flex; flex-direction: column; height: 540px; margin-top: 30px; overflow: hidden; padding: 30px; position: relative } @media(max-width:1023px) { [data-page=aboutUs] .jointVenture { height: 545px; justify-content: flex-end; margin-top: 50px; padding: 20px 20px 28px } } [data-page=aboutUs] .jointVenture__heading { font-size: 50px; left: 0; line-height: 60px; margin: 0 auto; position: absolute; right: 0; text-align: center; top: 120px; width: 100% } [data-page=aboutUs] .jointVenture__heading .powerhouses { font-size: 100px; height: 100px; position: relative } @media(max-width:1023px) { [data-page=aboutUs] .jointVenture__heading .powerhouses { font-size: 40px; height: 40px } } [data-page=aboutUs] .jointVenture__heading .powerhouses[data-language=english] .english, [data-page=aboutUs] .jointVenture__heading .powerhouses[data-language=japanese] .japanese { opacity: 1; transition: opacity 1.2s linear .4s } [data-page=aboutUs] .jointVenture__heading .powerhouses .english { left: 0; margin: 0 auto; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity .4s linear 0ms } @media(min-width:1024px) { [data-page=aboutUs] .jointVenture__heading .powerhouses .english { top: 20px } } [data-page=aboutUs] .jointVenture__heading .powerhouses .japanese { left: 0; margin: 0 auto; opacity: 0; position: absolute; right: 0; top: 5px; transition: opacity .4s linear 0ms } @media(min-width:1024px) { [data-page=aboutUs] .jointVenture__heading .powerhouses .japanese { top: 25px } } @media(max-width:1023px) { [data-page=aboutUs] .jointVenture__heading { font-size: 40px; line-height: 40px; top: 150px } } [data-page=aboutUs] .jointVenture__subheading { position: relative } @media(max-width:1023px) { [data-page=aboutUs] .jointVenture__subheading { margin-top: 20px; max-width: 282px } } @media(min-width:1024px) { [data-page=aboutUs] .jointVenture__subheading { align-items: flex-end; display: flex; flex: 1; max-width: 290px } } [data-page=aboutUs] .jointVenture__link { margin-top: 15px; position: relative } @media(max-width:1023px) { [data-page=aboutUs] .jointVenture__link { margin-top: 20px } } [data-page=aboutUs] .management { margin-top: 30px; position: relative } [data-page=aboutUs] .management__heading { padding-bottom: 30px; padding-top: 30px } @media(max-width:1023px) { [data-page=aboutUs] .management__heading { font-size: 40px; line-height: 1; padding-top: 50px } } [data-page=aboutUs] .codeOfConduct { margin-top: 30px; padding: 70px 0; position: relative } @media(max-width:1023px) { [data-page=aboutUs] .codeOfConduct { padding: 30px 0 } } @media(min-width:1024px) { [data-page=aboutUs] .codeOfConduct { display: flex; justify-content: center } [data-page=aboutUs] .codeOfConduct__quotesWrapper { display: flex; justify-content: flex-end; width: calc(25% - 22.5px) } } [data-page=aboutUs] .codeOfConduct__quotes { flex-shrink: 0; height: auto; object-fit: contain; object-position: top center; width: 270px } @media(max-width:1023px) { [data-page=aboutUs] .codeOfConduct__quotes { width: 150px } } @media(min-width:1024px) { [data-page=aboutUs] .codeOfConduct__quotes { margin-left: 30px } } @media(max-width:1023px) { [data-page=aboutUs] .codeOfConduct__text { margin-top: 18px } } @media(min-width:1024px) { [data-page=aboutUs] .codeOfConduct__text { margin-left: 30px; max-width: 570px; padding-top: 107px } } [data-page=aboutUs] .codeOfConduct__heading { line-height: 40px } @media(max-width:1023px) { [data-page=aboutUs] .codeOfConduct__heading { font-size: 20px; line-height: 25px } } [data-page=aboutUs] .codeOfConduct__subheading { margin-top: 15px } @media(max-width:1023px) { [data-page=aboutUs] .codeOfConduct__subheading { margin-top: 20px } } [data-page=aboutUs] .codeOfConduct__link { margin-top: 40px } @media(max-width:1023px) { [data-page=aboutUs] .codeOfConduct__link { margin-top: 30px } } [data-page=aboutUs] .legacy { position: relative } [data-page=aboutUs] .legacy__heading { padding-bottom: 40px; padding-top: 30px } @media(max-width:1023px) { [data-page=aboutUs] .legacy__heading { font-size: 40px; line-height: 1; padding-bottom: 20px } } @media(min-width:1024px) { [data-page=aboutUs] .legacy__heading { padding-left: calc(25% + 7.5px) } } [data-page=aboutUs] .c-quote { margin-top: 130px } @media(max-width:1023px) { [data-page=aboutUs] .c-quote { margin-top: 80px } } [data-page=jointVenture] main { padding-top: 154px } @media(max-width:1023px) { [data-page=jointVenture] main { padding-top: 132px } } [data-page=jointVenture] .banner__heading { font-size: 90px; letter-spacing: -.03em; line-height: 80px; padding-bottom: 40px } @media(max-width:767px) { [data-page=jointVenture] .banner__heading { max-width: 300px } } @media(max-width:1023px) { [data-page=jointVenture] .banner__heading { font-size: 50px; letter-spacing: 0; line-height: 50px; padding-bottom: 20px } } [data-page=jointVenture] .jointVenture__section { padding: 60px 0; position: relative } @media(max-width:1023px) { [data-page=jointVenture] .jointVenture__section { padding: 20px 0 30px } [data-page=jointVenture] .jointVenture__section+.jointVenture__section { padding-top: 30px } } @media(min-width:1024px) { [data-page=jointVenture] .jointVenture__section { display: flex; gap: 30px } [data-page=jointVenture] .jointVenture__sectionLhs, [data-page=jointVenture] .jointVenture__sectionRhs { flex: 1 } } @media(max-width:1023px) { [data-page=jointVenture] .jointVenture__sectionHeading { font-size: 30px; letter-spacing: 0; line-height: 35px } } [data-page=jointVenture] .jointVenture__sectionDetail { color: #727272 } @media(max-width:1023px) { [data-page=jointVenture] .jointVenture__sectionDetail { margin-top: 15px; padding-right: 12px } } [data-page=jointVenture] .c-quote { margin-top: 30px } @media(max-width:1023px) { [data-page=jointVenture] .c-quote { margin-top: 52px } } [data-page=team] main { padding-top: 154px } @media(max-width:1023px) { [data-page=team] main { padding-top: 132px } } [data-page=team] .banner { position: relative } [data-page=team] .banner__heading { font-size: 90px; line-height: 80px; padding-bottom: 40px } @media(max-width:767px) { [data-page=team] .banner__heading { max-width: 321px } } @media(max-width:1023px) { [data-page=team] .banner__heading { font-size: 50px; line-height: 50px; padding-bottom: 20px } } [data-page=team] .members { display: flex; flex-flow: row wrap; gap: 30px; margin-top: 50px } @media(max-width:1023px) { [data-page=team] .members { gap: 20px; margin-top: 20px } } @media(min-width:1024px) { [data-page=team] .members>:nth-child(n+5) { margin-top: 30px } } [data-page=team] .member { cursor: pointer; width: var(--gridCol3) } @media(max-width:1023px) { [data-page=team] .member { width: calc(50% - 10px) } } [data-page=team] .member__imgWrapper { background-color: #f3f3f3; padding-top: 124.8148148148%; position: relative } [data-page=team] .member__nameWrapper { align-items: flex-start; display: flex; justify-content: space-between; margin-top: 20px } @media(max-width:1023px) { [data-page=team] .member__nameWrapper { color: #888; color: #000; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 10px } } [data-page=team] .member__linkArrow { flex-shrink: 0; height: 16px; width: 16px } [data-page=team] .member__designation { margin-top: 10px } [data-page=team] .c-quote { margin-top: 70px } @media(max-width:1023px) { [data-page=team] .c-quote { margin-top: 80px } } html.showMemberModal .memberModal { display: block } @media(max-width:1023px) { html.showMemberModal body>:not(.memberModal) { display: none } } @keyframes fadeMemberModalIn { 0% { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: translateY(0) } } .memberModal { animation-duration: 1s; animation-fill-mode: forwards; animation-name: fadeMemberModalIn; animation-timing-function: cubic-bezier(.19, 1, .22, 1); background-color: #fff; display: none; height: var(--viewportHeight); left: 0; opacity: 0; overflow: scroll; padding: 70px 55px; position: fixed; top: 0; width: var(--viewportWidth); will-change: transform, opacity; z-index: 29 } @media(max-width:1023px) { .memberModal { padding: 56px 20px 30px } } @media(min-width:1024px) { .memberModal__inner { display: flex; gap: 55px; margin: 0 auto; max-width: 1280px } } .memberModal__imgWrapper { background-color: #f3f3f3; padding-top: 153.1914893617%; position: relative; width: 470px } @media(max-width:1023px) { .memberModal__imgWrapper { padding-top: 138.4375%; width: 100% } } .memberModal__designation { color: #727272 } @media(max-width:1023px) { .memberModal__designation { margin-top: 20px } } .memberModal__name { font-size: 50px; line-height: 50px; margin-top: 10px } @media(max-width:1023px) { .memberModal__name { font-size: 40px; line-height: 40px } } .memberModal__detail { color: #888; margin-top: 40px; padding-right: 55px } @media(max-width:1023px) { .memberModal__detail { margin-top: 20px; padding-right: 12px } } .memberModal__closeBtn { padding: 27px; position: absolute; right: 0; top: 0 } @media(max-width:1023px) { .memberModal__closeBtn { padding: 20px } [data-html=heritage] .c-headerWrapper { position: static } } [data-html=heritage] .c-headerWrapper:before { background-image: url(../assets/pages/about-us/heritage/frames/base.jpg); background-position: top; background-repeat: no-repeat; background-size: 100% auto; content: ""; height: 100%; left: 0; opacity: var(--headerBgOpacity); position: absolute; top: 0; width: 100% } @media(max-width:1023px) { [data-html=heritage] .c-headerWrapper:before { background-position: 0 0; background-size: auto 100vh } } [data-html=heritage] .noiseTextureWrapper, [data-html=heritage] .noiseTextures { height: 100vh; left: 0; position: fixed; top: 0; width: 100vw } [data-html=heritage] .noiseTextureWrapper img { height: auto; left: 0; object-fit: cover; object-position: center; position: absolute; top: 0; width: 100vw } @media screen and (max-width:1023px) { [data-html=heritage] .noiseTextureWrapper img { height: 100vh; object-position: top left; width: auto } } [data-html=heritage] .noiseTexture { animation-direction: alternate-reverse; animation-duration: 3s; animation-iteration-count: infinite; animation-name: texture-flicker; animation-timing-function: linear } [data-html=heritage] .noiseTexture.-one { animation-delay: 1s } [data-html=heritage] .noiseTexture.-two { animation-delay: 3s } [data-html=heritage] .noiseTexture.-three { animation-delay: 5s } [data-html=heritage] .noiseTexture.-four { animation-delay: 7s } @keyframes texture-flicker { 0% { opacity: .1 } 2% { opacity: 1 } 8% { opacity: .1 } 9% { opacity: 1 } 12% { opacity: .1 } 20% { opacity: 1 } 25% { opacity: .3 } 30% { opacity: 1 } 70% { opacity: .7 } 72% { opacity: .2 } 77% { opacity: .9 } to { opacity: .9 } } [data-page=heritage] main { padding-top: 0 } @media(min-width:1024px) { [data-page=heritage] .timeline { align-items: flex-start; display: flex; gap: 30px; padding-top: 106px } } @media(max-width:1023px) { [data-page=heritage] .timeline__yearBtnGroup { background-color: #fff; margin-left: calc(0px - var(--viewportSidePadding)); padding-bottom: 20px; position: sticky; top: 0; width: var(--viewportWidth); z-index: 1 } [data-page=heritage] .timeline__yearBtnGroup:before { background-image: url(../assets/pages/about-us/heritage/frames/base.jpg); background-position: left -108px; background-repeat: no-repeat; background-size: auto 100vh; content: ""; height: 100%; left: 0; opacity: var(--bgOpacity); position: absolute; top: 0; width: 100% } } [data-page=heritage] .timeline__yearBtnGroupInner { display: flex } @media(max-width:1023px) { [data-page=heritage] .timeline__yearBtnGroupInner { -ms-overflow-style: none; align-items: flex-end; height: 70px; overflow: hidden; padding-bottom: 0 !important; scrollbar-width: none } [data-page=heritage] .timeline__yearBtnGroupInner::-webkit-scrollbar { display: none } } @media(min-width:1024px) { [data-page=heritage] .timeline__yearBtnGroupInner { align-items: flex-start; flex-direction: column; padding-bottom: 238px; padding-top: 12px; width: var(--gridCol3) } } @media(max-width:1023px) { [data-page=heritage] .timeline__yearBtn { padding: 0 10px } [data-page=heritage] .timeline__yearBtn:first-child { margin-left: 10px } } @media(min-width:1024px) { [data-page=heritage] .timeline__yearBtn { padding: 12px 0 } } [data-page=heritage] .timeline__yearBtnText { font-size: 30px; line-height: 1; position: relative; transform-origin: center left; will-change: transform } [data-page=heritage] .timeline__year:not(.isActive) { display: none } @media(max-width:1023px) { [data-page=heritage] .timeline__year { animation-duration: .4s; animation-fill-mode: forwards; animation-name: animateTimelineYearIn; animation-timing-function: cubic-bezier(.645, .045, .355, 1) } } @media(min-width:1024px) { [data-page=heritage] .timeline__year { display: flex; gap: 30px; position: sticky; top: 158px } } [data-page=heritage] .timeline__yearImgContainer { width: 200px } @media(min-width:1024px) { [data-page=heritage] .timeline__yearImgContainer { width: var(--gridCol3) } } [data-page=heritage] .timeline__yearImgWrapper { background-color: #f3f3f3; padding-top: 124.8148148148%; position: relative } [data-page=heritage] .timeline__yearSummary { font-size: 20px; line-height: 25px } @media(max-width:1023px) { [data-page=heritage] .timeline__yearSummary { font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 20px; padding-right: 20px } } @media(min-width:1024px) { [data-page=heritage] .timeline__yearSummary { width: var(--gridCol3) } } [data-page=heritage] .timeline__yearDesc { color: #727272 } @media(max-width:1023px) { [data-page=heritage] .timeline__yearDesc { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 20px; padding-right: 20px } } @media(min-width:1024px) { [data-page=heritage] .timeline__yearDesc { width: var(--gridCol3) } } [data-page=heritage] .c-quote { margin-top: 120px } @media(max-width:1023px) { [data-page=heritage] .c-quote { margin-top: 110px } } @keyframes animateTimelineYearIn { 0% { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } [data-page=codeOfConduct] main { padding-top: 154px } @media(max-width:1023px) { [data-page=codeOfConduct] main { padding-top: 132px } } @media(min-width:1024px) { [data-page=codeOfConduct] .intro { display: flex; gap: 30px; padding-bottom: 60px } [data-page=codeOfConduct] .intro__lhs, [data-page=codeOfConduct] .intro__rhs { flex: 1 } } [data-page=codeOfConduct] .intro__heading { font-size: 90px; line-height: 80px } @media(max-width:767px) { [data-page=codeOfConduct] .intro__heading { max-width: 370px } } @media(max-width:1023px) { [data-page=codeOfConduct] .intro__heading { font-size: 50px; line-height: 50px; padding-bottom: 20px } } [data-page=codeOfConduct] .intro__bulletPoint { display: flex; padding-bottom: 20px; position: relative } @media(max-width:1023px) { [data-page=codeOfConduct] .intro__bulletPoint { padding-top: 20px } } [data-page=codeOfConduct] .intro__bulletPoint+.intro__bulletPoint { padding-top: 20px } [data-page=codeOfConduct] .intro__bulletPoint .anim-line { transform-origin: top left } [data-page=codeOfConduct] .intro__bulletPointIndex { color: #888; width: 50px } @media(max-width:1023px) { [data-page=codeOfConduct] .intro__bulletPointIndex { width: 40px } } [data-page=codeOfConduct] .intro__bulletPointText { flex: 1 } [data-page=codeOfConduct] .intro__bulletPointSubheading { color: #727272; margin-top: 10px } @media(max-width:1023px) { [data-page=codeOfConduct] .intro__bulletPointSubheading { color: #888; font-size: 13px; letter-spacing: .05em; line-height: 15px; margin-top: 6px } } [data-page=codeOfConduct] .chairmansStatement { padding: 50px 0; position: relative } @media(min-width:1024px) { [data-page=codeOfConduct] .chairmansStatement { display: flex; gap: 30px } [data-page=codeOfConduct] .chairmansStatement__lhs, [data-page=codeOfConduct] .chairmansStatement__rhs { flex: 1 } } [data-page=codeOfConduct] .chairmansStatement__heading { font-size: 50px; line-height: 50px } @media(max-width:1023px) { [data-page=codeOfConduct] .chairmansStatement__heading { font-size: 40px; line-height: 40px } } [data-page=codeOfConduct] .chairmansStatement__text { color: #727272 } @media(max-width:1023px) { [data-page=codeOfConduct] .chairmansStatement__text { margin-top: 30px; padding-right: 12px } } [data-page=codeOfConduct] .chairmansStatement__signature { height: auto; margin-top: 40px; width: 120px } @media(max-width:1023px) { [data-page=codeOfConduct] .chairmansStatement__signature { margin-top: 20px; width: 110px } } [data-page=codeOfConduct] .chairmansStatement__name { font-size: 20px; line-height: 25px; margin-top: 20px } [data-page=codeOfConduct] .chairmansStatement__designation { color: #727272; margin-top: 10px } [data-page=codeOfConduct] .quote { padding-top: 50px; position: relative } @media(min-width:1024px) { [data-page=codeOfConduct] .quote { display: flex; gap: 30px } } [data-page=codeOfConduct] .quote__authorImg path { stroke-dasharray: 340 } @media(max-width:1023px) { [data-page=codeOfConduct] .quote__authorImg { height: 174px; width: 150px } } @media(min-width:1024px) { [data-page=codeOfConduct] .quote__lhs { display: flex; justify-content: flex-end; width: var(--gridCol3) } } [data-page=codeOfConduct] .quote__text { font-size: 30px; line-height: 35px; max-width: 783px } @media(max-width:1023px) { [data-page=codeOfConduct] .quote__text { margin-top: 5px; max-width: 291px } } [data-page=codeOfConduct] .quote__author { font-size: 20px; line-height: 25px; margin-top: 30px } @media(max-width:1023px) { [data-page=codeOfConduct] .quote__author { margin-top: 20px } } [data-page=codeOfConduct] .c-quote { margin-top: 130px } @media(max-width:1023px) { [data-page=codeOfConduct] .c-quote { margin-top: 113px } } [data-page=search] { --slideHeight: 26px; font-family: NeueMontreal-Regular } [data-page=search] .c-header.-camlin .c-header__search .c-header-closeSearch { display: flex } [data-page=search] .c-header.-camlin .c-header__search .c-header-closeSearch svg { aspect-ratio: 1; width: 16px } [data-page=search] .c-header.-camlin .c-header__search .c-header__searchIcon { display: none } [data-page=search] .c-header.-camlin .c-header__search .c-header__searchIcon path { fill: #e1251b } [data-page=search] .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } [data-page=search] main .c-search { align-items: center; display: flex; height: 60px; justify-content: center; margin-top: 20px; overflow: hidden; position: relative; transition: height .5s ease-in } @media(max-width:1023px) { [data-page=search] main .c-search { align-items: flex-start; height: 50px; margin-top: 0 } } [data-page=search] main .c-search h1 { color: #f3f3f3; display: flex; font-size: 300px; font-style: normal; font-weight: 400; left: 50%; letter-spacing: -15px; line-height: .8; opacity: 0; pointer-events: none; position: absolute; top: 47%; transform: translate(-50%, -50%) } [data-page=search] main .c-search .c-searchInput { background: #fff; display: flex; max-width: 570px; position: relative; width: 100% } [data-page=search] main .c-search .c-searchInput input { background: #fff; border: 1px solid var(--Primary-Grey, #727272); border-right: 0; color: var(--Primary-Black, #000); font-size: 20px; font-style: normal; font-weight: 400; line-height: 1; max-width: 525px; padding: 15px 0 15px 15px; width: calc(100% - 60px) } @media(max-width:1023px) { [data-page=search] main .c-search .c-searchInput input { font-size: 15px; padding: 14px 0 14px 15px; width: calc(100% - 50px) } } [data-page=search] main .c-search .c-searchInput button { height: 60px; width: 60px } @media(max-width:1023px) { [data-page=search] main .c-search .c-searchInput button { height: 50px; width: 50px } } [data-page=search] main .c-search .c-searchInput button svg { fill: #fff; height: 16px; width: 16px } [data-page=search] main .c-search .c-searchInput button.c-searchButton { background: #e1251b } [data-page=search] main .c-search .c-searchInput button.c-searchClear { border: 1px solid var(--Primary-Grey, #727272); border-left: 0; display: none } @media(max-width:1023px) { [data-page=search] main .c-search .c-searchInput button.c-searchClear svg { height: 12px; width: 12px } } [data-page=search] main .c-search .c-searchInput .c-placeholder { color: #727272; display: flex; font-size: 20px; font-style: normal; font-weight: 400; left: 15px; line-height: 1; margin: 0 0 0 1px; opacity: 1; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%) } @media(min-width:1025px) { [data-page=search] main .c-search .c-searchInput .c-placeholder { margin-top: 3px } } @media(max-width:1023px) { [data-page=search] main .c-search .c-searchInput .c-placeholder { font-size: 15px; line-height: 2; margin-top: 0 } } [data-page=search] main .c-search .c-searchInput .c-placeholder .c-text-container { display: flex; flex-direction: column; height: var(--slideHeight); margin-left: 5px; overflow: hidden } @media(max-width:1023px) { [data-page=search] main .c-search .c-searchInput .c-placeholder .c-text-container { --slideHeight: 30px } } [data-page=search] main .c-search .c-searchInput .c-placeholder .c-text-container .c-text-slide { display: flex; flex-direction: column } [data-page=search] main .c-search .c-searchInput .c-placeholder .c-text-container .c-text-slide span { color: #000; height: var(--slideHeight) } @media(max-width:1023px) { [data-page=search] main .c-search .c-searchInput .c-placeholder .c-text-container .c-text-slide span { align-items: center; display: flex; line-height: 2 } } [data-page=search] main .c-search .c-searchInput.-active .c-placeholder { opacity: 0 } [data-page=search] main .c-search .c-searchInput.-active button.c-searchButton { align-items: center; display: flex; justify-content: center } [data-page=search] main .c-search .c-searchInput.-clearButton .c-placeholder, [data-page=search] main .c-search .c-searchInput.-clearButton button.c-searchButton { display: none } [data-page=search] main .c-search .c-searchInput.-clearButton button.c-searchClear { align-items: center; display: flex; justify-content: center } [data-page=search] main .c-search .c-searchInput.-clearButton button.c-searchClear svg { height: 12px; width: 12px } [data-page=search] main .c-resultsContainer { margin: 0 auto 54px; max-width: 570px; min-height: 500px; width: 100% } [data-page=search] main .c-resultsContainer .c-resultTerm { color: #727272; font-size: 20px; font-style: normal; font-weight: 400; line-height: 1.25; margin-top: 15px } @media(max-width:1023px) { [data-page=search] main .c-resultsContainer .c-resultTerm { font-size: 15px } } [data-page=search] main .c-resultsContainer .c-resultTerm span:last-child { word-wrap: break-word; color: #000; word-break: break-all } [data-page=search] main .c-resultsContainer .c-tryAgain { color: #727272; font-size: 15px; font-style: normal; font-weight: 400; letter-spacing: .3px; line-height: 20px; margin-top: 10px } @media(max-width:1023px) { [data-page=search] main .c-resultsContainer .c-tryAgain { font-size: 13px } } [data-page=search] main .c-resultsContainer .c-resultsListTabs { border-bottom: 1px solid #000; color: #000; display: flex; font-size: 15px; font-style: normal; font-weight: 400; gap: 30px; letter-spacing: .3px; line-height: 1; margin-bottom: 20px; margin-top: 30px } @media(max-width:1023px) { [data-page=search] main .c-resultsContainer .c-resultsListTabs { font-size: 13px; gap: 25px } } [data-page=search] main .c-resultsContainer .c-resultsListTabs a { padding-bottom: 15px } [data-page=search] main .c-resultsContainer .c-resultsListTabs a.-active { border-bottom: 3px solid #e1251b; color: #e1251b } [data-page=search] main .c-resultsContainer .c-resultsListTabs a:hover { color: #e1251b } @media(max-width:1023px) { [data-page=search] main .c-resultsContainer .c-resultsListTabs a { padding-bottom: 10px } } [data-page=search] main .c-resultsContainer .c-resultsList { display: flex; flex-direction: column } [data-page=search] main .c-resultsContainer .c-resultsList .j-resultsList { display: none; flex-direction: column; gap: 20px } [data-page=search] main .c-resultsContainer .c-resultsList .j-resultsList:first-child { display: flex } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox { align-items: center; cursor: pointer; display: none; gap: 20px } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox[data-visible="1"] { display: flex } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox .c-img { height: 60px; width: 60px } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox .c-img img { aspect-ratio: 1; object-fit: cover; width: 100% } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox .c-content { display: flex; flex-direction: column; width: calc(100% - 80px) } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox .c-content .c-title { color: #000; font-size: 15px; letter-spacing: .3px; line-height: 20px } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox .c-content .c-title:not(:only-child) { margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100% } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox .c-content .c-description { color: #727272; font-size: 13px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100% } @media(max-width:1023px) { [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox .c-content .c-description { line-height: 15px } } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox.c-artist .c-img { border-radius: 50%; overflow: hidden } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox.c-technique .c-img { position: relative } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox.c-technique .c-img:after { background-image: url(../assets/common/vectors/icon_play.svg); background-position: 50%; background-repeat: no-repeat; background-size: 15px; content: ""; height: 40px; left: calc(50% - 20px); position: absolute; top: calc(50% - 20px); width: 40px; will-change: transform } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox.c-page .c-img { align-content: center; background: #f9f9f9; border-radius: 50%; display: flex; justify-content: center; overflow: hidden; position: relative } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox.c-page .c-img img { object-fit: none; width: auto } [data-page=search] main .c-resultsContainer .c-resultsList .c-resultBox.c-page .c-content .c-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100% } [data-page=search] main .c-resultsContainer .c-resultsList .c-no-result { color: #727272; font-size: 20px; font-style: normal; font-weight: 400; line-height: 1.25 } @media(max-width:1023px) { [data-page=search] main .c-resultsContainer .c-resultsList .c-no-result { font-size: 15px } } [data-page=search] main .c-resultsContainer .c-resultsList .c-no-result span { word-wrap: break-word; color: #000; word-break: break-all } [data-page=search] main .c-resultsContainer .c-pagination { color: #727272; font-size: 13px; line-height: 20px; margin: 10px 0 0; text-align: center } [data-page=search] main .c-resultsContainer .c-pagination a { margin-top: 14px; padding: 13px 30px } [data-page=search] main .c-resultsContainer .c-alternateWords { color: #727272; display: none; display: flex; flex-direction: column; font-size: 15px; font-style: normal; font-weight: 400; gap: 15px; letter-spacing: .3px; line-height: 20px; margin-bottom: 20px; margin-top: 40px } @media(max-width:1023px) { [data-page=search] main .c-resultsContainer .c-alternateWords { font-size: 13px; margin-top: 50px } } [data-page=search] main .c-resultsContainer .c-alternateWords a { color: #000 } [data-page=search] main.-landing .c-search { height: 62vh; margin-top: 0 } @media(max-width:1023px) { [data-page=search] main.-landing .c-search { height: 52vh } } [data-page=search] main.-landing .c-search h1 { opacity: 1; transition: opacity .5s ease-in } @media(max-width:1023px) { [data-page=search] main.-landing .c-search h1 { display: none } } [data-page=search] main.-landing .c-resultsContainer { display: none } [data-page=webStory] .c-header__breadcrumbs { padding-bottom: 20px; padding-top: 6px; z-index: 10 } @media(max-width:1023px) { [data-page=webStory] main { padding-top: 123px } } [data-page=webStory] .banner { padding-bottom: 40px; padding-top: 0; position: relative } [data-page=webStory] .banner .editProfilePopup__submitButton { background-color: #d60812; display: inline-flex; margin-top: 30px; position: relative } [data-page=webStory] .banner .editProfilePopup__submitButton .editProfilePopup__submitButtonText { font-size: 15px } [data-page=webStory] .banner .editProfilePopup__submitButton .-outlined-cta { background-color: #fff; border: 1px solid #000 } [data-page=webStory] .banner .editProfilePopup__submitButton .-outlined-cta .editProfilePopup__submitButtonText { color: #000 } @media(max-width:1023px) { [data-page=webStory] .banner .editProfilePopup__submitButton { margin-top: 20px } } [data-page=webStory] .banner .editProfilePopup__submitButton:hover { background-color: #c6030d } [data-page=webStory] .banner .editProfilePopup__submitButton.-upload { background-color: #000; color: #fff } [data-page=webStory] .banner .editProfilePopup__submitButton.-upload:hover { background-color: #3c3c3c; color: #fff } [data-page=webStory] .banner .editProfilePopup__submitButton.-whySignUp { background-color: #fff; border: 1px solid #000; margin-left: 10px } [data-page=webStory] .banner .editProfilePopup__submitButton.-whySignUp .editProfilePopup__submitButtonText { color: #000 } [data-page=webStory] .banner .editProfilePopup__submitButton.-whySignUp:hover { border-color: #727272 } [data-page=webStory] .banner .editProfilePopup__submitButton.-whySignUp:hover .editProfilePopup__submitButtonText { color: #727272 } @media(max-width:1023px) { [data-page=webStory] .banner { padding-bottom: 20px } } @media(max-width:1023px)and (min-width:768px) { [data-page=webStory] .banner { padding-bottom: 40px } } @media(min-width:1024px) { [data-page=webStory] .banner .innerBanner { align-items: flex-end; display: flex; justify-content: space-between } [data-page=webStory] .banner__heading { flex: 1; font-size: 90px; letter-spacing: -.03em; line-height: 1 } } @media(max-width:1023px) { [data-page=webStory] .banner__heading { font-size: 50px; line-height: 1 } } @media(min-width:1024px) { [data-page=webStory] .banner__subheading { margin-left: 30px; width: var(--gridCol3) } } @media(max-width:1023px) { [data-page=webStory] .banner__subheading { margin-top: 20px } } @media(max-width:1023px)and (min-width:768px) { [data-page=webStory] .banner__subheading { margin-top: 20px; width: 80% } } @media only screen and (max-width:786px) { [data-page=webStory] .banner__subheading { width: 80% } } [data-page=webStory] .webStory__container { align-items: start; display: flex; height: 100%; justify-content: center; min-height: 100vh; padding-bottom: 40px; padding-top: 40px; position: relative; width: 100% } [data-page=webStory] .webStory__containerWrapper { position: relative; z-index: 2 } [data-page=webStory] .webStory__containerBackground { filter: blur(100px); height: 100%; left: 0; object-fit: cover; object-position: center; position: absolute; top: 0; width: 100%; z-index: 1 } @media only screen and (max-width:786px) { [data-page=webStory] .webStory__containerBackground { filter: blur(30px) } [data-page=webStory] .webStory__container { padding-left: 20px; padding-right: 20px } } [data-page=webStory] .webStory__close { height: 24px; position: absolute; right: 20px; top: 10px; width: 24px; z-index: 3 } [data-page=webStory] .webStory__closeIcon { height: 24px; width: 24px } @media(min-width:1024px) { [data-page=webStory] .webStory__close { display: none } } [data-page=webStory] .webStory__storyWrapper { position: relative; width: 48vh } @media only screen and (min-width:786px) { [data-page=webStory] .webStory__storyWrapper { height: 80vh } } @media only screen and (max-width:786px) { [data-page=webStory] .webStory__storyWrapper { aspect-ratio: .6/1; width: 100% } } [data-page=webStory] .webStory__storyWrapper .sharePopup { background-color: #fff; border: 1px solid #c4c4c4; opacity: 0; padding: 20px; pointer-events: none; position: absolute; right: 15px; top: 55px; transform: translateY(20px); transition: opacity .2s cubic-bezier(.39, .575, .565, 1), transform .4s cubic-bezier(.39, .575, .565, 1); width: 236px } [data-page=webStory] .webStory__storyWrapper .sharePopup.show { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 23 } [data-page=webStory] .webStory__storyWrapper .sharePopup__heading { border-bottom: 1px solid #c4c4c4; color: #000; padding-bottom: 20px } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLinks { display: grid; gap: 15px 10px; grid-template-columns: repeat(3, 1fr); padding-top: 20px; width: 100% } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLinks>* { width: 100% } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLinks svg path { fill: #727272 } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLinks svg path:nth-of-type(2) { fill: #fff !important } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink { align-items: center; cursor: pointer; display: flex; flex-direction: column; position: relative; width: 100% } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink .sharePopup__socialMediaLinkText { color: #727272 } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink.-copyLink { position: relative } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink.copied .sharePopup__socialMediaIconCircle svg path, [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink.copied svg path, [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink.is-active .sharePopup__socialMediaIconCircle svg path, [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink.is-active svg path, [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink:hover .sharePopup__socialMediaIconCircle svg path, [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink:hover svg path { fill: #000 } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink.copied .sharePopup__socialMediaLinkText, [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink.is-active .sharePopup__socialMediaLinkText, [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink:hover .sharePopup__socialMediaLinkText { color: #000 } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLink.copied .sharePopup__socialMediaLinkText { color: #498400; position: absolute; top: 25px; width: 70px } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLinkIcon { height: 20px; margin-bottom: 5px; width: 20px } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaIconCircle { fill: #000; opacity: 1; transition: opacity .2s ease; will-change: opacity } [data-page=webStory] .webStory__storyWrapper .sharePopup__socialMediaLinkText { color: #000; font-size: 11px; letter-spacing: .05em; line-height: 15px; margin-top: 5px; opacity: 1; transition: opacity .2s ease; will-change: opacity } [data-page=webStory] .webStory__storyWrapper .sharePopup__linkCopiedMessage { align-items: center; background-color: #000; border-radius: 5px; color: #fff; display: flex; left: 50%; opacity: 0; padding: 10px; pointer-events: none; position: absolute; top: calc(100% + 7px); transform: translateX(-50%) translateY(10px); transition: opacity .2s cubic-bezier(.39, .575, .565, 1), transform .4s cubic-bezier(.39, .575, .565, 1); white-space: nowrap } [data-page=webStory] .webStory__storyWrapper .sharePopup__linkCopiedMessage.show { opacity: 1; transform: translateX(-50%) translateY(0) } [data-page=webStory] .webStory__storyWrapper .sharePopup__linkCopiedMessageArrow { height: 10px; left: calc(50% - 5px); position: absolute; top: -5px; width: 10px; z-index: 0 } [data-page=webStory] .webStory__storyWrapper .sharePopup__linkCopiedMessageTick { margin-right: 5px } [data-page=webStory] .webStory__storyOuter { border-radius: 10px; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100% } [data-page=webStory] .webStory__storyOuterWrapper { scroll-snap-points-x: repeat(100%); -webkit-scroll-snap-points-x: repeat(100%); display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; position: relative; scroll-behavior: smooth; scroll-snap-type: mandatory; -webkit-scroll-snap-type: mandatory; white-space: nowrap; width: 100% } [data-page=webStory] .webStory__storyOuterWrapper::-webkit-scrollbar { display: none } [data-page=webStory] .webStory__storyButton { background-color: #fff; border-radius: 25px; cursor: pointer; display: block; height: 50px; overflow: hidden; position: absolute; text-align: center; top: calc(50% - 25px); transition: opacity .25s ease; width: 50px } [data-page=webStory] .webStory__storyButton:disabled { opacity: .6 } [data-page=webStory] .webStory__storyButton.-prevs { left: -90px } [data-page=webStory] .webStory__storyButton.-prevs .webStory__storyButtonIcon { transform: rotate(180deg) } [data-page=webStory] .webStory__storyButton.-share { background: transparent; opacity: 1 !important; right: 5px; top: 15px; z-index: 99 } [data-page=webStory] .webStory__storyButton.-next { right: -90px } @media(max-width:1023px) { [data-page=webStory] .webStory__storyButton { border-radius: 0; opacity: 0; z-index: 9 } [data-page=webStory] .webStory__storyButton.-prevs { bottom: 0; height: 95%; left: 0; top: unset; width: 25% } [data-page=webStory] .webStory__storyButton.-next { bottom: 0; height: 95%; right: 0; top: unset; width: 25% } [data-page=webStory] .webStory__storyButton:disabled { opacity: 0 } [data-page=webStory] .webStory__storyButton.-share { opacity: 1 !important } } [data-page=webStory] .webStory__slide { flex-shrink: 0; height: 100%; position: relative; width: 48vh } @media only screen and (max-width:786px) { [data-page=webStory] .webStory__slide { width: 100% } } [data-page=webStory] .webStory__slide.bottom { display: flex; flex-direction: column; justify-content: flex-end } [data-page=webStory] .webStory__slide.bottom .webStory__slideContent { background-image: linear-gradient(0deg, rgba(0, 0, 0, .7) 45%, transparent) } [data-page=webStory] .webStory__slide img, [data-page=webStory] .webStory__slide video { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100% } [data-page=webStory] .webStory__slideContent { background-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 45%, transparent); hyphens: auto; overflow-wrap: break-word; padding: 60px 25px 20px; position: relative; text-align: left; white-space: normal; width: 100%; z-index: 2 } [data-page=webStory] .webStory__slideContent.-centerAligned { text-align: center } [data-page=webStory] .webStory__slideContent.-rightAligned { text-align: right } [data-page=webStory] .webStory__slideContentTitle { color: inherit; font-size: 30px; line-height: 1 } [data-page=webStory] .webStory__slideContent p { color: inherit; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 14px } [data-page=webStory] .webStory__slideContent .c-button { background-color: #d60812; border-radius: 5px; color: #fff; margin-top: 20px; padding: 10px } [data-page=webStory] .webStory__slideContent strong { font-family: NeueMontreal-Bold } [data-page=webStory] .webStory__slideContent em { font-family: NeueMontreal-Italic; font-style: italic } [data-page=webStory] .webStory__slideContent em strong { font-family: NeueMontreal-Italic; font-style: italic; font-weight: 700 } [data-page=webStory] .webStory__progressBars { border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex; height: 100px; left: 0; overflow: hidden; padding: 10px 5px 87px; position: absolute; top: 0; width: 100%; z-index: 2 } [data-page=webStory] .webStory__progressBars:before { background: linear-gradient(rgba(0, 0, 0, .3), transparent); content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100% } [data-page=webStory] .webStory__progressBars[data-count="1"] .bar { width: calc(100% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="2"] .bar { width: calc(50% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="3"] .bar { width: calc(33.33333% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="4"] .bar { width: calc(25% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="5"] .bar { width: calc(20% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="6"] .bar { width: calc(16.66667% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="7"] .bar { width: calc(14.28571% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="8"] .bar { width: calc(12.5% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="9"] .bar { width: calc(11.11111% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="10"] .bar { width: calc(10% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="11"] .bar { width: calc(9.09091% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="12"] .bar { width: calc(8.33333% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="13"] .bar { width: calc(7.69231% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="14"] .bar { width: calc(7.14286% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="15"] .bar { width: calc(6.66667% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="16"] .bar { width: calc(6.25% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="17"] .bar { width: calc(5.88235% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="18"] .bar { width: calc(5.55556% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="19"] .bar { width: calc(5.26316% - 6px) } [data-page=webStory] .webStory__progressBars[data-count="20"] .bar { width: calc(5% - 6px) } [data-page=webStory] .webStory__progressBars .bar { background-color: hsla(0, 0%, 100%, .4); border-radius: 2px; cursor: pointer; display: block; height: 2px; margin: 0 3px; overflow: hidden; position: relative } [data-page=webStory] .webStory__progressBars .bar span { background-color: #fff; border-radius: 3px; cursor: pointer; display: block; height: 100%; left: 0; position: absolute; top: 0; transform: translateX(-101%) rotate(0deg); width: 100%; will-change: auto } [data-page=webStory] .webStory__progressBars .bar.seen span { transform: translateX(0) rotate(0deg) } [data-page=webStory] .webStory__progressBars .bar.animate span { animation: bar 0s linear 0s both } @keyframes bar { 0% { transform: translateX(-101%) rotate(0deg) } to { transform: translateX(0) rotate(0deg) } } [data-page=webStory] .webStory__content { background-color: #fff; border-radius: 10px; display: block; font-size: 15px; letter-spacing: .02em; line-height: 20px; margin-top: 10px; padding: 15px 20px; width: 48vh } [data-page=webStory] .webStory__content p+a, [data-page=webStory] .webStory__content p+p { padding-top: 5px } [data-page=webStory] .webStory__content p { font-size: 15px; letter-spacing: .02em; line-height: 20px } [data-page=webStory] .webStory__content .-underlined { text-decoration: underline } @media only screen and (max-width:786px) { [data-page=webStory] .webStory__content { width: 100% } } [data-page=webStory] .webStory__content strong { font-family: NeueMontreal-Medium } [data-page=webStory] .webStories__wrapper { padding-bottom: 89px; padding-top: 40px } @media(max-width:1023px) { [data-page=webStory] .webStories__wrapper { padding-top: 30px } } [data-page=webStory] .webStories__cards { display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr) } @media(max-width:1023px) { [data-page=webStory] .webStories__cards { grid-template-columns: repeat(2, 1fr) } } @media(max-width:767px) { [data-page=webStory] .webStories__cards { grid-template-columns: 1fr } } [data-page=webStory] .webStories__card { border: 1px solid #c4c4c4; border-radius: 10px; padding: 30px } @media(max-width:1023px) { [data-page=webStory] .webStories__card { padding: 20px } } [data-page=webStory] .webStories__cardImg { height: 100%; left: 0; position: absolute; top: 0; width: 100% } [data-page=webStory] .webStories__cardImgWrapper { border-radius: 10px; overflow: hidden; padding-top: 125%; position: relative; width: 100% } [data-page=webStory] .webStories__cardTitle { color: #000; font-size: 15px; letter-spacing: .02em; line-height: 20px; padding-top: 20px; width: 80% } body.menu-open .bar.animate span, body.paused .bar.animate span { animation-play-state: paused } @media(min-width:1024px) { [data-page=checkEmail]:before, [data-page=login]:before, [data-page=pickNewPassword]:before, [data-page=resetPassword]:before, [data-page=signUp]:before, [data-page=tellUsAboutYourself]:before, [data-page=verifyEmail]:before { background-image: url(../assets/pages/login/paint-drip.png); background-repeat: no-repeat; background-size: container; content: ""; height: 260px; position: absolute; right: 0; top: 0; width: 173px } } @media(max-width:767px) { [data-page=checkEmail] .checkEmail__container, [data-page=login] .loginForm__container, [data-page=pickNewPassword] .pickNewPasswordForm__container, [data-page=resetPassword] .resetPasswordForm__container, [data-page=signUp] .signUpForm__container, [data-page=tellUsAboutYourself] .tellUsAboutYourself__container, [data-page=verifyEmail] .verifyEmail__container { width: 100% } } @media(min-width:768px) { [data-page=checkEmail] .checkEmail__container, [data-page=login] .loginForm__container, [data-page=pickNewPassword] .pickNewPasswordForm__container, [data-page=resetPassword] .resetPasswordForm__container, [data-page=signUp] .signUpForm__container, [data-page=tellUsAboutYourself] .tellUsAboutYourself__container, [data-page=verifyEmail] .verifyEmail__container { align-items: center; display: flex; flex-direction: column; justify-content: center } [data-page=checkEmail] .checkEmail__wrapper, [data-page=login] .loginForm__wrapper, [data-page=pickNewPassword] .pickNewPasswordForm__wrapper, [data-page=resetPassword] .resetPasswordForm__wrapper, [data-page=signUp] .signUpForm__wrapper, [data-page=tellUsAboutYourself] .tellUsAboutYourself__wrapper, [data-page=verifyEmail] .verifyEmail__wrapper { border: 1px solid #e3e3e3; border-radius: 5px; padding: 35px 50px 40px; width: 420px } } [data-page=login] { position: relative } [data-page=login] main { align-items: flex-start; display: flex; justify-content: center; min-height: 100vh; padding: 20vh 0 68px } @media(max-width:767px) { [data-page=login] main { align-items: flex-start; padding: 80px 20px 0 } } [data-page=login] .loginForm__container .loginForm.is-submitting .c-submitButton__submittingText { color: #000 } [data-page=login] .loginForm__container .loginForm.is-submitting .c-submitButton__submittingDot { background-color: #000 } [data-page=login] .loginForm__camelLogo { display: block; height: 28px; margin: 0 auto } @media(max-width:1023px) { [data-page=login] .loginForm__camelLogo { height: 32px } } [data-page=login] .loginForm__welcomeBack { margin-top: 35px; padding-bottom: 10px } [data-page=login] .loginForm__welcomeBackHeading { text-align: center } [data-page=login] .loginForm__welcomeBackUserImage { border-radius: 50%; display: block; margin: 20px auto 0 } [data-page=login] .loginForm__welcomeBackUserName { margin-top: 5px; text-align: center } [data-page=login] .c-button.-googleLogin { margin-top: 35px } [data-page=login] .loginForm__or { color: #727272; margin-top: 20px; text-align: center; text-transform: uppercase } [data-page=login] .loginForm__inputWrapper { margin-top: 20px; position: relative } [data-page=login] .loginForm__inputWrapper+.loginForm__inputWrapper { margin-top: 10px } [data-page=login] .loginForm__inputWrapper.is-focused .loginForm__input { border: 1px solid #dfdfdf } [data-page=login] .loginForm__inputWrapper.is-empty .c-inputError, [data-page=login] .loginForm__inputWrapper.is-invalid .c-inputError { max-height: 48px } [data-page=login] .loginForm__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: #000; display: block; height: 50px; padding: 0 15px; width: 100% } [data-page=login] .loginForm__input::placeholder { -webkit-text-stroke-width: 0; color: #727272; font-family: NeueMontreal-Regular; font-size: 13px; font-weight: 400; letter-spacing: .03em; line-height: 15px } [data-page=login] .loginForm__input#passwordInput { padding-right: 40px } @media(max-width:767px) { [data-page=login] .loginForm__input[type=password] { letter-spacing: 3px } } @media(min-width:768px) { [data-page=login] .loginForm__input[type=password] { -webkit-text-stroke-width: 1px; font-family: Verdana, sans-serif; font-weight: 700; letter-spacing: 7px } } [data-page=login] .loginForm__passwordVisibility { align-items: center; cursor: pointer; display: flex; height: 50px; justify-content: center; position: absolute; right: 0; top: 0; width: 40px } [data-page=login] .loginForm__passwordVisibilityIcon { height: auto; width: 20px } [data-page=login] .loginForm__passwordVisibility:after { background-color: #000; bottom: 0; content: ""; height: 1px; left: 0; margin: auto; opacity: 0; position: absolute; right: 0; top: 0; transform: rotate(139deg); width: 21px } [data-page=login] .loginForm__passwordVisibility.is-visible:after { opacity: 1 } [data-page=login] .loginForm__footer { align-items: center; display: flex; justify-content: space-between; margin-top: 40px } [data-page=login] .loginForm__footer .loginForm__loginButton { background-color: #fff; border: 1px solid #000; transition: .2s linear } [data-page=login] .loginForm__footer .loginForm__loginButton:hover { border-color: #888 } [data-page=login] .loginForm__footer .loginForm__loginButton .c-submitButton__text { color: #000 } [data-page=login] .loginForm__forgotPasswordLink { color: #727272 } [data-page=login] .loginForm__forgotPasswordLink:hover { color: #000 } [data-page=login] .loginForm__createAccountLink { color: #727272; margin-top: 30px; text-align: center } [data-page=login] .loginForm__createAccountLink a { color: #000 } @media(max-width:767px) { [data-page=login] .loginForm__createAccountLink { border-top: 1px solid #e3e3e3; padding-top: 40px } } @media(min-width:768px) { [data-page=login] .loginForm__createAccountLink { text-align: center } } [data-page=signUp] { position: relative } [data-page=signUp] main { align-items: flex-start; display: flex; justify-content: center; min-height: 100vh; padding: 20vh 0 68px } @media(max-width:767px) { [data-page=signUp] main { align-items: flex-start; padding: 80px 20px 0 } } [data-page=signUp] .signUpForm__container .signUpForm.is-submitting .c-submitButton__submittingText { color: #000 } [data-page=signUp] .signUpForm__container .signUpForm.is-submitting .c-submitButton__submittingDot { background-color: #000 } [data-page=signUp] .signUpForm__camelLogo { display: block; height: 28px; margin: 0 auto } @media(max-width:1023px) { [data-page=signUp] .signUpForm__camelLogo { height: 32px } } [data-page=signUp] .c-button.-googleLogin { margin-top: 35px } [data-page=signUp] .signUpForm__or { color: #727272; margin-top: 20px; text-align: center; text-transform: uppercase } [data-page=signUp] .signUpForm__inputWrapper { margin-top: 20px; position: relative } [data-page=signUp] .signUpForm__inputWrapper+.signUpForm__inputWrapper { margin-top: 10px } [data-page=signUp] .signUpForm__inputWrapper.is-focused .signUpForm__input { border: 1px solid #dfdfdf } [data-page=signUp] .signUpForm__inputWrapper.is-focused .signUpForm__passwordConditions { max-height: 45px } [data-page=signUp] .signUpForm__inputWrapper.is-empty .c-inputError, [data-page=signUp] .signUpForm__inputWrapper.is-invalid .c-inputError { max-height: 48px } [data-page=signUp] .signUpForm__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: #000; display: block; height: 50px; padding: 0 15px; width: 100% } [data-page=signUp] .signUpForm__input::placeholder { -webkit-text-stroke-width: 0; color: #727272; font-family: NeueMontreal-Regular; font-size: 13px; font-weight: 400; letter-spacing: .03em; line-height: 15px } [data-page=signUp] .signUpForm__input#passwordInput { padding-right: 40px } @media(max-width:767px) { [data-page=signUp] .signUpForm__input[type=password] { letter-spacing: 3px } } @media(min-width:768px) { [data-page=signUp] .signUpForm__input[type=password] { -webkit-text-stroke-width: 1px; font-family: Verdana, sans-serif; font-weight: 700; letter-spacing: 7px } } [data-page=signUp] .signUpForm__passwordConditions { max-height: 0; overflow: hidden; transition: max-height .2s ease-out } [data-page=signUp] .signUpForm__passwordCondition { align-items: center; display: flex; position: relative } [data-page=signUp] .signUpForm__passwordConditionTick { align-items: center; display: flex; height: 15px; justify-content: flex-start; margin-right: 8px; position: relative; width: 15px } [data-page=signUp] .signUpForm__passwordConditionTick:before { background-color: #000; background-image: url(../assets/common/vectors/icon_red-cross.svg); background-position: 50%; background-repeat: no-repeat; background-size: 0; border-radius: 50%; content: ""; flex-shrink: 0; height: 5px; left: 50%; position: relative; transform: translateX(-50%); width: 5px } [data-page=signUp] .signUpForm__passwordConditionTick:after { background-image: url(../assets/common/vectors/icon_green-tick.svg); background-position: 50%; background-repeat: no-repeat; background-size: 15px 15px; content: ""; flex-shrink: 0; height: 15px; left: -6px; opacity: 0; position: relative; width: 15px } [data-page=signUp] .signUpForm__passwordCondition:first-child { padding-top: 10px } [data-page=signUp] .signUpForm__passwordCondition:not(:first-child) { padding-top: 5px } [data-page=signUp] .signUpForm__passwordCondition:last-child { padding-bottom: 10px } [data-page=signUp] .signUpForm__passwordCondition.is-satisfied .signUpForm__passwordConditionTick:before { opacity: 0 } [data-page=signUp] .signUpForm__passwordCondition.is-satisfied .signUpForm__passwordConditionTick:after { opacity: 1 } [data-page=signUp] .signUpForm__passwordCondition.is-not-satisfied .signUpForm__passwordConditionTick:before { background-color: transparent; background-size: 15px 15px; border-radius: 100%; height: 15px; left: 0; transform: translateX(0); width: 15px } [data-page=signUp] .signUpForm__passwordVisibility { align-items: center; cursor: pointer; display: flex; height: 50px; justify-content: center; position: absolute; right: 0; top: 0; width: 40px } [data-page=signUp] .signUpForm__passwordVisibilityIcon { height: auto; width: 20px } [data-page=signUp] .signUpForm__passwordVisibility:after { background-color: #000; bottom: 0; content: ""; height: 1px; left: 0; margin: auto; opacity: 0; position: absolute; right: 0; top: 0; transform: rotate(139deg); width: 21px } [data-page=signUp] .signUpForm__passwordVisibility.is-visible:after { opacity: 1 } [data-page=signUp] .signUpForm__footer { align-items: center; display: flex; justify-content: center; margin-top: 40px } [data-page=signUp] .signUpForm__footer .signUpForm__submitButton { background-color: #fff; border: 1px solid #000; transition: .2s linear } [data-page=signUp] .signUpForm__footer .signUpForm__submitButton:hover { border-color: #888 } [data-page=signUp] .signUpForm__footer .signUpForm__submitButton .c-submitButton__text { color: #000 } [data-page=signUp] .signUpForm.is-submitting .signUpForm__submitButton { width: 133px } [data-page=signUp] .signUpForm__submitButton { width: 182px } @keyframes dotFlashing { 0% { opacity: .3 } to { opacity: 1 } } [data-page=signUp] .signUpForm__loginLink { color: #727272; margin-top: 30px; text-align: center } [data-page=signUp] .signUpForm__loginLink a { color: #000 } @media(max-width:767px) { [data-page=signUp] .signUpForm__loginLink { border-top: 1px solid #e3e3e3; padding-top: 40px } } [data-page=verifyEmail] { position: relative } [data-page=verifyEmail] main { align-items: flex-start; display: flex; justify-content: center; min-height: 100vh; padding: 20vh 0 68px } @media(max-width:767px) { [data-page=verifyEmail] main { align-items: flex-start; padding: 80px 20px 0 } } [data-page=verifyEmail] .verifyEmail__camelLogo { display: block; margin: 0 auto } [data-page=verifyEmail] .verifyEmail__heading { margin-top: 35px; text-align: center } [data-page=verifyEmail] .verifyEmail__message { color: #727272; margin-top: 10px; max-width: 310px; text-align: center } [data-page=verifyEmail] .verifyEmail__message a { color: #000 } [data-page=verifyEmail] .c-button.-openGmail { margin-top: 40px } [data-page=verifyEmail] .verifyEmail__footer { align-items: center; display: flex; justify-content: center; margin-top: 40px } [data-page=verifyEmail] .verifyEmail__footer>:not(:first-child) { margin-left: 30px } [data-page=verifyEmail] .verifyEmail__reenterEmailLink { color: #727272 } [data-page=verifyEmail] .verifyEmail__reenterEmailLink:hover { color: #000 } [data-page=verifyEmail] .verifyEmail__submitButton { padding: 0 13px } [data-page=checkEmail] { position: relative } [data-page=checkEmail] main { align-items: flex-start; display: flex; justify-content: center; min-height: 100vh; padding: 20vh 0 68px } @media(max-width:767px) { [data-page=checkEmail] main { align-items: flex-start; padding: 80px 20px 0 } } [data-page=checkEmail] .checkEmail__camelLogo { display: block; margin: 0 auto } [data-page=checkEmail] .checkEmail__heading { margin-top: 35px; text-align: center } [data-page=checkEmail] .checkEmail__message { color: #727272; margin-top: 10px; text-align: center } [data-page=checkEmail] .checkEmail__message a { color: #000 } [data-page=checkEmail] .c-button.-openGmail { margin-top: 40px } [data-page=checkEmail] .checkEmail__footer { align-items: center; display: flex; justify-content: space-between; margin-top: 40px } [data-page=checkEmail] .checkEmail__reenterEmailLink { color: #727272; line-height: 15px } [data-page=checkEmail] .checkEmail__reenterEmailLink:hover { color: #000 } [data-page=resetPassword] { position: relative } [data-page=resetPassword] main { align-items: flex-start; display: flex; justify-content: center; min-height: 100vh; padding: 20vh 0 68px } @media(max-width:767px) { [data-page=resetPassword] main { align-items: flex-start; padding: 80px 20px 0 } } [data-page=resetPassword] .resetPasswordForm__camelLogo { display: block; margin: 0 auto } [data-page=resetPassword] .resetPasswordForm__heading { margin-top: 35px; text-align: center } [data-page=resetPassword] .resetPasswordForm__subheading { color: #727272; margin: 10px auto 0; max-width: 285px; text-align: center } [data-page=resetPassword] .resetPasswordForm__subheading a { color: #000 } [data-page=resetPassword] .resetPasswordForm__inputWrapper { margin-top: 20px; position: relative } [data-page=resetPassword] .resetPasswordForm__inputWrapper+.resetPasswordForm__inputWrapper { margin-top: 10px } [data-page=resetPassword] .resetPasswordForm__inputWrapper.is-focused .resetPasswordForm__input { border: 1px solid #dfdfdf } [data-page=resetPassword] .resetPasswordForm__inputWrapper.is-empty .c-inputError, [data-page=resetPassword] .resetPasswordForm__inputWrapper.is-invalid .c-inputError { max-height: 48px } [data-page=resetPassword] .resetPasswordForm__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: #000; display: block; height: 50px; padding: 0 15px; width: 100% } [data-page=resetPassword] .resetPasswordForm__input::placeholder { -webkit-text-stroke-width: 0; color: #727272; font-family: NeueMontreal-Regular; font-size: 13px; font-weight: 400; letter-spacing: .03em; line-height: 15px } [data-page=resetPassword] .resetPasswordForm__footer { align-items: center; display: flex; justify-content: space-between; margin-top: 40px } [data-page=resetPassword] .resetPasswordForm__returnToLoginLink { color: #727272 } [data-page=resetPassword] .resetPasswordForm__returnToLoginLink:hover { color: #000 } [data-page=resetPassword] .resetPasswordForm.is-submitting .resetPasswordForm__submitButton { width: 190px } [data-page=resetPassword] .resetPasswordForm__submitButton { width: 182px } [data-page=pickNewPassword] { position: relative } [data-page=pickNewPassword] main { align-items: flex-start; display: flex; justify-content: center; min-height: 100vh; padding: 20vh 0 68px } @media(max-width:767px) { [data-page=pickNewPassword] main { align-items: flex-start; padding: 80px 20px 0 } } [data-page=pickNewPassword] .pickNewPasswordForm__camelLogo { display: block; margin: 0 auto } [data-page=pickNewPassword] .pickNewPasswordForm__heading { margin-top: 35px; text-align: center } [data-page=pickNewPassword] .pickNewPasswordForm__inputWrapper { margin-top: 30px; position: relative } [data-page=pickNewPassword] .pickNewPasswordForm__inputWrapper+.pickNewPasswordForm__inputWrapper { margin-top: 10px } [data-page=pickNewPassword] .pickNewPasswordForm__inputWrapper.is-focused .pickNewPasswordForm__input { border: 1px solid #dfdfdf } [data-page=pickNewPassword] .pickNewPasswordForm__inputWrapper.is-focused .pickNewPasswordForm__passwordConditions { max-height: 70px } [data-page=pickNewPassword] .pickNewPasswordForm__inputWrapper.is-empty .c-inputError, [data-page=pickNewPassword] .pickNewPasswordForm__inputWrapper.is-invalid .c-inputError { max-height: 48px } [data-page=pickNewPassword] .pickNewPasswordForm__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: #000; display: block; height: 50px; padding: 0 15px; width: 100% } [data-page=pickNewPassword] .pickNewPasswordForm__input::placeholder { -webkit-text-stroke-width: 0; color: #727272; font-family: NeueMontreal-Regular; font-size: 13px; font-weight: 400; letter-spacing: .03em; line-height: 15px } [data-page=pickNewPassword] .pickNewPasswordForm__input#passwordInput, [data-page=pickNewPassword] .pickNewPasswordForm__input#reenterPasswordInput { padding-right: 40px } @media(max-width:767px) { [data-page=pickNewPassword] .pickNewPasswordForm__input[type=password] { letter-spacing: 3px } } @media(min-width:768px) { [data-page=pickNewPassword] .pickNewPasswordForm__input[type=password] { -webkit-text-stroke-width: 1px; font-family: Verdana, sans-serif; font-weight: 700; letter-spacing: 7px } } [data-page=pickNewPassword] .pickNewPasswordForm__passwordConditions { max-height: 0; overflow: hidden; transition: max-height .2s ease-out } [data-page=pickNewPassword] .pickNewPasswordForm__passwordCondition { align-items: center; display: flex; position: relative } [data-page=pickNewPassword] .pickNewPasswordForm__passwordConditionTick { align-items: center; display: flex; height: 15px; justify-content: flex-start; margin-right: 8px; position: relative; width: 15px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordConditionTick:before { background-color: #000; background-image: url(../assets/common/vectors/icon_red-cross.svg); background-position: 50%; background-repeat: no-repeat; background-size: 0; border-radius: 50%; content: ""; flex-shrink: 0; height: 5px; left: 50%; position: relative; transform: translateX(-50%); width: 5px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordConditionTick:after { background-image: url(../assets/common/vectors/icon_green-tick.svg); background-position: 50%; background-repeat: no-repeat; background-size: 15px 15px; content: ""; flex-shrink: 0; height: 15px; left: -6px; opacity: 0; position: relative; width: 15px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordCondition:first-child { padding-top: 10px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordCondition:not(:first-child) { padding-top: 5px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordCondition:last-child { padding-bottom: 10px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordCondition.is-satisfied .pickNewPasswordForm__passwordConditionTick:before { opacity: 0 } [data-page=pickNewPassword] .pickNewPasswordForm__passwordCondition.is-satisfied .pickNewPasswordForm__passwordConditionTick:after { opacity: 1 } [data-page=pickNewPassword] .pickNewPasswordForm__passwordCondition.is-not-satisfied .pickNewPasswordForm__passwordConditionTick:before { background-color: transparent; background-size: 15px 15px; border-radius: 100%; height: 15px; left: 0; transform: translateX(0); width: 15px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordVisibility { align-items: center; cursor: pointer; display: flex; height: 50px; justify-content: center; position: absolute; right: 0; top: 0; width: 40px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordVisibilityIcon { height: auto; width: 20px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordVisibility:after { background-color: #000; bottom: 0; content: ""; height: 1px; left: 0; margin: auto; opacity: 0; position: absolute; right: 0; top: 0; transform: rotate(139deg); width: 21px } [data-page=pickNewPassword] .pickNewPasswordForm__passwordVisibility.is-visible:after { opacity: 1 } [data-page=pickNewPassword] .pickNewPasswordForm__footer { align-items: center; display: flex; justify-content: center; margin-top: 40px } [data-page=pickNewPassword] .pickNewPasswordForm.is-submitting .pickNewPasswordForm__submitButton { width: 133px } [data-page=pickNewPassword] .pickNewPasswordForm__submitButton { width: 182px } [data-page=pickNewPassword] .pickNewPasswordForm__loginLink { color: #727272; margin-top: 40px; text-align: center } [data-page=pickNewPassword] .pickNewPasswordForm__loginLink a { color: #000 } @media(max-width:767px) { [data-page=pickNewPassword] .pickNewPasswordForm__loginLink { border-top: 1px solid #e3e3e3; padding-top: 40px } } [data-page=tellUsAboutYourself] { position: relative } [data-page=tellUsAboutYourself] main { align-items: flex-start; display: flex; justify-content: center; min-height: 100vh; padding: 20vh 0 68px } @media(max-width:767px) { [data-page=tellUsAboutYourself] main { align-items: flex-start; padding: 80px 20px 0 } } [data-page=tellUsAboutYourself] .tellUsAboutYourself__camelLogo { display: block; height: 28px; margin: 0 auto } @media(max-width:1023px) { [data-page=tellUsAboutYourself] .tellUsAboutYourself__camelLogo { height: 32px } } [data-page=tellUsAboutYourself] .tellUsAboutYourself__heading { margin-top: 35px; text-align: center } [data-page=tellUsAboutYourself] .tellUsAboutYourself__inputWrapper { position: relative } [data-page=tellUsAboutYourself] .tellUsAboutYourself__inputWrapper:before { content: ""; display: block; padding-top: 20px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__inputWrapper+.tellUsAboutYourself__inputWrapper:before { padding-top: 10px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__inputWrapper.-artistType { z-index: 1 } [data-page=tellUsAboutYourself] .tellUsAboutYourself__inputWrapper.-otherArtistType { height: 0; overflow: hidden } [data-page=tellUsAboutYourself] .tellUsAboutYourself__inputWrapper.is-invalid .c-inputError { max-height: unset } [data-page=tellUsAboutYourself] .tellUsAboutYourself__input { background-color: #f5f5f5; border: 1px solid transparent; border-radius: 5px; color: #000; display: block; height: 50px; padding: 0 15px; width: 100% } [data-page=tellUsAboutYourself] .tellUsAboutYourself__input::placeholder { -webkit-text-stroke-width: 0; color: #727272; font-family: NeueMontreal-Regular; font-size: 13px; font-weight: 400; letter-spacing: .03em; line-height: 15px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__input#emailInput { cursor: default } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeSelect { cursor: pointer; position: relative } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeSelect:after { background-image: url(../assets/common/vectors/icon_dropdown-arrow.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; content: ""; height: 6px; position: absolute; right: 10px; top: calc(50% - 3px); width: 10px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeSelect.is-opened:after { transform: rotate(180deg) } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeSelect.is-opened .tellUsAboutYourself__artistTypeInput { border-radius: 5px 5px 0 0; transition: border-radius 0s ease } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeSelect[data-selected-value=Other]~.c-tooltip { display: none } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeInput { border: 1px solid #dfdfdf; pointer-events: none; transition: border-radius .2s ease .4s } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeOptions { background-color: #fff; border-left: 1px solid #dfdfdf; border-radius: 0 0 5px 5px; border-right: 1px solid #dfdfdf; height: 0; left: 0; overflow: hidden; position: absolute; top: 100%; width: 100%; z-index: 23 } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeOptions:before { background-color: #dfdfdf; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 100% } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeOptions>* { padding-left: 15px; padding-right: 15px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeOptions>:first-child { padding-top: 15px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeOptions>:last-child { padding-bottom: 15px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeOptions>:not(:first-child) { margin-top: 20px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeTooltip { height: 14px; left: calc(100% + 18px); margin-left: 0; position: absolute; top: 28px; width: 14px } @media(max-width:1023px) { [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeTooltip { left: unset; right: 0; top: calc(100% + 10px) } } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeTooltip .c-tooltip__text { padding: 10px !important; width: 155px } @media(max-width:1023px) { [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeTooltip .c-tooltip__text { display: block !important; left: unset; right: -10px; width: 118px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__artistTypeTooltip .c-tooltip__text:before { left: unset; right: 12px } } [data-page=tellUsAboutYourself] .tellUsAboutYourself__subscribeToEmailsCheckbox { margin-top: 10px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__subscribeToEmailsCheckboxLabel { align-items: center; cursor: pointer; display: flex; position: relative } [data-page=tellUsAboutYourself] .tellUsAboutYourself__subscribeToEmailsCheckboxInput { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0 } [data-page=tellUsAboutYourself] .tellUsAboutYourself__subscribeToEmailsCheckboxInput:checked+.tellUsAboutYourself__subscribeToEmailsCheckboxTick:after { opacity: 1 } [data-page=tellUsAboutYourself] .tellUsAboutYourself__subscribeToEmailsCheckboxTick { border: 1px solid #727272; border-radius: 2px; height: 15px; position: relative; width: 15px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__subscribeToEmailsCheckboxTick:after { background-image: url(../assets/common/vectors/icon_checkbox-tick.svg); background-position: 50%; background-repeat: no-repeat; background-size: 8px auto; content: ""; height: 6px; left: calc(50% - 4px); opacity: 0; position: absolute; top: calc(50% - 3px); width: 8px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__subscribeToEmailsCheckboxText { color: #727272; margin-left: 5px } [data-page=tellUsAboutYourself] .tellUsAboutYourself.is-submitting .tellUsAboutYourself__submitButton { background-color: #888; width: 133px } [data-page=tellUsAboutYourself] .tellUsAboutYourself.is-submitting .tellUsAboutYourself__submitButtonText { opacity: 0 } [data-page=tellUsAboutYourself] .tellUsAboutYourself.is-submitting .tellUsAboutYourself__submitting { opacity: 1 } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton { align-items: center; background-color: #000; border-radius: 5px; display: flex; height: 40px; justify-content: center; margin: 40px auto 0; width: 182px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButtonText { color: #fff } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submitting { align-items: center; display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: absolute; top: 0; width: 100% } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submittingText { color: #fff } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submittingDots { display: flex; margin-left: 10px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submittingDots>:not(:first-child) { margin-left: 3px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submittingDot { animation: dotFlashing .6s infinite alternate; background-color: #fff; height: 4px; opacity: 1; width: 4px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submittingDot:first-of-type { animation-delay: .6s } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submittingDot:nth-of-type(2) { animation-delay: .7s } [data-page=tellUsAboutYourself] .tellUsAboutYourself__submitButton .tellUsAboutYourself__submittingDot:nth-of-type(3) { animation-delay: .8s } [data-page=tellUsAboutYourself] .tellUsAboutYourself__createAccountLink { color: #727272; margin-top: 40px } [data-page=tellUsAboutYourself] .tellUsAboutYourself__createAccountLink a { color: #000 } @media(max-width:767px) { [data-page=tellUsAboutYourself] .tellUsAboutYourself__createAccountLink { border-top: 1px solid #e3e3e3; padding-top: 40px } } @media(min-width:768px) { [data-page=tellUsAboutYourself] .tellUsAboutYourself__createAccountLink { text-align: center } }