.row { margin-right: -15px; margin-left: -15px } .row:before,.row:after { display: table; content: " " } .row:after { clear: both } .col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px } @media (min-width: 992px) { .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float:left } .col-md-1 { width: 8.3333333333% } .col-md-2 { width: 16.6666666667% } .col-md-3 { width: 25% } .col-md-4 { width: 33.3333333333% } .col-md-5 { width: 41.6666666667% } .col-md-6 { width: 50% } .col-md-7 { width: 58.3333333333% } .col-md-8 { width: 66.6666666667% } .col-md-9 { width: 75% } .col-md-10 { width: 83.3333333333% } .col-md-11 { width: 91.6666666667% } .col-md-12 { width: 100% } .col-md-pull-0 { right: auto } .col-md-pull-1 { right: 8.3333333333% } .col-md-pull-2 { right: 16.6666666667% } .col-md-pull-3 { right: 25% } .col-md-pull-4 { right: 33.3333333333% } .col-md-pull-5 { right: 41.6666666667% } .col-md-pull-6 { right: 50% } .col-md-pull-7 { right: 58.3333333333% } .col-md-pull-8 { right: 66.6666666667% } .col-md-pull-9 { right: 75% } .col-md-pull-10 { right: 83.3333333333% } .col-md-pull-11 { right: 91.6666666667% } .col-md-pull-12 { right: 100% } .col-md-push-0 { left: auto } .col-md-push-1 { left: 8.3333333333% } .col-md-push-2 { left: 16.6666666667% } .col-md-push-3 { left: 25% } .col-md-push-4 { left: 33.3333333333% } .col-md-push-5 { left: 41.6666666667% } .col-md-push-6 { left: 50% } .col-md-push-7 { left: 58.3333333333% } .col-md-push-8 { left: 66.6666666667% } .col-md-push-9 { left: 75% } .col-md-push-10 { left: 83.3333333333% } .col-md-push-11 { left: 91.6666666667% } .col-md-push-12 { left: 100% } .col-md-offset-0 { margin-left: 0% } .col-md-offset-1 { margin-left: 8.3333333333% } .col-md-offset-2 { margin-left: 16.6666666667% } .col-md-offset-3 { margin-left: 25% } .col-md-offset-4 { margin-left: 33.3333333333% } .col-md-offset-5 { margin-left: 41.6666666667% } .col-md-offset-6 { margin-left: 50% } .col-md-offset-7 { margin-left: 58.3333333333% } .col-md-offset-8 { margin-left: 66.6666666667% } .col-md-offset-9 { margin-left: 75% } .col-md-offset-10 { margin-left: 83.3333333333% } .col-md-offset-11 { margin-left: 91.6666666667% } .col-md-offset-12 { margin-left: 100% } } table { background-color: transparent } label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700 } input[type="radio"],input[type="checkbox"] { margin: 4px 0 0; margin-top: 1px \9; line-height: normal } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0 } .modal-content { position: relative; background-color: #fff; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; box-shadow: 0 3px 9px rgba(0,0,0,0.5); outline: 0 } @media (min-width: 768px) { .modal-dialog { width:600px; margin: 30px auto } .modal-content { box-shadow: 0 5px 15px rgba(0,0,0,0.5) } .modal-sm { width: 300px } } @-webkit-keyframes expand-from-0 { 0% { max-height: 0; visibility: hidden } 100% { max-height: 100%; visibility: visible } } @keyframes expand-from-0 { 0% { max-height: 0; visibility: hidden } 100% { max-height: 100%; visibility: visible } } @-webkit-keyframes fade-in-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); visibility: hidden } 100% { opacity: 1; -webkit-transform: none; transform: none; visibility: visible } } @keyframes fade-in-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); visibility: hidden } 100% { opacity: 1; -webkit-transform: none; transform: none; visibility: visible } } @-webkit-keyframes fade-in-up { 0% { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); visibility: hidden } 100% { opacity: 1; -webkit-transform: none; transform: none; visibility: visible } } @keyframes fade-in-up { 0% { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); visibility: hidden } 100% { opacity: 1; -webkit-transform: none; transform: none; visibility: visible } } @-webkit-keyframes fade-out-down { 0% { opacity: 1; -webkit-transform: none; transform: none; visibility: visible } 100% { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); visibility: hidden } } @keyframes fade-out-down { 0% { opacity: 1; -webkit-transform: none; transform: none; visibility: visible } 100% { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); visibility: hidden } } @-webkit-keyframes animated-border-gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes animated-border-gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-webkit-keyframes flip-up { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 9% { -webkit-transform: translateY(0); transform: translateY(0) } 10% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y))); transform: translateY(calc(-1 * var(--slide-up-y))) } 19% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y))); transform: translateY(calc(-1 * var(--slide-up-y))) } 20% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 2)); transform: translateY(calc(-1 * var(--slide-up-y) * 2)) } 29% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 2)); transform: translateY(calc(-1 * var(--slide-up-y) * 2)) } 30% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 3)); transform: translateY(calc(-1 * var(--slide-up-y) * 3)) } 39% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 3)); transform: translateY(calc(-1 * var(--slide-up-y) * 3)) } 40% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 4)); transform: translateY(calc(-1 * var(--slide-up-y) * 4)) } 49% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 4)); transform: translateY(calc(-1 * var(--slide-up-y) * 4)) } 50% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 5)); transform: translateY(calc(-1 * var(--slide-up-y) * 5)) } 59% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 5)); transform: translateY(calc(-1 * var(--slide-up-y) * 5)) } 60% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 6)); transform: translateY(calc(-1 * var(--slide-up-y) * 6)) } 69% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 6)); transform: translateY(calc(-1 * var(--slide-up-y) * 6)) } 70% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 7)); transform: translateY(calc(-1 * var(--slide-up-y) * 7)) } 79% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 7)); transform: translateY(calc(-1 * var(--slide-up-y) * 7)) } 80% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 8)); transform: translateY(calc(-1 * var(--slide-up-y) * 8)) } 89% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 8)); transform: translateY(calc(-1 * var(--slide-up-y) * 8)) } 90% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 9)); transform: translateY(calc(-1 * var(--slide-up-y) * 9)) } 99% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 9)); transform: translateY(calc(-1 * var(--slide-up-y) * 9)) } 100% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 10)); transform: translateY(calc(-1 * var(--slide-up-y) * 10)) } } @keyframes flip-up { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 9% { -webkit-transform: translateY(0); transform: translateY(0) } 10% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y))); transform: translateY(calc(-1 * var(--slide-up-y))) } 19% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y))); transform: translateY(calc(-1 * var(--slide-up-y))) } 20% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 2)); transform: translateY(calc(-1 * var(--slide-up-y) * 2)) } 29% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 2)); transform: translateY(calc(-1 * var(--slide-up-y) * 2)) } 30% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 3)); transform: translateY(calc(-1 * var(--slide-up-y) * 3)) } 39% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 3)); transform: translateY(calc(-1 * var(--slide-up-y) * 3)) } 40% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 4)); transform: translateY(calc(-1 * var(--slide-up-y) * 4)) } 49% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 4)); transform: translateY(calc(-1 * var(--slide-up-y) * 4)) } 50% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 5)); transform: translateY(calc(-1 * var(--slide-up-y) * 5)) } 59% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 5)); transform: translateY(calc(-1 * var(--slide-up-y) * 5)) } 60% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 6)); transform: translateY(calc(-1 * var(--slide-up-y) * 6)) } 69% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 6)); transform: translateY(calc(-1 * var(--slide-up-y) * 6)) } 70% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 7)); transform: translateY(calc(-1 * var(--slide-up-y) * 7)) } 79% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 7)); transform: translateY(calc(-1 * var(--slide-up-y) * 7)) } 80% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 8)); transform: translateY(calc(-1 * var(--slide-up-y) * 8)) } 89% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 8)); transform: translateY(calc(-1 * var(--slide-up-y) * 8)) } 90% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 9)); transform: translateY(calc(-1 * var(--slide-up-y) * 9)) } 99% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 9)); transform: translateY(calc(-1 * var(--slide-up-y) * 9)) } 100% { -webkit-transform: translateY(calc(-1 * var(--slide-up-y) * 10)); transform: translateY(calc(-1 * var(--slide-up-y) * 10)) } } @-webkit-keyframes wobble { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 25% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 75% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes wobble { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 25% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 75% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @font-face { font-family: 'Roobert-Medium'; src: url(https://assets.teepublic.com/assets/Roobert-Medium-88ba78029f73fa9f18e1e3c31c1f076acdc49223af70a78b2ea4bdbab8168283.woff2); font-weight: 500; font-display: swap } @font-face { font-family: 'Roobert-SemiBold'; src: url(https://assets.teepublic.com/assets/Roobert-SemiBold-9d9c1ae0fc78f67d82c4fc43987857f5b897d29b903701d1e97c2e207311d636.woff2); font-weight: 600; font-display: swap } @font-face { font-family: 'Roobert-Bold'; src: url(https://assets.teepublic.com/assets/Roobert-Bold-e95979b74ebe06c1851ece294f8f7e9e6d3ad0d817d1968dcbfb26373f0b4de5.woff2); font-weight: 700; font-display: swap } @font-face { font-family: 'SharpGrotesk-Bold'; src: url(https://assets.teepublic.com/assets/SharpGroteskBold-f0bacf6ef6410646205690dca3bc65f5bb2d31b9417a358ad9c07237a310d196.woff2); font-weight: 700; font-display: swap } @font-face { font-family: 'Calibre'; src: url(https://assets.teepublic.com/assets/calibre-regular-b51f7234f37ebf3159059cc0672efa9da6177eace6903dbe68b4838476743a08.woff2) format("woff2"); font-weight: 400; font-style: normal } @font-face { font-family: 'Calibre'; src: url(https://assets.teepublic.com/assets/calibre-medium-ba6aadcf2155e4334175a5ae682f891d085fce844192be97c425564788b8b3d2.woff2) format("woff2"); font-weight: 500; font-style: normal } @font-face { font-family: 'Calibre'; src: url(https://assets.teepublic.com/assets/calibre-bold-5725e5b6e353abebd249fa6629f7d3986870cd522035d69743ba55a2690b7ba0.woff2) format("woff2"); font-weight: 700; font-style: normal } @font-face { font-family: 'Nib Pro'; src: url(https://assets.teepublic.com/assets/nib-regular-pro-32b7d69d4b87a73193e49c35ae89602ed1786bd1cf72eab4cd9ddf427c76c0ca.woff2) format("woff2"),url(https://assets.teepublic.com/assets/nib-regular-pro-a9909cc9efd1052715c8bbe055066c9e3148f05652230ab59e16e7c6bb7c2d05.woff) format("woff"); font-weight: 400; font-style: normal } :root,[data-theme="default"] { --font-family-primary: Roobert-Medium, Helvetica, sans-serif; --font-family-primary-semibold: Roobert-SemiBold, Helvetica, sans-serif; --font-family-primary-bold: Roobert-Bold, Helvetica, sans-serif; --font-family-display: SharpGrotesk-Bold, Arial Black, Helvetica, sans-serif; --font-family-design-guide: 'Courier New'; --font-size-small-100: 1.1rem; --font-size-small-200: 1.2rem; --font-size-small-300: 1.4rem; --font-size-small-400: 1.6rem; --font-size-medium-100: 1.8rem; --font-size-medium-200: 2rem; --font-size-medium-300: 2.4rem; --font-size-medium-400: 2.8rem; --font-size-large-100: 3.2rem; --font-size-large-200: 3.6rem; --font-size-large-300: 4rem; --font-size-large-400: 4.4rem; --font-size-xlarge-100: 4.8rem; --font-size-xlarge-200: 5.2rem; --font-size-xlarge-300: 5.6rem; --font-size-xlarge-400: 6.4rem } :root,[data-theme="default"] { --color-danger-100: #FFF0EB; --color-danger-200: #FED2C7; --color-danger-300: #FEA395; --color-danger-400: #FD5A4E; --color-danger-500: #DF2A2A; --color-danger-600: #BB1B25; --color-danger-700: #931526; --color-danger-800: #5D0E1E; --color-danger-900: #3A0916; --color-neutral-100: #F4F4F5; --color-neutral-200: #E9E9EC; --color-neutral-300: #D7D7DB; --color-neutral-400: #B9B9C1; --color-neutral-500: #93939F; --color-neutral-600: #71717F; --color-neutral-700: #49495A; --color-neutral-800: #2B2B3B; --color-neutral-900: #151523; --color-neutral-500-a60: rgba(147, 147, 159, 0.6); --color-neutral-800-a20: rgba(43, 43, 59, 0.2); --color-neutral-800-a40: rgba(43, 43, 59, 0.4); --color-neutral-800-a60: rgba(43, 43, 59, 0.6); --color-neutral-800-a80: rgba(43, 43, 59, 0.8); --color-neutral-900-a04: rgba(21, 21, 35, 0.04); --color-neutral-900-a10: rgba(21, 21, 35, 0.1); --color-neutral-900-a20: rgba(21, 21, 35, 0.2); --color-neutral-900-a40: rgba(21, 21, 35, 0.4); --color-neutral-900-a50: rgba(21, 21, 35, 0.5); --color-neutral-900-a60: rgba(21, 21, 35, 0.6); --color-neutral-900-a70: rgba(21, 21, 35, 0.7); --color-neutral-900-a80: rgba(21, 21, 35, 0.8); --color-neutral-900-a90: rgba(21, 21, 35, 0.9); --color-primary-100: #F1F3FE; --color-primary-200: #D0D6FB; --color-primary-300: #99A7F5; --color-primary-400: #6C7EE4; --color-primary-500: #4E64DF; --color-primary-600: #374ECD; --color-primary-700: #2C30A5; --color-primary-800: #212478; --color-primary-900: #181A53; --color-primary-500-a10: rgba(78, 100, 223, 0.1); --color-primary-500-a25: rgba(78, 100, 223, 0.25); --color-primary-500-a70: rgba(78, 100, 223, 0.7); --color-success-100: #ECFEEC; --color-success-200: #D3FDD6; --color-success-300: #A3FAAF; --color-success-400: #63EE7F; --color-success-500: #25D454; --color-success-600: #1DB44F; --color-success-700: #178C46; --color-success-800: #0E5831; --color-success-900: #093520; --color-success-500-a10: rgba(37, 212, 84, 0.1); --color-warning-100: #FFFEEB; --color-warning-200: #FFF8C7; --color-warning-300: #FEE994; --color-warning-400: #FED35D; --color-warning-500: #FEB21B; --color-warning-600: #EE9001; --color-warning-700: #D06F01; --color-warning-800: #984701; --color-warning-900: #562300; --color-accent-orange-100: #FFF2EB; --color-accent-orange-200: #FFDDCC; --color-accent-orange-300: #FFB899; --color-accent-orange-400: #FF8D5C; --color-accent-orange-500: #FF6929; --color-accent-orange-600: #F54900; --color-accent-orange-700: #CC3600; --color-accent-orange-800: #8F2600; --color-accent-orange-900: #4D1400; --color-white: #FFFFFF; --color-white-a04: rgba(255, 255, 255, 0.04); --color-white-a10: rgba(255, 255, 255, 0.1); --color-white-a20: rgba(255, 255, 255, 0.2); --color-white-a40: rgba(255, 255, 255, 0.4); --color-white-a60: rgba(255, 255, 255, 0.6); --color-white-a80: rgba(255, 255, 255, 0.8); --color-white-a90: rgba(255, 255, 255, 0.9); --color-black: #000000; --color-link-500: #4E64DF; --color-link-600: #374ECD } 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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; color: #e7e7e7 } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block } textarea { font-size: var(--font-size-small-400) } ol,ul { list-style: none } blockquote,q { quotes: none } blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } a { text-decoration: none; color: var(--color-primary-500) } a:active,a:focus { color: var(--color-neutral-600); outline-offset: 2px } .callout { background: var(--color-neutral-900-a10); border-radius: 4px; color: var(--color-neutral-900); display: inline-block; font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400); padding: 10px } .callout--l1 { padding: 15px 20px } .callout--1 { background: var(--color-success-500-a10); color: var(--color-success-500) } .callout--full-width { width: 100% } .btn { transition: all 0.15s ease-in-out; background: var(--color-primary-500); border: 0; border-radius: 12px; color: var(--color-white); cursor: pointer; display: inline-block; font-family: var(--font-family-primary-semibold); line-height: 1; margin: 5px 0; max-width: 100%; padding: 6px 12px; text-align: center; white-space: normal } .btn * { color: var(--color-white); text-decoration: none } .btn .button__content { -webkit-align-items: center; align-items: center; color: currentColor; display: -webkit-flex; display: flex; gap: 8px; -webkit-justify-content: center; justify-content: center } .btn:active:focus { outline: none } .btn:active,.btn:focus,.btn:hover { color: var(--color-white); outline-width: 0 } .btn:hover { background: var(--color-primary-600) } .btn:focus,.btn:active { background: var(--color-primary-700); color: var(--color-primary-200) } .btn:focus-visible { background: var(--color-neutral-900); outline-width: 5px; outline-color: var(--color-primary-500) } .btn[disabled] { background: var(--color-neutral-400); color: var(--color-white) } .btn--segmented { background: transparent; border: 1px solid var(--color-primary-500); border-radius: 3px; color: var(--color-primary-500); font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-400); padding: 14px 30px; text-transform: none } .btn--segmented:active,.btn--segmented:focus,.btn--segmented:hover { box-shadow: none } .btn--segmented:hover,.btn--segmented.on,.btn--segmented.selected,.btn--segmented.btn--selected,.btn--segmented.btn--on { background: var(--color-primary-500); color: var(--color-white) } .btn--segmented:active,.btn--segmented:focus { background: var(--color-primary-600) } .btn--segmented:focus-visible { background: var(--color-neutral-900) } .btn--segmented:disabled { background: transparent; border-color: var(--color-neutral-300); color: var(--color-neutral-300) } .btn--segmented--neutral { border-color: var(--color-neutral-300); padding: 12px 30px } .btn--segmented--neutral:active,.btn--segmented--neutral:focus,.btn--segmented--neutral:hover { border-color: var(--color-primary-500) } .btn--segmented--danger { border-color: var(--color-neutral-300); color: var(--color-danger-500) } .btn--segmented--danger:active,.btn--segmented--danger:focus,.btn--segmented--danger:hover { background-color: var(--color-danger-500); border-color: var(--color-danger-500); color: var(--color-white) } .btn--segmented--danger:focus-visible { background: var(--color-neutral-900) } .btn--segmented-off { background: transparent; border-color: var(--color-neutral-400); color: inherit } .btn--segmented-off:active,.btn--segmented-off:focus,.btn--segmented-off:hover { border-color: inherit } .btn-segmented-group { display: -webkit-flex; display: flex } .btn-segmented-group .btn { border-radius: 0 } .btn-segmented-group .btn+.btn { border-left: 1px solid transparent } .btn-segmented-group .btn:first-child { border-bottom-left-radius: 3px; border-top-left-radius: 3px } .btn-segmented-group .btn:last-child { border-bottom-right-radius: 3px; border-top-right-radius: 3px } .btn--big { font-size: var(--font-size-medium-300); line-height: var(--font-size-large-100); font-family: var(--font-family-display); -webkit-font-variant-ligatures: none; font-variant-ligatures: none; margin-bottom: 9px; padding: 16px 24px; text-transform: uppercase } .btn--full-width { width: 100% } .btn--large { box-shadow: none; font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100); -webkit-font-variant-ligatures: none; font-variant-ligatures: none; margin-bottom: 5px; padding: 15px 30px } @media (min-width: 600px) { .btn--large { font-size:var(--font-size-medium-100) } } .btn--medium { font-size: var(--font-size-small-300); padding: 12px 20px; text-transform: none } @media (min-width: 600px) { .btn--medium { font-size:var(--font-size-small-400) } } .btn--medium-2 { border-radius: 5px; font-size: var(--font-size-small-400); padding: 18px 30px; text-transform: capitalize } .btn--fb { background: #3b5998 } .btn--fb:hover { background: #4c70ba } .btn--fb:focus,.btn--fb:active { background: #2d4373 } .btn--green { background: var(--color-success-500) } .btn--green:hover { background: var(--color-success-600) } .btn--green:focus,.btn--green:active { background: var(--color-success-600) } .btn--green:focus-visible { background: var(--color-neutral-900) } .btn--green-pastel { background: var(--color-success-500) } .btn--green-pastel:hover { background: var(--color-success-600) } .btn--green-pastel:focus,.btn--green-pastel:active { background: var(--color-success-600) } .btn--green-pastel:focus-visible { background: var(--color-neutral-900) } .btn--red { background: var(--color-danger-500) } .btn--red:hover { background: var(--color-danger-400) } .btn--red:focus,.btn--red:active { background: var(--color-danger-500) } .btn--red:focus-visible { background: var(--color-neutral-900) } .btn--trans { background: var(--color-white-a20); color: var(--color-white) } .btn--trans:hover { background: var(--color-white-a10) } .btn--trans:focus,.btn--trans:active { background: var(--color-white-a20) } .btn--trans:focus-visible { background: var(--color-neutral-900) } .btn--yellow { background: var(--color-warning-500); color: var(--color-neutral-900) } .btn--yellow:hover { background: var(--color-warning-300); color: var(--color-neutral-900) } .btn--yellow:focus,.btn--yellow:active { background: var(--color-warning-300); color: var(--color-neutral-900) } .btn--yellow:focus-visible { background: var(--color-neutral-900) } .btn--grey { background: var(--color-neutral-200) } .btn--grey.btn--big:hover,.btn--grey.btn--big:focus,.btn--grey.btn--big:active { background: var(--color-neutral-200); cursor: auto } .btn--grey:focus-visible { background: var(--color-neutral-900) } .btn--white { background: var(--color-white); color: var(--color-neutral-900) } .btn--white:hover,.btn--white:focus,.btn--white:active { background: var(--color-primary-600); box-shadow: none; color: var(--color-white); cursor: pointer } .btn--white:hover>.btn__content--arrow,.btn--white:focus>.btn__content--arrow,.btn--white:active>.btn__content--arrow { opacity: .75 } .btn--white .left { color: var(--color-primary-500); margin-left: 7px } .btn--white>.btn__content--arrow { color: var(--color-neutral-200); opacity: 1 } .btn--white:focus-visible { background: var(--color-neutral-900) } .btn--black { background: var(--color-neutral-900) } .btn--black:hover,.btn--black:focus,.btn--black:active { background: var(--color-neutral-600); box-shadow: none; cursor: pointer } .btn--periwinkle { background: var(--color-primary-600) } .btn--periwinkle:hover,.btn--periwinkle:focus,.btn--periwinkle:active { background: var(--color-primary-500); box-shadow: none; cursor: pointer } .btn--full { display: block; padding-left: 0; padding-right: 0; width: 100% } .btn--no-space { margin: 0 } .btn--disabled { cursor: not-allowed; filter: alpha(opacity=50); opacity: .50; box-shadow: none } .btn--camelcase { text-transform: none } .btn--capitalize { text-transform: capitalize } .btn--unclickable { cursor: not-allowed; filter: alpha(opacity=50); opacity: .50; box-shadow: none; pointer-events: none } .btn--cta { -webkit-align-items: center; align-items: center; border-radius: 0; display: -webkit-flex; display: flex; font-family: var(--font-family-primary-semibold); font-weight: 600; line-height: 24px } .btn--cta.tp-btn--icon { padding: 0 } .btn--cta .button__content { border-bottom: 2px solid var(--color-primary-500) } .btn--cta--on-light .button__content { color: var(--color-neutral-900) } .btn--cta--on-light .button__content:hover { border-color: var(--color-neutral-300) } .btn--cta--on-light .button__content:active { border-color: var(--color-primary-500); color: var(--color-neutral-700) } .btn--cta--on-dark .button__content { border-color: var(--color-primary-400); color: var(--color-white) } .btn--cta--on-dark .button__content:hover { border-color: var(--color-neutral-700); color: var(--color-white) } .btn--cta--on-dark .button__content:active { border-color: var(--color-primary-600); color: var(--color-neutral-300) } .form-field-mock-editable { border: 1px solid var(--color-neutral-200); padding: 10px; margin-top: 5px; margin-bottom: 5px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: var(--font-size-medium-100) } .form-field-mock-editable input { margin-left: 5px } .form-field-icon-wrap { position: relative } .form-field-icon-wrap .icon { position: absolute; left: 7px; height: 100%; padding-top: 1.5px; pointer-events: none } .form-field-icon-wrap .form__control { padding-left: 25px } .form__alert { margin-bottom: 0; margin-left: 5px } .label { margin-bottom: 7px } .label--heavy { font-family: var(--font-family-primary-bold) } .label--no-s { margin-top: 0; margin-bottom: 0 } .label--no-s-t { margin-top: 0 } .label--no-s-b { margin-bottom: 0 } input.radio-button[type='radio'] { margin: 0 6px; -webkit-flex-shrink: 0; flex-shrink: 0 } .radio-button-wrap { display: -webkit-flex; display: flex } .select { -webkit-appearance: none; -moz-appearance: none } .select__wrap { position: relative } .select__wrap:after { content: ''; display: block; width: 0; height: 0; position: absolute; right: 10px; top: calc((38px - 6px) / 2); border-top: 6px solid #000; border-left: 6px solid transparent; border-right: 6px solid transparent; pointer-events: none } .select__wrap .select { font-family: var(--font-family-primary); border-radius: 12px; border: 2px solid var(--color-neutral-300) } .select__wrap.wide { width: 250px } .select__wrap.slim { width: 50% } .select__wrap--dark::after { border-top-color: var(--color-white) } .select__wrap--dark .select { border-color: var(--color-white); background: var(--color-neutral-800); color: var(--color-white) } .select__wrap--full-width { max-width: none } .select__wrap--inline { display: inline-block; width: auto; position: relative } .textarea,.textarea.form-control,.textarea.form__control { height: calc(var(--font-size-small-400) * 4 * 1.42857143); resize: none } .textarea.textarea--l1,.textarea.form-control.textarea--l1,.textarea.form__control.textarea--l1 { height: calc(var(--font-size-small-400) * 6 * 1.42857143) } .textarea.form__control--fit-content { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; min-height: calc(var(--font-size-small-400) * 4 * 1.42857143) } .textarea.form__control--tall { height: 169px; margin-bottom: 10px } ::-webkit-input-placeholder { color: var(--color-neutral-500) } :-ms-input-placeholder { color: var(--color-neutral-500) } ::-ms-input-placeholder { color: var(--color-neutral-500) } ::placeholder { color: var(--color-neutral-500) } @media (max-width: 374px) { ::-webkit-input-placeholder { font-size:var(--font-size-small-200) } :-ms-input-placeholder { font-size: var(--font-size-small-200) } ::-ms-input-placeholder { font-size: var(--font-size-small-200) } ::placeholder { font-size: var(--font-size-small-200) } } input[readonly='readonly'],input.readonly { background: var(--color-neutral-200); cursor: not-allowed; color: var(--color-neutral-600); position: relative } .readonly__wrap { position: relative } .readonly__wrap .teepublicon { pointer-events: none; position: absolute; right: 15px; top: calc((100% - 16px) / 2) } input.copied { transition: 0.2s } input.copied.success { background: var(--color-primary-500); color: white; box-shadow: none } input.copied.success::-moz-selection { background: transparent } input.copied.success::selection { background: transparent } .hr { height: 1px; width: 100%; margin: 20px auto; background: var(--color-neutral-200); border: none } @media (min-width: 600px) { .hr { margin:30px auto } } .hr--heavy { background: var(--color-white); height: 2px } .hr--light-1 { background: var(--color-neutral-200) } .hr--no-s { margin-top: 0; margin-bottom: 0 } .hr--s1 { margin-top: 20px; margin-bottom: 20px } .hr--s2 { margin-top: 10px; margin-bottom: 10px } .hr--skinny { width: 146px } .link { cursor: pointer } .link * { color: inherit } .link--1 { color: var(--color-link-500); cursor: pointer } .link--1:hover { color: var(--color-link-600) } .link--2 { color: var(--color-neutral-900); cursor: pointer } .link--2:hover,.link--2:focus { color: var(--color-link-500) } .link--small { font-size: var(--font-size-small-200) } .link--medium { font-size: var(--font-size-small-300) } .link--default { font-size: var(--font-size-small-400) } .link--trackable { color: var(--color-white); cursor: pointer } .link--trackable:hover { color: var(--color-white) } .link--center,.link--nav-close { display: block; text-align: center; width: 100% } .link--danger { color: var(--color-danger-500) } .link--danger:hover { color: var(--color-danger-600) } .link--dark-background:focus { color: var(--color-neutral-200) } .link--dark-background:hover { color: var(--color-neutral-300) } .link--s1,.link--nav-close { font-size: var(--font-size-small-200) } .link--strong { font-family: var(--font-family-primary-semibold); font-weight: 600 } .link--white { color: var(--color-white) } .link--white:hover { color: var(--color-white) } .link--tel,a[href^='tel'] { white-space: nowrap } .link--nav-close { color: var(--color-primary-500) } .link--subtle { color: inherit } .link--subtle:hover { color: var(--color-primary-500) } .link-btn { background: none; border: none; color: var(--color-link-500); padding-top: 20px } .link-btn-small { background: none; border: none; color: var(--color-link-500); font-size: var(--font-size-small-100); padding: 0; text-align: left } .vc-pill.link-btn--external-link { padding: 8px 16px 8px 16px; border: 2px solid var(--color-neutral-300); border-radius: 12px; gap: 8px; margin: 5px 0 } .vc-pill.link-btn--external-link:hover path { fill: var(--color-white) } .list { margin-top: 15px; margin-bottom: 15px; margin-left: 15px } .list li { margin-top: 5px; margin-bottom: 5px } .list--ol { list-style: decimal; list-style-position: inside } .list--ul { list-style: disc; list-style-position: inside; margin-top: 1em } .list--s-l1 li { margin-bottom: 10px; margin-top: 10px } .list--s-l2 li { margin-bottom: 15px; margin-top: 15px } .list-comma { list-style: none } .list-comma li { display: inline } .list-comma li:after { content: ', ' } .list-comma li:last-child:after { display: none; content: '' } .list-dl { margin-top: 15px; margin-bottom: 25px } .list-dl dd { display: none; margin-bottom: 15px } .list-dl dt { cursor: pointer; color: var(--color-primary-500); border-top: 1px solid var(--color-neutral-200); padding-top: 10px; padding-bottom: 10px } .list-dl dt:first-child { border-top: none; padding-top: 0 } .list-dl dt.active+dd { display: block } .list-links li { margin-top: 5px; margin-bottom: 5px } .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .overlay--dark { background: var(--color-neutral-900-a70) } .overlay-ui { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; z-index: -1 } .overlay-ui.active { display: block; z-index: 75 } .h__header,.h__h4,.h__h4--loud,.h__h3--secondary--sm,.h__h3--primary--sm,.h__h3,.h__h3--loud,.h__h2--secondary,.h__h2,.h__h2--sm,.h__h2--loud,.h__h1--sm,.h__h1,.h__h1--loud,.h__h1--hero { display: block; font-family: var(--font-family-primary-bold); font-weight: bold; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; letter-spacing: 0; line-height: 1; margin: 0 0 10px } @media (min-width: 768px) { .h__header,.h__h4,.h__h4--loud,.h__h3--secondary--sm,.h__h3--primary--sm,.h__h3,.h__h3--loud,.h__h2--secondary,.h__h2,.h__h2--sm,.h__h2--loud,.h__h1--sm,.h__h1,.h__h1--loud,.h__h1--hero { line-height:1.15em } } .h__h1,.h__h1--loud,.h__h1--hero { font-size: var(--font-size-medium-300); font-family: var(--font-family-display) } @media (min-width: 768px) { .h__h1,.h__h1--loud,.h__h1--hero { font-size:var(--font-size-large-100) } } .h__h1--loud,.h__h1--hero { text-transform: uppercase } .h__h1--hero { font-size: var(--font-size-medium-200) } @media (min-width: 768px) { .h__h1--hero { font-size:var(--font-size-xlarge-300) } } .h__h1--sm { font-size: var(--font-size-medium-200) } @media (min-width: 768px) { .h__h1--sm { font-size:var(--font-size-medium-300) } } .h__h2,.h__h2--sm,.h__h2--loud { font-family: var(--font-family-primary); font-size: var(--font-size-medium-200) } @media (min-width: 768px) { .h__h2,.h__h2--sm,.h__h2--loud { font-size:var(--font-size-medium-300) } } .h__h2--secondary { font-size: var(--font-size-medium-200) } @media (min-width: 768px) { .h__h2--secondary { font-size:var(--font-size-medium-300) } } .h__h2--loud { text-transform: uppercase } .h__h2--sm { font-size: var(--font-size-small-400) } .h__h3,.h__h3--loud { font-size: var(--font-size-medium-100); line-height: 24px } @media (min-width: 768px) { .h__h3,.h__h3--loud { font-size:var(--font-size-medium-200) } } .h__h3--secondary--sm,.h__h3--primary--sm { font-size: var(--font-size-small-400) } .h__h3--primary--sm { font-family: var(--font-family-primary) } .h__h4,.h__h4--loud { font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400) } .h--bright { color: var(--color-primary-500) } .h { font-family: var(--font-family-primary-bold); display: block; line-height: 1.2 } .h--1,.h--1a { font-size: var(--font-size-large-300); font-family: var(--font-family-display) } .h--1a { text-transform: capitalize } .h--2 { font-size: var(--font-size-medium-400) } .h--2a { font-size: var(--font-size-medium-400); text-transform: capitalize } .h--2b { font-size: var(--font-size-medium-300); font-weight: bold } .h--2c { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100) } .h--3 { font-size: var(--font-size-medium-300); text-transform: capitalize; font-weight: normal } .h--3a,.h--3a--loud { font-size: var(--font-size-medium-100); text-transform: capitalize; font-weight: bold } .h--3a--loud { text-transform: uppercase } .h--3b { font-size: var(--font-size-small-400); text-transform: none; font-weight: bold } .h--3c { font-size: var(--font-size-medium-100); text-transform: uppercase; font-weight: bold } .h--3d { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100) } .h--4,.h--4a { font-size: var(--font-size-small-300); margin-bottom: 0 } .h--4a { text-transform: capitalize } .h--5,.h--6 { text-transform: capitalize } .h--5 { font-size: var(--font-size-small-300); margin-bottom: 0 } .h--6 { font-size: var(--font-size-small-300); margin-bottom: 0 } .h--icon { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100% } .h--icon .icon { font-size: inherit; width: auto } .h--icon span { margin-left: 15px } .h--s { margin-top: 10px } .h--no-s { margin-top: 0; margin-bottom: 0 } .h--no-s-b { margin-bottom: 0 } .h--no-s-t { margin-top: 0 } .h--no-transform { text-transform: none } h1,h2,h3,h4,h5 { -webkit-font-variant-ligatures: none; font-variant-ligatures: none; letter-spacing: 0; line-height: 1; margin: 0; padding: 0 } h1.centered,h2.centered,h3.centered,h4.centered,h5.centered { text-align: center } h1 { font-size: var(--font-size-large-100); font-family: var(--font-family-display); margin-bottom: 17px } h1.bordered { border-bottom: 3px solid #9e9e9e } h2 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-400); margin: 20px 0 10px } h3 { font-size: var(--font-size-medium-300); font-family: var(--font-family-primary-bold); margin: 18px 0 11px } h3.bordered { border-bottom: 1px solid var(--color-neutral-300); padding-bottom: 5px } h4 { color: var(--color-neutral-900); font-size: var(--font-size-small-400); font-weight: bold; margin-top: 19px } h5 { font-weight: bold } a,span.a { transition: all 0.1s ease-in-out; color: var(--color-link-500); cursor: pointer } a:focus,span.a:focus { text-decoration: none } a:hover,span.a:hover { color: var(--color-primary-600); text-decoration: none } .blue a,.blue span.a { color: white } a.white,span.a.white { color: var(--color-white) } .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .grey { color: var(--color-neutral-400) } p { line-height: normal } strong { font-family: var(--font-family-primary-bold); color: var(--color-neutral-900) } @media screen and (max-width: 768px) { .big { font-size:var(--font-size-large-200) } } body.no-scroll { overflow: hidden; width: 100%; height: 100% } body.modal-block__no-scroll { overflow: hidden } .wrap-padding { padding: 10px } .body--on-dark { background-color: var(--color-neutral-900) } .body--on-periwinkle { background-color: var(--color-primary-500) } .body--on-admin { background-color: #F9F8F3 } .body--on-white { background-color: var(--color-white) } .center-h { margin-left: auto; margin-right: auto } .contain { margin-left: auto; margin-right: auto; max-width: 1030px; padding-left: 15px; padding-right: 15px; width: 100% } .m-header+.contain { margin-top: 15px } @media (min-width: 1024px) { .m-header+.contain { margin-top:40px } } .contain--narrow-1 { max-width: 830px } .contain--narrow-2 { max-width: 730px } .contain--narrow-3 { max-width: 630px } .contain--narrow-4 { max-width: 400px } .contain--no-padding { padding-left: 0; padding-right: 0 } .contain--wide-1 { max-width: 1200px } .contain--wide-2 { max-width: 1415px } .contain--wide-3 { max-width: 1260px } .container__space--default { margin-top: 15px; margin-bottom: 15px } @media (min-width: 1025px) { .container__space--default { margin-top:20px; margin-bottom: 20px } } .flex-fix { height: 0; margin-top: 0; margin-bottom: 0 } .main-wrapper { display: block; position: relative; min-height: 90vh } .overflow-hidden { overflow-x: hidden } .section+.section { margin-top: 40px } .section__sub { margin-top: 20px } @media (min-width: 1025px) { .split-d { display:-webkit-flex; display: flex } } @media (min-width: 1025px) { .split-d__section { -webkit-flex-basis:50%; flex-basis: 50%; margin-right: 25px } .split-d__section:last-child { margin-right: 0 } .split-d__section .split-d__content { margin-top: 0 } } .square { height: 0; padding-bottom: 100% } .squeeze-tb { margin-top: -10px; margin-bottom: -10px } .wrapper { margin-inline:auto;width: 100%; padding-inline:16px} @media (min-width: 480px) { .wrapper { padding-inline:24px } } @media (min-width: 768px) { .wrapper { padding-inline:48px } } @media (min-width: 1024px) { .wrapper { padding-inline:64px } } @media (min-width: 1280px) { .wrapper { max-width:1440px; padding-inline:80px} } .wrapper.wrapper-wide { max-width: none } @container storefront (min-width: 480px) { .wrapper { padding-inline:24px} } @container storefront (min-width: 768px) { .wrapper { padding-inline:48px} } @container storefront (min-width: 1024px) { .wrapper { padding-inline:64px} } @container storefront (min-width: 1280px) { .wrapper { max-width: 1440px; padding-inline:80px} } .design-tiles-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4px } @media (min-width: 768px) { .design-tiles-wrapper { grid-gap:16px } } @media (min-width: 1024px) { .design-tiles-wrapper { grid-template-columns:repeat(4, 1fr) } } .span__comma:after { content: ','; font-weight: normal } .span__normal { font-weight: normal } .italicize { font-style: italic } .strong { font-family: var(--font-family-primary-bold) } .strong--start:after { content: ':' } .uppercase { text-transform: uppercase } .text { display: block } .text p+p,.text .text-block+.text-block,.text .text-block+p,.text p+.text-block { margin-top: 15px } .text-block { display: block } .text-block p,.text-block .text { margin-bottom: 20px } .text-center { display: block; margin-left: auto; margin-right: auto; text-align: center } .text-contain { max-width: 575px } .text-contain-s1 { max-width: 475px } .text-contain-l1 { max-width: 610px } .text-height { line-height: 1.5 } .text-height p,.text-height .text { line-height: 1.5 } .text-keep-line { white-space: pre-line } .text-keep-space { white-space: pre-wrap } .text-light { color: var(--color-neutral-600) } .text-light-1,.m-search__trail--lt,.text-note { color: var(--color-neutral-600) } .text-white { color: var(--color-white) } .text-dark-3 { color: var(--color-neutral-900) } .text-strike { text-decoration: line-through } .text-note { margin-top: 5px; margin-bottom: 5px } .text-note--small { font-size: var(--font-size-small-200) } .text-note--mobile { font-size: var(--font-size-small-200) } @media (min-width: 768px) { .text-note--mobile { font-size:var(--font-size-small-400) } } .text-note--tiny { font-size: var(--font-size-small-100) } .text-note--warn { background: var(--color-danger-100); color: var(--color-neutral-600); line-height: 1.4; margin-bottom: 10px; margin-top: 10px; padding: 20px } .text-note-2 { font-size: var(--font-size-small-100); position: relative; text-align: right; text-transform: uppercase } .text-note-2:after { bottom: 0; content: ':'; font-weight: bold; position: absolute; right: -4px } .text-note-2--left { text-align: left } .text-note-2--left:after { margin-left: -2px; position: relative; right: 0 } .text-red,.text-error { color: var(--color-danger-500) } .text-sm { font-size: var(--font-size-small-100) } .text-sm--1 { font-size: var(--font-size-small-100) } @media (min-width: 768px) { .text-sm--1 { font-size:var(--font-size-small-200) } } .text-success { color: var(--color-success-500) } .text-monies { color: var(--color-success-500) } .text-wrap { word-wrap: break-word } .text-note--space { margin: 10px 0 } .text-note--space-sm { margin: 5px 0 } .text-note--space-lg { margin: 12px 0 } .text-note--no-space { margin: 0 } .hidden { display: none !important } .hide-if-off.off { display: none !important } .select-all { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all } .ui-toggle.off { display: none } .avatar { border-radius: 50% } .image { display: block; max-width: 100%; margin-top: 10px; margin-bottom: 10px } .image-res { display: block; max-width: 100%; max-height: 100% } .notify { position: relative } .notify:before { content: ''; background: #b53933; width: 16px; height: 16px; border-radius: 50%; position: absolute; top: -8px; right: -8px } .touchable { cursor: pointer } .u-hide { display: none } .ui-sortable-handle { touch-action: none } #teepublic #content { padding-bottom: 15px } #teepublic.landing-page #content { padding-bottom: 0 } #teepublic.shipment-tracking-page #content { padding-bottom: 0; background-color: var(--color-neutral-900) } #teepublic.shipment-tracking-page .main-wrapper { min-height: auto } html { font-size: 62.5%; font-family: var(--font-family-primary) } body { color: var(--color-neutral-400); background-color: var(--color-neutral-100); font-size: var(--font-size-small-400) } * { box-sizing: border-box } hr { background-color: #9e9e9e; height: 1px; margin: 30px 0 } p { font-size: var(--font-size-small-400) } b { font-weight: bold } @supports (-webkit-appearance: -apple-pay-button) { .apple-pay-button-with-text,.apple-pay-button-plain { cursor:pointer; -webkit-appearance: -apple-pay-button; display: inline-block } .apple-pay-button-with-text { -apple-pay-button-type: buy } .apple-pay-button-plain { -apple-pay-button-type: plain; border-radius: 12px } .apple-pay-button-with-text>* { display: none } .apple-pay-button-black-with-text { -apple-pay-button-style: black } .apple-pay-button-white-with-text { -apple-pay-button-style: white } .apple-pay-button-white-with-line-with-text { -apple-pay-button-style: white-outline } } @supports not (-webkit-appearance: -apple-pay-button) { .apple-pay-button-with-text { --apple-pay-scale: 1; display: -webkit-inline-flex; display: inline-flex; -webkit-justify-content: center; justify-content: center; font-size: var(--font-size-small-200); border-radius: 5px; padding: 0px; box-sizing: border-box; min-width: 200px; min-height: 32px; max-height: 64px } .apple-pay-button-black-with-text { background-color: black; color: white } .apple-pay-button-white-with-text { background-color: white; color: black } .apple-pay-button-white-with-line-with-text { background-color: white; color: black; border: .5px solid black } .apple-pay-button-with-text.apple-pay-button-black-with-text>.logo { background-image: -webkit-named-image(apple-pay-logo-white); background-color: black } .apple-pay-button-with-text.apple-pay-button-white-with-text>.logo { background-image: -webkit-named-image(apple-pay-logo-black); background-color: white } .apple-pay-button-with-text.apple-pay-button-white-with-line-with-text>.logo { background-image: -webkit-named-image(apple-pay-logo-black); background-color: white } .apple-pay-button-with-text>.text { font-family: -apple-system; font-size: calc(1em * var(--apple-pay-scale)); font-weight: 300; -webkit-align-self: center; align-self: center; margin-right: calc(2px * var(--apple-pay-scale)) } .apple-pay-button-with-text>.logo { width: calc(35px * var(--scale)); height: 100%; background-size: 100% 60%; background-repeat: no-repeat; background-position: 0 50%; margin-left: calc(2px * var(--apple-pay-scale)); border: none } } .glide { position: relative; width: 100%; box-sizing: border-box } .glide * { box-sizing: inherit } .glide__track { overflow: hidden } .glide__slides { position: relative; width: 100%; list-style: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; touch-action: pan-Y; overflow: hidden; margin: 0; padding: 0; white-space: nowrap; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; will-change: transform } .glide__slides--dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .glide__slide { width: 100%; height: 100%; -webkit-flex-shrink: 0; flex-shrink: 0; white-space: normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent } .glide__slide a { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none } .glide__arrows { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .glide__bullets { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .glide--rtl { direction: rtl } .glide { height: 100% } .glide__track { height: 100% } .glide__slides { height: 100% } .glide__arrow--disabled { visibility: hidden } .on-off { width: 66px; cursor: pointer } .on-off span { height: 30px; width: 64px; cursor: pointer; display: block; background-image: url("https://assets.teepublic.com/assets/uploader/uploader-toggle-d933abe2376244efd13942c9df7e9140bbad38fd2f9993d10d32ce4638182cdd.png") } @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { .on-off span { background-image:url("https://assets.teepublic.com/assets/uploader/uploader-toggle-2x-9182fe566304ee41d93e9c381ccdcd2afde4f1d8be5d5b89c34b9ef199063296.png"); background-size: 130px 30px } } .on-off span.disabled { background-position: -66px 0px } .one-one { position: relative; display: block } .one-one:before { display: block; content: ""; width: 100%; padding-top: 100% } .one-one>.content { position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .one-one img { width: 100% } .bold { font-family: var(--font-family-primary-bold) } .hidden { display: none } .x:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 } * html .x { height: 1% } *:first-child+html .x { min-height: 1px } .line { border-top: 1px solid #9e9e9e; width: 100% } .no-js-warning { color: var(--color-danger-500); font-size: var(--font-size-small-400) } #site { position: relative } iframe[name="google_conversion_frame"] { position: fixed } abbr[title] { border-bottom: none } .z-depth-0 { box-shadow: none !important } .z-depth-1 { box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2) } .z-depth-1-half { box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2) } .z-depth-2 { box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3) } .z-depth-3 { box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.3) } .z-depth-4,.mtrl-modal { box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3) } .z-depth-5 { box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.3) } .display-table { width: 100%; height: 100%; display: table } .display-table .display-table-cell { display: table-cell; width: 100%; height: 100%; vertical-align: middle } .center { text-align: center } .center>* { display: inline-block } .left { text-align: left } .underline { text-decoration: underline } .row-flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap } .row-flex>* { -webkit-flex-grow: 1; flex-grow: 1 } .bordered-header { border-bottom: 5px solid #9e9e9e; padding-bottom: 5px; margin-top: 30px; margin-bottom: 20px } .bordered-header h3 { white-space: nowrap; font-size: var(--font-size-medium-100) } @media screen and (max-width: 480px) { .bordered-header { margin-top:18px } } .dev-mode { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; padding: 10px 0; font-weight: 700 } .dev-mode .item { display: inline-block; padding: 0 5px } .dev-mode a { color: var(--color-neutral-900); text-decoration: underline } .grid_header { font-size: var(--font-size-medium-400); border-top: 1px solid #9e9e9e; margin-top: 15px; padding-top: 20px; text-transform: uppercase; font-weight: bold } .design-block { margin-top: 30px } .design-block .thumb-container { display: block } .design-block .thumb-container .thumb { width: 100%; max-width: 260px } .design-block .info-text { padding: 10px 0px 25px 0px } .design-block .info-text .designer-info { margin-top: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .design-block .info-text .title { padding-right: 8px; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } @media screen and (max-width: 768px) { .product-grid .info-text { font-size:var(--font-size-small-100) } } @media screen and (max-width: 480px) { .design-block { margin-top:17px } .design-block .info-text { padding-top: 9px; padding-bottom: 20px } .design-block .info-text .title { margin-bottom: 3px } } #teepublic #content .admin-tools { margin-top: 14px; position: absolute; z-index: 5 } #content>.contain { margin-top: 15px } @media (min-width: 1024px) { #content>.contain { margin-top:40px } } #content>.contain.page-content { margin-top: 32px } .upcase { text-transform: uppercase } .ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 317px } .ellip-line-height { line-height: 1.1 } .head { border-bottom: 1px solid #ccc; margin-bottom: 10px } .split { padding: 0 10px; text-align: left } .split .left { display: inline-block; width: 50%; float: left } .split .right { display: inline-block; width: 48%; float: right } .left { float: left } .right { float: right } .overflow { overflow: hidden } .hidden { display: none } .clear { clear: both !important; font-size: 0 !important; height: 0 !important; line-height: 0 !important; margin: 0 !important; overflow: hidden !important; padding: 0 !important; visibility: hidden !important; float: none !important } .error { color: var(--color-danger-500) } .base-weight { font-weight: normal !important } @media screen and (max-width: 768px) { .fake-container { width:100%; padding: 0px } } html .caret { border-right: 6px solid transparent; border-left: 6px solid transparent } input { box-shadow: 0 } .form-inline .form-control { display: inline-block } .form-group { margin-bottom: 11px } label { display: block; font-size: var(--font-size-small-400); margin-bottom: 5px; text-align: left } label.form-inline { display: inline-block } @media screen and (max-width: 480px) { label { font-size:var(--font-size-small-400) } } textarea { border-radius: 2px } input[type="checkbox"] { -webkit-appearance: checkbox } .regular-form textarea,.regular-form select,.regular-form input[type=text],.regular-form input[type=password],.regular-form input[type=tel],.regular-form input[type=email] { background-color: transparent; border: solid 1px var(--color-neutral-400); border-radius: 1px; color: var(--color-neutral-900); font-size: var(--font-size-small-400); padding: 9px } .regular-form textarea { resize: vertical } .regular-form .field-box+.field-box { margin-top: 30px } .regular-form .actions { margin-top: 20px } .regular-form .errors { margin-bottom: 40px } .regular-form .errors ul { list-style: disc inside; padding-left: 5px } .regular-form .errors h2 { margin-bottom: 10px } .regular-form .errors li { line-height: 1.5 } label.radio-label { margin-bottom: 0 } .select-wrapper { overflow: hidden } .select-wrapper .select { height: 34px; overflow: hidden; background: url("https://assets.teepublic.com/assets/teepublicons/triangle-5d2ee7663757579745916d136794e100cb48c15bdde9122add67f19dc251196d.svg") no-repeat white; background-position: right 10px center; background-size: 12px; border: 0; vertical-align: bottom; width: 100% } .select-wrapper .select select { color: var(--color-neutral-800); width: 100%; font-size: var(--font-size-small-400); height: 100%; border: 1px solid silver; border-radius: 0; background: transparent; -webkit-appearance: none; -moz-appearance: none; padding-top: 0; padding-left: 10px } .select-wrapper .select select::-ms-expand { display: none } .g-recaptcha { margin: 0 0 15px } .tp-datetime-select,.tp-select-wrapper select,.tp-input-field { background-color: transparent; color: var(--color-neutral-900); display: block; font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); padding: 12px 16px; height: 48px } .tp-datetime-select:active,.tp-select-wrapper select:active,.tp-input-field:active { border: 2px solid var(--color-neutral-900) } .tp-datetime-select:focus-visible,.tp-select-wrapper select:focus-visible,.tp-input-field:focus-visible { border: 2px solid var(--color-primary-500); outline: 4px solid var(--color-primary-200); background-color: var(--color-neutral-100) } .tp-input-field--hosted-field-container,.tp-datetime-select,.tp-select-wrapper select,.tp-input-field { border: 2px solid var(--color-neutral-300); border-radius: 12px } .tp-input-field { width: 100% } .tp-form .tp-input-field--wrapper { margin-bottom: 12px } .tp-form #white_label_account_background_color { margin-bottom: 16px } #dashery_store_colors_radio_groups { max-width: 400px } .tp-input-label { display: -webkit-flex; display: flex; font-family: var(--font-family-primary-semibold); -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 0 } .tp-input-label .tp-input-label-asterisk { color: var(--color-primary-500) } .tp-input-label .tp-input-label-optional { color: var(--color-neutral-700); font-family: var(--font-family-primary); font-size: var(--font-size-small-200) } .tp-input-field--description { color: var(--color-neutral-700); font-size: 12px; line-height: 16px } .tp-input-field--text { border: 2px solid var(--color-neutral-300); padding: 12px 32px 12px 16px } .tp-input-field--text::-webkit-input-placeholder { color: var(--color-neutral-500) } .tp-input-field--text:-ms-input-placeholder { color: var(--color-neutral-500) } .tp-input-field--text::-ms-input-placeholder { color: var(--color-neutral-500) } .tp-input-field--text::placeholder { color: var(--color-neutral-500) } .tp-input-field--text:-ms-input-placeholder { color: var(--color-neutral-500) } .tp-input-field--text-area { height: 80px } .tp-input-field--error-message { display: none; color: var(--color-danger-600); opacity: 0; font-size: 12px; line-height: 16px; transition: opacity 0.3s } .tp-input-field--wrapper { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 2px } .tp-input-field--wrapper .tp-input-field--text__icon-success-container,.tp-input-field--wrapper .tp-input-field--text__icon-error-container { display: none } .tp-input-field--wrapper.tp-input-field--text-success .tp-input-field--text__icon-success-container { display: -webkit-flex; display: flex } .tp-input-field--wrapper.tp-input-field--text-success .tp-input-field--text__icon-error-container { display: none } .tp-input-field--wrapper.tp-input-field--text-error .tp-input-field--text,.tp-input-field--wrapper.tp-input-field--text-error select { background-color: var(--color-danger-100); border: 2px solid var(--color-danger-500); outline-color: transparent } .tp-input-field--wrapper.tp-input-field--text-error .tp-input-field--text__icon-success-container { display: none } .tp-input-field--wrapper.tp-input-field--text-error .tp-input-field--text__icon-error-container { display: -webkit-flex; display: flex } .tp-input-field--wrapper.tp-input-field--text-error .tp-input-field--text__icon-error-container svg { fill: var(--color-danger-500) } .tp-input-field--wrapper.tp-input-field--text-error .tp-input-label-asterisk { color: var(--color-danger-600) } .tp-input-field--wrapper.tp-input-field--text-error .tp-input-field--error-message { display: -webkit-flex; display: flex; opacity: 1 } .tp-input-field--wrapper.tp-input-field--text-error .tp-input-field--hosted-field-container { background-color: var(--color-danger-100); border-color: var(--color-danger-500); font-size: 50px } .tp-input-field--wrapper.tp-input-field--text-disabled .tp-input-field--text { background-color: var(--color-neutral-200); border: 2px solid var(--color-neutral-300); color: var(--color-neutral-700) } .tp-input-field--wrapper.tp-input-field--text-disabled .tp-input-field--text__icon-success-container svg { fill: var(--color-neutral-400) } .tp-input-field--text-container { position: relative } .tp-input-field--text__icon-container { -webkit-align-items: flex-start; align-items: flex-start; bottom: 0; display: -webkit-flex; display: flex; pointer-events: none; position: absolute; right: 16px; top: 16px } .tp-input-field--text__action-container { position: absolute; top: 10px; right: 16px } .tp-input-field--text__action-container .teepublicon { cursor: pointer } .tp-form-label { font-family: var(--font-family-primary-semibold); line-height: 1.5; margin-bottom: 0 } .tp-form-label>* { margin-top: 4px } .tp-input-field--hosted-field-container { height: 48px } .tp-input-field--hosted-field-container.braintree-hosted-fields-focused { background-color: var(--color-primary-100); border-color: var(--color-neutral-900) } .tp-select-wrapper { position: relative } .tp-select-wrapper::after { content: ''; position: absolute; display: block; width: 16px; height: 16px; right: 16px; top: calc(50% - 8px); background-image: url("https://assets.teepublic.com/assets/teepublicons/triangle-5d2ee7663757579745916d136794e100cb48c15bdde9122add67f19dc251196d.svg"); background-size: cover; background-position: center; pointer-events: none } .tp-select-wrapper select { margin: 0; -webkit-appearance: none; -moz-appearance: none; width: 100% } .tp-select-wrapper select:focus { border: 2px solid var(--color-primary-500); outline: 4px solid var(--color-primary-200); background: var(--color-neutral-100) } .tp-select-wrapper select:active { background: var(--color-primary-100); border: 2px solid var(--color-neutral-300) } .tp-select-wrapper select:disabled { border: 2px solid var(--color-neutral-300); background: var(--color-neutral-200) } .tp-select-wrapper select::-ms-expand { display: none } .tp-form__fields--inline { -webkit-align-items: flex-end; align-items: flex-end; display: -webkit-flex; display: flex; gap: 12px; width: 100% } .tp-form__fields--inline .form__field:first-child { -webkit-align-self: flex-start; align-self: flex-start } .tp-input-field--file input[type="file"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; cursor: pointer; display: inline-block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } .tp-input-field--file input.tp-input-field--file-hidden[type="file"] { display: none } .tp-input-field--file input[type="file"]::file-selector-button { border: 2px solid var(--color-neutral-300); border-radius: 12px; cursor: pointer; display: inline-block; gap: 8px; margin-right: 10px; padding: 8px 16px } .tp-input-field--file .tp-input-field--file-image-preview { border: 1px solid var(--color-neutral-200); padding: 8px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } .tp-input-field--file .tp-input-field--file-image--logo { max-height: 60px; max-width: 300px } .tp-input-field--file .tp-input-field--file-image--header { height: 100px; width: 290px } .tp-input-field--file .tp-input-field--file-image-preview-actions { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; gap: 12px } #product-display-preferences { max-width: 400px } .tp-input-password-field { text-align: left } .tp-input-password-field .tp-input-field--text__icon-container { right: 52px } .tp-input-field-password-pattern { margin-top: 8px } .tp-input-field-password-pattern__title { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-600) } .tp-input-field-password-pattern__list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 4px 8px; -webkit-justify-content: flex-start; justify-content: flex-start; margin-top: 4px } .tp-input-field-password-pattern__item { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; -webkit-flex-shrink: 0; flex-shrink: 0 } .tp-input-field-password-pattern__item span { color: var(--color-neutral-600) } .tp-input-field-password-pattern__item.tp-input-field-password-pattern__item--success span { color: var(--color-success-600) } .tp-input-field-password-pattern__item.tp-input-field-password-pattern__item--error span { color: var(--color-danger-500) } .tp-input-field-password-pattern__item.tp-input-field-password-pattern__item--error .teepublicon svg { fill: var(--color-danger-500) } .m-signup-form__name-fields-container .tp-input-field--wrapper:nth-of-type(4) { text-align: left } @media (min-width: 1024px) { .m-signup-form__name-fields-container { display:grid; grid-template-columns: 1fr 1fr; grid-column-gap: 16px } .m-signup-form__name-fields-container .tp-input-field--wrapper:nth-of-type(3),.m-signup-form__name-fields-container .tp-input-field--wrapper:nth-of-type(4),.m-signup-form__name-fields-container .tp-input-field--wrapper:nth-of-type(5) { grid-column: span 2 } } .m-signup-form__name-fields-container+.auth-layout__button { margin-top: 0 } .m-signup-form__terms-and-privacy { margin-top: 16px; text-align: left } .m-signup-form__terms-and-privacy,.m-signup-form__terms-and-privacy a { font-size: var(--font-size-small-100); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500 } .reveal-modal-bg { background: #000; background: rgba(0,0,0,0.8); display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1000 } .reveal-modal,.reveal-nominate-modal,.modal { visibility: hidden; top: 100px; width: 100%; background-color: var(--color-white); position: absolute; z-index: 1000; padding: 0px; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); -box-shadow: 0 0 10px rgba(0,0,0,0.4); height: auto; left: 50%; margin-left: -375px } .reveal-modal .modal-container,.reveal-nominate-modal .modal-container,.modal .modal-container { width: 100% } .reveal-modal .modal-container .close-modal,.reveal-nominate-modal .modal-container .close-modal,.modal .modal-container .close-modal { transition: all 0.1s ease-in-out; position: absolute; top: -55px; right: -60px; color: var(--color-neutral-300); font-size: 40px; cursor: pointer; z-index: 1 } @media (max-width: 767px) { .reveal-modal .modal-container .close-modal,.reveal-nominate-modal .modal-container .close-modal,.modal .modal-container .close-modal { bottom:-560px; font-size: 32px; left: 0; margin: auto; right: 0; top: 0 } } .reveal-modal .modal-container .close-modal:hover,.reveal-nominate-modal .modal-container .close-modal:hover,.modal .modal-container .close-modal:hover { color: var(--color-neutral-200) } .reveal-modal .modal-container h1,.reveal-nominate-modal .modal-container h1,.modal .modal-container h1 { color: var(--color-neutral-900); text-align: center; text-transform: uppercase; font-size: var(--font-size-large-100); padding: 0px; margin: 0px; margin-top: 34px; font-family: var(--font-family-primary-bold) } .reveal-modal .modal-container p,.reveal-nominate-modal .modal-container p,.modal .modal-container p { font-size: var(--font-size-small-400); text-align: center; line-height: 1.3em } .reveal-modal.small,.reveal-nominate-modal.small { width: 200px; margin-left: -140px } .reveal-modal.medium,.reveal-nominate-modal.medium { width: 400px; margin-left: -240px } .reveal-modal.large,.reveal-nominate-modal.large { width: 600px; margin-left: -340px } .reveal-modal.xlarge,.reveal-nominate-modal.xlarge { width: 800px; margin-left: -440px } .reveal-modal .close-reveal-modal,.reveal-nominate-modal .close-reveal-modal { font-size: var(--font-size-medium-200); line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0, 0, 0, 0.6); font-weight: bold; cursor: pointer } .reveal-modal h1 { text-align: center; color: var(--color-neutral-900); font-size: var(--font-size-xlarge-400); font-family: var(--font-family-primary-bold); margin: 50px 0 30px 0; padding: 0px; text-transform: uppercase } .reveal-modal p,.reveal-nominate-modal p { text-align: left; color: var(--color-neutral-900); font-weight: normal; font-size: var(--font-size-medium-100); font-family: var(--font-family-primary); margin: 0px; padding: 0px 104px 0px 104px; line-height: 120% } .reveal-modal p a { text-align: center; color: #28a5cc; font-size: var(--font-size-medium-100); font-family: var(--font-family-primary); font-weight: normal; margin: 0px; padding: 0px; text-decoration: none } .reveal-modal h2 span a,.reveal-nominate-modal h2 span a { text-align: center; color: #28a5cc; font-size: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: normal; margin: 70px 0 0 0; padding: 0px; text-decoration: none } .paypal { width: 139px; margin: 0px auto; height: 38px; padding: 30px 0 70px 0 } .modal-head { text-align: center; background-color: #28a5cc; color: var(--color-white); padding: 10px; font-size: var(--font-size-small-400) } .modal { border-radius: 4px; bottom: auto; display: inherit !important; overflow: visible !important; position: absolute !important; right: auto; z-index: 10000 } .modal.modal-default { height: 600px; width: 800px } .modal__close-ctrl { bottom: -50px; color: var(--color-neutral-300); cursor: pointer; font-size: var(--font-size-medium-300); left: 0; padding-top: 15px; position: absolute; right: 0; text-align: center } .modal-container .modal__close-ctrl { display: none } #edit-avatar,#edit-banner { height: auto; width: 343px; padding: 24px; border-radius: 12px; position: fixed !important; top: 50% !important; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } #edit-avatar .modal__close-ctrl,#edit-banner .modal__close-ctrl { display: none } #edit-avatar .modal-container .modal__close-ctrl,#edit-banner .modal-container .modal__close-ctrl { display: block; text-align: right; position: relative; padding: 0; margin: 0; top: 0; font-size: inherit } #intl-settings { height: auto; top: 118px; width: 328px } @media (min-width: 768px) { #intl-settings { width:367px; top: 275px } } #mobile-canvas-sizechart { background: transparent; height: auto; top: 10%; width: 328px } @media (min-width: 768px) { #mobile-canvas-sizechart { width:430px } #mobile-canvas-sizechart .modal__close-ctrl { position: absolute; top: 0; padding: 0; right: -50px } } #intl-settings.non-modal { width: 0px !important; height: 0px !important; display: none !important; visibility: hidden !important } #mobile-size-chart { height: 345px; width: 361px } .non-modal { margin-left: 0px !important; max-height: none !important; width: 100% !important } #commission-modal { left: 0px; background-color: var(--color-white); max-width: 490px; padding: 20px !important; height: auto } #commission-modal .modal-container { color: var(--color-neutral-900); text-align: center } #commission-modal .modal-container .non-modal { width: auto !important } #commission-modal .modal-container h3 { text-align: left; font-size: var(--font-size-medium-100); text-transform: uppercase; font-weight: bold; margin-bottom: 10px } #commission-modal .modal-container div { width: auto !important } #commission-modal .modal-container div table { width: 100% } #commission-modal .modal-container div table th { padding: 11px; background-color: #ebebeb; border: 2px solid #000; text-transform: uppercase; font-weight: bold; text-align: left } #commission-modal .modal-container div table .blank { background-color: var(--color-white); border: none } #commission-modal .modal-container div table td { padding: 11px; background-color: #ebebeb; border: 2px solid #000; text-transform: uppercase; text-align: left } #commission-modal .modal-container div table td:first-child { font-weight: bold } #commission-modal.non-modal { margin-left: 0px !important; max-height: none !important; width: auto !important } .modal-container.non-modal { width: auto !important } .sizechart-canvas-modal__pillow { min-width: 600px; width: auto } .sizechart-canvas-modal__tote { min-width: 940px; width: auto } .sizechart-canvas-modal__content { border: 0; border-radius: none } .sizechart-canvas-modal__content img { display: block } .sizechart-canvas-modal__content a { transition: none } .sizechart-canvas-modal__img--responsive { border-radius: 4px; overflow: hidden; height: auto; width: 100% } #sizechart-modal { max-width: 940px } #sizechart-modal .modal-content { padding-left: 15px; padding-right: 15px } .sizechart-holder { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10001; background-color: rgba(0,0,0,0.8) } .sizechart-holder .sizechart { width: 900px; margin-left: auto; margin-right: auto; position: relative; top: 100px; background-color: var(--color-white); border: 1px solid var(--color-neutral-400); padding: 30px } .sizechart-holder .sizechart .header { display: block; text-align: left; height: 45px } .sizechart-holder .sizechart .header h1 { float: left; text-transform: uppercase; color: #5f5d5f; font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-300) } .sizechart-holder .sizechart .header h1 span { font-size: var(--font-size-small-200); font-family: sans-serif; text-transform: none } .sizechart-holder .sizechart .header .buttons { float: right } .sizechart-holder .sizechart .header .buttons .button { display: inline-block; height: 20px; font-family: sans-serif; border: 1px solid var(--color-neutral-400); line-height: 20px; padding: 3px 10px; margin-left: 10px; cursor: pointer; background-color: var(--color-white) } .sizechart-holder .sizechart .header .buttons .button.active { background-color: #eeeeee } .sizechart-holder .sizechart .content { max-height: 500px; overflow-y: scroll; overflow-x: hidden; display: block; width: 100% } .sizechart-holder .sizechart .content #women { display: none } #sizechart { left: 0px; background-color: var(--color-white); width: 100%; height: auto } #sizechart h1 { text-align: center; margin-top: 34px; padding: 0 !important; font-size: var(--font-size-large-200); color: var(--color-neutral-900); font-family: var(--font-family-primary-bold); text-transform: uppercase } #sizechart .sizeguide { margin-bottom: 20px } #sizechart #notes .addendum { text-align: center; margin-top: -2px; padding: 5px; font-size: var(--font-size-small-400); font-style: italic } #sizechart #gender_select .male_or_female { width: 256px; overflow: hidden; margin: 14px auto 0 } #sizechart #gender_select .male_or_female>div { background-image: url("https://static.teepublic.com/sizechart/charts/sizechart-nav.png"); height: 24px; width: 122px; cursor: pointer } #sizechart #gender_select .male_or_female .mof_male { float: left; background-position: -870px 0 } #sizechart #gender_select .male_or_female .mof_male:hover { background-position: -870px -34px } #sizechart #gender_select .male_or_female .mof_male.selected { background-position: -870px -68px } #sizechart #gender_select .male_or_female .mof_female { float: right; background-position: -1004px 0 } #sizechart #gender_select .male_or_female .mof_female:hover { background-position: -1004px -34px } #sizechart #gender_select .male_or_female .mof_female.selected { background-position: -1004px -68px } #sizechart .sizechart-nav { overflow: hidden; margin-top: 17px; background-color: var(--color-neutral-900); text-align: center; height: 48px } #sizechart .sizechart-nav a { display: inline-block; height: 48px; background-image: url("https://static.teepublic.com/sizechart/charts/sizechart-nav.png"); cursor: pointer } #sizechart .sizechart-nav a.tees { width: 132px; background-position: 0 0 } #sizechart .sizechart-nav a.tees:hover { background-position: 0 -58px } #sizechart .sizechart-nav a.tees.selected { background-position: 0 -116px } #sizechart .sizechart-nav a.kids { width: 102px; background-position: -132px 0 } #sizechart .sizechart-nav a.kids:hover { background-position: -132px -58px } #sizechart .sizechart-nav a.kids.selected { background-position: -132px -116px } #sizechart .sizechart-nav a.longsleeve { width: 175px; background-position: -234px 0 } #sizechart .sizechart-nav a.longsleeve:hover { background-position: -234px -58px } #sizechart .sizechart-nav a.longsleeve.selected { background-position: -234px -116px } #sizechart .sizechart-nav a.baseball { width: 148px; background-position: -409px 0 } #sizechart .sizechart-nav a.baseball:hover { background-position: -409px -58px } #sizechart .sizechart-nav a.baseball.selected { background-position: -409px -116px } #sizechart .sizechart-nav a.tanks { width: 74px; background-position: -557px 0 } #sizechart .sizechart-nav a.tanks:hover { background-position: -557px -58px } #sizechart .sizechart-nav a.tanks.selected { background-position: -557px -116px } #sizechart .sizechart-nav a.crewnecks { width: 122px; background-position: -631px 0 } #sizechart .sizechart-nav a.crewnecks:hover { background-position: -631px -58px } #sizechart .sizechart-nav a.crewnecks.selected { background-position: -631px -116px } #sizechart .sizechart-nav a.hoodies { width: 107px; background-position: -753px 0 } #sizechart .sizechart-nav a.hoodies:hover { background-position: -753px -58px } #sizechart .sizechart-nav a.hoodies.selected { background-position: -753px -116px } #sizechart .subnavs { background-image: url("https://static.teepublic.com/sizechart/charts/sizechart-nav.png"); background-position: 0 -638px; overflow: hidden; background-color: var(--color-primary-500) } #sizechart .subnavs .tanks { display: none } #sizechart .subnavs .crewnecks { display: none } #sizechart .subnavs .hoodies { display: none } #sizechart .subnavs>div>div>a { background-image: url("https://static.teepublic.com/sizechart/charts/sizechart-nav.png"); height: 48px; display: inline-block; cursor: pointer } #sizechart .subnavs>div>div>a.regular { width: 94px; margin-left: 20px; background-position: -26px -174px } #sizechart .subnavs>div>div>a.regular.selected,#sizechart .subnavs>div>div>a.regular:hover { background-position: -26px -232px } #sizechart .subnavs>div>div>a.tri { width: 102px; background-position: -119px -174px } #sizechart .subnavs>div>div>a.tri.selected,#sizechart .subnavs>div>div>a.tri:hover { background-position: -119px -232px } #sizechart .subnavs>div>div>a.vee { width: 87px; background-position: -225px -174px } #sizechart .subnavs>div>div>a.vee.selected,#sizechart .subnavs>div>div>a.vee:hover { background-position: -225px -232px } #sizechart .subnavs>div>div>a.curvy { width: 77px; background-position: -335px -174px } #sizechart .subnavs>div>div>a.curvy.selected,#sizechart .subnavs>div>div>a.curvy:hover { background-position: -335px -232px } #sizechart .subnavs>div>div>a.dolman { width: 93px; background-position: -435px -174px } #sizechart .subnavs>div>div>a.dolman.selected,#sizechart .subnavs>div>div>a.dolman:hover { background-position: -435px -232px } #sizechart .subnavs>div>div>a.mens { width: 100px; background-position: -528px -174px } #sizechart .subnavs>div>div>a.mens.selected,#sizechart .subnavs>div>div>a.mens:hover { background-position: -528px -232px } #sizechart .subnavs>div>div>a.slouch_t { width: 81px; background-position: -527px -174px } #sizechart .subnavs>div>div>a.slouch_t.selected,#sizechart .subnavs>div>div>a.slouch_t:hover { background-position: -527px -232px } #sizechart .subnavs>div>div>a.slouch_v { width: 143px; background-position: -610px -174px } #sizechart .subnavs>div>div>a.slouch_v.selected,#sizechart .subnavs>div>div>a.slouch_v:hover { background-position: -610px -232px } #sizechart .subnavs>div>div>a.lady_in_men { width: 99px; background-position: -756px -174px } #sizechart .subnavs>div>div>a.lady_in_men.selected,#sizechart .subnavs>div>div>a.lady_in_men:hover { background-position: -756px -232px } #sizechart .subnavs>div>div>a.premium { width: 101px; background-position: -856px -174px } #sizechart .subnavs>div>div>a.premium.selected,#sizechart .subnavs>div>div>a.premium:hover { background-position: -856px -232px } #sizechart .subnavs>div>div>a.tank-regular { width: 94px; margin-left: 0px; background-position: -50px -290px } #sizechart .subnavs>div>div>a.tank-regular.selected,#sizechart .subnavs>div>div>a.tank-regular:hover { background-position: -50px -348px } #sizechart .subnavs>div>div>a.tank-triblend { width: 105px; background-position: -144px -290px } #sizechart .subnavs>div>div>a.tank-triblend.selected,#sizechart .subnavs>div>div>a.tank-triblend:hover { background-position: -144px -348px } #sizechart .subnavs>div>div>a.tank-muscle { width: 86px; background-position: -249px -290px } #sizechart .subnavs>div>div>a.tank-muscle.selected,#sizechart .subnavs>div>div>a.tank-muscle:hover { background-position: -249px -348px } #sizechart .subnavs>div>div>a.tank-jr-racerback { width: 134px; background-position: -335px -290px } #sizechart .subnavs>div>div>a.tank-jr-racerback.selected,#sizechart .subnavs>div>div>a.tank-jr-racerback:hover { background-position: -335px -348px } #sizechart .subnavs>div>div>a.tank-premium-racerback { width: 190px; background-position: -469px -290px } #sizechart .subnavs>div>div>a.tank-premium-racerback.selected,#sizechart .subnavs>div>div>a.tank-premium-racerback:hover { background-position: -469px -348px } #sizechart .subnavs>div>div>a.tank-triblend-racerback { width: 192px; background-position: -659px -290px } #sizechart .subnavs>div>div>a.tank-triblend-racerback.selected,#sizechart .subnavs>div>div>a.tank-triblend-racerback:hover { background-position: -659px -348px } #sizechart .subnavs>div>div>a.longsleeve-regular { width: 93px; background-position: -185px -696px } #sizechart .subnavs>div>div>a.longsleeve-regular.selected,#sizechart .subnavs>div>div>a.longsleeve-regular:hover { background-position: -185px -754px } #sizechart .subnavs>div>div>a.longsleeve-scoop { width: 78px; background-position: -279px -696px } #sizechart .subnavs>div>div>a.longsleeve-scoop.selected,#sizechart .subnavs>div>div>a.longsleeve-scoop:hover { background-position: -279px -754px } #sizechart .subnavs>div>div>a.longsleeve-premium { width: 102px; background-position: -357px -695px } #sizechart .subnavs>div>div>a.longsleeve-premium.selected,#sizechart .subnavs>div>div>a.longsleeve-premium:hover { background-position: -357px -753px } #sizechart .subnavs>div>div>a.crewneck-regular { width: 92px; background-position: -539px -406px } #sizechart .subnavs>div>div>a.crewneck-regular.selected,#sizechart .subnavs>div>div>a.crewneck-regular:hover { background-position: -539px -464px } #sizechart .subnavs>div>div>a.crewneck-lightweight { width: 135px; background-position: -716px -406px } #sizechart .subnavs>div>div>a.crewneck-lightweight.selected,#sizechart .subnavs>div>div>a.crewneck-lightweight:hover { background-position: -716px -464px } #sizechart .subnavs>div>div>a.hoodie-regular { width: 85px; margin-left: 356px; background-position: -349px -522px } #sizechart .subnavs>div>div>a.hoodie-regular.selected,#sizechart .subnavs>div>div>a.hoodie-regular:hover { background-position: -349px -580px } #sizechart .subnavs>div>div>a.hoodie-lightweight { width: 137px; background-position: -434px -522px } #sizechart .subnavs>div>div>a.hoodie-lightweight.selected,#sizechart .subnavs>div>div>a.hoodie-lightweight:hover { background-position: -434px -580px } #sizechart .subnavs>div>div>a.hoodie-zip { width: 115px; background-position: -570px -522px } #sizechart .subnavs>div>div>a.hoodie-zip.selected,#sizechart .subnavs>div>div>a.hoodie-zip:hover { background-position: -570px -580px } #sizechart .subnavs>div>div>a.hoodie-lightweight-zip { width: 166px; background-position: -685px -522px } #sizechart .subnavs>div>div>a.hoodie-lightweight-zip.selected,#sizechart .subnavs>div>div>a.hoodie-lightweight-zip:hover { background-position: -685px -580px } #sizechart .subnavs>div>div>a.kids-toddler { margin-left: 20px; width: 93px; background-position: -8px -812px } #sizechart .subnavs>div>div>a.kids-toddler.selected,#sizechart .subnavs>div>div>a.kids-toddler:hover { background-position: -8px -870px } #sizechart .subnavs>div>div>a.kids-juvenile { width: 96px; background-position: -101px -812px } #sizechart .subnavs>div>div>a.kids-juvenile.selected,#sizechart .subnavs>div>div>a.kids-juvenile:hover { background-position: -101px -870px } #sizechart .subnavs>div>div>a.kids-youth { width: 77px; background-position: -198px -812px } #sizechart .subnavs>div>div>a.kids-youth.selected,#sizechart .subnavs>div>div>a.kids-youth:hover { background-position: -198px -870px } #sizechart .subnavs>div>div>a.kids-infant { width: 77px; background-position: -275px -812px } #sizechart .subnavs>div>div>a.kids-infant.selected,#sizechart .subnavs>div>div>a.kids-infant:hover { background-position: -275px -869px } #sizechart .subnavs>div>div>a.kids-hoodie { width: 87px; background-position: -352px -812px } #sizechart .subnavs>div>div>a.kids-hoodie.selected,#sizechart .subnavs>div>div>a.kids-hoodie:hover { background-position: -352px -869px } #sizechart .subnavs>div>div>a.kids-long { width: 161px; background-position: -439px -812px } #sizechart .subnavs>div>div>a.kids-long.selected,#sizechart .subnavs>div>div>a.kids-long:hover { background-position: -439px -869px } #sizechart .subnavs .crewnecks .male .crewneck-regular { margin-left: 590px } #sizechart .subnavs .crewnecks .female .crewneck-regular { margin-left: 530px } #sizechart .charts { max-height: 700px; overflow-y: scroll; overflow-x: hidden } #sizechart .charts>div { display: none } #sizechart .charts>div img { float: left } #sizechart .charts img { display: block; margin-right: auto; margin-left: auto } #sizechart .charts .tanks .female .male-button { float: left; margin-left: 200px } #sizechart .charts .tanks .female .racerback-button,#sizechart .charts .tanks .female .regular-button { float: right; margin-right: 200px } #sizechart .charts .tanks .female .regular-button { padding: 0px; height: 27px } #sizechart .charts .metric { display: block; cursor: pointer; margin-bottom: 25px; margin-top: 10px } #sizechart .charts .imperial { display: block; display: none; cursor: pointer; margin-bottom: 25px; margin-top: 10px } #garment-modal { left: 0px; background-color: var(--color-white); max-width: 700px; width: 100%; height: auto } #garment-modal .modal-container { max-width: 700px; width: 100%; color: var(--color-neutral-900); text-align: center; position: relative } #garment-modal .modal-container img { width: 100%; height: auto; cursor: pointer } #garment-modal .modal-container div.close-reveal-modal { position: absolute; top: -55px; right: -60px; color: var(--color-neutral-300); font-size: var(--font-size-xlarge-300); cursor: pointer; z-index: 1 } #garment-modal .modal-container div.close-reveal-modal:hover { color: var(--color-neutral-200) } #garment-modal .modal-container h1 { padding: 24px 0 12px !important; margin: 0 !important; font-size: var(--font-size-xlarge-100); color: var(--color-neutral-900); font-family: var(--font-family-primary-bold); text-transform: uppercase } #garment-modal .modal-container .spec-nav { overflow: hidden; background-image: url("https://assets.teepublic.com/assets/garment-info/spec-nav-sprite-1fea6eda57fa6187840deaf52846cd2c83f49dbb7dd8bc5585e1933554e0da23.png") } #garment-modal .modal-container .spec-nav a,#garment-modal .modal-container .spec-nav div { display: block; height: 48px; background-image: url("https://assets.teepublic.com/assets/garment-info/spec-nav-sprite-1fea6eda57fa6187840deaf52846cd2c83f49dbb7dd8bc5585e1933554e0da23.png"); float: left } #garment-modal .modal-container .spec-nav a { cursor: pointer } #garment-modal .modal-container .spec-nav a img { float: left } #garment-modal .modal-container .spec-nav.tee-nav { background-position: 0 0 } #garment-modal .modal-container .spec-nav.tee-nav a.regular { width: 86px; margin-left: 5px; background-position: -5px 0 } #garment-modal .modal-container .spec-nav.tee-nav a.regular:hover,#garment-modal .modal-container .spec-nav.tee-nav a.regular.selected { background-position: -5px -58px } #garment-modal .modal-container .spec-nav.tee-nav a.tri { width: 86px; background-position: -91px 0 } #garment-modal .modal-container .spec-nav.tee-nav a.tri:hover,#garment-modal .modal-container .spec-nav.tee-nav a.tri.selected { background-position: -91px -58px } #garment-modal .modal-container .spec-nav.tee-nav a.vee { width: 86px; background-position: -177px 0 } #garment-modal .modal-container .spec-nav.tee-nav a.vee:hover,#garment-modal .modal-container .spec-nav.tee-nav a.vee.selected { background-position: -177px -58px } #garment-modal .modal-container .spec-nav.tee-nav a.curvy { width: 86px; background-position: -263px 0 } #garment-modal .modal-container .spec-nav.tee-nav a.curvy:hover,#garment-modal .modal-container .spec-nav.tee-nav a.curvy.selected { background-position: -263px -58px } #garment-modal .modal-container .spec-nav.tee-nav a.dolman { width: 86px; background-position: -349px 0 } #garment-modal .modal-container .spec-nav.tee-nav a.dolman:hover,#garment-modal .modal-container .spec-nav.tee-nav a.dolman.selected { background-position: -349px -58px } #garment-modal .modal-container .spec-nav.tee-nav a.slouchy-t { width: 86px; background-position: -435px 0 } #garment-modal .modal-container .spec-nav.tee-nav a.slouchy-t:hover,#garment-modal .modal-container .spec-nav.tee-nav a.slouchy-t.selected { background-position: -435px -58px } #garment-modal .modal-container .spec-nav.tee-nav a.slouchy-v { width: 86px; background-position: -521px 0 } #garment-modal .modal-container .spec-nav.tee-nav a.slouchy-v:hover,#garment-modal .modal-container .spec-nav.tee-nav a.slouchy-v.selected { background-position: -521px -58px } #garment-modal .modal-container .spec-nav.tee-nav a.premium { width: 87px; background-position: -607px 0 } #garment-modal .modal-container .spec-nav.tee-nav a.premium:hover,#garment-modal .modal-container .spec-nav.tee-nav a.premium.selected { background-position: -607px -58px } #garment-modal .modal-container .spec-nav.tank-nav { background-position: 0 116px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-regular { width: 111px; margin-left: 16px; background-position: -16px -116px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-regular:hover,#garment-modal .modal-container .spec-nav.tank-nav a.tank-regular.selected { background-position: -16px -174px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-triblend { width: 111px; background-position: -127px -116px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-triblend:hover,#garment-modal .modal-container .spec-nav.tank-nav a.tank-triblend.selected { background-position: -127px -174px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-muscle { width: 111px; background-position: -238px -116px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-muscle:hover,#garment-modal .modal-container .spec-nav.tank-nav a.tank-muscle.selected { background-position: -238px -174px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-jr-racerback { width: 111px; background-position: -349px -116px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-jr-racerback:hover,#garment-modal .modal-container .spec-nav.tank-nav a.tank-jr-racerback.selected { background-position: -349px -174px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-triblend-racerback { width: 111px; background-position: -460px -116px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-triblend-racerback:hover,#garment-modal .modal-container .spec-nav.tank-nav a.tank-triblend-racerback.selected { background-position: -460px -174px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-premium-racerback { width: 112px; background-position: -571px -116px } #garment-modal .modal-container .spec-nav.tank-nav a.tank-premium-racerback:hover,#garment-modal .modal-container .spec-nav.tank-nav a.tank-premium-racerback.selected { background-position: -571px -174px } #garment-modal .modal-container .spec-nav.hoodie-nav { background-position: 0 -348px } #garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-classic { width: 131px; margin-left: 88px; background-position: -88px -348px } #garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-classic:hover,#garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-classic.selected { background-position: -88px -406px } #garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-lightweight { width: 131px; background-position: -220px -348px } #garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-lightweight:hover,#garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-lightweight.selected { background-position: -220px -406px } #garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-classic-zip { width: 131px; background-position: -350px -348px } #garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-classic-zip:hover,#garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-classic-zip.selected { background-position: -350px -406px } #garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-lightweight-zip { width: 131px; background-position: -480px -348px } #garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-lightweight-zip:hover,#garment-modal .modal-container .spec-nav.hoodie-nav a.hoodie-lightweight-zip.selected { background-position: -480px -406px } #garment-modal .modal-container .spec-nav.crewneck-nav { background-position: 0 -232px } #garment-modal .modal-container .spec-nav.crewneck-nav a.crewneck-regular { width: 152px; margin-left: 122px; background-position: -122px -232px } #garment-modal .modal-container .spec-nav.crewneck-nav a.crewneck-regular:hover,#garment-modal .modal-container .spec-nav.crewneck-nav a.crewneck-regular.selected { background-position: -122px -290px } #garment-modal .modal-container .spec-nav.crewneck-nav a.crewneck-lightweight { width: 151px; background-position: -426px -232px } #garment-modal .modal-container .spec-nav.crewneck-nav a.crewneck-lightweight:hover,#garment-modal .modal-container .spec-nav.crewneck-nav a.crewneck-lightweight.selected { background-position: -426px -290px } #garment-modal .modal-container .spec-nav.material-nav { background-position: 0 -464px } #garment-modal .modal-container .spec-nav.material-nav a.art_print { width: 132px; margin-left: 153px; background-position: -153px -464px } #garment-modal .modal-container .spec-nav.material-nav a.art_print:hover,#garment-modal .modal-container .spec-nav.material-nav a.art_print.selected { background-position: -153px -522px } #garment-modal .modal-container .spec-nav.material-nav a.poster { width: 131px; background-position: -285px -464px } #garment-modal .modal-container .spec-nav.material-nav a.poster:hover,#garment-modal .modal-container .spec-nav.material-nav a.poster.selected { background-position: -285px -522px } #garment-modal .modal-container .spec-nav.material-nav a.art_canvas { width: 131px; background-position: -416px -464px } #garment-modal .modal-container .spec-nav.material-nav a.art_canvas:hover,#garment-modal .modal-container .spec-nav.material-nav a.art_canvas.selected { background-position: -416px -522px } #garment-modal .modal-container .spec-nav.longsleeve-nav { background-position: 0 -580px } #garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-regular { width: 132px; margin-left: 153px; background-position: -153px -580px } #garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-regular:hover,#garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-regular.selected { background-position: -153px -638px } #garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-scoop { width: 132px; background-position: -284px -580px } #garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-scoop:hover,#garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-scoop.selected { background-position: -284px -638px } #garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-premium { width: 132px; background-position: -415px -580px } #garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-premium:hover,#garment-modal .modal-container .spec-nav.longsleeve-nav a.longsleeve-premium.selected { background-position: -415px -638px } #garment-modal .modal-container .spec-nav.mug-nav { background-position: 0 -812px } #garment-modal .modal-container .spec-nav.mug-nav a.mug-coffee { width: 131px; margin-left: 217px; background-position: -217px -928px } #garment-modal .modal-container .spec-nav.mug-nav a.mug-coffee:hover,#garment-modal .modal-container .spec-nav.mug-nav a.mug-coffee.selected { background-position: -217px -986px } #garment-modal .modal-container .spec-nav.mug-nav a.mug-travel { width: 131px; background-position: -348px -928px } #garment-modal .modal-container .spec-nav.mug-nav a.mug-travel:hover,#garment-modal .modal-container .spec-nav.mug-nav a.mug-travel.selected { background-position: -348px -986px } #garment-modal .modal-container .spec-nav.hat-nav { background-position: 0 -812px } #garment-modal .modal-container .spec-nav.hat-nav a.dad-hat { width: 131px; margin-left: 217px; background-position: -217px -928px } #garment-modal .modal-container .spec-nav.hat-nav a.dad-hat:hover,#garment-modal .modal-container .spec-nav.hat-nav a.dad-hat.selected { background-position: -217px -986px } #garment-modal .modal-container .spec-nav.hat-nav a.trucker-hat { width: 131px; background-position: -348px -928px } #garment-modal .modal-container .spec-nav.hat-nav a.trucker-hat:hover,#garment-modal .modal-container .spec-nav.hat-nav a.trucker-hat.selected { background-position: -348px -986px } #garment-modal .modal-container .spec-nav.kids-nav { background-position: 0 -696px } #garment-modal .modal-container .spec-nav.kids-nav a.kids-tee { width: 132px; margin-left: 198px; background-position: -198px -696px } #garment-modal .modal-container .spec-nav.kids-nav a.kids-tee:hover,#garment-modal .modal-container .spec-nav.kids-nav a.kids-tee.selected { background-position: -198px -754px } #garment-modal .modal-container .spec-nav.kids-nav a.kids-snap { width: 132px; background-position: -332px -696px } #garment-modal .modal-container .spec-nav.kids-nav a.kids-snap:hover,#garment-modal .modal-container .spec-nav.kids-nav a.kids-snap.selected { background-position: -332px -754px } @media screen and (max-width: 480px) { .non-modal #garment-modal { visibility:visible; display: block; margin: 0px auto; width: 700px !important; margin-left: auto !important } .non-modal #garment-modal div.close-reveal-modal { display: none } } .mtrl-modal { display: none; position: fixed; left: 0; right: 0; background-color: var(--color-neutral-100); padding: 0; max-height: 80%; width: 55%; margin: auto; overflow-y: auto; border-radius: 2px; will-change: top, opacity } @media only screen and (max-width: 992px) { .mtrl-modal { width:80% } } .mtrl-modal h1,.mtrl-modal h2,.mtrl-modal h3,.mtrl-modal h4 { margin-top: 0 } .mtrl-modal .mtrl-modal-content { background-color: var(--color-white); padding: 24px } .mtrl-modal .mtrl-modal-close { cursor: pointer } .mtrl-modal .mtrl-modal-footer { border-radius: 0 0 2px 2px; background-color: var(--color-neutral-100); padding: 4px 6px; height: 56px; width: 100% } .mtrl-modal .mtrl-modal-footer .btn,.mtrl-modal .mtrl-modal-footer .btn-flat { float: right; margin: 6px } .mtrl-modal-overlay { position: fixed; z-index: 999; top: -100px; left: 0; bottom: 0; right: 0; height: 125%; width: 100%; background: #000; display: none; will-change: opacity } .mtrl-modal.mtrl-modal-fixed-header { padding: 0; height: 80% } .mtrl-modal.mtrl-modal-fixed-header .mtrl-modal-content { position: absolute; height: calc(100% - 60px); max-height: 100%; width: 100%; overflow-y: auto; bottom: 0px } @media (min-width: 768px) { .mtrl-modal.mtrl-modal-fixed-header .mtrl-modal-content { height:calc(100% - 100px) } } .mtrl-modal.mtrl-modal-fixed-footer { padding: 0; height: 80% } .mtrl-modal.mtrl-modal-fixed-footer .mtrl-modal-content { position: absolute; height: calc(100% - 100px); max-height: 100%; width: 100%; overflow-y: auto } .mtrl-modal.mtrl-modal-fixed-footer .mtrl-modal-footer { border-top: 1px solid rgba(0,0,0,0.1); position: absolute; bottom: 0 } .mtrl-modal.bottom-sheet { top: auto; bottom: -100%; margin: 0; width: 100%; max-height: 45%; border-radius: 0; will-change: bottom, opacity } .mtrl-modal.top-sheet { bottom: auto; top: -100%; margin: 0; width: 100%; max-height: 45%; border-radius: 0; will-change: top, opacity } .mtrl-modal.full-screen { bottom: 0; top: -100%; margin: 0; min-width: 100%; min-height: 100%; border-radius: 0; will-change: top, opacity } .mtrl-modal.right-sheet { left: auto; right: -100%; margin: 0; height: 100%; max-width: 45%; border-radius: 0; will-change: right, opacity } .mtrl-modal.left-sheet { right: auto; left: -100%; margin: 0; height: 100%; max-width: 45%; border-radius: 0; will-change: left, opacity } .alert-box,.alert-box--cool,.alert-box--spicy,.alert-box--positive,.alert-box--neutral,.alert-box--mild,.alert-box--important { border-left: 4px solid; border-radius: 4px; color: var(--color-neutral-900); font-family: var(--font-family-primary); font-size: var(--font-size-small-200); line-height: 1.5em; margin: 15px 0; padding: 20px; text-align: left } @media (min-width: 768px) { .alert-box,.alert-box--cool,.alert-box--spicy,.alert-box--positive,.alert-box--neutral,.alert-box--mild,.alert-box--important { font-size:var(--font-size-small-400); padding: 30px } } .alert-box p,.alert-box--cool p,.alert-box--spicy p,.alert-box--positive p,.alert-box--neutral p,.alert-box--mild p,.alert-box--important p { margin-bottom: 10px } .alert-box p:last-child,.alert-box--cool p:last-child,.alert-box--spicy p:last-child,.alert-box--positive p:last-child,.alert-box--neutral p:last-child,.alert-box--mild p:last-child,.alert-box--important p:last-child { margin-bottom: 0 } .alert-box--important { background-color: var(--color-primary-100); border-left-color: transparent } .alert-box--mild { background-color: var(--color-warning-100); border-left-color: var(--color-warning-500) } .alert-box--mild strong { font-family: var(--font-family-primary-bold) } .alert-box--neutral { background-color: var(--color-neutral-200); border-left-color: var(--color-neutral-300) } .alert-box--neutral.alert-box--no-border { border-radius: 5px; color: var(--color-neutral-900); font-size: var(--font-size-small-400); padding: 30px 25px } .alert-box--no-border { border-left-color: transparent } .alert-box--positive { background-color: var(--color-success-500-a10); border-left-color: var(--color-success-500) } .alert-box--spicy { background-color: var(--color-danger-100); border-left-color: var(--color-danger-500) } .alert-box--cool { background-color: var(--color-primary-100); border-left-color: var(--color-primary-500) } .alert-box--narrow { padding: 20px } .alert-box--narrowest { padding: 15px; font-size: var(--font-size-small-200) } .alert-box--desktop-spacing { font-size: var(--font-size-small-300) } @media (min-width: 768px) { .alert-box--desktop-spacing { margin:0 0 30px 0 } } .alert-box--no-space { margin: 0 } .alert-box--sm-space { margin: 5px } .alert-box--inline { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column } @media (min-width: 768px) { .alert-box--inline { -webkit-align-items:center; align-items: center; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between } } .alert-box--inline-no-space { -webkit-justify-content: flex-start; justify-content: flex-start } .alert-box--no-border { border-left-color: transparent } .alert-box--paragraph-spacing { padding-top: 10px } .flash .notice,.flash .error,.flash .warning { color: var(--color-white); text-align: center; border: none; margin-left: auto; margin-right: auto; padding: 10px 15px; font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400) } .flash .notice *,.flash .error *,.flash .warning * { color: var(--color-white) } .flash .notice { background-color: var(--color-success-500) } .flash .notice a { color: var(--color-white); text-decoration: underline } .flash .notice a:hover { color: var(--color-neutral-900) } .flash .warning { background-color: var(--color-warning-500); color: var(--color-neutral-900) } .flash .error { background-color: var(--color-danger-500) } .form__actions .form__field:first-child { margin-left: 0 } .form__fields--inline .form__actions { -webkit-flex-basis: 1; flex-basis: 1; -webkit-flex-shrink: 0; flex-shrink: 0 } .form__actions--right { text-align: right } .form__fields--inline .form__body { -webkit-flex-grow: 1; flex-grow: 1 } .form__body.border { border: 2px solid var(--color-neutral-200); border-radius: 5px; padding: 40px; width: 589px } .form__checks,.form__radios { margin-bottom: 20px; margin-left: 6px; margin-top: 15px } .form__control { background-color: var(--color-white); background-image: none; border: 1px solid var(--color-neutral-300); border-radius: 5px; color: var(--color-neutral-900); display: block; font-family: var(--font-family-primary); font-size: var(--font-size-small-400); height: 38px; line-height: 1.4285714286; padding: 6px 15px; transition: border-color 0.2s, box-shadow 0.2s; width: 100% } .form__control:focus { border-color: #66afe9; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6); outline: 0 } .form__control--1 { background: var(--color-neutral-300); border-radius: 5px; font-size: var(--font-size-small-200); height: 28px; width: 100% } .form__control--1::-webkit-input-placeholder { color: var(--color-white) } .form__control--1:-ms-input-placeholder { color: var(--color-white) } .form__control--1::-ms-input-placeholder { color: var(--color-white) } .form__control--1::placeholder { color: var(--color-white) } .form__control--1:focus { border-color: var(--color-white); box-shadow: none } .form__control--lg-1 { font-size: var(--font-size-medium-100); height: 50px } .form__errors { margin-bottom: 10px; margin-top: 10px; text-align: left } .form__field { display: block; margin-bottom: 15px; margin-top: 5px; width: 100% } .form__field label { font-family: var(--font-family-primary-semibold) } .form__fields--inline .form__field { -webkit-flex-grow: 1; flex-grow: 1; margin-left: 0; width: calc(100% - 5px) } @media (min-width: 768px) { .form__fields--inline .form__field { margin-left:5px; width: calc(100% - 5px) } .form__fields--inline .form__field:first-child { margin-left: 0; width: 100% } } .form__actions .form__field { margin-left: 5px } .form__field .form-group { margin-bottom: 0 } .form__fields--inline .form__field--no-margin { margin-left: 0 } @media (min-width: 768px) { .form__field--max1 { max-width:300px } } .form__field--max2 { max-width: 455px } .form__field--max3 { max-width: 475px } .form__field--check,.form__field--radio { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 11px; margin-bottom: 11px } .form__field--check label,.form__field--radio label { display: -webkit-flex; display: flex; margin: 0 } .form__field--check label span,.form__field--radio label span { white-space: normal } .m-checkout__contains-gift { margin: 20px 0 } @media (min-width: 600px) { .m-checkout__contains-gift { margin:30px 0 } } .m-checkout__contains-gift .form__field--check-label { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column } .m-checkout__contains-gift .form__field--check-label span { color: var(--color-neutral-600); font-size: 12px; margin: 5px 0 0 } .m-checkout__contains-gift .form__field--check { margin: 0 } .m-checkout__contains-gift .form__field--check input[type="checkbox"] { -webkit-align-self: flex-start; align-self: flex-start; margin: 2px 6px 0 0 } .form__field--check input[type="checkbox"] { margin: 5px 5px 5px 0 } .form__field--check input.no-margin[type="checkbox"] { margin: 0 6px 0 0 } .form__field--inline { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center } .form__field--inline>* { margin: 5px 5px 5px 0 } .form__field--inline>*:last-child { margin-right: 0 } .form__field--inline input[type="checkbox"] { margin: 5px 5px 5px 0 } .form__field--inline label { white-space: nowrap } .form__field-label--normal label { font-weight: normal } .form__field-label--no-flex label { display: block } .form__radios label { border-radius: 5px; min-width: 35px; padding: 5px } .form__radios input[type="radio"] { z-index: 1; padding: 5px } .form__radios input[type="radio"]:hover~label { background-color: var(--color-neutral-200); box-shadow: -25px 0 0 2px var(--color-neutral-200),2px 0 0 2px var(--color-neutral-200),-25px 0 0 4px var(--color-neutral-400),2px 0 0 4px var(--color-neutral-400) } .form__radios input[type="radio"]:checked~label { background-color: var(--color-neutral-200); box-shadow: -25px 0 0 2px var(--color-neutral-200),2px 0 0 2px var(--color-neutral-200),-25px 0 0 4px var(--color-primary-500),2px 0 0 4px var(--color-primary-500) } .form__radios input[type="radio"]:focus-visible~label { background-color: var(--color-neutral-200); box-shadow: -25px 0 0 2px var(--color-neutral-200),2px 0 0 2px var(--color-neutral-200),-25px 0 0 3px var(--color-neutral-400),2px 0 0 3px var(--color-neutral-400),-25px 0 0 4px var(--color-neutral-600),2px 0 0 4px var(--color-neutral-600) } .form__radios input[type="radio"]~label { cursor: pointer } .form__field--radio input[type="radio"] { margin: 5px 5px 5px 0 } .form__field--radio input.no-margin[type="radio"] { margin: 5px } .form__radios label input[type="radio"],.form__radios label input[type="radio"] { margin: 4px 6px 0 0 } .form__field--label-multiline { -webkit-flex-direction: column; flex-direction: column } .form__field--space-lg-1 { margin-bottom: 10px } .form__field--space-lg-2 { margin-bottom: 15px } .form__field--spread-radio { margin-right: 20px } .form__field--suggestions { background-color: var(--color-white); border: 1px solid var(--color-neutral-200); border-top-width: 0; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; padding-top: 8px } .form__field--suggestions h4 { border-bottom: 1px solid var(--color-neutral-200); color: var(--color-neutral-400); font-size: var(--font-size-small-100); margin-top: 10px; padding-bottom: 6px; text-transform: uppercase } .form__field--suggestions ul li { font-weight: bold; margin-bottom: 6px; margin-top: 14px } .form__fields--s-l1 .form__field { margin-bottom: 10px } .form__fields--s-l2 .form__field { margin-bottom: 15px } .form__fields--s-l3 .form__field { margin-bottom: 24px } .form__fields--inline { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; width: 100% } .form__fields--inline .btn { display: block; width: 100% } .form__fields--inline .form__actions { margin-left: 10px } @media (max-width: 767px) { .form__fields--inline .form__actions--no-margin-mobile { margin-left:0; margin-top: 20px; width: 100% } } .form__fields--inline .form__fields--autocomplete-search-inline { -webkit-flex-grow: 2; flex-grow: 2; position: relative } @media (max-width: 1024px) { .form__fields--inline--d { display:block } .form__fields--inline--d .form__field { margin-left: 0 } } @media (max-width: 767px) { .form__fields--wrap-mobile { -webkit-flex-wrap:wrap; flex-wrap: wrap } } @media (max-width: 413px) { .form__fields--inline--wrap-s { -webkit-flex-wrap:wrap; flex-wrap: wrap } .form__fields--inline--wrap-s .form__field { margin-left: 0 } .form__fields--inline--wrap-s .form__actions .form__field { margin-left: 5px } .form__fields--inline--wrap-s .form__actions .form__field:first-child { margin-left: 0 } } .form__group .form__field-h--space { margin: 30px 0 15px } .form__field--no-space { margin-bottom: 0; margin-top: 0 } .form__field-wrap.valid,.form__field-wrap.invalid { padding-right: 38px; background-repeat: no-repeat; background-position: right 0 center } .form__field-wrap.valid input,.form__field-wrap.invalid input { border-bottom-right-radius: 0; border-top-right-radius: 0 } .form__field-wrap.valid { background-image: url("https://assets.teepublic.com/assets/icons/braintree/check-square-0601e5da84b79316f724e7ff64e9ec6583b63628dc679392c4684ff2fde5017e.svg") } .form__field-wrap.invalid { background-image: url("https://assets.teepublic.com/assets/icons/braintree/x-square-67fb6e29fb7109e39bd1ca35888ba92b8980a44f69884250576a427d74c0b3ff.svg") } .form__field-note { color: var(--color-neutral-600); font-size: var(--font-size-small-200); margin-bottom: 25px; margin-top: 10px; text-align: left } .label+.form__fields--inline { margin-top: -7px } .form__group { margin-bottom: 16px } .form__image-uploader img { margin-bottom: 10px; max-height: 200px; max-width: 200px } .form__note { color: var(--color-neutral-600); line-height: 17px; margin-bottom: 5px; margin-top: 5px } @media (max-width: 374px) { .form__note { font-size:var(--font-size-small-200) } } .form__note b,.form__note strong { color: inherit } .form__section { margin-top: 15px; margin-bottom: 15px } .form__top-note { margin: 15px } .form__radios--inline { display: block; margin-top: 11px; margin-bottom: 11px } .form__radios--inline:after { content: ""; clear: both; display: table } .form__radios--inline .form__field--radio { margin-top: 0; margin-bottom: 0; -webkit-flex-basis: 50px; flex-basis: 50px; -webkit-flex-grow: 0; flex-grow: 0; float: left; width: auto; margin-right: 20px } .form__radios--inline .form__field--radio:first-child { width: auto } .form__checks--inline { display: block; margin-top: 11px; margin-bottom: 11px } .form__checks--inline:after { content: ""; clear: both; display: table } .form__checks--inline .form__field--check { margin-top: 0; margin-bottom: 0; -webkit-flex-basis: 50px; flex-basis: 50px; -webkit-flex-grow: 0; flex-grow: 0; float: left; width: auto; margin-right: 20px } .form__checks--inline .form__field--check:first-child { width: auto } .form__fields .form__field--related { margin-top: 8px; margin-bottom: 20px } .input-labelled { position: relative } .input-labelled__label { color: var(--color-neutral-400); font-size: var(--font-size-small-100); left: 12px; pointer-events: none; position: absolute; top: 10px } .input-labelled__label.required:after { content: '*'; margin-left: 4px } .input-labelled__input { border-radius: 3px; font-size: var(--font-size-small-400); height: 58px; padding: 24px 12px 6px } .form-body__radios--single-row { display: -webkit-flex; display: flex } .form-radios__labels--single-row { margin-right: 20px } .form__fields--inline .btn.tp-btn--icon { display: -webkit-flex; display: flex } .form__actions--copy { position: relative } .form__actions--tooltip { background-color: var(--color-success-500); border-radius: 5px; bottom: 125%; color: var(--color-white); font-size: var(--font-size-small-200); font-weight: 700; width: 86px; padding: 12px 15px; position: absolute; text-align: center; visibility: hidden; z-index: 1 } @media (min-width: 600px) { .form__actions--tooltip { font-size:var(--font-size-small-400) } } .form__actions--tooltip.animate { -webkit-animation: fade-out-down 0.2s ease-in-out forwards; animation: fade-out-down 0.2s ease-in-out forwards } .form__actions--tooltip.success { -webkit-animation: fade-in-up 0.2s ease-in-out forwards; animation: fade-in-up 0.2s ease-in-out forwards; visibility: visible } .form__actions--tooltip::after { border-color: var(--color-success-500) transparent transparent; border-style: solid; border-width: 7px; content: ''; left: 50%; margin-left: -7px; position: absolute; top: 100% } input.form__control[type="color"] { padding: 5px; height: 50px; width: 50px } .quantity-stepper__container { -webkit-align-items: stretch; align-items: stretch; border: 2px solid var(--color-neutral-300); border-radius: 12px; display: -webkit-flex; display: flex; height: 100%; width: 100% } .quantity-stepper__container input { background-color: transparent; border: none; box-shadow: none; font-size: var(--font-size-small-400); line-height: 1; margin: auto; text-align: center; width: 50% } .quantity-stepper__container input::-webkit-outer-spin-button,.quantity-stepper__container input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } .quantity-stepper__container input[type=number] { -moz-appearance: textfield } .quantity-stepper__container.fixed-width { width: 120px } .quantity-stepper__controls { border: none; cursor: pointer; color: var(--color-primary-400); font-size: var(--font-size-medium-200); font-weight: bold; line-height: 1; margin: 0 auto; padding: 6px 10px; width: 1.5em } .quantity-stepper__controls.inactive { cursor: default; color: var(--color-neutral-300) } .quantity-stepper__decrement { border-bottom-left-radius: 10px; border-top-left-radius: 10px } .quantity-stepper__increment { border-bottom-right-radius: 10px; border-top-right-radius: 10px } .radio-selector__radio { display: block; width: 0; height: 0 } .radio-selector__radio~.radio-selector__select { transition: all 0.1s ease-in; border: 2px solid var(--color-neutral-300); border-radius: 12px; color: var(--color-neutral-900); cursor: pointer; padding: 13.25px 0 } .radio-selector__radio:hover~.radio-selector__select { border-color: var(--color-neutral-900) } .radio-selector__radio:checked~.radio-selector__select { background-color: var(--color-neutral-900); border-color: var(--color-neutral-900); color: var(--color-white) } .radio-selector__radio:focus-visible~.radio-selector__select { outline: var(--color-primary-500) auto 2px; background-color: var(--color-neutral-900) } .radio-selector__radios { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin: 1px; width: 100% } .radio-selector__radios label { margin-bottom: 0 } .radio-selector__radios input[type="radio"] { margin-top: 0; opacity: 0 } .radio-selector__radios--wrap { display: grid; grid-gap: 5px; grid-template-columns: repeat(2, 1fr) } .radio-selector__radios--wrap .radio-selector__select { display: block; text-align: center; font-family: var(--font-family-primary-semibold) } .radio-selector__radios--wrap-2 { grid-template-columns: repeat(2, 1fr) } .radio-selector__radios--wrap-3 { grid-template-columns: repeat(3, 1fr) } .radio-selector__radios--wrap-4 { grid-template-columns: repeat(4, 1fr) } .tp-label--neutral { --label-background-color: var(--color-neutral-200); --label-border-color: var(--color-neutral-300); --label-icon-color: var(--color-neutral-900); --label-text-color: var(--color-neutral-900) } .tp-label--eco { --label-background-color: var(--color-success-100); --label-border-color: var(--color-success-300); --label-icon-color: var(--color-neutral-900); --label-text-color: var(--color-neutral-900) } .tp-label--highlight { --label-background-color: var(--color-primary-100); --label-border-color: var(--color-primary-200); --label-icon-color: var(--color-primary-600); --label-text-color: var(--color-primary-700) } .tp-label--success { --label-background-color: var(--color-success-100); --label-border-color: var(--color-success-300); --label-icon-color: var(--color-success-700); --label-text-color: var(--color-success-800) } .tp-label--warning { --label-background-color: var(--color-warning-100); --label-border-color: var(--color-warning-300); --label-icon-color: var(--color-warning-600); --label-text-color: var(--color-warning-800) } .tp-label--danger { --label-background-color: var(--color-danger-100); --label-border-color: var(--color-danger-200); --label-icon-color: var(--color-danger-500); --label-text-color: var(--color-danger-700) } .tp-label--inactive { --label-background-color: var(--color-neutral-200); --label-border-color: var(--color-neutral-300); --label-icon-color: var(--color-neutral-500); --label-text-color: var(--color-neutral-500) } .tp-label--on-dark { --label-background-color: var(--color-warning-900); --label-border-color: var(--color-warning-700); --label-text-color: var(--color-warning-100); --label-icon-color: var(--color-warning-500) } .tp-label { -webkit-align-items: center; align-items: center; background-color: var(--label-background-color); border: 2px solid var(--label-border-color); border-radius: 8px; color: var(--label-text-color); display: -webkit-inline-flex; display: inline-flex; font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-200); -webkit-justify-content: center; justify-content: center; line-height: 1; padding: 4px 8px; text-align: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } .tp-label .teepublicon svg { fill: var(--label-icon-color) } .tp-label--tile { background: var(--color-primary-300); border: 2px solid var(--color-neutral-900); border-radius: 800px; color: var(--color-neutral-900); line-height: var(--font-size-small-400); padding: 4px 12px; position: absolute; top: -15px } .tp-label .tp-tooltip[data-popper-placement^="right"]>.tp-tooltip--arrow { left: -8px } .tp-label .tp-tooltip[data-popper-placement^="left"]>.tp-tooltip--arrow { right: 0 } .tp-label--icon { gap: 4px } .tp-loader { width: 100% } .tp-loader--default { height: 100%; position: fixed; left: 0; top: 0; background-color: var(--color-neutral-900-a80); z-index: 10000 } .tp-loader__spinner { position: relative; background-image: url("https://assets.teepublic.com/assets/icons/spinner-6b9b25aa9eee76bff953098ec9d520217d6ad4aae2870e1b2d766e9f35797647.svg"); background-position: -100000px -100000px; background-repeat: no-repeat } .tp-loader__spinner>* { transition: 0.3s } .tp-loader__spinner.updating { min-height: 80px } .tp-loader__spinner.updating:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url("https://assets.teepublic.com/assets/icons/spinner-6b9b25aa9eee76bff953098ec9d520217d6ad4aae2870e1b2d766e9f35797647.svg"); background-repeat: no-repeat; background-size: 64px 64px; background-position: center } .tp-loader__spinner.updating>* { opacity: .1 } .tp-loader__spinner--default { top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 10000 } .vc-badge-notification { position: relative } .vc-badge-notification:has(.vc-badge-notification__counter) { margin-right: 2px; width: 40px } .vc-badge-notification--legacy .vc-badge-notification__counter { background-color: #ca2065; border: 1px solid var(--color-neutral-900); border-radius: 12px; color: var(--color-white); font-size: var(--font-size-small-100); font-family: var(--font-family-primary-bold); line-height: var(--font-size-medium-100); min-width: 20px; padding-left: 4px; padding-right: 4px; top: 0; right: 4px } .vc-badge-notification--default .vc-badge-notification__counter { background-color: var(--color-warning-400); border: 2px solid var(--color-neutral-900); border-radius: 20px; color: var(--color-neutral-900); font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-200); line-height: 1; padding: 2px 4px; min-width: 20px; top: -4px; right: -4px } .vc-badge-notification__counter { position: absolute; text-align: center } .tpvc-progress-bar__container { background-color: var(--color-primary-200); border-radius: 10px; height: 10px; margin: auto 0; overflow: hidden; width: 100% } .tpvc-progress-bar__container.campaign { height: 11px; margin-top: 0; margin-bottom: 20px } .tpvc-progress-bar__container.campaign .tpvc-progress-bar__fill { background-color: var(--color-success-500) } .tpvc-progress-bar__container.campaign-tile { background-color: var(--color-white-a80); margin-top: 10px } .tpvc-progress-bar__container.campaign-tile.card__campaign-progress-bar { height: 5px } .tpvc-progress-bar__container.campaign-tile .tpvc-progress-bar__fill { background-color: var(--color-success-500) } .tpvc-progress-bar__container .tpvc-progress-bar__fill { background-color: var(--color-primary-600); border-radius: 10px; height: 100% } .tp-toast-notification { padding-left: 16px; border-radius: 12px; box-shadow: 0 4px 8px 0 var(--color-neutral-900-a20); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; width: 320px } .tp-toast-notification--neutral { background: var(--color-white); border: 2px solid var(--color-neutral-100) } .tp-toast-notification--success { background: var(--color-success-100); border: 2px solid var(--color-success-200) } .tp-toast-notification--warning { background: var(--color-warning-100); border: 2px solid var(--color-warning-200) } .tp-toast-notification--danger { background: var(--color-danger-100); border: 2px solid var(--color-danger-200) } .tp-toast-notification--information { background: var(--color-primary-100); border: 2px solid var(--color-primary-200) } .tp-toast-notification__message { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1 } .tp-toast-notification__main { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex: 1; flex: 1; gap: 4px } .tp-toast-notification__text { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-semibold); font-weight: 600; margin-right: 24px } .tp-toast-notification__close-button { margin-top: 0; margin-bottom: 0 } .tp-toast-notification__close-button.btn--no-background { padding: 16px } .tp-toast-notification__close-button.tp-btn--icon .teepublicon { margin-right: 0 } .tp-btn--big { box-shadow: none; font-size: var(--font-size-medium-300); font-family: var(--font-family-display); -webkit-font-variant-ligatures: none; font-variant-ligatures: none; margin-bottom: 5px; padding: 16px 24px; text-transform: uppercase } .tp-btn--block { width: 100% } .tp-btn--large { box-shadow: none; font-family: var(--font-family-primary-semibold); font-size: var(--font-size-medium-100); font-weight: 600; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; line-height: var(--font-size-medium-300); margin-bottom: 5px; padding: 12px 24px } @media (min-width: 600px) { .tp-btn--large { font-size:var(--font-size-medium-100) } } .tp-btn--medium { box-shadow: none; font-size: var(--font-size-small-200); font-weight: 700; line-height: 1.5; padding: 8px 16px; text-transform: capitalize } @media (min-width: 600px) { .tp-btn--medium { font-size:var(--font-size-small-400) } } .tp-btn--small { box-shadow: none; font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-200); padding: 10px; text-transform: none } .tp-btn--icon { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; font-weight: 600; padding: 12px 15px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content } .tp-btn--icon .teepublicon { margin-right: 5px } .tp-btn--icon.tp-btn--icon-trailing .teepublicon { margin-left: 5px; margin-right: 0 } .tp-btn--icon.btn--segmented { background-color: transparent; border: 1px solid var(--color-neutral-200); padding: 5px; margin-right: -5px } .tp-btn--icon.btn--segmented:hover { border-color: var(--color-primary-500) } .btn.link__cta { border-radius: none } .btn--no-background { background: none; padding: 0 } .btn--no-background:hover,.btn--no-background:focus,.btn--no-background:active { background: none; box-shadow: none; cursor: pointer } .btn--animated { overflow: hidden; position: relative } .btn--animated::after { -webkit-animation: shine 2s ease-in-out infinite; animation: shine 2s ease-in-out infinite; -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 10; animation-iteration-count: 10; content: ''; background: rgba(255,255,255,0.2); background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0.75) 90%, rgba(255,255,255,0.1) 100%); height: 200%; left: -200%; opacity: 0; position: absolute; top: -100%; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 200% } @-webkit-keyframes shine { 10% { left: -200%; opacity: 1; top: -200%; transition-duration: .7s, .7s, .15s; transition-property: right, top, opacity; transition-timing-function: ease } 100% { opacity: 0; top: -10%; left: -10%; transition-property: right, top, opacity } } @keyframes shine { 10% { left: -200%; opacity: 1; top: -200%; transition-duration: .7s, .7s, .15s; transition-property: right, top, opacity; transition-timing-function: ease } 100% { opacity: 0; top: -10%; left: -10%; transition-property: right, top, opacity } } :root,[data-theme="default"] { --design-tile-horizontal-min-width: 188px; --design-tile-min-width: 0 } .tp-design-tile--dark { --tile-artist-color: var(--color-neutral-400); --tile-background-color: var(--color-neutral-800); --tile-price--original-color: var(--color-neutral-500); --tile-price--regular-color: var(--color-white); --tile-price--sale-color: var(--color-accent-orange-500); --tile-title-color: var(--color-white); --tile-countdown-color: var(--color-accent-orange-500) } .tp-design-tile--light { --tile-artist-color: var(--color-neutral-700); --tile-background-color: transparent; --tile-price--original-color: var(--color-neutral-600); --tile-price--regular-color: var(--color-neutral-900); --tile-price--sale-color: var(--color-accent-orange-600); --tile-title-color: var(--color-neutral-900); --tile-countdown-color: var(--color-accent-orange-600) } .tp-design-tile--light:hover { background-color: var(--color-white); box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } .tp-design-tile { background: var(--tile-background-color); border-radius: 12px; min-width: var(--design-tile-min-width); padding: 8px 8px 12px; position: relative; transition: .3s } .tp-design-tile:hover { box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } .tp-design-tile__body { padding-bottom: 8px; position: relative; text-align: center } .tp-design-tile__pricing { font-family: "Roobert-Bold", Helvetica, sans-serif; font-size: var(--font-size-small-300); line-height: 1.42857; margin-top: 4px } @media (min-width: 768px) { .tp-design-tile__pricing { font-size:var(--font-size-small-400) } } .tp-design-tile__price--original { color: var(--tile-price--original-color); font-family: var(--font-family-primary); font-size: var(--font-size-small-200); text-decoration: line-through } @media (min-width: 768px) { .tp-design-tile__price--original { font-size:var(--font-size-small-300) } } .tp-design-tile__price--regular { color: var(--tile-price--regular-color) } .tp-design-tile__price--sale { color: var(--tile-price--sale-color); margin-right: 4px } .tp-design-tile__sale-pricing { -webkit-align-items: baseline; align-items: baseline; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .tp-design-tile__sale-countdown { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .tp-design-tile__artist { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--tile-artist-color) } .tp-design-tile__artist.tp-design-tile__artist--linked { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; gap: 2px } .tp-design-tile__artist.tp-design-tile__artist--linked .link__content { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 186px } .tp-design-tile__image { border-radius: 8px; margin-bottom: 8px; width: 100%; display: block } .tp-design-tile__title { color: var(--tile-title-color); font-family: "Roobert-SemiBold", Helvetica, sans-serif; font-size: var(--font-size-small-300); line-height: 1.42857; margin: 0 4px } @media (min-width: 768px) { .tp-design-tile__title { font-size:var(--font-size-small-400) } } .tp-design-tile__label { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; position: relative } .tp-design-tile__label .tp-label { font-size: var(--font-size-small-200); z-index: 1 } @media (min-width: 768px) { .tp-design-tile__label .tp-label { font-size:var(--font-size-small-300) } } .tp-design-tile__canvas-label { cursor: pointer; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; top: -43px; pointer-events: none; position: absolute; text-align: center; width: 100% } .tp-design-tile__canvas-label .tp-label { text-align: center; background: rgba(255,255,255,0.8); display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; border-radius: 800px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 12px; line-height: 16px } .tp-design-tile__order-item-details { font-size: var(--font-size-small-300) } .tp-design-tile__favorite-button-container { position: absolute; right: 16px; top: 16px; z-index: 1 } .tp-design-tile__image-wrap { position: relative } .tp-design-tile__sold-counts { margin-top: 8px } .tp-design-tile__sold-count { font-size: var(--font-size-small-100); line-height: var(--font-size-small-400); font-family: var(--font-family-primary-semibold); font-weight: 600; border-radius: 800px; background-color: var(--color-neutral-800-a60); padding: 2px 8px; position: absolute; bottom: 8px; left: 8px } .tp-design-tile__sold-count,.tp-design-tile__sold-count strong { color: var(--color-white) } .tp-design-tile__preview-backdrop { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--color-neutral-800-a60); border-radius: 8px; pointer-events: none; visibility: hidden } html.no-touch .tp-design-tile:hover .tp-design-tile__preview-backdrop { visibility: visible } .tp-design-tile__sort-ctrl { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; visibility: hidden } html.no-touch .tp-design-tile:hover .tp-design-tile__sort-ctrl { visibility: visible } .tp-design-tile__sort-icon { cursor: move } .tp-design-tile__merch-button-container { display: none; position: absolute; right: 8px; bottom: 8px; z-index: 1 } @media (min-width: 1024px) { .tp-design-tile__merch-button-container { display:block; visibility: hidden } html.touch .tp-design-tile__merch-button-container { visibility: visible } .tp-design-tile:hover .tp-design-tile__merch-button-container { visibility: visible } } .tp-design-tile__merch-button { box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20); padding-left: 12px; padding-right: 12px; margin: 0 } .tp-design-tile__ad6 { grid-row: 3; grid-column: 2 } @media (min-width: 1024px) { .tp-design-tile__ad6 { grid-row:2; grid-column: 3 } } .tp-design-tile__ad6 .tp-design-tile__title { font-size: var(--font-size-medium-300); font-family: var(--font-family-primary-bold); line-height: 1; margin: 32px 0 0 0 } .tp-design-tile__add-to-cart { width: 120px; -webkit-justify-content: center; justify-content: center } @media (min-width: 768px) { .tp-design-tile__add-to-cart { width:140px } } .tp-design-tile__add-to-cart.tp-btn--icon { display: -webkit-flex; display: flex } @media (min-width: 768px) { .tp-design-tile__add-to-cart.tp-btn--small { font-size:var(--font-size-small-400) } } .tp-design-tile__add-to-cart.btn--segmented { border: 2px solid var(--color-neutral-300); border-radius: 8px; padding: 8px; margin: 4px auto 0 } .tp-design-tile__add-to-cart.btn--segmented[disabled="disabled"] { border-color: var(--color-neutral-200); cursor: default } .tp-design-tile__add-to-cart .button__content { color: var(--color-neutral-900) } .tp-design-tile__promotional-content { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary-semibold); font-weight: 600 } .tp-design-tile__promotional-content--success,.tp-design-tile__promotional-content--success>* { color: var(--color-success-700) } .tp-design-tile__menu { position: absolute; left: 16px; top: 16px; pointer-events: none; z-index: 1 } @media (min-width: 1024px) { .tp-design-tile__menu-ctrl { visibility:hidden } html.touch .tp-design-tile__menu-ctrl { visibility: visible } .tp-design-tile:hover .tp-design-tile__menu-ctrl { visibility: visible } .tp-design-tile--affiliate-non-owner .tp-design-tile__menu-ctrl { display: none } } .tp-design-tile__menu-ctrl button { pointer-events: all } .tp-design-tile__menu-ctrl .teepublicon { box-shadow: 0 4px 8px 0 var(--color-neutral-900-a20); padding: 6px } @media (min-width: 1280px) { .tp-design-tile__menu-ctrl-mobile { display:none } } @media (max-width: 1279px) { .tp-design-tile__menu-ctrl-desktop { display:none } } .tp-design-tile__menu-dropdown { background: var(--color-white); border-radius: 20px; box-shadow: 0 4px 8px 0 var(--color-neutral-900-a20); margin-top: 8px; padding: 20px 12px; position: relative; z-index: 1; display: none; pointer-events: all; width: 240px } @media (min-width: 1280px) { .tp-design-tile__menu-dropdown.active { display:block } } .tp-design-tile__menu-dropdown-body { margin-top: 12px } .tp-design-tile__menu-dropdown-x { position: absolute; right: 16px; top: 16px } .tp-design-tile__menu-dropdown-status-badge { padding: 6px 8px } .tp-design-tile__menu-dropdown-header { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-right: 40px } .tp-design-tile__menu-dropdown-header-img { margin-left: 8px; margin-right: 12px; width: 36px; -webkit-flex-shrink: 0; flex-shrink: 0 } .tp-design-tile__menu-dropdown-header-img img { margin-bottom: 0 } .tp-design-tile__menu-dropdown-header-text p { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary-semibold); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; max-width: 247px } @media (min-width: 1024px) { .tp-design-tile__menu-dropdown-header-text p { max-width:120px } } @media screen and (max-width: 767px) { .tp-design-tile__menu-edit,.tp-design-tile__menu-copy { display:none } } .tp-design-tile__menu-links .link-collection__content { -webkit-flex-direction: column; flex-direction: column; margin-top: 0 } .tp-design-tile__menu-links .link-collection__link { color: var(--color-neutral-800); font-size: var(--font-size-small-300); padding: 6px 8px; gap: 8px } .tp-design-tile__menu-links .link-collection__link:hover { background: var(--color-primary-100); border-radius: 8px } .tp-design-tile__menu-links .teepublicon { margin: 0 } .tp-design-tile__menu-links--danger .link-collection__link { color: var(--color-danger-500) } @media (min-width: 1024px) { .tp-design-tile__menu-merch { display:none } } .tp-design-tile__menu-sold-count { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-600) } .tp-design-tile__menu-sold-count strong { color: var(--color-neutral-600) } .tp-design-tile__seo-content-wrap { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none; -webkit-flex-direction: column; flex-direction: column; gap: 8px; background: var(--color-neutral-900-a80); border-radius: 8px; z-index: 1; padding: 12px; overflow-y: auto } .tags-on .tp-design-tile__seo-content-wrap { display: -webkit-flex; display: flex } .tp-design-tile__seo-content-wrap .strong { color: var(--color-white) } .tp-design-tile__seo-content { font-size: var(--font-size-small-100); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-white) } .tp-design-tile__seo-ctrl { position: absolute; right: 16px; bottom: 16px; z-index: 10; visibility: hidden } .show-tags .tp-design-tile__seo-ctrl { visibility: visible } .tp-design-tile__seo-ctrl .teepublicon { background: var(--color-neutral-800-a60); padding: 4px } .tp-design-tile__seo-description { font-size: var(--font-size-small-100); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-white) } .tp-design-tile__seo-footer button { color: var(--color-white) } .tp-design-tile__seo-main-tag { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap } .tp-design-tile__seo-main-tag a { color: var(--color-primary-300) } .c-dialog { background-color: var(--color-neutral-900-a70); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1000 } .c-dialog.inactive { display: none } .c-dialog__container { background: var(--color-white); border-radius: 5px; left: 50%; margin: 0; max-width: 345px; min-width: 275px; padding: 0 5px 5px; position: fixed; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100% } @media (min-width: 768px) { .c-dialog__container { max-width:600px; min-width: 400px } } .c-dialog__container--small { max-width: 345px; min-width: 275px } .c-dialog__container--large { max-width: 700px; min-width: 640px } .c-dialog__container--flush { padding: 0 } .c-dialog__container--flush .c-dialog__header { padding: 15px } .c-dialog__container--slim { padding: 5px } .c-dialog__container--slim .c-dialog__header { padding-bottom: 5px } .c-dialog__container--standard { padding: 15px } .c-dialog__container--standard .c-dialog__header { padding-bottom: 15px } @media (min-width: 768px) { .c-dialog__container--standard { padding:20px } .c-dialog__container--standard .c-dialog__header { padding-bottom: 20px } } .c-dialog__container--heavy { padding: 20px } .c-dialog__container--heavy .c-dialog__header { padding-bottom: 20px } @media (min-width: 768px) { .c-dialog__container--heavy { padding:30px } .c-dialog__container--heavy .c-dialog__header { padding-bottom: 30px } } .c-dialog__content { overflow-y: auto } @media (min-width: 768px) { .c-dialog__content { max-height:695px } } .c-dialog__header { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between } .c-dialog__header-item i { color: var(--color-neutral-400) } .c-dialog__header-item .teepublicon:hover svg { fill: var(--color-primary-500) } .drawer { bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; visibility: hidden; width: 100%; z-index: 110 } .drawer.active .drawer__backdrop { visibility: visible; height: 100% } .drawer.active .drawer__wrapper { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all 400ms cubic-bezier(0.8, 0, 0, 1.12); visibility: visible; overflow-x: hidden } @media (min-width: 1024px) { .drawer.active .drawer__wrapper { overflow:visible } } .drawer--light { background-color: var(--color-neutral-100) } .drawer--dark { background-color: var(--color-neutral-900) } .drawer--dark>.drawer__footer-container { box-shadow: 0px -16px 16px 0px var(--color-neutral-900) } .drawer--white { background-color: var(--color-white) } .drawer--white>.drawer__footer-container { box-shadow: 0px -16px 16px 0px var(--color-white) } .drawer__close-button { position: absolute; right: 16px; top: 16px } .drawer__close-button .teepublicon { margin-right: 0 } .drawer__close-button.hide { display: none } .drawer__backdrop { background-color: var(--color-neutral-900-a70); position: absolute; left: 0; top: 0; width: 100%; visibility: hidden } .drawer__wrapper { background-color: var(--color-white); transition: all 400ms cubic-bezier(0.8, 0, 0, 1.12); visibility: hidden; position: absolute; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; height: 100% } .drawer__wrapper--top,.drawer__wrapper--bottom { height: 70%; width: 100% } .drawer__wrapper--right,.drawer__wrapper--left { height: 100%; width: 70% } .drawer__wrapper--top { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); top: 0 } .drawer__wrapper--right { right: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } .drawer__wrapper--bottom { bottom: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); border-top-left-radius: 20px; border-top-right-radius: 20px } .drawer__wrapper--left { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } .drawer__component { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; position: absolute; height: 100%; width: 100% } .drawer__content-container { padding: 15px; overflow-y: auto; -webkit-flex: 1; flex: 1 } .drawer__content-container .c-menu+.c-menu { border-top: 2px solid var(--color-neutral-100); margin-top: 0 } .drawer__content-container .c-menu__link { padding-top: 12px; padding-bottom: 12px } .drawer__content-container .m-sort-tiles { padding: 12px 0 } .drawer__content-container .m-sort-tiles__label { font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400) } @media (max-width: 767px) { .drawer__content-container .m-sort-tiles__label { display:block } } .drawer__header-container { background-color: var(--color-neutral-100) } .drawer__header-container--white { background-color: var(--color-white) } .drawer__header { padding: 10px 0 } .drawer__header-touch-bar { display: block; padding-top: 10px } .drawer__header-touch-bar:before { content: ''; background-color: var(--color-neutral-300); border-radius: 3px; display: block; height: 4px; margin: 0 auto; width: 60px } .tp-gifting { background: var(--color-neutral-900); padding: 48px 0; overflow-x: hidden } .tp-gifting__category-links { -webkit-align-items: stretch; align-items: stretch; display: -webkit-flex; display: flex; margin-inline:-16px;margin-top: 24px; overflow-x: scroll; padding-inline:16px} .tp-gifting__category-links::-webkit-scrollbar { display: none } @media (min-width: 768px) and (max-width: 1023px) { .tp-gifting__category-links { margin-inline:-48px; padding-inline:48px} } @media (min-width: 1024px) { .tp-gifting__category-links { -webkit-justify-content:center; justify-content: center; margin-inline:0px;padding-inline:0px;overflow-x: initial } } .tp-gifting__category-link { -webkit-align-items: center; align-items: center; border: 2px solid transparent; color: var(--color-white); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; font-size: var(--font-size-small-300); line-height: var(--font-size-medium-300); margin: 0 2px; padding: 4px 8px; white-space: nowrap } @media (min-width: 768px) { .tp-gifting__category-link { margin:0 4px } } .tp-gifting__category-link:focus { color: var(--color-white) } .tp-gifting__category-link:hover { color: var(--color-white) } .tp-gifting__category-link--active { background-color: var(--color-neutral-800); border: 2px solid var(--color-primary-500); border-radius: 8px } .tp-gifting__foot { text-align: center; padding-top: 32px } .tp-gifting__head { text-align: center; margin-bottom: 24px } .tp-gifting__head-canvas { margin: 8px auto } @media (min-width: 768px) { .tp-gifting__head-canvas { margin:0 16px } } .tp-gifting__head-h { font-family: var(--font-family-display); font-size: var(--font-size-medium-200); font-weight: 600; line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; color: var(--color-white); margin-bottom: 24px } @media (min-width: 768px) { .tp-gifting__head-h { font-size:var(--font-size-medium-400); line-height: var(--font-size-large-100) } } @media (min-width: 768px) { .tp-gifting__head-text-wrap { display:-webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center } } .tp-gifting__head-text { color: var(--color-white) } .tp-gifting__tiles { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; gap: 12px; margin-inline:-16px;margin-top: 24px; padding-inline:16px;overflow-x: scroll } .tp-gifting__tiles::-webkit-scrollbar { display: none } @media (min-width: 768px) { .tp-gifting__tiles { margin-inline:0px; padding-inline:0px;overflow: initial } } @media (min-width: 1024px) { .tp-gifting__tiles { gap:16px } } .tp-gifting .tp-design-tile { -webkit-flex-basis: calc((1 - 2.5 / 4) * 100%); flex-basis: calc((1 - 2.5 / 4) * 100%); -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 0; flex-shrink: 0; min-width: 136px } @media (min-width: 768px) { .tp-gifting .tp-design-tile { -webkit-flex-shrink:1; flex-shrink: 1 } } .vc-header-logo { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 12px } .vc-header-logo--hidden .vc-header-logo__wrapper { display: none } .vc-header-logo__content { font-family: var(--font-family-display); font-size: var(--font-size-small-400); font-weight: 600; line-height: var(--font-size-medium-200); margin-bottom: 0; margin-top: 0 } @media (min-width: 768px) { .vc-header-logo__content { font-size:var(--font-size-medium-100) } } .vc-header-logo__content,.vc-header-logo__content .link--1,.vc-header-logo__content .link--1:hover { color: var(--color-white) } .vc-header-logo__content--black,.vc-header-logo__content--black .link--1,.vc-header-logo__content--black .link--1:hover { color: var(--color-neutral-900) } .vc-header-logo__image { display: block; height: 24px } @media (max-width: 344px) { .vc-header-logo__image { height:20px } } .tp-header-logo__image { height: 36px; margin-right: 8px } .dash-logo-nav { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; gap: 12px; margin-top: 40px; -webkit-justify-content: center; justify-content: center } .vc-header__shop-button,.vc-header__cart-button .button__content,.vc-header__account-button:has(.teepublicon),.vc-header__account-button:has(.vc-header__avatar) .button__content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; gap: 0 } @media (min-width: 1280px) { .vc-header__shop-button,.vc-header__cart-button .button__content,.vc-header__account-button:has(.teepublicon),.vc-header__account-button:has(.vc-header__avatar) .button__content { -webkit-flex-direction:row; flex-direction: row; gap: 8px } } .vc-header { background-color: var(--color-neutral-900); position: static; top: unset; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; z-index: calc(100 + 2) } .vc-header .vc-header-logo { grid-area: logo; -webkit-align-self: center; align-self: center; padding-left: 16px } @media (min-width: 768px) { .vc-header .vc-header-logo { padding-left:28px } } @media (min-width: 1024px) { .vc-header .vc-header-logo { padding-left:0 } } .vc-header--storefront .vc-header-logo__image { height: 32px; border-radius: 800px } .vc-header--storefront .vc-header-logo__wrapper { width: 32px; height: 32px } .vc-header--storefront .vc-header__logo { height: 32px; border-radius: 800px } .vc-header--storefront .vc-header__logo-wrapper { width: 32px; height: 32px } .vc-header--no-nav .vc-header__container { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between } .vc-header--no-nav .vc-header-logo { padding-left: 0 } .vc-header--no-nav .vc-header-checkout__secure { color: var(--color-white) } .vc-header--no-nav .vc-header-checkout__secure-lock { padding-bottom: 2px } .vc-header--no-search .vc-header__container { grid-template-areas: 'menu logo actions'; grid-template-columns: -webkit-max-content minmax(0, 100%) -webkit-max-content; grid-template-columns: max-content minmax(0, 100%) max-content } @media (max-width: 480px) { .vc-header--no-search .vc-header__container .vc-header-logo__wrapper { display:none } } .vc-header--no-search .vc-header__container .vc-header-logo { max-width: 100%; padding-right: 16px } @media (min-width: 1024px) { .vc-header--no-search .vc-header__container .vc-header-logo { padding-right:0 } } .vc-header--no-search .vc-header__container .vc-header-logo__content { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .vc-header__container { display: grid; grid-template-areas: 'menu logo . actions' 'search search search search'; grid-template-columns: -webkit-max-content auto auto -webkit-max-content; grid-template-columns: max-content auto auto max-content; padding-top: 16px; padding-bottom: 12px; grid-row-gap: 12px } @media (min-width: 768px) { .vc-header__container { grid-template-columns:-webkit-max-content 150px auto -webkit-max-content; grid-template-columns: max-content 150px auto max-content } } @media (min-width: 1024px) { .vc-header__container { -webkit-align-items:center; align-items: center; grid-template-areas: 'menu logo search actions'; grid-gap: 28px } } .vc-header__menu-container { grid-area: menu } .vc-header__shop-button-text,.vc-header__account-button-text,.vc-header__link-text,.vc-header__cart-text { display: block; font-size: var(--font-size-small-200); line-height: 1.3333 } @media (min-width: 768px) { .vc-header__shop-button-text,.vc-header__account-button-text,.vc-header__link-text,.vc-header__cart-text { font-size:var(--font-size-small-300); line-height: 1.42857 } } @media (min-width: 1280px) { .vc-header__shop-button-text,.vc-header__account-button-text,.vc-header__link-text,.vc-header__cart-text { font-size:var(--font-size-small-400); line-height: 1.25 } } .vc-header__actions-container { grid-area: actions; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; gap: 16px } @media (min-width: 768px) { .vc-header__actions-container { gap:28px } } @media (min-width: 1024px) { .vc-header__actions-container { -webkit-align-items:center; align-items: center } } .vc-header__search-container { grid-area: search } .vc-header__account { text-align: center; color: var(--color-white); font-size: var(--font-size-small-200) } .vc-header__account picture { display: block; height: 20px } @media (min-width: 768px) { .vc-header__account picture { height:28px } } .vc-header__avatar { width: 20px; height: 20px } @media (min-width: 768px) { .vc-header__avatar { width:28px; height: 28px } } .vc-header__cart { position: relative } .vc-header__shop-button .teepublicon,.vc-header__account-button .teepublicon,.vc-header__cart-button .teepublicon { display: block; height: 20px } .vc-header__shop-button .teepublicon svg,.vc-header__shop-button .teepublicon img,.vc-header__account-button .teepublicon svg,.vc-header__account-button .teepublicon img,.vc-header__cart-button .teepublicon svg,.vc-header__cart-button .teepublicon img { width: 20px; height: 20px } @media (min-width: 768px) { .vc-header__shop-button,.vc-header__account-button,.vc-header__cart-button { -webkit-align-items:center; align-items: center } .vc-header__shop-button .teepublicon,.vc-header__account-button .teepublicon,.vc-header__cart-button .teepublicon { height: 28px } .vc-header__shop-button .teepublicon svg,.vc-header__shop-button .teepublicon img,.vc-header__account-button .teepublicon svg,.vc-header__account-button .teepublicon img,.vc-header__cart-button .teepublicon svg,.vc-header__cart-button .teepublicon img { width: 28px; height: 28px } } .vc-header__cart-text { color: var(--color-white) } @media screen and (max-width: 767px) { .vc-header__cta { display:none } } .vc-header__cta-button { padding: 8px 16px } .m-header__logo { display: block; width: 120px } @media (min-width: 1024px) { .m-header__logo { width:190px } } .m-header__search { grid-column: 1 / span 12; grid-row: 2; border-radius: 12px } @media (min-width: 1024px) { .m-header__search { -webkit-align-items:center; align-items: center; display: -webkit-flex; display: flex; grid-column: 2 / span 1; grid-row: 1 } } .m-header__search ::-webkit-input-placeholder { display: none; color: var(--color-neutral-600) } .m-header__search :-ms-input-placeholder { display: none; color: var(--color-neutral-600) } .m-header__search ::-ms-input-placeholder { display: none; color: var(--color-neutral-600) } .m-header__search ::placeholder { display: none; color: var(--color-neutral-600) } @media (max-width: 374px) { .m-header__search ::-webkit-input-placeholder { color:transparent } .m-header__search :-ms-input-placeholder { color: transparent } .m-header__search ::-ms-input-placeholder { color: transparent } .m-header__search ::placeholder { color: transparent } .active-search .m-header__search ::-webkit-input-placeholder { color: var(--color-neutral-600) } .active-search .m-header__search :-ms-input-placeholder { color: var(--color-neutral-600) } .active-search .m-header__search ::-ms-input-placeholder { color: var(--color-neutral-600) } .active-search .m-header__search ::placeholder { color: var(--color-neutral-600) } } .m-header__search .input-group { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; width: 100% } .m-header__search .input-group:focus-within .m-header__search-field-placeholder { -webkit-animation-play-state: paused; animation-play-state: paused } .m-header__search .input-group-append { display: inline-block; margin-left: -1px; line-height: 1 } .m-header__search .teepublicon,.m-header__search-close .teepublicon { margin: 0 } .m-header__search--animate { --borderWidth: 2px; border-radius: 12px } .m-header__search--animate form { position: relative } .m-header__search--animate form:after { -webkit-animation: animated-border-gradient 6s ease-in-out alternate infinite; animation: animated-border-gradient 6s ease-in-out alternate infinite; background: linear-gradient(60deg, #39e11e, #ffeb37, #f38334, #ea3131, #a30dff, #19b1ff, #39e11e); background-size: 300% 300%; border-radius: 12px; content: ''; height: calc(100% + var(--borderWidth) * 2); left: calc(-1 * var(--borderWidth)); position: absolute; top: calc(-1 * var(--borderWidth)); width: calc(100% + var(--borderWidth) * 2); z-index: -1 } .m-header__search--animate form:focus-within:after { background: var(--color-primary-500) } .m-header__search--animate .form__control:focus { border-color: var(--color-neutral-300) } @media (max-width: 767px) { .m-header__search--animate { margin-right:0 } } .m-header__search--animate .icon { font-size: 16px } .m-header__search-field-container { -webkit-flex: 1 1 auto; flex: 1 1 auto } .m-header__search-field-container .m-header__search-field { border-radius: 12px 0 0 12px; border: 0; height: 100%; width: 100% } .m-header__search-field-container .m-header__search-field::-webkit-input-placeholder { color: var(--color-neutral-600) } .m-header__search-field-container .m-header__search-field:-ms-input-placeholder { color: var(--color-neutral-600) } .m-header__search-field-container .m-header__search-field::-ms-input-placeholder { color: var(--color-neutral-600) } .m-header__search-field-container .m-header__search-field::placeholder { color: var(--color-neutral-600) } @media (min-width: 1024px) { .m-header__search-field-container .m-header__search-field { font-size:var(--font-size-small-400) } } .m-header__search-field-container .m-header__search-field .m-head__search-field { color: var(--color-neutral-600); height: 32px } .m-header__search-submit { border: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 12px; border-top-left-radius: 0; border-top-right-radius: 12px; margin: 0; padding: 12px; background-color: var(--color-primary-500) } .m-header__search-submit:hover { background-color: var(--color-primary-600) } .m-header__search-submit:focus { background-color: var(--color-primary-700) } @media (max-width: 480px) { .m-header__search-submit { z-index:1 } } @media (min-width: 768px) { .m-header__search-submit { padding:14px } } @media (min-width: 1024px) { .m-header__search-submit { line-height:1.1 } } .m-header__search-field-placeholder-wrapper { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 0 } .m-header__search-field-placeholder-wrapper.hide { display: none } .m-header__search-field-placeholder { --slide-up-y: 40px; -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation: 30s ease 0s infinite normal none running flip-up; animation: 30s ease 0s infinite normal none running flip-up } @media (min-width: 768px) { .m-header__search-field-placeholder { --slide-up-y: 44px } } .m-header__search-field-placeholder p { color: var(--color-neutral-700); height: var(--slide-up-y); line-height: var(--slide-up-y); margin-left: 15px; font-size: var(--font-size-small-300) } @media (min-width: 768px) { .m-header__search-field-placeholder p { font-size:var(--font-size-small-400) } } .m-header__logo { display: block; width: 144px } @media (min-width: 1024px) { .m-header__logo { width:200px } } .m-header__cart-item { display: -webkit-flex; display: flex; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-neutral-300) } .m-header__cart-item-image { -webkit-flex-shrink: 0; flex-shrink: 0; margin-bottom: 5px; width: 92px } .m-header__cart-item-image img { width: 100% } @media (min-width: 1024px) { .m-header__cart-item-image { margin-bottom:10px } } .m-header__cart-item-info { margin-left: 20px } .m-header__cart-item-info li { color: var(--color-neutral-700); font-size: var(--font-size-small-300); margin-bottom: 4px } .m-header__cart-item-info li.cart-item-info__highlight { color: var(--color-neutral-900); font-family: var(--font-family-primary-bold) } .m-header__cart-paypal { min-height: 35px } .m-header__cart-applepay { margin: 5px 0; display: block; height: 42px } .m-header__search-close { position: absolute; top: 10px; right: 56px } .m-header__search-close.hide { visibility: hidden } @media (min-width: 768px) { .m-header__search-close { top:12px } } .m-header__search-close-button { border: none } .m-header__designer-button { font-size: var(--font-size-small-400); padding: 10px 12px } @media (max-width: 1023px) { .sticky-header--no-sticky { position:static; top: unset } .sticky-header--bottom-sticky { position: -webkit-sticky; position: sticky; top: 0; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out } .sticky-header--bottom-sticky.m-header-secondary { top: 80px; z-index: calc(10 + 1) } .sticky-header--bottom-sticky.m-header--with-affiliates-share { top: 50px } .m-header--hide-top { -webkit-transform: translateY(-50px); transform: translateY(-50px); transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out } .m-header--hide-top.vc-header--no-search { -webkit-transform: translateY(-64px); transform: translateY(-64px) } } @media (max-width: 1023px) and (min-width: 768px) and (max-width: 1023px) { .m-header--hide-top.vc-header--no-search { -webkit-transform:translateY(-76px); transform: translateY(-76px) } } .teepublicon { display: inline-grid; vertical-align: middle } .teepublicon.teepublicon--round { border-radius: 50% } .teepublicon--hover:hover { cursor: pointer } .teepublicon--blue-dark svg,.teepublicon--hover-blue-dark:hover svg { fill: var(--color-primary-600) } .teepublicon--primary-200 svg,.teepublicon--hover-primary-200:hover svg { fill: var(--color-primary-200) } .teepublicon--primary-400 svg,.teepublicon--hover-primary-400:hover svg { fill: var(--color-primary-400) } .teepublicon--primary-500 svg,.teepublicon--hover-primary-500:hover svg { fill: var(--color-primary-500) } .teepublicon--blue-default svg,.teepublicon--hover-blue-default:hover svg { fill: var(--color-primary-500) } .teepublicon--dark-default svg,.teepublicon--hover-dark-default:hover svg { fill: var(--color-neutral-900) } .teepublicon--transparent svg,.teepublicon--hover-transparent:hover svg { fill: transparent } .teepublicon--error-red svg,.teepublicon--hover-error-red:hover svg { fill: var(--color-danger-500) } .teepublicon--grey-dark svg,.teepublicon--hover-grey-dark:hover svg { fill: var(--color-neutral-600) } .teepublicon--grey-default svg,.teepublicon--hover-grey-default:hover svg { fill: var(--color-neutral-500) } .teepublicon--grey-light svg,.teepublicon--hover-grey-light:hover svg { fill: var(--color-neutral-300) } .teepublicon--light-default svg,.teepublicon--hover-light-default:hover svg { fill: var(--color-white) } .teepublicon--light-a20 svg { fill: var(--color-white-a20) } .teepublicon--light-a20:hover svg { fill: var(--color-white) } .teepublicon--pinterest svg,.teepublicon--hover-pinterest:hover svg { fill: #bd081c } .teepublicon--success-green svg,.teepublicon--hover-success-green:hover svg { fill: var(--color-success-600) } .teepublicon--warning-yellow svg,.teepublicon--hover-warning-yellow:hover svg { fill: var(--color-warning-600) } .teepublicon--color-warning-400 svg,.teepublicon--hover-color-warning-400:hover svg { fill: var(--color-warning-400) } .teepublicon__draggable:hover { cursor: -webkit-grab; cursor: grab } .teepublicon__draggable:active { cursor: -webkit-grabbing; cursor: grabbing } .teepublicon-variant--circle { border-radius: 50% } .teepublicon-variant--circle.x-large { padding: 18px } .teepublicon-variant--circle.large { padding: 14px } .teepublicon-variant--circle.medium { padding: 10px } .teepublicon-variant--circle.default { padding: 8px } .teepublicon-variant--circle.small { padding: 4px } .teepublic--border-color-neutral-800 { border: 2px solid var(--color-neutral-800) } .teepublic--border-color-neutral-200 { border: 2px solid var(--color-neutral-200) } .teepublicon--color-neutral-300 svg,.teepublicon--hover-color-neutral-300:hover svg { fill: var(--color-neutral-300) } .teepublicon--color-neutral-400 svg,.teepublicon--hover-color-neutral-400:hover svg { fill: var(--color-neutral-400) } .teepublicon--color-neutral-500 svg,.teepublicon--hover-color-neutral-500:hover svg { fill: var(--color-neutral-500) } .teepublicon--color-neutral-600 svg,.teepublicon--hover-color-neutral-600:hover svg { fill: var(--color-neutral-600) } .teepublicon--color-neutral-700 svg,.teepublicon--hover-color-neutral-700:hover svg { fill: var(--color-neutral-700) } .teepublicon--color-neutral-800 svg,.teepublicon--hover-color-neutral-800:hover svg { fill: var(--color-neutral-800) } .teepublicon--color-neutral-800-a20 svg,.teepublicon--hover-color-neutral-800-a20:hover svg { fill: var(--color-neutral-800-a20) } .teepublicon--color-neutral-900 svg,.teepublicon--hover-color-neutral-900:hover svg { fill: var(--color-neutral-900) } .teepublicon--color-primary-500 svg,.teepublicon--hover-color-primary-500:hover svg { fill: var(--color-primary-500) } .teepublicon--color-success-500 svg,.teepublicon--hover-color-success-500:hover svg { fill: var(--color-success-500) } .teepublicon--color-danger-300 svg,.teepublicon--hover-color-danger-300:hover svg { fill: var(--color-danger-300) } .teepublicon-background--transparent { background-color: transparent } .teepublicon-background--blue-dark { background-color: var(--color-primary-600) } .teepublicon-background--blue-default { background-color: var(--color-primary-500) } .teepublicon-background--dark-default { background-color: var(--color-neutral-900) } .teepublicon-background--deviantart { background-color: #61c85a } .teepublicon-background--error-red { background-color: var(--color-danger-500) } .teepublicon-background--facebook { background-color: #3b5998 } .teepublicon-background--grey-default { background-color: var(--color-neutral-200) } .teepublicon-background--grey-dark { background-color: var(--color-neutral-600) } .teepublicon-background--instagram { background-color: #434e45 } .teepublicon-background--light-default { background-color: var(--color-white) } .teepublicon-background--linktree { background-color: #3edc5c } .teepublicon-background--pinterest { background-color: #bd081c } .teepublicon-background--purple-default { background-color: #5e469e } .teepublicon-background--reddit { background-color: #ff4301 } .teepublicon-background--success-green { background-color: var(--color-success-500) } .teepublicon-background--tiktok { background-color: black } .teepublicon-background--tumblr { background-color: #323e4d } .teepublicon-background--twitch { background-color: #9146ff } .teepublicon-background--twitter { background-color: #55acee } .teepublicon-background--warning-yellow { background-color: var(--color-warning-500) } .teepublicon-background--youtube { background-color: red } .teepublicon-spacing--both { margin-left: 5px; margin-right: 5px } .teepublicon-spacing--left { margin-left: 5px } .teepublicon-spacing--right { margin-right: 5px } .teepublicon--rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg) } .teepublicon--rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .teepublicon--rotate-270 { -webkit-transform: rotate(270deg); transform: rotate(270deg) } .c-menu { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin-top: 15px } .c-menu ul { margin-top: 5px } .c-menu.mt-0,.c-menu.mt-0 ul { margin-top: 0 } .c-menu.mt-1,.c-menu.mt-1 ul { margin-top: 3px } .c-menu-group .c-menu:first-of-type { margin-top: 0 } .c-menu__header { margin-top: 0; margin-bottom: 0 } .c-menu__header h3,.c-menu__header h4 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100); line-height: 20px } @media (min-width: 1024px) { .c-menu__header h3,.c-menu__header h4 { font-size:var(--font-size-medium-100); line-height: 20px } } .c-menu__header .teepublicon { -webkit-transform: rotate(90deg); transform: rotate(90deg); transition: all 300ms ease-out; margin-right: 5px } .c-menu__header .flipped { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: all 300ms ease-out } .c-menu__header .flipped svg { fill: var(--color-neutral-900) } .c-menu__header[role='button'] { padding-left: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center } .c-menu__header--justify-space-between { -webkit-justify-content: space-between; justify-content: space-between; padding: 15px 0 } .c-menu__header--justify-default { -webkit-justify-content: normal; justify-content: normal; padding-bottom: 2px; padding-top: 8px } .c-menu-redesign-canvas__header { font-family: var(--font-family-primary-bold); color: var(--color-neutral-500); font-size: var(--font-size-small-400); line-height: 20px; padding: 16px 8px } .c-menu__item { font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-400); margin-top: 2px } .c-menu-redesign__item { font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-400); line-height: var(--font-size-medium-200) } .c-menu__link { border-radius: 5px; display: inline-block; line-height: 16px; padding: 8px 15px; width: 100% } .c-menu__link:hover,.c-menu__link:active,.c-menu__link:focus { background: var(--color-primary-200) } .c-menu__link.active { background: var(--color-neutral-200); color: var(--color-neutral-900) } .c-menu__link.selected { background: var(--color-primary-500); color: var(--color-white); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between } .c-menu__link.selected.no-deactivate::after { display: none } .c-menu-redesign__link { border-radius: 8px; display: inline-block; padding: 8px 16px; width: 100% } .c-menu-redesign__link h4 { color: var(--color-neutral-900); font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-300); line-height: 20px } .c-menu-redesign__link:hover,.c-menu-redesign__link:active,.c-menu-redesign__link:focus { background: var(--color-primary-100) } .c-menu-redesign__link.active { background: var(--color-neutral-200); color: var(--color-neutral-900) } .c-menu-redesign__link.selected { background: var(--color-primary-500); color: var(--color-white); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between } .c-menu-redesign__link.selected.no-deactivate::after { display: none } .c-menu__link--icon { -webkit-flex-direction: row-reverse; flex-direction: row-reverse } .c-menu-secondary { margin-top: 25px } .c-menu-secondary::before { content: ''; background-color: var(--color-neutral-200); display: block; height: 2px; margin-left: auto; margin-right: 0; margin-bottom: 25px; width: 100% } .c-menu--expandable ul { max-height: 0; margin-top: 0; overflow-y: hidden; transition: max-height 500ms ease-out } .c-menu--expandable ul.expanded { max-height: 400px; transition: max-height 500ms ease-out } .tool-tip { display: inline-block; position: relative } .tool-tip .tool-tiptext::after { border-color: var(--color-neutral-900) transparent transparent transparent; border-style: solid; border-width: 5px; content: ''; left: 50%; margin-left: -5px; position: absolute; top: 100% } .tool-tiptext { background-color: var(--color-neutral-900); border-radius: 6px; bottom: 150%; color: var(--color-white); left: 50%; margin-left: -110px; padding: 8px; position: absolute; text-align: center; visibility: hidden; width: 225px; z-index: 1 } .tool-tip:hover .tool-tiptext { visibility: visible } .tp-tooltip { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary-semibold); font-weight: 600; background: var(--color-neutral-900); border-radius: 8px; color: var(--color-white); display: none; padding: 8px 12px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 200px; z-index: 100; box-shadow: 0 2px 4px 0 rgba(21,21,35,0.2) } .tp-tooltip--arrow,.tp-tooltip--arrow::before { position: absolute; width: 8px; height: 8px; background: inherit } .tp-tooltip--arrow { visibility: hidden } .tp-tooltip--arrow::before { visibility: visible; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .tp-tooltip[data-popper-placement^="top"]>.tp-tooltip--arrow { bottom: -4px } .tp-tooltip[data-popper-placement^="bottom"]>.tp-tooltip--arrow { top: -4px } .tp-tooltip[data-popper-placement^="left"]>.tp-tooltip--arrow { right: -4px } .tp-tooltip[data-popper-placement^="right"]>.tp-tooltip--arrow { left: -4px } .tp-tooltip[data-show] { display: block } .c-tray { display: block; height: 100%; position: fixed; top: 0; transition: visibility 0s .15s; visibility: hidden; width: 100%; z-index: 110 } .c-tray.right { right: 0 } .c-tray.right>.c-tray__container { right: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } .c-tray.left { left: 0 } .c-tray.left>.c-tray__container { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } .c-tray.active { transition: visibility 0s 0s; visibility: visible } .c-tray.active>.c-tray__container { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition-delay: 0s } .c-tray.active>.c-tray__underlay { background-color: var(--color-neutral-900-a80) } .c-tray__container { background-color: white; bottom: 0; height: 100%; position: absolute; top: 0; transition: -webkit-transform 0.15s cubic-bezier(0.8, 0, 0, 1.12); transition: transform 0.15s cubic-bezier(0.8, 0, 0, 1.12); transition: transform 0.15s cubic-bezier(0.8, 0, 0, 1.12),-webkit-transform 0.15s cubic-bezier(0.8, 0, 0, 1.12); width: 85% } .c-tray__content { display: none; height: 100% } .c-tray__content.render { display: block } .c-tray__underlay { background-color: transparent; display: block; height: 100%; position: absolute; transition: background-color .15s ease-in-out; transition-delay: 0s; width: 100% } .tp-accordion { border: 2px solid var(--color-neutral-900); border-radius: 12px; margin-bottom: 8px } .tp-accordion.tp-accordion__content--open { border: 2px solid var(--color-primary-500) } .tp-accordion__button { -webkit-align-items: center; align-items: center; background-color: transparent; border: 0; border-radius: 12px; cursor: pointer; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 12px 16px; width: 100%; -webkit-tap-highlight-color: transparent } @media (hover: hover) and (pointer: fine) { .tp-accordion__button:hover { background-color:var(--color-primary-100); color: var(--color-primary-500) } } .tp-accordion__button.tp-accordion__content--open { background-color: var(--color-primary-100); color: var(--color-primary-500); display: -webkit-flex; display: flex } .tp-accordion__content--open .teepublicon { -webkit-transform: rotate(270deg); transform: rotate(270deg) } .tp-accordion__content--open .teepublicon svg { fill: var(--color-primary-500) } .tp-accordion__button-text { color: inherit } .tp-accordion__content { display: none; padding: 12px 16px } .tp-accordion__content.tp-accordion__content--open { display: block } .vc-banner { font-size: var(--font-size-small-400); padding: 15px; position: relative } .vc-banner-affiliate { -webkit-align-items: center; align-items: center; border-bottom: 1px solid var(--color-white-a10); display: -webkit-flex; display: flex; font-size: var(--font-size-small-200); height: 50px; padding: 0 15px } @media (min-width: 768px) { .vc-banner-affiliate { font-size:var(--font-size-small-400) } } .vc-banner-affiliate__info { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; justify-content: center } .vc-banner-affiliate__content { margin: auto; padding: 0 15px } .vc-banner-affiliate__clipboard { padding-top: 5px; position: relative; width: 100% } .vc-banner-affiliate__clipboard>* { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center } .vc-banner-affiliate__clipboard .teepublicon { display: none } @media (min-width: 768px) { .vc-banner-affiliate__clipboard { padding-top:0; width: auto } .vc-banner-affiliate__clipboard .teepublicon { display: block; margin-left: 10px } } .vc-banner-affiliate__link-wrapper.animate { -webkit-animation: fade-in-down 0.2s ease-in-out forwards; animation: fade-in-down 0.2s ease-in-out forwards } .vc-banner-affiliate__link-wrapper.copied.success { -webkit-animation: fade-out-down 0.2s ease-in-out forwards; animation: fade-out-down 0.2s ease-in-out forwards } .vc-banner-affiliate__link-wrapper--copied { position: absolute; visibility: hidden; top: 5px; bottom: 0; left: 0; right: 0 } @media (min-width: 768px) { .vc-banner-affiliate__link-wrapper--copied { top:0; right: unset } } .vc-banner-affiliate__link-wrapper--copied.animate { -webkit-animation: fade-out-down 0.2s ease-in-out forwards; animation: fade-out-down 0.2s ease-in-out forwards } .vc-banner-affiliate__link-wrapper--copied.success { -webkit-animation: fade-in-down 0.2s ease-in-out forwards; animation: fade-in-down 0.2s ease-in-out forwards } .vc-banner-affiliate__link { font-weight: 700; color: var(--color-warning-500); text-align: center } .vc-banner-affiliate__link:hover { color: var(--color-warning-500); opacity: .85; cursor: pointer } .vc-banner-affiliate__link.copied.success { opacity: 0; -webkit-animation: fade-out-down .5s linear forwards; animation: fade-out-down .5s linear forwards } .vc-banner-affiliate__link--copied { color: var(--color-success-500); font-weight: 700 } .vc-banner-affiliate__note { text-transform: none } @media (min-width: 375px) and (max-width: 981px) { .vc-banner-affiliate__note { white-space:nowrap; width: auto } } .vc-banner-sale-countdown { display: block; width: 100% } .vc-banner-sale-countdown__content-container { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin: auto } @media (min-width: 768px) { .vc-banner-sale-countdown__content-container { -webkit-flex-wrap:nowrap; flex-wrap: nowrap; gap: 40px; padding-right: 30px } } .vc-banner-sale-countdown__countdown-container { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-bottom: 10px; width: 100% } @media (min-width: 768px) { .vc-banner-sale-countdown__countdown-container { margin-bottom:0; width: auto } } .vc-banner-sale-countdown__countdown-label { font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-200); margin-right: 5px; text-align: end } @media (min-width: 480px) { .vc-banner-sale-countdown__countdown-label { font-size:var(--font-size-small-400) } } .vc-banner-sale-countdown__messaging-cta-container { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; gap: 12px } .vc-banner-sale-countdown__messaging-cta-container .c-link__button { -webkit-align-self: center; align-self: center; background: var(--color-neutral-900); -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 0; flex-shrink: 0; font-family: var(--font-family-display); font-size: var(--font-size-small-300); line-height: 1.286; text-transform: uppercase } .vc-banner-sale-countdown__messaging-cta-container .c-link__button.hidden { display: none } .vc-banner-sale-countdown__messaging { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-grow: 1; flex-grow: 1; font-family: var(--font-family-display); font-size: var(--font-size-small-300); text-align: center } @media (min-width: 480px) { .vc-banner-sale-countdown__messaging { font-size:var(--font-size-medium-100) } } .vc-banner-seller-verification { display: grid; grid-template-columns: repeat(3, auto); -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 16px 0px; gap: 20px } @media (max-width: 1025px) { .vc-banner-seller-verification { grid-template-columns:repeat(2, auto); padding: 16px; gap: 12px } } .vc-banner-seller-verification__text { font-family: "Roobert-SemiBold", Helvetica, sans-serif; font-size: var(--font-size-small-400); font-style: normal; line-height: 1.5 } @media (max-width: 1025px) { .vc-banner-seller-verification__text { grid-area:1 / 1 / 1 / span 2; font-size: var(--font-size-small-300); line-height: 1.42857; text-align: center } } @media (max-width: 1025px) { .vc-banner-seller-verification__link-wrapper { justify-self:end } } .vc-banner-seller-verification__btn { border-radius: 8px; padding: 8px } .vc-banner-seller-verification__btn .button__content { border: none; font-family: "Roobert-SemiBold", Helvetica, sans-serif; font-size: var(--font-size-small-200); font-style: normal; line-height: 1.3333; text-align: center } .vc-banner--blue-dark-background { background: var(--color-primary-600) } .vc-banner--dark-default-background { background: var(--color-neutral-900) } .vc-banner--development-background { background: var(--color-success-300) } .vc-banner--error-red-background { background: var(--color-danger-500) } .vc-banner--light-default-background { background: var(--color-white) } .vc-banner--staging-background { background: var(--color-warning-500) } .vc-banner--canary-background { background: var(--color-accent-orange-500) } .vc-banner--success-green-background { background: var(--color-success-500) } .vc-banner--warning-yellow-background,.vc-banner-sale-countdown { background: var(--color-warning-500) } .vc-banner--warning-light-yellow-background { background: var(--color-warning-400) } .vc-banner--preview-yellow-background { background: var(--color-warning-200) } .vc-banner--with-close-icon { padding-right: 30px } .vc-banner--hidden { display: none } .vc-banner--sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 110 } .vc-banner--auto-hide { transition-delay: 5s; transition-duration: .5s; transition-property: height, padding; height: 0; padding: 0 } .vc-banner--hide { transition-duration: .5s; transition-property: height, padding; height: 0; padding: 0 } .vc-banner__close-icon { position: absolute; right: 15px; top: 15px; cursor: pointer } .vc-banner__text--dark-default { color: var(--color-neutral-900) } .vc-banner__text--light-default { color: var(--color-white) } .vc-banner__text--black { color: var(--color-black) } .vc-banner__text--success-green { color: var(--color-success-500) } .vc-banner__text--warning-yellow { color: var(--color-warning-500) } .container__scrollable { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 10px; width: 100% } .container__scrollable>* { -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 0; flex-shrink: 0 } .container__scrollable::-webkit-scrollbar { display: none } @media (min-width: 768px) { .container__scrollable { margin-top:15px; margin-bottom: 20px } } @media (min-width: 768px) { .container__scrollable--wrap { -webkit-flex-wrap:wrap; flex-wrap: wrap } } .container__scrollable--slim { margin-bottom: 0; margin-top: 0; padding: 0 } .vc-countdown { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; font-family: var(--font-family-primary-bold) } .vc-count { -webkit-align-items: baseline; align-items: baseline; background-color: var(--color-white); border-radius: 5px; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; line-height: 1.25 } .vc-count__digits { font-family: var(--font-family-primary-bold) } .vc-countdown-sale-banner { font-family: var(--font-family-display); gap: 4px } .vc-countdown-sale-banner .vc-count { -webkit-justify-content: flex-end; justify-content: flex-end; min-height: 30px; padding: 5px } .vc-countdown-sale-banner .vc-count__digits { font-family: var(--font-family-display); font-size: var(--font-size-small-400) } .vc-countdown-sale-banner .vc-count__label { font-size: var(--font-size-small-200); margin-left: 2px } .vc-countdown-sale-banner .vc-count__separator { color: var(--color-white); margin: 0 5px } .vc-countdown-product-sale { display: -webkit-flex; display: flex; gap: 4px } .vc-countdown-product-sale .vc-count { -webkit-align-items: center; align-items: center; background-color: var(--color-white); border-radius: 10px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; padding: 8px; text-align: center; line-height: 1 } .vc-countdown-product-sale .vc-count__digits { color: var(--color-accent-orange-500); font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-200); margin-bottom: 4px } .vc-countdown-product-sale .vc-count__label { color: var(--color-neutral-700); font-family: var(--font-family-primary); font-size: var(--font-size-small-200); text-transform: capitalize } .vc-countdown-product-sale .vc-count__separator { display: none } .vc-countdown-design-tile { -webkit-align-items: unset; align-items: unset; background: transparent; color: var(--tile-countdown-color); font-size: var(--font-size-small-200); line-height: 16px; margin-left: 2px } @media (min-width: 768px) { .vc-countdown-design-tile { font-size:var(--font-size-small-300) } } .vc-countdown-design-tile .vc-count__preposition { color: var(--tile-countdown-color); padding: 0 3px } .vc-countdown-design-tile .vc-count { background: transparent; line-height: 16px } .vc-countdown-design-tile .vc-count__digits { color: var(--tile-countdown-color); font-family: var(--font-family-primary-semibold) } .vc-countdown-design-tile .vc-count__label { color: var(--tile-countdown-color); padding: 0 3px } .vc-countdown-design-tile .vc-count__separator { color: var(--tile-countdown-color); line-height: 16px; margin: 0 } .vc-countdown-artist { -webkit-align-items: unset; align-items: unset; background: transparent; color: var(--color-accent-orange-600); font-size: var(--font-size-small-300); -webkit-justify-content: center; justify-content: center; line-height: 16px; margin-left: 2px } .vc-countdown-artist .vc-count__preposition { color: var(--color-accent-orange-600); padding: 0 3px } .vc-countdown-artist .vc-count { background: transparent; line-height: 16px } .vc-countdown-artist .vc-count__digits { color: var(--color-accent-orange-600); font-family: var(--font-family-primary-semibold) } .vc-countdown-artist .vc-count__label { color: var(--color-accent-orange-600); padding: 0 3px } .vc-countdown-artist .vc-count__separator { color: var(--color-accent-orange-600); line-height: 16px; margin: 0 } .link-collection--divider { border-top: 1px solid var(--color-neutral-100); margin-top: 8px; padding-top: 8px } .link-collection__header { color: var(--color-neutral-900); min-width: 170px } .link-collection__content { margin-top: 15px; gap: 10px } @media (min-width: 1024px) { .link-collection__content { margin-top:15px } } .link-collection__content .link-collection__link { margin: 0; text-transform: none } .tp-text-note--neutral { --label-background-color: var(--color-neutral-100); --label-border-color: var(--color-neutral-300) } .tp-text-note--neutral.tp-text-note--on-dark { --label-background-color: var(--color-neutral-800-a40); --label-border-color: var(--color-neutral-800) } .tp-text-note--success { --label-background-color: var(--color-success-100); --label-border-color: var(--color-success-300) } .tp-text-note--warning { --label-background-color: var(--color-warning-100); --label-border-color: var(--color-warning-300) } .tp-text-note--danger { --label-background-color: var(--color-danger-100); --label-border-color: var(--color-danger-300) } .tp-text-note--information { --label-background-color: var(--color-primary-100); --label-border-color: var(--color-primary-300) } .tp-text-note--on-dark .tp-text-note--header,.tp-text-note--on-dark .tp-text-note__text { color: var(--color-white) } .tp-text-note { background-color: var(--label-background-color); border: 2px solid var(--label-border-color); border-radius: 12px; color: var(--label-text-color); display: -webkit-flex; display: flex; line-height: 1; padding: 12px 16px; text-align: left; gap: 12px; margin: 16px 0px } .tp-text-note .tp-text-note--header { margin-bottom: 8px } .tp-text-note .tp-text-note__text { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary); font-weight: 500 } .tp-text-note .tp-text-note--link { margin-top: 8px } .tp-favorite-button { border-radius: 800px; box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20); padding: 6px; margin-top: 0; margin-bottom: 0 } .tp-favorite-button.tp-favorite-button--filled:hover { background: var(--color-danger-100); box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } .tp-favorite-button.tp-favorite-button--filled:focus { background: var(--color-danger-200); box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } .tp-favorite-button.tp-favorite-button--unfilled:hover { background: var(--color-primary-100); box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } .tp-favorite-button.tp-favorite-button--unfilled:focus { background: var(--color-primary-200); box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } .tp-favorite-button.tp-favorite-button--inactive:hover { background: var(--color-white); box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } .tp-favorite-button.tp-favorite-button--inactive:focus { background: var(--color-white); box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } .tp-favorite-button__tooltip { text-transform: none; width: 140px } .tp-favorite-button__tooltip[data-popper-placement^="left"]>.tp-tooltip--arrow { right: 0 } .c-link__button { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } .c-link__button.full-width { width: 100% } .c-link__button.btn--full { width: initial } .c-link__header { background-color: var(--color-neutral-900); color: var(--color-white); font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100); padding: 20px } .c-link__header:hover,.c-link__header:focus { color: var(--color-white) } .link__content { display: inline } .link__cta { display: -webkit-flex; display: flex; font-family: var(--font-family-primary-semibold); font-weight: 600; line-height: 24px } .link__cta.tp-btn--icon { padding: 0 } .link__cta.link--medium { line-height: 20px } .link__cta.link--small { line-height: 16px } .link__cta .link__content { border-bottom: 2px solid var(--color-primary-500) } .link__cta--on-light .link__content { color: var(--color-neutral-900) } .link__cta--on-light .link__content:hover { border-color: var(--color-neutral-300) } .link__cta--on-light .link__content:active { border-color: var(--color-primary-500); color: var(--color-neutral-700) } .link__cta--on-dark .link__content { border-color: var(--color-primary-400); color: var(--color-white) } .link__cta--on-dark .link__content:hover { border-color: var(--color-neutral-700); color: var(--color-white) } .link__cta--on-dark .link__content:active { border-color: var(--color-primary-600); color: var(--color-neutral-300) } .link--disabled { cursor: default } .vc-pill { -webkit-align-items: center; align-items: center; background-color: transparent; border: 2px solid var(--color-primary-300); border-radius: 100px; color: var(--color-neutral-900); display: -webkit-flex; display: flex; gap: 4px; -webkit-justify-content: center; justify-content: center; min-width: 56px; padding: 8px 12px; text-transform: none; transition: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } .vc-pill.tp-btn--icon .teepublicon { margin: 0 } .vc-pill svg { fill: currentColor } .vc-pill:hover { background-color: var(--color-primary-500); border-color: var(--color-primary-500); color: var(--color-white); outline: none } .vc-pill:disabled { background-color: var(--color-neutral-200); border-color: var(--color-neutral-200); color: var(--color-neutral-500); outline: none } .vc-pill:active { background-color: var(--color-neutral-900); border-color: var(--color-neutral-900); color: var(--color-white); outline: none } .vc-pill.vc-pill--on-dark { border-color: var(--color-primary-500); color: var(--color-white) } .vc-pill.vc-pill--on-dark:hover { background-color: var(--color-primary-500); border-color: var(--color-primary-500); color: var(--color-white); outline: none } .vc-pill.vc-pill--on-dark:disabled { background-color: var(--color-neutral-800); border-color: var(--color-neutral-800); color: var(--color-neutral-400); outline: none } .vc-pill.vc-pill--on-dark:active { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-neutral-900); outline: none } .vc-pill.vc-pill--on-periwinkle { border-color: var(--color-primary-300); color: var(--color-white) } .vc-pill.vc-pill--on-periwinkle:hover { background-color: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-white); outline: none } .vc-pill.vc-pill--on-periwinkle:disabled { background-color: var(--color-neutral-400); border-color: var(--color-neutral-400); color: var(--color-neutral-200); outline: none } .vc-pill.vc-pill--on-periwinkle:active { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-neutral-900); outline: none } .vc-pill.btn:active { box-shadow: none } .vc-pill.m-search__tags-unlinkable { background-color: var(--color-neutral-100); border: 3px solid var(--color-neutral-200); color: var(--color-neutral-500) } .vc-pill[data-active=true] { background-color: var(--color-primary-500); color: var(--color-white) } .vc-pill[data-active=true] svg { fill: var(--color-white); transition: fill 300ms ease-out } .vc-pill.vc-pill--danger { color: var(--color-danger-500) } .vc-pill.vc-pill--danger:active,.vc-pill.vc-pill--danger:focus,.vc-pill.vc-pill--danger:hover { background-color: var(--color-danger-600); border-color: var(--color-danger-600); color: var(--color-white) } .vc-pill.vc-pill--danger:focus-visible { background: var(--color-neutral-900) } .tp-btn-tertiary--on-light { border-radius: 12px; border: 2px solid var(--color-primary-500); color: var(--color-neutral-900); display: inline-block } .tp-btn-tertiary--on-light svg { fill: var(--color-neutral-900) } .tp-btn-tertiary--on-light:hover { background-color: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-white) } .tp-btn-tertiary--on-light:hover svg { fill: var(--color-white) } .tp-btn-tertiary--on-dark { border-radius: 12px; border: 2px solid var(--color-primary-400); color: var(--color-white); display: inline-block } .tp-btn-tertiary--on-dark svg { fill: var(--color-white) } .tp-btn-tertiary--on-dark:hover { background-color: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-white) } .tp-btn-tertiary--on-dark:hover svg { fill: var(--color-white) } @-webkit-keyframes crash-in-from-right { 0%,100%,60%,75%,90% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes crash-in-from-right { 0%,100%,60%,75%,90% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } 100% { -webkit-transform: none; transform: none } } .vc-pill--animated { -webkit-animation-name: crash-in-from-right; animation-name: crash-in-from-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: calc(var(--animation-order) * 150ms); animation-delay: calc(var(--animation-order) * 150ms) } .vc-pill--outline { background-color: transparent; border: 2px solid var(--color-primary-500); color: var(--color-white) } .vc-pill--outline:hover { background-color: var(--color-primary-500); color: var(--color-white) } .vc-pill--outline:hover svg { fill: var(--color-white) } .vc-pill--outline:active { background-color: var(--color-primary-700); color: var(--color-primary-200) } .vc-pill--outline:active svg { fill: var(--color-primary-200) } .vc-pill--outline:focus { background-color: transparent; color: var(--color-white); outline: 4px solid var(--color-primary-300); outline-offset: 0 } .vc-pill--outline:focus svg { fill: var(--color-white) } .c-checkbox { display: grid; grid-template-columns: 28px auto; -webkit-align-items: center; align-items: center; -webkit-align-content: start; align-content: start; width: 100% } .c-checkbox.slim { min-height: 40px; padding-right: 4px; -webkit-column-gap: 12px; column-gap: 12px; row-gap: 8px } .c-checkbox input[type='checkbox'] { grid-area: 1 / 1 / 1 / 1; box-sizing: border-box; height: 24px; width: 24px; margin: 0px 0px 0px 4px; border: 2px solid var(--color-neutral-900); border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; outline: none; transition: outline 0.1s } .c-checkbox input[type='checkbox']:checked { border: 2px solid var(--color-primary-500); background-color: var(--color-primary-500); background-size: cover; background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon"><path id="utility_icon" fill-rule="evenodd" clip-rule="evenodd" d="M14.072 2.55728C14.7768 3.14932 14.8682 4.20063 14.2762 4.90544L7.27617 13.2388C6.96589 13.6082 6.51079 13.825 6.02846 13.8332C5.54612 13.8414 5.08388 13.6403 4.76117 13.2817L1.76117 9.9484C1.14541 9.26421 1.20087 8.21039 1.88505 7.59463C2.56924 6.97887 3.62305 7.03433 4.23882 7.71851L5.95662 9.62718L11.7238 2.76147C12.3159 2.05665 13.3672 1.96524 14.072 2.55728Z" fill="white"/></g></svg>') } .c-checkbox input[type='checkbox']:checked~.c-checkbox-disclaimer { grid-column: 1 / span 2; display: block; font-family: "Roobert-Medium", Helvetica, sans-serif; font-size: var(--font-size-small-100); color: var(--color-neutral-700); line-height: 1.45 } .c-checkbox input[type='checkbox']:checked~.c-checkbox-disclaimer a { display: inline-block; font-family: "Roobert-SemiBold", Helvetica, sans-serif; -webkit-text-decoration-line: underline; text-decoration-line: underline; color: var(--color-neutral-800) } .c-checkbox input[type='checkbox']:not(:checked)~.c-checkbox-disclaimer { display: none } .c-checkbox input[type='checkbox']:focus-visible+label { outline: 4px solid var(--color-primary-300); border-radius: 12px } .c-checkbox input[type='checkbox']:active { background-color: var(--color-primary-200); border-color: var(--color-primary-700); -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } .c-checkbox input[type='checkbox']:disabled:not(:checked) { background-color: transparent; border-color: var(--color-neutral-300) } .c-checkbox input[type='checkbox']:disabled:checked { background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon"><path id="utility_icon" fill-rule="evenodd" clip-rule="evenodd" d="M14.072 2.55728C14.7768 3.14932 14.8682 4.20063 14.2762 4.90544L7.27617 13.2388C6.96589 13.6082 6.51079 13.825 6.02846 13.8332C5.54612 13.8414 5.08388 13.6403 4.76117 13.2817L1.76117 9.9484C1.14541 9.26421 1.20087 8.21039 1.88505 7.59463C2.56924 6.97887 3.62305 7.03433 4.23882 7.71851L5.95662 9.62718L11.7238 2.76147C12.3159 2.05665 13.3672 1.96524 14.072 2.55728Z" fill="white"/></g></svg>'); background-color: var(--color-primary-300); border-color: var(--color-primary-300) } .c-checkbox input[type='checkbox']:disabled~label .tp-input-label-content { color: var(--color-neutral-600) } .c-checkbox input[type='checkbox']:disabled~label .tp-input-label-description { color: var(--color-neutral-500) } @media (hover: hover) { .c-checkbox input[type='checkbox']:not(:checked):hover { background-color:var(--color-primary-200); -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } } @media (prefers-reduced-motion: reduce) { .c-checkbox input[type='checkbox'] { transition: none } } .c-checkbox label { grid-area: 1 / 1 / 1 / span 2; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; padding: 8px 0px 8px 40px; gap: 2px; min-height: 40px; cursor: pointer } .c-checkbox label .tp-input-label-content { font-family: "Roobert-SemiBold", Helvetica, sans-serif; font-size: var(--font-size-small-300); line-height: 1.3333; color: var(--color-neutral-900) } .c-checkbox label .tp-input-label-description { font-family: "Roobert-Medium", Helvetica, sans-serif; font-size: var(--font-size-small-200); line-height: 1.3333; width: 100%; color: var(--color-neutral-700) } .c-radio { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 64px; -webkit-align-items: center; align-items: center } .c-radio input[type="radio"] { -moz-appearance: none; appearance: none; -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; margin: 6px 12px; grid-column-start: 1; grid-row-start: 1 } .c-radio input[type="radio"]:checked { background: var(--color-primary-500); border: 6px solid var(--color-primary-200); outline: 2px solid var(--color-primary-500) } .c-radio input[type="radio"]:not(:checked) { outline: 2px solid var(--color-neutral-700) } .c-radio input[type="radio"]:not(:checked)~label { box-shadow: none; border: 2px solid var(--color-neutral-300); border-radius: 12px } .c-radio input[type="radio"]:hover~label { box-shadow: none; border: 2px solid var(--color-neutral-300); border-radius: 12px } .c-radio input[type="radio"]:checked~label { box-shadow: none; border: 2px solid var(--color-primary-500); border-radius: 12px } .c-radio input[type="radio"]:focus-visible~label { box-shadow: none; border: 2px solid var(--color-neutral-300); border-radius: 12px } .c-radio input[type="radio"]~label { cursor: pointer } .c-radio label { grid-column-start: 1; grid-column-end: span 2; grid-row-start: 1; grid-row-end: 1; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 2px; padding: 12px 16px 12px 56px } .c-radio label.no-description { padding: 20px 16px 20px 56px } .c-radio label .tp-input-label-aside { height: 20px } .c-radio label .tp-input-label-aside--green { height: 20px; color: var(--color-success-700) } .c-radio label .tp-input-label-content { height: 20px; font-family: "Roobert-SemiBold", Helvetica, sans-serif; font-size: var(--font-size-small-400) } .c-radio label .tp-input-label-description { height: 16px; width: 100%; -webkit-align-self: flex-end; align-self: flex-end; font-size: var(--font-size-small-200) } .c-radio-new { border: 2px solid var(--color-neutral-300); border-radius: 12px } .c-radio-new--selected { border-color: var(--color-primary-500) } .c-radio-new:has(input[type="radio"]:focus) { border-color: var(--color-primary-300); outline: 2px solid var(--color-primary-300) } .c-radio-new:not(.c-radio-new--selected):hover { border-color: var(--color-neutral-900) } .c-radio-new:not(.c-radio-new--selected):hover input[type="radio"] { background-color: var(--color-primary-200) } .c-radio-new:not(.c-radio-new--selected):active { border-color: var(--color-primary-700); background-color: var(--color-primary-100) } .c-radio-new:not(.c-radio-new--selected):active input[type="radio"] { background-color: transparent } .c-radio-new>div,.c-radio-new>label { padding: 12px 16px } .c-radio-new label.c-radio-label { -webkit-align-items: center; align-items: center; cursor: pointer; display: -webkit-flex; display: flex; gap: 12px; margin: 0 } .c-radio-new .c-radio-label-content { display: -webkit-flex; display: flex; gap: 2px; -webkit-flex-direction: column; flex-direction: column; width: 100% } .c-radio-new .c-radio-label-content-main { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; font-size: var(--font-size-small-400); font-family: var(--font-family-primary-semibold) } .c-radio-new .c-radio-description p { color: var(--color-neutral-700); line-height: 1.3333; font-size: var(--font-size-small-200) } .c-radio-new .c-radio-aside { -webkit-align-self: flex-start; align-self: flex-start; display: -webkit-flex; display: flex; gap: 4px; font-size: var(--font-size-small-400); margin-left: auto } .c-radio-new .c-radio-aside img { height: 24px } .c-radio-new .c-radio-aside img.dimmed { opacity: .2 } .c-radio-new .c-radio-aside--green { color: var(--color-success-700) } .c-radio-new .c-radio-additional { border-top: 2px solid var(--color-neutral-300) } .c-radio-new input[type="radio"] { -moz-appearance: none; appearance: none; -webkit-appearance: none; -webkit-flex: 0 0 auto; flex: 0 0 auto; cursor: pointer; height: 24px; width: 24px; margin: 0; border-radius: 50%; overflow: hidden } .c-radio-new input[type="radio"]:focus { outline-offset: 0 } .c-radio-new input[type="radio"]:checked { background: var(--color-primary-500); border: 4px solid var(--color-primary-200); outline: 2px solid var(--color-primary-500) } .c-radio-new input[type="radio"]:not(:checked) { border: 6px solid transparent; outline: 2px solid var(--color-neutral-700) } .c-radio-new input[type="radio"]:active { outline-color: var(--color-primary-700) } .c-radio-group { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 8px; margin: 12px 0px } .c-search-form__search { -webkit-flex-grow: 1; flex-grow: 1 } .c-search-form--rainbow { -webkit-animation: animated-border-gradient 6s ease-in-out alternate infinite; animation: animated-border-gradient 6s ease-in-out alternate infinite; background: linear-gradient(60deg, var(--color-success-500), var(--color-warning-400), var(--color-warning-500), var(--color-danger-500), var(--color-primary-500), #B3EAFE, var(--color-success-500)); background-size: 300% 300%; border-radius: 5px; margin-top: 20px; padding: 2px } @media (min-width: 768px) { .c-search-form--rainbow { border-radius:10px; padding: 3px } } .c-search-form--rainbow .form__fields--autocomplete-search-inline { -webkit-flex-shrink: 0; flex-shrink: 0 } .c-search-form--rainbow .btn { border-radius: 0 4px 4px 0; padding: 12px; width: auto } @media (min-width: 768px) { .c-search-form--rainbow .btn { border-radius:0 7px 7px 0; padding: 17px; width: 100% } } .c-search-form--rainbow .form__control { border: none; border-radius: 4px 0 0 4px; height: 40px } @media (min-width: 768px) { .c-search-form--rainbow .form__control { border-radius:7px 0 0 7px; font-size: var(--font-size-small-400); height: 50px } } .c-search-form--rainbow .form__fields--inline .form__actions { margin: 0; width: auto } .tp-text-note--neutral { --label-background-color: var(--color-neutral-100); --label-border-color: var(--color-neutral-300) } .tp-text-note--neutral.tp-text-note--on-dark { --label-background-color: var(--color-neutral-800-a40); --label-border-color: var(--color-neutral-800) } .tp-text-note--success { --label-background-color: var(--color-success-100); --label-border-color: var(--color-success-300) } .tp-text-note--warning { --label-background-color: var(--color-warning-100); --label-border-color: var(--color-warning-300) } .tp-text-note--danger { --label-background-color: var(--color-danger-100); --label-border-color: var(--color-danger-300) } .tp-text-note--information { --label-background-color: var(--color-primary-100); --label-border-color: var(--color-primary-300) } .tp-text-note--on-dark .tp-text-note--header,.tp-text-note--on-dark .tp-text-note__text { color: var(--color-white) } .tp-text-note { background-color: var(--label-background-color); border: 2px solid var(--label-border-color); border-radius: 12px; color: var(--label-text-color); display: -webkit-flex; display: flex; line-height: 1; padding: 12px 16px; text-align: left; gap: 12px; margin: 16px 0px } .tp-text-note .tp-text-note--header { margin-bottom: 8px } .tp-text-note .tp-text-note__text { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary); font-weight: 500 } .tp-text-note .tp-text-note--link { margin-top: 8px } .tp-newsletter-signup--dark { --newsletter-signup-text-color: var(--color-white); --newsletter-signup-background-color: var(--color-primary-600) } .tp-newsletter-signup--light { --newsletter-signup-text-color: var(--color-black); --newsletter-signup-background-color: rgba(21, 21, 35, 0.08) } .tp-newsletter-signup--transparent { --newsletter-signup-text-color: var(--color-black); --newsletter-signup-background-color: transparent } .m-newsletter-signup { background-color: var(--newsletter-signup-background-color) } .m-newsletter-signup .tp-input-label-content { color: var(--newsletter-signup-text-color); margin-bottom: 8px } .m-newsletter-signup .tp-input-field { background-color: var(--color-white) } .m-newsletter-signup-header,.m-newsletter-signup-header__subtext,.m-newsletter-signup-privacy-policy { color: var(--newsletter-signup-text-color); text-align: center; max-width: 560px; margin: auto } .m-newsletter-signup-header { font-family: var(--font-family-display); font-size: var(--font-size-medium-200); font-weight: 600; line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; margin-bottom: 4px } @media (min-width: 768px) { .m-newsletter-signup-header { font-size:var(--font-size-medium-400); line-height: var(--font-size-large-100) } } .m-newsletter-signup-header__subtext { font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400); line-height: var(--font-size-medium-200); margin-bottom: 0; margin-top: 0; margin-bottom: 20px } @media (min-width: 768px) { .m-newsletter-signup-header__subtext { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-newsletter-signup-header__form { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .m-newsletter-signup-form { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 0; max-width: 560px; width: 100% } @media (min-width: 768px) { .m-newsletter-signup-form { -webkit-flex-direction:row; flex-direction: row; gap: 12px; height: 100px } } .m-newsletter-signup-form .tp-form { width: inherit } .m-newsletter-signup-form .tp-input-field--wrapper { min-width: 100% } @media (min-width: 768px) { .m-newsletter-signup-form .tp-input-field--wrapper { min-width:400px } } .m-newsletter-signup-form__submit { font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-400); font-family: var(--font-family-primary-semibold); font-weight: 600; -webkit-align-items: center; align-items: center; background: var(--color-neutral-900); border: 0; border-radius: 12px; color: var(--color-white); display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; height: 48px; margin-top: 12px; width: 100% } .m-newsletter-signup-form__submit:hover { cursor: pointer } .m-newsletter-signup-privacy-policy { font-size: var(--font-size-small-100); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; margin-top: 16px } @media (min-width: 768px) { .m-newsletter-signup-privacy-policy { margin-top:0 } } .m-newsletter-signup-privacy-policy a { color: var(--newsletter-signup-text-color); text-decoration: underline } .m-newsletter-signup-header__success-message-container { display: none } .m-newsletter-signup-header__success-message { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-bold); font-weight: 700; -webkit-align-items: center; align-items: center; background: var(--color-success-100); border: 2px solid var(--color-success-300); border-radius: 12px; display: -webkit-flex; display: flex; gap: 12px; padding: 12px 16px } .m-newsletter-signup-header__success-message .teepublicon-variant--circle.medium { padding: 0 } .m-newsletter-signup--success .m-newsletter-signup-header__success-message-container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } @media (min-width: 1280px) { .m-newsletter-signup--success .m-newsletter-signup-header__success-message-container { -webkit-align-self:flex-start; align-self: flex-start } } .m-newsletter-signup--success .m-newsletter-signup-header__form form,.m-newsletter-signup--success .m-newsletter-signup-privacy-policy { display: none } .m-newsletter-signup-header__error-message-container { display: none; -webkit-justify-content: center; justify-content: center; margin-top: 12px } @media (min-width: 1280px) { .m-newsletter-signup-header__error-message-container { -webkit-align-self:flex-start; align-self: flex-start } } .m-newsletter-signup-header__error-message { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-bold); font-weight: 700; -webkit-align-items: center; align-items: center; background: var(--color-danger-100); border: 2px solid var(--color-danger-300); border-radius: 12px; display: -webkit-flex; display: flex; gap: 12px; padding: 12px 16px } .m-newsletter-signup-header__error-message .teepublicon-variant--circle.medium { padding: 0 } .m-newsletter-signup--error .m-newsletter-signup-header__error-message-container { display: -webkit-flex; display: flex } .m-newsletter-signup--dashery-store { background-color: var(--newsletter-signup-background-color); min-height: 350px; padding: 40px 16px 0 } @container storefront (min-width: 768px) { .m-newsletter-signup--dashery-store { min-height: 300px } } @container storefront (max-width: 767px) { .m-newsletter-signup--dashery-store .m-newsletter-signup-form { -webkit-flex-direction: column; flex-direction: column; gap: 0; height: unset } .m-newsletter-signup--dashery-store .m-newsletter-signup-privacy-policy { margin-top: 16px } } .m-newsletter-signup--dashery-store .m-newsletter-signup-header__form { -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center } .m-newsletter-signup--dashery-store .m-newsletter-signup-header__success-message-container,.m-newsletter-signup--dashery-store .m-newsletter-signup-header__error-message-container { -webkit-align-self: center; align-self: center } .m-account-saved-lists { padding: 24px 16px } @media (min-width: 1024px) { .m-account-saved-lists { padding-inline:32px } } .m-saved-list__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 0 } @media (min-width: 1024px) { .m-saved-list__items { grid-template-columns:repeat(4, 1fr) } } .m-account-saved-lists__pagination .previous_page,.m-account-saved-lists__pagination .next_page { display: none } .m-account-saved-lists__pagination .previous_page~a:not(.next_page) { padding: 4px } @media (hover: hover) and (pointer: fine) { .m-account-saved-lists__pagination .previous_page~a:not(.next_page):hover { background-color:var(--color-primary-500); color: var(--color-white) } } .saved-list-empty__title { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0 } @media (min-width: 768px) { .saved-list-empty__title { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .saved-list-empty__text { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary); font-weight: 500; margin-top: 4px } .saved-list-empty__popular-topics { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin-top: 20px; max-width: 600px } .saved-list-empty__cta { margin-top: 20px } .default-product-preview { margin-top: 20px } .default-product-preview .title { display: -webkit-flex; display: flex; gap: 8px; margin-bottom: 8px } .default-product-preview .title h3 { margin: 0 } .default-product-preview p { margin-bottom: 20px } .default-product-preview.m-uploader__container--neutral { padding: 40px; text-align: left } .m-account { margin: 20px auto } @media (min-width: 1280px) { .m-account { margin:40px auto } } .m-account__header { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; gap: 8px } .m-account__header h1 { margin: 0 } @media (min-width: 1280px) { .m-account__body { min-height:650px } } .m-account__referral-form .form__actions { -webkit-flex-shrink: 1; flex-shrink: 1 } @media (max-width: 981px) { .m-account__referral-form .form__actions { -webkit-flex-basis:auto; flex-basis: auto; margin-left: 0 } } @media (max-width: 981px) { .m-account__referral-form .form__actions .form__field { margin-left:5px } .m-account__referral-form .form__actions .form__field:first-child { margin-left: 0 } } @media (max-width: 981px) { .m-account__referral-form .form__body { -webkit-flex-shrink:0; flex-shrink: 0; width: 100% } } .m-account__referral-form .form-field-mock-editable { -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-basis: 150%; flex-basis: 150% } @media (max-width: 981px) { .m-account__referral-form .form__field { margin-left:0 } } .m-account__referral-form .form__fields { -webkit-flex-wrap: wrap; flex-wrap: wrap } @media (min-width: 982px) { .m-account__referral-form .form__fields { -webkit-flex-wrap:nowrap; flex-wrap: nowrap } } .m-account__referral-form .m-account__social-icons { -webkit-align-items: center; align-items: center; display: -webkit-inline-flex; display: inline-flex; margin-left: 5px } .m-account__referral-form .m-account__social-icons li { margin-right: 3px } @media (max-width: 981px) { .m-account__referral-short-path { margin-top:0 } } .m-account__sales { margin: 10px } @media (min-width: 982px) { .m-account__sales { margin:25px } .m-account__sales+.content-table__section { margin-top: 25px } } .m-account__sales h4 { font-size: var(--font-size-small-400) } .m-account__sales-info { background-color: var(--color-white); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; padding: 10px } @media (min-width: 768px) { .m-account__sales-info { -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap } } .m-account__sales-info .h--5 { font-size: var(--font-size-small-400); font-family: var(--font-family-primary-bold) } .m-account__sales-info .text-note--small { font-size: var(--font-size-small-300) } .m-account__sales-info-container { border-radius: 4px; padding: 10px } @media (max-width: 767px) { .m-account__sales-info-container { display:-webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; text-align: left; margin-left: 0; margin-right: 0 } } @media (min-width: 768px) { .m-account__sales-info-container { -webkit-flex-basis:0; flex-basis: 0; -webkit-flex-grow: 1; flex-grow: 1; text-align: center } .m-account__sales-info-container:first-of-type { margin-left: 0 } .m-account__sales-info-container:last-of-type { margin-right: 0 } } .m-account__sales-info-container div:last-child { font-size: var(--font-size-small-400) } .m-account__sales-info-container--header { -webkit-align-self: center; align-self: center; width: 50% } @media (min-width: 768px) { .m-account__sales-info-container--header { width:100% } .m-account__sales-info-container--header p { margin-bottom: 10px; margin-top: 3px } } .m-account__sales-status-description { color: var(--color-neutral-600); font-size: 12px } .m-account__sales-radio-content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 12px } .m-account__sales-radio-content .tp-form .tp-input-field--wrapper { margin-bottom: 0 } .m-account__partner-btns { display: grid; text-align: right } .m-account__sales-note { background-color: var(--color-neutral-200) } .m-account__sales-note>div { margin: 15px } .m-account__double-columns { display: -webkit-flex; display: flex } .m-account__double-columns>div { width: calc(50% - 15px / 2) } .m-account__double-columns>div:first-child { margin-right: 15px } .m-account__earnings-table { width: 100% } .m-account__earnings-table tr th,.m-account__earnings-table tr td { padding: 4px 15px } .m-account__earnings-table tr th { background-color: var(--color-neutral-600); height: 30px; color: var(--color-white); vertical-align: middle } .m-account__earnings-table tr:nth-child(odd) { background-color: var(--color-neutral-200) } .m-account__earnings-table tr:nth-child(even) { background-color: var(--color-neutral-200) } .m-account__earnings-cell--red { color: var(--color-danger-500) } .m-account__earnings-cell--green { color: var(--color-success-600) } .m-account__earnings-filters { display: -webkit-flex; display: flex; margin-bottom: 15px } .m-account__earnings-filters>a { -webkit-flex-grow: 1; flex-grow: 1; margin: 0 5px; padding: 10px 2px } @media (min-width: 768px) { .m-account__addresses { width:50% } } .m-account__addresses .error li { color: inherit; list-style: none } .m-account__address-info-container { border-top: 1px solid var(--color-neutral-200); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin-top: 15px; padding-top: 15px } @media (min-width: 768px) { .m-account__address-info-container { -webkit-flex-direction:row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between } } .m-account__address-info-container .m-account__address-info { padding-bottom: 15px } @media (min-width: 768px) { .m-account__address-info-container .m-account__address-info { padding:0 } } .m-account__full-name .h__h4 { margin-bottom: 5px } .m-account__remove-address-modal .dialog-content { margin-bottom: 15px } .m-account__address-actions { -webkit-align-items: baseline; align-items: baseline; display: -webkit-flex; display: flex } .m-account__address-actions .link--space-right { border-right: 2px solid var(--color-neutral-200); padding-right: 15px } .m-account__address-actions .m-account__address-delete-container { padding-left: 15px } .remove-browser-styling { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; padding: 0 } .m-account__orders-ordered-products { display: grid; gap: 12px 0; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(120px, 1fr)); grid-template-rows: 1fr; overflow-x: scroll; padding: 12px 0 } @media (min-width: 768px) { .m-account__orders-ordered-products { gap:24px 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, 1fr); overflow-x: hidden } } .m-account__orders-ordered-products .link__cta { -webkit-justify-content: center; justify-content: center } .m-account__orders .m-tab-nav__list { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-bottom: 16px } .m-account__order-details { background-color: var(--color-neutral-200); border-radius: 8px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 8px; -webkit-justify-content: space-between; justify-content: space-between; padding: 12px } @media (min-width: 768px) { .m-account__order-details { -webkit-flex-direction:row; flex-direction: row } } .m-account__order-detail { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; line-height: var(--font-size-medium-300) } .m-account__order-detail h4 { font-family: "Roobert-Bold", Helvetica, sans-serif; line-height: var(--font-size-medium-300); margin: 0 } .m-account__order-item { padding: 12px 0px; border-bottom: 1px solid var(--color-neutral-200) } .m-account__order-item:last-child { padding-bottom: 0px; border-bottom: none } @media (min-width: 768px) { .m-account__order-item.tp-line-item { gap:20px } .m-account__order-item .tp-line-item__image { width: 140px } .m-account__order-item .tp-line-item__design-title { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary-bold); font-weight: 700 } .m-account__order-item .tp-line-item__price { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-bold); font-weight: 700 } } .m-account-apps { -webkit-align-items: flex-start; align-items: flex-start; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 20px; padding: 32px } .m-account-app+.m-account-app { border-top: 2px solid var(--color-neutral-200) } .m-account-app { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between; min-width: 100%; padding-top: 20px } @media (min-width: 768px) { .m-account-app { -webkit-flex-direction:row; flex-direction: row } } .m-account-app_info { -webkit-align-items: center; align-items: center; display: grid; gap: 0 12px; grid-template-areas: "icon name status" "blank details details"; grid-template-columns: 48px auto 1fr } .m-account-app__name { font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-400); font-family: var(--font-family-primary-semibold); font-weight: 600 } .m-account-app__icon .teepublicon { padding: 12px } .m-account-app__service-info { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 8px; grid-area: details } .m-account-app-wrapper { padding: 32px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 20px } .m-account-app-divider { border-bottom: 1px solid var(--color-neutral-200) } .m-account-app__back-btn { color: var(--color-neutral-900) } .m-account-app__description { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0 } @media (min-width: 768px) { .m-account-app__description { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-account__alert .alert-box--mild { margin: 0 } .m-account__alert .alert-box--mild a { margin-top: 8px } .m-account__instructions__title { font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-400); font-family: var(--font-family-primary-bold); font-weight: 700 } .m-account__instructions__content ol { font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-400); font-family: var(--font-family-primary); font-weight: 500; list-style-type: auto; margin-left: 32px } .m-account__instructions__content ol li { margin-bottom: 6px } .m-account__terms { font-size: var(--font-size-small-100); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-700) } .m-account__terms strong { color: var(--color-neutral-700) } .m-account__cta { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; background-color: var(--color-white); border-radius: 12px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 12px; -webkit-justify-content: space-between; justify-content: space-between; padding: 20px 24px } @media (min-width: 768px) { .m-account__cta { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } @media (min-width: 768px) { .m-account__cta { -webkit-flex-direction:row; flex-direction: row; gap: 0 } } .m-account__cta--app-info { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; gap: 8px } .m-account__cta--btn { -webkit-align-items: center; align-items: center; border-radius: 8px; display: -webkit-flex; display: flex; font-size: 16px; font-weight: 600; gap: 4px; padding: 10px } .account-field-label { margin-bottom: 4px } .p16 { padding-bottom: 16px } .account-field-stripe-label { margin-top: 8px; margin-bottom: 12px } .residential-info-options { display: grid; margin: 20px 16px; row-gap: 8px } .residential-info-text { font-size: 16px } .m-account__btn { border-radius: 8px; display: -webkit-flex; display: flex; font-size: 12px; gap: 4px; padding: 10px } .account-orders-empty__title { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0 } @media (min-width: 768px) { .account-orders-empty__title { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .account-orders-empty__text { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary); font-weight: 500; margin-top: 16px } .account-orders-empty__cta { margin-top: 16px } .m-preset-form__container { gap: 56px; margin: 40px } @media (min-width: 1024px) { .m-preset-form__container { display:-webkit-flex; display: flex } } .m-preset-form__container>div { -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-basis: 0; flex-basis: 0 } .m-preset-form__custom-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin-bottom: 16px } .m-preset-form__custom-row,.m-preset-form__custom-row--header { display: -webkit-flex; display: flex; gap: 12px; font-size: var(--font-size-small-300); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-neutral-200) } .m-preset-form__custom-row>div,.m-preset-form__custom-row--header>div { -webkit-flex: 1 0; flex: 1 0 } .m-preset-form__custom-row input[type=number],.m-preset-form__custom-row--header input[type=number] { -moz-appearance: textfield } .m-preset-form__custom-row input::-webkit-outer-spin-button,.m-preset-form__custom-row--header input::-webkit-outer-spin-button,.m-preset-form__custom-row input::-webkit-inner-spin-button,.m-preset-form__custom-row--header input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } .m-preset-form__custom-row--header>div { font-family: var(--font-family-primary-bold) } .m-preset-form__custom-row-description { color: var(--color-neutral-500); font-size: var(--font-size-small-200) } .m-preset-form__custom-row-minimum { color: var(--color-neutral-500); font-size: var(--font-size-small-200); margin-top: 4px } .m-preset-form__custom-toggle-button { border-bottom: 2px solid var(--color-primary-500); font-family: var(--font-family-primary-bold); margin-top: 16px } .m-preset-form__sidebar { display: -webkit-flex; display: flex; gap: 24px; -webkit-flex-direction: column; flex-direction: column } .m-preset-form__preview-container { display: -webkit-flex; display: flex; gap: 32px; -webkit-flex-direction: column; flex-direction: column } .m-preset-form__preview-container-row { display: -webkit-flex; display: flex; gap: 16px } .m-preset-form__preview-info { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-grow: 1; flex-grow: 1; gap: 8px } .m-preset-form__preview-info-row { display: -webkit-flex; display: flex } .m-preset-form__preview-info-divider { border-top: 1px solid var(--color-neutral-200); width: 100% } .m-preset-form__preview-info-label { -webkit-flex-grow: 1; flex-grow: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 2px } .m-preset-form__preview-info-label-text { font-size: var(--font-size-small-400) } .m-preset-form__preview-info-label-text--description { color: var(--color-neutral-600); font-size: var(--font-size-small-300) } .m-preset-form__preview-info-label-text--bold { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100) } .m-preset-form__preview-info-value,.m-preset-form__preview-info-value--green { -webkit-justify-content: flex-end; justify-content: flex-end } .m-preset-form__preview-info-value--green { color: var(--color-success-700); font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100) } .m-preset-form__preview-image { width: 120px; height: 120px } .m-preset-form__preview-image>img { height: 100%; width: auto } .m-preset-form__description,.m-preset-form__description--grey { font-size: var(--font-size-small-300) } .m-preset-form__description--grey { color: var(--color-neutral-700) } .on-sale-regular-price { text-decoration: line-through } .m-preset-form__confirmation_modal p { margin-bottom: 10px } .m-preset-form__confirmation_cancel { margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 10px } .tp-navigation-list.account-navigation--hidden { display: none } @media (min-width: 768px) { .tp-navigation-list.account-navigation--hidden { display:block } } .account-header { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0 } @media (min-width: 768px) { .account-header { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .nav-links { display: -webkit-inline-flex; display: inline-flex; gap: 24px; -webkit-align-items: anchor-center; align-items: anchor-center; margin-bottom: 24px } .greylink { color: grey } .m-account-section { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 24px } .m-account-section__title { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0 } @media (min-width: 768px) { .m-account-section__title { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-store-settings-fields { padding-top: 24px } .m-store-settings-hr { background-color: var(--color-neutral-200); border: none; height: 1px; margin: 24px 0; width: 100% } .m-account-section__form-action-group { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between } .m-dashery-form .m-dashery-form__file-fields { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 16px; margin-top: 16px } .m-dashery-form .small-logo .current img { height: 60px } .m-dashery-form .medium-logo .current img { height: 80px } .m-dashery-form .large-logo .current img { height: 120px } .m-dashery-form .current img { border-radius: 0; max-width: 400px; margin: 8px 0; height: auto; width: auto } .m-dashery-form #uploader_WhiteLabelAccount_header img { border-radius: 0; height: 100px; width: 290px; margin: 8px 0 } .m-account-uploads .m-tab-nav__content { -webkit-align-items: flex-start; align-items: flex-start; -webkit-align-self: stretch; align-self: stretch; display: -webkit-flex; display: flex; -webkit-flex: 1 0 0; flex: 1 0 0; -webkit-flex-direction: column; flex-direction: column; gap: 40px; padding: 40px 0 } .m-account-uploads .m-uploads--empty { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; color: var(--color-neutral-900) } @media (min-width: 768px) { .m-account-uploads .m-uploads--empty { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-account__add-dashery-website { border-radius: 12px } .m-account__add-dashery-website #preview-domain-text { padding: 12px 0 } #subdomain-validation-message { margin-bottom: 4px } .m-account-input__status--invalid { color: var(--color-danger-600) } .m-account-input__status--valid { color: var(--color-success-700) } #domain-validation-message { color: var(--color-danger-500); height: 16px } .m-account-security { max-width: 440px; margin: 20px 16px } @media (min-width: 1280px) { .m-account-security { margin:40px } } .m-account-security__title { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0 } @media (min-width: 768px) { .m-account-security__title { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-account-security__form { margin-top: 20px } .m-browse-preferences { display: block; padding: 25px 30px; text-align: left } .m-browse-preferences .form__group { margin-bottom: 0 } .m-browse-preferences__h { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-200); margin-bottom: 30px } .m-browse-preferences__btn-cont { margin-top: 20px } #dismiss-modal-custom { color: var(--color-primary-500); font-size: var(--font-size-small-400); position: inherit } #dismiss-modal-custom:hover { color: var(--color-primary-600) } .m-campaign { margin-top: 15px } .m-campaign__note { padding: 10px; background: var(--color-warning-500); margin-top: 20px; margin-bottom: 20px } .m-campaign__clock { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .m-campaign__clock-label { font-size: var(--font-size-small-400); font-weight: bold } .m-campaign__clock-val { margin-left: 15px; margin-right: 15px; text-align: center } .m-campaign__clock-time { font-size: var(--font-size-large-100); font-family: var(--font-family-primary-bold) } .m-campaign__count { color: var(--color-success-500); margin-right: 8px } .m-campaign__count--goal { margin-left: 8px; margin-right: 0 } .m-campaign__progress { margin-bottom: 20px; height: 11px; width: 100%; background-color: var(--color-neutral-400) } .m-campaign__progress-bar { background-color: var(--color-success-500); height: 100% } .m-campaign__sold { text-transform: uppercase; font-size: var(--font-size-medium-100); margin-bottom: 5px; display: -webkit-flex; display: flex } @media (max-width: 767px) { .m-cart-config .m-design__more-info-ctrl { display:none } } .m-cart-config .m-design__more-info-ctrl { width: 60px; height: 100%; margin-left: 15px } .m-cart-config .m-design__more-info-ctrl .btn { font-size: var(--font-size-small-200); padding: 8px 0; width: 100% } .m-cart-config__colors { margin-top: 15px; margin-bottom: 15px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap } @media (min-width: 768px) { .m-cart-config__colors { margin-bottom:20px } } .m-cart-config__color-img { width: 100%; padding-bottom: 60%; display: block } @media (min-width: 768px) { .m-cart-config__color-img { border-radius:50%; padding-bottom: 100% } } .m-cart-config__color-img.white { box-shadow: inset 0 0 0 1px var(--color-neutral-300) } .m-cart-config__color-img.heathered { background-image: url("https://assets.teepublic.com/assets/colors/heathered_overlay-2e957e0cbc513c2b512aa11eb6680b002faf4cdb74a12f236c107cbf377a08fc.png"); position: relative } .m-cart-config__color-img.heathered:before { content: ''; position: absolute; width: 100%; height: 100%; opacity: 0.8 } @media (min-width: 768px) { .m-cart-config__color-img.heathered:before { border-radius:50% } } .m-cart-config__colors2 { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; margin-top: 4px; gap: 6px; padding: 2px } @media (max-width: 767px) { .m-cart-config__colors2 { overflow-x:auto } } @media (min-width: 768px) { .m-cart-config__colors2 { -webkit-flex-wrap:wrap; flex-wrap: wrap } } .m-cart-config__color-wrap2 { cursor: pointer; -webkit-flex: 0 0 auto; flex: 0 0 auto; position: relative; width: 40px; height: 40px; border-radius: 50%; padding: 2px } @media (min-width: 768px) { .m-cart-config__color-wrap2 { -webkit-flex-grow:0; flex-grow: 0; width: calc(24px + 2px); height: calc(24px + 2px); margin: 0 } } .m-cart-config__color-wrap2:hover { outline: 2px solid var(--color-neutral-900-a20) } .m-cart-config__color-wrap2.active { outline: 2px solid var(--color-neutral-900) } .m-cart-config__color-wrap2 label { cursor: pointer; display: block; border-radius: 50%; width: 100%; height: 100% } @media (min-width: 768px) { .m-cart-config__color-wrap2 label { border-radius:50%; padding: 5px } } .m-cart-config__color-wrap2 label.heather { background-image: url("https://assets.teepublic.com/assets/colors/heathered_overlay-2e957e0cbc513c2b512aa11eb6680b002faf4cdb74a12f236c107cbf377a08fc.png") } .m-cart-config__color-wrap2 label.light_heather { background-image: url("https://assets.teepublic.com/assets/colors/heathered_overlay-2e957e0cbc513c2b512aa11eb6680b002faf4cdb74a12f236c107cbf377a08fc.png") } .m-cart-config__color-wrap2 label.tie_dye { background-image: url("https://assets.teepublic.com/assets/colors/tie_dye_overlay-d1b6f1700cb880016346e88082fb1bbd8ffc6d0bfe3251a9bc40f88a442e4723.png") } @media (min-width: 768px) { .m-cart-config__color-wrap2 label.tie_dye { background-position-x:-5px; background-position-y: -5px } } .m-cart-config__color-wrap2 label.bordered { box-shadow: inset 0 0 0 1px var(--color-neutral-300) } @media (max-width: 767px) { .m-cart-config__color-wrap2 label.bordered { background-size:100% 100% } } .m-cart-config__color-wrap2 input { opacity: 0; position: absolute; cursor: pointer } .m-cart-config__color-wrap2 input:focus-visible~label { outline: var(--color-primary-500) auto 2px } .m-cart-config__color-wrap2 input[type="radio"]+label { position: relative } .m-cart-config__color-wrap2 input[type="radio"]+label .teepublicon { opacity: 0; padding: 2px; z-index: 10 } .m-cart-config__color-wrap2 input[type="radio"]:checked+label .teepublicon,.m-cart-config__color-wrap2 input[type="radio"]+label:hover .teepublicon { opacity: 1; transition: all 100ms ease-in-out } .m-cart-config__option { margin: 16px 0 } .m-cart-config__quantity-container { width: 130px } .m-cart-config__quantity-container input { height: 48px } .m-cart-config__select .select__wrap:after { top: calc((48px - 6px) / 2) } .m-cart-config__select select { height: 48px; background-color: transparent } .m-cart-config__select-label { font-family: var(--font-family-primary-bold); margin-bottom: 4px; display: -webkit-inline-flex; display: inline-flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: baseline; align-items: baseline; width: 100% } .m-cart-config__quick-info-label { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-700); margin-bottom: 4px } .m-cart-config__color-label strong { font-family: var(--font-family-primary-bold) } .m-cart-config__sizechart-desktop-ctrl { display: none } @media (min-width: 768px) { .m-cart-config__sizechart-desktop-ctrl { display:inherit } } @media (min-width: 768px) { .m-cart-config__sizer-mobile-ctrl { display:none } } .m-design__tip { -webkit-align-items: self-start; align-items: self-start; background: var(--color-primary-100); border: 2px solid var(--color-primary-200); border-radius: 12px; display: -webkit-flex; display: flex; gap: 12px; -webkit-justify-content: flex-start; justify-content: flex-start; margin: 16px 0; padding: 12px 16px } .m-design__tip.off { display: none } .m-design__tip-header { font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400); margin-bottom: 2px; line-height: 1.5 } .m-design__tip-icon { line-height: 1.5 } .m-design__tip-text { font-size: var(--font-size-small-300); line-height: 1.42857 } .m-design__tip--oos { -webkit-justify-content: left; justify-content: left } .m-design__tip--oos .teepublicon { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .m-design__tip--loud { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-300); text-transform: uppercase } .cqd-banner__container { margin-top: 24px } @media (min-width: 1280px) { .cqd-banner__container { margin-top:40px } } .cqd-banner__banner { -webkit-align-items: center; align-items: center; margin-bottom: 0; margin-top: 0 } .m-cookie-alert { background: var(--color-neutral-400); color: var(--color-white); padding-bottom: 5px; padding-top: 5px } .m-cookie-alert__content { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between } .m-cookie-alert__accept { -webkit-flex-shrink: 0; flex-shrink: 0; font-size: var(--font-size-small-200); margin-left: 40px; padding-left: 0; padding-right: 0; width: 70px } @media (min-width: 600px) { .m-cookie-alert__accept { margin-left:80px; width: 145px } } .m-cookie-alert__text { color: var(--color-white); font-size: var(--font-size-small-100) } @media (min-width: 600px) { .m-cookie-alert__text { font-size:var(--font-size-small-200) } } .m-cookie-alert__text a { color: var(--color-white); text-decoration: underline } .m-cookie-preferences { background: var(--color-neutral-200); margin-top: 50px; margin-bottom: 50px; padding: 35px } .m-cookie-preferences__message { margin-left: 30px } .m-design { margin-bottom: 12px; position: relative } .m-design__admin-nav { background-color: var(--color-neutral-200); margin-bottom: 15px; overflow: hidden; padding: 15px } .m-design__admin-nav-group { text-align: center } .m-design__admin-nav-group .m-design__admin-nav-header { display: none } @media (min-width: 768px) { .m-design__admin-nav-group .m-design__admin-nav-header { display:inline; font-weight: bold; margin-right: 10px; text-transform: uppercase } } .m-design__admin-nav-group a { margin-left: 10px; margin-right: 10px } .m-design__admin-nav-group:last-child { margin-left: 0 } .m-design__admin-nav-group form { display: -webkit-flex; display: flex } .m-design__admin-nav-group button { border: none; background: transparent } @media (min-width: 768px) { .m-design__admin-nav-group { float:left; margin-right: 10px; overflow: hidden } .m-design__admin-nav-group span,.m-design__admin-nav-group a { display: block; float: left } } .m-design__admin-nav-group--right { padding-top: 10px } @media (min-width: 768px) { .m-design__admin-nav-group--right { float:right; padding-top: 0 } } .m-design__admin-nav-group--hidden-xs { display: none } @media (min-width: 768px) { .m-design__admin-nav-group--hidden-xs { display:inherit } } .m-design__admin-tools { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; gap: 12px; position: absolute; right: 0; top: 16px; z-index: 10 } @media (min-width: 768px) { .m-design__admin-tools { gap:16px } } @media (min-width: 1024px) { .m-design__admin-tools { right:16px } } .m-design__available-in-h { font-family: var(--font-family-primary); font-size: var(--font-size-small-400); margin-top: 0 } .m-design__available-ins { font-weight: normal } .m-design__cart-config { margin-bottom: 5px; margin-top: 20px } .m-design__content { margin-top: 15px } @media (min-width: 1024px) { .m-design__content { margin-top:40px } } .m-design__h2 { font-family: var(--font-family-display); font-size: var(--font-size-medium-300); margin-bottom: 24px } @media (min-width: 768px) { .m-design__h2 { margin-bottom:20px } } .m-design__hr { margin: 15px 0 0 } @media (min-width: 768px) { .m-design__hr { display:none } } @media (max-width: 767px) { .m-design__hr--d { visibility:hidden } } @media (max-width: 599px) { .m-design__info-modal-ctrl { display:none } } .m-design__others { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: -5px } .m-design__other { margin-right: 15px; margin-top: 15px; text-align: center; width: calc((100% / 3) - (15px * 2) / 3) } @media (min-width: 768px) { .m-design__other { width:calc((100% / 6) - (15px * 5) / 6) } } @media (max-width: 767px) { .m-design__other:nth-child(3n) { margin-right:0 } } @media (min-width: 768px) { .m-design__other:nth-child(6n) { margin-right:0 } } .m-design__other-img { border: 1px solid var(--color-neutral-300); width: 100% } .m-design__other-name { margin-top: 5px } .m-design__product-info-content { margin-top: 20px } @media (min-width: 768px) { .m-design__product-info-content { margin-top:40px } } .m-design__product-message { color: var(--color-neutral-700); font-size: var(--font-size-small-200); margin-bottom: 4px } .m-design__purchase-info { border-bottom: 1px solid var(--color-neutral-200); -webkit-flex-basis: 100%; flex-basis: 100%; padding-bottom: 15px } @media (min-width: 768px) { .m-design__purchase-info { border-bottom:0; text-align: left } } .m-design__purchase-info:last-child { border-bottom: 0; padding-bottom: 0 } @media (max-width: 969px) { .m-design__purchase-info+.m-design__purchase-info { margin-top:15px } } .m-design__purchase-info p { line-height: 1.4 } .m-design__purchase-info-content { margin-top: 15px } @media (min-width: 768px) { .m-design__purchase-info-content { margin-top:0 } } @media (max-width: 767px) { .m-design__purchase-info.off .m-design__purchase-info-content { display:none } } .m-design__purchase-info-licensor { -webkit-align-items: center; align-items: center; background-color: var(--color-neutral-200); display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; margin: 10px 0; padding: 15px 12px; width: 100% } @media (min-width: 768px) { .m-design__purchase-info-licensor { padding:20px 15px } } .m-design__purchase-info-licensor-h { font-size: var(--font-size-small-200); margin: 0 0 0 15px } @media (min-width: 768px) { .m-design__purchase-info-licensor-h { font-size:var(--font-size-small-400) } } @media (min-width: 768px) { .m-design__purchase-info-licensor-hr { display:none } } .m-design__purchase-info-note { color: var(--color-neutral-600); font-style: italic } .m-design__purchase-info-title { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between } @media (min-width: 768px) { .m-design__purchase-info-title { display:block } } .m-design__purchase-info-title .icon { color: var(--color-neutral-400); cursor: pointer; margin-right: 6px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } @media (min-width: 768px) { .m-design__purchase-info-title .icon { display:none } } .m-design__purchase-info.off .m-design__purchase-info-title .icon { -webkit-transform: rotate(90deg); transform: rotate(90deg) } .m-design__price--vat { color: var(--color-success-500); font-weight: bold } @media (max-width: 767px) { .m-design__price--vat { font-size:var(--font-size-small-200) } } .m-design__buy-page-backlinks { margin-top: 20px } .m-design__buy-page-backlinks .marketplace__links { gap: 5px } .m-design__buy-page-backlinks .marketplace__link { margin: 0 } .m-design__secret-id { -webkit-align-items: center; align-items: center; background: var(--color-white); bottom: 0; display: -webkit-flex; display: flex; font-family: var(--font-family-primary); font-size: var(--font-size-xlarge-300); -webkit-justify-content: center; justify-content: center; left: 0; position: fixed; right: 0; text-align: center; top: 0; z-index: 10000 } .m-design__shstock { -webkit-align-items: center; align-items: center; background: var(--color-neutral-200); border-radius: 1px; color: var(--color-neutral-600); display: -webkit-flex; display: flex; margin-bottom: 10px; margin-top: 10px; padding-right: 5px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } .m-design__shstock .teepublicon { background: var(--color-primary-500); border-radius: 1px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 22px; width: 22px } .m-design__shstock p { font-size: var(--font-size-small-200) } .m-design__subtitles { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100) } .m-design__additional-info { line-height: 20px; margin-bottom: 24px } .m-design__additional-info-list { margin-top: 16px } .m-product-options__social .contain { border-top: 1px solid var(--color-neutral-300); padding-top: 24px } .m-product-options__social-title { font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400); line-height: 1.15; text-transform: capitalize; margin-bottom: 16px } .m-design__additional-info-container { padding-top: 32px; padding-bottom: 24px } .m-design__additional-info-note { margin-top: 24px; font-size: var(--font-size-small-200); line-height: 1.6667 } .m-design__favorite-button-container .teepublicon>* { width: 28px; height: 28px } @media (min-width: 768px) { .m-design__favorite-button-container .teepublicon>* { width:32px; height: 32px } } .m-design__cqd-banner .cqd-banner__container { margin-top: 16px } .guarantee { -webkit-align-items: center; align-items: center; background-color: var(--color-primary-100); border: 2px solid var(--color-primary-200); border-radius: 12px; display: grid; grid-column-gap: 12px; grid-template-columns: auto auto; margin: 24px auto; padding: 12px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } @media (min-width: 768px) { .guarantee { margin-bottom:0 } } .guarantee__text p { font-family: var(--font-family-primary); font-size: var(--font-size-small-400) } .guarantee__text a { display: block; margin-top: 4px } .guarantee__text strong { font-family: var(--font-family-primary-bold) } .m-error__h { font-size: var(--font-size-xlarge-400); line-height: 1; margin-bottom: 0 } .m-error__text { text-transform: none; margin-top: 0; font-size: var(--font-size-medium-100); font-family: var(--font-family-primary-semibold); font-weight: 600; margin-bottom: 40px } .m-error__text-link { font-size: var(--font-size-medium-100) } .m-explore-nav { background-color: var(--color-neutral-900) } @media (min-width: 1280px) { .m-explore-nav .m-tab-nav--init .m-tab-nav__tab-content:not([data-tab-content-index='0']) { display:block } } .m-explore-nav__container .m-tab-nav__list { -webkit-justify-content: center; justify-content: center; gap: 28px } .m-explore-nav__container .m-tab-nav__list a { font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-300); color: var(--color-neutral-300) } @media (min-width: 1280px) { .m-explore-nav__container .m-tab-nav__list { display:none } } .m-explore-nav__container .m-tab-nav__item--active a { color: var(--color-white) } @media (min-width: 1280px) { .m-explore-nav__container .m-tab-nav__content { display:-webkit-flex; display: flex; gap: 45px; -webkit-justify-content: center; justify-content: center } } @media (min-width: 1280px) { .m-explore-nav__container .m-tab-nav__tab-content:not([data-tab-content-index='0']) { display:block } .m-explore-nav__container .m-tab-nav__tab-content:is([data-tab-content-index='0']) .m-explore-nav__tab-content { position: relative; overflow-x: visible } .m-explore-nav__container .m-tab-nav__tab-content:is([data-tab-content-index='0']) .m-explore-nav__tab-content::after { content: ''; background-color: var(--color-neutral-700); width: 2px; height: 48px; position: absolute; right: -26px; top: 14px } } .m-explore-nav__tab-content { display: -webkit-flex; display: flex; padding: 8px 16px; margin-inline:-16px;-webkit-align-items: center; align-items: center } @media screen and (max-width: 767px) { .m-explore-nav__tab-content { -ms-overflow-style:none; scrollbar-width: none; overflow-x: auto } .m-explore-nav__tab-content::-webkit-scrollbar { display: none } } @media (min-width: 595px) { .m-explore-nav__tab-content { -webkit-justify-content:center; justify-content: center; margin-inline:0} } @media (min-width: 1280px) { .m-explore-nav__tab-content { -webkit-flex-shrink:0; flex-shrink: 0; padding-right: 0 } } .m-explore-nav__cta { border: 2px solid var(--color-primary-400); border-radius: 8px; display: block; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 16px; padding: 8px 12px; width: 80px; text-align: center } .m-explore-nav__cta:hover { background-color: var(--color-primary-600); border-color: var(--color-primary-600) } .m-explore-nav__cta:focus { outline: 4px solid var(--color-primary-300); outline-offset: 0 } .m-explore-nav__cta:active { background-color: var(--color-primary-700); border-color: var(--color-primary-700) } .m-explore-nav__cta.link--default:active { color: var(--color-primary-200) } .m-explore-nav__cta.link--default { color: var(--color-white); font-size: var(--font-size-small-200) } .m-explore-nav__link { border-radius: 8px; display: block; font-family: var(--font-family-primary-semibold); padding: 4px 8px; min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; text-align: center } .m-explore-nav__link.link--default { color: var(--color-neutral-200); font-size: var(--font-size-small-200) } .m-explore-nav__link:hover { background-color: var(--color-neutral-800) } .m-explore-nav__link:hover .teepublicon { -webkit-animation: wobble 0.25s 4; animation: wobble 0.25s 4 } .m-explore-nav__link.link--default:hover { color: var(--color-white) } .m-explore-nav__link:focus { outline: 4px solid var(--color-primary-400); outline-offset: 0 } .m-explore-nav__link .teepublicon { display: block; margin-right: 0 } .m-explore-nav__link--new .teepublicon { position: relative } .m-explore-nav__link--new .teepublicon:before { content: "NEW"; display: inline-block; background-color: var(--color-primary-500); border-radius: 4px; color: white; font-size: 8px; font-family: var(--font-family-primary-bold); font-weight: 700; line-height: 1; padding: 2px; position: absolute; text-align: center; right: 0 } .m-footer-sitemap { background-color: var(--color-neutral-900); color: var(--color-white); padding: 0 0 40px } @media (min-width: 1280px) { .m-footer-sitemap { padding:0 } } .m-footer-sitemap-container { padding: 40px 0 } @media (min-width: 768px) { .m-footer-sitemap-container { padding:0 48px } } @media (min-width: 1280px) { .m-footer-sitemap-container { display:grid; grid-template-columns: repeat(2, 1fr); padding: 40px 80px } } .m-footer__trusted-badges { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; margin-bottom: 40px } @media (min-width: 1280px) { .m-footer__trusted-badges { -webkit-align-self:flex-start; align-self: flex-start } } .m-footer__guarantee-image { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .m-footer__guarantee-image img { height: 140px; width: 140px } .m-footer__guarantee-text { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin-bottom: 12px; text-align: center } .m-footer__guarantee-headline { font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400); line-height: var(--font-size-medium-200); margin-bottom: 0; margin-top: 0; color: var(--color-white) } @media (min-width: 768px) { .m-footer__guarantee-headline { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-footer__guarantee-subtext { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-white) } .m-footer__guarantee-link { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .m-footer-links { display: grid; gap: 16px; grid-gap: 20px 15px; grid-template-columns: repeat(2, 1fr); padding: 0 16px; width: 100% } .m-footer-links .link-collection__header { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-200); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; color: var(--color-white) } @media (min-width: 768px) { .m-footer-links .link-collection__header { font-size:var(--font-size-medium-300); line-height: var(--font-size-medium-400) } } .m-footer-links .link-collection__content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 12px } .m-footer-links .link-collection__link { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-semibold); font-weight: 600; color: var(--color-neutral-400) } .m-footer-links .link-collection__link:hover { color: var(--color-white) } @media (min-width: 1024px) { .m-footer-links { gap:16px; grid-template-columns: repeat(4, 1fr) } } .m-footer__social,.m-footer__payment-methods { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; padding: 0 16px; gap: 16px } .m-footer-payments-bbb { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 16px } @media (min-width: 768px) { .m-footer-payments-bbb { -webkit-flex-direction:row; flex-direction: row; -webkit-justify-content: space-between; justify-content: space-between } } .m-footer__social-links-header,.m-footer__payment-methods-header { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-200); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; color: var(--color-white) } @media (min-width: 768px) { .m-footer__social-links-header,.m-footer__payment-methods-header { font-size:var(--font-size-medium-300); line-height: var(--font-size-medium-400) } } .m-footer-section { margin-bottom: 40px } .m-footer-section.m-footer__payment-methods { margin-bottom: 0 } @media (min-width: 768px) { .m-footer-section.m-footer__payment-methods { margin-bottom:0; padding-bottom: 20px } } .m-footer__social-links { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: left; justify-content: left; gap: 8px } .m-footer__social-links .teepublicon { padding: 8px } .m-footer__payment-methods-images img { max-width: 100% } .m-footer__trust-images { display: -webkit-flex; display: flex } .m-footer__trusted-stores { margin-top: -8px } .m-footer__bbb img { max-width: 132px } .m-footer__legal-bar { background-color: var(--color-neutral-800) } .m-footer__legal-bar-container { padding: 24px 64px } @media (min-width: 1280px) { .m-footer__legal-bar-container { display:-webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 24px 80px } } .m-footer__legal-bar-header { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 4px; -webkit-justify-content: center; justify-content: center; margin-bottom: 20px } @media (min-width: 768px) { .m-footer__legal-bar-header { -webkit-flex-direction:row; flex-direction: row; gap: 24px } } @media (min-width: 1280px) { .m-footer__legal-bar-header { margin-bottom:0 } } .m-footer__legal-bar-header-copyright { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-bold); font-weight: 700; color: var(--color-white); display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-bottom: 4px } .m-footer__legal-bar-header-browse-preferences { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .m-footer__legal-bar-subnav { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; -webkit-justify-content: center; justify-content: center } @media (min-width: 768px) { .m-footer__legal-bar-subnav { gap:24px } } .m-footer__legal-bar-subnav-link { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary-semibold); font-weight: 600; color: var(--color-neutral-400) } .m-footer__legal-bar-subnav-link:hover { color: var(--color-white) } .m-footer__newsletter-container { background-color: var(--color-neutral-900) } .m-footer__newsletter-container .m-newsletter-signup { transition: all 0.15s ease-in-out; background-blend-mode: soft-light; background-image: -webkit-image-set(url(https://assets.teepublic.com/assets/bg/topic-pattern_a40-53c47db1de5f995ef7dd4c968196332e418a9bbc0029ad61266d3fb36dca6561.webp) type("image/webp"), url(https://assets.teepublic.com/assets/bg/topic-pattern_a40-1d534e38f3a27226644d462057ba1c69adef362e84a2cff7cb2ae2b28b92fbb8.png) type("image/png")); background-image: image-set(url(https://assets.teepublic.com/assets/bg/topic-pattern_a40-53c47db1de5f995ef7dd4c968196332e418a9bbc0029ad61266d3fb36dca6561.webp) type("image/webp"), url(https://assets.teepublic.com/assets/bg/topic-pattern_a40-1d534e38f3a27226644d462057ba1c69adef362e84a2cff7cb2ae2b28b92fbb8.png) type("image/png")); background-position: center center; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; min-height: 350px; padding: 40px 16px 0 } @media (min-width: 768px) { .m-footer__newsletter-container .m-newsletter-signup { min-height:300px } } .m-footer__newsletter-container .m-newsletter-signup-header__form { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center } .m-footer__newsletter-container .m-newsletter-signup--error { min-height: 400px } @media (min-width: 768px) { .m-footer__newsletter-container .m-newsletter-signup--error { min-height:350px } } @media (min-width: 1280px) { .m-footer__newsletter-container .m-newsletter-signup--success .m-newsletter-signup-header__success-message-container { -webkit-align-self:center; align-self: center } .m-footer__newsletter-container .m-newsletter-signup--error .m-newsletter-signup-header__error-message-container { -webkit-align-self: center; align-self: center } } .m-trustpilot-bar { background-color: var(--color-neutral-200); display: -webkit-flex; display: flex; padding: 24px 0; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; gap: 12px } .m-footer__trustpilot-image { height: 24px } .m-footer__trustpilot-image img { height: inherit } .m-footer__trustpilot-mobile { display: block } @media (min-width: 768px) { .m-footer__trustpilot-mobile { display:none } } .m-footer__trustpilot-desktop { display: none } @media (min-width: 768px) { .m-footer__trustpilot-desktop { display:block } } .m-tray>.drawer__wrapper { width: 88%; max-width: 420px } .m-tray-account .drawer__header { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; padding: 48px 16px 24px } @media (min-width: 1024px) { .m-tray-account .drawer__header { padding-inline:32px } } .m-tray-account .drawer__header-container { background-color: var(--color-neutral-800-a80) } .m-tray-account .drawer__content-container { padding: 32px 16px } @media (min-width: 1024px) { .m-tray-account .drawer__content-container { padding:40px 32px } } .m-tray-account .drawer__footer-container { border-top: 1px solid var(--color-neutral-800); padding: 20px 16px } @media (min-width: 1024px) { .m-tray-account .drawer__footer-container { padding:32px } } .m-tray-account .drawer__footer-container>* { font-size: var(--font-size-medium-100); line-height: 1.3333; padding: 12px 24px } .m-tray-account__content-block { padding-bottom: 16px } .m-tray-account__content-block:not(:first-of-type) { padding-top: 16px } .m-tray-account__content-block:not(:last-of-type) { border-bottom: 1px solid var(--color-neutral-800) } .m-tray-account__content-block .link-collection__header { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; color: var(--color-white) } @media (min-width: 768px) { .m-tray-account__content-block .link-collection__header { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-tray-account__content-block .link-collection__content { margin-top: 8px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; gap: 0 } .m-tray-account__content-block .link-collection__content .teepublicon { margin-right: 8px; margin-bottom: 4px } .m-tray-account__content-block .link-collection__link { font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-400); line-height: var(--font-size-medium-200); color: var(--color-neutral-200); padding: 8px 0 } .m-tray-account__content-block .link-collection__link:hover { color: var(--color-white) } .m-tray-account__content-block .link-collection__link:hover svg { fill: var(--color-white) } .m-tray-account__seller-verification { margin: 16px 0px } .m-tray-account__seller-verification .seller-verification__note { margin: 8px 0px; color: var(--color-white); font-family: "Roobert-Medium", Helvetica, sans-serif; font-size: var(--font-size-small-300); line-height: 1.42857 } .m-tray-account__avatar { width: 36px; height: 36px } .m-tray-account__header-text { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-semibold); font-weight: 600; color: var(--color-white) } .m-tray-account__header-email { font-size: var(--font-size-small-100); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-300) } .m-tray-account__header-user { display: -webkit-flex; display: flex; gap: 12px; -webkit-align-items: center; align-items: center } .m-tray-account__header-user picture { height: 36px } .m-tray-account__header-user img { height: inherit } .m-tray-account__upload { -webkit-justify-content: center; justify-content: center; margin-bottom: 16px } .m-tray-account__earnings { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 8px } .account-earnings__stats { padding: 8px; background-color: var(--color-neutral-800-a40); text-align: center; border-radius: 12px } .account-earnings__amount { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-bold); font-weight: 700; color: var(--color-white) } .account-earnings__label { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-200) } .m-tray-cart .drawer__header { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 48px 16px 16px } @media (min-width: 1024px) { .m-tray-cart .drawer__header { padding-inline:32px } } .m-tray-cart .drawer__content-container { padding: 0 16px 32px } @media (min-width: 1024px) { .m-tray-cart .drawer__content-container { padding-inline:32px; padding-top: 0 } } .m-tray-cart__header h3 { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; color: var(--color-neutral-900) } @media (min-width: 768px) { .m-tray-cart__header h3 { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-tray-cart__body { padding-top: 20px } .m-tray-cart__body--empty { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 12px } .m-tray-cart__body--empty h4 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; color: var(--color-neutral-900) } @media (min-width: 768px) { .m-tray-cart__body--empty h4 { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-tray-cart__body--empty p { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-900) } .m-tray-cart__body-links { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 8px } .m-tray-cart__body-cta { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .m-tray-cart__footer { background-color: var(--color-white); border-top: 0; padding: 16px } @media (min-width: 1024px) { .m-tray-cart__footer { padding:32px } } .free-shipping__progress { background-color: var(--color-primary-100); border: 2px solid var(--color-primary-200); border-radius: 12px; font-size: var(--font-size-small-200); margin-bottom: 10px; padding: 12px 20px } @media (min-width: 1024px) { .free-shipping__progress { padding:15px } } .free-shipping__progress .free-shipping__progress-bar-message { font-size: var(--font-size-small-300); margin: 0 auto 12px; text-align: center } .free-shipping__progress .free-shipping__progress-bar-message .strong { font-family: var(--font-family-primary-bold) } @media (min-width: 1024px) { .free-shipping__progress .free-shipping__progress-bar-message { font-size:var(--font-size-small-300) } } .free-shipping__progress .free-shipping__progress-bar { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; margin: 0 auto } .free-shipping__progress .free-shipping__progress-bar-value { padding: 0 10px } .free-shipping__progress .tpvc-progress-bar__container { height: 8px } .m-header__cart-google-pay { padding: 0 } .m-tray-cart__footer-detail { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 } .m-tray-cart__footer-detail-title { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-900) } .m-tray-cart__footer-detail-title span { font-size: var(--font-size-small-100); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-700) } .m-tray-cart__footer-detail-total { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-success-700) } .m-tray-cart__footer-subtotal { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-bold); font-weight: 700; color: var(--color-success-900); margin-bottom: 4px } .m-tray-shop .drawer__content-container { -ms-overflow-style: none; scrollbar-width: none; padding-top: 48px; padding-bottom: 24px } .m-tray-shop .drawer__content-container::-webkit-scrollbar { display: none } @media (min-width: 1024px) { .m-tray-shop .drawer__content-container { padding-inline:32px } } .m-tray-shop>.drawer__footer-container { border-top: 1px solid var(--color-neutral-800); padding: 20px 16px } @media (min-width: 1024px) { .m-tray-shop>.drawer__footer-container { padding:32px } } .m-tray-shop>.drawer__footer-container>* { font-size: var(--font-size-medium-100); line-height: 1.3333; padding: 12px 24px } .m-tray-shop.active .drawer__backdrop { z-index: -1 } @media (max-width: 1023px) { .m-tray-shop.active .m-tray-shop-secondary { left:100% } .m-tray-shop.active .m-tray-shop-secondary.active { left: 0 } } .m-tray-shop__body { overflow-x: hidden } .m-tray-shop__logo { height: 20px } .m-tray-shop__secondary-actions { margin-top: 24px } .m-tray-shop__secondary-action { -webkit-align-items: center; align-items: center; background-color: transparent; border-bottom: 1px solid var(--color-neutral-800); display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 12px 0; border-radius: 0 } .m-tray-shop__secondary-action:hover,.m-tray-shop__secondary-action:active,.m-tray-shop__secondary-action:focus { background-color: transparent } .m-tray-shop__secondary-action:hover svg,.m-tray-shop__secondary-action:active svg,.m-tray-shop__secondary-action:focus svg { fill: var(--color-white) } .m-tray-shop__secondary-action--light { border-bottom-color: var(--color-neutral-100) } .m-tray-shop__secondary-action--light .m-tray-shop__secondary-action-text h4 { color: var(--color-neutral-900) } .m-tray-shop__secondary-action-text { text-align: left } .m-tray-shop__secondary-action-text h4 { font-family: var(--font-family-display); font-size: var(--font-size-medium-300); line-height: var(--font-size-medium-400); margin-bottom: 0; margin-top: 0 } @media (min-width: 768px) { .m-tray-shop__secondary-action-text h4 { font-size:var(--font-size-large-100); line-height: var(--font-size-large-200) } } .m-tray-shop__secondary-action-text p { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-300); margin-top: 4px; text-transform: none } .m-tray-shop__popular-products { margin-top: 24px } .m-tray-shop__popular-products h3 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-200); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; color: var(--color-white) } @media (min-width: 768px) { .m-tray-shop__popular-products h3 { font-size:var(--font-size-medium-300); line-height: var(--font-size-medium-400) } } .m-tray-shop__popular-products-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 8px } .m-tray-shop__popular-product { font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); border: 2px solid var(--color-neutral-800); border-radius: 8px; color: var(--color-white); padding-inline:12px;position: relative; overflow: hidden; height: 52px; display: -webkit-flex; display: flex; place-items: center } .m-tray-shop__popular-product span { display: block; width: 66px; word-break: keep-all } @media (min-width: 1024px) { .m-tray-shop__popular-product { height:64px; padding-inline:16px} } .m-tray-shop__popular-product:hover { background-color: var(--color-neutral-800); color: var(--color-white) } .m-tray-shop__popular-product::before { content: ''; height: 56px; width: 56px; position: absolute; bottom: -6px; right: -12px; -webkit-transform: rotate(-12deg); transform: rotate(-12deg) } @media (min-width: 1024px) { .m-tray-shop__popular-product::before { height:80px; width: 80px; bottom: -12px; right: -24px } } .m-tray-shop__popular-product.tshirt::before { background-image: url("https://assets.teepublic.com/assets/teepublicons/product_tshirt-cb1652b6222e426e923a6d65ab993d87583905c32c5fcebb5bfe56c60b1813d6.svg") } .m-tray-shop__popular-product.shorts::before { background-size: cover; background-repeat: no-repeat; background-image: url("https://assets.teepublic.com/assets/teepublicons/product_shorts-125f62c45a99cf09b14c7398092a193029ace9c221fafc4999e13d2ef19608d1.svg") } .m-tray-shop__popular-product.hat::before { background-image: url("https://assets.teepublic.com/assets/teepublicons/product_hat-25e12e229a7b3d8867e8e5cf36022cb3452c6ebf8f4876c1f50aee33cbcd2298.svg") } .m-tray-shop__popular-product.sticker::before { background-image: url("https://assets.teepublic.com/assets/teepublicons/product_sticker-f567d08da532a7eeb12cbd9ee166fd6eef3f9cdd31f44d8bece7413a0b500bf1.svg") } .m-tray-shop__popular-product.mug::before { background-image: url("https://assets.teepublic.com/assets/teepublicons/product_mug-471b7ca6fa559ffc76b5e7ed09e2dcf62a0bd2c8a5cc560496778902b0e46483.svg") } .m-tray-shop__popular-product.kids::before { background-image: url("https://assets.teepublic.com/assets/teepublicons/product_kids-627eccdf0f446db928c65490522cdf8e82ec18b6b75ade60ae4cf5ca4a467faf.svg") } .m-tray-shop__popular-product.hoodie::before { background-image: url("https://assets.teepublic.com/assets/teepublicons/product_hoodie-ff8720b9b1a3bf7fcc0e61bf56cd699efaacb8db06ba20b83589338c20631dac.svg") } .m-tray-shop__popular-product.tank::before { background-image: url("https://assets.teepublic.com/assets/teepublicons/product_tank-ffbc7a9ecd19d0466706de291f7c41ea4c9b560f8519af06e6957b8eb586f628.svg") } .m-tray-shop__popular-product.longsleevetshirt::before { background-image: url("https://assets.teepublic.com/assets/teepublicons/product_longsleevetshirt-ccc5e5937eb5f433c9b48dcc28ef27cba3028eb4fc0c96b650babc1a5f6c8718.svg") } .m-tray-shop__popular-product--new:after { content: "NEW"; display: inline-block; background-color: var(--color-primary-500); border-radius: 4px; color: white; font-size: 8px; font-family: var(--font-family-primary-bold); font-weight: 700; line-height: 1; padding: 2px; position: absolute; text-align: center; right: 28px; top: 6px } .m-tray-shop__popular-topics { border-bottom: 1px solid var(--color-neutral-800); margin-top: 24px; padding-bottom: 24px } .m-tray-shop__popular-topics h3 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-200); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; color: var(--color-white) } @media (min-width: 768px) { .m-tray-shop__popular-topics h3 { font-size:var(--font-size-medium-300); line-height: var(--font-size-medium-400) } } .m-tray-shop__popular-topics-content { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; gap: 8px; margin-top: 16px; margin-bottom: 16px } .m-tray-shop__support { margin-top: 24px } .m-tray-shop__support h3 { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-200); line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0; color: var(--color-white) } @media (min-width: 768px) { .m-tray-shop__support h3 { font-size:var(--font-size-medium-300); line-height: var(--font-size-medium-400) } } .m-tray-shop__support-links { margin-top: 8px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column } .m-tray-shop__support-link { padding: 8px 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 8px; color: var(--color-neutral-200) } .m-tray-shop__support-link:hover { color: var(--color-white) } .m-tray-shop__support-link:hover svg { fill: var(--color-white) } .m-tray-shop__support-link--dark { color: var(--color-neutral-900) } .m-tray-shop__support-link--dark:hover { color: inherit } .m-tray-shop__support-link--dark:hover svg { fill: inherit } .m-tray-shop__footer { border-top: 1px solid var(--color-neutral-800); padding: 20px 16px } @media (min-width: 1024px) { .m-tray-shop__footer { padding:32px } } .m-tray-shop__footer>* { font-size: var(--font-size-medium-100); line-height: 1.3333; padding: 12px 24px } .m-tray-shop__credit { border-top: 1px solid var(--color-neutral-800); display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-justify-content: flex-start; justify-content: flex-start; gap: 4px; margin-top: 24px; padding-top: 24px } .m-tray-shop__credit p { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary-semibold); font-weight: 600; color: var(--color-white) } .m-tray-shop-secondary { left: 0; z-index: -1; width: 100%; height: 100%; transition: all 400ms cubic-bezier(0.8, 0, 0, 1.12),z-index 500ms cubic-bezier(1, -0.24, 0.32, 1.31); visibility: hidden } @media (min-width: 1024px) { .m-tray-shop-secondary { transition:all 400ms cubic-bezier(0.8, 0, 0, 1.12) } } .m-tray-shop-secondary .drawer__content-container { -ms-overflow-style: none; scrollbar-width: none } .m-tray-shop-secondary .drawer__content-container::-webkit-scrollbar { display: none } .m-tray-shop-secondary.active { visibility: visible; transition: all 400ms cubic-bezier(0.8, 0, 0, 1.12) } @media (max-width: 1023px) { .m-tray-shop-secondary.active { z-index:1 } } @media (min-width: 1024px) { .m-tray-shop-secondary.active { left:420px; overflow-x: hidden } } .m-tray-shop-secondary__content h3 { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; margin-top: 0; margin-bottom: 12px } @media (min-width: 768px) { .m-tray-shop-secondary__content h3 { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-tray-shop-secondary__content+.m-tray-shop-secondary__content { margin-top: 24px } .m-tray-shop-secondary__loader { display: -webkit-flex; display: flex; place-content: center; position: relative; background-color: transparent } .m-tray-shop-secondary__loader .tp-loader__spinner { width: 80px } .m-tray-shop-secondary__designs { display: -webkit-flex; display: flex; gap: 8px; margin-top: 24px; height: 230px } @media (min-width: 1024px) { .m-tray-shop-secondary__designs { height:270px } } .m-tray-shop-secondary__designs .tp-design-tile--light { --tile-background-color: var(--color-white-a60) } .m-tray-shop-secondary__links { margin-top: 12px } .m-tray-shop-secondary__links .link-collection__content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 0; margin-top: 0 } .m-tray-shop-secondary__link,.m-tray-shop-secondary__link h4 { font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-400); line-height: var(--font-size-medium-200); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-neutral-200); color: var(--color-neutral-900) } .m-tray-shop-secondary__link:hover,.m-tray-shop-secondary__link h4:hover { color: var(--color-primary-500) } .m-tray-shop-secondary__link.active,.m-tray-shop-secondary__link.active h4 { color: var(--color-primary-500) } .m-tray-shop-secondary__link--new { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 8px; padding: 12px 0px; border-bottom: 1px solid var(--color-neutral-200) } .m-tray-shop-secondary__link--new h4 { font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-400); line-height: var(--font-size-medium-200) } .m-tray-shop-secondary__link--new h4:hover { color: var(--color-primary-500) } .m-shop-tray-secondary__back-btn .teepublicon { margin-right: 8px } .m-shop-tray-secondary__back-btn .back-btn-text { border-bottom: 2px solid var(--color-primary-500); display: inline-block; font-family: var(--font-family-primary-semibold); font-weight: 600; line-height: 24px; color: var(--color-neutral-900) } .m-shop-tray-secondary__back-btn .back-btn-text:hover { border-color: var(--color-neutral-300) } .m-shop-tray-secondary__back-btn .back-btn-text:active { border-color: var(--color-primary-500); color: var(--color-neutral-700) } .m-tray-shop-secondary__footer { border-top: 1px solid var(--color-neutral-200); display: block; padding: 20px 16px } @media (min-width: 1024px) { .m-tray-shop-secondary__footer { display:none } } .m-tray-store-saf__filters { border: none; border-bottom: 1px solid var(--color-neutral-200); border-radius: 0 } .m-tray-store-saf__filters.tp-accordion__content--open { border: none; border-bottom: 1px solid var(--color-neutral-200) } .m-tray-store-saf__filters .tp-accordion__button { padding-left: 0; padding-right: 0; border-radius: 0; background: transparent } .m-tray-store-saf__filters .tp-accordion__button:hover { background: transparent; color: var(--color-neutral-900) } .m-tray-store-saf__filters .tp-accordion__button-text { font-size: var(--font-size-medium-200); font-family: var(--font-family-primary-bold); color: var(--color-neutral-900) } .m-tray-store-saf__filters .tp-accordion__button-text:hover { color: var(--color-neutral-900) } .m-tray-store-saf__filter { border: 2px solid var(--color-neutral-300); border-radius: 12px; color: var(--color-neutral-900) } .m-tray-store-saf__filter:hover,.m-tray-store-saf__filter.selected { background: var(--color-neutral-900) } .m-tray-store-saf__footer { padding: 16px; text-align: center; border-top: 2px solid var(--color-neutral-200) } .m-tray-store-saf__footer-btn { width: 160px; border-radius: 12px } .m-tray-store-saf__header { text-align: center; padding-top: 48px; padding-bottom: 12px; border-bottom: 2px solid var(--color-neutral-200) } .m-tray-store-saf__header_h { font-family: var(--font-family-display) } .m-tray-store-saf__sort { margin-bottom: 32px } .m-tray-store-saf__sort-btn { border-color: var(--color-neutral-300); margin-bottom: 0; color: var(--color-neutral-900); padding-left: 0; padding-right: 0; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 1; flex-shrink: 1 } .m-tray-store-saf__sort-btn:hover,.m-tray-store-saf__sort-btn.selected { background: var(--color-neutral-900) } .m-tray-store-saf__sort-label { font-size: var(--font-size-small-400); font-family: var(--font-family-primary-bold); color: var(--color-neutral-900) } .m-newsletter__errors .error { display: none } .m-newsletter__errors .error.on { display: block } .m-newsletter__errors .error p { white-space: nowrap } .m-home__newsletter .m-newsletter form { display: -webkit-flex; display: flex } .m-home__newsletter .m-newsletter .flash { margin-left: 15px } .m-product-timer { -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; display: -webkit-flex; display: flex; gap: 8px } .m-product-timer__clock { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px } .m-product-timer__clock.on { height: 100% } @media (min-width: 1200px) { .m-product-timer__clock { grid-gap:10px } } .m-product-timer__title { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-200); text-transform: capitalize; white-space: nowrap } .m-product-timer__title,.m-product-timer__title span { color: var(--color-accent-orange-500) } @media (min-width: 1200px) { .m-product-timer__title { font-size:var(--font-size-medium-300) } } .m-product-timer__subtitle { color: var(--color-accent-orange-500); font-size: var(--font-size-small-200); font-weight: bold } @media (min-width: 1200px) { .m-product-timer__subtitle { font-size:var(--font-size-small-400) } } .m-product-timer__time { -webkit-align-items: center; align-items: center; background: var(--color-neutral-200); border-radius: 10px; color: var(--color-neutral-600); display: -webkit-flex; display: flex; font-size: var(--font-size-small-200); font-weight: bold; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; padding: 5px 5px 10px; text-align: center; width: 100% } @media (min-width: 1200px) { .m-product-timer__time { font-size:var(--font-size-small-400) } } .m-product-timer__time:last-child { margin-right: 0 } .m-product-timer__time span { color: var(--color-danger-500); display: block; font-family: var(--font-family-primary-bold); font-size: 0; transition: 0.2s } .m-product-timer__clock.on .m-product-timer__time span { font-size: var(--font-size-medium-200) } @media (min-width: 1200px) { .m-product-timer__clock.on .m-product-timer__time span { font-size:var(--font-size-medium-300) } } .m-search__browse { display: -webkit-flex; display: flex } .m-search__browse--variant .m-search__nav { width: 100%; margin-right: 0 } @media (max-width: 767px) { .m-search__browse--variant .m-search__nav { display:block } } .m-search__browse--variant .m-search__es-query { margin-top: 8px; padding-bottom: 0 } .m-search__browse--variant .tp-design-tile__body .ellip { max-width: initial } .m-search-tag-admin-preview { background: var(--color-primary-200); padding: 20px; width: 100%; text-align: center } .m-search-tag-admin-preview .m-search__es-query-redesign { display: inline-block } .m-search-tag-admin-preview .link__cta { color: var(--color-neutral-900); border-bottom: 2px solid var(--color-primary-500) } .m-search__designs { -webkit-flex-grow: 1; flex-grow: 1; max-width: 100% } .m-search__es-query { padding-bottom: 20px; width: 100% } .m-search__cqd-banner.cqd-banner__banner { margin-bottom: 16px } .m-search__messages { margin-bottom: 20px } .m-search__nav { width: 212px; margin-right: 25px; -webkit-flex-shrink: 0; flex-shrink: 0 } @media (max-width: 767px) { .m-search__nav { display:none } } .m-search__no-results { margin-bottom: 20px; margin-top: 20px } .m-search__no-results.alert-box--no-border { padding: 15px } .m-search__page-nav h1 { color: var(--color-neutral-900); line-height: 1.03em } @media (max-width: 767px) { .m-search__page-nav h1 { font-size:var(--font-size-medium-200) } } .m-search__page-nav-m { margin-bottom: 10px } @media (min-width: 768px) { .m-search__page-nav-m { display:none } } .m-search__promoted-pills { gap: 5px } .m-search__promoted-pills.container__scrollable { margin-bottom: 15px; padding-bottom: 0 } .promoted-filter[data-active=true] { -webkit-order: -1; order: -1 } .promoted-filter.tp-btn--icon { text-transform: none } .m-search__related { gap: 20px; margin-top: 16px; margin-bottom: 16px } .m-search__related .link-collection__header { min-width: auto; width: auto; margin-right: 4px; font-family: var(--font-family-primary); font-size: var(--font-size-small-300); color: var(--color-neutral-700) } .m-search__related .link-collection__body { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: baseline; align-items: baseline } @media (min-width: 768px) { .m-search__related .link-collection__body .container__scrollable--wrap { -webkit-flex-wrap:nowrap; flex-wrap: nowrap } } @media (min-width: 1024px) { .m-search__related .link-collection__body .container__scrollable--wrap { -webkit-flex-wrap:wrap; flex-wrap: wrap; overflow-x: visible; -ms-overflow-style: none; scrollbar-width: none } .m-search__related .link-collection__body .container__scrollable--wrap::-webkit-scrollbar { display: none } } .m-search__related-results-label { color: var(--color-neutral-900); font-size: var(--font-size-small-400); line-height: 2.15; min-width: 170px } .m-search__related-bottom { margin-top: 16px } .m-search__related-bottom .link-collection__header { font-family: var(--font-family-display); font-size: var(--font-size-medium-200) } @media (min-width: 1024px) { .m-search__related-bottom .link-collection__header { font-size:var(--font-size-medium-400) } } .m-search__search { -webkit-flex-grow: 1; flex-grow: 1; margin-right: 30px } .m-search__search input::-webkit-input-placeholder { font-size: var(--font-size-medium-200); color: #cecece } .m-search__search input:-ms-input-placeholder { font-size: var(--font-size-medium-200); color: #cecece } .m-search__search input::-ms-input-placeholder { font-size: var(--font-size-medium-200); color: #cecece } .m-search__search input::placeholder { font-size: var(--font-size-medium-200); color: #cecece } @media (max-width: 767px) { .m-search__search { width:100%; margin-bottom: 20px } } .m-search__tools { -webkit-align-items: flex-start; align-items: flex-start; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 15px } @media (min-width: 768px) { .m-search__tools { margin-bottom:20px } } .m-search__tools--no-space { margin-bottom: 0 } .m-search__trail { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column } @media (max-width: 767px) { .m-search__trail { -webkit-flex-direction:column; flex-direction: column } } .m-search__trail--lt { font-size: var(--font-size-small-200); line-height: 1.15em } @media (min-width: 768px) { .m-search__trail--lt { font-size:var(--font-size-small-400) } } .m-search__safe-search,.m-search__did-you-mean { display: -webkit-flex; display: flex } .m-search__safe-search { -webkit-justify-content: center; justify-content: center } .m-search__safe-search input[type=submit] { background: none; border: none; padding: 0 0 5px } .m-search-support-modules { background: var(--color-neutral-200); width: 100%; padding: 20px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 12px } @media (min-width: 320px) { .m-search-support-modules { padding:24px 16px } } .m-search-support-modules .m-search__did-you-mean { font-size: var(--font-size-small-300); color: var(--color-neutral-900) } .m-search__did-you-mean span { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 2px; -webkit-flex-wrap: wrap; flex-wrap: wrap; max-width: 100% } .m-search__did-you-mean span .link__content { color: var(--color-neutral-900) } @media (min-width: 768px) { .m-filter-button { display:none } } .m-search__shop-by-category { border: 0; display: grid; padding: 20px } .m-search__shop-by-category .btn { background: var(--color-white); border-radius: 5px; color: var(--color-neutral-900); font-size: var(--font-size-small-200); margin: 0; min-width: 68px; outline: 4px solid transparent; outline-offset: -4px; padding: 10px 0; text-transform: none; width: 100% } .m-search__shop-by-category .btn:active { box-shadow: none } .m-search__shop-by-category .btn:focus { outline-color: var(--color-primary-300) } .m-search__shop-by-category .btn:hover { text-decoration: underline } .m-search__shop-by-category .h__h3--secondary--sm { font-size: var(--font-size-medium-200); margin-bottom: 15px } @media (max-width: 969px) { .m-search__shop-by-category .h__h3--secondary--sm { font-size:var(--font-size-small-400); margin-bottom: 10px } } .m-search__shop-by-category .link { -webkit-flex-grow: 1; flex-grow: 1; min-width: 68px; padding: 0 } .m-search__shop-by-category .link:last-child { margin-right: 0 } .m-search__shop-by-category .link:not(:last-child) { margin-right: 10px } @media (min-width: 414px) and (max-width: 1025px) { .m-search__shop-by-category .link:not(:last-child) { margin-right:7px } } .m-search__shop-by-category .teepublicon { display: block; padding-bottom: 5px } @media (max-width: 969px) { .m-search__shop-by-category { font-size:var(--font-size-small-400); padding: 17px } .m-search__shop-by-category .btn { padding: 10px } } @media (max-width: 768px) { .m-search__shop-by-category { padding:15px } } @media (min-width: 768px) { .m-search__shop-by-category { margin:20px 0 } } .m-search__faded_scroll { display: grid; position: relative; overflow: hidden; --before-display: none; --after-display: none } .m-search__faded_scroll--blue { --fade-color: 244, 251, 255 } .m-search__faded_scroll--grey { --fade-color: 248, 248, 248 } .m-search__faded_scroll::before { background: linear-gradient(to left, rgba(var(--fade-color), 0), rgba(var(--fade-color), 1)); display: var(--before-display); left: 0 } .m-search__faded_scroll::after { background: linear-gradient(to right, rgba(var(--fade-color), 0), rgba(var(--fade-color), 1)); display: var(--after-display); right: 0 } .m-search__faded_scroll::before,.m-search__faded_scroll::after { bottom: 0; content: ''; pointer-events: none; position: absolute; top: 0; width: 30px } .m-tray-search-sort-filter .drawer__content-container { height: 100%; -ms-overflow-style: none; scrollbar-width: none } .m-tray-search-sort-filter .drawer__content-container::-webkit-scrollbar { display: none } .m-tray-search-sort-filter .drawer__header-container { background: var(--color-white); padding: 48px 16px 12px } .m-tray-search-filter__header { text-align: center; border-bottom: 2px solid var(--color-neutral-200) } .m-search-filter__header_h { font-family: var(--font-family-display) } .m-search__safe-search--msg { color: var(--color-neutral-600); font-family: var(--font-family-primary); font-size: var(--font-size-small-200); padding-bottom: 16px; border-bottom: 1px solid var(--color-neutral-200) } .m-tray-search-saf__sort { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 16px } .m-tray-search-saf__sort-label { display: -webkit-flex; display: flex; font-size: var(--font-size-small-400); font-family: var(--font-family-primary-bold) } .m-tray-search-saf__sort-links { display: -webkit-flex; display: flex; gap: 16px } @media (max-width: 767px) { .m-search-tag-header { display:-webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between } } .m-search__sort-and-filter-options { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; gap: 8px; -webkit-align-items: center; align-items: center; max-width: 100%; position: relative; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none } .m-search__sort-and-filter-options::-webkit-scrollbar { display: none } .m-search__filter-btn-container,.m-search__sort-btn-container,.m-search__safe-search-btn-container { position: relative; margin-top: 16px; margin-bottom: 16px } @media (max-width: 767px) { .m-search__filter-btn-container,.m-search__sort-btn-container,.m-search__safe-search-btn-container { margin-top:0 } } .m-search__filter-btn,.m-search__sort-btn,.m-search__safe-search-btn { background: var(--color-neutral-100); border-radius: 12px; border: 2px solid var(--color-neutral-300); color: var(--color-neutral-900); white-space: nowrap } .m-search__filter-btn span,.m-search__sort-btn span,.m-search__safe-search-btn span { color: var(--color-neutral-900) } .m-search__filter-btn:hover,.m-search__filter-btn:active,.m-search__filter-btn:focus,.m-search__sort-btn:hover,.m-search__sort-btn:active,.m-search__sort-btn:focus,.m-search__safe-search-btn:hover,.m-search__safe-search-btn:active,.m-search__safe-search-btn:focus { background: var(--color-neutral-100); border: 2px solid var(--color-primary-600); color: var(--color-neutral-900) } .m-search__filter-btn.button__content,.m-search__sort-btn.button__content,.m-search__safe-search-btn.button__content { font-size: var(--font-size-small-400) } .m-search__filter-btn.tp-btn--icon,.m-search__sort-btn.tp-btn--icon,.m-search__safe-search-btn.tp-btn--icon { padding: 8px 16px } .m-search__sort-dropdown { background: var(--color-white); border-radius: 12px; border: 2px solid var(--color-neutral-300); color: var(--color-neutral-900); padding: 16px; left: 0; top: 100%; margin-top: 8px; position: absolute; z-index: 101; min-width: 100% } .m-search__sort-dropdown .link-collection__content { -webkit-flex-direction: column; flex-direction: column; margin-top: 0 } .m-search__sort-dropdown .m-search__sort-dropdown__link { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; white-space: nowrap; font-family: var(--font-family-primary-semibold); color: var(--color-neutral-900); border-radius: 8px; padding: 8px 16px } .m-search__sort-dropdown .m-search__sort-dropdown__link:hover,.m-search__sort-dropdown .m-search__sort-dropdown__link:focus { background: var(--color-primary-100) } .m-search__sort-dropdown .m-search__sort-dropdown__link.active { background: var(--color-neutral-200) } .m-search-sort-filter__safe-search .m-search__safe-search-btn { background: var(--color-white); width: 100%; -webkit-justify-content: center; justify-content: center } .m-tray-search__canvases.c-menu--expandable { padding-bottom: 20px; border-bottom: 1px solid var(--color-neutral-200) } .m-tray-search__canvases.c-menu--expandable ul.expanded { max-height: unset } .m-search__empty-results { display: -webkit-flex; display: flex; padding: 24px; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; text-align: center; gap: 8px; background: var(--color-neutral-200); border-radius: 12px; margin-top: 16px } .m-search__empty-results .m-search__empty-results-header { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0 } @media (min-width: 768px) { .m-search__empty-results .m-search__empty-results-header { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-search__empty-results .m-search__empty-results-copy { font-family: var(--font-family-primary); color: var(--color-neutral-700) } .m-search__empty-results-more-categories-container { padding-top: 40px; padding-bottom: 40px } .m-search__empty-results-header--title,.m-search__empty-results-ymal-header,.m-search__empty-results-fallback-header { font-family: var(--font-family-display); font-size: var(--font-size-medium-200); font-weight: 600; line-height: var(--font-size-medium-300); margin-bottom: 0; margin-top: 0 } @media (min-width: 768px) { .m-search__empty-results-header--title,.m-search__empty-results-ymal-header,.m-search__empty-results-fallback-header { font-size:var(--font-size-medium-400); line-height: var(--font-size-large-100) } } .m-search__empty-results-more-categories-content { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; gap: 16px; -webkit-align-items: center; align-items: center; text-align: center; white-space: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap } @media (max-width: 1023px) { .m-search__empty-results-more-categories-content { -webkit-flex-wrap:wrap; flex-wrap: wrap; overflow-x: visible; white-space: normal; -webkit-justify-content: center; justify-content: center; -ms-overflow-style: none; scrollbar-width: none } .m-search__empty-results-more-categories-content::-webkit-scrollbar { display: none } } .m-search__empty-results-more-categories-link { color: var(--color-neutral-900); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; justify-items: center } .m-search__empty-results-more-categories-link.tp-btn--icon .teepublicon { margin-right: 0 } .m-search__empty-results-more-categories-link--icon img { height: 80px; width: 80px } @media (min-width: 1280px) { .m-search__empty-results-more-categories-link--icon img { height:100px; width: 100px } } @media (min-width: 1920px) { .m-search__empty-results-more-categories-link--icon img { height:120px; width: 120px } } .m-search__empty-results-still-cant-find-anything-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; text-align: center; gap: 8px; padding: 16px; background: var(--color-neutral-200); border-radius: 12px; margin-top: 16px; margin-bottom: 16px } .m-search__empty-results-still-cant-find-anything-container .m-search__empty-results-still-cant-find-anything-header { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; margin-bottom: 8px } @media (min-width: 768px) { .m-search__empty-results-still-cant-find-anything-container .m-search__empty-results-still-cant-find-anything-header { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-search__empty-results-still-cant-find-anything-container .m-search__still-cant-find-anything-links { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; gap: 16px; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center } .m-search__empty-results-still-cant-find-anything-container .link__content { color: var(--color-neutral-900) } .m-search__empty-results-ymal-header,.m-search__empty-results-fallback-header { margin-top: 24px; margin-bottom: 16px } .con-3002-toc-tiles-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 16px 0; width: 100% } @media (max-width: 1279px) { .con-3002-toc-tiles-grid { grid-template-columns:repeat(4, 1fr) } } @media (max-width: 767px) { .con-3002-toc-tiles-grid { grid-template-columns:repeat(2, 1fr) } } .con-3002-toc-tile { display: block; border-radius: 12px; overflow: hidden; --gradient-start-opacity: 0.15; --gradient-end-opacity: 0.66 } .con-3002-toc-tile:hover,.con-3002-toc-tile:focus,.con-3002-toc-tile:active { --gradient-start-opacity: 0.30 } .con-3002-toc-tile__image-container { position: relative; width: 100%; height: 80px; overflow: hidden } .con-3002-toc-tile__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block } .con-3002-toc-tile__gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(21, 21, 35, var(--gradient-start-opacity)) 0%, rgba(21, 21, 35, var(--gradient-end-opacity)) 80%) } .con-3002-toc-tile__title-container { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px; z-index: 1 } .con-3002-toc-tile__title { color: white; font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-400); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-height: 1.2 } @media (max-width: 1279px) { .con-3002-toc-tile__title { font-size:var(--font-size-small-300) } } .con-3002-swimlanes-container .tp-canvas-pages__swimlane:first-child { padding-top: 0 } .m-social-share { display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; gap: 8px } .m-social-share .teepublicon { border: 2px solid var(--color-neutral-300) } .m-tab-nav--init .m-tab-nav__tab-content:not([data-tab-content-index='0']) { display: none } .m-tab-nav__list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; list-style: none; margin-bottom: 0; padding-left: 0 } .m-tab-nav__item { line-height: 24px } @media (hover: hover) and (pointer: fine) { .m-tab-nav__item:hover { border-bottom:2px solid var(--color-neutral-300) } } .m-tab-nav__item a { color: var(--color-neutral-700); display: block } .m-tab-nav__item--active { border-bottom: 2px solid var(--color-primary-500) } .m-tab-nav__item--active:active { border-bottom: 2px solid var(--color-primary-500) } .m-tab-nav__item--active a { color: var(--color-neutral-900) } .m-tab-nav__item--active a:active { color: var(--color-neutral-700) } .marketplace__header { text-align: center; margin-bottom: 20px } .marketplace__header .text-note { margin-bottom: 0 } @media (max-width: 767px) { .marketplace__header .text-note { font-size:var(--font-size-small-200) } } .marketplace__header-text { margin-top: 10px } @media (max-width: 767px) { .marketplace__header-text { font-size:var(--font-size-small-200) } } .marketplace__link-container { margin-top: 20px; margin-bottom: 30px } .marketplace__link-container .text-note { margin-top: 0; margin-bottom: 0; font-size: var(--font-size-small-200) } .marketplace__links { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px } .marketplace__tiles { margin-bottom: 20px } @media (max-width: 767px) { .marketplace__title { font-size:var(--font-size-medium-200) } } .jsHeadSearchForm { position: relative; z-index: 50 } #jsAutoCompleteBrowse_list { position: absolute } #jsAutoCompleteHeader_list,#jsAutoCompleteHome_list,#jsAutoCompleteBrowse_list { background-color: var(--color-white); border-radius: 12px; box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20); left: 0; margin-top: 4px; padding: 16px; position: absolute; right: 0; transition: all .1s ease-in-out; width: 100%; z-index: 50; -webkit-transition: all -webkit-transform .1s ease } #jsAutoCompleteHome_list { top: 50px } .autoComplete_result { padding: 6px 8px; cursor: pointer; color: var(--color-neutral-900) } .autoComplete_result,.autoComplete_result strong { font-family: var(--font-family-primary-bold) } .autoComplete_result.empty-results,.autoComplete_result.artist-search { font-family: var(--font-family-primary); font-weight: 500 } .autoComplete_result.artist-search { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 10px } .autoComplete_result.artist-search .artist_search_label { display: block } .autoComplete_result.autoComplete_selected,.autoComplete_result:hover { background-color: var(--color-primary-100); border-radius: 8px } .autoComplete_label,.autoComplete_notice { color: var(--color-neutral-600); font-size: var(--font-size-small-300); font-family: var(--font-family-primary-semibold); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: 4px } .autoCompleteArtistSearch_label { padding: 8px; color: var(--color-neutral-600); font-size: var(--font-size-small-300); font-family: var(--font-family-primary-semibold); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .autoCompleteArtistSearch_label::before { content: 'Artist Result' } .autoComplete_highlighted { color: var(--color-neutral-900); font-family: var(--font-family-primary); font-weight: 500 } .additional-main-tag { -webkit-animation: animated-border-gradient 6s ease-in-out alternate infinite; animation: animated-border-gradient 6s ease-in-out alternate infinite; background: linear-gradient(60deg, #39e11e, #ffeb37, #f38334, #ea3131, #a30dff, #19b1ff, #39e11e); background-size: 300% 300%; border-radius: 10px; margin-top: 20px; padding: 3px } @media (min-width: 768px) { .additional-main-tag { margin-top:50px } } .additional-main-tag__container { -webkit-align-items: center; align-items: center; background-color: var(--color-white); border-radius: 8px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; padding: 20px } @media (max-width: 767px) { .additional-main-tag__container { -webkit-flex-direction:column; flex-direction: column } .additional-main-tag__container .c-link__button { width: 100% } } @media (min-width: 768px) { .additional-main-tag__container { gap:30px } } @media (min-width: 1024px) { .additional-main-tag__container { padding:30px } .additional-main-tag__container .c-link__button { font-size: var(--font-size-small-400); padding-left: 40px; padding-right: 40px } } @media (min-width: 1200px) { .additional-main-tag__container { gap:60px } } .additional-main-tag__container .c-link__button { background-color: var(--color-neutral-900); text-transform: uppercase; -webkit-justify-content: center; justify-content: center } .additional-main-tag__header { font-family: var(--font-family-primary-bold); font-size: var(--font-size-medium-100); margin-bottom: 10px; margin-top: 0; text-align: center } @media (min-width: 768px) { .additional-main-tag__header { margin-bottom:0 } } @media (min-width: 1024px) { .additional-main-tag__header { font-size:var(--font-size-medium-300) } } .m-design__inline-search { background-color: #ffffff; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; gap: 24px; padding: 48px 16px } @media (min-width: 768px) { .m-design__inline-search { padding:48px } } @media (min-width: 1024px) { .m-design__inline-search { padding:48px 64px } } @media (min-width: 1280px) { .m-design__inline-search { padding:48px 240px } } .m-design__inline-search__header { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; color: var(--color-primary-500); margin-bottom: 0; text-align: center; text-transform: capitalize } @media (min-width: 768px) { .m-design__inline-search__header { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } @media (min-width: 768px) { .m-design__inline-search__header { font-size:var(--font-size-medium-300); margin-bottom: 15px } } .m-design__inline-search__search-container { max-width: 480px; width: 100% } @media (min-width: 1024px) { .m-design__inline-search__search-container { max-width:576px } } .m-design__inline-search__search-container .c-search-form--rainbow { margin-top: 0 } .m-design__inline-search__search-container .c-search-form--rainbow .form__actions button { background: var(--color-primary-500) } .m-toast-success-message { position: fixed; bottom: 16px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: reveal-from-bottom 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8) forwards; animation: reveal-from-bottom 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8) forwards; z-index: 100 } @-webkit-keyframes reveal-from-bottom { 0% { -webkit-transform: translate(-50%, 131%); transform: translate(-50%, 131%) } 70% { -webkit-transform: translate(-50%, 31%),scale(1.5); transform: translate(-50%, 31%),scale(1.5) } 100% { -webkit-transform: translateY(-50%, 0),scale(1); transform: translateY(-50%, 0),scale(1) } } @keyframes reveal-from-bottom { 0% { -webkit-transform: translate(-50%, 131%); transform: translate(-50%, 131%) } 70% { -webkit-transform: translate(-50%, 31%),scale(1.5); transform: translate(-50%, 31%),scale(1.5) } 100% { -webkit-transform: translateY(-50%, 0),scale(1); transform: translateY(-50%, 0),scale(1) } } .m-top-banner { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; background: var(--color-primary-600); text-align: center; padding: 10px; width: 100%; gap: 4px } .m-top-banner div,.m-top-banner strong { color: var(--color-white) } .m-top-banner .banner-promo-offer { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } @media (min-width: 768px) { .m-top-banner { gap:48px } } .free-shipping__shipping-total--green { color: var(--color-success-500) } .artist-category { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; gap: 10px } .m-design__buy-ctas { margin: 24px 0 } .m-design__cart-add { font-size: var(--font-size-medium-300); margin-bottom: 15px; margin-top: 15px; height: 64px; padding: 0 } @media (min-width: 768px) { .m-design__cart-add { margin-bottom:20px; margin-top: 20px } } .m-design__cart-buy-now { height: 64px; width: 100%; border-radius: 12px } @media (min-width: 600px) { .m-design__cart-buy-now { height:64px } } .m-design__free-shipping { text-align: center; margin: 24px 0 } .m-design__free-shipping-message { margin-bottom: 4px } .m-design__free-shipping-message span { color: var(--color-neutral-900) } .m-design__free-shipping-message .free-shipping-message__bold { font-family: var(--font-family-primary-bold) } .m-design__free-shipping-all-usa { color: var(--color-neutral-600); font-size: var(--font-size-small-200) } .m-design-details__description-title { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-semibold); font-weight: 600; margin-top: 0; margin-bottom: 4px } @media (min-width: 768px) { .m-design-details__description-title { margin-top:24px } } .m-design-details__description-text { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary); font-weight: 500; display: -webkit-box; color: var(--color-neutral-700); overflow: hidden; word-break: break-word } .m-design-details__description-button { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200) } .m-design-details__by { max-width: 100%; font-size: var(--font-size-small-400); display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline } .m-design__by-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; vertical-align: text-bottom } .m-design-details__primary-tag { font-family: var(--font-family-primary-bold); font-size: var(--font-size-small-400); margin-bottom: 0; margin-right: 5px; margin-top: 0; word-break: break-word } @media (min-width: 768px) { .m-design-details__primary-tag { font-size:var(--font-size-small-400) } } .m-design-details__product-info { -webkit-align-items: baseline; align-items: baseline; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: 5px } .m-design__prices { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; margin-top: 12px } .m-design__price { color: #e7e7e7 font-family: var(--font-family-primary-bold); font-size: var(--font-size-large-100) } @media (min-width: 768px) { .m-design__price { font-size:var(--font-size-large-300) } } .m-design__price--original { color: var(--color-neutral-300); margin-left: 15px; position: relative } .m-design__price--original:before { content: ''; position: absolute; bottom: calc(50% - 3px); display: block; width: 114%; height: 4px; margin-left: -0.24rem; background: var(--color-danger-500) } .m-design__price--original.on:before { width: 114%; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-name: priceStrike; animation-name: priceStrike; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .m-design__price--sale { display: none } .m-design--on-sale .m-design__price--sale { display: block } .m-design--on-sale .m-design__price--regular { color: var(--color-neutral-500); margin-left: 5px; position: relative } .m-design--on-sale .m-design__price--regular.on:before { content: ''; position: absolute; bottom: calc(50% - 3px); display: block; width: 114%; height: 4px; margin-left: -0.24rem; background: var(--color-accent-orange-500); -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-name: priceStrike; animation-name: priceStrike; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .m-design__similar-products { margin-bottom: 48px } @-webkit-keyframes priceStrike { 0% { width: 15% } 100% { width: 114% } } @keyframes priceStrike { 0% { width: 15% } 100% { width: 114% } } .m-product-preview { position: relative } .m-product-preview__back-flag { background-color: var(--color-primary-500); border-radius: 0px 0px 8px; height: calc(28px + 4px); left: 0; margin-left: -15px; position: absolute; top: 0; width: calc(72px + 4px); z-index: 2 } @media (min-width: 769px) { .m-product-preview__back-flag { border-radius:20px 0px 8px; margin-left: 0 } } .m-product-preview__back-flag>div { width: 100%; height: 100%; text-align: center; color: var(--color-white); font-weight: bold; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center } .m-product-preview__glider { aspect-ratio: 1; background: var(--color-neutral-200) } @media (min-width: 769px) { .m-product-preview__glider { border-radius:20px; overflow: hidden; box-shadow: 0 4px 8px 0 var(--color-neutral-900-a20) } } .m-product-preview__glider-slide { padding-top: 100%; position: relative } .m-product-preview__glider-img { bottom: 0; left: 0; position: absolute; right: 0; top: 0; width: 100% } .m-product-preview__glider-img img { width: 100% } @media (min-width: 769px) { .m-product-preview__glider-img img { border-radius:20px } } .m-product-preview__glider-track { position: absolute; top: 0; width: 100% } .m-product-preview__glider-ctrl { -webkit-align-items: center; align-items: center; background-color: transparent; display: -webkit-flex; display: flex; justify-items: center; position: absolute; top: calc(50% - 10px) } .m-product-preview__glider-ctrl:active,.m-product-preview__glider-ctrl:focus,.m-product-preview__glider-ctrl:hover { background: transparent; opacity: 0.9 } .m-product-preview__glider-ctrl .teepublicon { border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.5); margin: auto; padding: 8px; transition: 0.3s } .m-product-preview__glider-ctrl .teepublicon:focus { outline: none } .m-product-preview__glider-ctrl .teepublicon:focus-visible { outline: var(--color-primary-500) auto 2px } .m-product-preview__glider-ctrl.next { right: 0 } .m-product-preview__glider-ctrl.prev { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .m-product-preview__glider-ctrl.disabled { display: none } .m-product-preview__main { margin-left: -15px; margin-right: -15px } .m-product-preview__main img { display: block; pointer-events: none } .tp-admin .m-product-preview__main img,.tp-design-owner .m-product-preview__main img,.tp-affiliate-owner .m-product-preview__main img { pointer-events: all } @media (min-width: 769px) { .m-product-preview__main { margin-left:auto; margin-right: auto } } .m-product-preview__thumbs { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-top: calc(24px * -1); position: relative; z-index: 1 } @media (min-width: 768px) { .m-product-preview__thumbs { margin-top:calc(32px * -1) } } .m-product-preview__thumb { border-radius: 8px; cursor: pointer; margin: 0 4px; overflow: hidden; position: relative; width: 48px; box-shadow: 0 2px 4px 0 var(--color-neutral-900-a20) } @media (min-width: 768px) { .m-product-preview__thumb { width:64px; border-radius: 12px } } @media (min-width: 1920px) { .m-product-preview__thumb { width:96px } } .m-product-preview__thumb.on,.m-product-preview__thumb:hover { transition: outline 100ms ease-in-out; outline: 2px solid var(--color-neutral-900); outline-offset: 0 } .m-product-preview__thumb img { float: left; width: 100%; aspect-ratio: 1 } .m-product-preview__gallery { position: relative } @media (min-width: 769px) { .m-product-preview__gallery { display:-webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse } .m-product-preview__gallery .m-product-preview__thumbs { -webkit-flex-direction: column; flex-direction: column; gap: 8px; -webkit-justify-content: flex-start; justify-content: flex-start; margin-top: 0; margin-right: 12px; position: relative; z-index: 100 } } @media (min-width: 769px) and (min-width: 1920px) { .m-product-preview__gallery .m-product-preview__thumbs { margin-right:16px } } @media (min-width: 769px) { .m-product-preview__gallery .m-product-preview__thumb { margin:0 } } .m-design__product { margin-bottom: 48px } @media (min-width: 769px) { .m-design__product { display:grid; grid-column-gap: 32px; grid-template-areas: "preview title" "preview options"; grid-template-columns: minmax(416px, auto) minmax(auto, 448px); grid-template-rows: minmax(50px, auto) auto } } @media (min-width: 1280px) { .m-design__product { grid-column-gap:48px } } .m-design__options { grid-area: options } .m-design__preview { grid-area: preview } .m-design-details__title { grid-area: title; overflow-wrap: break-word; margin-bottom: 10px } @media (min-width: 768px) { .m-design-details__title { margin-bottom:0 } } .m-design-details__title .h__h1--sm { font-family: var(--font-family-display) } .m-design__ratings { -webkit-align-items: center; align-items: center; background: var(--color-primary-500); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 24px; -webkit-justify-content: center; justify-content: center; padding: 48px 16px } @media (min-width: 768px) { .m-design__ratings { gap:24px; padding: 48px } } @media (min-width: 1024px) { .m-design__ratings { padding:48px 64px } } @media (min-width: 1280px) { .m-design__ratings { -webkit-flex-direction:row; flex-direction: row; gap: 32px; padding: 48px 240px } } .m-design__ratings-heading { font-family: var(--font-family-display); font-size: var(--font-size-medium-300); line-height: var(--font-size-medium-400); margin-bottom: 0; margin-top: 0; color: var(--color-white); min-width: 210px; text-align: center } @media (min-width: 768px) { .m-design__ratings-heading { font-size:var(--font-size-large-100); line-height: var(--font-size-large-200) } } .m-design__ratings-services { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 24px } @media (min-width: 768px) { .m-design__ratings-services { -webkit-flex-direction:row; flex-direction: row } } .m-design__ratings-service { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary-semibold); font-weight: 600; -webkit-align-items: center; align-items: center; color: var(--color-white); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 4px; -webkit-justify-content: center; justify-content: center; min-width: 210px } .m-design__ratings-service-name,.m-design__ratings-details { color: currentColor } .m-design__ratings-service-stars { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .m-design__ratings-details { font-size: var(--font-size-small-200); line-height: var(--font-size-small-400); font-family: var(--font-family-primary); font-weight: 500 } .m-design-product-info { padding-top: 48px; padding-bottom: 32px } @media (min-width: 768px) { .m-design-product-info .contain-storefront { display:grid; grid-template-rows: 1fr; grid-template-columns: 1fr; -webkit-flex-direction: row; flex-direction: row; gap: 48px; margin-bottom: 24px } } .m-design-product-info-and-faqs { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 40px } @media (min-width: 768px) { .m-design-product-info-and-faqs { -webkit-flex-direction:row; flex-direction: row } .m-design-product-info-and-faqs>* { -webkit-flex: 1; flex: 1 } } .m-design-product-info--faqs .tp-accordion { border-color: var(--color-neutral-300) } .m-design-product-info--faqs .tp-accordion .link__cta { margin-top: 12px } .m-design-product-info--faqs .tp-accordion.tp-accordion__content--open { border-color: var(--color-primary-500) } @media (hover: hover) and (pointer: fine) { .m-design-product-info--faqs .tp-accordion.tp-accordion__content--open:hover { border-color:var(--color-primary-500) } } @media (hover: hover) and (pointer: fine) { .m-design-product-info--faqs .tp-accordion:hover { border-color:var(--color-neutral-900) } } .m-design-product-info--faqs .tp-accordion__button-text { font-family: var(--font-family-primary-semibold); font-weight: 600; font-size: var(--font-size-small-400); line-height: var(--font-size-medium-200); text-align: left } .m-design-product-info--faqs .tp-accordion__button { color: var(--color-neutral-900) } .m-design-product-info--faqs .tp-accordion__button.tp-accordion__content--open { background-color: transparent; border-bottom: 2px solid var(--color-neutral-300); border-radius: 0; color: var(--color-neutral-900) } @media (hover: hover) and (pointer: fine) { .m-design-product-info--faqs .tp-accordion__button:hover { background-color:transparent } } .m-design-product-info--faqs .tp-accordion__content,.m-design-product-info--faqs .tp-accordion__content p { line-height: var(--font-size-medium-300) } .m-design-product-info--product-quality { background: var(--color-primary-100); border: 2px solid var(--color-primary-500); border-radius: 12px; box-shadow: 0 2px 4px 0 rgba(21,21,35,0.2); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 8px; -webkit-justify-content: center; justify-content: center; padding: 24px; position: relative; -webkit-align-self: baseline; align-self: baseline } .m-design-product-info--product-quality h4 { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; color: var(--color-primary-500) } @media (min-width: 768px) { .m-design-product-info--product-quality h4 { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-design-product-info--product-quality p { font-size: var(--font-size-small-400); line-height: var(--font-size-medium-300); font-family: var(--font-family-primary); font-weight: 500; color: var(--color-neutral-900) } .m-design-product-info--product-quality-image { height: 80px; width: 80px; position: absolute; top: -40px; right: 24px; -webkit-transform: rotate(5deg); transform: rotate(5deg) } .m-design-product-info--product-quality-image img { width: inherit; height: inherit } .m-design-product-info__licensor { background-color: var(--color-white); border: 2px solid var(--color-neutral-200); border-radius: 12px; margin-bottom: 8px; padding: 24px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 12px } .m-design-product-info__licensor-logo { height: 24px } .m-design-product-info__licensor-text { font-size: var(--font-size-small-300); line-height: var(--font-size-medium-200); font-family: var(--font-family-primary-semibold); font-weight: 600; color: var(--color-neutral-700); margin-top: 0 } .m-design-product-info--faq-container h2 { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; color: var(--color-primary-500); margin-bottom: 24px } @media (min-width: 768px) { .m-design-product-info--faq-container h2 { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-polaroids__canvas { display: block; color: var(--color-link-500); font-size: var(--font-size-small-400); line-height: 25px } .m-polaroids__canvas--other { text-transform: capitalize } .m-polaroids__canvas--top { color: var(--color-neutral-900); margin: auto; text-align: center } .m-polaroids__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 15px } @media (min-width: 768px) { .m-polaroids__content { grid-template-columns:repeat(3, minmax(0, 1fr)) } } @media (min-width: 1024px) { .m-polaroids__content { grid-template-columns:repeat(5, minmax(0, 1fr)) } } .m-polaroids__content--seo-links { font-family: var(--font-family-primary-bold); margin-top: 15px } @media (min-width: 768px) { .m-polaroids__content--seo-links { margin-top:25px } } .m-polaroids__content--swatches { grid-template-columns: 1fr; max-width: 300px } @media (min-width: 768px) { .m-polaroids__content--swatches { grid-template-columns:repeat(2, 1fr); max-width: 600px } } @media (min-width: 1024px) { .m-polaroids__content--swatches { grid-template-columns:repeat(3, 1fr); max-width: 1000px } } .m-polaroid__polaroid-swatch { height: 210px; width: 100% } .m-polaroid__polaroid-swatch-detail { font-size: var(--font-size-small-200); font-weight: lighter; padding: 10px } .m-polaroids__h4 { font-family: var(--font-family-primary-semibold); font-size: var(--font-size-small-400) } @media (min-width: 768px) { .m-polaroids__h4 { font-size:var(--font-size-small-400) } } .m-polaroids__h4--seo-links { margin-top: 0; font-size: var(--font-size-small-400); line-height: 25px } .m-polaroids__section { margin-top: 20px } @media (min-width: 768px) { .m-polaroids__section { margin-top:50px } } .m-polaroids__polaroid { background-color: var(--color-white); border-radius: 5px; overflow: hidden } @media (min-width: 768px) { .m-polaroids__polaroid.m-polaroids__polaroid--spread { margin-right:30px; margin-bottom: 30px } } @media (min-width: 970px) { .m-polaroids__polaroid:hover .m-polaroids__polaroid-img { -webkit-transform:scale(1.2); transform: scale(1.2) } } .m-polaroids__polaroid--border { border: 1px solid var(--color-neutral-200) } .m-polaroids__polaroid--no-bg { background-color: transparent } .m-polaroids__polaroid-col { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; min-height: 65px; width: 100% } .m-polaroids__polaroid-content:hover .m-polaroids__canvas--top { color: var(--color-primary-500) } .m-polaroids__polaroid-img { width: 100% } @media (min-width: 970px) { .m-polaroids__polaroid-img { -webkit-transform:scale(1.03); transform: scale(1.03); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out } } .m-polaroids__polaroid-img-container { overflow: hidden } .m-polaroids__polaroid-subtitle-cont { padding: 15px 5px } .m-also-available-products { background-color: var(--color-neutral-900); padding-top: 48px; padding-bottom: 48px; text-align: center } .m-also-available-products .m-tab-nav { position: relative } .m-also-available-products .m-tab-nav__content { min-height: 270px; overflow-x: auto } @media (max-width: 1023px) { .m-also-available-products .m-tab-nav__content { overflow-x:initial } } .m-also-available-products .m-tab-nav__tab-content { display: grid; grid-auto-flow: column; gap: 12px; margin-inline:auto;padding-left: 16px; padding-right: 16px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } @media (min-width: 768px) { .m-also-available-products .m-tab-nav__tab-content { padding-left:48px; padding-right: 48px; gap: 16px } } @media (max-width: 1023px) { .m-also-available-products .m-tab-nav__tab-content { grid-auto-flow:row; grid-template-columns: repeat(4, 1fr); width: 100% } } @media screen and (max-width: 767px) { .m-also-available-products .m-tab-nav__tab-content { grid-template-columns:repeat(2, 1fr) } } .m-also-available-products .m-tab-nav__list { -ms-overflow-style: none; scrollbar-width: none; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; margin-top: 24px; margin-bottom: 24px; overflow-x: auto; padding-left: 16px; padding-right: 16px } .m-also-available-products .m-tab-nav__list::-webkit-scrollbar { display: none } @media (min-width: 480px) { .m-also-available-products .m-tab-nav__list { -webkit-justify-content:center; justify-content: center } } .m-also-available-products .m-tab-nav__item { -webkit-flex-shrink: 0; flex-shrink: 0 } .m-also-available-products .m-tab-nav__item a { color: var(--color-neutral-300) } .m-also-available-products .m-tab-nav__item--active a { color: var(--color-white) } .m-also-available-products .m-tab-nav__loader { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .m-also-available-products__title { font-family: var(--font-family-display); font-size: var(--font-size-medium-100); line-height: var(--font-size-medium-200); margin-top: 0; margin-bottom: 0; color: var(--color-white); padding-left: 16px; padding-right: 16px } @media (min-width: 768px) { .m-also-available-products__title { font-size:var(--font-size-medium-200); line-height: var(--font-size-medium-300) } } .m-also-available-products--more-by-artist { border-radius: 12px; font-size: var(--font-size-medium-100); margin: 24px 0 0; padding: 12px 24px } .m-also-available-products__tile { width: 188px } @media (min-width: 1024px) { .m-also-available-products__tile { width:136px } } @media (max-width: 1023px) { .m-also-available-products__tile { width:100% } } @media (min-width: 1280px) { .m-also-available-products__tile { width:174px } } @media (min-width: 1920px) { .m-also-available-products__tile { width:226px } } .m-similar-designs__h2 { text-align: center; margin-bottom: 24px; color: var(--color-primary-500) } .m-similar-designs__content { margin-top: 48px; margin-bottom: 48px } .m-similar-designs__tiles { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-bottom: 4px } .m-similar-designs__tiles .tp-design-tile--light { --tile-background-color: var(--color-white-a60) } .m-similar-designs__tile { -webkit-flex-shrink: 0; flex-shrink: 0; width: 188px } @media (min-width: 1024px) { .m-similar-designs__tile { width:calc(100% / 6); -webkit-flex-shrink: 1; flex-shrink: 1 } } .m-similar-designs__footer { text-align: center; margin-top: 24px } .m-sizer { background: var(--color-white); display: block; height: 365px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000 } .m-sizer .btn:focus { outline: none } @media (min-width: 970px) { .m-sizer { z-index:1 } } .m-sizer__btns .btn { background: transparent; border: 1px solid; border-color: var(--color-white); color: var(--color-white); font-size: var(--font-size-small-400); font-weight: normal; margin-left: 7.5px; margin-right: 7.5px; padding-bottom: 8px; padding-left: 0; padding-right: 0; padding-top: 8px; text-transform: capitalize; transition: 0.2s; width: 68px } @media (min-width: 970px) { .m-sizer__btns .btn { font-size:var(--font-size-medium-100); font-weight: 200; padding-bottom: 15px; padding-top: 15px; width: 100px } } .m-sizer__btns .on { background: var(--color-primary-500); border-color: var(--color-primary-500) } .m-sizer__configs { color: var(--color-white); display: none; transition: 0.15s } .m-sizer__configs-wrap.on .m-sizer__configs { display: block } .m-sizer__configs-ctrl { cursor: pointer; font-size: var(--font-size-medium-400); color: white; padding: 50% } .m-sizer__configs-wrap.on .m-sizer__configs-ctrl { display: none } .m-sizer__configs-wrap { -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: var(--color-primary-500); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; position: absolute; top: 0; right: 0; width: 42px; height: 38px; transition: 0.3s; overflow: hidden; -webkit-transform: translate(-10px, 10px); transform: translate(-10px, 10px); box-shadow: 0 0 4px var(--color-neutral-400) } @media (min-width: 970px) { .m-sizer__configs-wrap { height:66px; width: 74px } } .m-sizer__configs-wrap.on { background: var(--color-primary-600); height: 100%; width: 100%; -webkit-transform: translate(0, 0); transform: translate(0, 0); box-shadow: none } .m-sizer__label { color: var(--color-white); font-size: var(--font-size-small-400); font-family: var(--font-family-primary-bold); text-align: center; margin-top: 5px } @media (min-width: 375px) { .m-sizer__label { margin-top:15px } } @media (min-width: 970px) { .m-sizer__label { font-size:var(--font-size-medium-200); font-weight: normal; margin-top: 25px; margin-bottom: 10px } } .m-sizer__prompt { color: var(--color-white); font-size: var(--font-size-small-400); text-align: center } @media (min-width: 375px) { .m-sizer__prompt { font-size:var(--font-size-medium-100) } } @media (min-width: 970px) { .m-sizer__prompt { font-size:var(--font-size-medium-300) } } .m-sizer__slider { height: calc(100% - 13.7254901961%) } .m-sizer__slider-arrow { position: absolute; top: calc(50% - 13.7254901961%); opacity: 0; transition: 0.3s } .m-sizer__slider.on .m-sizer__slider-arrow { opacity: 1 } .m-sizer__slider.on .m-sizer__slider-arrow.disabled { opacity: 0; pointer-events: none } .m-sizer__slider-arrow.next,.m-sizer__slider-arrow.prev { color: white; font-size: var(--font-size-xlarge-300); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center } @media (min-width: 970px) { .m-sizer__slider-arrow.next,.m-sizer__slider-arrow.prev { font-size:var(--font-size-xlarge-400) } } .m-sizer__slider-arrow.next:after,.m-sizer__slider-arrow.prev:after { content: '◀︎'; text-shadow: 0 0 2px black } .m-sizer__slider-arrow.next span,.m-sizer__slider-arrow.prev span { position: absolute; font-size: var(--font-size-small-200); text-transform: uppercase; font-weight: bold; z-index: 1 } @media (min-width: 970px) { .m-sizer__slider-arrow.next span,.m-sizer__slider-arrow.prev span { font-size:var(--font-size-small-400) } } .m-sizer__slider-arrow.next { right: 0; -webkit-justify-content: flex-start; justify-content: flex-start } .m-sizer__slider-arrow.next span { padding-left: 18px } @media (min-width: 970px) { .m-sizer__slider-arrow.next span { padding-left:24px } } .m-sizer__slider-arrow.next:after { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .m-sizer__slider-arrow.prev { left: 0; -webkit-justify-content: flex-end; justify-content: flex-end } .m-sizer__slider-arrow.prev span { padding-right: 18px } @media (min-width: 970px) { .m-sizer__slider-arrow.prev span { padding-right:24px } } .m-sizer__slider-name { color: var(--color-white); font-weight: bold; margin-right: 4px } .m-sizer__slider-text { background: var(--color-neutral-900); height: 13.7254901961%; position: absolute; bottom: 0; width: 100%; color: var(--color-white); font-size: var(--font-size-medium-100); display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; font-weight: 200 } .m-sizer__slider-text span { color: var(--color-white); margin-left: 5px } @media (min-width: 1025px) { .m-sizer__slider-text { font-size:var(--font-size-medium-200) } } .m-sizer__slider-wrap { height: 100% } .m-sizer__slider-wrap .glide__slide { height: 100% } .m-sizer__slider-wrap .glide__slide img { height: 100% } .m-sizer__view { margin-top: 5px } @media (min-width: 375px) { .m-sizer__view { margin-top:20px } } @media (min-width: 970px) { .m-sizer__view .btn { font-size:var(--font-size-medium-300); padding: 15px 30px } }