@charset "UTF-8"; /*transition: color 0.3s ease;*/ /* COLORS in t.main */ /* $('body').get(0).style.setProperty('--VAR', 'VALUE'); */ /* document.documentElement[eg body].style.setProperty('--VAR', 'VALUE'); */ :root { --aobICAX: 160px; --aobICAY: 0; --aobMSGTop: 122px; --aabMinHeight: min(640px, calc(100vh - 75px)); --centWDefault: 200px; --centHDefault: auto; --centW: var(--centWDefault); --centH: var(--centHDefault); --origTop: 0; /* font types */ --font_gms: 'gmsfont'; --font_main: 'poppinsregular'; --font_main_fallback: 'poppinsregular_fallback'; --font_bold: 'poppinsbold'; --font_bold_fallback: 'poppinsbold_fallback'; --font_jose_reg: 'JosefinSansRegular'; --font_alt: 'WorkSansRegular'; --font_blog_title: 'bodoni'; --font_blog_title_italic: 'bodoni_italic'; --headline_size: '42px'; --hero_size: '42px'; --sub_headline_size: '26px'; --title_size: '18px'; --normal_size: '16px'; /* font weights */ --thin: 100; --extraLight: 200; --light: 300; --regular: 400; --normal: 400; --book: 400; --medium: 500; --semiBold: 600; --bold: 700; --extraBold: 800; --black: 900; --heavy: 900; } /*document.documentElement.style.setProperty('--aobMSGTop', '90px');*/ /* CSS Reset by Eric Meyer - Released under Public Domain http://meyerweb.com/eric/tools/css/reset v2.0 | 20110126 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, icons, user_menu {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} :focus-visible {outline: 0;} ins, s {text-decoration: none;} del {text-decoration: line-through;} template {display: none;} /*table {border-collapse: collapse; border-spacing: 0;} */ /* END CSS Reset */ /* global, style everything on page */ *, html, body { position: relative; font-family: var(--font_main), var(--font_main_fallback), system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /*font-family: var(--font_main), var(--font_alt), Arial, sans-serif;*/ font-size: 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* @font-face { font-family: 'xxxxxxx'; src: url('/fonts/xxxxxxx.woff2') format('woff2'), url('/fonts/xxxxxxx.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } */ @font-face { font-family: 'JosefinSansRegular'; src: url('/fonts/josefinsans-regular.woff2') format('woff2'), url('/fonts/josefinsans-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /*google font Open Font License*/ @font-face { font-family: 'poppinsregular'; src: url('/fonts/poppins-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'poppinsbold'; src: url('/fonts/poppins-bold.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* metrics-tuned fallback for poppins */ @font-face { font-family: 'poppinsregular_fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Nimbus Sans L'), local('Helvetica'); font-style: normal; font-weight: var(--normal); font-display: swap; /* tune to visually match Poppins */ size-adjust: 108%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; } /* poppins bold fallback */ @font-face { font-family: 'poppinsbold_fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Nimbus Sans L'), local('Helvetica'); font-weight: var(--bold); font-style: normal; font-display: swap; size-adjust: 108%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; } @font-face { font-family: 'libre_barcode_ean13_textRg'; src: url('/fonts/librebarcodeean13text-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* blog title font */ @font-face { font-family: 'bodoni'; src: url('/fonts/bodoni-16-book.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'bodoni_italic'; src: url('/fonts/bodoni-16-book-italic.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSansRegular'; src: url('/fonts/worksans-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'roboto'; src: url('/fonts/roboto-regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /*gms font*/ @font-face{font-family:'gmsfont';src:url('/fonts/GMSFontRegular.woff2') format('woff2'),url('/fonts/GMSFontRegular.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;unicode-range:U+f042-f0b2}gms{display:inline;font:inherit;color:inherit;padding:0;margin:0;border:0}.gms{font-family:'gmsfont';-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;top:2px;text-align:center;font-style:normal;font-variant:normal;font-weight:normal;line-height:1;text-rendering:auto;speak:none;font-size:30px}.gms_facebook:before{content:'\f042'}.gms_messenger:before{content:'\f043'}.gms_youtube:before{content:'\f044'}.gms_twitter:before{content:'\f045'}.gms_twitter_x:before{content:'\f046'}.gms_instagram:before{content:'\f047'}.gms_linkedin:before{content:'\f048'}.gms_pinterest:before{content:'\f049'}.gms_snapchat:before{content:'\f04a'}.gms_reddit:before{content:'\f04b'}.gms_discord:before{content:'\f04c'}.gms_tiktok:before{content:'\f04d'}.gms_whatsapp:before{content:'\f04e'}.gms_blogger:before{content:'\f04f'}.gms_telegram:before{content:'\f050'}.gms_digg:before{content:'\f051'}.gms_gem:before{content:'\f052'}.gms_location:before{content:'\f053'}.gms_search:before{content:'\f054'}.gms_chat:before{content:'\f055'}.gms_user:before{content:'\f056'}.gms_user_solid:before{content:'\f057'}.gms_bag:before{content:'\f058'}.gms_target:before{content:'\f059'}.gms_dot:before{content:'\f05a'}.gms_heart:before{content:'\f05b'}.gms_close_x:before{content:'\f05c'}.gms_bars:before{content:'\f05d'}.gms_off:before{content:'\f05e'}.gms_on:before{content:'\f05f'}.gms_sun:before{content:'\f060'}.gms_moon:before{content:'\f061'}.gms_earth:before{content:'\f062'}.gms_microchip:before{content:'\f063'}.gms_check_off:before{content:'\f064'}.gms_check_on:before{content:'\f065'}.gms_sliders:before{content:'\f066'}.gms_file_lines:before{content:'\f067'}.gms_envelope{transform:translateY(-.1em)}.gms_envelope:before{content:'\f068'}.gms_envelope_open:before{content:'\f069'}.gms_remove:before{content:'\f06a'}.gms_arrows_circle:before{content:'\f06b'}.gms_arrows_strait:before{content:'\f06c'}.gms_info:before{content:'\f06d'}.gms_terminal:before{content:'\f06e'}.gms_mobile_button:before{content:'\f06f'}.gms_mobile_volume1:before{content:'\f070'}.gms_mobile_volume2:before{content:'\f071'}.gms_phone_volume1:before{content:'\f072'}.gms_phone_volume2:before{content:'\f073'}.gms_phone_volume3:before{content:'\f074'}.gms_phone_volume4:before{content:'\f075'}.gms_box_x:before{content:'\f076'}.gms_display:before{content:'\f077'}.gms_user_secret:before{content:'\f057'}.gms_customer_service:before{content:'\f057'}.gms_copy:before{content:'\f07a'}.gms_history:before{content:'\f07b'}.gms_sign_in:before{content:'\f07c'}.gms_sign_out:before{content:'\f07d'}.gms_caret_left:before{content:'\f07e'}.gms_caret_right:before{content:'\f07f'}.gms_customer_service1:before{content:'\f080'}.gms_customer_service2:before{content:'\f081'}.gms_trash:before{content:'\f082'}.gms_question:before{content:'\f083'}.gms_power:before{content:'\f084'}.gms_chev_left:before{content:'\f085'}.gms_chev_right:before{content:'\f086'}.gms_chev_up:before{content:'\f087'}.gms_chev_down:before{content:'\f088'}.gms_hand_heart:before{content:'\f089'}.gms_hand_dollar:before{content:'\f08a'}.gms_hand_redeem:before{content:'\f08b'}.gms_activity:before{content:'\f08c'}.gms_bag_dollar:before{content:'\f08d'}.gms_percent:before{content:'\f08e'}.gms_truck:before{content:'\f08f'}.gms_gift:before{content:'\f090'}.gms_exclamation:before{content:'\f091'}.gms_star:before{content:'\f092'}.gms_print:before{content:'\f093'}.gms_eye_on:before{content:'\f094'}.gms_eye_off:before{content:'\f095'}.gms_plus:before{content:'\f096'}.gms_minus:before{content:'\f097'}.gms_angle_left:before{content:'\f098'}.gms_angle_right:before{content:'\f099'}.gms_angle_up:before{content:'\f09a'}.gms_angle_down:before{content:'\f09b'}.gms_star2:before{content:'\f09c'}.gms_play:before{content:'\f09d'}.gms_pause:before{content:'\f09e'}.gms_ban:before{content:'\f09f'}.gms_share:before{content:'\f0a0'}.gms_share_nodes:before{content:'\f0a1'}.gms_list:before{content:'\f0a2'}.gms_clean_broom:before{content:'\f0a3'} /* 3-state cycle */ .gms_mobile_volume2:before { --mobile_state1: '\f06f'; --mobile_state2: '\f070'; --mobile_state3: '\f071'; --mobile_state_default: var(--mobile_state3); } @keyframes phone_mobile_cycle { 0%, 33.32% { content: var(--mobile_state1); } 33.33%, 66.65% { content: var(--mobile_state2); } 66.66%, 99.99% { content: var(--mobile_state3); } } .gms_mobile_volume2:hover:before, .gms_mobile_volume2:focus-visible:before { animation: phone_mobile_cycle 1.2s steps(1) infinite; } .phone_anim_mobile { width: 33px; } /* 4-state cycle */ /* fix phone placement */ .gms_phone_volume1:before { --desktop_state1: '\f072'; --desktop_state2: '\f073'; --desktop_state3: '\f074'; --desktop_state4: '\f075'; --desktop_state_default: var(--desktop_state1); } @keyframes phone_desktop_cycle { 0%, 24.99% { content: var(--desktop_state1); } 25%, 49.99% { content: var(--desktop_state2); } 50%, 74.99% { content: var(--desktop_state3); } 75%, 99.99% { content: var(--desktop_state4); } } .gms_phone_volume1:hover:before, .gms_phone_volume1:focus-visible:before { animation: phone_desktop_cycle 1.6s steps(1) infinite; } .phone_anim_desktop { width: 33px; } /*loading shimmer / gradient*/ .loading { --loading-base: #e9ecef; --loading-highlight: #f8f9fa; --loading-radius: 0.5rem; --loading-speed: 1.3s; --loading-angle: 100deg; position: relative; color: transparent !important; -webkit-text-fill-color: transparent; user-select: none; pointer-events: none; } .loading::after { content: ""; position: absolute; inset: 0; border-radius: var(--loading-radius); background-image: linear-gradient( var(--loading-angle), var(--loading-base) 25%, var(--loading-highlight) 37%, var(--loading-base) 63% ); background-size: 200% 100%; animation: loading-shimmer var(--loading-speed) linear infinite; } .loading > * { visibility: hidden; } /* Images: use a background shimmer instead of ::after - not working yet */ img.loading { --loading-base: #e9ecef; --loading-highlight: #f8f9fa; --loading-speed: 1.2s; --loading-angle: 100deg; /*--ar: 16/9;*/ display: inline-block; /* ensure background fills the box */ background-image: linear-gradient( var(--loading-angle), var(--loading-base) 25%, var(--loading-highlight) 37%, var(--loading-base) 63% ); background-size: 200% 100%; animation: loading-shimmer var(--loading-speed) linear infinite; object-fit: cover; /* optional if you set a fixed ratio */ color: transparent; /* avoids brief alt-text flash */ } /* disable the generic overlay for specifically */ img.loading::after { content: none; } /* Optional aspect-ratio helpers when you do not have width/height attrs */ img.loading { aspect-ratio: var(--ar, auto); } /* set --ar: 16/9, 4/3, etc. */ .ar-1-1 { --ar: 1/1; } .ar-4-3 { --ar: 4/3; } .ar-3-2 { --ar: 3/2; } .ar-16-9 { --ar: 16/9; } .ar-21-9 { --ar: 21/9; } @keyframes loading-shimmer { 0% { background-position-x: 200%; } 100% { background-position-x: -200%; } } @media (prefers-reduced-motion: reduce) { .loading::after { animation: none; } } .nvis, .novis, #aobvar1 { position: fixed !important; left: -9999px !important; } .vis { position: inherit; left: 0; } .tab { display: inline-block; min-width: 7.5rem; } .tab2 { display: inline-block; min-width: 3.75rem; } .spacer1 { display: block; width: 100%; height: 20px; } .acsb-sr-only { position: fixed !important; /*left: -1000px !important;*/ /*margin-top: 5px !important;*/ } .aobDefPointer { cursor: var(--pointer); } .bold { font-weight: bold; } .center { text-align: center; } .centerInnerContainer { display: inline-block; position: relative; max-width: 49%; cursor: var(--pointer); overflow: hidden; } /*transition: [property] [duration] [timing-function] [delay] [behavior];*/ /*https://developer.mozilla.org/en-US/docs/Web/CSS/transition*/ /* .centerInnerContainer .large-img, .centerInnerContainer .prodimage { -webkit-transition: transform .25s linear; -moz-transition: transform .25s linear; -ms-transition: transform .25s linear; -o-transition: transform .25s linear; transition: transform .25s linear; } .centerInnerContainer .large-img:hover, .centerInnerContainer .large-img:focus-visible, .centerInnerContainer .prodimage:hover, .centerInnerContainer .prodimage:focus-visible { transform: scale(1.05); } */ .ocImgBack { position: absolute; top: 0; left: 0; width: 100%; } .centerHor { position: fixed !important; left: 50% !important; transform: translateX(-50%); width: var(--centW) !important; height: var(--centH) !important; z-index: 2147483647; } .centerVer { position: fixed !important; top: 50% !important; transform: translateY(-50%); z-index: 2147483647; } .centerHor.centerVer { transform: translate(-50%, -50%); } .centerVertical { top: 50%; transform: translateY(-50%); } .centerInner { display: none; position: absolute; top: 50%; left: 50%; max-width: 98%; max-height: 98%; padding: 10px 14px; color: var(--white); background: var(--black); border: 1px solid var(--black); transform: translate(-50%, -50%); cursor: var(--pointer); z-index: 1000; overflow-y: auto; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-word; /*word-break: break-all;*/ /*break on character, better for logographic systems*/ word-break: break-word; /*white-space: nowrap;*/ /*don't wrap text*/ } /*.large-img:hover + .centerInner, .large-img:focus-visible + .centerInner,*/ .centerInner:hover, .centerInner:focus-visible { color: var(--pink100); background: var(--white); border: 1px solid var(--pink50); } .lh_offset { margin: -.45rem 0 0 0; } .earthday, .earthday div, .earthday div i, #earthday { color: var(--earthday); } select { /*padding: 9px 5px 9px 13px;*/ padding: 5px 0 5px 9px; height: 2rem; color: var(--black); background: var(--white); border: 1px solid var(--grey9); } option { color: var(--black); background: var(--white); } .black, .dark, .infoSub1 strong { color: var(--black); } .norm { font-weight: normal; } strong { /*color: var(--black);*/ } #aobTopPadding { margin: 0; padding: 0; font-size: 0; } #aobInfoData { display: none; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); width: 94%; min-width: 310px; /*max-width: 560px;*/ max-width: 800px; max-height: calc(100vh - 20px); padding: 10px; border: 1px solid var(--pink100); background: var(--greye); font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; line-height: 1.5; box-sizing: border-box; z-index: 2147483647; overflow-y: auto; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-word; /*word-break: break-all;*/ /*break on character, better for logographic systems*/ word-break: break-word; /*white-space: nowrap;*/ /*don't wrap text*/ } #aobInfoData_close, #aobInfoData_copy { position: absolute; top: 10px; color: var(--black); font-size: 20px; cursor: var(--pointer); } #aobInfoData_close { right: 10px; } #aobInfoData_copy { right: 40px; } #aobInfoData_close:hover, #aobInfoData_close:focus-visible, #aobInfoData_copy:hover, #aobInfoData_copy:focus-visible { color: var(--pink100); } .imgSpacer1, .vSectionSpacer { vertical-align: top; width: 1px; } .imgSpacer1 { height: 25px; } .vSectionSpacer { height: 50px; } .cat_title, .cat_title_blog { position: relative; padding: 30px 0 0 0; text-align: center; font-family: var(--font_jose_reg); font-size: 42px; letter-spacing: .6rem; text-transform: uppercase; color: var(--grey7); } .cat_title { } .cat_title_blog { font-family: var(--font_blog_title); } .altext { margin: 10px 0 0 0; padding: 8px 0 5px 0; background: var(--white); background: rgba(var(--rgbWhite), .70); } #professional, #professional_mob, #aobinfohold { display: none; overflow-wrap: anywhere; word-wrap: anywhere; -ms-word-break: break-all; /*word-break: break-all;*/ /*break on character, better for logographic systems*/ word-break: break-all; /*white-space: nowrap;*/ /*don't wrap text*/ } #aobinfohold { padding: 10px; } #tSwitcher42 { position: fixed; top: 5px; left: 35px; padding: 5px; font-size: 12px; color: var(--black); background: var(--teal100); border: 0; z-index: 2147483647; } #tmpDataHold, #tmpMessage { position: fixed; display: none; font-size: 12px; cursor: not-allowed; z-index: 2147483647; } #tmpDataHold { top: 5px; right: calc(3% + 100px); } #tmpMessage { bottom: 0; right: 0; padding: 5px; background: var(--white); } #message_polex, .message_polex { width: 100%; height: auto; margin: 5px auto 15px auto !important; padding: 1em; line-height: 1.25em; border: 1px solid var(--black); background: var(--pink20); } #aobPro, #aobCert, #aobCookieAlert, #aobAlertBox { position: fixed; top: 20px; left: 0; right: 0; /*width: 600px;*/ width: fit-content; height: auto; max-width: 96%; margin: 0 auto; padding: 25px; /*inset offset-x offset-y blur-radius spread-radius - comma seperated for multiple shadows*/ -webkit-box-shadow: 10px 10px 20px 0 rgba(var(--rgbBlack), 0.2); -khtml-box-shadow: 10px 10px 20px 0 rgba(var(--rgbBlack), 0.2); -moz-box-shadow: 10px 10px 20px 0 rgba(var(--rgbBlack), 0.2); box-shadow: 10px 10px 20px 0 rgba(var(--rgbBlack), 0.2); box-sizing: border-box; z-index: 2147483647; } #aobPro { padding: 25px 50px; } #aobPro, #aobCert, #aobCookieAlert { color: var(--black); background: var(--white); border: 2px solid var(--pink50); } #aobAlertBox { padding: 35px 0 25px 0; overflow: hidden; } #aobAlertBox, #aobPro { display: flex; flex-direction: column; min-width: 350px; /*min-height: min(640px, calc(100vh - 75px));*/ max-height: calc(100vh - 45px); color: var(--black); background: var(--white); border: 1px solid var(--pink100); } #aobPro { overflow-y: auto; overflow-x: hidden; } .aobAlertBoxCenter { display: block; margin: 0 auto; } #alertText img { /*min-width: 300px;*/ max-width: 100%; } .pro_title { margin: 0 0 20px 0; font-family: var(--font_bold); font-size: 23px; } .pro_title_sub { margin: 25px 0 10px 0; font-size: 20px; } .pro_text { margin: 0 0 7px 0; font-size: 14px; } .pro_info_list { list-style: disc; margin: 0 0 15px 0; } .pro_info_list li { margin: 0 0 10px 20px; font-size: 14px; } .pro_info_list li:last-child { margin: 0 0 0 20px; } #faire_main { margin: 40px 0 0 0; } #faire_left, #faire_right { display: inline-block; margin: 0; padding: 0; width: calc(50% - 4px); box-sizing: border-box; vertical-align: top; } #faire_left { width: 50%; padding: 0 15px; } #faire_right { width: 50%; } #faire_right img { width: 100%; height: auto; } #faire_logos { text-align: center; } #faire_aob_logo, #faire_logo { vertical-align: middle; } #faire_logo { width: 150px; /*width: clamp(95px, calc(10vw + 60px), 150px); width: clamp(95px, calc(50vw - 80px), 150px);*/ width: clamp(115px, calc(50vw - 80px), 100px); } #faire_aob_logo { font-size: 20px; /*font-size: clamp(10px, calc(9.090909vw - 21.81818px), 20px);*/ } #faire_callout_cont { display: block; /*text-align: center;*/ margin: 30px 0; } #faire_callout, .faire_link div { padding: 5px 15px; } #faire_callout { display: inline-block; } #faire_callout { color: var(--black); background: var(--greyd); } .faire_link { display: block; text-align: center; margin: 30px 0; } .faire_link div { padding: 15px 30px; font-size: 13px; letter-spacing: 1.2px; font-weight: 400; text-transform: uppercase; color: var(--white); background: var(--black); } .faire_link:hover div, .faire_link:focus-visible div { color: var(--black); background: var(--greyd); } #faire_note { font-size: 12px; color: var(--grey5); } #faire_callout > * { display: inline-block; margin: 3px; font-size: 14px; vertical-align: top; } .faire_icon { width: 14px; } .faire_i { top: 0; padding: 0 10px; /*padding: 0 clamp(10px, calc(1.8181818vw + 3.63636px), 20px); padding: 0 clamp(10px, calc(9.090909vw - 21.81818px), 20px);*/ font-size: 15px; /*font-size: clamp(10px, calc(1.8181818vw + 3.63636px), 20px);; font-size: clamp(10px, calc(9.090909vw - 21.81818px), 20px);*/ vertical-align: middle; } #faire_list { list-style: disc; margin: 0 0 15px 0; } #faire_list li { margin: 0 0 15px 20px; } #faire_list li::marker, #faire_list li span, .pro_text, .pro_info_list li::marker, .pro_info_list li { color: var(--grey7); } #faire_list li:last-child { margin: 0 0 0 20px; } #faire_h1 { font-family: var(--font_blog_title); font-weight: 100; font-size: 35px; margin: 20px 0; line-height: 1.1; } .faire_ns { /*display: none;*/ } @media only screen and (max-width: 900px) { #faire_left, #faire_right { width: 100%; } } .alertTitle { position: absolute; top: 0; left: 0; font-family: var(--font_bold); width: 100%; max-height: 57px; color: var(--black); background: var(--pink10); padding: 20px 25px; box-sizing: border-box; overflow: hidden; overflow-wrap: anywhere; z-index: 2147483647; } .alertText { position: relative; margin: 25px 0 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-word; /*word-break: break-all;*/ /*break on character, better for logographic systems*/ word-break: break-word; /*white-space: nowrap;*/ /*don't wrap text*/ } .alertText, #afw_list_cont, #afw_redeem, #afw_coupons, #afw_activity, #afw_faq_text { flex-grow: 1; padding: 0 25px; min-height: 40px; overflow-x: hidden; overflow-y: auto; /*scrollbar-width: none;*/ scrollbar-color: var(--pink30) var(--pink10); } .alertButton { display: inline-block; margin: 5px 15px; padding: 10px; border: 1px solid var(--black); font-size: 12px; text-transform: uppercase; cursor: var(--pointer); } .afw { left: -25px; width: 418px; background: var(--greye); margin: 10px 0 5px 0; padding: 10px 25px; box-sizing: border-box; } .afwtop { margin: -5px 0 5px 0; } .agree { display: inline-block; float: right; margin: 10px 0 0 10px; padding: 5px 30px; border: 2px solid var(--pink50); cursor: var(--pointer); } .agree:hover, .agree:focus-visible { background: var(--pink50); border: 2px solid var(--pink100); } #optOut { color: var(--pink100); font-family: var(--font_bold); cursor: var(--pointer); } #optOut:hover, #optOut:focus-visible { color: var(--black); } #aobextra { display: block; position: fixed; top: 100px; left: 100px; width: 10px; height: 10px; z-index: 2147483647; } #special { display: none; position: fixed; top: 50px; left: 0; right: 0; width: 159px; height: auto; margin: 0 auto; padding: 10px; text-align: center; cursor: var(--pointer); box-sizing: border-box; z-index: 2147483647; } #sb_login, #sb_create, #sb_forgot { position: relative; display: none; } .skip_nav { position: fixed; top: -1000px; left: -1000px; padding: 20px 30px; color: var(--black); background: var(--greyMain); z-index: 2147483647 !important; } a, .lnk, .afw_link2 { position: relative; text-decoration: none; color: var(--links); cursor: var(--pointer); } a:not(.menumain, .submenu, .submenulnk, .mobile_shop_bottom), .lnk, .afw_link2 { font-family: var(--font_bold); } a.black, a:hover, a:focus-visible, .lnk:hover, .lnk:focus-visible, .afw_link2:hover, .afw_link2:focus-visible { color: var(--black); } a.black:hover, a.black:focus-visible { color: var(--links); } body { overflow-x: hidden !important; color: var(--black); background: var(--white); } /*hover over item, display alt tag in box*/ /*remove "X"s to use and useAltPopup = false; on searchpage*/ .itemContainer a[alt]:after { opacity: 0; content: attr(alt); position: absolute; top: var(--aobICAY); /*left: var(--aobICAX);*/ left: min(var(--aobICAX), calc(100vw - 430px)); /* 420px width + 10px buffer */ color: var(--black); background: var(--pink10); border: 1px solid var(--pink100); font-size: 14px; font-weight: normal; line-height: 1.3; letter-spacing: .05em; padding: 10px; width: 420px; min-width: 150px; max-height: 420px; text-align: left; pointer-events: none; white-space: pre-wrap; /* white-space: New lines Spaces & tabs Text wrapping pre Preserve Preserve No wrap pre-wrap Preserve Preserve Wrap pre-line Preserve Collapse Wrap */ /*overflow: visible;*/ overflow-x: auto; overflow-y: hidden; z-index: 2147483647; /*https://developer.mozilla.org/en-US/docs/Web/CSS/transition*/ /*transition: property duration timing-function delay|initial|inherit;*/ /*transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;*/ -webkit-transition: opacity .15s ease-in 0s; -moz-transition: opacity .15s ease-in 0s; -ms-transition: opacity .15s ease-in 0s; -o-transition: opacity .15s ease-in 0s; transition: opacity .15s ease-in 0s; } .itemContainer a[alt]:hover:after { opacity: 1; -webkit-transition: opacity .25s ease-in .5s; -moz-transition: opacity .25s ease-in .5s; -ms-transition: opacity .25s ease-in .5s; -o-transition: opacity .25s ease-in .5s; transition: opacity .25s ease-in .5s; } .itemContainer a[alt].unset:after { content: '' !important; color: unset; background: unset; border: unset; font-size: unset; padding: unset; width: unset; min-width: unset; max-height: unset; pointer-events: auto !important; } .point, .pointer { cursor: var(--pointer) !important; } .nopoint { cursor: default !important; } a:hover, a:focus-visible { color: var(--black); } #menu_shop a:hover div, #menu_shop a:hover div i, #menu_shop a:focus-visible div, #menu_shop a:focus-visible div i { color: var(--pink100); } .dislin { color: var(--black); } .dislin:hover, .dislin:focus-visible { color: var(--pink100); } a img { border: none; } img { color: var(--pink100); font-size: 12px; font-weight: normal; } .list_thumb { width: 100%; height: auto; } .aobname, .aobnamePI { color: var(--black); } .aobname:hover, .aobname:focus-visible { color: var(--pink100); } .aobname:hover .cart-partnumber, .aobname:focus-visible .cart-partnumber, .aobname:hover .cart-size, .aobname:focus-visible .cart-size { color: var(--pink50); } .aobnamePI { } .closeBox { position: absolute; top: 0; right: 0; cursor: var(--pointer); font-size: 15px; padding: 5px 10px 5px 12px; z-index: 100; -webkit-border-radius: 0 0 0 10px; -khtml-border-radius: 0 0 0 10px; -moz-border-radius: 0 0 0 10px; -o-border-radius: 0 0 0 10px; border-radius: 0 0 0 10px; } .closeBox:hover, .closeBox:focus-visible { color: var(--pink100); } p { line-height: 1.4; } img[src="about:blank"] { display: none; } p img { width: 100%; height: auto; max-width: 400px; } .cky { position: fixed; top: -300px; left: -300px; width: 1px; height: 1px; } fieldset { padding: 0; border: 0; margin: 0; } .border_box, .border_box2 { border: 1px solid var(--black); } .border_box { padding: 20px; } .border_box2 { padding: 5px 20px; } .border_box_outer { display: flex !important; min-height: 170px; align-items: center; } .border_box_inner { display: inline-block; margin: 0 auto; text-align: center; } #big10free { display: none; } #cs1_title { margin: 0 0 20px 20px; font-size: 25px; text-transform: uppercase; } .fletter { font-family: var(--font_light); font-weight: var(--light); color: var(--pink100); } .cs1_sub { font-size: 22px; } .cs1_block { display: none; padding: 20px; line-height: 1.45; } .cs1Arrow { position: absolute; right: 2rem; } .cs1_h1 { font-size: 20px; } .cs1_h2 { position: relative; font-size: 16px; background: var(--greye); margin: 0 0 2px 0; padding: 20px; cursor: var(--pointer); } .cs1_h3 { margin: 0 0 5px 0; } .cs1_h2, .cs1_block { width: 45%; } .cs1_ol, .cs1_ol2 { margin: 0 0 0 20px; } .cs1_ol { list-style: lower-alpha inside none; } .cs1_ol2 { list-style: decimal inside none; } .cs1_ol .cs1_li, .cs1_ol2 .cs1_li { margin: 0 0 15px 0; } .cs1_ul { list-style: none inside none; } .cs1_ul .cs1_li { position: relative; margin: 0 0 0 15px; line-height: 1.75; } .cs1_ul .cs1_li:before { content: "\02D"; position: absolute; left: -15px; } @media only screen and (max-width: 640px) { .cs1_h2, .cs1_block { width: 100%; } } #header { /*position: fixed;*/ position: sticky; top: 0; left: 0; padding: 50px 3% 30px 3%; background: var(--white); width: 100%; z-index: 2147483645; } #head1 { padding: 10px 10px 10px 2.5%; background: var(--white); width: 100%; z-index: 2147483645; } #search-box-cont { /*position: fixed;*/ position: sticky; top: 125px; left: 3%; width: 94%; z-index: 2147483644; } #search-box { position: fixed; width: 100%; padding: 10px 0 10px 10px; outline: 6px solid var(--white); } /* @supports (backdrop-filter: blur()) { #search-box { background: rgba(var(--rgbWhite), .85); backdrop-filter: blur(10px); } } */ #search-box:placeholder-shown { border: 1px solid var(--pink100); background: var(--pink10); } #search-results-header { margin: 0 0 35px 0; color: var(--black); font-size: 1.25rem; text-align: center; line-height: 1.25; } #search-results-header, #search-results-header .scPlural { font-family: var(--font_bold); } #search-results-error { display: none; } #search-results { /*mobile*/ z-index: 2147483643; } #shopping_bag { color: var(--black); } #shopping_bag:hover, #shopping_bag:focus-visible { color: var(--pink100); } #shopping_bag_count { display: none; position: absolute; padding: .15rem .35rem; /*padding: .25rem .35rem .13rem .35rem;*/ color: var(--white); background: var(--pink100); top: 0; right: -4px; width: 12px; height: 12px; font-size: 0px; /*font-size: 12px;*/ white-space: nowrap; } #mini-bag-view { display: none; position: fixed; top: -200px; right: 10px; width: 325px; min-height: 200px; max-height: calc(100vh - 75px); overflow-x: hidden; overflow-y: auto; color: var(--grey6); background: var(--white); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; transition: top 1.0s ease; border: 1px solid var(--greyMain); z-index: 2147483647; } #mini-bag-view.ie8 { border: 2px solid var(--grey9); } /************************************************************************/ /* Begin ShoppingCartInfo*/ /************************************************************************/ #mini-bag-close { position: absolute; top: 5px; right: 5px; cursor: var(--pointer); } #mini-bag-header { /*font-size: 20px;*/ font-size: 15px; /*margin: 0 0 0 35px;*/ /*padding: 5px;*/ padding: 25px 15px 0 15px; text-transform: uppercase; } #mini-item-display { padding-bottom: 15px; } #mini-item-display .mini-bag-item { width: 90%; min-height: 60px; margin: 0 0 20px 10px; font-size: 12px; text-transform: uppercase; } #mini-item-display .mini-bag-item:last-child { margin: 0 0 0 10px; } #mini-item-display .mini-details, #mini-item-display .mini-img { display: inline-block; vertical-align: top; } #mini-item-display .mini-details { margin: 0 0 0 5px; width: calc(100% - 110px); } #mini-item-display .mini-img { width: 100px; height: 100px; } #mini-item-display .mini-img img { width: 100%; height: auto; } #mini-bag-view .mini-name { margin: 10px 0 0 0; font-family: var(--font_bold); line-height: 1; } #mini-item-display .mini-part-number, #mini-item-display .mini-price, #mini-item-display .mini-quantity { margin: 5px 0 0 0; } #mini-bag-to-cart { display: block; width: 70%; margin: 10px auto; padding: 10px 0; color: var(--black); font-size: 14px; font-weight: normal; text-align: center; text-transform: uppercase; border: 1px solid var(--black); } #mini-bag-to-cart:hover, #mini-bag-to-cart:focus-visible { background: var(--pink100); border: 1px solid var(--pink50); } #mini-bag-summary { /*position: absolute;*/ /*left: 25px;*/ /*bottom: 10px;*/ min-height: 45px; /*width: 160px;*/ padding: 0 0 0 25px; font-family: var(--font_bold); text-transform: uppercase; } #mini-summary-header { font-size: 12px; margin-top: 5px; } #mini-summary-items, #mini-summary-subtotal { margin-top: 5px; font-size: 12px; font-weight: normal; text-transform: none; } #mini-bag-controls { position: absolute; right: 25px; bottom: 10px; height: 60px; width: 130px; text-align: center; } #mini-bag-controls img { cursor: var(--pointer); } #mini-bag-controls #mini-view-bag { margin-top: 8px; } /* End ShoppingCartInfo*/ .shownohover { background: var(--white) !important; border: none !important; cursor: default !important; } .polishSimItem, .notavail, .addItem, .addItem2, .shopnow1, .addWL, .addtoWL, .addtoWL2, .addtoWLYes, .addtoWLYes2, .compCheck { position: absolute; top: -20px; cursor: var(--pointer); color: var(--black); margin: 0; padding: 0; box-sizing: border-box; font-size: 25px; text-align: center; z-index: 2147483644; opacity: 0.35; filter: alpha(opacity=35); /*Opacity for IE8 and lower*/ -ms-zoom: 1; /*IE7 fix*/ } .compCheck { top: -20px; right: 65px; } .compCheck i { cursor: var(--pointer); } .notavail, .addItem, .addItem2, .shopnow1, .addtoWL2, .addtoWLYes2 { right: 0; } .addWL { left: 20px; } .addtoWL, .addtoWLYes { right: 30px; } @media (hover: hover) { .polishSimItem:hover, .notavail:hover, .addItem:hover, .addItem2:hover, .shopnow1:hover, .addWL:hover, .addtoWL:hover, .addtoWL2:hover, .addtoWLYes2:hover { color: var(--pink100); opacity: 1.0; filter: alpha(opacity=100); } } .addtoWLYes, .addtoWLYes2, .compCheckYes { opacity: 1.00; filter: alpha(opacity=100); /*Opacity for IE8 and lower*/ -ms-zoom: 1; /*IE7 fix*/ } .addtoWLYes i, .addtoWLYes2 i, .compCheckYes i { color: var(--pink100); } #footer { margin: 20px 0 0 0; padding: 0; width: 100%; color: var(--black); z-index: 2047483640; } #footer-info { display: none; margin: 0 0 20px 0; } #footer-media-links { margin: 0 0 20px 0; text-align: center; } #footer-media-links i { margin: 0 .85rem; font-size: 2.5rem; color: var(--black); } #footer-media-links i:hover, #footer-media-links i:focus-visible { color: var(--pink100); } #footer_data_top, #footer_data_bottom { padding: 35px 45px; } #footer_data_top { background: var(--greya); } #footer_data_bottom { /*background: var(--greyMain);*/ background: var(--greyd); } .foot_col { display: inline-block; width: 24%; min-width: 250px; vertical-align: top; } .foot_title { margin: 0 0 1rem 0; font-family: var(--font_bold); font-size: 15px; } .foot_link, .foot_link2, .side_menu_link, #footer-live-help, #copy { margin: 0 0 1rem 0; font-size: 13px; font-weight: normal; color: var(--black); } .foot_link, .side_menu_link { display: block; } .foot_link:hover, .foot_link:focus-visible, .side_menu_link:hover, .side_menu_link:focus-visible { color: var(--links); } #footer-live-help, #copy { margin: .5rem 0 0 0; text-align: center; } #copy { line-height: 1.3; } .copyImg { width: 10px; height: auto; vertical-align: top; } .sup, .sub, .sub2 { display: inline-block; font-size: .6em; font-size: calc(100% - 3px); } .sup { vertical-align: top; } .sub1 { display: block; position: absolute; bottom: 2px; right: 4px; font-size: 8px; cursor: var(--pointer); } .sub1:hover, .sub1:focus-visible { color: var(--pink100); } .sub2 { display: block; margin: 10px 0 0 0; letter-spacing: 3px; } @media only screen and (max-width: 500px) { #footer_data_top, #footer_data_bottom { padding: 35px 25px; } #footer #footer-columns .column, #footer #footer-columns-blog .column_blog { margin: 0 16px 7px 0 !important; padding: 0 0 0 0 !important; } } .current_page { color: var(--pink100); display: inline-block; font-family: var(--font_bold); cursor: default; } .current_page:hover, .current_page:focus-visible { color: #090; } #footer-full-site, #mobile-site-link { display: block; font-size: 1rem; padding: 10px; color: var(--teal100); text-decoration: none; text-align: center; cursor: var(--pointer); z-index: 2147483645; } #mobile-site-link { } #related_pages { font-family: var(--font_bold); font-size: 15px; text-align: center; text-transform: uppercase; } #footer-columns-outer { margin: 10px 0 0 0; } #footer #footer-columns, #footer #footer-columns-blog { padding: 15px 0; font-size: 12px; line-height: 1.8; } #footer #footer-columns a, #footer #footer-columns-blog a { display: block; color: var(--grey5); text-decoration: none; } #footer #footer-columns .column, #footer #footer-columns-blog .column_blog { display: inline-block; margin: 0 16px 10px 0; padding: 0 0 0 1.5rem; width: 250px; vertical-align: top; text-align: left; white-space: nowrap; /*overflow: hidden;*/ } #footer #footer-columns .column:last-child, #footer #footer-columns-blog .column_blog:last-child { /*border-right: 1px solid var(--greyd);*/ } #footer #footer-columns .column a, #footer #footer-columns-blog .column_blog a { overflow: hidden; } #footer #footer-columns .column a:hover, #footer #footer-columns .column a:focus-visible, #footer #footer-columns-blog .column_blog a:hover, #footer #footer-columns-blog .column_blog a:focus-visible { color: var(--pink100); } #bl_spacer { display: inline-block; width: 1px; height: 30px; } #brand_logo_main, .media_icon { display: inline-block; } #aob_logo { width: auto; height: 30px; vertical-align: middle; } #searchReload { display: none; position: fixed; top: 10px; left: 10px; cursor: var(--pointer); z-index: 2147483647; } nav, icons, user_menu { display: inline; } icons, user_menu { position: absolute; top: 63px; /*right: 2.5%;*/ right: 3%; text-align: right; } icons { /*width: 30%;*/ } icons i { top: -2px !important; vertical-align: middle; } #internationalicon { position: relative; } #internationalbubble { display: none; position: absolute; right: 21px; top: -41px; padding: 10px; width: 250px; color: var(--black) !important; background: var(--pink10) !important; border: 1px solid var(--pink50); font-size: 12px; text-align: center; letter-spacing: 1px; line-height: 1.3; -webkit-border-radius: 10px 10px 0 10px; -khtml-border-radius: 10px 10px 0 10px; -moz-border-radius: 10px 10px 0 10px; -o-border-radius: 10px 10px 0 10px; border-radius: 10px 10px 0 10px; cursor: not-allowed !important; } .hb_container { } .hb_container i { font-size: 21px; } .hb_lines { height: 25%; width: 100%; background: black; margin-bottom: 15%; } .toggle_color_menu { background: grey !important; } #menu_shop, #menu_brands, user_menu { display: none; background: var(--white); } #nav_items { position: relative; } #menu_shop, #menu_brands { position: absolute; top: 33px; } #menu_shop { /*width: 250px;*/ width: 420px; } #menu_brands { width: 220px; /*outline: 1px solid var(--pink100);*/ /*outline-offset: -1px;*/ } #menu_shop, #menu_brands { padding: 20px; max-height: calc(100vh - 110px); border: 1px solid var(--pink50); overflow-x: hidden; overflow-y: auto; z-index: 2147483647; } #menu_brands img { width: 100%; height: auto; padding: 10px; padding: 10px 10px; vertical-align: top; } .tab_highlight { outline: 2px solid #00a99d; outline-offset: 5px; z-index: 100; } a.tab_highlight:not(.side_menu_item) { display: inline-block; } .menumain, .menuicon { display: inline-block; color: var(--black); } .menumain { letter-spacing: .1em; margin: 0 0 0 3%; /*margin: 0 0 0 35px;*/ /*font-family: var(--font_main);*/ font-size: 14px; text-transform: uppercase; } .menuicon { font-size: 24px; margin: 0 0 0 20px; vertical-align: middle; } .menumain:hover, .menuicon:hover { color: var(--pink100); } #toggleMenu { display: none; position: absolute; top: 0; left: 0; cursor: var(--pointer); } #nav-3 { display: none; position: fixed; padding: 0 0 30px 0; width: 100%; height: 100vh; max-width: 500px; top: 40px; left: 0; overflow: auto; background: #f3f3f3; z-index: 2147483647; } #nav-3 #botdiv { position: absolute; bottom: 0; } #navBG { display: none; position: fixed; background: #000; top: 40px; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: .5; z-index: 2147483646; } @media only screen and (max-width: 1175px) { icons, user_menu { top: 35px; } .menumain { margin: 0 0 .5rem 3% } } @media only screen and (max-width: 770px) { #header { padding: 17px 10px 10px 10px; } #search-box-cont { top: 90px; } nav { display: block; } #locator, #chat, #user_menu { /*display: none;*/ } #internationalicon svg { width: 18px; height: 18px; } #brand_logo_main { /*position: absolute;*/ top: -10px; /*margin: 0 0 0 30px; use for popup menu*/ margin: 0 0 0 10px; text-align: left; width: auto; } #aob_logo { width: auto; height: 22px; display: block; } #toggleMenu { /*display: block;*/ } .menuicon { margin: 0; padding: 0; margin: 0 10px 0 0; font-size: 22px; } #rewardsicon_inner, #locatori, #shopping_bagi { font-size: 26px; } #country_flag_icon { width: auto; height: 16px; } icons, user_menu { top: 12px; } } @media only screen and (max-width: 500px) { nav { height: 1px; } icons { position: relative; top: -7px; display: block; left: 3%; right: unset; text-align: left; } #brand_logo_main { margin: 0 0 0 24px; } #toggleMenu { display: block; } #menu_shop { position: fixed; top: 40px; left: 0; width: 100%; height: 100vh; max-height: calc(100vh - 40px); border: none; background: var(--greyd); overflow: hidden auto; } #shop_title, #brands, #professional, #inspiration, #blog, #bloglink { display: none !important; } #professional_mob { display: block; } #internationalbubble { top: 24px; right: unset; border-radius: 10px 10px 10px 10px; box-shadow: 0px 8px 5px 0px rgba(var(--rgbBlack), 0.4); } #internationalbubble::before { content: ''; position: absolute; top: -10px; /* Half the triangle height to sit on border */ left: 34px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--pink50); /* Match border color */ } #internationalbubble::after { content: ''; position: absolute; top: -9px; /* 1px lower to cover the border */ left: 34px; /* Same position as ::before */ width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--pink10); /* Match background color */ } #account-profile-name { line-height: 1.4; } } #tutorials, #tutorials_menu { display: none; } #tutorials { color: var(--black); background: var(--greyMain); cursor: var(--pointer); } #tutorials:hover, #tutorials:focus-visible { color: var(--pink100); background: var(--pink30); } .disabled { color: var(--greyMain) !important; background: var(--grey5) !important; cursor: not-allowed !important; } #tutorials_menu.disabled { background: transparent !important; } .tutorialButton, .tutorialButtonWait { display: inline-block; position: absolute; right: 0; padding: 5px 10px; } .tutorialLink { margin: 0 0 10px 0; color: var(--black); cursor: var(--pointer);; } .tutorialLink:hover, .tutorialLink:focus-visible { color: var(--pink100); } .tutorialLink:last-child { margin: 0; } .tutorialButton { color: var(--black); background: var(--white); border: 1px solid var(--black); cursor: var(--pointer); } .tutorialButtonWait { color: var(--greyMain); background: var(--grey5); border: 1px solid var(--black); } .tutorialButton:hover, .tutorialButton:focus-visible { background: var(--pink100); } #aobtutorial { z-index: 2147483647; } #user_name, .side_menu_item, .side_menu_item_noLink, #menu_shop .nav-item { display: block; padding: 10px 30px 10px 10px; font-weight: normal; font-size: 16px; cursor: var(--pointer); text-align: left; text-transform: uppercase; color: var(--black); } #user_name { font-family: var(--font_bold); cursor: default; } .mcMessage, .mcMessage2 { padding: 0 10px; font-size: .75rem; text-align: left; } .mcMessage { margin: 0 0 10px 0; display: none; } .mcMessage2 { margin: 20px 0; } .brand-menu-link { display: inline-block; } .smi_back { padding: 5px 30px 0 10px; height: 21px; font-family: var(--font_bold); background: var(--greyb); } .smi_sub { font-family: var(--font_bold); background: var(--pink30); } .side_menu_item:hover, .side_menu_item_noLink:hover, .side_menu_item:focus-visible, .side_menu_item_noLink:focus-visible, .smi_back:hover, .smi_back:focus-visible, #menu_shop .nav-item:hover, #menu_shop .nav-item:focus-visible, /*#menu_brands .brand-menu-link:hover, #menu_brands .brand-menu-link:focus-visible,*/ .brand-menu-link-selected { color: var(--pink100); /*background: var(--greyMain);*/ } #menu_brands .brand-menu-link:hover img, #menu_brands .brand-menu-link:focus-visible img { /* about pink100 */ filter: invert(26%) sepia(69%) saturate(6698%) hue-rotate(322deg) brightness(97%) contrast(92%); /* about pink50 */ /*filter: invert(86%) sepia(23%) saturate(3314%) hue-rotate(287deg) brightness(100%) contrast(94%);*/ } /*.side_menu_item:not(:last-child) {}*/ .side_menu_item:last-child, .side_menu_item_noLink:last-child { border-bottom: 0; } .side_menu_item > a, .side_menu_item_noLink > a { font-size: 0.55rem !important; font-weight: normal; display: block; } #preorder { display: none; } .template_name { display: none; } .polish_only { display: none !important; } .banner-image-center { margin: 0 0 20px 0; z-index: 2147483640; } #content { position: relative; display: block; margin: 0 auto 0 auto; padding: 10px; width: 100%; min-height: 51vh; vertical-align: top; } #aobCommonData { display: none; padding: 10px; width: 1px; height: 1px; background: #000; } #aobmessage, #aobmessage2 { position: relative; text-align: center; line-height: 1.4; z-index: 2147483641; } #aobmessage { /* display: flex; flex-direction: column; justify-content: center; */ /*//DDDDDDD margin: var(--aobMSGTop, 122px) 0 20px 0; */ padding: 15px 3%; color: var(--black); background: var(--greye); } #aobmessage2 { margin: -15px 0 20px 0; padding: 15px 0; /*background: var(--pink10);*/ overflow: hidden; } .aobmessageSpacer { display: inline-block; padding: 0 20px; max-width: 95%; border-right: 1px solid var(--black); text-align: left; vertical-align: top; } .aobmessageSpacer:first-child { padding: 0 20px 0 0; } .aobmessageSpacer:last-child { padding: 0 0 0 20px; border-right: none; } @media only screen and (max-width: 719px) { .aobmessageSpacer { display: block; padding: 15px 0; max-width: 100%; border-right: none; border-bottom: 1px solid var(--black); text-align: left; vertical-align: top; } .aobmessageSpacer:first-child { padding: 15px 0 15px 0; } .aobmessageSpacer:last-child { padding: 15px 0 0 0; border-bottom: none; } } .aobm2Spacer { display: block; height: 10px; } #aobmessage2_content { display: inline-block; position: relative; left: 0; white-space: nowrap; cursor: var(--pointer); } #aobmessage2_content img { vertical-align: bottom; } /* #aobmessage2:hover, #aobmessage2:focus-visible { color: var(--pink100); } */ .login_link { margin: 10px 0 0 0; } .menu_pop_temp { border: 1px solid transparent !important; } #login-panel-main, #login-panel-forgot, #login-panel-create { display: none; } #login-panel-title { font-size: 28px; color: var(--black); } #login-title-message.success-message { min-height: 33px; margin: 0; font-size: 16px; text-transform: none; } .facebook-frame { display: inline-block; height: 30px; border: 0; padding: 0; } #facebook-login-frame { position: absolute; top: 260px; left: 115px; display: none; width: 220px; z-index: 50; } #login-panel[data-mode="login"] #facebook-login-frame { display: block; } .login-panel-or { width: 100%; margin: 5px 0; font-size: 12px; text-align: center; } #login-panel-main { width: 450px; } #login-panel[data-mode="login"] #login-panel-main { display: block; } #login-panel-form, #login-panel-form2, #login-create-form { position: relative; /*width: 100%;*/ margin: 0 auto; float: inherit; padding: 0 10px; } #pro-select-input { text-align: left; } #login-panel .login-field { display: inline-block; width: 100%; margin-bottom: 10px; font-size: 14px; color: var(--black); text-transform: uppercase; text-align: left; } .login-field input[type="text"], .login-field input[type="password"], .login-field input[type="email"] { display: block; width: 100%; height: 24px; margin-top: 5px; padding: 0 4px; border: 1px solid var(--black); line-height: 24px; text-transform: none; } #email-continue, #request_code, .login_button, .login-panel-button, .login-panel-button2, .login-panel-buttonfb, .lcb1, .xSubmit-button { width: 95%; padding: 6px 0; margin: 5px auto; border: 0; font-size: .55rem; color: var(--white); background: var(--black); text-transform: uppercase; cursor: var(--pointer); } .grey1 { background: var(--greyMain) !important; } #login-new-here { margin: 30px 0 10px 0; padding: 0 0 0 10px; text-align: left; } #email_change { font-size: 12px; color: var(--pink100); cursor: var(--pointer); } #email_change:hover, #email_change:focus-visible { color: var(--black); } #verifyCode { display: none; text-align: left; } #cdSubmit2, #goBack, #goBack2, #goBack3 { padding: 7px 10px; margin: 10px 0 0 0; width: 100%; } #cdTimerCont { margin: 10px 0 0 0; width: 100%; } #cdCode, #cdSubmit2, #goBack, #goBack2, #goBack3, #cdCodeText { display: none; } #cdSubmit2, #goBack, #goBack2, #goBack3 { color: var(--white); background: var(--black); border: 1px solid var(--pink50); font-family: var(--font_bold); text-align: center; text-transform: uppercase; } #cdSubmit2 { color: var(--white); background: var(--black); border: 1px solid var(--black); } #goBack, #goBack2, #goBack3 { color: var(--black); background: var(--white); border: 1px solid var(--black); } #cdSubmit2:hover, #cdSubmit2:focus-visible, #goBack:hover, #goBack:focus-visible, #goBack2:hover, #goBack2:focus-visible, #goBack3:hover, #goBack3:focus-visible { color: var(--white); background: var(--pink100); border: 1px solid var(--pink100); } /*******************/ /* new login */ /*******************/ #menu_pop { display: none; position: fixed; top: -1px; bottom: -1px; right: -1px; padding: 40px 40px 12vh 40px; color: var(--black); background: var(--white); /*border: 0;*/ border: 1px solid var(--pink100); width: 500px; min-width: 360px; max-width: 100%; text-align: center; overflow-x: hidden; overflow-y: auto; z-index: 2147483647; } #menu_pop #login-title-message, #menu_pop #create-title-message { font-family: var(--font_bold); font-size: 20px; text-transform: unset; } #menu_pop .closeBox { position: fixed; top: 20px; right: 10px; font-weight: normal; color: var(--black); } #menu_pop .closeBox:hover, #menu_pop .closeBox:focus-visible { color: var(--pink100); } #menu_pop .form_input { margin: 0 0 20px 0; padding: 30px 20px; width: 100%; font-size: 16px; } #menu_pop select { } #menu_pop #login-panel-submit, #menu_pop #login-create-button, #menu_pop #login-create-submit, #menu_pop #login-forgot-button { padding: 20px 10px; width: 100%; } #menu_pop .form_input:disabled { background: var(--greyb); } #menu_pop .eye { top: 24px; } #menu_pop #login-panel-form .eye { top: 16px; } #menu_pop .mcMessage2 { line-height: 1.5; } #menu_pop #caState { padding: 0 0 0 15px !important; } #menu_pop #login-new-here { margin: 30px 0 10px 0; padding: 5px 0 5px 5px; /*width: 90%;*/ font-size: 20px; text-align: left; color: var(--black); font-family: var(--font_bold); font-size: 20px; text-transform: unset; } #menu_pop #login-forgot-form { width: 100%; } #menu_pop .login-info { margin: 0 0 10px 0; padding: 5px 0 5px 5px; width: 80%; text-align: left; } #menu_pop #login_from_device, #menu_pop #login_forgot_link { margin: 20px 0 0 0; padding: 0; font-size: 12px; font-weight: normal; text-transform: none; text-align: right; } #menu_pop #login-panel-form, #menu_pop #login-panel-form2, #menu_pop #login-create-form { padding: 0; } #login-panel-next { text-align: left; } #loginTypeText { margin: 0 0 15px 0; font-family: var(--font_bold); } .loginTypeBold { font-family: var(--font_bold); } .loginTypeCont { margin: 0 0 20px 0; } .loginTypeCont label { } .loginTypeData { margin: -10px 0 30px 0; } .loginType { position: absolute; left: -24px; top: -4px; } #cdCodeText { margin: 0 0 15px 0; } #caEmailOffers, #caRewards { margin: 0 0 20px 0; text-align: left; } #menu_pop .value-label { padding: 4px 12px 10px 0px; } user_menu { top: 122px; right: 0; /*padding: 20px;*/ width: 500px; min-width: 360px; max-width: 100%; height: 100vh; max-height: calc(100vh - 125px); border-left: 1px solid var(--pink100); overflow-y: auto; z-index: 200; } user_menu #user_options_container { padding: 7vh 40px 7vh 40px; height: 100%; } user_menu .side_menu_item i { min-width: 25px; /*text-align: center;*/ } user_menu .menu-close { position: sticky; top: 20px; right: 20px; width: unset; } @media only screen and (max-width: 500p) { user_menu { top: 91px; max-height: calc(100vh - 91px); border-left: none; } } /*******************/ /* end new login */ /*******************/ #pro-select-input input[type="radio"], #pro-select-input input[type="checkbox"] { margin-right: 10px; } #afw_create, #afw_forgot, #afw_login { display: none; } #login-panel-submit, #login-create-button, #login-forgot-button, #login-create-submit, #login-fb, #afw_login_submit, #afw_create_submit, #afw_forgot_button, #afw_login-create-button, #email-continue, #request_code, #cdSubmit2, #goBack, #goBack2, #goBack3 { width: 95%; display: inline-block; margin: 0 auto; text-align: center; padding: 15px 0 12px 0; font-size: .75rem; border: 1px solid var(--black); } #afw_login_submit, #afw_create_submit, #afw_forgot_button, #afw_forgot_link, #afw_login, #afw_login-create-button { width: 100%; } #login-panel-submit, #login-forgot-button, #login-create-submit, #login-fb, #afw_login_submit, #afw_create_submit, #afw_forgot_button, #afw_login-create-button, #email-continue, #request_code, #cdSubmit2 { color: var(--white); background: var(--black); border: 1px solid var(--black); } #login-panel-submit:hover, #login-panel-submit:focus-visible, #login-create-button:hover, #login-create-button:focus-visible, #login-forgot-button:hover, #login-forgot-button:focus-visible, #login-create-submit:hover, #login-create-submit:focus-visible, #login-fb:hover, #login-fb:focus-visible, #afw_login_submit:hover, #afw_login_submit:focus-visible, #afw_create_submit:hover, #afw_create_submit:focus-visible, #afw_forgot_button:hover, #afw_forgot_button:focus-visible, #afw_login-create-button:hover, #afw_login-create-button:focus-visible, #email-continue:hover, #email-continue:focus-visible, #request_code:hover, #request_code:focus-visible, #cdSubmit2:hover, #cdSubmit2:focus-visible { color: var(--white); background: var(--pink100); border: 1px solid var(--pink100); } #goBack, #goBack2, #goBack3 { color: var(--black); background: var(--white); border: 1px solid var(--black); } #goBack:hover, #goBack:focus-visible, #goBack2:hover, #goBack2:focus-visible, #goBack3:hover, #goBack3:focus-visible { color: var(--white); background: var(--black); border: 1px solid var(--black); } .afw_share { color: var(--black); font-size: 20px; margin: 0 25px 0 0; } .afw_share:hover, .afw_share:focus-visible { color: var(--pink100); } #afw_activity_data { margin: 10px 0 0 0; } #email-continue, #request_code, #cdSubmit2, #goBack, #goBack2, #goBack3 { padding: 20px 10px; width: 100%; } #request_code, #cdSubmit2, #goBack, #goBack2, #goBack3 { display: none; margin: 0 0 20px 0; } #login-create-button { color: var(--black); background: var(--white); border: 1px solid var(--black); } #login-panel-form > .login-panel-button, #login-panel-form > .login-panel-button2, .xSubmit-button { margin: 0 auto; } #login-panel-form2 > .login-panel-button, #login-panel-form2 > .login-panel-button2, .xSubmit-button { margin: 10px auto; } #login-panel-form2 > .login-field { width: 95%; } #login-fb { background: var(--greya); padding: 6px 0; } a > #login-fb { font-weight: normal; font-size: .55rem; color: var(--black); z-index: 2147483646; } #login-fb > img { width: 25px; height: 25px; vertical-align: middle; } .login-panel-button.login-create { } #login_forgot_link { margin: 0 0 20px 200px; padding: 10px 13px 0 0; width: auto; font-family: var(--font_bold); font-size: .65rem; /*text-align: right;*/ } #login-facebook-or { } #login-main-message { margin: 0 0 15px 0; line-height: 1.2; } #login-panel[data-mode="forgot"] #login-panel-forgot { display: block; } .code_arc { border: 1px solid var(--pink100); padding: 2px 5px; line-height: 1.5; } .radio-group { margin: 0 0 5px 0; } .blackOR { color: var(--black) !important; text-align: left !important; font-weight: bold !important; } .sb_click, .afw_link3, #login_forgot_link { display: inline-block; font-size: 12px; color: var(--black); text-align: center; text-transform: uppercase; cursor: var(--pointer); width: 90%; } #afw_forgot_link, .afw_link, .afw_link3 { margin: 10px 0; width: 100%; } #cartOnlyFields { position: relative; display: none; } .afw_button { display: inline-block; color: var(--white); background: var(--black); padding: 10px 5px 9px 5px; width: 45%; border: 1px solid var(--black); text-align: center; text-transform: uppercase; font-size: 11px; margin: 2%; cursor: var(--pointer); } .afw_button:hover, .afw_button:focus-visible { background: var(--pink100); border: 1px solid var(--pink50); } #afw_forgot_link, .afw_link, .afw_link2, .afw_link3 { } #login-panel-forgot { width: 450px; padding: 45px 0 10px; } #login-forgot-form { position: relative; width: 90%; margin: 0 auto; } #login-panel[data-mode="create"] #login-panel-create { display: block; } #login-panel-create { padding: 45px 20px 15px; } #facebook-create-text { margin-top: 38px; font-size: 14px; } #login-create-form2 { position: relative; width: 95%; text-align: left; float: right; } #login-create-form .register-field { display: inline-block; vertical-align: top; } #login-create-form .register-field:nth-of-type(2n) { margin-left: 30px; } #login-create-form .register-pro-select { margin-bottom: 10px; } #login-create-form .register-pro-select .register-pro-fields { margin-top: 0; } #login-create-form .register-pro-select .register-field { margin-top: 10px; margin-bottom: 0; } #login-create-message { clear: right; } .login-panel-back { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border: 1px solid var(--grey9); font-family: var(--font_bold); font-size: 12px; color: var(--grey9); text-transform: uppercase; cursor: var(--pointer); z-index: 100; } .login-panel-back:hover, .login-panel-back:focus-visible { background: var(--grey9); color: var(--white); } .passfield { position: relative; } .eye { position: absolute; top: 10px; right: 3px; cursor: var(--pointer); opacity: 0.5; z-index: 2147483647; } #aobAlertBox .eye { top: 9px; right: 35px; } .form_input, .form_input2 { font-size: .75rem; margin: 0 0 10px 0; padding: 0 0 0 0.5rem; } .form_input, #email_notify_button { width: 95%; height: 2rem; border: 1px solid var(--greya); } #email_notify_button { padding: 4px 0 0 0; font-size: 13px; text-align: center; cursor: var(--pointer); } #email_notify_button i { font-size: 20px; } #email_notify_button:hover, #email_notify_button:focus-visible { background: var(--pink50); } .form_input2 { width: 100%; padding: 0.5rem 0 0 0.5rem; } .panel-title, .afw_panel_title { width: 90%; text-align: left; color: var(--black); /*font-family: var(--font_bold);*/ font-size: 14px; text-transform: uppercase; } .panel-title { margin: 0 0 10px 0; padding: 5px 0 5px 5px; } .afw_panel_title { margin: 45px 0 7px 0; padding: 5px 0; width: 100%; } .afw_panel_title.fst { margin: 0 0 7px 0; } #afw_reward_points, .afw_rewards_callout { color: var(--pink100); font-family: var(--font_bold); } #afw_reward_points_title { padding: 5px 25px 0 25px; } #afw_terms_conditions_text { margin: 10px 0 0 0; } .panel-text { margin: 10px 20px; font-size: 14px; color: var(--grey4); /*text-align: justify;*/ } #rewardsYN2, #part-rewards-nli { cursor: var(--pointer); } #points-data input, .points-data input { margin: 3px 3px 3px 0; } .zoya_rewards_logo { width: auto; height: 25px; } .zoya_rewards_logo, .zoya_rewards_i { vertical-align: middle; } .aob_bottle_icon { height: 10px; vertical-align: top; } #afw_list_title, #afw_list_back, #redeem_title, #afw_redeem_back, #available_title, #afw_coupon_back, #afw_view_coupons, #afw_activity_title, #afw_activity_back, #afw_faq_title, #afw_faq_back, #afw_coupon_btmain { position: relative; font-family: var(--font_bold); white-space: nowrap; cursor: var(--pointer); } #afw_coupon_btmain { color: var(--pink100); } #afw_list_title, #redeem_title, #available_title, #afw_activity_title, #afw_faq_title { margin: 20px 0 -7px 0; padding: 10px; /*width: 150px;*/ border: 1px solid var(--greyd); font-weight: normal; } #afw_list_title i, #redeem_title i, #available_title i, #afw_activity_title i, #afw_faq_title i { position: absolute; top: 14px; right: 10px; } #afw_list_back, #afw_redeem_back, #afw_coupon_back, #afw_activity_back, #afw_faq_back { width: 60px; font-size: 14px; } #afw_list_title:hover, #afw_list_title:focus-visible, #redeem_title:hover, #redeem_title:focus-visible, #available_title:hover, #available_title:focus-visible, #afw_activity_title:hover, #afw_activity_title:focus-visible, #afw_faq_title:hover, #afw_faq_title:focus-visible { background: var(--pink50); } #afw_list_back:hover, #afw_list_back:focus-visible, #afw_redeem_back:hover, #afw_redeem_back:focus-visible, #afw_coupon_back:hover, #afw_coupon_back:focus-visible, #afw_view_coupons:hover, #afw_view_coupons:focus-visible, #afw_activity_back:hover, #afw_activity_back:focus-visible, #afw_faq_back:hover, #afw_faq_back:focus-visible { color: var(--pink100); } #afw_coupon_btmain:hover, #afw_coupon_btmain:hover { color: var(--black); } #afw_list_title i, #afw_list_back i, #redeem_title i, #focus-visible i, #available_title i, #afw_redeem_back i, #afw_coupon_back i, #afw_view_coupons i, #afw_activity_title i, #afw_activity_back i, #afw_faq_title i, #afw_faq_back i { font-size: 10px; } #afw_list_cont, #afw_redeem, #afw_coupons, #afw_activity, #afw_faq_text { position: relative; display: none; margin: 45px 0 0 0; } #afw_rewards_message { margin: 25px 0 20px 0; font-size: 14px; padding: 10px 20px; background: var(--pink20); border: 1px solid var(--pink100); } .afw_redeem_line { position: relative; width: 100%; margin: 0 auto 20px auto; padding: 0 0 10px 0; font-size: 14px; border-bottom: 1px solid var(--greyMain); } .afw_redeem_line:last-child { border-bottom: none; } .afw_redeem_icon, .afw_redeem_info, .afw_redeem_button, .afw_dis { display: inline-block; vertical-align: middle; box-sizing: border-box; } .afw_redeem_icon { width: 4%; vertical-align: top; } .afw_redeem_info { padding: 0 10px; width: 57%; } .afw_redeem_button, .afw_dis { padding: 10px; width: 38%; /*color: var(--white);*/ background: var(--pink20); border: 1px solid var(--pink100); font-size: 12px; text-align: center; text-transform: uppercase; cursor: var(--pointer); } .afw_redeem_button:hover, .afw_redeem_button:focus-visible { background: var(--pink50); border: 1px solid var(--pink50); } .afw_dis { background: var(--greyMain); border: 1px solid var(--grey3); opacity: .5; cursor: not-allowed; } @media only screen and (max-width: 389px) { .afw_dis { padding: 10px 3px; font-size: 10px; } } .afw_redeem_description, .afw_redeem_points { } .afw_redeem_note { display: none; } #afw_activity_back, #afw_coupon_back, #afw_faq_back { margin: 0 0 20px 0; } #afw_rewards_link { margin: 10px 0 0 0; } #afw_redeem_back, #afw_view_coupons { position: absolute; top: 0; z-index: 1; } #afw_redeem_back { left: 25px; } #afw_view_coupons { right: 25px; } .faq_line_q, .faq_line_a { font-size: 16px; line-height: 1.3; } .faq_line_a { margin: 0 0 20px 0; } .faq_head { display: inline-block; width: 30px; color: var(--pink100); font-family: var(--font_bold); } .faq_text { font-size: 14px; } .faq_line_q .faq_text { font-family: var(--font_bold); } .awf_list { list-style: none; /*list-style: disc;*/ /*list-style-image: url('/img/dot-pink.png');*/ /*margin: 10px 0 10px 30px;*/ margin: 10px 0; line-height: 1.3; } .awf_list li { position: relative; /*margin: 0 0 10px 7px;*/ margin: 0 0 10px 0; padding: 10px; border: 1px solid var(--greyd); } .ZZZawf_list li:before { content: ''; position: absolute; left: -22px; top: 2px; width: 12px; height: 24px; background: url('/img/dot-pink.png') transparent no-repeat top left / 7px auto; } .ban { width: 100%; margin: 0 auto; text-align: center; font-size: 0; display: inline-block; box-sizing: border-box; vertical-align: top; } .ban a { display: block; } .ban img { width: 100%; max-width: fit-content; height: auto; } #banRcont { position: relative; /*display: none;*/ text-align: left; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; } #banRcont a { display: inline-block; height: 100%; vertical-align: top; } #banRcont img { display: inline-block; width: auto; height: 100%; vertical-align: top; } #banRcontIn { height: 100%; } #ban_cont { position: relative; } #banRleft, #banRright { display: none; position: absolute; width: 100px; z-index: 1000; background: transparent; cursor: var(--pointer); } #banRleft { left: 0; } #banRright { right: 0; } #banRleft:hover, #banRleft:focus-visible, #banRright:hover, #banRright:focus-visible { background: var(--grey6); background: rgba(102, 102, 119, .5); /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.50; -khtml-opacity: 0.50; opacity: 0.50;*/ } #banRleft .banRlr { left: 10px; } #banRright .banRlr { right: 10px; } .banRlr { position: absolute; top: 0; display: inline-block; padding: 10px; /*padding: clamp(7px, 3vw, 10px);*/ color: var(--white); background: var(--grey6); font-size: 30px; /*font-size: clamp(17px, 3vw, 30px);*/ } .banRlr i { vertical-align: middle; } .grow { transition: transform .5s ease-in-out; } .grow:hover, .grow:focus-visible { transform: scale(1.05); } .banRlrPulse { animation: banRlrGlow 1s ease-in-out infinite alternate; } @keyframes banRlrGlow { to { box-shadow: 0 0 50px var(--pink100), 0 0 60px var(--pink100), 0 0 70px var(--pink100), 0 0 80px var(--pink100), 0 0 90px var(--pink100); } } .fade-in-image { animation: fadeIn .5s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .testerHighlight, .tHighlight { bottom: -2px !important; right: -7px !important; padding: 10px 10px 5px 10px !important; border: 2px solid var(--pink50); -webkit-border-radius: 20px 0 0 0; -khtml-border-radius: 20px 0 0 0; -moz-border-radius: 20px 0 0 0; -o-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0; } .testerHighlight { animation: testerGlow 1s ease-in-out infinite alternate; } .tHighlight { animation: tGlow 1s ease-in-out infinite alternate; } @keyframes testerGlow { to { /*box-shadow: 0 0 0 var(--pink70), 0 0 10px var(--pink70), 0 0 20px var(--pink70), 0 0 30px var(--pink70), 0 0 40px var(--pink70), 0 0 70px var(--pink70), 0 0 60px var(--pink70);*/ box-shadow: 0 0 20px 30px var(--yellowD), 0 0 5px 3px var(--pink50) inset; border: 2px solid var(--pink70); background: var(--pink30); } } @keyframes tGlow { to { /*box-shadow: 0 0 0 var(--pink70), 0 0 10px var(--pink70), 0 0 20px var(--pink70), 0 0 30px var(--pink70), 0 0 40px var(--pink70), 0 0 70px var(--pink70), 0 0 60px var(--pink70);*/ box-shadow: 0 0 10px 10px var(--pink10), 0 0 5px 3px var(--pink30) inset; border: 1px solid var(--pink50); background: var(--pink30); } } /************************************************************************/ /* Begin AccountInfo.SysPro*/ /************************************************************************/ #account-snapshot { padding-bottom: 10px; margin-bottom: 10px; position: relative; overflow: hidden; } #account-info-profile { display: inline-block; vertical-align: top; width: 44%; margin-right: 1%; } #account-profile-name { padding: 0 25px 15px; margin-bottom: 15px; font-size: 22px; color: var(--grey6); } #account-picture-frame { display: none; } #account-profile-picture { position: relative; float: left; width: 170px; margin-left: 25px; margin-right: 15px; text-align: center; } #account-profile-picture img { max-width: 100%; } .account-picture-button { width: 100%; padding: 6px 0; border: 0; margin-bottom: 5px; font-size: 14px; color: var(--black); background: var(--greyb); text-align: center; text-transform: uppercase; cursor: var(--pointer); } #account-picture-upload { visibility: hidden; width: 0; height: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; } #account-profile-social { position: relative; padding-bottom: 5px; border-bottom: 1px solid var(--greyb); margin-left: 210px; margin-bottom: 5px; } #facebook-connect-frame { width: 100%; } #account-profile-details { margin-left: 210px; font-size: 15px; color: var(--black); } #account-points-field { margin-bottom: 10px; font-family: var(--font_bold); } #account-points-field strong { color: var(--teal100); } #account-points-value { font-family: var(--font_bold); color: var(--teal100); } .account-points-link { margin-bottom: 5px; color: var(--teal100); font-family: var(--font_bold); text-decoration: none; cursor: var(--pointer); } #polishExchange, #polishExchange_title { color: var(--polexGreen); } #polishExchange:hover, #polishExchange:focus-visible, #polishExchange.ai_tab_current { color: var(--polexGreenL); } .polishExchange { display: none; margin: 15px 0 5px 0; color: var(--white); background: var(--pink50); font-family: var(--font_bold); text-decoration: none; cursor: var(--pointer); padding: 10px; text-align: center; } .polishExchange:hover, .polishExchange:focus-visible { background: var(--pink100); } #polishExchange, #sm_polish_exchange, #shop_earthday, #rewards_cont, #rewards, #redeem, #preferences, #personal_shopper, #zoya_first, #exams, #my_messages { display: none; } #account-info-promo { display: inline-block; vertical-align: top; text-align: right; width: 55%; } #account-info-promo img { display: none; max-width: 100%; } #account-menu { position: relative; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--grey9); } .ai_tab, .ai_tab_current { position: relative; border-bottom: 0; /*margin-right: 3px;*/ margin: 0 4px 1rem 4px; font-size: 13px; letter-spacing: 1px; cursor: var(--pointer); z-index: 0; } .ai_tab_current { color: var(--pink100); cursor: default; } .ai_tab:last-child, .ai_tab_current:last-child { margin-right: 0; } .ai_tab.current-tab, .ai_tab:hover, .ai_tab:focus-visible { color: var(--pink100); z-index: 100; } .ai_tab_current { font-family: var(--font_bold); } #social-connect-button { display: block; max-width: 100%; margin-top: 5px; margin-bottom: 10px; cursor: var(--pointer); } #account-info { position: relative; min-height: 500px; margin: 0; padding: 0; border: 0; background: var(--white); } .account-info-section { position: relative; width: 49%; display: inline-block; vertical-align: top; border: 1px solid var(--grey9); margin-right: 2%; } .account-info-section:last-of-type { margin-right: 0; } #account-info .account-field { color: var(--grey4); font-size: 14px; padding: 10px 0; } #account-info .account-field strong { text-transform: uppercase; } #account-info .account-field em { font-style: normal; font-family: var(--font_bold); } #account-info .account-title { font-size: 20px; text-decoration: none; text-transform: uppercase; margin-bottom: 25px; } #account-info .account-text { font-size: 14px; margin-bottom: 10px; line-height: 1.4; } #stl { width: 100%; } #dModal { /*left: calc(50% - 310px);*/ left: 50vw; top: 20px; transform: translate(-50%, 0); width: 98%; max-width: 620px; min-width: 380px; } #referrallink { margin: 20px auto; width: 620px; } #referrallink i { position: absolute; right: 18px; top: 25px; pointer-events: none; z-index: 10; /*font-size: clamp(20px, 4vw, 30px);*/ } #vUrlM { display: none; } #vUrlD { display: block; position: relative; cursor: var(--pointer); } #aobAlertBox #vUrlD { margin: 17px 0; width: 100%; color: var(--grey4); background: transparent; border: 1px solid var(--pink20); font-weight: normal; } #aobAlertBox #vUrlD:hover, #aobAlertBox #vUrlD:focus-visible { color: var(--black); background: var(--pink50); } #vUrlD_copy { position: absolute; top: 7px; right: 10px; color: var(--pink100); z-index: 1; } .afw_t2 { margin: 0 10px 0 0; } #referrallink, #vUrlD { width: 96%; /*overflow-wrap: break-word;*/ word-wrap: break-words; /*word-wrap: break-word;*/ -ms-word-break: break-words; /*word-break: break-all;*/ /*break on character, better for logographic systems*/ word-break: break-words; } .vUrl { padding: 10px 0 5px 0; font-size: 16px; text-align: center; width: 580px; background-color: var(--pink20); margin: 10px; font-family: var(--font_bold); border: 0; } .vUrl:hover, .vUrl:focus-visible { background-color: var(--pink50); } #rewards_link #vUrlD { margin: 10px 0; width: 100%; } /* End AccountInfo.SysPro */ /************************************************************************/ /* Begin Category.CustomerService*/ /************************************************************************/ #customer-service-welcome { margin-left: 175px; } #customer-service-info { position: relative; color: var(--black); } #customer-service-image { margin: 10px 0; padding-left: 8px; } #customer-service-text { padding: 0 20px; font-size: 12px; } #customer-service-text strong { text-transform: uppercase; } #customer-service-text a { color: var(--black); } /* End Category.CustomerService*/ /************************************************************************/ /* Begin Category.Info*/ /************************************************************************/ #category-info-image { margin: 10px 0; text-align: center; } #category-info-text { padding: 0 20px; font-size: 12px; } #category-info-text strong { text-transform: uppercase; } #category-info-text a { color: var(--black); } /* End Category.Info*/ .acctmenusub { display: none; } .smi_back { text-align: right; } /************************************************************************/ /* Begin AccountMultiAddress*/ /************************************************************************/ #shippo { padding: 0 30px 0 5px; } #shipping-info-form.account-field { color: var(--grey4); font-size: 14px; padding: 10px 30px; } #account-info #checkout-shipping-title { display: none; } .shipping-field { position: relative; height: 20px; margin: 0 0 23px 0; } .shipping-field label { position: absolute; top: 3px; left: 0px; font-family: var(--font_bold); font-size: 12px; text-transform: uppercase; } #shipping-info-form #new-address-id { margin-bottom: 20px; } .shipping-field input, .shipping-field select { width: 280px; margin-left: 150px; } #shipping-info-form #new-id-input { width: 100px; } #shipping-form-buttons img { vertical-align: top; margin-right: 10px; cursor: var(--pointer); } #shipping-info-form[data-mode="update"] #shipping-submit, #shipping-info-form[data-mode="update"] #shipping-cancel, #shipping-info-form[data-mode="update"] #new-address-id { display: none; } #shipping-info-form[data-mode="add"] #shipping-update, #shipping-info-form[data-mode="add"] #shipping-delete, #shipping-info-form[data-mode="add"] #shipping-add, #shipping-info-form[data-mode="add"] #address-id { display: none; } #shipping-info-form[data-address=""][data-mode="update"] #shipping-name-input { padding-left: 4px; background-color: #fbfbfb; border: 1px solid var(--grey9); } #shipping-info-form[data-address=""] #shipping-delete { } .state-province-text-input { display: none; } form input.postal-code-input { } /* End AccountMultiAddress*/ #ship, #available { display: none; } #shipping_method { width: 100%; max-width: 380px; margin: 0 0 7px 0; } /************************************************************************/ /* Begin arMultiAddressSuggestions*/ /************************************************************************/ #address-suggestions { position: fixed; width: 450px; height: 300px; background: var(--white); transition-property: opacity; transition-duration: 0.5s; box-shadow: 3px 3px 5px 6px rgba(var(--rgbBlack), 0.4); z-index: 1001; } #address-suggestions.ie8 { border: 2px solid var(--grey9); } #suggestion-close { position: absolute; top: 5px; right: 5px; cursor: var(--pointer); } #suggestion-header { width: 90%; margin: 10px auto; font-size: 18px; color: var(--grey9); text-align: center; padding-bottom: 5px; border-bottom: 1px solid var(--greyd); text-transform: uppercase; } #suggestion-text { width: 85%; margin: 0 auto 25px auto; font-size: 12px; color: var(--grey6); text-align: justify; } #address-suggestions form { font-size: 12px; color: var(--black); line-height: 1.5; } #address-suggestions .suggestion-form-title { margin-bottom: 10px; font-family: var(--font_bold); text-transform: uppercase; } #suggested-address-button, #entered-address-button { margin-top: 20px; cursor: var(--pointer); } #suggested-address-form { display: inline-block; vertical-align: top; width: 38%; margin-left: 7%; padding: 15px 4% 15px 0; border-right: 1px solid var(--greyd); } #entered-address-form { display: inline-block; vertical-align: top; width: 38%; padding: 15px 0 15px 40px; } /* End arMultiAddressSuggestions*/ /************************************************************************/ /* Begin AccountInfoBill*/ /************************************************************************/ #billing-info-form.account-field { color: var(--grey4); font-size: 14px; padding: 10px 30px; } #checkout-billing-container #billing-info-form.account-field { padding-left: 75px; padding-bottom: 30px; } #checkout-billing-title.account-title, #account-billing-title.account-title { font-size: 20px; text-decoration: none; text-transform: uppercase; margin-bottom: 25px; } #checkout-billing-title #billing-title-small { font-size: 12px; } #billing-important { font-size: 12px; font-style: italic; color: var(--teal100); margin-bottom: 10px; } #billing-important img { float: left; } .billing-field { position: relative; height: 20px; margin: 0 0 23px 0; } .billing-field label { position: absolute; top: 3px; left: 0px; font-family: var(--font_bold); font-size: 12px; text-transform: uppercase; } .billing-field input, .billing-field select { } /* End AccountInfoBill*/ /************************************************************************/ /* Begin AccountInfoWishlist*/ /************************************************************************/ #account-wishlist-controls { height: 24px; margin-top: 15px; } #wishlist-controls-title { display: inline-block; vertical-align: middle; margin-right: 15px; font-family: var(--font_bold); text-transform: uppercase; } #account-wishlist-select { display: inline-block; vertical-align: middle; width: 250px; height: 24px; margin-right: 10px; } .wishlist-control-button { display: inline-block; vertical-align: middle; height: 20px; background-size: contain; cursor: var(--pointer); } #add-new-list { width: 120px; background-image: url('/img/add_new_list.png'); } #add-new-list:hover, #add-new-list:focus-visible { width: 120px; background-image: url('/img/add_new_list_hover.png'); } #edit-list { width: 90px; background-image: url('/img/edit_list.png'); } #edit-list:hover, #edit-list:focus-visible { background-image: url('/img/edit_list_hover.png'); } #delete-list { width: 110px; background-image: url('/img/delete_list.png'); } #delete-list:hover, #delete-list:focus-visible { background-image: url('/img/delete_list_hover.png'); } #wishlist-visibility { line-height: 24px; margin-top: 15px; } #wishlist-visibility-text { display: inline-block; vertical-align: top; margin-right: 15px; font-family: var(--font_bold); text-transform: uppercase; } #wishlist-visibility-text:only-child { display: none; } #wishlist-visibility-select, #add-visibility-input { height: 24px; text-transform: uppercase; } #share-list { display: inline-block; vertical-align: top; margin-left: 15px; } #wishlist-notes, #my-wishlist-note { position: relative; font-size: 12px; margin: 15px 0 0 0; } #wishlist-notes i, #my-wishlist-note i { top: -2px; font-size: 8px; color: var(--grey5); } #wishlist-notes-text:empty:after { content: "Any notes you enter about this wishlist will be shown here"; } #wishlist-display { font-size: 14px; color: var(--grey9); margin-top: 15px; } #wishlist-display a { color: var(--grey9); text-decoration: none; } #wishlist-display a:hover, #wishlist-display a:focus-visible { text-decoration: underline; } #wishlist-display .item-wishlist { height: 160px; border-bottom: 1px solid var(--greyd); margin-bottom: 15px; } #wishlist-display .item-wishlist > div { display: inline-block; vertical-align: middle; width: 18%; } #wishlist-display .item-wishlist:last-child { border: medium none; } #wishlist-display .wishlist-remove { margin: 0 20px; text-transform: uppercase; cursor: var(--pointer); } #wishlist-display .wishlist-remove:hover, #wishlist-display .wishlist-remove:focus-visible { text-decoration: underline; } #wishlist-display .wishlist-image { margin-right: 20px; } #wishlist-display .wishlist-image img { width: 150px; height: 150px; } #wishlist-display .wishlist-name { width: 500px; margin-right: 10px; } #wishlist-display .wishlist-name a { margin-right: 10px; } #wishlist-display .wishlist-quantity { margin: 0 13px; } #wishlist-display .wishlist-quantity-select { width: 70px; font-size: 16px; } .wishlist-close { } .wishlist-info { margin: 29px 0 0 0; min-width: 300px; } .wishlist-panel-text { margin: 0 0 20px 0; } .wishlist-panel-text label { display: block; padding: 0 0 5px 0; } .wishlist-panel-field { position: relative; margin-top: 15px; text-align: left; } .wishlist-panel-field input, .wishlist-panel-field select, .wishlist-panel-field textarea { width: 100%; margin: 0; } .wishlist-panel-submit { display: block; height: 30px; margin: 5px auto 10px; border: 0; padding: 0; background-size: contain; cursor: var(--pointer); } .wishlist-select-container { width: 100%; padding: 0 15px; } .cbInput { display: block; margin: 0 0 5px 0; width: 100%; text-align: left; line-height: 1.5; cursor: var(--pointer); } .cbInput:last-child { margin: 0; } #wishlist-add-panel { width: 100%; max-width: 500px; } #wishlist-panel-add2 { } .wishlist-panel-add3, .wishlist-panel-add3-off, .wl_panel_cancel, .add-list-submitI { display: inline-block; margin: 0 0 15px 0; text-transform: uppercase; cursor: var(--pointer); } .wishlist-panel-add3-off { color: var(--greyMain); } .wishlist-panel-add3:hover, .add-list-submitI:hover, .wl_panel_cancel:hover { color: var(--pink100); } #add-list-submit { width: 60px; background-image: url('/img/add.png'); } #add-list-submit:hover, #add-list-submit:focus-visible { background-image: url('/img/add_hover.png'); } #wishlist-edit-panel { width: 100%; max-width: 500px; } #share-link-input { background: var(--offwhite); } #edit-list-submit { width: 80px; background-image: url('/img/submit.png'); } #edit-list-submit:hover, #edit-list-submit:focus-visible { background-image: url('/img/submit_hover.png'); } #wishlist-delete-panel { width: 330px; } #wishlist-add-panel, #wishlist-edit-panel, #wishlist-delete-panel { top: 50px !important; } #delete-panel-confirm { width: 80px; background-image: url('/img/delete.png'); } #delete-panel-confirm:hover, #delete-panel-confirm:focus-visible { background-image: url('/img/delete_hover.png'); } #share-list-panel { width: 450px; } #share-panel-link { width: 90%; margin: 5px auto 20px; background: var(--offwhite); } /******************************** /* NEW AccountInfoWishlist /********************************/ .wl_row { position: relative; padding: 20px 0; color: var(--black); } .wl_row:last-child { border: none; } .wl_image, .wl_info, .wl_button { display: inline-block; vertical-align: top; } .wl_image { width: 150px; height: auto; } .wl_image img { width: 100%; height: auto; } .wl_info { margin: 0 0 0 15px; padding: 0 10px 0 0; width: 300px; min-width: 300px; line-height: 1.25; } .wl_button { position: relative; margin: 5px 0 10px 0; padding: 15px 0; width: 140px; width: 200px; text-align: center; color: var(--white); background: var(--black); text-transform: uppercase; font-family: var(--font_alt); font-size: 12px; font-weight: bold; letter-spacing: 1px; cursor: var(--pointer); } .wishlist-quantity { display: inline-block; top: 14px; } #for_share-list { margin: 0 0 0 10px; padding: 3px 0 0 0; height: 1.75rem; } .bought { position: absolute; /*top: 20px;*/ color: var(--pink100); font-size: 18px; text-align: center; cursor: var(--pointer); z-index: 2147483647; } #wl_date { position: absolute; padding: 10px 20px; background: var(--white); border: 1px solid var(--pink100); z-index: 2147483647; } @media (hover: hover) { .wl_button:hover, .wl_button:focus-visible { background: var(--pink100); } .wl_button { margin: 5px 20px 0 0; } } .wlopts { margin: 10px 0 0 0; } .wlns { display: none; } .panel { z-index: 2147483648; } .wishlist-response-text { width: 350px; padding: 30px 10px; } .wishlist-panel-text { margin: 0 auto 20px auto; width: 90%; } .wishlist-buttons { margin: 20px auto 0 auto; } #cprice, #cprice2, #cprice2b, #sprice2 { font-size: 1rem; } .wl_link:hover span { color: var(--pink100); } .wishlist-panelI-text { text-align: left; } .wishlist-panelI-field { margin: 0 0 15px 0; } .wishlist-panelI-field:last-child { margin: 0; } #add-name-inputI, #add-visibility-inputI, #add-note-inputI { width: 100%; } #dataSort { margin: 15px 0 0 0; } #wl_count { margin: 15px 0 0 0; font-size: 12px; } #sortReverseCont, #showHiddenCont { display: inline-block; margin: 0 0 0 20px; font-size: 14px; } #sortReverse, #showHidden { display: none; } #for_sortReverse, #for_showHidden { display: block; padding: 9px 15px; min-width: 170px; border: 1px solid var(--greyMain); color: var(--black); font-family: var(--font_bold); text-align: center; text-transform: uppercase; cursor: var(--pointer); } #sortReverse:checked + #for_sortReverse, #showHidden:checked + #for_showHidden { border: 1px solid var(--pink100); color: var(--white); background: var(--pink100); } @media (hover: hover) { #for_sortReverse:hover, #for_showHidden:hover { border: 1px solid var(--greyMain); color: var(--black); background: var(--greyMain); } #sortReverse:checked + #for_sortReverse:hover, #showHidden:checked + #for_showHidden:hover { color: var(--black); } } /* End AccountInfoWishlist*/ /************************************************************************/ /* Begin MyWishList*/ /************************************************************************/ #my-wishlist strong { text-transform: uppercase; } #my-wishlist em { font-style: normal; font-family: var(--font_bold); } #my-wishlist #my-wishlist-header { margin: 15px 0; } #my-wishlist-header #my-wishlist-title { font-size: 28px; } #my-wishlist-header #my-wishlist-info { font-size: 18px; margin: 15px 0; line-height: 1.5; } #my-wishlist #wishlist-display { font-size: 14px; color: var(--grey9); margin-top: 15px; } #my-wishlist #wishlist-display a { color: var(--grey9); text-decoration: none; } #my-wishlist #wishlist-display a:hover, #my-wishlist #wishlist-display a:focus-visible { text-decoration: underline; } /* End MyWishList*/ /************************************************************************/ /* Begin AccountPromotions*/ /************************************************************************/ .coupon { font-size: 12px; position: relative; display: inline-block; border: 1px solid var(--greyMain); width: 22%; margin: 5px; padding: 10px 5px; height: 250px; text-align: center; vertical-align: top; box-sizing: border-box; } .coupon > div { margin-bottom: 5px; } .apply-code > img { width: 170px; height: auto; } .coupon_cont { position: absolute; bottom: 0; left: 2%; width: 95%; min-height: 127px; } .coupon-details { text-align: left; padding: 0 0 0 5px; } .coupon-title { font-family: var(--font_bold); text-transform: uppercase; margin-top: 13px; } .coupon-code { display: inline-block; vertical-align: top; margin-top: 15px; padding: 5px 10px; border: 1px solid var(--greyb); color: var(--grey6); text-transform: uppercase; } .apply-code { } .apply_code_button { width: 90%; color: var(--white); background: var(--black); text-align: center; text-transform: uppercase; margin: 7px auto 0 auto; padding: 7px 0; } .apply_code_button:hover, .apply_code_button:focus-visible { background: var(--pink50); } .return-coupon { display: inline-block; margin-top: 14px; padding: 7px 10px 5px 10px; cursor: var(--pointer); } .return-coupon:hover, .return-coupon:focus-visible { color: var(--white); background: var(--pink100); } .return-coupon strong { } .date-and-usage { font-size: 10px; color: var(--grey9); margin: 7px 0 0 0; } /* End AccountPromotions*/ /************************************************************************/ /* Begin AccountInfoOrders*/ /************************************************************************/ #order-display { margin-top: 20px; padding: 0px 20px; font-size: 12px; } #order-display-header { color: var(--black); font-family: var(--font_bold); text-transform: uppercase; border-bottom: 1px solid var(--greyd); } #order-display-header div { display: inline-block; vertical-align: top; height: 24px; line-height: 24px; margin-right: 30px; } .order-line { position: relative; width: 100%; padding: 30px 0 70px 0; border-bottom: 1px solid var(--greyd); } .order-line:first-of-type { padding: 0 0 70px 0; } .order-line .order-line-field { display: inline-block; margin-right: 30px; color: var(--black); } .order-line .order-info { margin: 30px 0 0 0; } .order-line .show-order-link { font-family: var(--font_bold); color: var(--teal100); cursor: var(--pointer); } .order-line .order-info-print { display: none; } .order-line .ctvinfo { position: absolute; margin: 5px 0 0 0; } #ord_err, #inv_err { color: var(--pink100); font-size: 14px; font-family: var(--font_bold); line-height: 1.25; } #order-number-header, .order-number { width: 8%; min-width: 125px; } #po-number-header, .po-number { width: 8%; min-width: 125px; } #order-status-header, .order-status { width: 10%; min-width: 125px; } #order-date-header, .order-date { width: 10%; min-width: 130px; } #web-reference-header, .web-reference { width: 8%; min-width: 150px; } .order-line-field.cancel-order, .order-line-field.print-button, .order-line-field.reorder-button { width: 10%; } .card-reenter-link { display: none; color: var(--teal100); text-decoration: underline; cursor: var(--pointer); } .order-status[data-status="C"] .card-reenter-link { display: inline; } .order-status[data-status="M"] .card-reenter-link { display: inline; } .order-line .cancel-order-link { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: var(--pointer); } .order-line .cancel-order-link:hover, .order-line .cancel-order-link:focus-visible { color: var(--pink100); } .order-line-field .order_buttons, .order-line .order_buttons { display: inline-block; margin: 20px 0 0 0; } .order-line-field .print-button, .order-line-field .reorder-button, .order-line-field .cancel-order, .order-line .print-button, .order-line .reorder-button, .order-line .cancel-order { cursor: var(--pointer); margin: 5px 10px 0 0; padding: 15px 0; /*width: 170px;*/ width: 155px; text-align: center; color: var(--white); background: var(--black); text-transform: uppercase; font-family: var(--font_alt); font-size: 12px; font-weight: bold; letter-spacing: 1px; } .order-line .print-button { } .order-line .reorder-button { margin: 5px 0 0 0; } .order-line .cancel-order { } .order-line:last-child { border: 0; } @media (hover: hover) { .order-line .print-button:hover, .order-line .reorder-button:hover, .order-line .cancel-order:hover, .order-line .cancel-order span:hover { background: var(--pink100); } } #order-cancel-panel { top: 50px !important; width: 420px; padding-bottom: 20px; line-height: 1.4; } .order-cancel-number { font-family: var(--font_bold); } cancelorder { display: inline-block; height: 0; } #cancel-card-reenter { color: var(--teal100); text-decoration: underline; cursor: var(--pointer); } #card-reenter-panel, #checkout-payment-panel { position: fixed !important; width: 96%; max-width: 420px; max-height: calc(100vh - 50px); padding: 20px; text-align: left; z-index: 2147483645; } #card-reenter-panel { min-height: 300px; } #card-reenter-panel .panel-title { width: auto; } #card-reenter-submit { display: block; margin: 25px auto 0; } /* End AccountInfoOrders*/ #paypal-button-container { max-width: 250px; } /************************************************************************/ /* Begin AccountInfoInvoices*/ /************************************************************************/ #invoice-display { margin-top: 20px; padding: 0px 20px; font-size: 12px; } #invoice-display-header { color: var(--black); font-family: var(--font_bold); text-transform: uppercase; border-bottom: 1px solid var(--greyd); } #invoice-display-header div { display: inline-block; vertical-align: top; height: 24px; line-height: 24px; margin-right: 28px; } #invoice-number-header, .invoice-number { width: 10%; } #sales-number-header, .sales-number { width: 10%; } #po-web-header, .po-web-number { width: 25%; } #invoice-date-header, .invoice-date { width: 10%; } #tracking-number-header, .tracking-number { /*width: 15%;*/ } /* End AccountInfoInvoices*/ /************************************************************************/ /* Begin AccountInfoEmailPassword*/ /************************************************************************/ #login-info-display { margin: 20px 0; padding: 0px 20px; font-size: 12px; } #add-login { display: inline-block; vertical-align: top; margin: 0 0 10px 0; padding: 20px; font-size: 14px; text-decoration: none; height: auto !important; line-height: 0 !important; color: var(--white); background: var(--black); border: 1px solid var(--black); cursor: var(--pointer); } #add-login:hover, #add-login:focus-visible { color: var(--black); background: var(--white); } #login-info-header { color: var(--black); font-family: var(--font_bold); text-transform: uppercase; border-bottom: 1px solid var(--greyd); } #login-info-header div { display: inline-block; vertical-align: top; height: 30px; line-height: 30px; margin-right: 30px; } .login-info-line { border-bottom: 1px solid var(--greyd); } .login-info-line:last-child { border: none; } .login-info-line div { display: inline-block; vertical-align: top; position: relative; padding: 20px 0; margin-right: 30px; color: var(--black); } #login-email-header { width: 30%; } .login-info-line .login-email { width: 30%; /*color: var(--grey4);*/ overflow-x: auto; } #administrator-header { width: 30%; } .login-info-line .change-administrator { width: 30%; } .login-info-line .change-administrator input { margin: 0; } .login-info-line .change-password { width: 10%; } .login-info-line .change-email { width: 80px; } .emailselect { display: block; margin: 10px 0 0 0; } .login-info-line .delete-login { margin-right: 0; color: var(--teal100); } .login-info-edit { text-decoration: underline; cursor: var(--pointer); } .login-edit-field { display: none; font-size: 12px; } .login-edit-title { margin: 10px 0; color: var(--teal100); font-family: var(--font_bold); text-transform: uppercase; } .login-edit-field label { color: var(--grey4); font-family: var(--font_bold); text-transform: uppercase; } .login-edit-input { position: relative; height: 24px; margin-bottom: 15px; } .login-edit-input label { position: absolute; left: 0; top: 6px; text-transform: uppercase; } .login-edit-input input { width: 300px; height: 24px; margin-left: 140px; } .login-edit-controls { margin-top: 25px; padding-bottom: 10px; } .login-edit-controls input[type="submit"] { margin-right: 10px; line-height: 1; } .edit-field-email { font-family: var(--font_bold); } #change-password-field .login-edit-input input { margin-left: 200px; } #change-email-field .login-edit-input input { margin-left: 170px; } #login-delete-panel { width: 300px; height: 150px; top: 10px !important; } #login-delete-text { text-align: left; } #login-delete-confirm { cursor: var(--pointer); } /* End AccountInfoEmailPassword*/ /************************************************************************/ /* Begin AccountInfoRedeemPoints*/ /************************************************************************/ #redemption-list { font-size: 14px; color: var(--black); text-align: center; } #redemption-list { margin: 15px 20px; } #afw_redeem #redemption-list { margin: 15px 0; padding: 30px 0 0 0; } #redemption-list-header { height: 26px; line-height: 26px; font-family: var(--font_bold); text-transform: uppercase; border-bottom: 1px solid var(--greyd); } #redemption-list-header div { display: inline-block; vertical-align: top; margin-right: 30px; } .redemption-list-item { display: inline-block; border: 1px dashed var(--greya); width: 23%; margin: 0 5px 10px 5px; padding: 10px 5px; height: 200px; position: relative; vertical-align: top; } .redemption-list-item div { } #afw_redeem .redemption-list-item { /*width: 100%;*/ width: 90%; /*width: 45%;*/ margin: 0 5px 15px 5px; } #redemption-description-header { width: 300px; } .redemption-description { width: 100%; text-align: center; font-family: var(--font_bold); } #redemption-note-header { width: 300px; } .redemption-note { width: 100%; text-align: center; } #redemption-points-header { width: 150px; } .redemption-foot { position: absolute; width: 100%; bottom: 0; left: 0; } .redemption-points { width: 100%; text-align: center; font-size: 2rem; font-family: var(--font_bold); padding: 20px 0; } .redemption-points2 { font-size: .75rem; text-align: center; } .redeem-button, .redeem-button2, .redeem-button3 { width: 95%; margin: 0 auto 10px auto; height: 1.5rem; text-align: center; padding: 5px 0 25px 0; /*padding: 4px 0 40px 0;*/ } .redeem-button { color: var(--white); background: var(--black); cursor: var(--pointer); } .redeem-button:hover, .redeem-button:focus-visible { /*background: #090;*/ /*background: var(--greenD);*/ background: var(--pink50); } .redeem-button2 { /*color: var(--white);*/ /*background: var(--DRed);*/ /*background: var(--pink100);*/ background: var(--greyMain); cursor: not-allowed; } .redeem-button3 { /*color: var(--black);*/ /*background: #ffd400;*/ /*background: var(--yellowD);*/ background: var(--greyMain); cursor: not-allowed; } .rliGo { /*background: #f6fff6;*/ /*background: var(--greenL1);*/ } .rliNo { /*background: var(--pink10);*/ opacity: .5; } .rliMaybe { /*background: #fffbe5;*/ /*background: var(--yellowL1);*/ opacity: .5; } /* End AccountInfoRedeemPoints*/ /************************************************************************/ /* Begin AccountInfoReferralReport*/ /************************************************************************/ .points-report-display { margin: 15px 20px; font-size: 14px; color: var(--black); box-sizing: border-box; } #more, #afw_more { margin: 10px 0 0 0; padding: 0 10px; font-size: 12px; text-transform: uppercase; } #more { text-align: left; } #afw_more { text-align: right; } #more_text, #afw_more_text { cursor: var(--pointer); } #afw_more_text:hover, #afw_more_text:focus-visible { color: var(--pink100); } #afw_more i { font-size: 10px; } #afw_activity_data .points-report-display { margin: 15px 0; } #afw_activity_data .points-report-header { height: unset; line-height: unset; padding: 0 0 5px 0; } #afw_activity_data .points-report-header div { margin-right: 0; } #afw_activity_data .points-report-header div { /*width: 100%*/ } .points-report-header { /*height: 26px; line-height: 26px;*/ font-family: var(--font_bold); text-transform: uppercase; } .points-report-header, .points-report-line { padding: 18px 10px 18px 0; width: 100%; line-height: 1.5; border-bottom: 1px solid var(--greyd); } .points-report-header div, .points-report-line div { display: inline-block; vertical-align: top; margin: 0 30px 0 0; padding: 0 0 0 10px; } #afw_activity_data .points-report-line div { /*margin: 0 10px 0 0;*/ margin: 0; } #afw_activity_data .points-report-line div { /*width: 100%*/ } .points-recorded-header, .points-recorded { width: 200px; } .points-value-header, .points-value { width: 100px; } .points-note-header, .points-note { width: 350px; margin-right: 0; } #afw_activity_data .points-recorded-header, #afw_activity_data .points-recorded, #afw_activity_data .points-value-header, #afw_activity_data .points-value, #afw_activity_data .points-note-header, #afw_activity_data .points-note { box-sizing: border-box; } #afw_activity_data .points-recorded-header, #afw_activity_data .points-recorded { width: 50%; min-width: 120px; } #afw_activity_data .points-value-header, #afw_activity_data .points-value { margin: 0; /*width: 40%;*/ width: calc(50% - 10px); min-width: 100px; text-align: right; } #afw_activity_data .points-note-header, #afw_activity_data .points-note { width: 100%; /*min-width: 150px;*/ padding: 10px 0 0 10px !important; } #afw_activity_data .points-note-header { display: none; } #afw_activity_data .points-note::before { content: "Note: "; font-family: var(--font_bold); } .points-reference-header, .points-reference { width: 150px; } #total-points { margin-top: 15px; text-transform: uppercase; font-family: var(--font_bold); } #total-points-value, #total-points-valueRP { color: var(--teal100); } #total-points-value[data-points="[Total.Points]"] { visibility: hidden; } #total-points-value[data-points="[Total.Points]"]:before { content: "0"; visibility: visible; } #afw_coupons { margin: 45px 0 0 0; } #afw_coupons .account-title, #afw_coupons .account-text { margin: 0 0 10px 0; } #afw_coupons .account-title { display: none; } #afw_coupons .account-title { font-size: 14px; text-transform: uppercase; } #afw_coupons .account-text { font-size: 14px; } #afw_coupons .coupon-data { text-align: center; } #afw_coupons .coupon { width: 90%; } #swapCodeMessage { display: block; margin: 10px 0 0 0; padding: 10px 25px 13px 25px; font-family: var(--font_bold); line-height: 1.5; color: var(--black); background: var(--pink70); } .ccoupon_yes, .ccoupon_no { display: inline-block; width: calc(50% - 20px); padding: 5px 10px; color: var(--black); background: var(--white); border: 1px solid var(--black); text-align: center; text-transform: uppercase; box-sizing: border-box; cursor: var(--pointer); } .ccoupon_yes { margin: 0 10px 0 0; } .ccoupon_no { margin: 0 0 0 10px; } .ccoupon_yes:hover, .ccoupon_yes:focus-visible, .ccoupon_no:hover, .ccoupon_no:focus-visible { background: var(--pink50); border: 1px solid var(--pink50); } /* End AccountInfoReferralReport*/ /************************************************************************/ /* Begin SalonLocator*/ /************************************************************************/ #salon-locator { position: relative; margin: 20px 0 115px; } #salon-locator-controls { margin-top: 10px; } #locator-zip-code, #locator-country { position: relative; display: inline-block; vertical-align: top; height: 24px; margin-right: 20px; line-height: 24px; } #salon-locator-controls label { position: absolute; left: 0; font-family: var(--font_bold); text-transform: uppercase; } #salon-locator-controls input[type="text"], #salon-locator-controls select { position: relative; height: 24px; } #locator-zip-input { width: 150px; margin-left: 140px; } #locator-country-input { width: 250px; margin-left: 85px; } #thank-you { margin: 15px 0 15px 20px; font-size: 14px; color: var(--black); } #salon-locator-results { min-height: 200px; font-size: 14px; color: var(--black); margin: 0 20px; } #locator-err, #locator-msg { margin: 12px 0; line-height: 1.35; } #locator-msg { font-family: var(--font_bold); color: var(--teal100); } #locator-results-header { height: 26px; line-height: 26px; font-family: var(--font_bold); font-size: 14px; text-transform: uppercase; border-top: 1px solid var(--greyd); border-bottom: 1px solid var(--greyd); } .locator-result-line { font-size: 14px; min-height: 70px; border-bottom: 1px solid var(--greyd); } .locator-result-line:nth-child(2n+1) { background: #f3f3f3; } #locator-results-header div { display: inline-block; vertical-align: top; margin-right: 30px; } .locator-result-line .result-line-item { display: inline-block; vertical-align: top; margin: 12px 30px 12px 0; line-height: 1.4; } #salon-name-header, .salon-name { width: 20%; } #phone-email-header, .phone-email { width: 11%; } #salon-address-header, .salon-address { width: 25%; } .salon-map-link, .salon-map-link label { color: var(--pink100); text-decoration: none; font-family: var(--font_bold); cursor: var(--pointer); } #product-carry-header, .product-carry { width: 18%; } #salon-description-header, .salon-description { width: 11%; margin-right: 0 !important; } #salon-locator-questions { margin-top: 15px; margin-left: 20px; color: var(--grey6); } #salon-locator-questions a { color: var(--grey6); } a.chat1 { color: var(--pink100) !important; } #salon-map-panel { left: 50% !important; width: 950px; height: 70%; } #salon-map-frame { position: relative; top: 45px; width: 98%; height: 88%; } /* End SalonLocator*/ /************************************************************************/ /* Begin SalonInfo*/ /************************************************************************/ #salon-info label { font-family: var(--font_bold); text-transform: uppercase; } #salon-input-area { margin-top: 20px; } #salon-input-area div { position: relative; margin-right: 20px; } #salon-input-area > div { margin-bottom: 15px; } #salon-input-area label { position: relative; left: 0; top: 3px; min-width: 160px; display: inline-block; } #salon-input-area input, #salon-input-area select, #salon-input-area textarea { } #salon-input-area #first-middle-name #middle-name-input, #salon-input-area #state-country #country-input, #salon-input-area #phone-fax #fax-input { } #salon-input-area input, #salon-input-area #company-input, #salon-input-area #address1-input, #salon-input-area #address2-input, #salon-input-area select, #salon-input-area textarea { padding: 10px 10px 10px 5px; } #salon-input-area input { width: 100%; } #salon-input-area #company-input { width: 100%; } #salon-input-area #address1-input { width: 100%; } #salon-input-area #address2-input { width: 100%; } #salon-input-area select { width: 100%; /* height: 2.7rem; background: var(--white); border: 1px solid var(--grey9); */ } #salon-input-area textarea { width: 100%; height: 130px; margin-bottom: 25px; } #salon-input-area #first-middle-name div, #salon-input-area #state-country div, #salon-input-area #phone-fax div { display: inline-block; vertical-align: top; width: 100%; } #salon-info-products { width: 100%; border-top: 1px solid var(--grey9); padding: 5px 0; } #salon-info-description { width: 100%; border-top: 1px solid var(--grey9); padding: 5px 0; } #salon-products-title, #salon-description-title { font-family: var(--font_bold); text-transform: uppercase; margin-bottom: 10px; } #salon-info #salon-product-options, #salon-info #salon-description-options { margin-left: 10px; font-size: 12px; } #salon-info-products input, #salon-info-products label, #salon-info-description input, #salon-info-description label { display: inline-block; vertical-align: middle; } #salon-info-products label { position: relative; top: 1px; } #salon-info-description label { position: relative; top: 1px; } #salon-info-controls { margin: 25px 0; } #salon-info-controls img { display: inline-block; vertical-align: top; margin-right: 10px; cursor: var(--pointer); } #salon-product-options input, #salon-description-options input { margin: 0 5px 15px 0; } .salon_opts { margin: 0 15px 15px 0; width: 27%; } /* End SalonInfo*/ .center-basic-info { z-index: 1000; } /************************************************************************/ /* Begin Odds n' Ends*/ /************************************************************************/ .field { color: var(--grey4); font-size: 14px; padding: 10px 20px; } .field-title { font-size: 20px; text-transform: uppercase; margin-bottom: 10px; } .field-text { font-size: 14px; margin-bottom: 10px; } .field-text a { color: var(--grey6); } .field-label { display: block; margin-bottom: 15px; text-transform: uppercase; font-family: var(--font_bold); } .field-label input, .field-label select { display: block; margin-top: 5px; font-size: 16px; } .form-field { position: relative; margin-bottom: 15px; } .form-field table, .form-field tbody, .form-field tr, .form-field td { border: none; padding: 0; } .form-label { display: inline-block; vertical-align: top; width: 165px; margin-right: 15px; font-family: var(--font_bold); text-transform: uppercase; } .form-sub-text { font-size: 10px; font-weight: normal; text-transform: none; } .form-text-input { display: inline-block; vertical-align: middle; width: 200px; } .form-text-area { display: inline-block; vertical-align: top; width: 350px; } .form-checkbox { display: inline-block; vertical-align: middle; margin-left: 0; } .state-country-fields .state-province-select { display: none; } .state-country-fields[data-country="US"] .state-province-text, .state-country-fields[data-country="us"] .state-province-text, .state-country-fields[data-country="CA"] .state-province-text, .state-country-fields[data-country="ca"] .state-province-text, .state-country-fields[data-country=""] .state-province-text { display: none; } .state-country-fields[data-country="US"] .state-options, .state-country-fields[data-country="us"] .state-options, .state-country-fields[data-country=""] .state-options { display: inline-block; } .state-country-fields[data-country="CA"] .province-options, .state-country-fields[data-country="ca"] .province-options { display: inline-block; } .loading-bg, .loading-bg-dark { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; z-index: 2147483646; } .loading-bg { background: var(--white); } .loading-bg-dark { background: var(--black); } .loading-bg-fixed { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; background: var(--white); z-index: 2147483646; } .ajax-loading, .loading-spinner, .ajax-loading-fixed { text-align: center; } .ajax-loading, .loading-spinner { position: absolute; top: 0; top: calc(25% - 17px); left: calc(50% - 44px); width: 88px; max-width: 88px; z-index: 2147483647; } .ajax-loading-fixed { position: fixed; top: 50px; left: calc(50% - 44px); width: 88px; max-width: 88px; z-index: 2147483647; } .ajax-loading-text, .ajax-loading-pre { z-index: 2147483647; } .ajax-loading-text { margin: 10px 0 0 20px; } .ajax-loading-pre { /* center with overflow*/ margin: 0 -100% 10px -100%; padding: 5px; text-align: center; font-family: var(--font_bold); background: rgba(var(--rgbWhite), .55); } #set-cookie-frame { display: none; } #set-cookie-form { display: none; } #print-frame { display: none; } #menu-path { width: 1000px; min-height: 30px; padding: 0 40px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; transition-property: opacity; transition-duration: 0.5s; font-size: 10px; color: var(--grey9); background: var(--white); line-height: 30px; } #content.mobile-device #menu-path { position: relative; top: 0; } #menu-path > a { color: var(--greyb); text-decoration: none; padding: 0 7px 0 0; } #menu-path > a:hover, #menu-path > a:focus { color: var(--pink100); } #menu-path > a:after { content: "\00BB"; margin-left: 1em; } #menu-path > a:last-child:after { content: ""; } .template-name { display: none !important; } .debug { display: none; } .syspro-link { margin: 15px 0; font-size: 20px; } .syspro-link a { color: #008800; } .item-name a.syspro-link-small { font-size: 10px; color: #008800; } .success-message { margin: 15px 0; color: #009900; text-align: center; } #ipsy-splash-banner { text-align: center; margin-top: 50px; } #ipsy-splash-image { max-width: 90%; } #ipsy-text { width: 100%; font-size: 14px; color: var(--grey4); margin: 15px auto; } .black-button, .black-button2, .white-button, .grey-button, .red-button { position: relative; display: inline-block; min-width: 50px; border: 0; padding: 12px 20px; font-size: 12px; font-family: var(--font_bold); text-align: center; text-transform: uppercase; text-decoration: none; cursor: var(--pointer); letter-spacing: 0.045em; } .black-button, .white-button, .grey-button, .red-button { } .black-button, .black-button2 { background: var(--black); color: var(--white); border: 1px solid var(--black); } .black-button:hover, .black-button:focus-visible { background: var(--white); color: var(--black); border: 1px solid var(--black); } .black-button2:hover, .black-button2:focus-visible { background: var(--greyMain); color: var(--black); border: 1px solid var(--black); } .grey-button { background: var(--black); color: var(--white); border: 1px solid var(--black); } .grey-button:hover, .grey-button:focus-visible { background: var(--white); color: var(--black); border: 1px solid var(--black); } .red-button { background: var(--pink100); color: var(--white); border: 1px solid var(--pink100); } .red-button:hover, .red-button:focus-visible { background: var(--white); color: var(--pink100); border: 1px solid var(--pink100); } .white-button { background: var(--white); color: var(--black); border: 1px solid var(--black); } .white-button:hover, .white-button:focus-visible { background: var(--black); color: var(--white); border: 1px solid var(--black); } .grey-button a, .red-button a, .black-button a, .white-button a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(var(--rgbBlack), 0); cursor: var(--pointer); } .black-button a, .grey-button a, .red-button a { background: rgba(var(--rgbBlack), 0); } .white-button a { background: rgba(var(--rgbWhite), 0); } .full { float: inherit !important; width: 100% !important; } input.grey-button, input.red-button, input.black-button, input.checkout-button, button.grey-button, button.red-button, button.black-button, button.checkout-button { line-height: 1; } .checkout-button { position: relative; display: inline-block; vertical-align: top; width: 100%; height: 35px; margin: 30px 0; padding: 5px 0 0 0; border: 0; font-size: 14px; font-family: var(--font_bold); color: var(--white); text-align: center; text-transform: uppercase; line-height: 28px; cursor: var(--pointer); background: var(--black); border: 1px solid var(--black); z-index: 2147483645; } .checkout-button:hover, .checkout-button:focus-visible { color: var(--pink100) !important; background: var(--greye) !important; border: 1px solid var(--pink100); } .checkout-button a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* .checkout-button:after { content: ""; position: absolute; top: 9px !important; right: 25px; width: 0; height: 0; border-left: 8px solid var(--white); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } */ .cob_disabled:after { border-left: 8px solid var(--grey5); } .interlink { font-family: var(--font_bold); color: var(--pink100); text-decoration: none; } .interlink:hover, .interlink:focus-visible { color: #ff79b4; } .billing-response-error { display: none; } #gma-redirect-banner { display: block; margin: 120px auto 0; } main, section, article, aside, figure, footer, header, nav { } nav { z-index: 2147483645; } .clearfix, .clear { z-index: -1; } .clearfix:after, .clear:after { content: ""; display: table; clear: both; } /* Change item product to align left */ .item-line, .list, .list2 { /*display: inline !important;*/ display: flex; justify-content: center; /*justify-content: flex-start;*/ /*align-items: center;*/ /* center vertically */ flex-wrap: wrap; gap: 20px; } .category-list-thumbnail2 { display: flex; flex-direction: column; flex: 1 1 calc(25% - 20px); margin: 0 0 60px 0; /*padding: 10px;*/ min-width: 250px; max-width: 360px; /*border: 1px solid var(--greyMain);*/ overflow: hidden; } @supports (display: grid) { .category-list-thumbnail2 { display: grid; } .item-line, .list, .list2 { display: grid; grid-template-columns: repeat(auto-fit, 360px); /*justify-content: start;*/ justify-content: center; /*max-width: 1875px;*/ } } /* Wholesale / Retail prices for Salon users */ #hero_callout { position: absolute; top: 5px; left: 0; padding: 5px 10px; color: var(--black); background: var(--pink30); font-size: 12px; min-width: 120px; max-width: 200px; height: 3em; z-index: 2147483000; /*box-shadow: 2px 3px 5px 3px rgba(0, 0, 0, 0.2);*/ border-bottom: 2px solid var(--grey9); -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; -khtml-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } .callout_content { margin: 0 0 0 15px; top: 50%; text-align: left; text-indent: -9px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .item-name, .item-name-3 { font-weight: normal; } .item-name { line-height: 1.3; } .item-name-2 { font-family: var(--font_bold); } .item-price { font-size: 13px; line-height: 1.4; } .msrpText { color: var(--grey7); margin: 0 12px 0 0; } .item-priceSalon, .item-priceSalonDollar { font-family: var(--font_bold); } .item-priceSalon { color: var(--teal100); } .item-priceSalonDollar { color: var(--black); } .aobname, .aobnamePI, .aobsub, .item-price { line-height: 1.25; } .aobname, .aobnamePI { display: inline-block; } .aobsub, .item-price { font-weight: normal; font-size: 12px; } .aobnew { font-family: var(--font_bold); color: var(--teal100); letter-spacing: 3px; } .customer-serviceWholesale { margin-left: -11px; } .clear-fix { clear: both } .callout { color: var(--teal100); text-decoration: none; font-family: var(--font_bold); } .callout:hover { color: var(--pink100); } .callout-bold { font-family: var(--font_bold); color: var(--teal100); } .callout-bold2 { /*font-family: var(--font_bold);*/ color: var(--black); } .callout-block { padding: 5px 15px; background: var(--pink50); color: var(--white); } .black-bold { font-weight: normal; color: var(--black); } .panel-quanity-style { } .retail-price-style { } .panel-price-style { } .panel-bag-and-wishlist-style { } .panel-wishlist-style { } .panel-add-to-bag-style { } .panel-description-style { padding-bottom: 5px; } .panel-description-padding { padding-bottom: 5px; } #add-to-bag-wrapper { margin-bottom: 5px; float: right; } #wishlist-wrapper { float: right !important; } #panel-price-wrapper { } #add-to-bag-wishlist { float: right; width: 117px; } .panel-price-wrapper-style { } .price-wrapper-consumer { } .product-info-controls-style { } .quanity-style { } .panel-wishlist-img-style { } .panel-info-header-style { top: 5px; width: 100%; } .panel-quantity-and-price-style { } /* naked manicure */ #starterKitContent { padding-bottom: 12px } /* SECTIONS */ .section { clear: both; padding: 0px; margin: 0px; } /* COLUMN SETUP */ .nm-col { display: block; float: left; margin: 1% 0 1% 2%; position: relative; min-height: 747px; } .nm-col:first-child { margin-left: 17px; } /* GROUPING */ .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { -ms-zoom: 1; /* For IE 6/7 */ } .nm-span_1 { width: 30.6%; border: 1px solid #dfd9db; } /* image set up start */ #starterKitContent img { display: block; } .starterKitImg { } .starterKitImg > img { margin: 0 auto; width: 100%; height: auto; } /* main header and para set up */ .starterKitP { font-size: 11px; margin: 0px 20px; padding: 12px; text-align: center; } div.starterPar { height: 100px; border-bottom: 1px solid #dfd9db; margin: 0 20px; } div.orderNowBtn a:hover, div.orderNowBtn2 a:hover, div.orderNowBtn a:focus, div.orderNowBtn2 a:focus-visible { color: var(--pink100); } div.orderNowBtn { margin: 0 auto; /* text-align;*/ } div.orderNowBtn > h2 { background: #f9d4c4; border: 1px solid #dfd9db; } div.orderNowBtn2 > h2 { background: #c0c0c0; border: black solid 1px; } div.orderNowBtn > h2 > a, div.orderNowBtn2 > h2 > a { text-decoration: none; color: black; padding: 10px; display: block } div.orderNowBtn > h2, div.orderNowBtn2 > h2 { text-transform: uppercase; font-weight: normal; font-size: 18px; text-align: center; width: 60%; margin: 0 auto; } .starterKitList { font-size: 11px; margin: 12px -15px 0 19px; min-height: 75px; } .starterKitList > ul { overflow: hidden; } .starterKitList > ul > li { float: left; text-align: left; } .startKitDouble li { width: 46%; margin: 0 8px 0 0; } ul.startKitDouble { list-style-type: disc; padding: 0 12px; } .startKitParent { padding: 0px 0; margin: 10px; } .startKitParentChild { padding: 20px 0; position: relative; } .startKitParentChild:after { content: ""; position: absolute; z-index: 0; right: 0; left: 0; top: 50%; border-top: 1px solid #dfd9db; } div.startKitParentChild > div.startKitParentChild2 { color: black; position: absolute; background: white; margin: 0 auto; top: 30%; right: 35%; z-index: 999; width: 100px; text-align: center; font-family: var(--font_bold); font-size: 12px } .proStarterHeader { background-color: #f9d4c4; height: 61px; margin: 0; padding: 0; position: relative; } .proStarterHeader h1 { font-family: "roboto", sans-serif; font-size: 25px; font-weight: 400; text-transform: uppercase; text-align: center; padding: 12px 0 0 0; } div.nm-col > h1.mens { background: #c0c0c0; } /* homepage banner text */ div.side_bnr_rt { float: left; width: 715px; height: 522px; } div.side_bnr_lt_wrap { width: 285px; float: left; } div.side_bnr_lt { width: 100%; height: 86px; float: left; border-bottom: 1px solid #c0c0c0; text-align: right; } div.side_bnr_lt_padding { width: 100%; height: 74px; float: left; border-bottom: 1px solid #c0c0c0; text-align: right; padding-top: 12px; } div.side_bnr_lt:hover, div.side_bnr_lt:focus-visible { background-color: #f8f8f8; cursor: var(--pointer); } div.side_bnr_lt_top, div.side_bnr_lt_btm { color: grey; text-transform: uppercase; font-family: 'roboto', sans-serif; } div.side_bnr_lt_top { margin: 8px 12px 0 0; font-size: 24px; font-weight: 200; } div.side_bnr_lt_top > b { font-weight: 400; color: black; } div.side_bnr_lt_btm { margin: 0 12px 0 0; font-size: 14px; letter-spacing: 1px; } div.side_bnr_lt_btm > a { color: grey; text-decoration: none } .category-list-thumbnailLarge { /*float: left;*/ display: inline-block; height: auto; margin: 0 35px 65px 0; overflow: hidden; width: 212px; } .category-list-thumbnailLarge img { width: 100%; } .category-list-thumbnailLarge:nth-child(even) { } .category-list-thumbnailLarge:nth-child(odd) { } .category-list-thumbnailLarge:nth-child(4n) { /* 212px x 4 pic + 3 spaces at 50.66(rep) each so 2px to compensate for remainder */ margin: 0 0 65px 2px; } .category-list-thumbnailLarge:nth-child(4n+1) { clear: both; } .category-list-thumbnailLarge:nth-last-child(2) { border: 0; } .category-list-range-large, .category-list-title-large { margin-top: 5px; text-align: center; } .category-list-range-large { font-size: 12px; font-family: var(--font_bold); } .category-list-title-large { font-size: 14px; font-weight: normal; } .category-list-title-large a { color: black; text-decoration: none; } .category-list-title-large a:hover, .category-list-title-large a:focus-visible { color: var(--pink100); } .padding_fix { padding-top: 60px; } #starterKitContent { max-width: 1000px; margin: 0 auto } .center-width { margin: 0 auto; max-width: 1000px; } .center-basic { margin: 17px auto 0 auto; position: relative; } #right img { width: auto; max-width: 100%; float:left; margin:0; } #ShareTheLove { display: none; cursor: var(--pointer); text-decoration: none; position: absolute; bottom: 20px; width: 100%; } .banner-image-center { text-align: center; } .banner-image-center a .banner-image { width: 100%; height: auto; } .banner-image-center a .bic_image_main { margin: 0 0 5px 0 !important; } .banner-image-center a .bic_image { margin: 0 0 50px 0 !important; } #po-error { display: none; margin: 5px 0 0 0; font-weight: normal; color: var(--teal100); } #checkout-button, #checkout-button2, #checkout-button3 { /*display: none;*/ } #item-main { width: 1000px; margin: 0 auto; } #sign-in-link, #create-link { display: block; cursor: var(--pointer); } #login-panel { display: none; z-index: 170000; width: 460px; height: 365px; } /*feedback inner*/ #item-feedback, .related-items-header, .related-items-header span, .item-feedback-header, .item-feedback-header span, #feedback-summary-header { } .review_row { position: relative; display: table; min-height: 100px; margin: 0 0 35px 0; } #review_rating_img { margin: 10px 0 0 0; } .user-data, .summary-data, .review-text, .titlestar, .titlestar2, #feedback-reviews-count, .review-title, .review-date, .revplural, #feedback-write-review, .user-name, .user-bio { } .review_data { font-family: var(--font_alt); font-size: 14px; } .user-data, .review_data { line-height: 1.3; } .user-name { font-weight:bold; } .user-data, .summary-data, .review-text { position: relative; display: table-cell; vertical-align: top; height: 100%; } .user-data, .summary-data { width: 200px; min-width: 150px; } .user-data { padding: 15px; background: var(--greyMain); } .consumer-review, .salon-review { margin: 15px 0 0 0; } .salon-review { } .review-text { margin: 0 0 20px 0; padding: 0 5px 5px 25px; width: calc(100% - 220px); } .review-title, .review-date { margin: 0 0 10px 0; } .review-title, .review-date, .review_data { color: var(--black); } .review-image { } .review-title { margin: 0 0 5px 0; font-family: var(--font_bold); } .review-date { } .titlestar, .titlestar2, .mainstar, .substar { position: relative; display: inline-block; } .titlestar { width: 70px; } .titlestar2 { display: none; width: 100px; font-size: 12px; margin: 5px 0 0 0; } .mainstar, .substar { height: 10px; } .mainstar { width: 100px; background: var(--greyMain); overflow: hidden; vertical-align: middle; } .mainstar, .titlestar, .titlestar2, #review_empty, #feedback-write-review { color: var(--black); cursor: var(--pointer); } #review_empty:hover, #review_empty:focus-visible, #feedback-write-review:hover, #feedback-write-review:focus-visible { color: var(--pink100); } .substar { width: 0; background: var(--black); vertical-align: top; } .starSpace { min-width: 10px; display: inline-block; } .sub, .sub2 { font-size: 12px; } #write-review-form { position: relative; /*float: left;*/ display: inline-block; margin: 0 25px 10px 25px; width: 60%; text-align: left; } #review-error-message, #write-review-message { position: absolute; right: 25px; width: 30%; } #review-error-message { top: 30px; padding: 10px 0; } #write-review-message { bottom: 85px; padding: 10px 20px; background: var(--greyMain); text-align: left; } #write-review-message-title { /*font-family: var(--font_bold);*/ margin: 0 0 20px 0; } #write-review-message-text { font-family: var(--font_alt); font-size: 12px; line-height: 1.3; } #review-panel-title { margin: 0; text-transform: none; } #write-review-info { position: relative; margin: 0 0 20px 0; height: 150px; text-align: left; } #item_review_img, #write-review-details { position: absolute; } #item_review_img { left: 0; bottom: 0; width: 150px; height: auto; } #write-review-details { left: 165px; bottom: 10px; max-width: 150px; } #write-review-name, #write-review-name3, #write-review-item { margin: 0 0 5px 0; } #write-review-name { /*font-family: var(--font_bold);*/ font-size: 14px; } #write-review-name3, #write-review-item { font-family: var(--font_alt); font-size: 12px; } #write-review-name3 { font-family: var(--font_bold); color: var(--grey5); } #write-review-rating { position: absolute; right: 0; bottom: 15px; width: 100px; } #write-review-rating label { position: absolute; bottom: 30px; font-family: var(--font_bold); } #review-rating-img-outer { position: absolute; left: 0; bottom: 0; width: 79px; } #review-rating-img, #review-rating-img-top > img { width: 79px; height: auto; } #review-rating-img, #review-rating-img-top { position: absolute; left: 0; overflow: hidden; } #review-rating-img { bottom: 0; } #review-rating-img-top { width: 0; bottom: -2px; z-index: 10; } #review-rating-img-outer, #review-rating-img, #review-rating-img-top { } #write-review-nickname label, #write-review-title label, #write-review-text label, #write-review-location label { display: block; margin: 10px 0 5px 0; } #review-nickname-input, #review-title-input, #review-text-input, #review-location-input { width: 100%; padding: 5px; } #write-review-submit { margin: 13px 0 0 0; padding: 10px 20px; background: var(--pink100); color: var(--white); border: 0; text-transform: uppercase; font-family: var(--font_bold); font-size: 14px; cursor: var(--pointer); } #write-review-submit:hover, #write-review-submit:focus-visible { background: var(--greyMain); } #feedback_panel { position: fixed; display: none; top: -9000px; left: calc(50% - (clamp(360px, 95%, 420px) / 2)); width: clamp(360px, 95%, 420px); padding: 10px; z-index: 2147483647; box-sizing: border-box; } #feedback_panel_inner { position: relative; padding: 10px 15px; border: 1px solid var(--pink100); background: var(--white); max-height: calc(100vh - 30px); overflow: auto; } #feedback_panel_inner input, #feedback_panel_inner textarea, #feedback_panel_inner select { width: 100%; min-width: 100%; max-width: 100%; margin: 0 0 10px 0; padding: 5px; } /*input:not([type=checkbox])*/ #feedback_panel_inner input[type=checkbox] { margin: 0 10px 10px 0; width: initial; min-width: initial; max-width: initial; } #fp_title { text-align: center; margin: 0 0 10px 0; } #fp_submit { margin: 0 auto; padding: 15px 20px 10px 20px; color: var(--white); background: var(--pink100); border: 1px solid var(--pink100); text-align: center; text-transform: uppercase; cursor: var(--pointer); } #fp_submit:hover, #fp_submit:focus-visible { color: var(--black); background: var(--white); } #rewards_info, #extra_lr_info, .frButton { display: none; position: fixed; bottom: 10px; right: 10px; padding: 11px 20px 11px 20px; color: var(--black); background: var(--greyMain); border: 2px solid var(--grey7); /*safari not respecting radius with outline ... not fixed since 2009 outline: 2px solid var(--grey7); outline-offset: -1px; */ line-height: 1.5; cursor: var(--pointer); z-index: 2147483645; -webkit-border-radius: 40px; -khtml-border-radius: 40px; -moz-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; } #rewards_info:hover, #rewards_info:focus-visible, #extra_lr_info:hover, #extra_lr_info:focus-visible, .frButton:hover, .frButton:focus-visible { /*color: var(--white);*/ background: var(--pink100); border: 2px solid var(--pink50); } #feedback, #btnQuickFinder { position: fixed; width: 73px; height: 73px; cursor: var(--pointer); font-size: 9px; font-family: var(--font_bold); text-transform: uppercase; text-align: center; line-height: 1.35; } #feedback { bottom: 10px; right: 10px; padding: 14px 5px 5px 5px; color: var(--black); background: var(--greyMain); border: 2px solid var(--grey7); /*outline: 2px solid var(--grey7); outline-offset: -1px;*/ line-height: 1.5; z-index: 2147483646; } #feedback:hover, #feedback:focus-visible { color: var(--white); background: var(--pink100); border: 2px solid var(--pink50); } #btnQuickFinder { bottom: 5px; left: 5px; color: var(--white); background: var(--black); z-index: 2047483647; } #feedback2 { position: fixed; bottom: 5px; right: 5px; width: 77px; height: 77px; background: var(--black); background-image: url('/img/selector_overlay.png'); color: var(--white); font-size: 0.7em; line-height: 1.4; text-align: center; z-index: 100000; text-transform: uppercase; cursor: var(--pointer); -webkit-border-radius: 43px 43px 43px 43px; -khtml-border-radius: 43px 43px 43px 43px; -moz-border-radius: 43px 43px 43px 43px; -o-border-radius: 43px 43px 43px 43px; border-radius: 43px 43px 43px 43px; } #feedback_OLD { background-color: #f5f5f5; color: var(--grey4) !important; display: block; position: fixed; right: -3px; bottom: -3px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: var(--greyMain) -moz-use-text-color -moz-use-text-color var(--greyMain); border-image: none; border-style: none solid solid; border-width: medium 2px 2px; box-shadow: -1px -1px 2px rgba(var(--rgbBlack), 0.5); font-family: arial,FreeSans,Helvetica,sans-serif; font-size: 12px; font-family: var(--font_bold); padding: 5px; text-decoration: none !important; white-space: nowrap; z-index: 90000; cursor: var(--pointer); -webkit-border-radius: 0 0 5px 5px; -khtml-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } #item-feedback { width: 70%; font-size: 14px; padding: 0 0 0 10px; } .related-items-header, .related-items-header span, .item-feedback-header, .item-feedback-header span { margin: 30px 0 0 0; text-align: center; font-size: 1.5rem; } .revplural { display: none; } #feedback-summary-header { margin: 0 0 5px 0; font-size: 1rem; font-family: var(--font_bold); text-transform: uppercase; } #feedback-reviews-count { color: var(--black); } #feedback-summary-qa { margin: 0 0 0 25px; } #item-feedback-summary { margin: 0 0 20px 0; min-height: 103px; } #feedback-write-review, #feedback-write-review2, #feedback-ask-question { cursor: var(--pointer); color: var(--pink100); } #feedback-write-review:hover, #feedback-write-review:focus-visible, #feedback-write-review2:hover, #feedback-write-review2:focus-visible, #feedback-ask-question:hover, #feedback-ask-question:focus-visible { color: var(--pink100); } /************************************************************************/ /* GetOrderStep1*/ /************************************************************************/ .checkout-header { margin-bottom: 40px; font-size: 24px; text-transform: uppercase; } #checkout-order-number { margin-left: 10px; font-size: 14px; } .checkout-container { position: relative; width: 650px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--black); } .checkout-sidebar { /*position: relative;*/ position: absolute; top: 0; right: 0; /*float: right;*/ width: 300px; min-height: 300px; padding-top: 20px; /*border-top: 1px solid var(--black);*/ } .checkout-sidebar .promo-quantity { display: none; } .checkout-sidebar #checkout-item-display .cart-name { width: 100px; } #checkout-item-display { position: relative; width: 100%; } #checkout-item-display .availability-message, #checkout-item-display .cart-wishlist, #checkout-item-display .cart-remove { display: none; } #checkout-item-display .cart-image { margin-right: 10px; } #checkout-item-display .cart-name { /*width: 160px;*/ padding: 10px 0 0; margin: 0; font-size: 12px; } #checkout-item-display .cart-subtotal { position: absolute; top: 10px; right: 5px; padding: 0; } #checkout-item-display .cart-price { position: absolute; bottom: 20px; right: 5px; padding: 0; margin: 0; } #checkout-item-display .cart-quantity-input, #checkout-item-display .cart-promo-description, #checkout-item-display #shopping-cart-promo { display: none; } #checkout-item-display .cart-quantity { position: absolute; top: 10px; right: 90px; padding: 0; font-size: 12px; } #checkout-item-display .cart-quantity .checkout-quantity { display: inline; } #checkout-item-display .promo-quantity { display: inline; } .checkout-container #checkout-item-display .cart-promo-description { display: block; } #ccodecont { margin: 10px 0 0 0; } .promo-edit { color: var(--grey6); } #sidebar-bag-header { margin-bottom: 20px; font-size: 15px; font-family: var(--font_bold); text-transform: uppercase; } #sidebar-bag-back { float: right; } #cart-total-value { font-family: var(--font_bold); } #cart-total-value:before { content: '$'; } #checkout-shipping-container { position: relative; display: inline-block; vertical-align: top; width: 335px; min-height: 200px; border-right: 1px solid var(--greyd); } #checkout-shipping-info { position: relative; display: inline-block; vertical-align: top; width: 290px; padding-left: 15px; } #checkout-shipping-title { margin-bottom: 20px; font-size: 16px; text-transform: uppercase; } #checkout-shipping-container .shipping-field { height: auto; margin: 0; } #checkout-shipping-container label { position: static; display: block; margin-bottom: 5px; text-transform: none; font-weight: normal; } #checkout-shipping-container input, #checkout-shipping-container select { width: 220px; margin: 0 0 10px; } #checkout-shipping-container #shipping-postal-code { width: 100%; } #shipping-method-title { margin-bottom: 20px; font-size: 15px; text-transform: uppercase; } #shipping-options { margin: 5px 0 10px 0; font-size: 12px; z-index: 2047483647; } .shipping-method { margin-bottom: 5px; } .shipping-method label { line-height: 1.5; } #shipping-options input, #shipping-options label { display: inline-block; vertical-align: top; margin-top: 0; } .shipping-service-name { font-family: var(--font_bold); } /* End GetOrderStep1*/ /************************************************************************/ /* Begin GetOrderStep2*/ /************************************************************************/ #empty-cart-error { position: relative; display: none; margin: 150px 100px 150px; font-size: 16px; color: var(--teal100); text-align: center; } #checkout-error-link { color: var(--black); font-family: var(--font_bold); text-decoration: underline; cursor: var(--pointer); } .sidebar-total-header { margin-top: 10px; font-size: 14px; /*font-family: var(--font_bold);*/ } .sidebar-total-value, .sidebar-total-value2 { float: right; } .sidebar-total-value:before { content: '$'; } #checkout-grand-total .sidebar-total-value:after { content: ' (USD)'; } #international-fee-notice { display: none; font-size: 12px; font-weight: normal; margin-top: 5px; } #checkout-change-address { position: absolute; top: 0; left: 51%; min-width: 30px; margin-right: 20px; font-size: 10px; z-index: 1000; } #shipping-address-summary, #shipping-address-form, #shipping-method-summary { position: relative; display: inline-block; padding-right: 5px; vertical-align: top; min-height: 100px; width: 335px; /*border-right: 1px solid var(--greyd);*/ } #payment-method-selection, #gift-option-summary { position: relative; display: inline-block; width: 290px; vertical-align: top; min-height: 100px; padding-left: 15px; } #gift-option-summary { font-size: 12px; } #gift-options, #po-number { font-family: var(--font_bold); } #po-number { max-width: 380px; } #gift-options input { position: relative; top: 3px; } #gift-option-summary[data-mode="no"] #gift-message { display: none; } #gift-option-summary[data-mode="yes"] #gift-message { display: block; } #gift-message { margin: 10px 0 0 0; } #gift-message p { margin: 0 0 10px 0; } #gift-textarea { width: 100%; height: 130px; padding: 7px; } #shipping-address-summary .shipping-field { height: auto; margin-bottom: 10px; } #checkout-address-panel { width: 400px; left: 50%; transform: translate(-50%, 0); min-height: 200px; padding: 10px 25px; text-align: left; z-index: 2047483647; } #checkout-address-panel-back { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgb(255, 255, 255); background: rgba(var(--rgbWhite), .45); z-index: 2047483646; display: none; } #checkout-address-panel label { position: static; display: block; margin-bottom: 5px; } #checkout-address-panel input, #checkout-address-panel select { width: 180px; /*height: 20px;*/ height: 2rem; margin: 0 0 10px; } #checkout-address-panel #shipping-postal-code { width: 75px; } #checkout-address-panel .shipping-fields-group { display: inline-block; vertical-align: top; width: 100%; } #checkout-address-panel #new-address-id { margin-bottom: 10px; } #shipping-summary-fields { display: none; } #shipping-info-form[data-mode="view"] #shipping-summary-fields { display: block; } #shipping-info-form[data-mode="view"] #shipping-edit-fields { display: none; } .checkout-multi-address #checkout-address-id { margin-bottom: 10px; } #checkout-new-id { display: none; margin-bottom: 10px; } #address-panel-summary { display: inline-block; vertical-align: top; width: 200px; margin-right: 15px; } #address-panel-buttons { position: relative; display: inline-block; vertical-align: top; width: 160px; } #checkout-use-address, #checkout-address-edit, #alternate-address-add { display: block; width: 100%; margin-bottom: 10px; font-size: 10px; } #alternate-address-buttons { margin-bottom: 15px; text-align: left; } #alternate-address-cancel { margin-left: 10px; } #payment-info-title { margin-bottom: 20px; font-size: 16px; text-transform: uppercase; } #payment-method { margin-bottom: 10px; font-size: 14px; } .radioButtons { margin: 0 0 7px 0; } #payment-method input[type="radio"] { display: inline-block; vertical-align: middle; margin: 0 5px 2px 0; } .shipping-summary-field, .billing-summary-field, .sales-tax-rate { font-size: 12px; margin-bottom: 5px; margin-left: 20px; } .sales-tax-rate, .sales-tax-rate2, #current-tax-rate { display: none; } #sales-tax { float: right; } #sales-tax:before { content: '$'; } #checkout-bag-container { position: relative; min-height: 200px; } #checkout-bag-container .availability-message, #checkout-bag-container .cart-wishlist, #checkout-bag-container .cart-remove { display: none; } #checkout-bag-container #checkout-item-display { max-height: none; overflow: visible; } #checkout-bag-container #shopping-cart-footer { margin-top: 15px; } #checkout-bag-container #cart-total-value { display: inline-block; margin-left: 78px; } #checkout-bag-container #cart-total-value:before { content: '$'; } #checkout-bag-container .checkout-place-order { float: right; clear: right; margin: 15px 0; } #checkout-bag-container #sidebar-bag-back { display: none; } #credit-card-note { display: none; margin-top: 10px; font-size: 12px; width: 100%; max-width: 400px; } .border { border: 1px solid var(--pink100); padding: 7px; } input[value="C"]:checked ~ #credit-card-note { display: block; } .payment-fields-group { display: inline-block; vertical-align: top; width: 100%; min-width: 255px; } .payment-fields-group > input { font-size: 1rem; /*text-transform: uppercase;*/ padding: 13px 10px; } .payment-field { margin-bottom: 17px; } .payment-field label { display: inline-block; margin-bottom: 5px; } .radioButtons { display: inline-block; border: 1px solid var(--grey9); padding: 13px 10px 8px 10px; } #card-id-input { display: block; } #login-panel-email, #login-panel-password { text-transform: none !important; } #login-panel-email, #login-panel-password, #caPassword, #caPassword2 { z-index: 1; } .card-id-details { position: relative; display: inline-block; vertical-align: top; margin-top: 10px; margin-left: 44px; font-size: 9px; } .card-id-details img { position: absolute; left: -45px; margin-right: 5px; } .card-id-details:first-child { margin-right: 10px; } #card-id-input { } #card-zip-input { } .payment-fields-group > input { display: block; margin: 10px 0; padding: 5px 0 5px 10px; width: 100%; } .monYear { float: right; width: 70%; } #apply-payment-button { width: 100%; } #credit-card-error { margin-bottom: 0; } /* End GetOrderStep2*/ /************************************************************************/ /* Begin Order*/ /************************************************************************/ #order-receipt { padding: 10px 75px; background: var(--greye); margin-bottom: 20px; } #content.mobile-device #order-receipt { margin-top: 15px; } #order-receipt-title { font-size: 20px; text-decoration: underline; text-transform: uppercase; } #order-receipt-text { font-size: 12px; color: var(--grey4); margin-top: 15px; } #order-details { width: 500px; margin-left: 75px; margin-bottom: 15px; font-family: var(--font_bold); color: var(--black); text-transform: uppercase; border: 1px solid var(--greyd); } #order-details #order-number { margin: 10px; } #order-details #order-date { margin: 0 10px 10px; } #order-details #order-total { margin: 0 10px 10px; } #order-details #order-confirmation-total:before { content: '$'; } #order-receipt-help { margin-left: 75px; margin-bottom: 25px; font-size: 12px; color: var(--grey9); line-height: 1.75; } #order-receipt-help a { color: var(--grey9); text-transform: uppercase; font-family: var(--font_bold); } /* End Order*/ /****************************/ /**** color swatches ****/ /****************************/ .item_info { display: none; } #swatches, .swatches1, .swatches2, .swatches3, .swatches4, .swatches5, .swatches6, .swatches7, .swatches8, .swatches9, .swatches10, .swatches11, .swatches12 { width: 60%; overflow: hidden; cursor: var(--pointer); margin: 0 0 0 10px; } .color_swatch, .color_swatch2, .color_swatch_min { position: relative; width: 58px; height: 58px; display: inline-block; border: none; margin: 2px; overflow: hidden; } .selector_current { margin: 2px 2px 2px 3px; width: 57px; height: 57px; cursor: var(--pointer); } .iBorder { position: absolute; width: 100%; height: 100%; border: 15px double var(--white); text-align: center; font-size: 3.16rem; z-index: 1; } .selector_highlight { mix-blend-mode: difference; width: 58px; height: 58px; border: 2px solid #808080; } .color_swatch:nth-child(5n).selector_current, .color_swatch:nth-child(5n).selector_highlight, .color_swatch_min:nth-child(5n).selector_current, .color_swatch_min:nth-child(5n).selector_highlight { } .new_overlay, .preorder_overlay { position: absolute; display: none; width: 58px; height: 58px; top: 0; left: 0; z-index: 1000; } /*.new_overlay:hover, .preorder_overlay:hover {}*/ .inner_swatch_min:hover ~ .new_overlay, .inner_swatch_min:hover ~ .preorder_overlay, .color_swatch_min.selector_highlight:hover > .new_overlay, .color_swatch_min.selector_highlight:hover > .new_overlay { top: -2px; left: -2px; } .new_overlay { background-image: url('/img/new_overlay.png'); } .preorder_overlay { background-image: url('/img/preorder_overlay.png'); } .swatch_overlay { position: absolute; width: 58px; height: 58px; top: -2px; /*offset -2 for border thickness*/ left: -100px; background-image: url('/img/selector_overlay.png'); background-color: rgba(var(--rgbWhite), 0.55); } .color_swatch_min, .iBorder { } #swatches1, #swatches2, #swatches3, #swatches4, #swatches5 { width: 250px; } #readerAlert, .readerOnly { position: fixed; top: -1000px; left: -1000px; width: 100px; height: 100px; } .image_thumb, .image_thumb2 { position: absolute; top: -70px; left: -70px; z-index: 0; } #menu_items { display: block; position: relative; /*top: 17px;*/ /*left: 0;*/ width: 100%; height: 100%; pointer-events: none; overflow-x: hidden; overflow-y: auto; } #menu_items_bottom { position: absolute; top: 0; width: 100%; height: 115px; z-index: 50; } #filterClose { top: 0; left: 65px; position: absolute; cursor: var(--pointer); display: none; } #itemid { float: right; } #item_images, #item_images3 { text-align: center; width: 35%; position: fixed; top: 50px; right: 50px; background: var(--white); } #item_images_collection { text-align: center; width: 33%; float: left; z-index: 10000; background: var(--white); margin: 0 0 0 10px; min-height: 350px; } #item_details { margin: 20px 0 0 10px; } #item_details_collection { width: 63%; float: right; margin: 20px 0 0 10px; } .thumbnail2 { margin: 10px 5px 0 5px; width: 45px !important; height: auto; cursor: var(--pointer); } #item_image { width: 250px; height: auto; cursor: var(--pointer); } #email_code { margin: 0 auto; padding: 10px; width: 600px; position: relative; left: 20%; background: var(--white); z-index: 2147483647; display: none; } #email_first, #email_second { border: 1px solid var(--black); padding: 40px; display: inline-block; } #email_second { display: none; } #email_code_close { position: absolute; top: 15px; right: 15px; font-size: 1.5rem; } #email_code_txt1, #email_code_txt2 { display: inline-block; width: 100%; } #email_code_txt1, #email_code_txt2, #email_code_btn, #email_code_btn_c { text-align: center; text-transform: uppercase; } #email_code_txt1 { font-family: var(--font_bold); font-size: 6rem; } #email_code_txt2 { font-size: 4rem; } #email_code_txt3 { color: var(--greyMain); } #email_code_close, #email_code_btn, #email_code_btn_c { cursor: var(--pointer); padding: 16px 20px 0 20px; } #email_code_btn, #email_code_btn_c { height: 30px; } #email_code_btn { width: 55%; float: left; background: var(--black); color: var(--white); border: 1px solid var(--black); } #email_code_btn_c { width: 25%; float: right; background: var(--white); border: 1px solid var(--black); } #email_first .clear { min-height: 100%; } #email_code_txt3 { text-align: center; margin: 0 0 20px; font-size: 1.25rem; line-height: 1.25; color: var(--grey9); } #email_code_email { margin: 0 auto; padding: 10px 20px; display: block; font-size: 1.15rem; width: 90%; } .item { display: inline-block; margin: 0 0 20px 0; } .itemContainer { display: inline-block; margin: 0 30px 20px 20px; width: 150px; vertical-align: top; } .itemContainer i { margin: 0; } /************************************************************************/ /* Begin ValueSelector*/ /************************************************************************/ .mainframe-left-menu #left.value-selector { width: 250px; } #left-menu.value-selector { margin-left: 0; margin-right: 0; text-align: left; } #right.value-selector { width: 750px; margin-left: 250px; } #right.value-selector .item-line .item { margin-left: 10px; } #right.value-selector .item-line .item:first-child { } #selector_menu { position: fixed; /*position: sticky;*/ display: none; top: 0; right: 0; width: 100%; min-width: 320px; max-width: 420px; height: 100vh; padding: 20px; background: #ccc; background: var(--white); z-index: 2147483647; box-shadow: -10px 0 20px 0 rgba(var(--rgbBlack), 0.1); } #compareItems, #shownewCont, #autoCloseFilterCont { display: inline-block; top: 51px; left: -13px; padding: 10px 0 5px 0; background: var(--white); z-index: 2147483645; } #compareItems, #shownewCont, #autoCloseFilterCont, #compareItems, #for_compareItems, #shownew, #for_shownew, #autoCloseFilter, #for_autoCloseFilter { cursor: var(--pointer); text-transform: uppercase; z-index: 2147483644; } #shownew, #autoCloseFilter { display: none; } #compareItems, #for_shownew, #for_autoCloseFilter { padding: 5px; border: 1px solid var(--greyMain); color: var(--grey9); font-family: var(--font_bold); font-size: 12px; } #compareItems { margin: 8px 0 0 0; width: 100px; text-align: center; } #shownew:checked + #for_shownew, #autoCloseFilter:checked + #for_autoCloseFilter { color: var(--white); background: var(--pink100); } #for_shownew:hover, #for_autoCloseFilter:hover { color: var(--black); background: var(--greyMain); } #shownew:checked + #for_shownew:hover, #autoCloseFilter:checked + #for_autoCloseFilter:hover { color: var(--black); } #compareComp, #compareItems { display: none; position: fixed; left: 10px; padding: 10px 20px; font-family: var(--font_bold); font-size: 12px; text-transform: uppercase; z-index: 2147483647; cursor: var(--pointer) !important;; } #compareComp:hover { color: var(--white); background: var(--pink50); } #compareComp { bottom: 10px; border: 1px solid var(--pink100); background: var(--pink10); text-align: center; } #comp-panel-header { position: relative; top: -13px; left: -50%; width: 200%; height: 38px; background: transparent; padding: 15px 0 0 0; margin: 0 0 -18px 0; } /********************** compare items start ***********************/ #compareItems { border: 1px solid var(--pink100); color: var(--black); background: var(--pink10); min-width: 202px; overflow: hidden; } #itemsToCompare { left: 0; margin: 10px 0 0 0; width: 100%; } /*horizontal*/ #compareItems.hor { width: auto; max-width: calc(100vw - 35px); height: 225px; overflow: hidden; white-space: nowrap; } #itemsToCompare.hor { white-space: nowrap; overflow-x: auto; overflow-y: hidden; } /*vertical*/ #compareItems.ver { width: 202px; height: 100%; max-height: calc(100vh - 75px); overflow: hidden; } #itemsToCompare.ver { height: 95%; overflow-x: hidden; overflow-y: auto; } /* @media only screen and (max-width: 619px) { #dModal { left: 2% !important; width: 96% !important; } } */ @media only screen and (max-width: 920px) { /*horizontal*/ #compareItems.hor { top: calc(50% - 112px) !important; left: 0 !important; width: 100%; } /*vertical*/ #compareItems.ver { top: -8px !important; left: calc(50% - 101px) !important; height: 100%; } } /********************** compare items end ***********************/ .itemsToCompareName { position: absolute; bottom: 5px; padding: 2px 0; width: 100%; text-align: center; } .comp-color-remove, .itemsToCompareName { background: var(--greyMain); background: rgba(var(--rgbWhite), .75); } .itemsToCompareImage { display: inline-block; margin: 0 0 -2px 0; width: 160px; height: 160px; overflow: hidden; } .itemsToCompareImage_over { border: 3px solid var(--black); } .itemsToCompareImage_over img, .ui-droppable:hover { opacity: 0.5; } .ui-sortable-helper .comp-color-remove { display: none; } .itemsToCompareImage img { margin: -100%; width: 400px; max-width: 400px; height: auto; } .resetCompare, #dirCompare { font-size: 14px; } #dirCompare { top: 2px; } .resetCompare:hover, #dirCompare:hover { color: var(--pink100); font-size: 14px; } .comp-color-remove { position: absolute; top: 0; right: 0; padding: 2px 5px; font-size: 15px; cursor: var(--pointer); z-index: 1; -webkit-border-radius: 0 0 0 7px; -khtml-border-radius: 0 0 0 7px; -moz-border-radius: 0 0 0 7px; -o-border-radius: 0 0 0 7px; border-radius: 0 0 0 7px; } .comp-color-remove:hover { color: var(--pink100); } #value-selector-title { margin: 0 0 10px -13px; padding-bottom: 4px; cursor: var(--pointer); text-align: left; z-index: 2147483647; } #value-selector-title h1 { display: inline-block; color: var(--black); font-family: var(--font_bold); font-size: 12px; text-transform: uppercase; } #value-selector-title img { vertical-align: bottom; } #filter_outer { display: block; position: relative; width: 100%; vertical-align: top; } #filter_title { display: block; margin: 9px 10px 0 0; vertical-align: top; } #filter_title p { margin: 0 0 10px 0; font-size: 12px; } /* #filter_buttons { position: relative; display: block; margin: 0; text-align: center; } */ #filter_buttons { position: fixed; display: block; margin: 0; padding: 10px; /*width: calc(300px - 20px);*/ width: 100%; /*width -> -40px*/ min-width: 280px; max-width: 380px; text-align: center; background: var(--white); pointer-events: auto; z-index: 100; } .close_s_filters { position: fixed; top: 20px; right: 20px; margin: 0 0 0 10px; font-size: 18px; cursor: pointer; } .selector-group-items { /*max-height: 245px;*/ /*overflow-y: auto;*/ pointer-events: auto; } .selector-group { display: block; margin: 0 0 20px 0; width: 100%; text-align: left; font-size: 12px; vertical-align: top; background: none; /*pointer-events: auto;*/ } .selector-group-title { font-family: var(--font_bold); font-size: 20px; text-transform: uppercase; /*margin: 0 0 10px 0;*/ padding: 10px 0 10px 5px; color: var(--black); background: var(--white); /*border-top: 1px solid var(--black);*/ /*border-bottom: 1px solid var(--black);*/ cursor: var(--pointer) !important; pointer-events: auto; } .selector-group-title-selected { background: var(--pink30); } .selector-value { position: relative; display: none; margin: 0 0 5px 0; width: 100%; vertical-align: top; } #R2.selector-group .selector-value { width: 60px; } .value-label, .selector-value .value-label, .selector-value .value-box { } .value-label, .clearfilter { display: inline-block; padding: 7px 12px; font-size: 16px; width: 100%; min-width: 100px; cursor: var(--pointer); } .clearfilter { background: var(--teal40) !important; } .selector-value .value-box div { display: inline-block; width: 16px; height: 16px; background: url('/img/selector_check_box.png') no-repeat; cursor: var(--pointer); } .selector-value .value-input:checked + .value-box div { background-image: url('/img/selector_check_box_checked.png'); } .selector-value .value-input:checked ~ .value-label { background: var(--greyMain); } .selector-value .value-label:hover, .clearfilter:hover { color: var(--white); background: var(--pink100); } .selector-value .value-input, .clearfilter { display: none; } #value-selector-reset, .value-selector-reset, #value-selector-close { vertical-align: top; margin: 0 10px 0 0; cursor: var(--pointer); } #value-selector-reset, #value-selector-close { position: relative; display: inline-block; pointer-events: auto; /*z-index: 100;*/ } #value-selector-reset { } #value-selector-close { } #right.value-selector .item-line .item .item-line-img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; } .cswatch { display: inline-block; position: absolute; top: 0; width: 20px; height: 26px; background: rgba(var(--rgbWhite), 0); z-index: 2147483647; z-index: 50; } .cswatch-input { /*left padding = 5px + cswatch width*/ padding: 7px 12px 7px 25px; } .tSwatch:after, .tSwatch::after { content: '^'; font-size: 20px; top: 6px; position: absolute; left: 4px; } /* End ValueSelector*/ /************************************************************************/ /* Begin ShoppingCart*/ /************************************************************************/ #shopping-cart, #shopping-cart-reload { /*float: left;*/ width: calc(100% - 300px); max-width: 700px; padding: 0 0 30px 0; margin: 0 0 100px 0; z-index: 2147483641; } .normal-item, .promo-item { padding: 0 10px 0 0; } .hazBGColor { /*background: var(--pink20);*/ background: var(--pink10); /*background: var(--greyd);*/ /*background: var(--greye);*/ border: 1px solid var(--pink100); } #cart-header { position: relative; padding: 0 0 15px 0; border-bottom: 1px solid var(--black); background: var(--white); } #cart-title { font-size: 14px; color: var(--black); text-transform: uppercase; } #cart-count1 { font-weight: normal; } #cart-benefits-message { display: none; min-height: 15px; margin-top: 5px; font-size: 12px; color: var(--black); text-align: left; float: left; width: 100%; } #cart-benefits-message strong { color: var(--pink100); } .continue-shopping, #updateVPButton, .shopping-cart-checkout, #promo-remove-button, #generic-btn, #applepay-btn { position: relative; display: inline-block; width: 100%; height: 35px; line-height: 35px; margin: 10px 0; font-family: var(--font_bold); font-size: 14px; text-transform: uppercase; text-align: center; } #promo-remove-button { color: var(--white); background: var(--black); border: 1px solid var(--black); } #promo-remove-button:hover, #promo-remove-button:focus-visible { color: var(--black); background: var(--greye); border: 1px solid var(--black); } .continue-shopping a, .shopping-cart-checkout a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #generic-btn, #applepay-btn { color: var(--pink100); background: var(--white); border: 1px solid var(--pink100); } .continue-shopping a, #updateVPButton, .shopping-cart-checkout a, #generic-btn, #applepay-btn { cursor: var(--pointer); } .continue-shopping, #updateVPButton { font-weight: normal; } .continue-shopping { color: var(--black); background: var(--white); border: 1px solid var(--black); } .continue-shopping:hover, #generic-btn:hover, #applepay-btn:hover { color: var(--pink100); background: var(--greye); border: 1px solid var(--pink100); } #updateVPButton { color: var(--black); background: var(--pink20); border: 1px solid var(--pink100); /*text-transform: none;*/ } #updateVPButton:hover { color: var(--black); background: var(--greye); border: 1px solid var(--black); } #generic-btn i, #applepay-btn i { vertical-align: middle; } #applepay-btn i { font-size: 20px; } .shopping-cart-checkout { color: var(--white); background: var(--black); border: 1px solid var(--black); } .shopping-cart-checkout:hover { color: var(--pink100); background: var(--greye); border: 1px solid var(--pink100); } .cart-item { position: relative; border-bottom: 1px solid var(--greyd); padding: 10px 0 10px 10px; min-height: 120px; } #sc_right .loading-bg, .cart-item .loading-bg { z-index: 2147483640; } .cart-item div:not(.cart-hazmat) { display: inline-block; vertical-align: top; } #aobAlertBox .cart-name div:not(.cart-hazmat) { display: block; } .cart_warn { display: none; position: absolute; left: -14px; top: 5px; color: var(--black); font-size: 20px; z-index: 2147483647; } .cart-image { display: inline-block; position: relative; width: 60px; height: 60px; margin-right: 5px; overflow: hidden; } .cart-image img { width: 100%; height: 100%; } .promo-item .cart-item { background: none; /*border-left: 8px solid #ebd417;*/ border-left: 8px solid var(--greyMain); } .cart-name { display: inline-block; padding-top: 5px; width: 300px; margin-right: 20px; vertical-align: top; line-height: 1.2; font-weight: normal; } .cart-name a, .black-normal { color: var(--black); text-decoration: none; } #haz_back_to_cart, #haz_change_address { display: inline-block; width: 50%; text-align: center; cursor: var(--pointer); } #haz_back_to_cart:hover, #haz_back_to_cart:focus-visible, #haz_change_address:hover, #haz_change_address:focus-visible { color: var(--pink100); } .black-normal { font-weight: normal; } .black-normal:hover, .black-normal:focus-visible { color: var(--pink100); } .aobname1, .aobname1 strong { font-size: 16px; } .aobname2, .cart-partnumber, .cart-size { font-size: 12px; font-family: var(--font_alt) } .aobname3 { margin: 0 0 10px 0; font-size: 16px; } .cart-ps-container { white-space: nowrap; } .cart-partnumber, .cart-size { color: var(--grey3); text-transform: uppercase; } .cart-price { width: 50px; padding-top: 12px; margin-right: 15px; font-size: 12px; color: var(--grey9); text-align: right; } .cart-quantity { padding-top: 12px; font-size: 10px; } .cart-quantity-input { vertical-align: top; margin-left: 5px; } .cart-quantity-input.numInput { width: 90px; padding: 5px 0 5px 5px; text-align: left; } .qty_container { position: relative; } i.numAccept { display: none; position: absolute; top: 5px; right: 4px; font-size: 19px; cursor: var(--pointer); z-index: 100; } i.numAccept:hover, i.numAccept:focus-visible { color: var(--pink100); background: var(--pink20); } .promo-item .cart-quantity-input { display: none; } .promo-quantity { display: none; } .promo-item .promo-quantity { display: inline-block; vertical-align: top; margin-left: 10px; font-size: 15px; } .checkout-quantity { display: none; } .cart-subtotal { position: absolute; right: 0px; /*float: right;*/ padding-top: 12px; font-size: 12px; } .cart-remove { position: absolute; right: 0; bottom: 5px; } .cart-wishlist { position: absolute; right: 55px; bottom: 5px; } .cart-wishlist a, .cart-wishlist span, .cart-remove-link, .cart-hazmat { font-family: var(--font_alt), 'Arial Narrow', Arial, sans-serif; color: var(--grey9); text-decoration: none; font-size: 12px; } .cart-wishlist a, .cart-wishlist span, .cart-remove-link { cursor: var(--pointer); /*text-transform: uppercase;*/ /*font-family: var(--font_bold);*/ } .cart-wishlist a:hover, .cart-wishlist span:hover, .cart-remove-link:hover, .cart-wishlist a:focus-visible, .cart-wishlist span:focus-visible, .cart-remove-link:focus-visible { color: var(--pink100) !important; } .promo-item .cart-remove, .promo-item .cart-wishlist { display: none; } .cart-promo-description { display: none; } .promo-item .cart-promo-description { display: block; position: absolute; bottom: 10px; left: 10px; margin: 0 0 0 20px; font-size: 12px; } #cart-item-display .availability-message { display: none; background: var(--greyd); padding: 10px 15px; } .availability-message .availability-title { /*color: var(--teal100);*/ color: var(--pink100); font-family: var(--font_bold); font-size: 16px; text-transform: uppercase; margin-bottom: 10px; } .availability-message .availability-text { margin: 8px 0; font-size: 12px; line-height: 1.5; } #cart-item-display #empty-cart-display { width: 100%; height: 100px; line-height: 100px; font-size: 16px; color: var(--black); text-align: center; } #cart-item-display #shopping-cart-footer { margin: 10px 0; padding-bottom: 10px; /*border-bottom: 6px solid var(--black);*/ } #shopping-cart-promo { display: inline-block; margin: 0 0 10px 0; width: 100% !important; } #shopping-cart-promo #cart-promo-text { position: relative; display: inline-block; vertical-align: middle; font-family: var(--font_bold); font-size: 14px; } #shopping-cart-promo #promo-remove-text { display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 14px; color: var(--black); } #promo-remove-code-info { font-size: 12px; margin: 5px 0 0 0; display: block; line-height: 1.25; } #address_use_select { display: none; width: 100%; margin: 0 0 20px 0; padding: 10px 0 5px 5px; } #shopping-cart-promo #cart-promo-input { display: inline-block; vertical-align: middle; width: 100%; margin: 0; padding: 11px; font-size: 12px; border: 1px solid var(--pink100); } #shopping-cart-promo #cart-promo-button, #cart-promo-button-mobile { display: none; /*display: inline-block;*/ vertical-align: middle; cursor: var(--pointer); } #shopping-cart-promo #cart-promo-button { margin: 0 0 0 10px; background: var(--grey9); border: 1px solid var(--grey9);; } #shopping-cart-promo label { display: block; text-transform: uppercase; margin: 0 0 10px 0; } #shopping-cart-promo #promo-remove-button { display: inline-block; vertical-align: middle; cursor: var(--pointer); margin: 10px 0 0 0; background: var(--grey9); border: 1px solid var(--grey9); } #shopping-cart-total { float: right; display: inline-block; vertical-align: middle; font-size: 14px; /*font-family: var(--font_bold);*/ margin: 0 0 10px 0; width: 100%; color: var(--black); line-height: 1.5; } #order_int_shipping, #order_int_proc_fee, #order_int_not_avail { display: none; } #order_int_not_avail { color: var(--pink100); } .order-total-text { float: left; text-transform: uppercase; } .order-total-price { float: right; } #international_shipping, .international_shipping_info, .int_ship_not_avail { cursor: var(--pointer); } #international_shipping:hover, #international_shipping:focus-visible, .international_shipping_info:hover, .international_shipping_info:focus-visible { color: var(--pink100); } .int_ship_not_avail:hover, .int_ship_not_avail:focus-visible { color: var(--black); } #aobAlertBox #country_flag_icon { margin: 0 7px 0 0; } #aobAlertBox .country_flag, #aobAlertBox .country_flag_spacer, #aobAlertBox .country_cont { vertical-align: top; } #aobAlertBox .country_flag, #aobAlertBox .country_flag_spacer { width: 26px; height: 16px; } #aobAlertBox .country_cont { display: inline-block; margin: 0 0 5px 0; width: 33%; white-space: break-spaces; } #aobAlertBox .country_flag { outline: 1px solid var(--greyMain); } #aobAlertBox .country_name { display: inline-block; margin: 0 10px; width: calc(100% - 50px); line-height: 1.4; vertical-align: top; } @media only screen and (max-width: 500px) { #aobAlertBox .country_cont { width: 50%; } } .wishlist-add-bag { cursor: var(--pointer); } .wishlist-add-bag:hover { text-decoration: underline; } #wishlist-move-panel { width: 400px; min-height: 172px; z-index: 2147483647; } #wishlist-move-panel #wishlist-panel-title { width: 90%; margin: 15px auto; font-size: 16px; color: var(--grey9); font-family: var(--font_bold); border-bottom: 1px solid var(--greyd); padding-bottom: 5px; text-transform: uppercase; } #wishlist-move-content { position: relative; } #wishlist-move-panel #wishlist-panel-text { margin: 0 20px; font-size: 14px; color: var(--grey4); } #wishlist-move-panel #panel-item-name { font-family: var(--font_bold); } #wishlist-move-panel #panel-item-number { display: none; } #wishlist-move-panel #panel-item-orderline { display: none; } #wishlist-move-panel #wishlist-select-container { margin-top: 15px; margin-bottom: 10px; } #wishlist-move-panel #wishlist-select-container select { max-width: 300px; } #wishlist-move-panel #wishlist-panel-add, #wishlist-move-panel #wishlist-panel-cancel { display: inline-block; height: 30px; vertical-align: top; margin-bottom: 15px; background-size: contain; cursor: var(--pointer); } #wishlist-move-panel #wishlist-panel-add { width: 70px; background: url('/img/move.png') no-repeat; } #wishlist-move-panel #wishlist-panel-add:hover, #wishlist-move-panel #wishlist-panel-add:focus-visible { background: url('/img/move_hover.png') no-repeat; } #wishlist-move-panel #wishlist-panel-cancel { width: 85px; background: url('/img/cancel.png') no-repeat; } #wishlist-move-panel #wishlist-panel-cancel:hover, #wishlist-move-panel #wishlist-panel-cancel:focus-visible { background: url('/img/cancel_hover.png') no-repeat; } #wishlist-move-panel #wishlist-move-message { display: none; position: absolute; width: 100%; height: 100%; font-size: 14px; color: var(--grey4); background: var(--white); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; transition-property: opacity; transition-duration: 1.0s; } #wishlist-move-message .wishlist-response-text { text-align: justify; margin: 15px 25px; } #wishlist-move-message .wishlist-response-text a { color: var(--grey4); text-transform: uppercase; font-family: var(--font_bold); } #wishlist-move-message .response-item-name, #wishlist-move-message .response-list-name { font-family: var(--font_bold); } .wishlist-add-button, .wishlist-cancel-button { cursor: var(--pointer); } #edit-confirm-panel { width: 420px; min-height: 230px; } #edit-confirm-text { margin-bottom: 15px; } #edit-confirm-text em { font-style: normal; font-family: var(--font_bold); } #edit-confirm-text strong { text-transform: uppercase; } #edit-confirm-panel .grey-button { margin: 0 5px; } #cart-order-info { float: right; } #order-number, #delete-order, #clear-cart { display: inline-block; margin: 0 15px 0 0; } #order-number { /*text-transform: uppercase;*/ } #delete-order, #clear-cart { font-size: 12px; color: var(--grey3); cursor: var(--pointer); } #delete-order:hover, #delete-order:focus-visible, #clear-cart:hover, #clear-cart:focus-visible { color: var(--pink100); } /* End ShoppingCart*/ #also_bought, #cross_sell { position: relative; } #also_bought > .related-items, #cross_sell > .related-items { position: relative; margin: 0 auto; /*5 across with bigger thumbnails*/ /*width: calc(100% - 10px);*/ width: calc(100% - 50px); overflow: hidden; } #cross_sell_header { margin: 0 0 3px 0; /*font-family: var(--font_bold);*/ font-size: 20px; } #cross_sell_number_cont { margin: 0 0 10px 0; font-size: 12px; } #cross_sell_items { display: none; } .nav_arrow_left, .nav_arrow_right { position: absolute; top: 50%; cursor: var(--pointer); } .nav_arrow_left { left: 0; } .nav_arrow_right { right: 0; } .item-thumbnail-container { position: relative; white-space: initial; } .panel-bg { position: fixed; top: 0px; left: 0px; display: none; width: 100%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; /*transition-property: opacity;*/ /*transition-duration: 0.5s;*/ background: var(--white); z-index: 1000; } .panel { position: fixed; top: 0; left: 50%; transform: translate(-50%, 0); display: none; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; background: var(--white); overflow: auto; box-shadow: 3px 3px 5px 6px rgba(var(--rgbBlack), 0.25); z-index: 2147483647; /*transition-property: opacity;*/ /*transition-duration: 0.5s;*/ } .panel.ie8 { border: 1px solid var(--grey9); } .panel-close, .panel-close2, #mini-bag-close, .menu-close { position: absolute; cursor: var(--pointer); z-index: 100; } .panel-close, .panel-close2, #mini-bag-close { top: 5px; right: 5px; font-size: 19px; color: var(--black); } .panel-close, #mini-bag-close { width: 19px; height: 19px; } .menu-close { top: 0; right: 5px; width: 19px; height: 19px; } .panel-close:hover, .panel-close:focus-visible, .panel-close2:hover, .panel-close2:focus-visible, #mini-bag-close:hover, #mini-bag-close:focus-visible, .menu-close:hover, .menu-close:focus-visible { color: var(--pink100); /*background: var(--black) url('/img/close_hover.png') top left / 29px 29px;*/ } #wl_panel { top: 50px !important; max-width: 420px; max-height: calc(100vh - 70px); overflow-x: hidden; overflow-y: auto; z-index: 2147483647; } #chatPanel { display: none; position: fixed; top: 60px; left: calc(50% - 190px); width: 380px; max-height: calc(100vh - 50px); overflow-x: hidden; overflow-y: auto; padding: 50px 20px 10px 20px; border: 1px solid var(--greyMain); background: var(--white); z-index: 2147483647; /*inset offset-x offset-y blur-radius spread-radius - comma seperated for multiple shadows*/ -webkit-box-shadow: 0 10px 25px 5px rgba(var(--rgbBlack), 0.2); -khtml-box-shadow: 0 10px 25px 5px rgba(var(--rgbBlack), 0.2); -moz-box-shadow: 0 10px 25px 5px rgba(var(--rgbBlack), 0.2); box-shadow: 0 10px 25px 5px rgba(var(--rgbBlack), 0.2); } #chatData { overflow-y: auto; } #chatPanel div { } #chatClose { top: 0; left: 0; padding: 10px 20px; width: 100%; height: auto; text-align: right; font-size: 16px; color: var(--white); background: var(--grey9); } #chatPanel_message { padding: 7px !important; width: 100%; min-width: 100%; max-width: 100%; height: 100px; min-height: 100px; } label[for='chatPanel_info'] { line-height: 1.2; } #chatPanel_name, #chatPanel_fName, #chatPanel_lName, #chatPanel_email, #chatPanel_mobile, #chatPanel_message { width:100%; } #chatPanel_submit { width:100%; height: 60px; margin: 15px 0 0 0; padding: 10px 0 0 0; color: var(--white); background: var(--grey9); border: none; font-family: var(--font_bold); font-size: 25px; text-transform: uppercase; cursor: var(--pointer); } #chatPanel_submit:hover { background: var(--pink100); } #chatPanel_info { font-size: 14px; line-height: 1.4; margin: 10px 0 0 5px; } #chatPanel_info_c { color: var(--teal100); font-size: 12px; text-align: right; } #chatErr { margin: 0 0 15px 0; font-size: 14px; /*overflow-wrap: break-word;*/ word-wrap: anywhere; /*word-wrap: break-word;*/ -ms-word-break: break-all; /*word-break: break-all;*/ /*break on character, better for logographic systems*/ word-break: break-word; } #phoneLink { margin: 10px 0 0 0; line-height: 1.75; text-transform: uppercase; font-size: 17px; text-align: center; } #chatResTitle, #chatResInfo { margin: 0 0 10px 0; } #chatPost{ display: none; } #chatResTitle { font-family: var(--font_bold); font-size: 20px; } #chatResInfo { font-size: 14px; line-height: 1.4; font-family: var(--font_alt) !important; } #write-review-panel { display: none; opacity: 0; top: -2000px; left: -1000px; } #write-review-panel { position: fixed; top: 20px; left: 0; right: 0; width: 800px; min-width: 340px; max-width: 96%; height: calc(100vh - 45px); max-height: 572px; margin: 0 auto; padding: 25px; color: var(--black); background: var(--white); text-align: left; overflow-y: auto; /*inset offset-x offset-y blur-radius spread-radius - comma seperated for multiple shadows*/ -webkit-box-shadow: 10px 10px 20px 0 rgba(var(--rgbBlack), 0.2); -khtml-box-shadow: 10px 10px 20px 0 rgba(var(--rgbBlack), 0.2); -moz-box-shadow: 10px 10px 20px 0 rgba(var(--rgbBlack), 0.2); box-shadow: 10px 10px 20px 0 rgba(var(--rgbBlack), 0.2); box-sizing: border-box; z-index: 2147483647; } #item-left, #item-right { color: var(--black); } #item-left, #item-right, #prod_info, #buy_buttons { display: inline-block; vertical-align: top; } #item-left { width: 400px; text-align: center; } #item-right { margin: 0 0 0 10px; width: calc(100% - 420px); } .large-img { width: 49%; height: auto; max-width: 400px; } .vidimg { display: inline-block; width: 49%; box-sizing: border-box; vertical-align: top; overflow: hidden; height: 579px; } .prodimagecont, .prodvidcont { display: inline-block; position: relative; margin: 0; width: 50%; max-width: 600px; vertical-align: top; } .prodimage { width: 100%; height: auto; } #prod_info { margin: 0 10px 0 0; width: 100%; } #buy_buttons { margin: 20px 0 0 0; } #ship, #available, #extra_cont { margin: 15px 0 0 0; } #extraYN, #extraInfo, #extraYN2 { vertical-align: top; } #extraYN { width: 20px; margin: 0; } #extraInfo { width: 25px; margin: 0; font-size: 25px; } #extraYN2 { display: inline-block; width: calc(100% - 68px); margin: -2px 0 0 5px; padding: 0 10px 0 0; line-height: 1.4; } #extraInfo { color: var(--pink100); cursor: var(--pointer); } #extraInfo:hover, #extraInfo:focus-visible { color: var(--black); } .add-to-bag, #list_item_add, #main-item-sold-out, #sold-out, .main_link2, .add-to-wishlist, .add-to-wishlist2 { display: inline-block; position: relative; margin: 30px 0 0 0; width: 100%; max-width: 243px; height: 40px; font-family: var(--font_bold); word-spacing: .25em; letter-spacing: .1em; font-size: .75rem; text-transform: uppercase; text-align: center; } .add-to-bag, .main_link2, .add-to-wishlist, .add-to-wishlist2 { cursor: var(--pointer); } #main-item-sold-out { cursor: no-drop; } .add-to-bag, #main-item-sold-out, #sold-out, .main_link2, #main-item-sold-out { color: var(--white); background: var(--black); } .add-to-wishlist { color: var(--black); background: var(--greya); } .add-to-wishlist2 { color: var(--white); background: var(--pink100); } .add-to-wishlist:hover, .add-to-wishlist:focus-visible { color: var(--pink100); background: var(--greyMain); } .add-to-bag, #main-item-sold-out, #sold-out, .add-to-wishlist, .add-to-wishlist2 { padding: 15px 0 0 0; } .main_link2 { padding: 12px 0 0 0; } .add-to-bag:hover, .add-to-bag:focus-visible, .main_link2:hover, .main_link2:focus-visible { color: var(--pink100); background: var(--greyMain); } .add2 { padding: 10px 0 0 0; } .add_icon, .more_info_icon { /*top: 5px;*/ left: -10px; font-size: 17px; } #rating_image { margin: 10px 0 0 0; } #info-header-name { } .product-description-tab { font-size: 22px; } .spCallout { position: absolute; top: -7px; left: -10px; width: 15px; height: 15px; } .spCalloutC { color: var(--black); } .spCalloutS { color: var(--teal100); } .spCalloutCF { color: var(--DRed); } .spCalloutSF, .spCalloutD { color: var(--pink100); } #cprice, #cprice2, #cprice2b, #sprice2, #product-info-controls, #description-1, #description-2, #description-3, #description-4, #description-5, .product-description-text, .product-description-text p, .product-description-text div, .product-description-text2 p, .product-description-text2 div { position: relative; font-size: 17px; } #description-1, #description-2, #description-3, #description-4, #description-5, .product-description-text, .product-description-text p, .product-description-text div, .product-description-text2 p, .product-description-text2 div { line-height: 1.3; } #short_message { margin: 0 0 20px 0; font-size: 12px; text-align: left; line-height: 1.2; /*overflow-wrap: break-word;*/ word-wrap: anywhere; -ms-word-break: anywhere; word-break: anywhere; } #part-number, .product-description-text2 div.color_info, .color_info { font-size: 15px; line-height: 1.3; } .product-description-text p { margin: 0 0 15px 0; } #part-number, #info-header-name, #product-info-rating { margin: 0 0 10px 0; } #cprice, #cprice2, #cprice2b, #sprice2, #priceBlock { display: inline-block; margin: 0 20px 0 0; } #cprice, #cprice2, #sprice2 { font-size: 1.3rem; } #cprice2b { color: var(--grey7); font-size: 1.1rem; } #priceBlock { display: none; font-size: 1.1rem; } .infoSub1 { color: var(--grey3); } .strike { display: inline-block; } #cprice2b:after, .strike:after { content: ''; display: block; } #cprice2b:after { margin-top: -.65rem; border-bottom: 2px solid var(--grey7); } .strike:after { margin-top: -.6rem; border-bottom: 2px solid var(--grey7); } #select_size_label { font-size: 12px; } #description2_info { margin: 15px 0 0 0; } #product-info { position: relative; } #aobSim2 { display: none; cursor: var(--pointer); /*z-index: 2147483647;*/ } #aobSim2:hover { color: var(--pink100); } #product-info-description { margin: 80px 0 0 0; } .tab_container { margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid var(--black); } /*.tab_container:not([style*="display: block"]):last-of-type { }*/ .tab_container:last-of-type { border: none; } .product-description-tab { display: table; margin: 0 15px 10px 0; padding: 0 35px 0 0; width: 100%; text-transform: uppercase; font-family: var(--font_bold); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .product-description-tab:not(#title1) { cursor: var(--pointer); } .current-description-tab { } .product-description-text { } .product-description-text ul, .product-description-text2 ul { margin: 15px 0 15px 1.5rem; list-style: unset; } .product-description-text ul li, .product-description-text2 ul li { margin: 0 0 10px 0; } .product-description-text ul li:last-child, .product-description-text2 ul li:last-child { margin: 0; } .product-description-tab:last-of-type { } .numbers { list-style: decimal inside !important; } #volume_pricing_label { line-height: 1.3; font-size: 14px; } #volume_pricing { max-width: 560px; container-name: vp_container; container-type: inline-size; margin: 25px 0 15px 0; } .volume_pricing_cell { display: inline-block; margin: 0 10px 30px 0; width: calc(33% - 10px); min-width: 100px; color: var(--black); text-align: center; /*border: 1px solid var(--black);*/ border: none; vertical-align: top; box-sizing: border-box; } .volumeDash { top: -1px; margin: 0 1px; } @container vp_container (inline-size < 330px) { .volume_pricing_cell { width: calc(50% - 10px); } } @container vp_container (inline-size < 220px) { .volume_pricing_cell { width: calc(100% - 10px); } } @supports (display: grid) { #volume_pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); grid-auto-rows: max-content; gap: 15px 15px; /*margin: 40px 0;*/ } .volume_pricing_cell { overflow-x: auto; margin: initial; width: initial; min-width: initial; vertical-align: initial; } } .vpc_head { background: var(--greyd); padding: 4px 0; margin: 0 0 5px 0; } .vpc_data { word-wrap: break-word; font-size: 14px !important; } #quantity2 { display: inline-block; width: 100px; height: 40px; text-align: left; vertical-align: top; } #quantity2 input { padding: 10px 0 10px 10px; width: 100%; } .plusle_minun { position: absolute; top: 0; right: 20px; } .listContainer .plusle_minun { right: 5px; } #product-info-controls, #description-1 { margin: 0 0 20px 0; } #info-header-name3 { /*margin: -5px 0 20px 0;*/ margin: -5px 0 10px 0; font-size: 15px; font-weight: normal; } .color_info { margin: 15px 0 0 0; } .qtyText { margin: 0 10px 0 0; text-transform: uppercase; font-family: var(--font_bold); font-size: .75rem; vertical-align: middle; } #info-header-name { margin: 20px 0 10px 0; font-size: 2.25rem; } @media only screen and (max-width: 500px) { #info-header-name, #aob_blog_title { line-height: 1.3; font-size: 1.85rem; } } #product-info-rating { font-size: 12px; } .product-write-review { margin: 0 15px; } #info_cont { display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0 0 0; } .info { /*display: inline-block; position: relative;*/ flex: 1 1 auto; /*width: 20%;*/ width: 101px; max-width: 101px; cursor: var(--pointer); margin: 5px 2% 5px 0; padding: 10px; border: 1px solid var(--greyd); min-height: 67px; vertical-align: top; } .select_size { } .item_label { overflow-wrap: anywhere; word-wrap: anywhere; -ms-word-break: break-all; word-break: anywhere; font-size: 12px; } .item_message { margin: 10px 0 0 0; font-size: 12px; line-height: 1.3; } #source .selected { border: 1px solid var(--pink100); /*color: var(--white);*/ /*background: var(--black);*/ /*background: var(--pink10);*/ } .info:nth-child(3n+1).selected { /* */ } .main_image { float: left; height: auto; width: 50%; } .item_size { /*float: right;*/ width: 100%; /*height: 70px;*/ /*margin: 30px 0 0 0;*/ /*margin: 0;*/ /*padding: 0 0 0 5px;*/ font-size: .75rem; /*display: inline-block;*/ /*vertical-align: middle;*/ line-height: 1.3; flex: 1 1 0; } #aobsize { margin: 35px 0 0 0; } #brush_type { display: none; } .listContainer { position: relative; /*text-align: center;*/ margin: 70px 0 0 0; } .list_scroll { /*margin: 0 0 0 5%;*/ font-size: 12px; } .category-list-thumbnail { display: inline-block; margin: 0 15px 70px 15px; width: 14%; min-width: 310px; /*max-height: 620px;*/ /*height: auto;*/ /*text-align: center;*/ vertical-align: top; } .category-list-title { margin: 20px 0 30px 0; font-weight: normal; line-height: 1.45; } .category-list-range { font-family: var(--font_bold); } .category-list-name { } .category-list-price { font-family: var(--font_alt); margin: 5px 0 0 0 } .aob_atb_price_size { font-size: 12px; font-weight: normal; } #showFilters, #clearFilters, #listMenus { display: none; } #listMenus { position: fixed; top: 0; right: 0; padding: 50px; width: 100%; min-width: 300px; max-width: 420px; /*width: clamp(300px, 100%, 420px);*/ height: 100vh; overflow-y: auto; background: var(--white); box-sizing: border-box; z-index: 2147483647; -webkit-box-shadow: -10px 0 20px 0 rgba(var(--rgbBlack), 0.1); -khtml-box-shadow: -10px 0 20px 0 rgba(var(--rgbBlack), 0.1); -moz-box-shadow: -10px 0 20px 0 rgba(var(--rgbBlack), 0.1); box-shadow: -10px 0 20px 0 rgba(var(--rgbBlack), 0.1); } #listMenus #filter_copy { display: none; position: absolute !important; top: 20px !important; left: 20px !important; color: var(--black); z-index: 2147483646; cursor: var(--pointer); } #listMenus #filter_copy:hover, #listMenus #filter_copy:focus-visible { color: var(--pink50); } #listMenus #filter_copy span { font-size: 12px; /*text-transform: uppercase;*/ } @media only screen and (max-width: 500px) { .category-list-thumbnail { height: 420px !important; } .category-list-thumbnail .aob_atb_swap_left, .category-list-thumbnail .aob_atb_swap_right { margin: 0 0 10px 0; } .category-list-thumbnail .aob_atb_price_size::after { content: "\A"; white-space: pre; } } @media only screen and (max-width: 420px) { #listMenus { left: 0; right: unset; } } #listMenus .closeBox { top: 10px; right: 10px; font-size: 20px; } #listMenus .ld_menu_header { padding: 13px 0 10px 10px; /*font-family: var(--font_blog_title);*/ font-size: 20px; cursor: var(--pointer); } #listMenus .plusle_minun i { font-size: 15px;; } #listMenus .plusle_minun { top: 10px; right: 10px; } #listMenus .ld_menu { margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid var(--grey9); } #listMenus .ld_menu:last-child { border-bottom: none; } #listMenus .ld_menu_ul { display: none; margin: 0 0 10px 0; } #listMenus .ld_menu_ul li { padding: 7px 0; } #listMenus .ld_menu_header:hover, #listMenus .ld_menu_header:focus-visible, #listMenus .ld_menu_ul li:hover, #listMenus .ld_menu_ul li:focus-visible { background: var(--pink30) !important; } #listMenus .ld_menu_check { margin: 0 10px 0 10px; cursor: var(--pointer); } #listMenus .ld_menu_item, #listMenus li { display: block; cursor: var(--pointer); } #ld_empty { display: none; } #showFilters, #clearFilters { margin: 10px 10px 30px 10px; padding: 5px; /*border-bottom: 1px solid var(--greyMain);*/ font-size: 12px; cursor: var(--pointer); } #showFilters:hover, #showFilters:focus-visible, #clearFilters:hover, #clearFilters:focus-visible { color: var(--pink100); } #ld_buttons_cont { width: 100%; text-align: center; } #ld_show_results, #ld_reset { margin: 0 0 0 0; padding: 12px; width: 100%; border: 1px solid var(--black); font-size: 12px; text-transform: uppercase; cursor: var(--pointer); } #ld_show_results { margin: 0 0 20px 0; color: var(--black); background: var(--white); } #ld_reset { color: var(--white); background: var(--black); } #ld_show_results:hover, #ld_show_results:focus-visible { color: var(--white); } #ld_show_results:hover, #ld_show_results:focus-visible, #ld_reset:hover, #ld_reset:focus-visible { /*color: var(--black);*/ background: var(--pink100); border: 1px solid var(--pink10); } #list, .list { white-space: initial; margin: 0 0 80px 0; } .list_scroll { display: none; } #mobile-upsell .list_scroll { display: block; } #mobile-upsell #list, #mobile-upsell .list { white-space: nowrap; } .listData, .item_rating_data { display: none; } .aob_atb_swap_left, .aob_atb_swap_right { display: inline-block; width: 45%; padding: 7px 5px 5px 5px; font-size: 14px; text-align: center; color: var(--black); background: var(--white); border: 1px solid var(--black); cursor: var(--pointer); box-sizing: border-box; } .aob_atb_swap_left:not(.aob_atb_current):hover, .aob_atb_swap_left:not(.aob_atb_current):focus-visible, .aob_atb_swap_right:not(.aob_atb_current):hover, .aob_atb_swap_right:not(.aob_atb_current):focus-visible { background: var(--pink100); } .aob_atb_current { color: var(--white); background: var(--black); } .aob_atb_swap_left { float: left; } .aob_atb_swap_right { float: right; } .item-image-link { display: inline-block; width: 100%; white-space: normal; /*margin: 0 10px 0 0;*/ margin: 0; text-align: center; vertical-align: top; } .item-image-link:last-of-type { margin: 0; } .item-line-img { width: 100%; /*height: auto;*/ height: 100%; object-fit: contain; } .item-line-img.loading:not(.x) { height: 338px; } /*Skeleton Screen animation placeholders .item-line-img { animation-duration: 2s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background-color: #f6f7f8; background: linear-gradient(to right, var(--greye) 8%, var(--greyb) 18%, var(--greye) 33%); background-size: 800px 104px; position: relative; } */ /* .related-items a { vertical-align: bottom; } */ #item-right #quantity select { width: 4em; height: 22px; text-align: center; line-height: 22px; } #share1 { margin: 30px 0 0 0; padding: 0 0 13px 0; font-size: 12px; /*font-family: var(--font_bold);*/ text-transform: uppercase; } .share-link, .share-link-email, .share-link-text { display: inline-block; margin: 5px 4px; vertical-align: middle; font-size: 1.4rem; cursor: var(--pointer); } #nav-share { display: none; } /* Target share-link that doesn't have another share-link before it */ .share-link:not(.share-link ~ .share-link) { margin: 5px 4px 5px 0; } .share-link i { font-size: 24px; } .share-link a { color: var(--black); } .share-link-email a:hover, .share-link-email a:focus-visible, .share-link-text a:hover, .share-link-text a:focus-visible { color: var(--pink100); } .share-link:hover, .share-link:focus-visible { /*background: var(--greyMain);*/ } .share-link img { display: block; } #product-info-description { clear: both; } #main-image { width: 100%; } #product-main-img { width: 100%; height: auto; } .thumbnail { display: inline-block; width: 70px; } .thumbnail-img { width: 100%; height: auto; } .related-items-header, .item-feedback-header, .videos-header { position: relative; border-bottom: 1px solid var(--grey9); margin-bottom: 25px; font-size: 16px; font-family: var(--font_bold); color: var(--black); text-align: center; text-transform: uppercase; } .related-items-header span, .item-feedback-header span, .videos-header span { position: relative; top: 14px; display: inline-block; padding: 0 28px; background: var(--white); } .related-items-header:last-child, .videos-header:last-child { display: none; } #tmp_link { position: fixed; top: -1000px; left: -1000px; } #contPU { display: none; position: fixed; top: -10000px; left: -10000px; background: var(--greye); padding: 10px 20px; min-width: 150px; width: 300px; border: 1px solid var(--pink100); font-size: 12px !important; z-index: 2147483647; } #contPU a { line-height: 1.75; } .aMessage { font-family: var(--font_bold); font-size: larger; } #contALL { max-width: 250px; font-family: var(--font_bold); } #ctmButtons { display: inline-block; width: 100%; text-align: right; } .ctmIcon { margin: 0 0 0 20px; } .ctmWord { display: none; } .ctmBlock { display: initial; } #ctmErr { display: block; line-height: 1; margin: 5px 0 0 0; text-align: left; line-height: 1.5; } .ctmDisabled { color: var(--greya); cursor: auto; } .ctmDisabled:hover, .ctmDisabled:focus-visible { color: var(--greya); } #ctmM { margin: 5px 0 0 0; } #atlwdg-container { z-index: 2147483647; } #exp-date-month.missing, #exp-date-year.missing { } .missing, .missing2 { background: var(--pink30) !important; } .missing { border: 1px solid var(--pink100) !important; } .missing_teal, .missing_teal2 { background: var(--teal40) !important; } .missing_teal { border: 1px solid var(--teal100) !important; } .missing.outerBorder { border-left: 1px solid var(--pink100) !important; border-right: 1px solid var(--pink100) !important; border-top: 1px solid var(--pink30) !important; border-bottom: 1px solid var(--pink30) !important; } .missing.outerBorder:first-of-type { border-top: 1px solid var(--pink100) !important; } .missing.outerBorder:last-of-type { border-bottom: 1px solid var(--pink100) !important; } #Everyday-Zoya { font-weight: bold !important; } .error-message, #fp_err { /*position: relative;*/ margin: 15px 0; font-size: 1rem; text-align: center; /*z-index: 2147483646;*/ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /*word-break: break-all;*/ /*break on character, better for logographic systems*/ word-break: break-word; } .error-message, .err, #fp_err { color: var(--teal100); } .afw_error_message { margin: 0; padding: 0 25px; font-size: 14px; } #qsb_msg { position: absolute; top: 5px; width: 100%; text-align: center; font-size: 14px; } #fp_err { margin: 0 0 10px 0; } #shiperr { /*font-size: 14px;*/ text-align: left; } .warn { color: var(--pink100); font-family: var(--font_bold); } #itemExcluded { display: none; margin: -5px 0 20px 0; font-style: italic; line-height: 1.3; } .success-message { margin: 15px 0; color: #009900; text-align: center; } img { border: none; } #ipadfix { display: none; } #ipadfix { display: none; } input[type=radio], input[type=checkbox] { accent-color: var(--pink100); } .centeredDiv { left: 50% !important; transform: translate(-50%, 0) !important; } .textDimensionCalculation { position: absolute; display: inline-block; margin: 0; padding: 0; visibility: hidden; height: auto; width: auto; white-space: nowrap; } /* aob blog css */ .aob_blog_title, .aob_blog_title_cent, .aobBlogThumb_title, #aob_blog_title1 a { /*font-family: 'xxxxxxx';*/ font-family: var(--font_blog_title); font-weight: normal; line-height: 1.3; } #aob_blog_items { width: 95%; margin: 30px auto 0 auto; } #aob_blog_items_title { position: relative; margin: 0 auto 40px auto; width: 90%; text-align: center; text-transform: uppercase; font-weight: normal; font-size: 23px; letter-spacing: 2.4px; border-bottom: 1px solid var(--grey7); } #aob_blog_items_title span { position: relative; top: 14px; padding: 0 20px; background: var(--white); } #aob_blog_items_data { /* padding: 1px 0 0 0; white-space: nowrap; overflow-x: visible; overflow-y: hidden; */ } #aob_blog_title1 a { color: var(--grey7) !important; } #aob_blog_title1 a:hover, #aob_blog_title1 a:focus-visible { color: var(--pink100) !important; } .aob_blog_title_cent { font-size: 50px; } .aob_blog_title { font-size: 32px; } .aob_blog_title, .aob_blog_title_cent, .aobBlogThumb_title { margin: 30px 0 10px 0; } .aob_blog_title_cent { text-align: center; } #aob_blog_text { position: relative; } #aob_blog_text, .aob_blog_text, .aob_blog_text2 { font-family: 'Trebuchet MS', 'Arial'; font-weight: normal; line-height: 1.5; letter-spacing: 0.8px; word-spacing: 4px; } .aob_blog_text img { max-width: 100%; height: auto; } .aob_blog_menu { position: relative; display: inline-block; } .aob_blog_menu, .aob_blog_menu_current { position: relative; display: inline-block; margin: 0 20px; padding: 0 0 10px 0; font-family: var(--font_bold); text-align: left; vertical-align: top; cursor: var(--pointer); } .aob_blog_menu:first-child { margin: 0 20px 0 0; } .aob_blog_menu:last-child { margin: 0 0 0 20px; } .aob_blog_menu .bmtitle, .aob_blog_menu_current .bmtitle { font-size: 13px; font-weight: normal; letter-spacing: 1.4px; text-transform: uppercase; color: var(--black); } .aob_blog_menu_current .bmtitle { color: var(--pink50); font-family: var(--font_bold); font-style: italic; cursor: default; } .aob_blog_menu .bmtitle:hover, .aob_blog_menu .bmtitle:focus-visible, .aob_blog_menu_current .bmtitle:hover, .aob_blog_menu_current .bmtitle:focus-visible { /*color: var(--pink100);*/ } #aob_blog_menu_wrapper { position: relative; text-align: left; margin: 20px auto 70px auto; width: 100%; overflow-y: visible; z-index: 2147483617; } #aob_blog_menu_cont { position: relative; /*text-align: center;*/ /*margin: 20px auto 70px auto;*/ /*width: 100%;*/ overflow-x: auto; /*overflow-y: visible;*/ white-space: nowrap; /*z-index: 2147483617;*/ /*padding-bottom: 150px;*/ /*margin-bottom: -150px;*/ } .aob_blog_menu i, .breadcrumbSep { top: -2px; } .aob_blog_menu_item_cont, #aob_blog_menu_popup { display: none; position: absolute; top: 25px; left: -20px; width: 320px; min-width: 200px; padding: 10px 20px; background: var(--white); border: 1px solid var(--greyMain); text-align: left; cursor: default; z-index: 1000; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /*word-break: break-all;*/ /*break on character, better for logographic systems*/ word-break: break-word; z-index: 2147483618; } .aob_blog_menu_item, .aob_blog_menu_item_current { display: block; margin: 0 0 10px 0; color: var(--black); font-size: 14px; font-weight: normal; letter-spacing: 1.4px; white-space: nowrap; overflow: hidden; } .aob_blog_menu_item { cursor: var(--pointer); } .aob_blog_menu_item_current { color: var(--pink50); font-family: var(--font_bold); font-style: italic; cursor: default; } .aob_blog_menu_item:hover, .aob_blog_menu_item:focus-visible { color: var(--pink100); } .aob_blog_menu_item_current:hover, .aob_blog_menu_item_current:focus-visible { color: var(--pink50); } .aob_blog_menu_item:first-child, .aob_blog_menu_item_current:first-child { /*margin: 7px 0 5px 0;*/ } .aob_blog_menu_item:last-child, .aob_blog_menu_item_current:last-child { margin: 0; } .aob_blog_more { color: var(--pink100); font-family: var(--font_bold); font-style: italic; } .aob_blog_more:hover, .aob_blog_more:focus-visible { color: var(--black); } @media only screen and (max-width: 749px) { .aob_blog_menu { /*width: 90%;*/ margin: 0 10px; } .aob_blog_menu:first-child { margin: 0 10px 0 0; } .aob_blog_menu:last-child { margin: 0 0 0 10px; } .aob_blog_menu_item_cont { position: relative; top: 0; left: 0; margin: 5px 0 0 0; width: 100%; } } #aob_blog_articles { /*float: left;*/ width: 100%; min-height: 500px; /*padding: 0 20px 0 0;*/ } #aob_blog_articles p { margin: 0 0 20px 0; } .aobBlogThumb { display: none; position: relative; margin: 0 13px 26px 13px; padding: 0 0 10px 0; /*width: calc(33.33% - 10px);*/ /*width: 100%;*/ height: 510px; min-width: 285px; max-width: 330px; border: 1px solid var(--greyMain); vertical-align: top; overflow: hidden; } .aobBlogCat_info { /*position: absolute;*/ /*bottom: 0;*/ padding: 0 10px; } .aobBlogThumb_link { color: var(--black); font-weight: normal; } .aobBlogThumb_img_link:hover ~ .aobBlogThumb_link, aobBlogThumb_img_link:focus-visible ~ .aobBlogThumb_link,.aobBlogThumb_link:hover, .aobBlogThumb_link:focus-visible { color: var(--pink100); } .aobBlogCat_link { display: block; margin: 15px 0 10px 0; padding: 0 10px; color: var(--greya); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; } .aobBlogCat_link:hover, .aobBlogCat_link:focus-visible { color: var(--black); } .aobBlogCat_link_art { color: var(--black); font-weight: normal; } .aobBlogCat_link_art:hover, .aobBlogCat_link_art:focus-visible { color: var(--pink100); } .aobBlogDetSpace { margin: 0 0 10px 0; } .aobBlogThumb_more { margin: 45px 0 0 0; } .aobBlogThumb_title { margin: 0 0 20px 0; /*height: 189px;*/ /* size * 6 lines */ font-size: 27px; font-weight: normal; line-height: 1.2; } .aobBlogThumb_date, .aobBlogThumb_author { color: var(--greya); font-size: 14px; } .aobBlogThumb_author:before { content: 'by '; } .aobBlogThumb_img { display: block; margin: 0 auto 0 auto; width: auto; max-width: 100%; height: auto; max-height: 282px; object-fit: contain; } #aob_blog_side { /*float: right;*/ /*width: 100%;*/ width: 100%; min-width: 320px; max-width: 840px; /*margin: 0 20px 0 0;*/ margin: 0 auto 30px auto; padding: 0 10px; text-align: center; /* position: absolute; top: 0; right: 10px; width: 200px; padding: 10px; box-sizing: border-box; */ } #aob_blog_side .aob_blog_title { margin: 0 0 10px 0; } @media only screen and (max-width: 749px) { #aob_blog_articles { width: 100%; } #aob_blog_side { width: 100%; margin: 0 0 30px 0; } } /*#aob_blog_breadcrumbs, #aob_blog_breadcrumb_current*/ #aob_blog_search, #aob_blog_breadcrumbs, #aob_blog_menu_wrapper { position: relative; width: 100%; max-width: 1140px; } #aob_blog_search, #aob_blog_breadcrumbs { margin: 0 auto; } #aob_blog_search { /*min-width: 320px;*/ max-width: 840px; } #aob_blog_breadcrumbs { /*min-width: 320px;*/ } #aob_blog_breadcrumbs a, #aob_blog_breadcrumb_current { font-size: 12px; font-style: italic; font-weight: normal; color: var(--black); } #aob_blog_breadcrumbs a:hover, #aob_blog_breadcrumbs a:focus-visible { color: var(--pink100); } #aob_blog_breadcrumb_current { font-family: var(--font_bold); color: var(--pink50); } .breadcrumbSep { margin: 0 10px; font-size: 12px; } #aob_blog_searchi { position: absolute; top: 36px; right: 10px; z-index: 100; } #aob_blog_search_box { width: 100%; margin: 20px 0; padding: 15px; border: 1px solid var(--greyMain); z-index: 2; } /* #aob_blog_search_box:placeholder-shown { background: var(--pink10); border: 1px solid var(--pink100); } */ .blog_main_img, .blog_desc_img, .blog_desc_img2 { display: block; margin: 0 auto; width: 100%; /* min-width: 320px; max-width: 100%; */ } .blog_main_img { padding: 0 0 30px 0; } .blog_desc_img, .blog_desc_img2 { padding: 70px 0 15px 0; z-index: 10; } .blog_desc_img_tag { display: none; /*top: -13px;*/ padding: 0 0 20px 0; font-size: 12px; font-style: italic; text-align: center; z-index: 20; } .aob_blog_date, .aob_blog_category { display: inline-block; } .aob_blog_seph { padding: 0 10px; } .aob_blog_sepv { margin: 15px 0 0 0; } /* .aob_blog_sepv li:before { content: "•"; margin: 0 7px 0 10px; } */ /* font awesome example */ /* .aob_blog_sepv li:before { content: "\f111"; margin: 0 7px 0 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 4px; vertical-align: middle; padding: 0 0 4px 0; } */ #aob_blog_sitemap { } /*END aob blog css */ #loadcsv { position: fixed; /*top: 125px;*/ top: 10px; left: 3%; z-index: 2147483647; /*width: 125px;*/ } #loadcsv:-webkit-file-upload-button { visibility: hidden; } #loadcsv:before { content: 'Upload CSV file'; display: inline-block; background: #fabbd7; border: 1px solid #f68ebc; padding: 5px 10px; outline: none; white-space: nowrap; -webkit-user-select: none; font-family: var(--font_bold); font-size: 10pt; cursor: var(--pointer); } #loadcsv:hover:before { background: #ccc; border: 1px solid #999; } #loadcsv::before { } @media only screen and (max-width: 555px) { #loadcsv { margin: 10px 0 0 30px; } } /************************************************************************/ /* header overrides*/ /************************************************************************/ /************************************************************************/ /* END header overrides*/ /************************************************************************/ body.flockler-embed-popup-open { overflow: auto !important; } /* combining doesn't work */ /* selected text color */ *::-moz-selection { background: var(--teal100); color: var(--white); } /* Gecko Browsers */ ::-moz-selection { background: var(--teal100); color: var(--white); text-shadow: none; } :-moz-selection { background: var(--teal100); color: var(--white); text-shadow: none; } *::selection { background: var(--teal100); color: var(--white); } /* WebKit/Blink Browsers */ ::selection { background: var(--teal100); color: var(--white); text-shadow: none; } :selection { background: var(--teal100); color: var(--white); text-shadow: none; } /* input placeholder text format */ ::-webkit-input-placeholder { font-size: 12px; text-transform: uppercase; color: var(--grey9); } /* WebKit, Blink, Edge */ :-moz-placeholder { font-size: 12px; text-transform: uppercase; color: var(--grey9); opacity: 1; } /* Firefox 4 to 18 */ ::-moz-placeholder { font-size: 12px; text-transform: uppercase; color: var(--grey9); opacity: 1; } /* Firefox 19+ */ :-ms-input-placeholder { font-size: 12px; text-transform: uppercase; color: var(--grey9); } /* Internet Explorer 10-11 */ ::-ms-input-placeholder { font-size: 12px; text-transform: uppercase; color: var(--grey9); } /* Edge */ ::placeholder { font-size: 12px; text-transform: uppercase; color: var(--grey9); } /* Most modern browsers support this now. */ /* input placeholder formatting for empty input and "not" empty input :placeholder-shown { } ::placeholder-shown { } :not(:placeholder-shown) { } ::not(:placeholder-shown) { } */ :disabled::-webkit-input-placeholder { color: var(--white); } /* WebKit, Blink, Edge */ :disabled:-moz-placeholder { color: var(--white); } /* Firefox 4 to 18 */ :disabled::-moz-placeholder { color: var(--white); } /* Firefox 19+ */ :disabled:-ms-input-placeholder { color: var(--white);; } /* Internet Explorer 10-11 */ :disabled::-ms-input-placeholder { color: var(--white); } /* Edge */ :disabled::placeholder { color: var(--white); } /* Most modern browsers support this now. */ /* progress tag bar/value */ ::-moz-progress-bar { background-color: var(--pink30); } ::-moz-progress-value { background-color: #00f; } ::-webkit-progress-bar { background-color: var(--pink30); } ::-webkit-progress-value { background-color: #00f; } ::-khtml-progress-bar { background-color: var(--pink30); } ::-khtml-progress-value { background-color: #00f; } /* keep at bottom */ @media screen and (-webkit-min-device-pixel-ratio:0) { select, textarea, input { font-size: 14px; } } @media not all and (min-resolution:.001dpcm) { .safari_only { font-size: 12px; } } @media only screen and (max-width: 480px) { /*#brand_logo_main { display: block; }*/ #shopping-cart-promo #promo-remove-button { line-height: 1.1; } #item-feedback { width: 100%; padding: 0; } } /*apple, ipad, ipod, mac*/ @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"]{ font-size: 16px; } #ipadfix { display: block; } /*-ms-zoom: .8;*/ /* doesn't work input[type="text"]:focus-visible, input[type="password"]:focus-visible, input[type="search"]:focus-visible, textarea:focus-visible, select:focus-visible { font-size: 16px; } */ } @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */ } /*Safari (from 6.1 to 10.0)*/ @media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) { @media { .safari6 { } } } /*Safari (10.1+)*/ @media not all and (min-resolution:.001dpcm) { @media { .safari10 { } } } /*** Styles added to fix the issue with zoom in on iphone ** /* iPhone < 5: */ @media screen and (device-aspect-ratio: 2/3) { } /* iPhone 5, 5C, 5S, iPod Touch 5g */ @media screen and (device-aspect-ratio: 40/71) { } /* iPhone 6, iPhone 6s, iPhone 7 portrait/landscape */ @media screen and (device-aspect-ratio: 375/667) { } /* iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus portrait/landscape */ @media screen and (device-aspect-ratio: 9/16) { } #nav_items i, .closeBox i, #nav-3 i, #quickSearchBar i, #wl_panel i, #buy_buttons i, #aobInfoData_close i, #toggleMenu i, .cart-remove-link i, .cart-wishlist-link i, .cart-wishlist i, #compareItems i, #afw_list_title i, #afw_list_back i, #redeem_title i, #focus-visible i, #available_title i, #afw_redeem_back i, #afw_coupon_back i, #afw_view_coupons i, #afw_activity_title i, #afw_activity_back i, #afw_faq_title i, #afw_faq_back i, #write-review-close i, #wishlist-close i, #mcX i, .panel-close i, .panel-close2 i, #checkout-payment-close i, .order_buttons i, #minibag_gotobag i, #showHiddenCont i, .wl_row i, .redeem-button i, .redeem-button2 i, .redeem-button3 i, #aob_blog_search i, .alertTitle i, .cs1Arrow i, #minibag_hide_view i.gms, .alertTitle i, #showFilters i, #clearFilters i { /*gms new*/ font-size: 18px !important; } #aob_blog_menu_cont i, .product-description-tab i, #for_share-list i { font-size: 14px; } .alertTitle i { top: 1px; } .aob_blog_menu i { top: -2px; } .rating_stars i, .rating_stars_row i { display: inline; top: -2px; font-size: 12px; letter-spacing: .05rem; } #wish_main i { /*gms new*/ font-size: 30px !important; } .afw_redeem_icon i { /*gms new*/ font-size: 23px !important; } #aobInfoData_copy i { /*gms new*/ top: 3px; font-weight: 'bold'; font-size: 25px; } #main-item-add i { margin: -10px 0 0 0; } #search_copy i { top: -3px; } /*combined common seletors*/ .br_5, #exp-date-month.missing, #exp-date-year.missing, #loadcsv:before, .shopping-cart-checkout, select { -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .br_7 { -webkit-border-radius: 7px; -khtml-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; } .br_10, #afw_login-create-button, #aobCert, #goBack, .info, .itemContainer a[alt]:after, .skip_nav, .tab_highlight { -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .br_20, #tSwitcher42, .afw_dis { -webkit-border-radius: 20px; -khtml-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } /* br_50p nsel*/ .br_50p, #btnQuickFinder, #feedback, #tutorials, .spCallout { -webkit-border-radius: 50%; -khtml-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .nsel, #goBack, .black-button a, .red-button a, .gray-button a, .white-button a, #afw_login-create-button, #afw_more_text, #btnQuickFinder, #feedback, #feedback2, #listMenus li, #loadcsv::before, #menu_shop .nav-item, .add-list-submitI, .addWL, .aob_blog_menu_current, .aob_blog_menu_item_current, .compCheck, .cs1_h2, .disabled, .side_menu_item_noLink { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /******************************************************/ /* NEW styles */ /******************************************************/ /* CSS Variables */ :root { --container-width: 100%; --container-max-width: 1550px; --sidebar-width: 120px; --mobile-bp: 720px; --header-height: 121px; --left-width: 60%; --right-width: 40%; --hero-img-width: auto; --hero-img-width: 800px; --sidebar_max_height: 725px; } /* Main Container */ #content_container { width: var(--container-width); max-width: var(--container-max-width); margin: 0 auto; display: flex; gap: 20px; align-items: flex-start; } /* Left Column */ #item_left { width: var(--left-width); display: flex; position: relative; } #item_left.sticky { position: sticky; top: var(--header-height); } /* Sidebar */ #thumb_sidebar { width: var(--sidebar-width); flex-shrink: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding-right: 10px; /*max-height: 80vh;*/ max-height: var(--sidebar_max_height); } /* Hero Section */ #hero { flex: 1; width: calc(100% - var(--sidebar-width)); display: flex; justify-content: center; align-items: flex-start; min-height: 400px; } #hero_image { max-width: 100%; max-height: 100%; width: var(--hero-img-width); height: auto; display: block; } #hero_image.loading { height: 800px; } /* Sidebar Images and Videos */ .sidebar_img, .sidebar_vid { width: 100%; height: auto; cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease; border: 2px solid transparent; border-radius: 4px; } .sidebar_img, .sidebar_vid { width: 100%; height: auto; } .sidebar_img:hover, .sidebar_vid:hover { opacity: 0.8; border-color: var(--pink50); } .sidebar_img.active, .sidebar_vid.active { border-color: var(--pink50); } .sidebar_vid { aspect-ratio: 16/9; background: #f0f0f0; display: flex; align-items: center; justify-content: center; position: relative; font-weight: bold; color: #666; } .sidebar_vid::after { content: 'PLAY'; font-size: 12px; font-weight: bold; } /* Right Column */ #item_right { width: var(--right-width); min-height: 200px; padding: 0 10px; } /* Desktop sticky */ @media (min-width: 721px) { #item_left { position: sticky; top: var(--header-height); align-self: flex-start; /* prevents flex stretch that can cause jumpiness */ } } /* Mobile Styles */ @media (max-width: 720px) { #content_container { flex-direction: column; gap: 15px; width: 100%; } #item_left { position: static; width: 100%; flex-direction: column; } #item_left.sticky { position: static; } #hero { width: 100%; order: 1; min-height: 300px; } #thumb_sidebar { width: 100%; order: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 10px 0; gap: 15px; max-height: none; } .sidebar_img, .sidebar_vid { flex-shrink: 0; object-fit: cover; } .sidebar_img { width: 120px; height: auto; } .sidebar_vid { width: auto; height: 98px; } #item_right { width: 100%; padding: 0; } } .list_item_thumbnail { position: relative; /*outline: 1px solid var(--greyMain);*/ margin: 0 0 20px 0; font-size: 0; } .list_item_thumbnail .list_item_link { display: inline-block; margin: 0 0 0 40px; /*width: calc(100% - 25px);*/ } .list_item_add_cont { position: absolute; display: inline-block; top: 50%; /*vertical-align: top;*/ transform: translateY(-50%); } .list_item_image, .list_item_list_title { display: inline-block; vertical-align: top; } .list_item_link { position: relative; display: block; } .list_item_image { width: 25%; } .list_item_image img { min-width: 115px; /*min-width: 115px;*/ } .list_item_list_title { width: calc(75% - 10px); padding: 0 0 0 10px; font-size: 12px; line-height: 1.4; } .list_item_name { font-size: 14px; font-family: var(--font_bold); } .list_item_price { margin: 10px 0 0 0; } .list_item_price, .list_item_price > span { font-family: var(--font_bold); } #list_item_add { margin: 20px 0 0 0; padding: 10px 0 0 0; max-width: unset; color: var(--white); background: var(--black); text-align: center; cursor: var(--pointer); } #list_item_add:hover, #list_item_add:focus-visible { color: var(--pink100); background: var(--greyMain); } #list_item_add i { font-size: 20px; } #list_item_add_data { font-family: var(--font_bold); } #list_items_on_off { font-size: 20px; } #list_items_on_off_text { font-size: 12px; } /******************************************************/ /* Notes */ /******************************************************/ /*background: url('') / #BGCOLOR no-repeat*/ /*background: url('') color [repeat, no-repeat] postion-[vertical and horizontal] / size-[cover, contain, 100%, 800px, or 200px 100px (width and height)]*/ /* image background, fixed non scroll OBJ { background-color: var(--white); background-image: url(''); background-repeat: no-repeat; background-position: left top; background-size: cover; background-attachment: fixed; OR background: url('') color [repeat, no-repeat] postion-[vertical and horizontal] / size-[cover, contain, 100%, 800px, or (width and height)] } OBJ { background-size: px, %, cover Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges contain Resize the background image to make sure the image is fully visible col, image, repeat, posX posY/sizeX sizeY, attach var(--white) url('') no-repeat top center/cover fixed; } */ /* :root { --a: 100px; } div { --a: 100px; font-size: calc(var(--a) * .3); background: var(--greyMain); } */ /* sizing min(): selects the smallest (most negative) value from a list of comma-separated expressions max(): selects the largest (most positive) value from a list of comma-separated expressions clamp(, , ): clamps a value between an upper and lower bound, based on a set ideal value center on screen keeping width between 360 and 420px left: calc(50% - (clamp(360px, 50%, 420px) / 2)); width: clamp(360px, 50%, 420px); 100% of viewport height - 40px height: calc(100vh - 40px); */ /*-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));*/ /*-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);*/ /*mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));*/ /*mask-image: linear-gradient(to bottom, black 0%, transparent 100%);*/ /*background: -moz-linear-gradient(top, rgba(137,255,241,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,255,241,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ /*background: -webkit-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ /*background: -o-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ /*background: -ms-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ /*background: linear-gradient(to bottom, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='var(--black)000',GradientType=0 ); /* IE6-9 */ /******************************************************/ /* select class name with style containing "STRING" */ /******************************************************/ /*.CLASSNAME[style*="background-color: rgb(0, 169, 157)"]*/ /*.CLASSNAME[style*="background-color: var(--white)"]*/ /*.CLASSNAME[style*="background-color: inherit"]*/