/** Shopify CDN: Minification failed Line 1260:121 Expected identifier but found whitespace Line 1260:133 Unexpected ";" **/ /* -- Fuse Yellow -- */ /* --- */ @keyframes slidetop { 0% { top: -50px; } 100% { top: 0px; } } #admin-bar-iframe { display: none !important; } html, body { font-family: 'Exo 2'; -webkit-overflow-scrolling: inherit; padding-bottom: 0px !important; } .fuse-frames-menu { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; position: relative; top: 94px; left: 0; width: 100%; padding: 0; z-index: 9999; } .fuse-frames-menu .fuse-frame { height: 25vw; max-height: 400px; background: #f6f6f6; display: grid; align-items: center; justify-items: center; box-shadow: inset 0 0 0 2px white; transition: all 0.2s ease; } .fuse-frames-menu .fuse-frame.coming-soon { color: #aaa; } .fuse-frames-menu .fuse-frame.coming-soon svg .st0 { fill: #aaa; } .fuse-frames-menu .fuse-frame .panel { grid-template-rows: 40px 150px auto auto; min-width: 200px; } .fuse-frames-menu .fuse-frame .panel .frames-topbar { position: relative; } .fuse-frames-menu .fuse-frame .panel .frames-topbar img { max-width: 150px; position: absolute; left: 50%; transform: translateX(-50%); mix-blend-mode: darken; } .fuse-frames-menu .fuse-frame div { text-align: center; display: grid; font-size: 13px; letter-spacing: 1px; } .fuse-frames-menu .fuse-frame div svg { width: 150px; } .fuse-frames-menu .fuse-frame .selector { display: grid; grid-template-columns: repeat(auto-fit, 30px); justify-content: center; padding: 10px 0; } .fuse-frames-menu .fuse-frame .selector .frame-swatch { display: block; width: 25px; height: 25px; border-radius: 6px; box-shadow: 0 0px 3px rgba(0, 0, 0, 0.2); transition: all 0.2s ease-in-out; } .fuse-frames-menu .fuse-frame .selector .frame-swatch:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); transition: all 0.2s ease-in-out; } .fuse-frames-menu .fuse-frame .selector .frame-swatch.black { background: linear-gradient(45deg, black, #222, black); } .fuse-frames-menu .fuse-frame .selector .frame-swatch.clear { background: linear-gradient(45deg, white, #f4f4ea, white); } .fuse-frames-menu .fuse-frame .selector .frame-swatch.brown { background: linear-gradient(45deg, #563428, #613b14, #351a11); } .fuse-frames-menu.animate2 { position: fixed; top: 72px; } .fuse-frames-menu.animate2 .fuse-frame { height: inherit; transition: all 0.2s ease; padding: 10px 0 10px; } .fuse-frames-menu.animate2 .fuse-frame .panel { grid-template-rows: 20px 50px auto auto; min-width: 200px; } .fuse-frames-menu.animate2 .fuse-frame .panel .frames-topbar { overflow: hidden; position: relative; } .fuse-frames-menu.animate2 .fuse-frame .panel .frames-topbar img { max-width: 150px; width: 80px; position: absolute; left: 50%; transform: translateX(-50%) translateY(-20px); mix-blend-mode: darken; } .fuse-frames-menu.animate2 .fuse-frame div svg { width: 80px; display: block; margin: 0 auto; } @media only screen and (max-width:749px) { .fuse-frames-menu { grid-template-columns: 1fr 1fr; } .fuse-frames-menu .fuse-frame div svg { width: 110px; } } /* header override */ .site-header { border-bottom: 0px; } header.header-hw { display: grid; position: relative; top: 0; left: 0; width: 100%; padding: 0; z-index: 10000; } header.header-hw.animate { position: fixed; border-bottom: 0px solid blue; animation: slidetop 0.4s forwards; } header.header-hw.animate a.announcement-bar { height: 0%; display: none; } header.header-hw.animate .announcement { height: 0%; display: none; } header.header-hw.animate .site-header__logo-image { max-width: 100px; transition: all 0.2s ease; } header.header-hw.animate .main-header .rest-of-menu .top { align-items: center; grid-column: 1/2; } header.header-hw.animate .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu.announce { top: 52px; } header.header-hw.animate .main-header .rest-of-menu .bottom { display: none; } @media only screen and (max-width:749px) { header.header-hw.animate .main-header .rest-of-menu .bottom { display: initial; } } header.header-hw.animate.sticky .site-header__logo-image { max-width: 140px; transition: all 0.2s ease; } header.header-hw.animate.sticky .main-header .rest-of-menu .top { grid-column: 1/3; } header.header-hw.animate.sticky .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu.announce { top: 45px; } header.header-hw.animate.sticky .main-header .rest-of-menu .bottom { display: grid; } header.header-hw .announcement { background: linear-gradient(90deg, #3f51b5, #e91e63); text-align: center; padding: 10px; height: 100%; background: #4d597a; } header.header-hw .announcement p { color: #ecdbb5; text-shadow: none; font-size: 14px; margin: 0 0 0 0; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.13); } header.header-hw .announcement p a { text-decoration: underline; color: #ecdbb5; text-shadow: none; } header.header-hw .announcement p strong { color: #3f51b5; } header.header-hw .announcement-bar { background: linear-gradient(40deg, #54ccbb, #5fb0e2); text-align: center; padding: 0px 10px; height: 100%; background: #dc505b; } header.header-hw .announcement-bar p { color: white; font-weight: 600; margin-bottom: 10px; } header.header-hw .main-header { display: grid; grid-template-columns: 1fr 5fr; transition: all 0.3s ease; } header.header-hw .main-header .mbl_hamburger { display: none; } header.header-hw .main-header .mbl_cart { display: none; } header.header-hw .main-header .logo-container { background: #fed10a; display: none; align-items: center; } header.header-hw .main-header .logo-container .site-header__logo-image { margin: 4px auto; padding-top: 0px; text-align: center; } header.header-hw .main-header .logo-container .site-header__logo-image:hover { opacity: 1; } @media only screen and (max-width:985px) { header.header-hw .main-header .logo-container .site-header__logo-image { padding-top: 20px; } header.header-hw .main-header .logo-container .site-header__logo-image:hover { opacity: 1; } } @media only screen and (max-width:749px) { header.header-hw .main-header .logo-container { display: grid; } header.header-hw .main-header .logo-container .site-header__logo-image { padding-top: 0px; margin: 0px auto; } header.header-hw .main-header .logo-container .site-header__logo-image:hover { opacity: 1; } header.header-hw .main-header .logo-container .site-header__logo-image #fuse-logo_1 { max-width: 110px !important; } } header.header-hw .main-header .rest-of-menu { display: grid; grid-template-columns: auto 70px; } header.header-hw .main-header .rest-of-menu .top { display: grid; grid-template-columns: auto 270px; background: #000; grid-column: 1/3; } header.header-hw .main-header .rest-of-menu .top .menunav { line-height: 0.5; text-transform: uppercase; } header.header-hw .main-header .rest-of-menu .top .menunav nav { line-height: 1.5; } header.header-hw .main-header .rest-of-menu .top .menunav nav #SiteNav #menu-shop-lenses { display: none; } header.header-hw .main-header .rest-of-menu .top .menunav nav #SiteNav #menu-my-account { display: none; } header.header-hw .main-header .rest-of-menu .top .menunav nav #SiteNav #menu-help { display: none; } header.header-hw .main-header .rest-of-menu .top .menunav nav ul.site-nav li.site-nav--has-dropdown ul li { display: block; } header.header-hw .main-header .rest-of-menu .top .menunav nav ul#SiteNav li:nth-last-child(3) a.site-nav__link--main { color: white; } header.header-hw .main-header .rest-of-menu .top .site-nav { text-align: left; color: white; margin: 18px 0; } header.header-hw .main-header .rest-of-menu .top .site-nav a { color: #fed10a; font-family: 'Exo 2'; font-style: normal; letter-spacing: 0px; font-weight: 600; font-size: 14px; } header.header-hw .main-header .rest-of-menu .top .site-nav a.orderCustom { font-size: 13.5px; text-transform: none; color: white; font-weight: 400; border-radius: 50px; border: 1px solid white; padding: 10px; position: absolute; bottom: 10px; } header.header-hw .main-header .rest-of-menu .top .site-nav a.orderCustom.rx { bottom: 60px; } header.header-hw .main-header .rest-of-menu .top .site-nav a.orderCustom.rx:hover { background: #29abe1; color: white; opacity: 1; } header.header-hw .main-header .rest-of-menu .top .site-nav a.orderCustom span { background: white; padding: 1px 9px 3px; color: #272727; font-size: 16px; font-weight: 800; border-radius: 100px; line-height: 0.8; top: 1px; position: relative; margin-left: -4px; margin-right: 3px; } header.header-hw .main-header .rest-of-menu .top .site-nav a.orderCustom:hover { background: white; color: #222; opacity: 1; } header.header-hw .main-header .rest-of-menu .top .site-nav a.orderCustom:hover span { color: white; background: #272727; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__label { border: 0px !important; } header.header-hw .main-header .rest-of-menu .top #SiteNav2 .site-nav--has-dropdown a.site-nav__link { padding-left: 60px; } header.header-hw .main-header .rest-of-menu .bottom { display: grid; grid-template-columns: 2fr 2fr 60px; background: #444; border-top: 1px solid #fed10a; } header.header-hw .main-header .rest-of-menu .bottom .close-search { display: none; } header.header-hw .main-header .rest-of-menu .bottom .search-header.search { max-width: 250px; padding: 5px; margin: 0; display: block; } header.header-hw .main-header .rest-of-menu .bottom .search-bar__submit, header.header-hw .main-header .rest-of-menu .bottom .search-header__submit { right: -18px; } header.header-hw .main-header .rest-of-menu .bottom form.search--focus .search-bar__submit, header.header-hw .main-header .rest-of-menu .bottom form.search--focus .search-header__submit { right: 0px; } header.header-hw .main-header .rest-of-menu .bottom svg.icon.icon-search { color: #fed10a; } header.header-hw .main-header .rest-of-menu .bottom .social { display: none; } header.header-hw .main-header .rest-of-menu .bottom .comments p { letter-spacing: 2px; color: #fed10a; text-align: right; float: right; padding: 0px 8px; text-transform: uppercase; font-size: 10pt; margin-top: 15px; } header.header-hw .main-header .rest-of-menu .cart { background: #fed10a; position: relative; } header.header-hw .main-header .rest-of-menu .cart .site-header__cart { right: calc(50% - 8px); } header.header-hw .main-header .rest-of-menu .cart .site-header__cart-count { top: 7px; left: 11px; color: white; background: #f44336; } @media only screen and (max-width:1000px) { header.header-hw .main-header { grid-template-columns: 1fr 3fr; } } @media only screen and (max-width:749px) { header.header-hw .main-header { grid-template-columns: 120px auto 60px 60px;grid-template-areas:"a b c d"; transition: all 0.3s ease;width:100vw; } header.header-hw .main-header .mbl_hamburger { display: block; text-align: center; justify-self: start; } header.header-hw .main-header .mbl_cart { display: block; text-align: center; } /* header.header-hw .main-header .rest-of-menu { grid-column: 1/4; } header.header-hw .main-header .rest-of-menu .top { display: none !important; } header.header-hw .main-header .rest-of-menu .top .menu { display: none; } header.header-hw .main-header .rest-of-menu .top .right { display: none; } header.header-hw .main-header .rest-of-menu .bottom { grid-template-columns: 1fr; position: relative; } header.header-hw .main-header .rest-of-menu .bottom div.searchPanel { top: -180px; position: absolute; width: 100%; background: #444; opacity: 0; transition: opacity 0.2s ease, top 0.3s ease 0.2s; } header.header-hw .main-header .rest-of-menu .bottom div.searchPanel .close-search { display: block; position: absolute; right: 5px; top: 5px; background: transparent; border: none; color: #fed10a; } header.header-hw .main-header .rest-of-menu .bottom div.searchPanel.reveal { position: absolute; top: -1px; width: 100vw; background: #444; padding: 3px; z-index: 1; opacity: 1; transition: top 0.3s ease, opacity 0.2s ease 0.2s; } header.header-hw .main-header .rest-of-menu .bottom div.searchPanel.reveal .dropdown .topDrop { background: #444; } header.header-hw .main-header .rest-of-menu .bottom .site-header__search { padding: 0 10px; } header.header-hw .main-header .rest-of-menu .bottom .site-header__search .search-header.search { max-width: 250px; padding: 5px; margin: 0 auto; display: block; } */ header.header-hw .main-header .social, header.header-hw .main-header .comments, header.header-hw .main-header .cart { display: none; } } /* top frames section */ .right, .left { fill: #222; } .frame { position: relative; overflow: hidden; } .frame a:hover { opacity: 1; } .frame .squiggle1, .frame .squiggle2, .frame .squiggle3, .frame .squiggle4, .frame .squiggle5, .frame .squiggle6, .frame .squiggle7 { position: absolute; width: 80%; left: calc(15% + .65vw); top: 5px; z-index: 1; max-width: initial; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: transform .5s cubic-bezier(.28, 0, 0, 1.35); } @media only screen and (max-width:1280px) { .frame .squiggle1, .frame .squiggle2, .frame .squiggle3, .frame .squiggle4, .frame .squiggle5, .frame .squiggle6, .frame .squiggle7 { left: 16%; } } @media only screen and (max-width:800px) { .frame .squiggle1, .frame .squiggle2, .frame .squiggle3, .frame .squiggle4, .frame .squiggle5, .frame .squiggle6, .frame .squiggle7 { width: 75%; left: 8%; } } @media only screen and (max-width:749px) { .frame .squiggle1, .frame .squiggle2, .frame .squiggle3, .frame .squiggle4, .frame .squiggle5, .frame .squiggle6, .frame .squiggle7 { width: 75%; left: calc(11% + .5vw); } } @media only screen and (max-width:400px) { .frame .squiggle1, .frame .squiggle2, .frame .squiggle3, .frame .squiggle4, .frame .squiggle5, .frame .squiggle6, .frame .squiggle7 { width: 75%; left: 11%; } } .squiggle1 .sqgl1, .squiggle2 .sqgl1, .squiggle3 .sqgl1, .squiggle4 .sqgl1, .squiggle5 .sqgl1, .squiggle6 .sqgl1, .squiggle7 .sqgl1 { stroke-width: 3px; fill: none; stroke: #fed10a; } .squiggle1 .sqgl1, .squiggle3 .sqgl1, .squiggle4 .sqgl1, .squiggle7 .sqgl1 { stroke: #222; } .frame svg { transition: transform .5s cubic-bezier(.28, 0, 0, 1.35); } .frame-svg { z-index: 2; } .frame:hover svg.frame-svg { transform: scale(.8) rotate(-5deg); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35), stroke-dashoffset .6s ease .25s; } .frame:hover svg.squiggle1 { transform: translate(-22px, -15px) rotate(180deg); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35), stroke-dashoffset .6s ease .125s; stroke-dashoffset: 0; } .frame:hover svg.squiggle2 { transform: translate(-35px, 0px); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35), stroke-dashoffset .6s ease .125s; stroke-dashoffset: 0; } .frame:hover svg.squiggle3 { transform: translate(-24px, 17px); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35), stroke-dashoffset .6s ease .125s; stroke-dashoffset: 0; } .frame:hover svg.squiggle4 { transform: translate(10px, -15px); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35), stroke-dashoffset .6s ease .125s; stroke-dashoffset: 0; } .frame:hover svg.squiggle5 { transform: translate(33px, 14px); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35), stroke-dashoffset .6s ease .125s; stroke-dashoffset: 0; } .frame:hover svg.squiggle6 { transform: translate(50px, 5px); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35), stroke-dashoffset .6s ease .125s; stroke-dashoffset: 0; } .frame:hover svg.squiggle7 { transform: translate(40px, -15px); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35), stroke-dashoffset .6s ease .125s; stroke-dashoffset: 0; } .frame:hover .left, .frame:hover .right { fill: #fed10a; transition: fill .3s ease; } .frame:active svg.frame-svg { transform: scale(.68); transition: transform .5s cubic-bezier(.28, 0, 0, 1.35); } .frame-group-mobile { display: none; } .top-frames-bar a.see-all { background: #272727; color: white; padding: 10px 15px; margin: 10px 20px 80px; font-size: 14px; display: block; position: relative; width: 100%; } @media only screen and (max-width:749px) { .frame-group-mobile { display: block; max-width: 100vw; } .frame-group-mobile h3 { font-size: 12pt; margin-bottom: 0px; text-transform: uppercase; letter-spacing: 2px; text-align: center; } .frame-group-mobile h3 span { letter-spacing: 0px; text-transform: none; font-size: 9pt; color: #aaa; } .frame-group-mobile .frame { padding: 10px; } .frame-group-mobile .frame a { font-size: 10pt; border: 1px solid transparent; display: block; padding: 8px 0px; border-radius: 5px; text-align: center; margin: 0 auto; max-width: 150px; transition: border .2s ease; } #oakley-top-frame-slider .slick-list { padding: 0 10% 0 0; } .frame-group.desktop-only { display: none; } } /* end top frames */ /* step 1 content */ .step-1 { display: grid; grid-template-columns: 1fr 3fr; margin: 5px auto 80px; max-width: 1600px; } .step-1 .step-breadcrumbs { margin-top: 0px; margin-bottom: 35px; background: #f6f6f6; border-bottom: 1px solid #f1f1f1; grid-column: 1/3; } .step-1 .step-breadcrumbs .steps-brand { display: grid; max-width: 1200px; margin: 0 auto 0; grid-template-columns: 2fr 3fr 2fr; background: #f6f6f6; padding: 5px; } .step-1 .step-breadcrumbs .steps-brand .step { text-align: center; padding: 5px; font-weight: 600; font-size: 10pt; } .step-1 .step-breadcrumbs .steps-brand .step.decided { color: #272727; box-shadow: inset 70px 25px #f6f6f6, inset 70px 27px #ddd; } .step-1 .step-breadcrumbs .steps-brand .step.decided p { color: #aaa; padding: 7px 20px; border-radius: 60px; margin: 0 auto; background: #f6f6f6; border: 2px solid #e2e2e2; width: fit-content; transition: all 0.4s ease; } .step-1 .step-breadcrumbs .steps-brand .step.decided p .words { display: block; } .step-1 .step-breadcrumbs .steps-brand .step.decided p .words span { font-weight: normal; } .step-1 .step-breadcrumbs .steps-brand .step.decided p .step-arrow { display: none; } .step-1 .step-breadcrumbs .steps-brand .step.decided a:hover p { color: #444; background: #fff; border-color: #ddd; transition: color 0.2s ease, border-color 0.2s ease, background 0.1s ease; } .step-1 .step-breadcrumbs .steps-brand .step.current { box-shadow: inset 80px 25px #f6f6f6, inset 80px 27px #ddd; } .step-1 .step-breadcrumbs .steps-brand .step.current a { cursor: default; } .step-1 .step-breadcrumbs .steps-brand .step.current a p { color: #272727; background: white; border-radius: 60px; border: 2px solid #fed10a; width: fit-content; margin: 0 auto; padding: 7px 35px; transition: box-shadow 0.2s ease; } .step-1 .step-breadcrumbs .steps-brand .step.current a:hover { cursor: default; } .step-1 .step-breadcrumbs .steps-brand .step.current a:hover p { box-shadow: 0 2px 2px #e2e2e2; transition: box-shadow 0.2s ease; } .step-1 .step-breadcrumbs .steps-brand .step.current a:active p { box-shadow: 0 1px 2px #aaa; transition: box-shadow 0.1s ease; } .step-1 .step-breadcrumbs .steps-brand .step.undecided { box-shadow: inset 0px 25px #f6f6f6, inset 0px 27px #ddd; } .step-1 .step-breadcrumbs .steps-brand .step.undecided p { color: #aaa; padding: 7px; padding: 7px 20px; border-radius: 60px; margin: 0 auto; background: #f6f6f6; border: 2px solid #e2e2e2; width: fit-content; } .step-1 .step-breadcrumbs .steps-brand .step.undecided p .words { display: block; } .step-1 .step-breadcrumbs .steps-brand .step.undecided p .words span { font-weight: normal; } .step-1 .step-breadcrumbs .steps-brand .step.undecided p .words-long span { font-weight: normal; } .step-1 .step-breadcrumbs .steps-brand .step.undecided p .step-arrow { display: none; } .step-1 .step-breadcrumbs .steps-brand .step.undecided.second { box-shadow: inset -80px 25px #f6f6f6, inset -80px 27px #ddd; } .step-1 div.section-step-title { grid-column: 1/2; padding: 20px; } .step-1 div.section-step-title h2.steph2 { font-weight: 600; letter-spacing: 0px; font-size: 18pt; line-height: 25px; text-transform: none; margin-top: 20px; } .step-1 div.section-step-title span.weMake4000 { font-size: 16px; margin-top: 10px; font-weight: normal; display: block; padding-right: 10px; } .step-1 div.section-step-title .orderCustom { position: absolute; bottom: 10px; left: 10px; font-size: 12px; } .step-1 div.section-step-title .orderCustom span { background: #f1c40d; padding: 1px 9px 3px; color: #272727; font-size: 16px; font-weight: 800; border-radius: 100px; line-height: 0.8; top: 1px; position: relative; margin-left: -4px; margin-right: 3px; text-decoration: none !important; } .step-1 div.section-step-title .orderCustom:hover { text-decoration: underline; } .step-1 div.section-step-title .orderCustom:hover span { text-decoration: none !important; } .step-1 div.section-brand-list { transition: height 0.4s ease; } .step-1 div.section-brand-list h3.allbrandsTitle { display: none; } .step-1 div.section-brand-list ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(11, 30px); } .step-1 div.section-brand-list ul li { display: grid; } .step-1 div.section-brand-list ul li a { font-size: 14px; margin-right: auto; background: transparent; padding: 4px 18px; border-radius: 20px; } .step-1 div.section-brand-list ul li a:hover { background: #f2f2f2; opacity: 1; } .step-1 div.section-brand-list .expand-list { display: none; } @media only screen and (max-width:1268px) { .step-1 div.section-step-title { grid-column: 1/3; grid-row: 2; padding-top: 0px; padding-bottom: 40px; } .step-1 div.section-step-title span.weMake4000 { display: none; } .step-1 div.section-step-title h2 { display: none; margin-top: 5px; text-align: center; transform: translateY(-10%); } .step-1 div.section-step-title a.orderCustom { text-align: center; position: relative; display: none; padding: 0px 10px 10px; bottom: none; left: none; } .step-1 div.section-step-title a.orderCustom.expandedA { display: block; } .step-1 div.section-step-title .dropdown .topDrop { margin-top: 0px; } .step-1 div.section-brand-list { grid-column: 1/3; padding: 0px 20px; height: 100%; transition: height 0.4s ease; } .step-1 div.section-brand-list h3.allbrandsTitle { display: block; } .step-1 div.section-brand-list ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(11, 30px); } .step-1 div.section-brand-list ul li { height: 32px; } .step-1 div.section-brand-list ul li a { font-size: 14px; } .step-1 div.section-brand-list .expand-list { display: none; } } .step-1 .dropdown { position: relative; display: block; margin-bottom: 0px; max-width: 1600px; bottom: 0px; margin: 0 auto; } .step-1 .dropdown .topDrop { margin: 30px 0px 0; text-align: center; background: #fed10a; border-radius: 3px 3px; width: 100%; display: grid; grid-template-columns: 1fr 3fr; max-width: 330px; position: relative; } .step-1 .dropdown .topDrop svg { fill: #222; } .step-1 .dropdown .topDrop #myInput { box-shadow: inset 0 0 0 3px #fed10a, inset 0 0 2px 2px #fed10a; background-color: #fff; color: #222; } .step-1 .dropdown .topDrop #myInput:focus, .step-1 .dropdown .topDrop #myInput:hover { background-color: #fff; } .step-1 .dropdown .topDrop #myInput::placeholder { color: #222; } .step-1 .dropdown .topDrop #closeX { background: #fed10a; } .step-1 .dropdown .topDrop #closeX svg { fill: #444; } .step-1 #myDropdown.dropdown-content { position: absolute; width: 100%; left: 0px; z-index: 4; } .step-1 #myDropdown.dropdown-content .bSellers { font-size: 16px; } .first-step-container { grid-column: 1/3; display: grid; grid-template-columns: 1fr 3fr; } .step-1 .first-step-container div.section-step-title .orderCustom { position: relative; } .step-1 .first-step-container div.section-brand-list { grid-row: 1/3; grid-column: 2; } .order-custom-container { display: grid; grid-template-columns: 1fr; border-radius: 12px; box-shadow: 0 0 0 0px #fff; padding: 18px 12px; align-items: center; grid-gap: 6px; margin: 12px; } .order-custom-container h4 { margin: 0 0; font-weight: 600; } .order-custom-container p { font-size: 14px } @media only screen and (max-width:1268px) { .first-step-container { grid-template-columns: 1fr; } .step-1 div.section-step-title { grid-column: 1/2; } .step-1 .first-step-container div.section-brand-list { grid-row: initial; grid-column: initial; } .step-1 div.section-brand-list ul { display: grid; grid-auto-flow: column; grid-template-columns: repeat(4, minmax(120px, 270px)); grid-template-rows: repeat(19, 30px); } } @media only screen and (max-width:749px) { .step-1 div.section-brand-list { grid-column: 1/3; padding: 0px; height: 300px; overflow: hidden; box-shadow: inset 0 -100px 100px white; transition: height 0.4s ease; position: relative; } .step-1 div.section-brand-list h3.allbrandsTitle { display: block; font-size: 12pt; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; text-align: center; } .step-1 div.section-brand-list.expanded { height: 100%; transition: height 0.4s ease; } .step-1 div.section-brand-list.expanded .expand-list { height: 10px; box-shadow: none; opacity: 0; transition: all 0.5s ease 0.5s; } .step-1 div.section-brand-list ul { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .step-1 div.section-brand-list ul li a { font-size: 14px; } .step-1 div.section-brand-list .expand-list { display: block; position: absolute; bottom: 0px; left: 0px; background: white; /* z-index: 1234; */ text-align: center; width: 100%; height: 50px; box-shadow: 0 -30px 30px 30px white; } .step-1 div.section-brand-list .expand-list #showAllBrands { padding: 6px 15px; border-radius: 2px; background: #272727; border: none; color: white; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; border: 0px; } .step-1 .step-breadcrumbs .steps-brand { grid-template-columns: 2fr 2fr; } .step-1 .step-breadcrumbs .steps-brand .step.current a p { padding: 7px 15px; } .step-1 .step-breadcrumbs .steps-brand .undecided.second { display: none; } .step-1 .step-1 .section-step-title { grid-row: 4; } } @media only screen and (max-width:749px) { .order-custom-container { box-shadow: 0 0 0 2px #f2f2f2; text-align: center; grid-gap: 12px; } .order-custom-container h4 { margin: 10px 0; } } /* end step 1 content */ .manual-reviews-container { background: #f1f1f1; padding: 35px; } .manual-reviews-container h3.reviews-heading { text-align: center; padding-top: 70px; text-transform: uppercase; font-size: 36pt; padding-bottom: 40px; } @media only screen and (max-width:949px) { .manual-reviews-container h3.reviews-heading { font-size: 24pt; } } .manual-reviews-container .reviews-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; } @media only screen and (min-width:949px) { .manual-reviews-container .reviews-grid { grid-template-columns: 1fr; max-width: 1400px; margin: 0 auto; grid-gap: 50px; } } .manual-reviews-container .reviews-grid .review { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 20px -10px rgba(0, 0, 0, 0.5); position: relative; height: fit-content; margin-bottom: 20px; display: grid; } .manual-reviews-container .reviews-grid .review .rating { position: relative; top: -50px; margin-bottom: -50px; background: white; border-radius: 0 10px 0 0; max-width: 180px; padding: 10px 10px 0px; } .manual-reviews-container .reviews-grid .review .rating svg { fill: #fed10a; } .manual-reviews-container .reviews-grid .review h3 { padding: 0px 15px; } .manual-reviews-container .reviews-grid .review p { padding: 0px 15px; } .manual-reviews-container .reviews-grid .review .product-review-url { background: #f6f6f6; } .manual-reviews-container .reviews-grid .review .product-review-url a { text-align: center; width: 100%; display: block; padding: 5px; text-decoration: underline; color: #555; } @media only screen and (max-width:949px) { .manual-reviews-container { padding: 15px 0px; } .manual-reviews-container .reviews-grid { grid-template-columns: 1fr; grid-gap: 15px; } .manual-reviews-container .reviews-grid .review .review-img { overflow: hidden; max-height: 70vw; } .manual-reviews-container .reviews-grid .review .review-img img { width: 100%; } } .empty-page-content { padding: 25px 55px; } #featured-ctas { max-width: 1200px; margin: 100px auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; } #featured-ctas .cta-item { background: white; padding: 20px; border: 1px solid #e2e2e2; border-top: 2px solid #fed10a; position: relative; text-align: center; } #featured-ctas .cta-item h4 { text-align: center; font-weight: 400; font-size: 22pt; } #featured-ctas .cta-item img { margin: 0 auto 40px; display: block; max-height: 120px; width: inherit; } #featured-ctas .cta-item a { background: #272727; color: white; padding: 10px 15px; } #featured-ctas .cta-item-full { grid-column: 1/3; background: white; padding: 0px; border: 1px solid #e2e2e2; border-top: 2px solid #fed10a; position: relative; background-size: cover; min-height: 100px; display: grid; grid-template-columns: 2fr 3fr; } #featured-ctas .cta-item-full .custom-full { padding: 50px 20px 20px; } #featured-ctas .cta-item-full .custom-full h4 { text-align: center; font-weight: 400; font-size: 22pt; } #featured-ctas .cta-item-full .content { grid-column: 2; } #featured-ctas .cta-item-full .content .item-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; margin-top: 50px; } #featured-ctas .cta-item-full .content .item-grid .item { display: grid; grid-template-columns: 1fr 4fr; text-align: left; grid-gap: 20px; } #featured-ctas .cta-item-full .content .item-grid .item .text p { letter-spacing: 0px; color: white; } #featured-ctas .cta-item-full .content h3.section-title { color: white; margin-top: 55px; } #featured-ctas .cta-item-full .content h4 { color: white; font-size: 22px; font-weight: 600; } #featured-ctas .cta-item-full .content p.section-sub { color: white; letter-spacing: 2px; } #featured-ctas .cta-item-full .see-colors { background: white no-repeat center center; background-size: cover; border-radius: 0px; grid-column: 0.3333333333; padding: 80px 30px; } #featured-ctas .cta-item-full .see-colors h3 { color: white; font-weight: 300; } #featured-ctas .cta-item-full .see-colors p { color: white; max-width: 400px; } #featured-ctas .cta-item-full .see-colors a { color: white; border: 1px solid white; padding: 10px 20px; border-radius: 3px; background: transparent; transition: all 0.3s ease; } #featured-ctas .cta-item-full .see-colors a:hover { background: white; color: blue; transition: all 0.3s ease; } #featured-ctas.chosen { margin: 200px auto 100px; } @media only screen and (max-width:1199px) { #featured-ctas { margin: 80px 20px; } } @media only screen and (max-width:749px) { #featured-ctas { grid-template-columns: 1fr; padding: 20px 0px; } #featured-ctas .cta-item-full { grid-column: 1/2; } .empty-page-content { padding: 25px 0px; } .empty-page-content #featured-ctas { grid-template-columns: 1fr; padding: 0px; } .empty-page-content #featured-ctas .cta-item-full { grid-column: 1/2; grid-template-columns: 1fr; } } .lens-colors-section { background: white no-repeat center 70%; background-size: cover; min-height: 40vh; position: relative; padding: 55px; display: grid; grid-gap: 40px; grid-template-columns: 1fr 1fr 1fr; } .lens-colors-section .text { width: 100%; grid-column: 1/2; max-width: 800px; display: block; margin: auto; background: #272727 d9; text-align: center; color: white; padding: 30px 30px 50px; max-width: 600px; margin: auto; border-radius: 3px; } .lens-colors-section .text img { margin: 10px 10px 20px; max-width: 150px; } .lens-colors-section .text .button-pair { margin-top: 17.5px; } .lens-colors-section .text .button-pair a { color: white; padding: 10px 20px; margin: 10px; border: 1px solid white; border-radius: 3px; display: inline-block; background: transparent; transition: all 0.3s ease; } .lens-colors-section .text .button-pair a:hover { background: white; color: #272727; transition: all 0.2s ease; } .lens-colors-section .text h2 { color: white; font-weight: bold; text-transform: none; letter-spacing: 0px; font-size: 22pt; font-weight: 400; } .lens-colors-section .text p { color: white; } .lens-colors-section button.see-lens-colors { display: block; margin: 0 auto; background: #fed10a; padding: 15px 30px; } h2.lens-colors-heading { text-align: center; padding-top: 100px; text-transform: uppercase; font-size: 36pt; padding-bottom: 40px; text-shadow: 0 0 8px rgba(250, 250, 250, 0.5); } h2.lens-colors-heading span { font-size: 50%; letter-spacing: 2px; } .three-tiers { max-width: 1200px; display: grid; grid-template-columns: 5fr 5fr 5fr; margin: 100px auto; } .three-tiers .tier { padding: 40px; border-top: 2px solid #fed10a; margin-top: 15px; margin-bottom: 15px; background: #fff; box-shadow: 0 0 5px 1px #f1f1f1; border-radius: 1px; position: relative; } .three-tiers .tier img { display: block; margin: 0 auto 50px; width: 80%; max-width: 220px; } .three-tiers .tier h4 { text-align: center; font-weight: 400; font-size: 22pt; line-height: 25px; } .three-tiers .tier h4 span { font-size: 60%; color: grey; text-transform: uppercase; letter-spacing: 2px; } .three-tiers .tier ul { list-style-type: disc; margin-left: 18px; } .three-tiers .tier ul li { list-style-type: disc; margin-bottom: 10px; } .three-tiers .tier .btn { margin-top: 50px; margin: 50px auto; text-align: center; display: block; max-width: 190px; } .three-tiers .tier.standard { } .three-tiers .tier.standard img { display: block; margin: -30px auto 0px; width: 80%; max-width: 220px; } .three-tiers .tier.plus { box-shadow: 0 0 5px 1px #f1f1f1; padding: 40px; border-top: 2px solid #fed10a; margin-top: 0px; margin-bottom: 0px; background: #272727; z-index: 3; border-radius: 1px; overflow: hidden; } .three-tiers .tier.plus img { display: block; margin: 20px auto 50px; width: 80%; max-width: 270px; } .three-tiers .tier.plus h4 { color: #fff; } .three-tiers .tier.plus p { color: #f9f9f9; } .three-tiers .tier.plus ul { color: #f9f9f9; } .three-tiers .tier.plus .lifetime-warranty { position: absolute; background: linear-gradient(90deg, #e91e63, 20%, #fed10a, 80%, #fed10a); width: 330px; text-align: center; transform: rotateZ(-29deg) translateX(-100px) translateY(-40px); line-height: 1.2; color: white; text-shadow: -1px 1px 1px #000 47; padding: 5px 0px; font-weight: 600; top: 0px; left: 0px; } .three-tiers .tier.polarized { } .three-tiers .tier.polarized img { display: block; margin: -30px auto 0px; width: 80%; max-width: 220px; } @media only screen and (max-width:1024px) { .lens-colors-section { min-height: 30vh; padding-top: 5vh; grid-template-columns: 1fr; padding: 25px; } .lens-colors-section .text { grid-column: 1/4; padding: 30px 15px 30px; } .lens-colors-heading { padding-top: 50px; padding-bottom: 0px; } .three-tiers { margin: 80px 20px; } .three-tiers .tier, .three-tiers .tier.plus { padding: 25px; } } @media only screen and (max-width:749px) { h2.lens-colors-heading { text-align: center; padding-top: 20px; text-transform: uppercase; font-size: 36pt; padding-bottom: 0px; text-shadow: 0 0 8px rgba(250, 250, 250, 0.5); } .three-tiers { grid-template-columns: 1fr; margin: 60px 0px; } .three-tiers .tier { margin: 0 0 0 0; } .three-tiers .tier p { display: none; } .three-tiers .tier .plus, .three-tiers .tier .standard, .three-tiers .tier .polarized { padding: 30px; } .three-tiers .standard { grid-row: 3; } .three-tiers .polarized { grid-row: 2; } .three-tiers .plus { grid-row: 1; } } @media only screen and (max-width:680px) { .lens-colors-section h2.lens-colors-heading { padding-top: 60px; font-size: 24pt; transition: all 0.3s ease; } } .sfp { margin-top: 0px; position: relative; width: 100%; background: #fff; } .sfp img { width: 95%; max-width: 500px; display: block; margin: 0 auto; } @media only screen and (max-width:680px) { .sfp { background: #fff; margin-top: -50px; position: absolute; border-radius: 15px 15px 0px 0px; } .sfp img { max-width: 95%; display: block; margin: 0 auto; } } .lens-list { background: #fff; padding: 30px 0px; } .lens-list ul { column-count: 6; display: block; color: #272727; margin: 0 auto; padding: 30px; line-height: 2; max-width: 1200px; } .lens-list ul li a { color: #272727; } @media only screen and (max-width:749px) { .lens-list ul { column-count: 2; } } .lens-list ul.top-brands { background: #f9f9f9; border-radius: 10px; padding: 30px; margin-bottom: 50px; border: 1px solid #eee; column-count: 4; } .lens-list label { text-align: center; font-size: 10pt; font-weight: 600; color: #272727; margin-bottom: 20px; width: 200px; margin: auto; margin: 10px auto; padding: 5px; } #lens-colors { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; background: white; } #lens-colors .color-item { background: #fff; } @media only screen and (max-width:749px) { #lens-colors { grid-template-columns: 1fr 1fr; grid-gap: 5px; } #lens-colors .tab { padding: 5px; } #lens-colors .tab h6 { font-size: 16px; } } .TopMenuShop { background: url('/cdn/shop/t/179/assets/our-product-in-case-1.jpg?v=2313692072676045021') no-repeat 70% 50%; background-size: 70%; } /* Acordeon styles */ .tab { position: relative; margin-bottom: 1px; width: 100%; color: #222; font-family: 'Exo 2'; overflow: hidden; padding: 10px; } .tab input { position: absolute; opacity: 0; z-index: -1; } .tab label { position: relative; display: block; padding: 0 0 0 1em; background: #fff; border-bottom: 1px #e9e9e9 solid; font-weight: bold; line-height: 3; cursor: pointer; } .tab-content { max-height: 0; overflow: hidden; background: #fff; -webkit-transition: max-height 0.35s; -o-transition: max-height 0.35s; transition: max-height 0.35s; padding-bottom: 20px; } .tab-content p { font-size: 10pt; } .tab-content .shopbtn { padding: 5px 10px; border: 1px solid #aaa; border-radius: 3px; font-size: 12pt; text-transform: uppercase; } /* :checked */ .tab input:checked ~ .tab-content { max-height: 100vh; } /* Icon */ .tab label::after { position: absolute; right: 0; top: 0; display: block; width: 1em; height: 1em; line-height: 1; text-align: center; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } .tab input[type=checkbox] + label::after { content: "\25BC"; } .tab input[type=radio] + label::after { content: "\25BC"; } .tab input[type=checkbox]:checked + label::after { transform: rotate(180deg); } .tab input[type=radio]:checked + label::after { transform: rotateX(-180deg); } .yellow-angled { background: #fed10a; padding: 50px; text-align: center; position: relative; clip-path: polygon(50%, 0%, 100%, 0%); -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 68%); } @media only screen and (max-width:749px) { .yellow-angled { clip-path: polygon(50%, 0%, 100%, 0%); -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 78%); } } .yellow-angled h3 { font-weight: 600; } .yellow-angled .btn.green-btn { background-color: #3a6355; color: black; color: white; font-weight: 600; } .yellow-angled.reverse { background: #fed10a; padding: 100px 50px 50px; text-align: center; position: relative; clip-path: polygon(50%, 0%, 100%, 0%); -webkit-clip-path: polygon(0% 0%, 100% 24%, 100% 100%, 0% 100%); margin-bottom: -36px; display: grid; grid-template-columns: minmax(340px, 400px) minmax(340px, 400px); align-items: center; justify-content: center; } @media only screen and (max-width:749px) { .yellow-angled.reverse { grid-template-columns: 1fr; clip-path: polygon(50%, 0%, 100%, 0%); -webkit-clip-path: polygon(0% 0%, 100% 14%, 100% 100%, 0% 100%); } } .site-footer { color: white; background: #272727; margin: 0px 0 0; padding: 50px 0px; } .site-footer a { color: white; } .site-footer .payment-icon .icon { fill: #e2e2e2; width: 40px; height: 40px; } @media only screen and (max-width:749px) { .site-footer__linklist { text-align: left; } .site-footer__linklist .site-footer__linklist-item { display: block; } } .search--focus .search-header__input { border-color: transparent; } .search-bar__submit, .search-header__submit { padding: 0 0 0 15px; } .search-header__input { background: #272727; color: white; } .search-header__input::placeholder { color: #aaa; } .site-footer2 { color: white; background: #343434; margin: 0 0; padding: 30px 0px 30px; } .site-footer2 a { color: white; } .site-footer2 .payment-icon .icon { fill: #e2e2e2; width: 35px; height: 35px; } .custom-block-1 h1.page-title, .custom-block-1 h3.page-subtitle, .custom-block-1 p.page-preview { text-align: center; } .contact-section { display: grid; grid-template-columns: 1fr 1fr; } /* =============================================== // Reveal module // =============================================== */ .reveal .hidden { display: block !important; visibility: visible !important; } .product:hover .reveal img { opacity: 1; } .reveal { position: relative; } .reveal .hidden { position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .reveal:hover .hidden { z-index: 100000; opacity: 1; } .reveal .caption { position: absolute; top: 0; display: table; width: 100%; height: 100%; background-color: white; /* fallback for IE8 */ background-color: rgba(255, 255, 255, 0.7); font: 13px/1.6 sans-serif; text-transform: uppercase; color: #333; letter-spacing: 1px; text-align: center; text-rendering: optimizeLegibility; } .reveal .hidden .caption .centered { display: table-cell; vertical-align: middle; } @media (min-width:480px) and (max-width:979px) { .reveal .caption { font-size: 11px; } } @media only screen and (min-width:750px) { .main-content { padding-top: 0px; } span.out { color: #bbb; font-size: 13pt; } } .top-class { opacity: 1; transition: opacity 0.2s ease; } .top-class.hide-h2 { opacity: 0; transition: opacity 0.2s ease; } .brand-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 35px; } .brand-grid h1 span { font-size: 14pt; } .brand-grid .oakley-bg { background: url('/cdn/shop/t/179/assets/oakley-flak-compare_800x.jpg?v=706563020935420983') no-repeat center center; background-size: contain; } .brand-grid .ray-ban-bg { background: url('/cdn/shop/t/179/assets/rb-clubmaster-compare2_800x.jpg?v=13229737235818853609') no-repeat center center; background-size: contain; } @media only screen and (max-width:749px) { .brand-grid { display: grid; grid-template-columns: 1fr; margin-left: 0px; margin-bottom: 0px; } .brand-grid h1 { text-align: center; } .brand-grid p { text-align: center; padding: 10px; } .lens-grid h2 { text-align: center; } } header.header-hw .main-header .mbl_hamburger button { padding: 10px 15px 15px; margin: 10px 0 0; border-radius: 0px 10px 10px 0px; } header.header-hw .main-header .mbl_search_btn { display: none; } @media only screen and (max-width:749px) { header.header-hw .main-header .mbl_search_btn { display: block; } header.header-hw .main-header .mbl_search_btn .search-toggle { color: #222; padding: 20px 15px; background: transparent; border: none; margin: 0 0 0 auto; display: block; } header.header-hw .main-header .mbl_search_btn .search-toggle:after { content: ''; position: absolute; width: 0px; height: 0px; border-top: 0px solid transparent; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #ffffff; bottom: -6px; right: 62px; opacity: 0; transition: bottom 0.1s ease 0.3s, opacity 0.2s ease; } header.header-hw .main-header .mbl_search_btn .search-toggle:focus { outline: none; position: relative; } header.header-hw .main-header .mbl_search_btn .search-toggle:focus:after { content: ''; position: absolute; width: 0px; height: 0px; border-top: 0px solid transparent; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #444; bottom: -11px; left: 8px; opacity: 0; transition: bottom 0.2s ease 0.2s, opacity 0.2s ease 0.1s; } header.header-hw .main-header .mbl_search_btn .search-toggle.activeSearch:after { opacity: 1; transition: opacity 0.2s ease; } } @media only screen and (max-width:749px) { header.header-hw .main-header .logo-container .site-header__logo { padding: 0px 0px; margin: 5px 0 0; } header.header-hw .main-header .logo-container .site-header__logo img { max-width: 110px !important; margin: 0 auto; } } header.header-hw .main-header .mbl_cart a { padding: 10px 15px 15px; margin: 10px 0 0; border-radius: 10px 0px 0px 10px; } header.header-hw .main-header .mbl_cart #CartCountMbl { color: white; background-color: #f44336; } @media only screen and (max-width:749px) { header.header-hw .main-header .mbl_cart #CartCountMbl { top: 7px; left: 28px; } } header.header-hw .main-header .rest-of-menu .top { display: grid; grid-template-columns: auto 270px; background: #000000; grid-column: 1/3; } /* Replacement Lenses nav menu styles*/ /* Help -or- Right site nav*/ header.header-hw .main-header .rest-of-menu .top .site-nav { margin: 0px 0px; } header.header-hw .main-header .rest-of-menu .top .site-nav li { padding: 10px 0px; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown { background: #111; top: 47px; border: none; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown ul li { padding: 0px 0px; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu { background: #111; top: 84px; border: none; width: 100vw; position: fixed; left: 0px; } header.header-hw.animate .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu { background: #111; top: 47px; border: none; width: 100vw; position: fixed; left: 0px; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu.announce { top: 88px; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .rl-container { display: grid; max-width: 1200px; width: 100%; margin: 30px auto; grid-template-columns: 2fr 3fr; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .rl-container ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(12, 30px); } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .rl-container ul label { color: #fed10a; grid-column: 1/8; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .rl-container ul li a { color: white; font-style: normal; text-transform: none; font-weight: normal; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .rl-container ul li:hover { text-decoration: underline; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container { display: grid; margin: 0 auto; max-width: 1200px; grid-template-columns: auto 1fr 1fr; padding: 20px; grid-gap: 30px; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .install { background: #272727; padding: 0 0 0 0; display: grid; border-radius: 5px; padding-right: -3px; border: 1px solid #111; transition: border 0.25s ease; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .install:hover { border: 1px solid #fed10a; transition: border 0.25s ease; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .install a { padding: 0 0 0 0; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .install a img { border-radius: 5px 5px 0 0; width: 100%; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .install a p { color: White; font-style: normal; text-align: center; padding: 10px; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .content-links { display: grid; grid-gap: 30px; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .content-links .link-item { border-radius: 5px; background: #272727; border: 1px solid #111; transition: border 0.25s ease; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .content-links .link-item:hover { border: 1px solid #fed10a; transition: border 0.25s ease; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .content-links .link-item:hover a { text-decoration: underline; transition: all 0.25s ease; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .content-links .link-item a { line-height: 5; display: grid; grid-template-columns: 1fr 2fr; padding: 0 0 0 0; height: 100%; grid-gap: 20px; font-style: normal; color: white; text-decoration: none; transition: all 0.25s ease; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .content-links .link-item a img { height: auto; max-height: 130px; border-radius: 5px 0 0 5px; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .help-links ul { line-height: 3; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .help-links ul li h3 { font-size: 1.625em; text-transform: none; letter-spacing: 0; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .help-links ul li h3 svg { vertical-align: text-bottom; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .help-links ul li a { color: white; font-style: normal; } header.header-hw .main-header .rest-of-menu .top .site-nav .site-nav__dropdown.brands-topMenu .help-container .help-links ul li a:hover { text-decoration: underline; } header.header-hw .main-header .rest-of-menu .top .right { display: grid; grid-template-columns: 1fr auto; } header.header-hw .main-header .rest-of-menu .top .right .site-header__account { color: #fed10a; line-height: 25px; text-align: center; align-items: center; justify-items: right; background: transparent; border-radius: 30px; padding: 0 10px 5px; margin: 6px; display: inline-block; align-self: start; line-height: 30px; } header.header-hw .main-header .rest-of-menu .top .right .site-header__account.isCustomer { background: #222; } header.header-hw .main-header .rest-of-menu .top .right .site-header__account svg { vertical-align: middle; } header.header-hw .main-header .rest-of-menu .top .right .site-header__account #yourPoints { display: inline-block; } header.header-hw .main-header .rest-of-menu .top .right .site-header__account #yourPoints span { line-height: 28px; top: 2px; position: relative; font-size: 14px; color: white; font-weight: 600; } header.header-hw .main-header .rest-of-menu .top .right .site-nav__dropdown.brands-topMenu { background: #111; top: 84px; border: none; width: 100vw; position: fixed; left: 0px; } header.header-hw .main-header .rest-of-menu .top .right .site-nav__dropdown.brands-topMenu.announce { top: 88px; } header.header-hw .main-header .rest-of-menu .top .right .site-nav__dropdown.brands-topMenu .rl-container { display: grid; max-width: 1200px; width: 100%; margin: 30px auto; grid-template-columns: 2fr 3fr; } header.header-hw .main-header .rest-of-menu .top .right .site-nav__dropdown.brands-topMenu .rl-container ul { column-count: 5; line-height: 1.4; } header.header-hw .main-header .rest-of-menu .top .right .site-nav__dropdown.brands-topMenu .rl-container ul li a.site-nav__link { color: white; } header.header-hw .main-header .rest-of-menu .top .right .site-nav__dropdown.brands-topMenu .rl-container ul li:hover { text-decoration: underline; } .top-frames-bar { display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 -25px 30px -45px rgba(0, 0, 0, 0.0); margin: 35px 0px; padding: 20px 0px 10px; grid-column: 1/3; grid-row: 1; } .top-frames-bar .frame-group { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; } .top-frames-bar .frame-group h3 { grid-column: 1/6; font-size: 12pt; margin-bottom: 0px; text-transform: uppercase; letter-spacing: 2px; } .top-frames-bar .frame-group h3 span { letter-spacing: 0px; text-transform: none; font-size: 10pt; color: #aaa; } .top-frames-bar .frame-group .frame { padding: 5px; } .top-frames-bar .frame-group .frame a { font-size: 10pt; border: 1px solid transparent; display: block; padding: 8px 0px; border-radius: 5px; margin: 0 auto; max-width: 150px; transition: border 0.2s ease; } .top-frames-bar .frame-group .frame a:hover { border-color: #e2e2e2; transition: border 0.2s ease; } .top-frames-bar .frame-group .frame a svg { max-width: 70px; } .top-frames-bar .frame-group:first-child { border-right: 2px solid #f6f6f6; } @media only screen and (max-width:749px) { .top-frames-bar { grid-template-columns: 1fr; margin: 0 0; } } #shopify-section-plus-feature { margin-top: -35px; } #shopify-section-plus-feature .plus-video-feature { background: #0f0f0f; padding: 15vh; } #shopify-section-plus-feature .plus-video-feature iframe { display: block; margin: 0 auto; max-width: 100%; } #shopify-section-plus-feature .plus-feature { background: white url('/cdn/shop/t/179/assets/fuse-plus-lenses-bg-big_2800x.jpg?v=5243428155685829966') no-repeat 0% center; background-size: cover; display: grid; grid-template-columns: 3fr 4fr 1fr; } #shopify-section-plus-feature .plus-feature .content { grid-column: 2/3; padding-top: 35px; } #shopify-section-plus-feature .plus-feature .content h3 { margin-top: 100px; text-align: center; font-weight: 600; color: white; } #shopify-section-plus-feature .plus-feature .content p.section-sub { text-align: center; color: #e2e2e2; margin-bottom: 80px; } #shopify-section-plus-feature .plus-feature .content .item-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; } #shopify-section-plus-feature .plus-feature .content .item-grid .item { display: grid; grid-template-columns: 1fr 3fr; } #shopify-section-plus-feature .plus-feature .content .item-grid .item .text { color: white; } #shopify-section-plus-feature .plus-feature .content .item-grid .item .text p { color: white; } @media only screen and (max-width:749px) { #shopify-section-plus-feature .plus-video-feature { padding: 15px; } #shopify-section-plus-feature .plus-feature { grid-template-columns: 1fr; } #shopify-section-plus-feature .plus-feature .content .item-grid { grid-template-columns: 1fr; } #shopify-section-plus-feature .plus-feature .content .item-grid .item { grid-template-columns: 1fr 2fr; } } .grid-view-items { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .btn--secondary { border: none; line-height: 1.4; } .continue.btn--secondary { margin-right: 10px; } @media only screen and (max-width:749px) { .continue.btn--secondary { margin-right: unset; margin-bottom: 10px; } } .mobile-nav-wrapper.js-menu--is-open { z-index: 6; background-color: #222; } .mobile-nav-wrapper.js-menu--is-open .mobile-nav__item { border-bottom: 1px solid #000; } .mobile-nav-wrapper.js-menu--is-open .mobile-nav__item .btn--link { color: #fed10a; } .mobile-nav-wrapper.js-menu--is-open .mobile-nav__item a { color: #fed10a; } .mobile-nav-wrapper.js-menu--is-open .mobile-nav__item .mobile-nav__dropdown { background-color: #272727; } .mobile-nav-wrapper.js-menu--is-open .mobile-nav__item .mobile-nav__dropdown .mobile-nav__return { border-right: 1px solid #000; } .mobile-nav-wrapper.js-menu--is-open .mobile-nav__item .mobile-nav__dropdown .mobile-nav__sublist-header { color: #fed10a; background: #111; } .product-single__thumbnails-product-hw3 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; margin-left: 0px; } .per-pair { line-height: 5px; margin-top: -10px; display: inline; font-size: 9pt; font-weight: normal; text-transform: uppercase; text-align: right; } @media only screen and (max-width:749px) { .product-single__thumbnails-product-hw3 { grid-template-columns: 1fr; max-width: 300px; } .thumbnails-wrapper .thumbnails-slider__prev { left: -40px; } .thumbnails-wrapper .thumbnails-slider__next { right: -40px; } } .product-recap { margin: 12px; max-width: 400px; } .product-recap a { color: #0072ef; } .product-recap a:hover { text-decoration: underline; } .product-form__cart-submit, #show-bundles-bottom { margin: 0; max-width: 100%; box-shadow: 0px 0px 1px #f43838; transition: all 0.24s cubic-bezier(0.17, 0.67, 0.83, 0.67); background: #f43838; color: white; font-weight: 600; font-size: 16pt; letter-spacing: 3px; border-radius: 3px; text-shadow: 0 0 3px #ba3206; } .product-form__cart-submit:hover, #show-bundles-bottom:hover { box-shadow: 0 0 0 3px #f43838; border-radius: 6px; opacity: 1; transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .product-form__cart-submit:active, #show-bundles-bottom:active { box-shadow: 0 0 0 0px #f43838; border-radius: 14px; opacity: 1; outline: none; transition: all 0.2s ease; } .product-form__cart-submit:focus, #show-bundles-bottom:focus { opacity: 1; outline: none; } .product-form__cart-submit[disabled], #show-bundles-bottom.inactive { background-color: #272727; color: white; opacity: 0.9; text-shadow: none; } .product-form__cart-submit[disabled]:hover, #show-bundles-bottom.inactive:hover { box-shadow: none; } .cart-item__original-price { color: grey; } .cart-item__discount { color: #ff766c; font-style: italic; font-size: 90%; text-transform: uppercase; font-weight: 600; } .wf-cta { background: transparent; letter-spacing: 0px; text-transform: none; font-size: 16px; } .social-sharing { margin-top: 30px; } .main-content { padding-bottom: 35px; padding-top: 0px; margin-top: 80px; } .main-content.no-top-margin { margin-top: 0px; } .main-content.large-top-margin { margin-top: 120px; } @media only screen and (max-width:749px) { .main-content.large-top-margin { margin-top: 0px; } } .crowd-favs { background: #f1f1f1; text-align: center; padding: 55px 0px; } .four-reasons { margin: 30px auto; display: grid; grid-gap: 60px; justify-items: center; background: #f2f2f2; padding: 100px 0px; width: 100%; place-content: center; margin-bottom: 0px; } .four-reasons div.three-reasons-container { display: grid; grid-template-columns: repeat(3, minmax(80px, 375px)); grid-gap: 60px; } .four-reasons div { text-align: center; padding:24px;} .four-reasons img { max-height: 140px; margin-bottom: 20px; } .four-reasons h4 {font-weight: 600; font-size: 130%;margin-bottom:24px;} .four-reasons div a {text-decoration:underline;} .want-concierge { text-align: left; border-radius: 12px; background: #e2e2e2; padding: 24px; display: grid; grid-template-columns: 2fr 1fr; grid-column: 1/5; grid-gap: 24px; align-items: center; margin-top: 60px; /*margin-bottom: -160px;*/ z-index: 2; } .want-concierge div { text-align: left; } .want-concierge h3 { font-weight: 600; } .four-reasons .want-concierge div a {text-decoration:none;} @media only screen and (max-width:749px) { .four-reasons div.three-reasons-container {grid-template-columns:1fr;} .four-reasons { grid-template-columns: 1fr; padding: 24px 12px; } .want-concierge { grid-template-columns: 1fr; grid-column:1/2; margin: 0 0; grid-gap: 12px; } .want-concierge h3 { margin: 10px 0; } .want-concierge div { text-align: center; } } .diy-container { margin: 30px auto; display: grid; max-width: 1200px; grid-template-columns: 2fr 3fr; padding: 55px 0px; } .diy-container .diy-header { font-size: 36pt; text-transform: none; letter-spacing: normal; font-weight: 400; margin: 40px 0px; grid-column: 1/3; } .diy-container .diy-subheader { font-size: 22pt; text-transform: none; letter-spacing: normal; font-weight: 400; } .diy-container ol { margin-left: 30px; line-height: 1.2; } .diy-container ol li { list-style: decimal; margin-bottom: 20px; } .diy-container iframe { max-width: 100%; max-height: 400px; } @media only screen and (max-width:1199px) { .diy-container { margin: 30px 20px; } } @media only screen and (max-width:749px) { .main-content { margin-top: 0px; } .diy-container { grid-template-columns: 1fr; padding: 22px; grid-template-rows: auto auto auto; grid-auto-flow: column; } .diy-container .diy-header { font-size: 22pt; margin: 0px 0px; } .diy-container .diy-subheader { font-size: 16pt; } .diy-container .btn { display: block; margin: 0 auto; } } /************* Comparison Chart *************/ .lens-types { font-size: 36pt; text-transform: none; letter-spacing: 0px; text-align: center; margin: 150px 0 50px; } .comparison-chart { display: grid; grid-template-columns: 30% 1fr 1fr 1fr; grid-template-rows: 200px repeat(7, 70px); grid-gap: 10px; margin: 10px; grid-auto-flow: column; } .comparison-chart .logo-box { text-align: center; padding: 40px; } .comparison-chart .item { background: #efefef; position: relative; text-align: center; } .comparison-chart .item h6 { font-weight: bold; padding-top: 20px; text-align: center; } .comparison-chart .item h6 span { font-weight: 400; font-size: 90%; } .comparison-chart .item p { position: absolute; top: 20px; width: 100%; font-weight: 600; } .comparison-chart .item .check { position: absolute; width: 30px; height: 16px; background: transparent; box-shadow: -6px 6px #222; transform: rotateZ(-45deg); left: calc(50% - 15px); top: 10px; } .comparison-chart .item.c1 { background: #fed10a; text-align: center; } .comparison-chart .item.c2 { background: #fafafa; } .comparison-chart .item.c3 { background: #f4f4f4; text-align: center; } @media only screen and (max-width:749px) { .comparison-chart { grid-template-rows: 120px repeat(7, 70px); grid-gap: 3px; } .comparison-chart img { margin-top: 40px; } .comparison-chart .logo-box { padding: 10px; } .comparison-chart .item p { top: 5px; } .comparison-chart .item h6 { padding-top: 9px; } } .ddbrandsframes { background: #f9f9f9 url('/cdn/shop/t/179/assets/lenses-rl-bg-2.jpg?v=17638011499212737590') no-repeat center 100%; background-size: cover; padding: 50px 0px 200px; border-top: 2px solid #fed10a; } .ddbrandsframes h2 { font-size: 36pt; text-align: center; text-transform: none; letter-spacing: 0px; } .ddbrandsframes h2 span { font-size: 50%; } .ddbrandsframes .dynamic-selects { width: 100%; max-width: 600px; display: grid; grid-template-columns: 1fr 1fr; margin: 70px auto 150px; grid-gap: 40px; } .ddbrandsframes .dynamic-selects select { outline: none !important; padding: 13px; border-radius: 3px; } .ddbrandsframes .dynamic-selects select:nth-child(1) { background-color: #333; } .ddbrandsframes .dynamic-selects select:nth-child(2) { color: #222; } .ddbrandsframes p { text-align: center; } .howtofind { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(#f9f9f9, #f9f9f9 10%, #665289); padding: 60px; grid-gap: 60px; border-radius: 0 0px 20px 20px; } .howtofind a img { border-radius: 10px; box-shadow: 0 0 0 1px #f9f9f9; transition: all 0.25s ease; } .howtofind a img:hover { box-shadow: 0 0 0 1px #f1c40f; transition: all 0.25s ease; } .howtofind .item-full { background: white url('/cdn/shop/t/179/assets/lens-colors-angle-bg_1800x.jpg?v=14363062489415743530') no-repeat center center; background-size: cover; border-radius: 10px; grid-column: 0.3333333333; padding: 80px 30px; } .howtofind .item-full h3 { color: white; font-weight: 300; } .howtofind .item-full p { color: white; max-width: 400px; } .howtofind .item-full a { color: white; border: 1px solid white; padding: 10px 20px; border-radius: 3px; background: transparent; transition: all 0.3s ease; } .howtofind .item-full a:hover { background: white; color: blue; transition: all 0.3s ease; } .whatdowemean { padding: 150px 0; display: grid; grid-template-columns: 1fr 1fr; } .whatdowemean h2 { grid-column: 1/3; font-size: 36pt; letter-spacing: 0px; text-transform: none; text-align: right; } .whatdowemean .text { display: grid; grid-template-columns: 1fr 1fr; } .whatdowemean .text p { grid-column: 1/3; } .whatdowemean .text .item { text-align: center; } .whatdowemean .text .item i { font-size: 28pt; } .whatdowemean .text .item p { text-transform: uppercase; font-size: 13px; border-radius: 5px; box-shadow: 0 5px 13px -7px rgba(0, 0, 0, 0.3); padding-bottom: 20px; margin: 0 20px 20px 20px; line-height: 2; } .whatdowemean .text .btn { height: max-content; width: max-content; } .whatdowemean .video iframe { max-width: 100%; width: 100%; max-height: 400px; } .beforeafter { padding-bottom: 20px; } .beforeafter h1 { color: #222; text-transform: none; text-align: left; letter-spacing: 0px; padding-top: 55px; font-size: 36pt; } .beforeafter img { max-width: 100%; width: 600px; display: block; margin: 0; } .beforeafter p { max-width: 100%; width: 600px; line-height: 2; } .bottomba { width: 100%; height: 50px; background-color: #f1c40f; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } @media only screen and (max-width:749px) { .ddbrandsframes { background: #f9f9f9 url('/cdn/shop/t/179/assets/lenses-rl-bg.jpg?v=6483547622384025223') no-repeat center -18%; background-size: contain; } .ddbrandsframes h2 { font-size: 26pt; } .ddbrandsframes .dynamic-selects { width: inherit; max-width: 600px; display: grid; grid-template-columns: 1fr; margin: 70px 10px 20px; grid-gap: 20px; } .howtofind { padding: 20px; grid-gap: 20px; grid-template-columns: 1fr; } .howtofind .item-full { column-grid: 0.5; padding: 40px 30px; background-position: 7% 30%; } .beforeafter h1 { font-size: 26pt; padding-top: 0px; } .whatdowemean { grid-template-columns: 1fr; padding: 100px 0px; } .whatdowemean h2 { font-size: 26pt; text-align: center; grid-row: 1; } .whatdowemean .video { grid-row: 2; } .whatdowemean .video iframe { max-height: 220px; } .whatdowemean .text { grid-row: 3; } } .hiw-banner { width: 100vw; height: 30vh; margin-top: 0px; background: white url("/cdn/shop/t/179/assets/science-change-pick.jpg?v=7404198992352055072") no-repeat center 100%; background-size: cover; } @media only screen and (max-width:749px) { .hiw-banner { height: 20vh; } } .select-container { display: grid; grid-template-columns: 1fr 4fr; width: 100%; max-width: 400px; margin: 0 auto 0; background: #444; position: relative; border-radius: 3px; } .select-container svg { width: 80%; height: inherit; margin: 8px auto; fill: #f1c40f; } #string-brand { color: #f9f9f9; background-color: #272727; border: none; padding: 15px 30px; min-width: 250px; display: block; outline: none !important; transition: all 0.5s ease; } ul#string-type { list-style-type: none; display: grid; background: #f9f9f9; padding: 30px 50px 0px; margin-top: 30px; grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; border-radius: 3px; border: 1px solid #e2e2e2; margin: 0 60px; grid-template-rows: auto; opacity: 0; max-height: 600px; overflow-y: scroll; transition: all 0.3s ease; } ul#string-type li { height: 38px; line-height: 1.1; } ul#string-type.chosen { opacity: 1; padding: 80px 50px 100px; transition: all 0.3s ease; } .ds-container { position: relative; margin-bottom: 30px; } #seeAll { position: absolute; display: none; text-align: center; bottom: 0px; position: absolute; margin: 1px 61px; display: none; background: #f9f9f9; padding: 30px; width: calc(100% - 137px); } #seeAll a { padding: 15px 30px; background: #f1c40f; } #seeAll.chosen { display: block; } #bestSelling { position: absolute; margin: 1px 61px; display: none; background: #e8e8e8; padding: 0px; width: calc(100% - 137px); } #bestSelling p { font-weight: 600; } #bestSelling.chosen { display: block; } #closer { position: absolute; left: calc(50% + 210px); top: 8px; opacity: 0; } #closer.selected { opacity: 1; transition: all 0.3s ease; } @media only screen and (max-width:749px) { #closer { position: absolute; left: calc(0% + 40px); top: 78px; z-index: 3; opacity: 0; } #closer.selected { opacity: 1; transition: all 0.3s ease; } #string-brand { width: 100%; } ul#string-type { padding: 50px 10px 10px; overflow-x: scroll; grid-template-columns: repeat(10, 40vw); grid-auto-flow: column; box-shadow: inset -25px 0 55px -30px rgba(0, 0, 0, 0.23); margin: 0 0 0 0; } ul#string-type.chosen { grid-template-rows: repeat(6, 55px); } .ds-container { position: relative; } .ds-container #triangle { width: 0px; height: 0px; position: absolute; right: 28px; top: 50%; border-left: 15px solid rgba(0, 0, 0, 0.2); border-top: 20px solid transparent; border-bottom: 20px solid transparent; display: none; } .ds-container #triangle.shown { display: block; } } #vimeoUrl { width: 100%; } .shipping-savings-message { background-color: #f9ffe6; padding: 20px; text-align: center; margin-bottom: 25px; width: 100%; max-width: 1200px; margin: 25px auto; background: linear-gradient(90deg, #6f65c4, #4982c8); color: white; font-weight: 600; font-size: 22px; border-radius: 5px; } .shipping-savings-message span { color: #fff1ba; } @media only screen and (max-width:749px) { .shipping-savings-message { width: initial; padding: 10px; margin: 20px; margin-top: -14px; font-size: 16px; } } .medium-up__show { display: block; } @media only screen and (max-width:749px) { .medium-up__show { display: none; } } .medium-up__hide { display: none; } @media only screen and (max-width:749px) { .medium-up__hide { display: block; } } .breadcrumb span { margin: 0 6px; } /** Collection mods **/ #collection-grid { column-count: 5; font-size: 14px; padding: 0 20px 40px; padding: 80px 55px; border-radius: 24px; } #collection-grid.col-4 { column-count: 4; } #collection-grid a { line-height: 2; text-decoration: none; padding: 2px 12px; transition: all .2s ease; border-radius: 24px; box-shadow: 0 0 0 0 #f2f2f2; } #collection-grid a:hover { text-decoration: none; background: #f2f2f2; opacity: 1; border-radius: 12px; padding: 2px 12px; box-shadow: 0px 0px 0px 3px #f2f2f2; } @media only screen and (max-width:1079px) { #collection-grid { column-count: 4; } } @media only screen and (max-width:749px) { #collection-grid { column-count: 2; padding: 8px; border:0px; } #collection-grid li {margin-bottom:8px;} #collection-grid a {padding:2px 2px;line-height:1.6;} #collection-grid.col-4 { column-count: 2; } } .disclaimer-container { background: #f2f2f2; display: grid; place-content: center; padding: 3vw;padding-bottom:160px; } .disclaimer { display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.14); border-radius: 12px; margin-top: 55px; margin-bottom: 55px; max-width: 1400px; padding: 30px; grid-gap: 30px; background: white; } .disclaimer h3 { font-weight: 600; text-align: center; grid-column: 1/3; } .disclaimer .item { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 18px; } .disclaimer .item .text h4 { font-weight: 600; } .disclaimer section { text-align: center; grid-column: 1/3; } @media only screen and (max-width:749px) { .disclaimer { grid-template-columns: 1fr; padding: 40px 10px; grid-gap: 30px; } .disclaimer h3 { grid-column: 1/2; } .disclaimer section { grid-column: 1/2; } .disclaimer section p { font-size: 13px; } } #ff-popup { background: #f1c40f; position: fixed; left: 0px; z-index: 6; font-size: 14px; padding: 10px 30px 10px 10px; border-radius: 0px 5px 5px 0px; top: 35vh; transform: translateX(-100%); transition: all 0.3s ease; } #ff-popup h4 { margin-bottom: 5px; font-weight: 600; } #ff-popup #close { position: absolute; right: 0px; top: 0px; color: #f1c40f; background: #272727; line-height: 0.25; border-radius: 0px 5px 0px 0px; padding: 3px 4px 5px; } #ff-popup #close svg.icon { width: 13px; height: 13px; } #ff-popup .customlink { background: transparent; padding: 3px 11px 4px; color: #272727; border: 1px solid #272727; border-radius: 2px; position: relative; line-height: 26px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } #ff-popup.loaded { transform: translateX(0%); transition: all 0.5s ease; } #ff-popup.closed { display: none; } .vid-container { display: grid; grid-template-columns: 3fr 2fr; padding-bottom: 85px; } .vid-container .installation-header { display: inline; padding: 3px 10px; } .vid-container ol { padding-bottom: 10px; } #colHeader { margin-bottom: 0px; margin-top: 80px; } #colHeader.mBottom { margin-bottom: 153px; } @media only screen and (max-width:749px) { #colHeader { margin-bottom: 0px; margin-top: 40px; } } #filterfs { border-radius: 50px; text-align: left; margin-top: 0px; position: relative; margin: 0 5px 0 5px; padding: 0px 50px 0px 20px; border: none; background: none; padding-right: 0px; border: 2px solid #fed10a; display: grid; grid-template-columns: 30px auto; align-items: center; overflow: hidden; transition: all .2s ease; } #filterfs label { display: inline-block; margin-right: 0px; } .fixedfs { position: fixed; top: 0; padding: 0 0; left: 0px; margin: 0 0px; display: block; width: initial; width: 100%; max-width: 100%; } #filterFrames { outline: none !important; background: white; border: 0px; outline: none !important; background: white; padding: 10px 18px 10px 0; } .all-and-filter { display: grid; grid-template-columns: 1fr auto; margin-bottom: 20px; } .filters-toolbar__product-count { font-style: normal; } .top-frames { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 3px; margin-bottom: 50px; margin-top: 35px; transition: margin-bottom 0.2s ease; } .top-frames.margin-adjust { margin-bottom: 10px; transition: margin-bottom 0.2s ease; box-shadow: 0 12px 15px -20px rgba(0, 0, 0, 0.23); } .top-frames h2 { grid-column: 1/7; } .top-frames .frame { border: 0px solid #e2e2e2; padding: 5px; border-radius: 2px; text-align: center; height: 100%; width: calc(100% - 10px); transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease 0.1s; } .top-frames .frame a { font-size: 10pt; display: block; padding: 8px 0px; border-radius: 3px; margin: 0 auto; transition: border 0.2s ease; box-shadow: 0 0 0 2px #f2f2f2; } .top-frames .frame a:hover { border-color: #e2e2e2; transition: all 0.2s ease; opacity: 1; box-shadow: 0 0 0 4px #f2f2f2; background: #f2f2f2; border-radius: 1px; } .top-frames .frame a:active { box-shadow: 0 0 0 0 #f2f2f2; border-radius: 6px; transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .top-frames .frame a svg { max-width: 70px; } .top-frames .frame.hidden-frame { overflow: hidden; width: 0px; height: 0px; opacity: 0; transition: width 0.2s ease, height 0.2s ease, opacity 0.1s ease 0.1s; } #shopify-section-collection-tempalte .collection-header .section-header { margin-bottom: 30px; } .brand-breadcrumbs { margin-top: 0px; margin-bottom: 35px; background: #f6f6f6; border-bottom: 1px solid #f1f1f1; } .brand-breadcrumbs .steps-brand { display: grid; max-width: 1200px; margin: 0 auto 0; grid-template-columns: 2fr 3fr 2fr; background: #f6f6f6; padding: 5px; } .brand-breadcrumbs .steps-brand .step { text-align: center; padding: 5px; font-weight: 600; font-size: 10pt; } .brand-breadcrumbs .steps-brand .step.decided { color: #272727; box-shadow: inset 70px 25px #f6f6f6, inset 70px 27px #ddd; } .brand-breadcrumbs .steps-brand .step.decided p { color: #aaa; padding: 7px 20px; border-radius: 60px; margin: 0 auto; background: #f6f6f6; border: 2px solid #e2e2e2; width: fit-content; transition: all 0.4s ease; } .brand-breadcrumbs .steps-brand .step.decided p .words { display: block; } .brand-breadcrumbs .steps-brand .step.decided p .words span { font-weight: normal; } .brand-breadcrumbs .steps-brand .step.decided p .step-arrow { display: none; } .brand-breadcrumbs .steps-brand .step.decided a:hover p { color: #444; background: #fff; border-color: #ddd; transition: color 0.2s ease, border-color 0.2s ease, background 0.1s ease; } .brand-breadcrumbs .steps-brand .step.current { box-shadow: inset 0 25px #f6f6f6, inset 0 27px #ddd; } .brand-breadcrumbs .steps-brand .step.current p { color: #272727; background: white; border-radius: 60px; border: 2px solid #f1c40f; width: fit-content; margin: 0 auto; padding: 7px 35px; } .brand-breadcrumbs .steps-brand .step.undecided { box-shadow: inset -80px 25px #f6f6f6, inset -80px 27px #ddd; } .brand-breadcrumbs .steps-brand .step.undecided p { color: #aaa; padding: 7px; padding: 7px 20px; border-radius: 60px; margin: 0 auto; background: #f6f6f6; border: 2px solid #e2e2e2; width: fit-content; } .brand-breadcrumbs .steps-brand .step.undecided p .words { display: block; } .brand-breadcrumbs .steps-brand .step.undecided p .words span { font-weight: normal; } .brand-breadcrumbs .steps-brand .step.undecided p .step-arrow { display: none; } @media only screen and (max-width:749px) { .brand-breadcrumbs { margin-bottom: 10px; } .brand-breadcrumbs .steps-brand { grid-template-columns: 1fr 7fr 1fr; } .brand-breadcrumbs .steps-brand .step.decided { display: block; } .brand-breadcrumbs .steps-brand .step.decided p { padding: 7px; border-radius: 0px 60px 60px 0px; border: 2px solid #e2e2e2; transition: all 0.4s ease; border-left: 0px; margin: 0px -5px 0px -10px; } .brand-breadcrumbs .steps-brand .step.decided p .words { display: none; } .brand-breadcrumbs .steps-brand .step.decided p .step-arrow { display: block; margin: 2px 20px 2px 2px; width: 0px; height: 0px; border-top: 7px solid transparent; border-right: 10px solid #272727; border-left: 10px solid transparent; border-bottom: 7px solid transparent; } .brand-breadcrumbs .steps-brand .step.current { grid-column: 2/3; } .brand-breadcrumbs .steps-brand .step.undecided { display: block; box-shadow: inset -40px 25px #f6f6f6, inset -40px 27px #ddd; } .brand-breadcrumbs .steps-brand .step.undecided p { padding: 7px; border-radius: 60px 0px 0px 60px; border: 2px solid #e2e2e2; transition: all 0.4s ease; border-right: 0px; margin-right: -20px; } .brand-breadcrumbs .steps-brand .step.undecided p .words { display: none; } .brand-breadcrumbs .steps-brand .step.undecided p .step-arrow { display: block; margin: 2px 2px 2px 20px; width: 0px; height: 0px; border-top: 7px solid transparent; border-right: 10px solid transparent; border-left: 10px solid #e2e2e2; border-bottom: 7px solid transparent; } } .product-item-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } @media only screen and (max-width:749px) { .product-item-grid { grid-template-columns: 1fr 1fr; } } .what-frames { grid-gap: 40px; display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 55px; } .what-frames img { border-radius: 5px; border: 1px solid #ddd; } .getCustom { background: white; padding: 20px; border: 1px solid #e2e2e2; border-top: 2px solid #f1c40f; position: relative; margin: 55px 0px; border-radius: 2px; grid-gap: 20px; display: grid; grid-template-columns: 1fr 1fr; } .getCustom img { margin: 0 auto; display: block; width: 400px; max-width: 100%; } @media only screen and (max-width:749px) { .getCustom { grid-template-columns: 1fr; } .vid-container { grid-template-columns: 1fr; } #filterfs { margin-bottom: 15px; grid-column: 1/4; padding: 0px; text-align: center; } #filterfs label { margin-right: 0px; } #ff-popup { top: calc(100vh - 166px); } .fixedfs { position: fixed; top: 0; left: 0; padding: 0 0; } .fixedfs #filterfs { border-radius: 0px; padding: 10px 20px 20px; } .top-frames { grid-template-columns: repeat(3, 1fr); margin-left: 22px; margin-bottom: 25px; } .top-frames h2 { grid-column: 1/4; text-align: center; grid-row: 1; } .top-frames .frame { padding: 0px 3px 3px; } .what-frames { grid-gap: 10px; grid-template-columns: 1fr; } } #shopify-section-collection-for-cart { padding: 20px; border: 1px solid #e2e2e2; max-width: 1200px; margin: 25px auto 50px; border-radius: 10px; } #shopify-section-collection-for-cart .cart-collection .grid__item { padding-left: 20px; padding-right: 20px; } #shopify-section-collection-for-cart .cart-collection .grid__item .grid-view-item__title { font-size: 14px; height: fit-content; min-height: 35px; } #shopify-section-collection-for-cart .cart-collection .grid__item .grid-view-item__meta { display: grid; grid-template-columns: 1fr; } #shopify-section-collection-for-cart .cart-collection .grid__item .grid-view-item__meta .btn { padding: 7px 9px; } @media only screen and (max-width:749px) { #shopify-section-collection-for-cart { margin: 22px; } #shopify-section-collection-for-cart .page-width { padding: 10px; } #shopify-section-collection-for-cart .page-width h2 { text-align: center; } #shopify-section-collection-for-cart .page-width .cart-collection { margin: 0 -15px -35px; } #shopify-section-collection-for-cart .page-width .cart-collection .grid__item { padding: 0px; } #shopify-section-collection-for-cart .page-width .cart-collection .grid__item .grid-view-item__link { display: grid; grid-template-columns: 2fr 3fr; grid-gap: 10px; } #shopify-section-collection-for-cart .page-width .cart-collection .grid__item .grid-view-item__link .grid-view-item__image { display: block; margin: 0 auto 5px; grid-row: 0.3333333333; } #shopify-section-collection-for-cart .page-width .cart-collection .grid__item .grid-view-item__link .grid-view-item__title { margin-top: 15px; } #shopify-section-collection-for-cart .page-width .cart-collection .grid__item .grid-view-item__link .grid-view-item__meta { grid-template-columns: 1fr; margin-top: 0px; } .cart__footer { padding-top: 5px; } .cart__footer .grid__item { display: grid; } .cart__footer .grid__item .cart__subtotal-title { float: left; } .cart__footer .grid__item .cart__subtotal { float: right; } .cart__footer .grid__item .cart__savings { grid-row: 1; text-align: left; color: #ff655a; border-bottom: 1px solid #e2e2e2; margin-bottom: 5px; padding-bottom: 5px; } .cart__footer .grid__item .cart__savings .cart__savings-amount { float: right; } .cart__footer .grid__item .cart__shipping { text-align: right; font-style: normal; color: grey; margin: 0 0 10px; } .cart__footer .grid__item .btn { padding: 15px; } .cart__footer .idme-shopify { border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding-bottom: 10px; margin-bottom: 0px; } } .shopByColor { grid-column: 1/3; grid-row: 3; } .shopByColor .dropdown .topDrop { margin: 0 0; } .shopByColor .select-container { margin: 0 0; } .shopByColor .dropdown-content #brandsDropdown.selected { grid-template-rows: none; display: block; padding: 0px 0px 0px 20px; position: absolute; width: 100%; background: transparent; top: -98px; left: calc(90px); border-radius: 3px; height: 50px; } .shopByColor ul#string-type.chosen { max-width: 200%; width: 200%; margin: 0 0 0 0; } .clbl-text { grid-column: 1/3; display: grid; padding-top: 50px; grid-gap: 40px; } .icons-section { grid-column: 1/3; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; text-align: center; padding: 50px 35px 150px; grid-gap: 40px; } .icons-section h2 { text-align: center; grid-column: 1/5; } .icons-section img { max-width: 180px; } .icons-section p span { font-size: 36pt; font-weight: 800; } .icons-section .span-4 { grid-column: 1/5; } .icons-section .span-4 a { width: fit-content; border: 2px solid #222; padding: 10px 20px; border-radius: 2px; } .bis-reset { display: none; } #BIS_trigger { margin-top: 0px; margin-left: 0px; max-width: 400px; width: 100% !important; background: white; color: #272727; font-weight: 600; font-size: 10pt; letter-spacing: 1px; border: 1px solid #272727; border-radius: 3px; } @media only screen and (max-width:749px) { #BIS_trigger { margin-top: 0px; margin-left: 0px; background: white; color: #272727; font-weight: 600; font-size: 10pt; letter-spacing: 1px; border: 1px solid #272727; border-radius: 3px; margin: 0 auto; display: block; } } .dropbtn { background-color: #272727; color: white; padding: 16px 6px 16px 13px; width: 100%; font-size: 16px; border: none; cursor: pointer; outline: none !important; position: relative; border-radius: 2px; } .dropbtn:hover { background-color: #333; outline: none !important; } .dropbtn:focus { background-color: #333; outline: none !important; } .topDrop { margin: 0 auto; text-align: center; background: #444; border-radius: 3px 3px; width: 100%; display: grid; grid-template-columns: 1fr 4fr; max-width: 330px; position: relative; align-items: center; } .topDrop svg { width: 80%; height: inherit; margin: 10px auto; fill: #f1c40f; } .topDrop.topbarDrop { margin: 0 0; } .shopByColor .dropdown .topDrop { box-shadow: 0 0 0 2px #f2f2f2; } .arrow { height: 10px; width: 10px; position: absolute; background: transparent; box-shadow: -2px 2px #f1c40f; transform: rotateZ(-45deg); transition: all 0.15s ease-in-out; right: 16px; top: 15px; } .rotate { transform: rotateZ(135deg); top: 24px; transition: all 0.35s ease-in-out; } #myInput { border-box: box-sizing; background-image: none; background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; border: none; text-align: left; display: block; margin: 0; box-shadow: inset 0 0 0 3px #444; } #myInput::placeholder { color: #f9f9f9; } #myInput:focus { outline: 2px solid #ddd; } #myInput.chosen { margin: 50px auto 3px; } #myInputTB { border-box: box-sizing; background-image: none; background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; border: none; text-align: left; display: block; margin: 0; box-shadow: inset 0 0 0 3px #444; } #myInputTB::placeholder { color: #f9f9f9; } #myInputTB:focus { outline: 2px solid #ddd; } #myInputTB.chosen { margin: 50px auto 3px; } .dropdown { position: relative; display: block; margin-bottom: 0px; } .dropdown a:hover { background-color: #ddd; } .dropdown-content { display: none; position: relative; background-color: white; min-width: 230px; border: 1px solid #e2e2e2; z-index: 11; transition: all 0.3s ease; } .dropdown-content .no-results { max-width: 800px; padding: 10px; display: block; margin: 0 auto; } .dropdown-content .no-results p{line-height:12px;} .dropdown-content .no-results a.primary{line-height:24px;} .dropdown-content .no-results h5 { font-weight: 600;margin-bottom:4px; } .dropdown-content .no-results .search-disclaimer { display: grid;grid-template-columns:auto 90px; border-radius: 4px; border: 2px dashed #e2e2e2; padding: 8px; background: #f6f6f6; } .dropdown-content .no-results .search-disclaimer label {font-weight:400;text-align:left;line-height:1.2;} .dropdown-content .no-results .search-disclaimer .cant-cut-for { display: grid; grid-template-columns: auto 1fr; align-items: center; } .dropdown-content .no-results .search-disclaimer .type-1, .dropdown-content .no-results .search-disclaimer .type-2 { display: grid; grid-template-columns: 1fr; grid-gap: 4px; padding: 2px; line-height: 1.2; place-content: center; justify-content: center; justify-items: center; align-items: center; } .dropdown-content .no-results .search-disclaimer svg {width:40px;} .dropdown-content .no-results .search-disclaimer .cant-cut-for .examples { display: flex; line-height:1.6; } .dropdown-content .no-results .search-disclaimer .cant-cut-for .examples label { margin-right: 10px; font-style: italic; padding: 3px; color: #888; } .dropdown-content .no-results .search-disclaimer .cant-cut-for .examples li { display: inline-flex; margin-right: 20px; background: white; padding: 3px 15px; border-radius: 2px; box-shadow: 0 2px 3px -1px #e2e2e2; font-style: italic; } @media only screen and (max-width:749px) { #disclaimer-examples label {line-height:1.6;} ul.topbar.right .cant-cut-for svg {width:50px;} .dropdown-content .no-results .search-disclaimer .cant-cut-for .examples li {margin-right:6px;padding:3px 6px;} .dropdown-content .no-results .search-disclaimer .cant-cut-for .examples label {display:none;} .dropdown-content .no-results .search-disclaimer .cant-cut-for .type-1, .dropdown-content .no-results .search-disclaimer .cant-cut-for .type-2 { display: grid; grid-template-columns: 1fr; grid-gap: 0px; padding: 4px; place-content: start; align-items: center; } } .dropdown-content #brandsDropdown { list-style-type: none; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 110px; grid-auto-flow: row; padding: 20px; height: 110px; overflow: hidden; width: 100%; margin: 0 auto; max-width: 900px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-content #brandsDropdown a { color: black; padding: 10px 0px; text-decoration: none; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 6px 4px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; } .dropdown-content #brandsDropdown a:hover { background: #f8f8f8; box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .dropdown-content #brandsDropdown a:active { background: #f1f1f1; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.53); transition: all 0.2s ease; } .dropdown-content #brandsDropdown.hidden { height: 0px; padding: 0px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-content #brandsDropdown.selected { grid-template-rows: none; display: block; padding: 0px 0px 0px 20px; position: absolute; width: 100%; background: transparent; top: -98px; left: calc(50% - 90px); border-radius: 3px; height: 50px; } .dropdown-content #brandsDropdown.selected li { display: none; position: relative; transition: all 0.3s ease; } .dropdown-content #brandsDropdown.selected li#selected { display: block !important; position: relative; transition: all 0.3s ease; background: #444; color: #fff; position: absolute; width: 192px; text-align: center; } .dropdown-content #brandsDropdown.selected li#selected a#aSelect { color: white; display: block !important; top: 0px; transition: top 0.5s ease; background: transparent; box-shadow: none; margin: -1px; } .dropdown-content #brandsDropdownHero { list-style-type: none; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 110px; grid-auto-flow: row; padding: 20px; height: 110px; overflow: hidden; width: 100%; margin: 0 auto; max-width: 900px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-content #brandsDropdownHero a { color: black; padding: 10px 0px; text-decoration: none; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 6px 4px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; } .dropdown-content #brandsDropdownHero a:hover { background: #f8f8f8; box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .dropdown-content #brandsDropdownHero a:active { background: #f1f1f1; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.53); transition: all 0.2s ease; } .dropdown-content #brandsDropdownHero.hidden { height: 0px; padding: 0px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-content #brandsDropdownHero.selected { grid-template-rows: none; display: block; padding: 0px 0px 0px 20px; position: absolute; width: 100%; background: transparent; top: -98px; left: calc(50% - 90px); border-radius: 3px; height: 50px; } .dropdown-content #brandsDropdownHero.selected li { display: none; position: relative; transition: all 0.3s ease; } .dropdown-content #brandsDropdownHero.selected li#selected { display: block !important; position: relative; transition: all 0.3s ease; background: #444; color: #fff; position: absolute; width: 192px; text-align: center; } .dropdown-content #brandsDropdownHero.selected li#selected a#aSelect { color: white; display: block !important; top: 0px; transition: top 0.5s ease; background: transparent; box-shadow: none; margin: -1px; } .dropdown-content #brandsDropdownTB { list-style-type: none; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 110px; grid-auto-flow: row; padding: 20px; height: 110px; overflow: hidden; width: 100%; margin: 0 auto; max-width: 900px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-content #brandsDropdownTB a { color: black; padding: 10px 0px; text-decoration: none; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 6px 4px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; } .dropdown-content #brandsDropdownTB a:hover { background: #f8f8f8; box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .dropdown-content #brandsDropdownTB a:active { background: #f1f1f1; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.53); transition: all 0.2s ease; } .dropdown-content #brandsDropdownTB.hidden { height: 0px; padding: 0px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-content #brandsDropdownTB.selected { grid-template-rows: none; display: block; padding: 0px 0px 0px 20px; position: absolute; width: 100%; background: transparent; top: -98px; left: calc(27% - 90px); border-radius: 3px; height: 50px; } .dropdown-content #brandsDropdownTB.selected li { display: none; position: relative; transition: all 0.3s ease; } .dropdown-content #brandsDropdownTB.selected li#selected { display: block !important; position: relative; transition: all 0.3s ease; background: #444; color: #fff; position: absolute; width: 192px; text-align: center; } .dropdown-content #brandsDropdownTB.selected li#selected a#aSelect { color: white; display: block !important; top: 0px; transition: top 0.5s ease; background: transparent; box-shadow: none; margin: -1px; } .dropdown-content #brandsDropdownTB.no-res { grid-template-rows: 0px; grid-auto-flow: row; padding: 0px; height: 0px; } .dropdown-content #framesDropdown { list-style-type: none; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; padding: 20px; max-height: inherit; overflow: hidden; } .dropdown-content #framesDropdown label { grid-column: 1/7; } .dropdown-content #framesDropdown a { color: black; padding: 10px 0px; text-decoration: none; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 6px 4px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; } .dropdown-content #framesDropdown a:hover { background: #f8f8f8; box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .dropdown-content #framesDropdown a:active { background: #f1f1f1; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.53); transition: all 0.2s ease; } .dropdown-content #framesDropdownTB { list-style-type: none; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; padding: 0px; max-height: inherit; overflow: hidden; } .dropdown-content #framesDropdownTB label { grid-column: 1/7; } .dropdown-content #framesDropdownTB a { color: black; padding: 10px 0px; text-decoration: none; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 6px 4px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; } .dropdown-content #framesDropdownTB a:hover { background: #f8f8f8; box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .dropdown-content #framesDropdownTB a:active { background: #f1f1f1; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.53); transition: all 0.2s ease; } .rest-of-menu .search .dropdown-content { position: absolute; width: 100vw; left: calc(-100vw / 6); background-color: white; min-width: 230px; border: 1px solid #e2e2e2; z-index: 1; } @media only screen and (max-width:749px) { .rest-of-menu .search .dropdown-content { left: -3px; } .rest-of-menu .search.reveal .dropdown-content { display: block; } .icons-section { grid-column: 1/3; display: grid; grid-template-columns: 1fr; text-align: center; padding: 50px 5px 150px; grid-gap: 10px; } .icons-section img { max-width: 140px; } .icons-section h2 { grid-column: 1/3; } .icons-section p span { font-size: 26pt; } .icons-section .span-4 { grid-column: 1/3; margin-top: 50px; } } .show { display: block; transition: all 0.3s ease; } .showMe { display: block; transition: all 0.3s ease; } .dropdown-content.show { position: absolute; } #myDropdownHero.dropdown-content.show { top: 80px; } #submittedBrand { color: white; } #reset { position: absolute; top: 17px; right: 13px; z-index: -2; height: 20px; line-height: 0.025; width: 20px; opacity: 0; background: #383838; border-radius: 20px; } #reset svg { fill: #f1c40f; margin: 0px; width: 12px; position: relative; top: -1px; } #reset.visible { opacity: 1; z-index: 2; } #resetHero { position: absolute; top: 17px; right: 13px; z-index: -2; height: 20px; line-height: 0.025; width: 20px; opacity: 0; background: #383838; border-radius: 20px; } #resetHero svg { fill: #f1c40f; margin: 0px; width: 12px; position: relative; top: -1px; } #resetHero.visible { opacity: 1; z-index: 2; } #resetTB { position: absolute; top: 17px; right: 13px; z-index: -2; height: 20px; line-height: 0.025; width: 20px; opacity: 0; background: #383838; border-radius: 20px; } #resetTB svg { fill: #f1c40f; margin: 0px; width: 12px; position: relative; top: -1px; } #resetTB.visible { opacity: 1; z-index: 2; } #closeX { position: absolute; top: 0; right: 0px; z-index: -2; height: 100%; width: 30px; border-radius: 0 3px 3px 0; opacity: 0; background: #5b5b5b; } #closeX svg { fill: #e2e2e2; margin: 0px; width: 20px; } #closeX.visible { opacity: 1; z-index: 2; right: -28px; } #closeXHero { position: absolute; top: 0; right: 0px; z-index: -2; height: 100%; width: 30px; border-radius: 0 3px 3px 0; opacity: 0; background: #5b5b5b; } #closeXHero svg { fill: #e2e2e2; margin: 0px; width: 20px; } #closeXHero.visible { opacity: 1; z-index: 2; right: -28px; } #closeXTB { position: absolute; top: 0; right: 0px; z-index: -2; height: 100%; width: 30px; border-radius: 0 3px 3px 0; opacity: 0; background: #5b5b5b; } #closeXTB svg { fill: #e2e2e2; margin: 0px; width: 20px; } #closeXTB.visible { opacity: 1; z-index: 2; right: -28px; } #guide-content { padding: 20px; display: grid; grid-template-columns: 2fr 2fr; margin: 0 auto; max-width: 1350px; } #guide-content img { border: solid 0px #ddd; border-radius: 3px; } #guide-contentHero { padding: 20px; display: grid; grid-template-columns: 2fr 2fr; margin: 0 auto; max-width: 1350px; } #guide-contentHero img { border: solid 0px #ddd; border-radius: 3px; } #guide-contentTB { padding: 20px; display: grid; grid-template-columns: 2fr 2fr; margin: 0 auto; max-width: 1350px; } #guide-contentTB img { border: solid 0px #ddd; border-radius: 3px; } #topDropFrames { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; padding: 20px; } #topDropFrames h2 { padding-left: 0px; grid-column: 1/3; margin-bottom: 0px; font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.1em; } #topDropFrames .top-opt { list-style-type: none; } #topDropFrames .top-opt li { list-style-type: none; } #topDropFrames .top-opt li a { color: black; padding: 6px 10px; text-decoration: none; font-weight: normal; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 3px 4px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; width: initial; display: inline-block; transition: all 0.15s ease; } #topDropFrames .top-opt li a:hover { background: #f8f8f8; box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } #topDropFrames .top-opt li a:active { background: #f1f1f1; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } #topDropFrames .item a { font-weight: 600; } #topDropFrames .item a span { font-weight: normal; color: #888; } #topDropFrames .item a:hover { text-decoration: underline; } #topDropFramesHero { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; padding: 20px; } #topDropFramesHero h2 { padding-left: 0px; grid-column: 1/3; margin-bottom: 0px; font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.1em; } #topDropFramesHero .top-opt { list-style-type: none; } #topDropFramesHero .top-opt li { list-style-type: none; } #topDropFramesHero .top-opt li a { color: black; padding: 6px 10px; text-decoration: none; font-weight: normal; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 3px 4px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; width: initial; display: inline-block; transition: all 0.15s ease; } #topDropFramesHero .top-opt li a:hover { background: #f8f8f8; box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } #topDropFramesHero .top-opt li a:active { background: #f1f1f1; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } #topDropFramesHero .item a { font-weight: 600; } #topDropFramesHero .item a span { font-weight: normal; color: #888; } #topDropFramesHero .item a:hover { text-decoration: underline; } #topDropFramesTB { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; padding: 20px; } #topDropFramesTB h2 { padding-left: 0px; grid-column: 1/3; margin-bottom: 0px; font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.1em; } #topDropFramesTB .top-opt { list-style-type: none; } #topDropFramesTB .top-opt li { list-style-type: none; } #topDropFramesTB .top-opt li a { color: black; padding: 6px 10px; text-decoration: none; font-weight: normal; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 3px 4px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; width: initial; display: inline-block; transition: all 0.15s ease; } #topDropFramesTB .top-opt li a:hover { background: #f8f8f8; box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } #topDropFramesTB .top-opt li a:active { background: #f1f1f1; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } #topDropFramesTB .item a { font-weight: 600; } #topDropFramesTB .item a span { font-weight: normal; color: #888; } #topDropFramesTB .item a:hover { text-decoration: underline; } .topDropGuide { border: 1px solid #e2e2e2; border-top: 2px solid #f1c40f; border-radius: 2px; padding: 20px; } .topDropGuide h3 { font-weight: 600; text-align: center; font-size: 16px; line-height: 1.8; } .topDropGuide h3 span { font-weight: 400; font-size: 90%; margin-left: 15px 0ox; color: grey; letter-spacing: 0px; text-transform: none; color: #272727; padding: 5px 0px; display: block; border-radius: 2px; line-height: 1; width: 100%; text-align: center; } .topDropGuide h3 span a { text-align: center; } .topDropGuide h3 span a:hover { text-decoration: underline; } @media only screen and (max-width:749px) { .topDropGuide {display:none;} #closeX.visible { right: 0px; } #closeXHero.visible { right: 0px; } #reset { right: 43px; } #myInput { padding-left: 21px; } #resetHero { right: 43px; } #myInputHero { padding-left: 21px; } #closeXTB.visible { right: 0px; } #resetTB { right: 43px; } #myInputTB { padding-left: 21px; } .dropdown-content ul#brandsDropdown { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; padding: 10px; height: 178px; grid-template-rows: 80px 80px; } .dropdown-content ul#brandsDropdown a { color: black; padding: 12px 0px; text-decoration: none; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 2px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; } .dropdown-content ul#brandsDropdown.selected { padding: 0px; } .dropdown-content #framesDropdown { grid-template-columns: repeat(2, 1fr); } .dropdown-content ul#brandsDropdownHero { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; padding: 10px; height: 178px; grid-template-rows: 80px 80px; } .dropdown-content ul#brandsDropdownHero a { color: black; padding: 12px 0px; text-decoration: none; display: block; position: relative; top: 6px; background: #f5f5f5; margin: 2px; border-radius: 3px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); text-align: center; } .dropdown-content ul#brandsDropdownHero.selected { padding: 0px; } .dropdown-content #framesDropdownHero { grid-template-columns: repeat(2, 1fr); } #guide-content { padding: 10px; display: grid; grid-template-columns: 1fr; } #guide-content #topDropFrames { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; padding: 10px; } #guide-content #topDropFrames h2.bSellers { font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.1em; } #guide-content .topDropGuide h2 { text-align: center; } #guide-content .topDropGuide h2 span { text-align: center; border: 1px solid #e2e2e2; padding: 10px; width: fit-content; margin: 0 auto; } .dropdown-content ul#brandsDropdownTB { grid-template-columns: repeat(2,1fr); grid-auto-flow: row; padding: 0px; height: 178px; grid-template-rows: 55px 55px 55px; } .dropdown-content ul#brandsDropdownTB a { color: #000; padding: 6px 0; text-decoration: none; display: block; position: relative; top: 0px; background: #f5f5f5; margin: 2px; border-radius: 8px; box-shadow: 0 2px 2px -2px #0000004d; text-align: center;} .dropdown-content ul#brandsDropdownTB.selected { padding: 0px; } .dropdown-content #framesDropdownTB { grid-template-columns: repeat(2, 1fr); } #guide-contentTB { padding: 10px; display: grid; grid-template-columns: 1fr; } #guide-contentTB #topDropFramesTB { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px; padding: 0px; } #guide-contentTB #topDropFramesTB h2.bSellers { font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.1em; } #guide-contentTB .topDropGuide h2 { text-align: center; } #guide-contentTB .topDropGuide h2 span { text-align: center; border: 1px solid #e2e2e2; padding: 10px; width: fit-content; margin: 0 auto; } } .modally { display: none; position: absolute; background: white; padding: 50px; width: 90%; max-width: 800px; height: inherit; z-index: 10003; left: calc(50%); transform: translateX(-50%); top: 9vh; box-shadow: 0 0 300px 0px rgba(0, 0, 0, 0.25); } .modally.selectSize { display: block; } .modally .which-size { margin-top: 25px; line-height: 4; text-align: center; } .modally .which-size li { display: inline-block; } .modally .which-size li a { color: #222; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #ddd; margin-right: 10px; background: #f9f9f9; box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.25); transition: all 0.2s ease; } .modally .which-size li a:hover { box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.125); transition: all 0.25s ease; } .modally .closely { position: absolute; right: 50px; top: 30px; } .modally .image-pair { display: grid; grid-template-columns: 1fr 1fr; } .modally .image-pair svg { max-width: 200px; margin: 40px; } .modally h2 { text-align: center; font-size: 17px; font-weight: 600; letter-spacing: 1px; } .modally svg { max-width: 170px; margin: 0 auto; display: block; } .modally.tfModal { position: fixed; } .modally#all-brands { max-width: 1400px; position: fixed; display: none; justify-items: center; grid-gap: 10px; } .modally#all-brands.selectSize { display: grid; } .modally#all-brands img { max-width: 150px; } .modally#all-brands ul { column-count: 6; line-height: 2.2; } .modally#fuse-frames-signup { max-width: 1400px; position: fixed; display: none; justify-items: center; grid-gap: 10px; } .modally#fuse-frames-signup.selectSize { display: grid; } .modally#fuse-frames-signup img { max-width: 150px; } @media only screen and (max-width:1080px) { .modally#all-brands ul { column-count: 4; } } @media only screen and (max-width:749px) { .modally { padding: 20px; width: 90%; height: fit-content; z-index: 10003; left: calc(50%); transform: translateX(-50%); top: 1vh; box-shadow: 0 0 300px 0px rgba(0, 0, 0, 0.25); min-height: 60vh; } .modally h2 { margin-top: 30px; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: 1px; } .modally svg { max-width: 130px; margin: 0 auto; display: block; } .modally img { max-width: 49%; } .modally .image-pair img { max-width: 99%; } .modally .image-pair svg { margin: 5px; } .modally .which-size { margin-top: -5px; } .modally .closely { right: 30px; top: 14px; } .modally#all-brands { position: absolute; } .modally#all-brands img { max-width: 150px; } .modally#all-brands ul { column-count: 2; } .modally#fuse-frames-signup { max-width: 1400px; position: fixed; display: none; justify-items: center; grid-gap: 10px; } .modally#fuse-frames-signup.selectSize { display: grid; } .modally#fuse-frames-signup img { max-width: 150px; } } .whats-it-cost { display: grid; grid-template-columns: 2fr 3fr; border: 1px solid #e2e2e2; border-top: 2px solid #f1c40f; border-radius: 2px; } .whats-it-cost .text-img { padding: 60px 0; max-width: 500px; } .custom-disclaimer { background: #f6f6f6; padding: 20px; /* color: #aaa; */ border: 1px solid #e2e2e2; } .custom-steps { padding: 55px 0px; display: grid; grid-template-columns: 1fr; grid-gap: 10px; margin: 0 auto; max-width: 800px; } .custom-steps .step { display: grid; grid-template-columns: 1fr 3fr; margin-bottom: 0px; } .custom-steps .step i { display: block; margin: 0 auto; font-size: 48pt; } .custom-steps .step .text { display: grid; grid-template-columns: 1fr 4fr; padding-top: 50px; } .custom-steps .step .text .number { text-align: center; } .custom-steps .step .text .number h3 { font-size: 46pt; font-weight: 600; } .custom-steps .step .text .step-text h4 { font-weight: 600; margin-top: 10px; font-size: 22px; } .custom-steps a.btn { max-width: 300px; margin: 20px auto; } @media only screen and (max-width:749px) { .whats-it-cost { grid-template-columns: 1fr; } .whats-it-cost .text-img { padding: 10px; max-width: 100%; } .custom-steps .step { grid-template-columns: 1fr 3fr; } .custom-steps .step .text { padding-top: 20px; } .custom-steps .step .text .number h3 { font-size: 30pt; padding-top: 10px; } } .dbl-check .check-item h3 { text-align: center; margin-top: 55px; } .dbl-check .check-item p { text-align: center; margin-bottom: 30px; } @media only screen and (min-width:750px) { body.template-collection #PageContainer.page-container { -webkit-transform: none; transform: none; } } .product-form__item.hide-hw { opacity: 1; position: relative; left: 0; display: block; width: 100%; } #ProductSelect-product-hw3 { display: list-item; } .js-open-modal { margin-left: 50px; font-size: 14px; letter-spacing: 0px; color: grey; } .js-open-modal.blue-link { float: right; font-size: 16px; color: #0072ef; } @media only screen and (max-width:549px) { .js-open-modal { margin-left: 16px; font-size: 14px; letter-spacing: 0px; color: grey; } } .hwmodal { display: none; border-radius: 3px; position: fixed; top: 50px; left: 50%; transform: translate(-50%); background: #fff; width: 100%; overflow-y: scroll; z-index: 9; height: calc(100% - 90px); max-width: 820px; max-height: 820px; text-align: center; border-top: 2px solid #f1c40f; box-sizing: border-box; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .2); } .hwmodal.visible { display: block; } .hwmodal h2.lens-types { display: none; } .hwmodal .comparison-chart { grid-template-columns: 30% 1fr 1fr 1fr; grid-template-rows: 160px repeat(7, 60px); } .hwmodal .comparison-chart .item h6 { padding-top: 14px; } .hwmodal__header { color: #272727; font-weight: bold; background: #fff; line-height: 50px; text-align: center; position: relative; height: 50px; box-sizing: border-box; } .hwmodal__header a { position: absolute; top: 10px; right: 10px; text-decoration: none; color: white; border-radius: 25px; font-weight: bold; display: block; font-size: 12px; padding-left: 1px; line-height: 19px; background: #555; height: 20px; width: 20px; } @media only screen and (max-width:749px) { .hwmodal .comparison-chart { grid-template-columns: 135px 1fr 1fr 1fr; grid-template-rows: 120px repeat(7, 60px); } .hwmodal .comparison-chart .item h6 { padding-top: 10px; } .hwmodal .comparison-chart .item .check { position: absolute; width: 20px; height: 12px; background: transparent; box-shadow: -4px 4px #222; transform: rotateZ(-45deg); left: calc(50% - 15px); top: 5px; } } /* warranty modal */ .jswnty-open-modal, .guarantee-open-modal { font-size: 12pt; letter-spacing: 0px; color: #0072ef; } .jswnty-open-modal:hover, .guarantee-open-modal:hover { text-decoration: underline; } @media only screen and (max-width:549px) { .jswnty-open-modal, .guarantee-open-modal { font-size: 12pt; letter-spacing: 0px; color: #0072ef; } .jswnty-open-modal:hover, .guarantee-open-modal:hover { text-decoration: underline; } } .grntmodal { display: none; border-radius: 3px; position: fixed; top: 50px; left: 50%; transform: translate(-50%); background: #fff; width: 100%; overflow-y: scroll; z-index: 9; height: calc(100% - 90px); max-width: 820px; max-height: 820px; height: fit-content; padding-bottom: 20px; text-align: center; border-top: 2px solid #f1c40f; box-sizing: border-box; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .2); } .grntmodal.visible { display: block; } .grntmodal .grntmodal__header { color: #272727; font-weight: bold; background: #fff; line-height: 50px; text-align: center; position: relative; height: 50px; box-sizing: border-box; } .grntmodal .grntmodal__header a { position: absolute; top: 10px; right: 10px; text-decoration: none; color: white; border-radius: 25px; font-weight: bold; display: block; font-size: 12px; padding-left: 1px; line-height: 19px; background: #555; height: 20px; width: 20px; } .grntmodal .guarantee-grid { display: grid; grid-template-columns: 1fr 1fr; } .grntmodal .guarantee-grid p { padding: 0px 20px; text-align: justify; max-width: 400px; margin: 0 auto 20px; } .wntymodal { display: none; border-radius: 3px; position: fixed; top: 50px; left: 50%; transform: translate(-50%); background: #fff; width: 100%; overflow-y: scroll; z-index: 9; height: calc(100% - 90px); max-width: 820px; max-height: 820px; height: fit-content; text-align: center; border-top: 2px solid #f1c40f; box-sizing: border-box; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .2); } .wntymodal.visible { display: block; } .wntymodal h2.lens-types { display: none; } .wntymodal .warranty-modal { display: grid; grid-template-columns: 1fr 1fr; padding: 25px; padding-bottom: 50px; grid-gap: 25px; text-align: left; } .wntymodal .warranty-modal .warranty-plus { box-shadow: 0 2px 7px -3px rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 2px; } .wntymodal .warranty-modal .warranty-standard { box-shadow: 0 2px 7px -3px rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 2px; } .wntymodal .warranty-modal .warranty-extended { box-shadow: 0 2px 7px -3px rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 2px; grid-column: 1/3; } .wntymodal__header { color: #272727; font-weight: bold; background: #fff; line-height: 50px; text-align: center; position: relative; height: 50px; box-sizing: border-box; } .wntymodal__header a { position: absolute; top: 10px; right: 10px; text-decoration: none; color: white; border-radius: 25px; font-weight: bold; display: block; font-size: 12px; padding-left: 1px; line-height: 19px; background: #555; height: 20px; width: 20px; } @media only screen and (max-width:749px) { .grntmodal .guarantee-grid { grid-template-columns: 1fr; } .grntmodal .guarantee-grid img { display: none; } .wntymodal .warranty-modal { grid-template-columns: 1fr; } .wntymodal .warranty-modal .warranty-extended { grid-column: 1/2; } } .width-wide_1480 { max-width: 1480px; } .angler-hero { margin-top: -35px; min-height: 40vh; text-align: center; } .angler-hero img.angler-logo { padding-top: 10vh; } .angler-hero h1 { font-size: 58pt; color: white; text-transform: uppercase; font-weight: 600; letter-spacing: 4px; } .angler-hero h1 span { font-size: 65%; } .three-lens-section { max-width: 1480px; margin: -55px auto 20px; background: white; text-align: center; display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; grid-gap: 40px; padding: 80px 40px 80px; box-shadow: 0 20px 20px -30px; } .three-lens-section .angler-overview { grid-column: 1/6; } .three-lens-section .add-sign { padding: 70px 0px; } .three-lens-section .ada-lensDetails { text-align: left; } .three-lens-section .ada-lensDetails h3 { text-align: center; font-weight: 600; } .three-lens-section .ada-lensDetails h3 span { font-weight: 400; } .plug-promo { display: grid; max-width: 1480px; border: 2px solid #f1c40f; border-radius: 2px; margin: 125px auto; padding: 40px; grid-template-columns: 4fr 1fr; } .plug-promo .promo-cta { text-align: center; } .plug-promo .promo-cta a { display: block; padding: 20px; background: #f1c40f; } .angler-video-section { display: grid; background: #222; padding: 55px 0px; } .angler-video-section .angler-item { max-width: 1480px; display: grid; grid-template-columns: 1fr 1fr; background: white; margin: 0 auto; } .angler-video-section .angler-item .angler-video { background: #444; } .angler-video-section .angler-item .angler-video div { width: 100%; height: 100%; } .angler-video-section .angler-item .angler-color { padding: 80px; } .angler-video-section .angler-item .angler-color img { margin: 10px auto 50px; display: block; } .blog-section { display: grid; grid-template-columns: 1fr 1fr; max-width: 1480px; padding: 55px; width: 100%; margin: 0 auto; } .blog-section .blog-item { text-align: center; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.13); padding: 35px; max-width: 600px; margin: 0 auto; } #stamped-reviews-widget[data-widget-type="full-page"] .stamped-ratings-wrapper.stamped-review-card { width: 98% !important; } #stamped-reviews-widget[data-widget-type="full-page"] .stamped-ratings-wrapper.stamped-review-card .stamped-reviews-options { display: none; } .stamped-instagram-media-block-template { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-gap: 30px; } .stamped-instagram-media-block-template .stamped-instagram-media-block.stamped-col-xs-6.stamped-col-sm-4.stamped-col-md-3.stamped-col-lg-2 { width: 100% !important; } .sellify-shipping-progress { display: none; } #fuseit-fit-cart-drawer .fitcart__inner .fitcart__product#shipping-and-processing { background: #fdfdfd; } #fuseit-fit-cart-drawer .fitcart__inner .fitcart__product#shipping-and-processing .fit-quantity-grid div { grid-column: 1/3; } #fuseit-fit-cart-drawer .fitcart__inner .fitcart__product#shipping-and-processing .fitcart__row { padding: 0px 20px; } #fuseit-fit-cart-drawer .fitcart__inner .fitcart__product#shipping-and-processing .fitcart__row .fitcart__qty { display: none; } .btn.primary { transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); color: #222; background: #fed10a; box-shadow: 0 0 0 1px #fed10a; border: 0px; } .btn.primary:hover { box-shadow: 0 0 0 3px #fed10a; border-radius: 6px; opacity: 1; transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .btn.primary:active { box-shadow: 0 0 0 0px #fed10a; border-radius: 14px; opacity: 1; outline: none; transition: all 0.2s ease; } .btn.primary:focus { outline: none; opacity: 1; } .btn.secondary { box-shadow: 0 0 0 1px #222; color: #fff; background: #222; transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .btn.secondary:hover { box-shadow: 0 0 0 3px #222; border-radius: 6px; opacity: 1; transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .btn.secondary:active { box-shadow: 0 0 0 0px #222; border-radius: 14px; opacity: 1; outline: none; transition: all 0.2s ease; } .btn.secondary:focus { opacity: 1; outline: none; } .btn.empty { box-shadow: 0 0 0 2px #f2f2f2; color: #222; background: #fff; transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); border: 0px; } .btn.empty:hover { box-shadow: 0 0 0 3px #f2f2f2; border-radius: 6px; background: #f2f2f2; opacity: 1; transition: all 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .btn.empty:active { box-shadow: 0 0 0 0px #f2f2f2; border-radius: 14px; opacity: 1; outline: none; transition: all 0.2s ease; } .btn.empty:focus { opacity: 1; outline: none; } .btn.empty.rx-blue-btn { color: #3076be; border: 2px solid #3076be; font-weight: 700; border-radius: 4px; } /*.swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } */ .product-template__container { margin-top: 80px; } @media only screen and (max-width:749px) { .product-template__container { margin-top: 0px; } } .grecaptcha-badge { display: none !important; } .rte a{padding-bottom:10px;border:0px;} .rte.article-content a:not(.btn.secondary):not(.btn.primary) { color: blue; text-decoration: underline; } #colorwayPrice.old-colorway-price { font-size: 16px; font-family: 'Exo 2'; color: darkgrey; text-decoration: line-through; padding-right: 5px; display: flex; align-items: flex-end; } #newColorwayPrice.new-colorway-price { color: red; font-family: 'Exo 2'; font-weight: 600; } .colorway.old-colorway-price { font-size: 16px; font-family: 'Exo 2'; color: darkgrey; text-decoration: line-through; padding-right: 5px; display: flex; align-items: flex-end; } .colorway.new-colorway-price { color: red; font-family: 'Exo 2'; font-weight: 600; }