#promoBannerMain, .promoDrawer { display: none; } body:before { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_NGai_imgBW_DESK") url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_Kaphill_imgColor_DESK") url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_RichFresh_imgColor_DESK") url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_BruceGlen_imgColor_DESK") url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_APotts_imgColor_DESK"); display: none; } @media (max-width:767px) { body:before { content: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_NGai_imgBW_MOB") url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_Kaphill_imgColor_MOB") url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_RichFresh_imgColor_MOB") url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_BruceGlen_imgColor_MOB") url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_APotts_imgColor_MOB"); display: none } } *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } .disable-scroll { overflow: hidden; } .text-center { text-align: center; } .sds_block { display: block; width: 100%; } .uppercase { text-transform: uppercase; } .cta_btn { display: inline-flex; padding: 20px; align-items: center; gap: 8px; cursor: pointer; background-color: #000; color: #fff; font-weight: 500; font-size: min(1.1111vw, 16px); line-height: min(1.1111vw, 16px); margin: 10px 0; } @media (max-width:767px) { .cta_btn { font-size: min(3.58974vw, 14px); line-height: min(3.58974vw, 14px); padding: 10px } } .modalwrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: scale(1.1); } .modalwrap .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; } @media (max-width:767px) { .modalwrap .modal-content { width: 90%; padding: 1rem 1rem } } .modalwrap .modal-content img { display: block; width: auto; height: auto; } .modalwrap.show-modal { opacity: 1; z-index: 10; visibility: visible; transform: scale(1); transition: visibility 0s linear 0s, opacity .25s 0s, transform .25s; } .close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: .25rem; background-color: lightgray; } .close-button:hover { background-color: darkgray; } #lp-content { text-align: left; font-weight: 500; overflow: hidden; width: 100%; margin: 0 auto; background-color: #fff; z-index: 1; } @media (min-width:1440px) { #lp-content { max-width: 1440px } } #lp-content h2 { font-size: min(2.222vw, 32px); line-height: min(2.639vw, 38px); font-weight: 500; } @media (max-width:767px) { #lp-content h2 { font-size: min(6.1538vw, 24px); line-height: min(7.692vw, 30px); font-weight: 500; margin-left: 4vw } } #lp-content h3 { font-size: min(1.111vw, 16px); line-height: 1.52778; font-weight: 500; letter-spacing: .32px; } @media (max-width:767px) { #lp-content h3 { font-size: min(3.5897vw, 14px); line-height: min(5.128vw, 20px); letter-spacing: .28px; margin-left: 0 } } #lp-content h4 { font-size: min(.833333vw, 16px); line-height: min(1.14583vw, 22px); margin-bottom: 1rem; } @media (max-width:767px) { #lp-content h4 { font-size: min(2.2656vw, 14.5px); line-height: min(2.7656vw, 17.7px); margin-bottom: 1rem } } #lp-content .overlay { position: absolute; height: auto; width: 100%; top: 0; left: 0; } #lp-content section { position: relative; margin: 0 auto; padding-left: min(4.16667vw, 60px); padding-right: min(4.16667vw, 60px); } @media (max-width:767px) { #lp-content section { padding-left: 1em; padding-right: 0 } } #lp-content .xl-2-col { display: flex; margin: 0 auto 5em; justify-content: space-between; position: relative; } @media (max-width:767px) { #lp-content .xl-2-col { flex-direction: column; width: 100%; margin-bottom: 0 } } #lp-content .xl-2-col>div { width: 34%; } @media (max-width:767px) { #lp-content .xl-2-col>div { width: 95% } } #lp-content .card-copy { margin: 4vw; padding: 0; width: 42%; position: absolute; top: 50%; left: 40%; transform: translate(0, -70%); } @media (max-width:767px) { #lp-content .card-copy { position: relative; margin: 8vw 0; padding-bottom: 2.5vw; width: 95%; left: 0; transform: none } } #lp-content .card-copy p { font-size: min(1.66667vw, 32px); font-style: normal; font-weight: 500; line-height: min(1.979vw, 38px); letter-spacing: 0; margin-bottom: 1em; } @media (max-width:767px) { #lp-content .card-copy p { font-size: min(3.75vw, 24px); line-height: min(4.6875vw, 30px) } } #lp-content #hero { width: 100%; overflow: hidden; padding: 0; margin-bottom: 3em; } #lp-content #hero .row-lockupbox { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; padding: 0; margin: 0; } #lp-content #hero video { max-width: 100% !important; height: auto !important; } @media (max-width:767px) { #lp-content #hero video { aspect-ratio: 598 / 720 } } #lp-content #hero .sds_block { display: block; width: 100%; height: 100%; } #lp-content #hero .sds_full { width: 100%; } #lp-content #hero .overlay { position: absolute; width: 100%; height: auto; left: 50%; top: 0; transform: translate(-50%, 0); } @media (max-width:767px) { #lp-content #hero .overlay { height: auto; text-align: center } } #lp-content #hero .overlay img { width: 100%; } #lp-content #hero .aria-invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } #lp-content #hero .cta-wrapper { z-index: 2; margin: 2em 0 1em; position: relative; } #lp-content #hero .cta { padding: 10px; margin-right: 2vw; margin-top: 2vw; color: #000; background: #fff; text-decoration: none; font-size: min(1.11vw, 16px); line-height: min(1.11vw, 16px); font-weight: 500; } @media (max-width:767px) { #lp-content #hero .cta { font-size: min(4.103vw, 16px); line-height: min(5.641vw, 22px); margin: 2em 1em 0 0 } } #lp-content #hero .hero-copy { position: relative; color: #fff; background: #231f20; width: auto; padding: min(3.47222vw, 50px) 0; padding-left: min(4.16667vw, 60px); margin-top: -1px; } @media (max-width:767px) { #lp-content #hero .hero-copy { padding: 2em 1em } } #lp-content #hero .hero-copy h2 { margin-top: 1.5rem; } @media (max-width:767px) { #lp-content #hero .hero-copy h2 { margin-top: 1rem } } #lp-content #hero .hero-copy h3 { width: min(38.888889vw, 560px); font-size: min(1.11vw, 16px); line-height: min(1.5278vw, 22px); letter-spacing: .32px; } @media (max-width:767px) { #lp-content #hero .hero-copy h3 { width: 90%; font-size: min(4.102vw, 16px); line-height: min(5.641vw, 22px) } } #lp-content #hero .hero-copy h3 p { margin-bottom: 1.2em; } #lp-content #hero .hero-copy h3 .wrapDesk { display: block; } @media (max-width:767px) { #lp-content #hero .hero-copy h3 .wrapDesk { display: inline } } #lp-content #hero .hero-copy h3 a { font-size: min(1.11vw, 16px); line-height: min(1.11vw, 16px); letter-spacing: .32px; text-decoration: none; border-bottom: 1px solid #fff; margin-top: 2rem; color: #fff; } @media (max-width:767px) { #lp-content #hero .hero-copy h3 a { font-size: min(3.5897vw, 14px) } } @media (max-width:767px) { #lp-content #designers { padding-right: 0 } } #lp-content #designers h2 { font-size: min(4.44444vw, 64px); line-height: min(4.8611vw, 70px); font-weight: 500; } @media (max-width:767px) { #lp-content #designers h2 { font-size: min(8.20512821vw, 32px); line-height: min(9.7436vw, 38px); margin-left: 0 } } #lp-content #designers h3 { font-size: min(1.1111vw, 16px); line-height: min(1.52778vw, 22px); font-weight: 500; margin: 1em 0 0; } @media (max-width:767px) { #lp-content #designers h3 { font-size: min(3.5897vw, 14px); line-height: min(5.1282vw, 20px) } } #lp-content #designers h4 { font-size: min(2.2222vw, 32px); font-weight: 500; line-height: min(2.63889vw, 38px); } @media (max-width:767px) { #lp-content #designers h4 { width: 100%; font-size: min(8.20512821vw, 32px); line-height: min(9.7436vw, 38px); letter-spacing: -.25px } } #lp-content #designers h4 span { color: rgba(0, 0, 0, .5); } @media (max-width:767px) { #lp-content #designers h4 span { display: block; font-size: min(8.20512821vw, 32px); line-height: min(9.7436vw, 38px) } } #lp-content #designers p { font-size: min(1.1111vw, 16px); line-height: min(1.52778vw, 22px); letter-spacing: .32px; font-weight: 500; } @media (max-width:767px) { #lp-content #designers p { font-size: min(5.641vw, 16px); line-height: min(5.641026vw, 22px) } } #lp-content #designers .designer-nav { box-sizing: border-box; position: relative; display: flex; justify-content: flex-start; width: 78%; gap: 2vw; margin-top: min(2.0833333vw, 30px); padding-bottom: min(6.25vw, 90px); } @media (max-width:767px) { #lp-content #designers .designer-nav { justify-content: flex-start; width: 100%; overflow-x: scroll; overflow-y: visible; padding-bottom: 30px; margin-top: min(7.69230769vw, 30px); margin-bottom: min(11.7948718vw, 46px) } } #lp-content #designers .designer-nav input { display: none; } #lp-content #designers .designer-nav input:checked+label { color: #000; } #lp-content #designers .designer-nav .background-photo { position: relative; width: 100%; height: 100%; padding: 0; margin: 0; z-index: 0; } @media (max-width:767px) { #lp-content #designers .designer-nav .background-photo { width: 40%; min-width: 40%; padding: 8px; margin: 0 } } #lp-content #designers .designer-nav .background-photo .hide { display: none; } #lp-content #designers .designer-nav .background-photo label { display: block; position: absolute; left: 0; top: 0; z-index: 0; border: none; background: transparent; color: #000; text-decoration: underline; width: 100%; height: 100%; font-size: min(1.1111vw, 16px); } @media (max-width:767px) { #lp-content #designers .designer-nav .background-photo label { font-size: min(3.75vw, 24px) } } #lp-content #designers .designer-nav .background-photo label a { position: absolute; text-decoration: none; display: block; white-space: nowrap; color: rgba(0, 0, 0, .5); top: 100%; padding-top: 10px; } @media (max-width:767px) { #lp-content #designers .designer-nav .background-photo label a { padding-top: 4px } } #lp-content #designers .designer-nav .background-photo label a:hover { text-decoration: underline; } #lp-content #designers .designer-nav .background-photo label:hover { cursor: pointer; } @media (max-width:767px) { #lp-content #designers .designer-nav .background-photo label:hover { border: none } } #lp-content #designers .designer-nav .background-photo #tab1:checked+label a, #lp-content #designers .designer-nav .background-photo #tab2:checked+label a, #lp-content #designers .designer-nav .background-photo #tab3:checked+label a, #lp-content #designers .designer-nav .background-photo #tab4:checked+label a, #lp-content #designers .designer-nav .background-photo #tab5:checked+label a { text-decoration: underline; color: #000; } #lp-content #designers .designer-nav .ngai { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_NGai_imgBW_DESK"); background-repeat: no-repeat; background-size: cover; aspect-ratio: 380/480; } @media (max-width:767px) { #lp-content #designers .designer-nav .ngai { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_NGai_imgBW_MOB"); aspect-ratio: 260/320 } } #lp-content #designers .designer-nav .ngai:hover, #lp-content #designers .designer-nav .ngai:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_NGai_imgColor_DESK"); } @media (max-width:767px) { #lp-content #designers .designer-nav .ngai:hover, #lp-content #designers .designer-nav .ngai:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_NGai_imgColor_MOB"); aspect-ratio: 260/320 } } #lp-content #designers .designer-nav .kaphill { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_Kaphill_imgBW_DESK"); background-repeat: no-repeat; background-size: cover; aspect-ratio: 380/480; } @media (max-width:767px) { #lp-content #designers .designer-nav .kaphill { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_Kaphill_imgBW_MOB"); aspect-ratio: 260/320 } } #lp-content #designers .designer-nav .kaphill:hover, #lp-content #designers .designer-nav .kaphill:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_Kaphill_imgColor_DESK"); } @media (max-width:767px) { #lp-content #designers .designer-nav .kaphill:hover, #lp-content #designers .designer-nav .kaphill:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_Kaphill_imgColor_MOB") } } #lp-content #designers .designer-nav .richfresh { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_RichFresh_imgBW_DESK"); background-repeat: no-repeat; background-size: cover; aspect-ratio: 380/480; } @media (max-width:767px) { #lp-content #designers .designer-nav .richfresh { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_RichFresh_imgBW_MOB"); aspect-ratio: 260/320 } } #lp-content #designers .designer-nav .richfresh:hover, #lp-content #designers .designer-nav .richfresh:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_RichFresh_imgColor_DESK"); } @media (max-width:767px) { #lp-content #designers .designer-nav .richfresh:hover, #lp-content #designers .designer-nav .richfresh:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_RichFresh_imgColor_MOB") } } #lp-content #designers .designer-nav .bruceglen { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_BruceGlen_imgBW_DESK"); background-repeat: no-repeat; background-size: cover; aspect-ratio: 380/480; } @media (max-width:767px) { #lp-content #designers .designer-nav .bruceglen { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_BruceGlen_imgBW_MOB"); aspect-ratio: 260/320 } } #lp-content #designers .designer-nav .bruceglen:hover, #lp-content #designers .designer-nav .bruceglen:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_BruceGlen_imgColor_DESK"); } @media (max-width:767px) { #lp-content #designers .designer-nav .bruceglen:hover, #lp-content #designers .designer-nav .bruceglen:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_BruceGlen_imgColor_MOB") } } #lp-content #designers .designer-nav .apotts { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_APotts_imgBW_DESK"); background-repeat: no-repeat; background-size: cover; aspect-ratio: 380/480; } @media (max-width:767px) { #lp-content #designers .designer-nav .apotts { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_APotts_imgBW_MOB"); aspect-ratio: 260/320 } } #lp-content #designers .designer-nav .apotts:hover, #lp-content #designers .designer-nav .apotts:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_APotts_imgColor_DESK"); } @media (max-width:767px) { #lp-content #designers .designer-nav .apotts:hover, #lp-content #designers .designer-nav .apotts:has(input:checked) { background-image: url("https://gapprod.a.bigcontent.io/v1/static/SP257845_Meet_APotts_imgColor_MOB") } } #lp-content #designers .content { position: relative; } #lp-content #designers .content>.tab-content { width: 100%; opacity: 0; visibility: hidden; max-height: 0; transition: opacity 400ms, visibility 400ms; } #lp-content #designers .sds_relative { width: 30%; } @media (max-width:767px) { #lp-content #designers .sds_relative { width: 100%; padding: 0; padding-right: 1em } } #lp-content #designers .certona__recs-slide { overflow-x: auto; display: flex; justify-content: flex-start; align-items: flex-start; gap: min(2.0833333vw, 30px); width: 100%; margin: 0 auto; overflow-x: auto; overflow-y: visible; } @media (max-width:767px) { #lp-content #designers .certona__recs-slide { overflow-y: hidden; align-items: stretch; gap: 10px } } #lp-content #designers .certona__recs-slide .certona__product-card { z-index: 1; min-width: 29%; width: 29%; } @media (max-width:767px) { #lp-content #designers .certona__recs-slide .certona__product-card { margin: 0 auto; width: 100%; min-width: 70% } } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock { position: sticky; left: 0; z-index: 22; width: 30%; min-width: min(27.5vw, 396px); margin-bottom: 0; background-color: #231f20; padding-bottom: min(10.73125vw, 153px); background: linear-gradient(0deg, #fff 10%, #231f20 10%); } @media (max-width:767px) { #lp-content #designers .certona__recs-slide .certona__product-card.colorblock { position: relative; width: 100%; min-width: 75%; margin-bottom: 0; padding-bottom: 0 } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock.ngai { margin-bottom: calc(39px + (0 - 39) * ((100vw - 390px) / (767 - 390))) } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock.kaphill, #lp-content #designers .certona__recs-slide .certona__product-card.colorblock.richfresh, #lp-content #designers .certona__recs-slide .certona__product-card.colorblock.bruceglen, #lp-content #designers .certona__recs-slide .certona__product-card.colorblock.apotts { margin-bottom: calc(-8px + (-47 + 8) * ((100vw - 390px) / (767 - 390))) } } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock.bruceglen { padding-bottom: min(12.7vw, 183px); } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock.apotts { padding-bottom: min(8.54166667vw, 123px); } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock .wrapper { position: relative; } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock blockquote { width: 75%; margin: 3em auto; font-size: min(1.66667vw, 24px); line-height: min(2.0833333vw, 30px); font-weight: 500; color: #fff; } @media (max-width:767px) { #lp-content #designers .certona__recs-slide .certona__product-card.colorblock blockquote { width: min(51.53846vw, 201px); font-size: min(4.110256vw, 16px); line-height: min(5.64102vw, 22px); margin: 4em auto } } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock blockquote:before { content: "\201C"; display: inline-block; font-size: 4em; top: -3%; left: 3%; position: absolute; } @media (max-width:767px) { #lp-content #designers .certona__recs-slide .certona__product-card.colorblock blockquote:before { top: -3%; left: 3% } } #lp-content #designers .certona__recs-slide .certona__product-card.colorblock .byline { font-size: min(1.1111vw, 16px); line-height: min(1.5278vw, 22px); } @media (max-width:767px) { #lp-content #designers .certona__recs-slide .certona__product-card.colorblock .byline { font-size: min(3.58974vw, 14px); line-height: min(5.1282vw, 20px) } } #lp-content #designers .certona__recs-slide .certona__product-card__inner { padding: 0; height: auto; position: relative; } #lp-content #designers .certona__recs-slide .certona__product-card.wide .certona__product-card__inner { width: 204.285714%; } @media (max-width:767px) { #lp-content #designers .certona__recs-slide .certona__product-card.wide .certona__product-card__inner { width: 100% } } #lp-content #designers .certona__recs-slide .img-hover { position: absolute; top: 0; right: 0; left: 0; bottom: 0; -o-object-fit: contain; object-fit: contain; opacity: 0; transition: opacity .2s; } #lp-content #designers .certona__recs-slide .carousel .img-hover { top: min(-1.66667vw, -24px); } #lp-content #designers .certona__recs-slide .certona__product-card__inner .certona__product-card__anchor:hover .img-hover { opacity: 1; } #lp-content #designers .certona__recs-slide .certona__product-card__inner .certona__product-card__anchor:hover .img-main { opacity: 0; } #lp-content #designers .certona__product-card__text__wrapper { padding-top: .5em; } #lp-content #designers .certona__product-card__text__wrapper a { font-size: min(1.25vw, 18px); line-height: min(1.5278vw, 22px); font-weight: 500; color: #000; text-align: center; text-decoration: none; position: relative; } @media (max-width:767px) { #lp-content #designers .certona__product-card__text__wrapper a { font-size: min(4.1025641vw, 16px); line-height: min(5.641vw, 22px); text-align: left; text-decoration: underline } } #lp-content #designers .carousel-wrapper { display: block; position: relative; margin: 0; background: #fff; margin-bottom: 3em; } #lp-content #designers .carousel-wrapper .carousel-dots { position: absolute; top: 100%; left: 0; width: 100%; height: 1.5em; } #lp-content #designers .carousel-wrapper .carousel-dots input[type="radio"] { position: absolute; left: 50%; bottom: 0; z-index: 100; visibility: hidden; } #lp-content #designers .carousel-wrapper .carousel-dots label { position: absolute; left: 5%; bottom: -5%; transform: translateX(-50%); z-index: 100; width: min(1.25vw, 18px); height: min(1.25vw, 18px); background-color: #e4e4e4; border-radius: 50%; border: 2px solid #fff; padding: 5px; cursor: pointer; } #lp-content #designers .carousel-wrapper .carousel-dots label:active { width: min(1.25vw, 18px); height: min(1.25vw, 18px); bottom: -4%; } #lp-content #designers .carousel-wrapper .carousel-dots input[type="radio"]#button-1~label[for="button-1"] { background-color: #e4e4e4; } #lp-content #designers .carousel-wrapper .carousel-dots input[type="radio"]#button-2~label[for="button-2"] { background-color: #18324d; } #lp-content #designers .carousel-wrapper .carousel-dots input[type="radio"]#button-3~label[for="button-3"] { background-color: #000000; } #lp-content #designers .carousel-wrapper .carousel-dots input[type="radio"]#button-1:checked~label[for="button-1"] { border: 2px solid #fff; outline: 1px solid #000; } #lp-content #designers .carousel-wrapper .carousel-dots input[type="radio"]#button-2:checked~label[for="button-2"] { border: 2px solid #fff; outline: 1px solid #000; } #lp-content #designers .carousel-wrapper .carousel-dots input[type="radio"]#button-3:checked~label[for="button-3"] { border: 2px solid #fff; outline: 1px solid #000; } @media (max-width:767px) { #lp-content #designers .carousel-wrapper .carousel-dots label[for="button-1"] { left: 5% } } #lp-content #designers .carousel-wrapper .carousel-dots label[for="button-2"] { left: 15%; } @media (max-width:767px) { #lp-content #designers .carousel-wrapper .carousel-dots label[for="button-2"] { left: 15% } } #lp-content #designers .carousel-wrapper .carousel-dots label[for="button-3"] { left: 25%; } @media (max-width:767px) { #lp-content #designers .carousel-wrapper .carousel-dots label[for="button-3"] { left: 25% } } #lp-content #designers .carousel-wrapper:has(>.carousel-dots input[type="radio"]#button-1:checked)>.carousel>ul { left: 0; } #lp-content #designers .carousel-wrapper:has(>.carousel-dots input[type="radio"]#button-2:checked)>.carousel>ul { left: -100%; } #lp-content #designers .carousel-wrapper:has(>.carousel-dots input[type="radio"]#button-3:checked)>.carousel>ul { left: -200%; } #lp-content #designers .carousel-wrapper .carousel { width: 100%; height: 100%; overflow: hidden; position: relative; } #lp-content #designers .carousel-wrapper .carousel ul { position: relative; list-style: none; overflow: hidden; margin: 0; padding: 0; height: 100%; width: 303%; left: 0; } #lp-content #designers .carousel-wrapper .carousel li { width: 33%; float: left; position: relative; } #lp-content #designers .carousel-wrapper .carousel li img { margin: auto; height: 100%; } #lp-content #designers:has(#tab1:checked) .content #content1 { visibility: visible; opacity: 1; max-height: 1500px; } @media (max-width:767px) { #lp-content #designers:has(#tab1:checked) .content #content1 { max-height: 2000px } } #lp-content #designers:has(#tab2:checked) .content #content2 { visibility: visible; opacity: 1; max-height: 1500px; } @media (max-width:767px) { #lp-content #designers:has(#tab2:checked) .content #content2 { max-height: 2000px } } #lp-content #designers:has(#tab3:checked) .content #content3 { visibility: visible; opacity: 1; max-height: 1500px; } @media (max-width:767px) { #lp-content #designers:has(#tab3:checked) .content #content3 { max-height: 2000px } } #lp-content #designers:has(#tab4:checked) .content #content4 { visibility: visible; opacity: 1; max-height: 1500px; } @media (max-width:767px) { #lp-content #designers:has(#tab4:checked) .content #content4 { max-height: 2000px } } #lp-content #designers:has(#tab5:checked) .content #content5 { visibility: visible; opacity: 1; max-height: 1500px; } @media (max-width:767px) { #lp-content #designers:has(#tab5:checked) .content #content5 { max-height: 2000px } } #lp-content .title-section { margin: 1vw 0 2vw; } @media (max-width:767px) { #lp-content .title-section { margin: 4vw 0; padding-left: 1em } } #lp-content .title-section h2 { margin: 0; } #lp-content .title-section h3 { margin-left: 0; margin-top: 1rem; } @media (max-width:767px) { #lp-content .title-section h3 { margin-top: 2vw } } #lp-content .title-section p { font-size: min(1.66667vw, 32px); font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0; margin-bottom: 2vw; } @media (max-width:767px) { #lp-content .title-section p { font-size: min(3.75vw, 24px) } } #lp-content .look-wrapper { height: 100%; overflow: hidden; } #lp-content #videos { margin-top: 2em; margin-bottom: 7em; padding-top: min(4.166667vw, 60px); } @media (max-width:767px) { #lp-content #videos { margin: min(15.3846154vw, 60px) auto; padding-left: 0 } } #lp-content #videos h4 { font-size: min(2.22222vw, 32px); line-height: min(2.638889vw, 38px); margin-bottom: 2rem; } @media (max-width:767px) { #lp-content #videos h4 { font-size: min(10.2564vw, 40px); line-height: min(11.28205vw, 44px) } } #lp-content #videos p { font-size: min(1.111111vw, 16px); line-height: min(1.527778vw, 22px); margin-bottom: 1em; } @media (max-width:767px) { #lp-content #videos p { font-size: min(4.1025641vw, 16px); line-height: min(5.64102564vw, 22px); margin-bottom: 2rem } } #lp-content #videos .leftcol { width: 47%; min-width: min(27.5vw, 396px); padding-right: min(2.0833333vw, 30px); } @media (max-width:767px) { #lp-content #videos .leftcol { width: 100% } } #lp-content #videos .video-player { position: relative; padding: 0; margin: 0; width: 100%; } @media (max-width:767px) { #lp-content #videos .video-player { width: 100% } } #lp-content #videos .video-player .header { position: absolute; left: 0; top: 0; color: #fff; display: flex; justify-content: space-between; margin: 1em auto; z-index: 11; width: 95%; } #lp-content #videos .video-player img { border-radius: 10px; width: 42%; height: auto; } @media (max-width:767px) { #lp-content #videos .video-player img { width: 100%; height: 100% } } #lp-content #videos .xl-2-col { justify-content: flex-start; } @media (max-width:767px) { #lp-content #videos .xl-2-col { padding: 0 1em } } #lp-content #videos .lockupbox { border-radius: 10px; overflow: hidden; position: absolute; top: 0; left: 0; height: auto; width: 43%; padding: 0; margin: 0; } @media (max-width:767px) { #lp-content #videos .lockupbox { width: 100% } } #lp-content #videos video { border-radius: 10px; display: block; width: 100%; height: auto; } @media (max-width:767px) { #lp-content #videos #playlist { width: 100%; margin: 1em 0; display: flex; justify-content: space-between } } #lp-content #videos #playlist li { cursor: pointer; padding: 1.5em 0 0; list-style-type: none; } @media (max-width:767px) { #lp-content #videos #playlist li { padding: 0 1em 0 0; font-size: min(3.589744vw, 14px); line-height: min(5.64103vw, 22px) } } #lp-content #videos #playlist li.active span { border-bottom: 1px solid #000; } #lp-content #videos #playlist li:hover { color: #666; } #lp-content #videos .header-designer { font-size: min(1.11111vw, 16px); line-height: min(1.52778vw, 22px); text-align: left; margin: 0; position: relative; padding-left: 2em; } @media (max-width:767px) { #lp-content #videos .header-designer { font-size: min(4.61538vw, 18px); line-height: min(5.1282vw, 20px) } } #lp-content #videos .header-designer::before { content: ""; display: inline-block; width: 1em; height: 1em; border-radius: 50%; background-color: #031ba1; position: absolute; left: 10%; top: 50%; transform: translate(0, -50%); } #lp-content #videos .header-name { font-size: min(.972222vw, 14px); } @media (max-width:767px) { #lp-content #videos .header-name { font-size: min(3.5897vw, 14px) } } #lp-content #videos button.playPause { bottom: 2vw; right: 1vw; } @media (max-width:767px) { #lp-content #videos button.playPause { bottom: 7vw; right: 3vw } } #lp-content #videos .muteUnmute { bottom: 2vw; right: 4vw; } @media (max-width:767px) { #lp-content #videos .muteUnmute { bottom: 7vw; right: 10vw } } #lp-content #past { margin: 2vw auto 5vw; } @media (max-width:767px) { #lp-content #past { padding-left: 0; margin: 2vw auto 8vw; width: 100% } } #lp-content #past .certona__recs-slide { overflow-x: auto; display: flex; justify-content: space-between; gap: min(2.0833333vw, 30px); width: 100%; margin: 0 auto; } @media (max-width:767px) { #lp-content #past .certona__recs-slide { flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 10px; padding-left: 1em } } #lp-content #past .certona__recs-slide .certona__product-card { position: relative; width: 30%; } @media (max-width:767px) { #lp-content #past .certona__recs-slide .certona__product-card { min-width: 70%; aspect-ratio: 716/748; margin: 0 auto } } #lp-content #past .certona__recs-slide .certona__product-card__inner { padding: 0; color: #fff; } #lp-content #past .certona__recs-slide .certona__product-card.blue { background: #031ba1; width: 36%; } @media (max-width:767px) { #lp-content #past .certona__recs-slide .certona__product-card.blue { width: 92% } } #lp-content #past .certona__recs-slide .certona__product-card.blue .certona__product-card__text__wrapper { top: 50%; transform: translateY(-50%); } #lp-content #past .certona__recs-slide .certona__product-card__text__wrapper { position: absolute; top: 80%; left: 30px; height: auto; } @media (max-width:767px) { #lp-content #past .certona__recs-slide .certona__product-card__text__wrapper { top: 70%; left: 5% } } #lp-content #past .certona__recs-slide h4 { font-size: min(2.222vw, 32px); line-height: min(2.6389vw, 45px); margin-top: 0; font-weight: 500; } @media (max-width:767px) { #lp-content #past .certona__recs-slide h4 { line-height: min(6.1538vw, 24px); font-size: min(7.6923vw, 30px) } } #lp-content #past .certona__recs-slide p { font-size: min(1.111vw, 16px); line-height: 1.5278; font-weight: 500; margin-top: .5rem; max-width: 85%; } @media (max-width:767px) { #lp-content #past .certona__recs-slide p { font-size: min(4.1026vw, 16px); line-height: min(5.641vw, 22px) } } #lp-content #past .certona__recs-slide p a { color: #fff; text-decoration: none; border-bottom: 1px solid #fff; } @media (max-width:767px) { #lp-content #past .certona__recs-slide p a { min-height: min(112.5vw, 720px); padding-bottom: 0 } } #lp-content #past .certona__recs-slide .times { font-size: 1.1em; } #lp-content #lp-certona { margin-bottom: 2vw; width: 95%; } @media (max-width:767px) { #lp-content #lp-certona { width: 100% } } @media (max-width:767px) { #lp-content #lp-certona .mkt_reg-info { padding-left: 4vw } } #lp-content #lp-certona p { font-size: min(1.66667vw, 32px); font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0; margin-bottom: 1.5vw; } @media (max-width:767px) { #lp-content #lp-certona p { font-size: min(3.75vw, 24px); margin-bottom: 3vw } } #lp-content #divnav { width: 95%; } @media (max-width:767px) { #lp-content #divnav { width: 100% } } @media (max-width:767px) { #lp-content #divnav .title-section { padding-left: 4vw } } .gp_full { width: 100%; } .row-lockupbox { position: absolute; top: 0; left: 0; width: 100%; padding: 0; margin: 0; } .hangQuote { text-indent: -.6vw; } sup { font-size: medium; } @media (max-width:767px) { #gapx-lp { max-width: 100vw; overflow-x: hidden } .mb-disp-none { display: none } .dt-disp-none { display: block } .hangQuote { text-indent: -1.7vw } sup { font-size: small } } .showAtXL { display: block; position: relative; } .showAtSM { display: none; position: relative; } .hidden { display: none; } .text-center { text-align: center; } .no-click { pointer-events: none; } @media (max-width:767px) { .showAtXL { display: none } .showAtSM { display: block } } .flex-grid { display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: nowrap; } @media (max-width:767px) { .flex-grid { width: 92vw; margin: 0 auto; flex-wrap: wrap; justify-content: space-between } } .flex-grid .grid-item { margin: 0; } @media (max-width:767px) { .flex-grid .grid-item { width: 48%; margin-bottom: 7vw } } .flex-grid .grid-item:not(:first-child) { margin: 0 0 0 1vw; } @media (max-width:767px) { .flex-grid .grid-item:not(:first-child) { margin: 0 0 7vw 0 } } .flex-grid a { text-decoration: none; border-bottom: 1px solid #000; font-size: min(.9375vw, 18px); line-height: min(1.1458vw, 22px); letter-spacing: 0; } @media (max-width:767px) { .flex-grid a { font-size: min(2.8125vw, 18px); line-height: min(3.4375vw, 22px) } } @media (max-width:767px) { .lookbook-card { margin-bottom: 5vw } .lb-secondary-subcopy { margin: 4.5% 4.5% 9% } } .mkt_reg-info_container { position: relative; max-width: 1440px; width: 100%; margin: 0 auto; } @media (max-width:767px) { .mkt_reg-info_container { width: 100% } } .mkt_reg-info_container h2 { margin-left: .5vw !important; } .mkt_reg-info_container .certona__product-card__text { text-align: left; letter-spacing: 0; opacity: 1; white-space: pre-line; font-size: min(.9375vw, 18px); line-height: min(1.146vw, 22px); padding: 0; color: #000; font-weight: 500; margin-top: 1vw; } @media (max-width:767px) { .mkt_reg-info_container .certona__product-card__text { font-size: min(2.1825vw, 18px); line-height: min(3.4375vw, 22px); margin-top: 2.5vw } } .certona__recs-wrapper.certona__recs-HP-DP { max-width: 1440px; } .certona__hp-title-HP { display: none; } .certona__product-card__inner { padding: 0; } .certona-arrow { top: 40% !important; width: 15px !important; right: 0 !important; display: none; } .certona__recs-wrapper { margin: 0 auto; } .mobile-bottom { display: none; } .certona__recs-slide { display: flex; margin: 0 auto; justify-content: space-between; gap: 1vw; } @media (max-width:767px) { .certona__recs-slide { display: flex; justify-content: flex-start; width: 100% } } .certona__product-card { min-width: 24%; } @media (max-width:767px) { .certona__product-card { width: 40%; min-width: 40% } } .certona__product-card .certona__product-card__inner { padding: 0; } .certona__product-card .product-card-price--regular, .certona__product-card .product-card-price--highlight, .certona__product-card .product-card-marketingflag, .certona__product-card .product-card-price { display: none; } .certona-arrow.left { opacity: 0; } @media (max-width:767px) { .certona__product-card__text { font-size: max(10px, 2.8vw) } .certona__hp-title-HP { font-size: max(10px, 3vw) } .mobileHide { display: none } .mkt_body_id { font-size: 3.5vw; width: 100%; font-weight: 450; text-align: left } .mkt_reg-info_c2 { display: block } .certonaSubheader { padding: 0 } .certona__product-card__text { padding-top: 1vw; margin-top: 2.5vw } .certona-arrow { display: none } } @media only screen and (min-width:768px) { .mkt_font-size--3vw-at-lg { text-align: center } .mkt_font-size--1-5vw-at-lg { font-size: 1.5vw } } .mkt_reg-info_container .certona__recs-grid.grid-root { white-space: normal; } .card-copy { margin-top: 1.2vw; padding-bottom: 3vw; font-weight: 500; } @media (max-width:767px) { .card-copy { margin-top: 3.5vw; padding-bottom: 3vw } .lookbook-card h2 { margin-bottom: 9.6% } } .disable-scroll { overflow: hidden; } .text-center { text-align: center; } .sds_block { display: block; width: 100%; } .uppercase { text-transform: uppercase; } .lookbook-card { margin-bottom: 0; } .lookbook-card h2 { margin-top: 4.5%; margin-bottom: 2.6%; } @media (max-width:767px) { .sds_show-at-lg { display: none !important } .sds_hide-at-lg { display: block !important } } @media (min-width:768px) { .sds_hide-at-lg { display: none !important } .sds_show-at-lg { display: block !important } } @media (max-width:767px) { .sds_show-at-lg-flex { display: none !important } .sds_hide-at-lg-flex { display: flex !important } } @media (min-width:768px) { .sds_hide-at-lg-flex { display: none !important } .sds_show-at-lg-flex { display: flex !important } } @media (max-width:767px) { .sds_show-at-lg-inline-flex { display: none !important } .sds_hide-at-lg-inline-flex { display: inline-flex !important } } @media (min-width:768px) { .sds_hide-at-lg-inline-flex { display: none !important } .sds_show-at-lg-inline-flex { display: inline-flex !important } } @media (max-width:767px) { .sds_show-at-lg-inline-block { display: none !important } .sds_hide-at-lg-inline-block { display: inline-block !important } } @media (min-width:768px) { .sds_hide-at-lg-inline-block { display: none !important } .sds_show-at-lg-inline-block { display: inline-block !important } } .row-lockupbox.align-bottom { display: flex; height: 100%; align-items: flex-end; } .row-lockupbox.align-bottom picture { flex: 1 1 auto; } #lp-content button.playPause, #lp-content button.muteUnmute { border: 0; background: none; padding: 0; position: absolute; height: auto; width: min(2vw, 28px); height: min(2vw, 28px); min-width: 24px; min-height: 24px; cursor: pointer; z-index: 9; } @media (max-width:767px) { #lp-content button.playPause, #lp-content button.muteUnmute { min-width: 20px } } #lp-content button.playPause, #lp-content button.muteUnmute { bottom: min(2.1vw, 30px); right: min(2.1vw, 30px); background-color: rgba(0, 0, 0, .17); } #lp-content button.playPause img, #lp-content button.muteUnmute img { max-width: 50%; } #lp-content button.muteUnmute { right: min(5.208333vw, 75px); } @media (max-width:767px) { #lp-content button.muteUnmute { right: min(10.2564103vw, 40px) } } .video-play-pause-btn { border: none; padding: 0; background: none; } .video-play-pause-btn img { display: block; }