/* =============================================== Global Elements * ===============================================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, .header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, .header, hgroup, menu, nav, section { display: block; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; width:100%; font-size: 16px; scroll-behavior: smooth; } body { line-height: 1; font-family: var(--bodyFont); font-weight: 400; font-size: 1.13rem; color: var(--darkGray); background: var(--white); } ol, ul { list-style: none; } em {font-style: italic;} blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { /* border-collapse: collapse; border-spacing: 0; */ } .mobileOnly { display: none !important; } .tabletOnly { display: none; } .desktopOnly { display: block; } .hidden { display: none; } * { text-rendering: optimizeLegibility; text-rendering: geometricPrecision; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } input[type=button], input[type=submit], input[type=text], input[type=email], input[type=url], input[type=password] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; } select { min-height: 47px; padding: 10px; cursor: pointer; border-radius: 0; border: 1px solid rgba(62, 62, 62, 0.30);; } input[type=radio] { -webkit-border-radius: 100%; margin-right: 12px; } input[type="checkbox"]:checked { accent-color: var(--color1); } sup { vertical-align: super; font-size:.875rem; } .is--desktop { display: block; } .is--mobile { display: none; } .pointer { cursor: pointer; } /*Screenreader*/ .screenreader { position: fixed; top: 0; z-index: 99999; } .screenreader a { position: absolute; width: 260px; padding: 10px; left: -100000px; background-color: var(--lightGray); color: var(--darkGray); font-weight: bold; text-decoration: none; line-height: 1.4; text-align: center; } .screenreader a:hover { text-decoration: underline; } .screenreader a:focus { left: 0; top: 0; } .screenreader li { list-style: none; } .screenreader li:before { content:"" ; } @media all and (max-width:960px) { /* Global */ .tabletOnly { display: block; } .desktopOnly { display: none; } } @media all and (max-width:580px) { /* Global */ body { font-size: 1rem; } } :root { /*Colors*/ --color1: #407b90; /* Dark Blue */ --color1Trans: #407b90CC; /* Transparent Dark Blue */ --color2: #5A94A8; /* Medium Blue */ --color2Trans: #5A94A8CC; /* Transparent Medium Blue */ --color3: #3C7286; /* Blue Text on Light Gray Background*/ --black: #000000; /* Black */ --blackTrans: #000000CC; /* Transparent Black */ --white: #ffffff; /* White */ --whiteTrans: #ffffffCC; /* Transparent White */ --gray: #A0A09E; /* Gray */ --lightGray: #F1F1F1; /* Light Gray */ --darkGray: #3e3e3e; /* Dark Gray */ --red: #D42B25; /* Red */ --green: #008764; /* Green */ /*Fonts */ --headingFont: 'Poppins', Helvetica, Arial, san-serif; --bodyFont: 'Poppins', Helvetica, Arial, san-serif; /*Other*/ --transition: all .4s ease-in-out; } /*Background Colors and Gradients*/ .color1Bg { background-color: var(--color1); } .color2Bg { background-color: var(--color2); } .blackBg { background-color: var(--black); color: var(--white); } .whiteBg { background-color: var(--white); } .grayBg { background-color: var(--gray); } .gray-bg { background-color: #fbfbfb; color: var(--white); } .darkGrayBg { background-color: var(--darkGray); } .lightGrayBg { background-color: var(--lightGray); } .redBg { background-color: var(--red); } .greenBg { background-color: var(--green); } /*Overlay versions with opacity*/ .overlay { background-color: transparent; } .overlay.color1Bg { background-color: var(--color1Opaque); } .overlay.color2Bg { background-color: var(--color2Opaque); } /* Global Text Colors */ .white-font { color: var(--white); } /*White*/ .black-font { color: #000; } /*Black*/ .darkgray-font { color: var(--darkGray); } /*Dark Gray*/ .mediumgray-font { color: #666666; } /*Medium Gray*/ .lightgray-font { color: var(--lightGray); } /*Light Gray*/ .burtonblue-font { color: var(--color1); } /*b+B Blue*/ .red-font { color: var(--red); } /*Red*/ /* Global Headings */ h1, h2, h3, h4, h5, h6 { width: 100%; display: block; font-family: var(--headingFont); font-weight: 600; } h1 { font-size: 2.143rem; color: var(--color1); margin: 0; line-height: 1.2; } h1.tabletOnly { margin: 5px 0; } h1.large { font-size: 3.3rem; font-weight: 500;} h2 { font-size: 2rem; color: var(--darkGray); line-height: 1.2; margin-bottom: 20px; } h2.large { font-size: 2.5rem; font-weight: 500;line-height: 1.15; margin-bottom: 12px; } h2.burtonblue-font { font-weight: 600; color: var(--color1); } h2.smallmb { margin-bottom: 3px; } h1 > a, h2 > a { color: var(--color1); text-decoration:none; } h1 > a:hover, h2 > a:hover { color: var(--color1); text-decoration:underline; } h3 { font-size: 1.5rem; color: var(--darkGray); line-height: 1.2; margin: 0 0 16px 0; } h4 { font-size: 1.2rem; color: var(--darkGray); line-height: 1.2; margin: 0 0 16px 0; } /* WYSIWYG Styles */ /* Fonts */ .poppins { font-family: var(--bodyFont); } .bold { font-weight: 700; } .semiBold { font-weight: 600; } .large.bold { font-size: 1.7rem; font-weight: 700; } /* All Caps text */ .all-caps { font-family: var(--bodyFont); font-size: 1.829rem; text-transform: uppercase; } /* Lower Case Text */ .lowercase { font-family: var(--bodyFont); font-size: 1.829rem; text-transform: lowercase; } /* Image Alignment */ .align-left { float: left; margin: 0 20px 10px 0; } .align-right { float: right; margin: 0 0 10px 20px; }.center { text-align: center; } .align-left, img[align*="left"], img[style*="text-align: left"], img[style*="float: left"] { float: left; margin: 0 30px 15px 0; } p > .align-left, span > .align-left { margin: 8px 30px 15px 0; } .align-right, img[align*="right"], img[style*="text-align: right"], img[style*="float: right"] { float: right; margin: 0 0 15px 30px; } p > .align-right, span > .align-right { margin: 8px 0 15px 30px; } img[align*="center"], img[style*="text-align: center"] { display: block; margin: 0 auto 15px auto; } .align-center { text-align: center; display: block; } @media all and (max-width:580px) { .large.bold { font-size: 1.45rem; } .align-left, img[align*="left"], img[style*="text-align: left"], p > .align-left, span > .align-left, .align-right, img[align*="right"], img[style*="text-align: right"], p > .align-right, span > .align-right, .align-center, img[align*="center"], img[style*="text-align: center"], img[style*="float: left"], img[style*="float: right"] { float: none !important; clear: both; display: block; margin-left: auto; margin-right: auto; } figure.align-right { float: left; width: 100%; max-width: 100%; clear: both; } figure.align-left { float: left; width: 100%; max-width: 100%; clear: both; } } /* Global Links */ a { color: var(--color1); } .mainContent a { color: var(--color1); transition: var(--transition); } .mainContent a:hover, .mainContent a:focus { color: var(--darkGray); text-decoration: underline; } /* Global Content */ hr { border: 0; height: 1px; background: #cdc4bb; margin-bottom: 25px; width: 100%; clear: both; } p { line-height: 1.5; margin-bottom: 19px; } .smallmb { margin-bottom: 8px; } img { border: none; height: auto; max-width: 100%; } td img { max-width: none; } strong { font-weight: 700; } h2 > strong, h3 > strong { font-weight: 500; } iframe { max-width: 100%; } .clear { clear: both; } .center { text-align: center; } .alignCenter { text-align: center; display: block; } .subtext { font-size: 1.1rem; } .visuallyhidden { position: absolute; left: -99999px; } /* Buttons */ button { font-family: var(--bodyFont); cursor: pointer; } input[type='button'].button, .button, .formRow input[type='submit'], table input[type='submit'] {color: var(--color1); white-space: normal; width: auto;cursor: pointer; font-weight: 500; display: inline-block; margin: 0; font-family: var(--bodyFont); max-width: 100%; border-radius: 5px; text-decoration: none; text-align: center; } input[type='button'].button { color: var(--color1); background-color: var(--white); } input[type='button'].button:hover, input[type='button'].button:focus { color: var(--white); background-color: var(--color1); } input[type='button'].button:focus, .button:focus, .formRow input[type='submit']:focus, table input[type='submit']:focus {color: var(--white); } input[type='button'].button:hover, a.button:hover, .button:hover, a.button:focus, .button:focus, .formRow input[type='submit'], table input[type='submit']:hover, .formRow input[type='submit'], table input[type='submit']:focus {color: var(--white); background-color: var(--color1); text-decoration: none; } /* Add and Subtract Button */ input[type='button'][value='subtract'], input[type='button'][value='add'] {color: var(--color1); white-space: normal; width: 25px; height: 35px; cursor: pointer; font-weight: 500; display: inline-block; margin: 0; font-family: var(--bodyFont); max-width: 100%; text-decoration: none; text-align: center; background-color: var(--white); transition: all 0.5s ease-in-out; text-indent: -99999px; border: 1px var(--white) solid; border-radius: 5px; padding: 0 12px; } .button.fullWidth, input[type='submit'].fullWidth { width: 100%; } input[type='button'][value='subtract'] { background: url(../images/icons/minus-solid.svg) no-repeat center center; } input[type='button'][value='subtract']:hover, input[type='button'][value='subtract']:focus { background: url(../images/icons/minus-solid-hover.svg) no-repeat center center; } input[type='button'][value='add'] { background: url(../images/icons/plus-solid.svg) no-repeat center center; } input[type='button'][value='add']:hover, input[type='button'][value='add']:focus { background: url(../images/icons/plus-solid-hover.svg) no-repeat center center; } input[type='button'][value='subtract']:hover, input[type='button'][value='add']:hover, input[type='button'][value='subtract']:focus, input[type='button'][value='add']:focus {color: var(--darkGray); background-color: var(--white); text-decoration: none; } input.button + input.button { margin-left: 35px; } @media all and (max-width: 960px){ input[type='button'][value='subtract'], input[type='button'][value='add'] { width: 30px; margin-left: 0; margin-right: 0; } } @media all and (max-width: 580px){ input.button + input.button { margin-top: 20px; } input[type='button'][value='subtract'] { background: url(../images/icons/minus-solid-mobile.svg) no-repeat center center; } input[type='button'][value='subtract']:hover, input[type='button'][value='subtract']:focus { background: url(../images/icons/minus-solid-mobile-hover.svg) no-repeat center center; } input[type='button'][value='add'] { background: url(../images/icons/plus-solid-mobile.svg) no-repeat center center; } input[type='button'][value='add']:hover, input[type='button'][value='add']:focus { background: url(../images/icons/plus-solid-mobile-hover.svg) no-repeat center center; } input[type='button'][value='subtract'], input[type='button'][value='add'], input[type='button'][value='subtract']:hover, input[type='button'][value='add']:hover, input[type='button'][value='subtract']:focus, input[type='button'][value='add']:focus { width: 24px; height: 30px; margin: auto 2px; } } @media all and (max-width: 414px){ /*input[type='button'][value='subtract'], input[type='button'][value='add'] { width: 20px; height: 20px; }*/ } @media all and (max-width: 280px){ input[type='button'][value='subtract'], input[type='button'][value='add'] { clear: both; display: block; margin: 0 auto 5px auto; } } input[type='button'].button {width: 100%; vertical-align:bottom;} input[type='button'].button.auto {width: auto;} #mainBody_ctrViewCart_ctrwishlistpopup_btnWishlistClose { margin-top: 20px; } /* Blue Button */ /* Button Style 1 */ a.button, .button, .formRow input[type='submit'], input[type='submit'] { position: relative; display: inline-flex; justify-content: space-around; padding: 8px 30px; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--white); background-color: var(--color1); border: 1px solid var(--color1); border-radius: 4px; vertical-align:top; text-decoration: none; transition: var(--transition); } a.button:hover, a.button:focus, .button:hover, .button:focus, .formRow input[type='submit']:hover, .formRow input[type='submit']:focus, input[type='submit']:hover, input[type='submit']:focus { color: var(--white); background-color: var(--color1); text-decoration: none; padding: 8px 42px 8px 18px; } input[type='button'].button.blue { color: var(--white); background-color: var(--color1); background-size: 8px; background-image: url(../images/icons/carrot-right-button-blue.svg); background-repeat: no-repeat; background-position: right 15px center; transition: var(--transition); } /* Button Style 1 Base After */ a.button:after, .button:after { position: absolute; top: 2px; bottom: 0; right: 15px; opacity: 0; content:""; width: 8px; height: 14px; margin: auto 0; background-image: url(../images/icons/carrot-right-white.svg); background-size: 100%; background-repeat: no-repeat; transition: var(--transition); } a.button:hover:after, a.button:focus:after, .button:hover:after, .button:focus:after, .formRow input[type='submit']:hover:after, .formRow input[type='submit']:focus:after, input[type='submit']:hover:after, input[type='submit']:focus:after { opacity: 1; } .formRow input[type='submit'], input[type='submit'] { font-size: .95rem; background-image: url(../images/icons/carrot-right-blue-on-gray.svg); background-size: 8px; background-repeat: no-repeat; background-position: right 15px center; transition: var(--transition); } .formRow input[type='submit']:hover, .formRow input[type='submit']:focus, input[type='submit']:hover, input[type='submit']:focus, input[type='button'].button.blue:hover, input[type='button'].button.blue:focus { background-image: url(../images/icons/carrot-right-white.svg); } /* Button Style 1 Base After with Solid Background */ .color1Bg a.button, .color1Bg .button, .color1Bg .formRow input[type='submit'], .color1Bg input[type='submit'], .blue.bg a.button, .blue.bg .button { border: 1px solid var(--white); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .color1Bg a.button:after, .color1Bg .button:after, .color1Bg .formRow input[type='submit']:after, .color1Bg input[type='submit']:after, .blue.bg a.button:after, .blue.bg .button:after { background-image: url(../images/icons/carrot-right-button-blue.svg); } /* Button Style 1 Base Hover with Solid Background */ .color1Bg a.button:hover, .color1Bg a.button:focus, .color1Bg .button:hover, .color1Bg .button:focus, .color1Bg .formRow input[type='submit']:hover, .color1Bg .formRow input[type='submit']:focus, .color1Bg input[type='submit']:hover, .color1Bg input[type='submit']:focus, .blue.bg a.button:hover, .blue.bg a.button:focus, .blue.bg .button:hover, .blue.bg .button:focus { color: var(--color1); background-color: var(--white); text-decoration: none; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } /* White Button */ /* Button Style 1 */ .button.white, input[type='submit'].button.white { color: var(--color1); background-image: url(../images/icons/carrot-right-white.svg); background-color: var(--white); background-repeat: no-repeat; border: 1px solid var(--color1); text-decoration: none; } a.button.white { background-image: none; } /* Button Style 1 Base */ .button.white:hover, input[type='submit'].button.white:hover, .button.white:focus, input[type='submit'].button.white:focus { color: var(--white); background-color: var(--color1); text-decoration: none; } /* Button Style 1 Base After */ a.button.white:hover:after, a.button.white:focus:after { background-image: url(../images/icons/carrot-right-white.svg); } /* Button Variances */ a.button.clear { clear: both; } a.button.lower { text-transform: lowercase; } .mainContent .columns .button .mainContent .columns a.button.blue, .mainContent a.button.blue, .mainContent .columns .button.blue { width: auto; color: var(--white); background-color: var(--color1); } .mainContent .columns a.button.blue:hover, .mainContent a.button.blue:hover {color: var(--color1); background-color: var(--white);} .button.arrowRight {padding:2px 36px 2px 4%; background:var(--color1) url(../../images/global/store/arrowRightWhite.png) no-repeat right center; } .button.arrowLeft {padding: 2px 4% 2px 36px; background:var(--color1) url(../../images/global/store/arrowLeftWhite.png) no-repeat left center;} /* Product Button */ a.button.whiteBg, .button.whiteBg {padding: 9px 25px 0 25px; color: var(--color1) !important; background: transparent; border: none; width: 100%; } a.button.whiteBg:hover, .button.whiteBg:hover, a.button.whiteBg:focus, .button.whiteBg:focus { text-decoration: underline; } /* Gray Button */ .button.gray, .button.wshContinue, input[type='button'].button.wshContinue { background: #f0f1f3; border: 1px solid #f0f1f3; color: var(--darkGray); } /* More Link */ .moreLink { color: var(--color1); } .moreLink:hover, .moreLink:focus { text-decoration: underline; } .moreLink:after { position: absolute; top: 2px; bottom: 0; right: 15px; opacity: 0; content:""; width: 8px; height: 14px; margin: auto 0; background-image: url(../images/icons/carrot-right-blue.svg); background-size: 100%; background-repeat: no-repeat; } /* Magnific Popup White Background and Close Button */ .whiteBox .mfp-iframe-holder .mfp-close, .closeButton { position: absolute; top: 0; right: 5px; color: #ccc; font-size: 2.5rem; font-weight: bold; opacity: 1; } .whiteBox .mfp-iframe-holder .mfp-close:hover, .whiteBox .mfp-iframe-holder .mfp-close:focus, .closeButton:hover, .closeButton:focus { color: var(--darkGray); } .closeButton { z-index: 1; } /* Callout Link */ a.callout { display: inline-block; color: var(--darkGray); font-size: 1.12rem; font-weight: 500; line-height: 1.2; margin: 0 25px 10px 0; transition: var(--transition); text-decoration: none; } a.callout:hover, a.callout:focus { color: var(--color1); text-decoration: none; } a.callout:after { display: inline-block; content: ""; width: 9px; height: 14px; margin: -1px 0 0 0; background-image: url(../images/icons/carrot-right-blue.svg); background-size: 14px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(10px, 0); vertical-align: middle; } a.callout:hover:after, a.callout:focus:after { transform: translate(15px, 0); } .blue.bg a.callout { color: var(--white); } .blue.bg a.callout:hover, .blue.bg a.callout:focus { color: var(--white); } .blue.bg a.callout:hover:after, .blue.bg a.callout:focus:after { background-image: url(../images/icons/carrot-right-white.svg); } .gray.bg a.callout:hover, .gray.bg a.callout:focus { color: var(--color3); } .gray.bg a.callout:hover:after, .gray.bg a.callout:focus:after { background-image: url(../images/icons/carrot-right-blue-on-gray.svg); } @media all and (max-width: 960px){ /* Button Style 1 */ a.button, .button, .formRow input[type='submit'], table input[type='submit'] { padding: 8px 30px; font-size: .9rem; } a.button:hover, a.button:focus, .button:hover, .button:focus, .formRow input[type='submit']:hover, .formRow input[type='submit']:focus, table input[type='submit']:hover, table input[type='submit']:focus { padding: 8px 42px 8px 18px; } } @media all and (max-width: 580px){ a.button, .button, .formRow input[type='submit'], table input[type='submit'], a.button:hover, a.button:focus, .button:hover, .button:focus, .formRow input[type='submit']:hover, .formRow input[type='submit']:focus, table input[type='submit']:hover, table input[type='submit']:focus { padding-top: 10px; padding-bottom: 10px; } } /* Osano Cookie Consent */ .osano-cm-window { font-family: var(--bodyFont) !important; } /* =============================================== Grid System * ===============================================*/ /*Layout*/ .wrapper { max-width: 1920px; width: 100%; margin: 0 auto; } .components { padding: 48px 3%; } .blue.bg.components { padding: 54px 3%; } @media all and (min-width: 961px){ .interior .interiorContent .components { padding: 48px 0 48px 5.5%; } .interior .interiorContent .formCenter { padding: 0 0 48px 5.5%; } .interior .interiorContent .blue.bg.components { padding: 54px 3%; } } @media all and (max-width: 960px){ .interior .interiorContent .formCenter { padding: 0 3% 30px 3%; } } @media all and (max-width: 580px){ .components, .interior .interiorContent .formCenter { padding: 30px 20px; } .blue.bg.components { padding: 36px 20px 30px 20px; } } /*Grid Columns*/ .columns { position: relative; } .columns > .wrapper { max-width: 1534px; } .columns .cell.centered { display: flex; align-items: flex-start; justify-content: center; padding: 0 20px; } .columns .cell > img, .columns .cell > a > img, .columns .cell > div > a > img { display: block; max-width: 100%; width: 100%; } .columns .one { grid-template-columns: minmax(0, 1fr); } .columns .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } .interior .columns .two { gap: 3rem; } .columns.twoColumnSides .two { gap: 1rem; } .columns .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } .interior .columns .three { gap: 2.25rem; } .columns .four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.7rem; } .columns .oneTwo { display: grid; grid-template-columns: 31% minmax(0, 1fr); gap: 3.5rem; margin-bottom: 45px; } .interior .columns .oneTwo { grid-template-columns: 41% minmax(0, 1fr); } .columns .twoOne { display: grid; grid-template-columns: minmax(0, 1fr) 31%; gap: 3.5rem; margin-bottom: 45px; } .interior .columns .twoOne { grid-template-columns: minmax(0, 1fr) 30%; } .cell { display: flex; flex-flow: column nowrap; } .columns .cell > img, .columns .cell > a > img, .columns .cell > div > a > img { display: block; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; } .columns .one .cell > img, .columns .one .cell > a > img, .columns .one .cell > div > a > img { width: auto; } .columns .cell > .content > img, .columns .cell > .content > a > img, .columns .cell > div.content > a > img { max-width: 100%; width: auto; } .wysiwygContent.columns .cell > img, .wysiwygContent.column .cell > a > img, .wysiwygContent.column .cell > div > a > img, .wysiwygContent.columns .cell .videoContent { max-width: 100%; width: auto; margin-top: 30px; } .columns .cell img + .content, .columns .cell .imgZoom + .content, .columns .cell .videoContent + .content, .columns .cell a + .content { padding-top: 20px; } .cellBG, .interiorMain .columnBG { padding: 30px; } @media all and (max-width:1279px) { .columns .oneTwo, .interior .columns .oneTwo, .columns .twoOne, .interior .columns .twoOne { grid-template-columns: minmax(0, 1fr); grid-column: auto; grid-row: auto; gap: 2rem; } } @media all and (max-width:960px) { .columns .two, .interior .columns .two, .columns .three, .interior .columns .three, .columns .four { gap: 2rem; } .interiorMain .columnBG { padding: 30px 0; } } @media all and (min-width:721px) and (max-width:960px) { .columns .three, .columns .four { grid-template-columns: minmax(0, 1fr); } .columns .three .cell, .columns .four .cell { display: block; } .columns .three .cell > *, .columns .four .cell > * { display: inline-grid; grid-template-columns: minmax(0, 1fr); max-width: 49%; vertical-align: top; } .columns .three .cell > * + *, .columns .four .cell > * + * { padding-left: 20px; } .columns .three .cell.noImageVideo > .content { max-width: 100%; } } @media all and (max-width:720px){ .columns .two, .interior .columns .two, .columns .three, .interior .columns .three, .columns .four { grid-template-columns: minmax(0, 1fr); grid-column: auto; grid-row: auto; gap: 2rem; } } /* ============================ Grid Layout Left Section * ============================*/ .interior .mainContent { display: grid; grid-area: 1 / 1 / 8 / 2; grid-template-columns: 1fr 3fr; padding: 38px 3% 0 3%; max-width: 1652px; } .interior .noImage + .mainContent { padding: 10px 3% 0 3%; } .mainContent > form:first-child { grid-area: none; } .interiorContent { position: relative; display: grid; grid-area: 1 / 2 / 8 / 2; grid-template-rows: max-content; grid-auto-rows: max-content; max-width: 1156px; } .sectionNavColumn { display: grid; grid-area: 1 / 1 / 6 / 2; grid-template-columns: 100%; max-width: 385px; width: 100%; padding: 0 55px 0 0; } @media all and (min-width: 961px) { .interiorContent:before { content: ""; position: absolute; top: 50px; left: 0; right: auto; width: 2px; height: 99%; background-color: rgba(127, 130, 135, 0.20); } .interiorContent.blogListing:before { display: none; } } @media all and (max-width: 960px) { .interior .mainContent { grid-template-columns: 1fr; } .interior .noImage + .mainContent { padding: 38px 3% 0 3%; } .sectionNavColumn { grid-area: 1 / 1 / 3 / 2; grid-template-columns: 100%; max-width: 100%; margin: 0; padding: 0; } .interiorContent { display: grid; grid-area: 3 / 1 / 8 / 2; } } @media all and (max-width: 720px) { .interior .mainContent { padding-left: 0; padding-right: 0; } .interior .noImage + .mainContent { padding: 38px 0 0 0; } .sectionNavColumn { padding-left: 20px; padding-right: 20px; } } /* =============================================== Form Initial Styles * ===============================================*/ /*Login modifications*/ form > div > fieldset label { font-size: 90%; } fieldset { border: 0; padding: 0; } label { display: inline-block; font-size: .95rem; line-height: 1.2; margin-bottom: 10px; } label.customLabel { margin: 0; padding: 0; } label.semiBold { font-weight: 600; } label.fullLabel { display: flex; width: 100%; margin-bottom: 0; } p.label { margin-bottom: 14px; } p.label.mtb { margin: 14px 0; } input { border-radius: 0; font-size: 1rem; color: var(--darkGray); } input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], textarea { color:inherit; font-family:inherit; font-size: 1rem; font-weight: 500; border: 1px solid rgba(62, 62, 62, 0.30); background: var(--white); padding: 10px; margin-bottom: 15px; } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus { } input.failedField, select.failedField, .failedField{ border: 1px solid var(--red) !important; } input[type='radio'].failedField { outline: 1px solid var(--red) !important; } input[type=checkbox] { cursor: pointer; } input[type=radio] { cursor: pointer; } .error { color: var(--red); font-weight: bold; } .errorMark { font-size: 1.7rem; } .form.header { font-weight: bold; margin: 0 0 10px 0; } .formRow { clear: both; padding: 1px 0; margin: 0 0 5px 0; } .formRow fieldset > div > div { padding: 0 0 5px 0; } .formRow > label, legend { line-height: 1.2; margin-bottom: 10px; } .formRow > legend, .formRow > label.bold { font-weight: bold; } .formRow > label, .formCol > label { font-weight: 400; margin-right: 5px; } .formRow.radioOptions > label, .formRow.radioOptions .formCol > label { font-weight: 600; } .loginUser label { font-weight: bold; padding: 6px 0 0 0; display: inline-block; } .loginUser label[for*='UserName']:after { content: ""; width: 10px; height: 10px; color: var(--color1); background: url(../images/icons/question-circle.svg) no-repeat center; margin-right: 10px; } .formRow > div, .formRow fieldset > div { position: relative; font-size: 1rem; } .formRow.itemsInline fieldset > div > div { display: inline; } .formRow.leftAlign > label { width: auto; } .formRow.leftAlign > div { width: auto; float: left; } .formRow td { padding: 0; } .required { color: var(--red); font-weight: bold; } .buttonsRight { text-align: right;} .fine-text {font-size:.79rem;} .ContactPhoneRow { position: absolute; left: -999999px; } .storeLookup .formRow {clear:none;} .storeLookup .formRow > div, .storeLookup .formRow fieldset > div {float:left; width:90%;} .formCenter { width: 50%; margin: 0 auto; } .interior .formCenter { margin: 0; } .formCenter.components { display: flex; padding-top: 0; } .formCenter h1 { font-size: 2.25rem; font-weight: 700; color: var(--darkGray); line-height: 1.2; margin-bottom: 15px; } .formCenter input[type=text], .formCenter input[type=email], .formCenter input[type=url], .formCenter input[type=password], .formCenter input[type=tel], .formCenter textarea, .formCenter select { width: 100%; } .narrowForm { width: 100%; max-width: 600px; margin: 0 auto; } .narrowForm label { font-weight: 700; } .narrowForm label > span { color: var(--red); } .emailForm { width: 100%; max-width: 780px; line-height: 1.5; margin: 20px auto; } .emailForm.browserView { float: left; max-width: 100%; margin: 0 auto; } .emailForm.browserView .fullWidth { float: left; } .emailForm h2 { font-size: 1.7rem; } .receiptTable th:first-of-type { padding-left: 6% !important; } .orderSummaryTable th { padding: 0 !important; } .emailForm.browserView table, .table.col12.viewCart { width: 100% !important; } #ctrviewinvoices_pnlDetail { line-height: 1.5; } input[type="radio"] + label { float: left; line-height: 1.35; display: inline-block; font-weight: 600; } .helpText { font-size: .8rem; } .errorClass { color: var(--red); font-weight: 600; } @media all and (max-width: 960px) { .formCenter { width: 100%; } } @media all and (max-width: 780px) { .receiptTable tr { display: flex; flex-direction: column; } tr.receiptHead { display: none; } .receiptTable tr:nth-child(2) { border-top: 1px solid rgba(127, 130, 135, 0.30); } .receiptTable td { padding: 5px 20px !important; } .receiptTable span { display: block !important; } } @media all and (max-width: 580px) { input[type=text], input[type=email], input[type=url], input[type=password], select, textarea { width: 100%; } .formCenter h1 { font-size: 1.5rem; } .errorMark { position: absolute; top: 14px; right: 14px; } .helpText { display: block; margin-bottom: 15px; } } /* =============================================== Magnific Custom Styles * ===============================================*/ .whitePopup { background: var(--white); padding: 20px 30px; text-align: left; max-width: 650px; margin: 40px auto; position: relative; } /* =============================================== Tables * ===============================================*/ .table { padding:0; margin:0 0 12px 0; font-size:1.0em; text-align:left; border:1px solid rgba(127, 130, 135, 0.30); font-family: var(--bodyFont); overflow-y: hidden; } .table tr { position: relative; vertical-align:top; } .table th { vertical-align: bottom; padding:5px; text-align:left; background:var(--lightGray); } .table td { padding: 5px; } .table p { line-height: 16px; } .table tr.odd { } .table tr.even { background:#ebebeb; } table { display: block; height: auto!important; width: auto; max-width: 100%; } table.dataTable { display: table; width: 100%; } table.dataTable td { display: table-cell; } table th { padding: 5px; } td { padding: 0 1%; line-height: 1.5em; } .loginUser td {padding: 0; vertical-align: top;} th { background-color: var(--lightGray); } /*** RESPONSIVE TABLES ***/ .table { display: table; margin: 20px 0; } .table.responsive { width: 100%; float: left; } .table-head { display: table-header-group; border-bottom: 1px solid rgba(127, 130, 135, 0.30); } .table-head .column { display: table-cell; vertical-align: middle; background: var(--lightGray); padding: 13px 22px; text-align: left; font-weight: 600; font-size: 1.12rem; } .tableRow.hidden { display: none; } .tableRow.mobile { display: none; } .tableRow { display: table-row; } .tableRow:last-child .column { border-bottom: none; } .tableRow .column { display: table-cell; padding: 14px 22px; border-bottom: 1px solid rgba(127, 130, 135, 0.30); border-right: 1px solid rgba(127, 130, 135, 0.30); background: var(--white); font-size: 1.12rem; font-weight: 500; } .tableRow .column:last-child { border-right: none; } .responsive .column { padding: 10px; } .tableRow.spanFull .column{ border:none; } .tableReports tbody tr:nth-child(odd) { background-color: var(--white); } /*** PRODUCT ORDER TABLE ***/ .table.product-order-table, .table.product-order-table .column, .table.product-order-table .tableRow .column:nth-child(1) { border: none; background: none; font-weight: bold; font-size: 13px; } @media all and ( max-width: 1200px ) { .responsive .column { padding: 5px; } .table-head .column { font-size: 1rem; } .tableRow .column { font-size: 1rem; } } @media all and ( max-width: 680px ) { /* Responsive Table */ .table.responsive, .table.responsive .tableRow, .table.responsive .column, .table.responsive .column:before { display: block; } .table.responsive, .table.responsive .tableRow .column:last-child { border: none; } .table.responsive .table-head { position: absolute; top: -1000em; left: -1000em; } .table.responsive .tableRow { border: 1px solid #DEDEDE; border-top: 2px solid #DEDEDE; border-bottom: 2px solid #DEDEDE; margin: 10px 0; } .table.responsive .tableRow .column:nth-child(1) { border-left: none; } .table.responsive .tableRow .column:last-child { border-right: none; } .table.responsive .tableRow:last-child .column, .table.responsive .column { border-bottom: 1px solid #DEDEDE; } .tableRow.mobile { display: block; } .table.responsive .column:before { font-weight: bold; padding-right: 20px; content: " "attr(data-label)" "; } .table.responsive .column { padding: 5px; } .table.responsive .subtotal, .table.responsive .subtotal .column { border: none!important; margin: 0; } .table.responsive .spanFull .column{border:none!important;} .table.responsive .column.blank {display: none;} } /* =============================================== Site Header * ===============================================*/ .header { position: fixed; z-index: 999; width: 100%; background: var(--white); } .header > .container { width: 100%; max-width: 1920px; padding: 0 3% 22px 3%; margin: 0 auto; } /* Header Logo */ .headerLogoArea { display: flex; justify-content: center; padding: 18px 0 25px 0; } .header .logo { display: flex; justify-content: center; flex-direction: column; width: 42%; padding: 0 30px; } .header .logo a { display: flex; width: auto; margin: 0 auto; } .header .logo img { max-width: 492px; width: 100%;} .header .logo.wholesale, .header .logo.consumer { text-align: center; padding-bottom: 0; } .header .logo.wholesale div, .header .logo.consumer div { font-size: 1.1rem; font-weight: 300; text-transform: uppercase; line-height: 1; margin: 8px 0 0 0; } /* Header Utility */ .utility { display: flex; background-color: var(--color1); width: 100%; } .utility > .container { display: flex; justify-content: center; width: 100%; max-width: 1920px; padding: 14px 3% 9px 3%; margin: 0 auto; } /* Header Utility Message */ .header .message { display: flex; align-items: center; width: 33.33%; padding: 0 20px 0 0; } .header .messageIcon { padding: 0; margin: -4px 0 0 0; } .header .messageIcon img { width: 100%; max-width: 55px; padding: 0 13px 0 0; } .header .message a { color: var(--white); font-size: 1rem; transition: var(--transition); text-decoration: none; } .header .message a:hover, .utility li a:focus { color: var(--white); } .header .message a .lineOne { display: block; color: var(--white); font-size: min(.88rem, 1rem); font-weight: 300; line-height: 1.1; } .header .message a .lineTwo { display: inline; color: var(--white); font-size: min(1rem, 1.13rem); font-weight: 600; line-height: 1.1; } .header .message a:after { display: inline-block; content:""; width: 9px; height: 18px; margin: 0; background-image: url(../images/icons/carrot-right-white.svg); background-size: 7px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(5px, 0); vertical-align: bottom; } .header .message a:hover:after, .header .message a:focus:after { transform: translate(10px, 0); } /* Header Utility Tagline */ .header .tagline { display: flex; justify-content: center; align-items: center; width: 33.33%; color: var(--white); font-size: min(1.2vw, 1.13rem); font-weight: 500; line-height: 1.4; text-align: center; padding: 0; } /* Header Utility Nav */ .header ul.ctaLinks { display: flex; align-items: center; width: 33.33%; padding: 0 2.5% 0 0; margin: 0; } .header ul.ctaLinks li { position: relative; display: inline-flex; color: var(--white); padding: 0 9% 0 6%; } .header ul.ctaLinks li:first-child { margin: 0 0 0 auto; } .header ul.ctaLinks li:not(:first-child) { border-left: 1px solid var(--white); } .header ul.ctaLinks li:last-child { padding-right: 0; } .header ul.ctaLinks li a { color: var(--white); transition: var(--transition); text-decoration: none; } .header ul.ctaLinks li a:hover, .utility li a:focus { color: var(--white); } .header ul.ctaLinks li a .lineOne { display: block; color: var(--white); font-size: min(.88rem, 1rem); font-weight: 300; line-height: 1.1; } .header ul.ctaLinks li a .lineTwo { display: inline; color: var(--white); font-size: min(1rem, 1.13rem); font-weight: 600; line-height: 1.1; } .header ul.ctaLinks li a:after { display: inline-block; content:""; width: 9px; height: 18px; margin: 0; background-image: url(../images/icons/carrot-right-white.svg); background-size: 7px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(10px, 0); vertical-align: bottom; } .header ul.ctaLinks li a:hover:after, .header ul.ctaLinks li a:focus:after { transform: translate(15px, 0); } /* Mobile Menu Button*/ .toggleBtn { display: none; } /* Header Search */ .header .search { display: flex; align-self: flex-start; width: 29%; margin: 26px 0 0 0; background-color: var(--white);border: 1px solid #7F828799; } .header .search .searchMenu { position: relative; display: flex; align-self: flex-start; width: 100%; } .header .search .placeholder { font-family: var(--bodyFont); font-weight: 400; font-size: .9rem; display: inline-block; background-color: transparent; border: 1px solid transparent; color: #727279; margin: 0; padding: 8px 15px; width: 92%; height: 43px; } .header .searchButton { background-color: var(--lightGray); border: none; width: 43px; height: 43px; position: relative; cursor: pointer; background-image: url(../images/icons/search-icon.svg); background-position: center; background-repeat: no-repeat; margin: 0; transition: var(--transition); } .header .searchButton:hover, .header .searchButton:focus { background-image: url(../images/icons/search-icon-hover.svg); } #skipToTopNav .nxt-ac-main { font-family: var(--bodyFont); top: 44px !important; left: 0 !important; z-index: 101 !important; } #skipToTopNav .nxt-ac-main .nxt-ac-header { font-size: .9rem; color: var(--darkGray); } #skipToTopNav .nxt-ac-header > div { margin-top: 10px; } #skipToTopNav .nxt-ac-item { font-size: .8rem; } #skipToTopNav .nxt-ac-section-container a { color: var(--color3); } .nxt-ac-item .nxt-item-txt { color: var(--color1) !important; } #skipToTopNav .nxt-ac-section-container a:hover, #skipToTopNav .nxt-ac-section-container a:focus { text-decoration: underline; } /* Header Account Options */ .headerLogoArea .accountOptions { display: flex; justify-content: flex-end; width: 29%; margin: 16px 0 0 0; } .accountOptions > li { font-weight: 300; text-align: center; padding: 5px 4.5%; margin: 0; } .accountOptions > li:last-child { padding-right: 0; } .accountOptions > li > a, .accountOptions > li > button { position: relative; color: var(--darkGray); text-decoration: none; padding: 0 0 8px 0; } .accountOptions > li > button { font-family: var(--bodyFont); font-weight: 300; line-height: 1; background-color: var(--white); border: none; cursor: pointer; } .accountOptions > li > a:hover, .accountOptions > li > a:focus, .accountOptions > li > button:hover, .accountOptions > li > button:focus { color: var(--darkGray); } .accountOptions .headerIcon { position: relative; display: block; width: 40px; height: 40px; padding: 5px; margin: 0 auto; background-color: rgba(127, 130, 135, 0.20); background-position: center; background-repeat: no-repeat; border-radius: 360px; transition: var(--transition); transform: translate(0, 0); } .accountOptions > li > a .headerIconText, .accountOptions > li > button .headerIconText { display: inline-block; font-size: .85rem; padding: 8px 0 0 0; } .accountOptions > li > a:hover .headerIcon, .accountOptions > li > a:focus .headerIcon, .accountOptions > li > button:hover .headerIcon, .accountOptions > li > button:focus .headerIcon { transform: translate(0, -5px); } /* Header Inspiration Icon */ .accountOptions .inspirationIcon { background-image: url(../images/icons/header-icon-book.svg); background-size: 50%; } .accountOptions > li > a:hover .inspirationIcon, .accountOptions > li > a:focus .inspirationIcon, .accountOptions > li > button:hover .inspirationIcon, .accountOptions > li > button:focus .inspirationIcon { background-image: url(../images/icons/header-icon-book-hover.svg); } .inspirationMenu .headerIconText:after { content: url(../images/icons/carrot-down-blue.svg); display: inline-block; padding: 0 0 0 8px; transition: var(--transition); } .inspirationMenu.open .headerIconText:after { transform: rotateX(-180deg); } /* Header My Account Icon */ .accountOptions .accountIcon { background-image: url(../images/icons/header-icon-my-account.svg); } .accountOptions > li > a:hover .accountIcon, .accountOptions > li > a:focus .accountIcon, .accountOptions > li > button:hover .accountIcon, .accountOptions > li > button:focus .accountIcon { background-image: url(../images/icons/header-icon-my-account-hover.svg); } .myAccountMenu .headerIconText:after { content: url(../images/icons/carrot-down-blue.svg); display: inline-block; padding: 0 0 0 8px; transition: var(--transition); } .myAccountMenu.open .headerIconText:after { transform: rotateX(-180deg); } /* Header Wishlist Icon */ .accountOptions .wishlistIcon { background-image: url(../images/icons/header-icon-wishlist.svg); background-position: center 12px; } .accountOptions > li > a:hover .wishlistIcon, .accountOptions > li > a:focus .wishlistIcon { background-image: url(../images/icons/header-icon-wishlist-hover.svg); } .accountOptions .cartIcon { background-image: url(../images/icons/header-icon-cart.svg); } .accountOptions > li > a:hover .cartIcon, .accountOptions > li > a:focus .cartIcon { background-image: url(../images/icons/header-icon-cart-hover.svg); } .accountOptions .cartCount { display: block; position: relative; } #miniCartCount { display: block; position: absolute; width: auto; min-width: 20px; top: -9px; bottom: auto; left: auto; right: -9px; color: var(--white); font-size: .8rem; font-weight: 600; line-height: 1.2; text-align: center; padding: 3px 6px; background-color: var(--red); border-radius: 360px; z-index: 1; } .accountOptions > li > a .accountText { text-align: center; } /* Account Options Submenu */ .accountOptions .toolbar { padding: 10px 8px; height: auto; display: block; background: var(--white); position: absolute; z-index: 20; width: 145px; right: 0; top: 100%; margin: 8px 0 0 0; border: 1px solid #7F828733; border-radius: 6px; box-shadow: 0px 2px 7px -6px rgba(0,0,0,1); } .accountOptions .toolbar li { display: block; text-align: left; border-right:0; padding: 3px 3px 0 3px; margin: 0; width: auto; } .accountOptions .toolbar li a { color: var(--darkGray); text-decoration: none; line-height: 1.4rem; display: block; font-size: 0.82rem; font-weight: 500; text-transform: inherit; padding: 1px; } .accountOptions .toolbar li a:hover, .accountOptions .toolbar li a:focus { text-decoration: underline; } .accountOptions .toolbar { display: none; } .accountOptions .toolbar.open { display: inline-block; width: 100%; } /* Header Main Navigation */ .mainNav > li { font-size: .98rem; } .mainNav > li.menuItem:not(.accountInfo):last-of-type { border-bottom: none; } .mainNav > li > a, .mainNav > li > span { padding: 10px 0; } /* Mega Menu Images */ .megaImage a:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content:""; width: 100%; height: 100%; margin: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.27) 26.82%, rgba(0, 0, 0, 0.90) 99.94%); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .megaCol.hasImage img { object-fit: cover; object-position: left top; } .megaCol.hasImage.setOne ul { max-width: 200px; width: 100%; } .megaCol.hasImage.setOne img { width: 100%; max-width: 200px; max-height: 340px; } .megaCol.hasImage.setTwo ul { max-width: 265px; width: 100%; } .megaCol.hasImage.setTwo img { width: 100%; width: 100%; max-width: 265px; max-height: 160px; } .megaCol .megaImage { position: relative; padding: 0; margin: 0 0 26px 0; } .megaImageTitle { position: absolute; top: auto; bottom: 0; left: 0; right: 0; width: 100%; padding: 15px 20px; color: var(--white); text-shadow: 0px 0px 7px rgba(0, 0, 0, 1); font-family: var(--bodyFont); line-height: 1.2; z-index: 1; } .megaImageTitle .lineOne { display: block; font-size: 1.15rem; font-weight: 400; margin: 0 0 5px 0; } .megaImageTitle .lineTwo { display: block; font-size: 1.4rem; font-weight: 700; } .megaImage a > .megaImageTitle .lineTwo:after { display: inline-block; opacity: 0; content:""; font-size: 1.4rem; font-weight: 700; width: 14px; height: 21px; margin: 0 0 -3px 0; background-image: url(../images/icons/carrot-right-large-white.svg); background-repeat: no-repeat; transform: translate(10px, 0); transition: var(--transition); } .megaImage a:hover > .megaImageTitle .lineTwo:after, .megaImage a:focus > .megaImageTitle .lineTwo:after { opacity: 1; } @media all and (max-width: 1790px) { /* Header Logo */ .headerLogoArea { padding: 15px 0px 20px; } /* Header Utility Message */ .header .message { width: 39%; } .header .message a .lineOne { font-size: min(.99vw, .88rem); } .header .message a .lineTwo { font-size: min(.99vw, 1rem); } .header .message a:after { width: 6px; height: 16px; } /* Header Utility Tagline */ .header .tagline { width: 22%; } /* Header Utility Nav */ .header ul.ctaLinks { width: 39%; padding: 0; } .header ul.ctaLinks li a .lineOne { font-size: min(1.0vw, .88rem); } .header ul.ctaLinks li a .lineTwo { font-size: min(1.0vw, 1rem); } .header ul.ctaLinks li a:after { width: 6px; height: 15px; transform: translate(10px, 0); } .header ul.ctaLinks li a:hover:after, .header ul.ctaLinks li a:focus:after { transform: translate(15px, 0); } } @media (min-width: 1251px) { .tabletMenuOnly { display: none; } /* Header Utility */ .utility li.tabletOnly { display: none; } /* Header Message */ #mainMenu .message { display: none; } /* Header Account Options */ .accountOptions > li { position: relative; } .accountOptions > li.inspirationMenu { padding-right: 2%; } .accountOptions > li.myAccountMenu { padding-right: 2%; } /* Header Main Navigation */ #mainMenu { width: 100%; display: block; } .mainNav { position: relative; display: flex; justify-content: space-between; width: 100%; padding: 8px 0 0 0; border-top: 1px solid #7F828733; border-bottom: 1px solid #7F828733; border-left: 1px solid transparent; border-right: 1px solid transparent; } .mainNav > li { text-align: center; } .mainNav > li > a { position: relative; color: var(--darkGray); font-weight: 500; margin: 0; display: inline-block; border-bottom: 4px solid transparent; text-decoration: none; cursor: pointer; transition: var(--transition); } .mainNav:hover > li > a, .mainNav:focus-within > li > a { color: rgba(62,62,62,.5); transition: color .3s ease-out; } .mainNav > li.sub > a, .mainNav > li.sub > a { transition-delay: 0.3s; } body .mainNav > li:hover > a, body .mainNav > li > a:hover, body .mainNav > li > a:focus, body .mainNav > li:focus-within > a { color: var(--darkGray); } body .mainNav > li > a:after { position: absolute; bottom: -7px; display: block; content:""; width: 100%; height: 4px; background-color: var(--color2); border: 1px solid var(--color2); border-radius: 10px; opacity: 0; transition: opacity .3s ease-out; z-index: 1; } body .mainNav > li.sub > a:after { transition-delay: 0.8s; } body .mainNav > li:hover > a:after, body .mainNav > li > a:hover:after, body .mainNav > li > a:focus:after, body .mainNav > li:focus-within > a:after { opacity: 1; transition: opacity .3s ease-out; } li.dl-back, .dl-menuwrapper li.accountInfo { display: none !important; } /* Mega Menu */ .mainNav > li:hover > .dl-submenu, .mainNav > li a:focus ~ .dl-submenu, .mainNav > li:focus-within > .dl-submenu { display: block; visibility: visible; opacity: 1; transition: all .3s ease-in; transition-delay: 0.3s; } .mainNav > li > .dl-submenu { visibility: hidden; width: 100%; opacity: 0; position: absolute; top: 100%; left: 0; text-align: left; background: rgba(255,255,255,1.0); border: 1px solid var(--lightGray); box-shadow: 0px 7px 6px -6px rgba(0,0,0,.25); transition: all .3s ease-out; transition-delay: 0.8s; } .mega { box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05) inset; } .mega > .wrapper { max-width: 100%; padding: 45px 5% 20px 5%; } .mega .container { position: relative; display: flex; overflow: hidden; max-width: 1920px; padding: 0; } .megaBottom { width: 100%; padding: 15px 0; } /* Mega Menu Columns */ .megaCol { position: relative; display: flex; flex: auto; } .megaCol.hasImage ul { margin-left: auto; } .megaCol ul { vertical-align: top; } .megaCol ul.dl-submenu { display: flex; flex-wrap: wrap; flex-direction: column; /*height: 375px;*/ } .megaCol ul.dl-submenu:after { content: ''; width: 40%; } .megaCol ul.dl-submenu > li { padding-left: 15px; border-left: 1px solid #e1e0dd; } .megaCol:first-of-type ul { margin: 0; } .megaCol:first-of-type ul.desktopOnly { margin: 0 15% 0 24px; } .megaCol ul.desktopOnly { margin: 0 12% 0 13%; } /* Mega Menu List Items */ .megaCol li.subSection { font-family: var(--bodyFont); font-size: 1.05rem; font-weight: 500; color: var(--color1); margin-bottom: 12px; } .megaCol li { display: block; padding: 0 5px 4px 5px; font-size: .9rem; margin-bottom: 4px; } .megaCol ul li a { color: var(--darkGray); text-transform: none; margin:0; line-height: 1.2; text-decoration: none; } .megaCol ul a:hover, .megaCol ul focus a:focus { text-decoration: underline; } /* Mega Menu Image */ .megaCol img { display: block; width: 100%; } body.mobileOn { overflow-y: auto !important; } } @media all and (max-width: 1250px) { .desktopMenuOnly { display: none; } .tabletMenuOnly { display: block; } /* Mobile Header */ .header > .container { padding: 0 20px 0 0; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .headerLogoArea { width: 100%; justify-content: start; align-items: center; padding: 5px 0; } .header .logo, .header .logo.wholesale, .header .logo.consumer { width: auto; padding: 10px 0; text-align: center; margin: 0 auto; flex: auto; } .header .logo.wholesale, .header .logo.consumer { padding: 0; } .header .logo.wholesale div, .header .logo.consumer div { font-size: .8rem; margin: 4px 0 0 0; } .header .logo.wholesale + .accountOptions > li > a, .header .logo.consumer + .accountOptions > li > a, .accountOptions > li > button { padding: 0; } .header .logo a { margin: 0 auto; } .header .logo img { max-width: 225px; margin: 0; } /* Mobile Utility */ .utility { width: 100%; padding: 0; } .utility .container { flex-direction: column; padding: 0; } /* Header Utility Message moved into mobile menu */ .header .utility .message { display: none; } .header .message { width: 100%; margin: 0; background-color: var(--lightGray); padding: 14px 10.25%; } .header .message a { color: var(--darkGray); font-size: 1rem; line-height: 1.4; } .header .message a:hover, .message a:focus { color: var(--darkGray); } .header .message a .lineOne { color: var(--darkGray); font-size: min(.82rem, .82rem); margin: 0 0 6px 0; } .header .message a .lineTwo { color: var(--darkGray); font-size: min(.88rem, .88rem); } .header .message a:after { background-image: url(../images/icons/carrot-right-blue.svg); margin: 0 0 2px 0; transform: translate(5px, 0); } .header .message a:hover:after, .header .message a:focus:after { transform: translate(10px, 0); } /* Header Utility Tagline */ .header .tagline { width: 100%; font-size: min(.95rem, .95rem); padding: 10px 25px; } .utility li.tabletOnly { margin: 0; padding: 0; } /* Header Utility Nav */ .header ul.ctaLinks { display: none; } /* Header Account Options */ .headerLogoArea .accountOptions { width: auto; margin: 0 0 0 auto; } .accountOptions > li { flex: none; padding: 5px; } .accountOptions > li > a .headerIcon, .accountOptions > li > button .headerIcon { background-color: rgba(127, 130, 135, 0); } .accountOptions > li > button .headerIcon { display: inline-block; } .accountOptions > li > button .accountIcon.headerIcon { padding-right: 0; } .accountOptions .accountIcon { background-image: url(../images/icons/header-icon-my-account-mobile.svg); } .accountOptions > li > a:hover .accountIcon, .accountOptions > li > a:focus .accountIcon, .accountOptions > li > button:hover .accountIcon, .accountOptions > li > button:focus .accountIcon { background-image: url(../images/icons/header-icon-my-account-mobile-hover.svg); } .accountOptions > li > button .headerIconText { padding: 17px 0 0 0; margin: 0 0 0 -9px; vertical-align: top; } .myAccountMenu.open .headerIconText:after { padding: 0; } .myAccountMenu .headerIconText:after { padding: 0; } .accountOptions > li > a .headerIconText, .accountOptions > li > button .headerIconText span { position: absolute; left: -99999px; } .accountOptions > li > a:hover .headerIcon, .accountOptions > li > a:focus .headerIcon, .accountOptions > li > button:hover .headerIcon, .accountOptions > li > button:focus .headerIcon { transform: translate(0, 0); } #miniCartCount { font-size: .75rem; top: -4px; right: -5px; } .accountOptions .toolbar { margin: -2px 0 0 0; border: 1px solid var(--white); border-radius: 3px; } /* Mobile Search */ .header .search { visibility: hidden; position: absolute; width: 0; margin: 3px 0 3px 50px; z-index: 1; transition: width .4s ease-in-out; } #toggleSearch.open ~ .search { visibility: visible; width: 89%; } .header .search .placeholder { font-size: 1rem; width: 94%; box-shadow: none; margin: 0; padding: 5px 40px; } #toggleSearch { position: relative; color: var(--color2); font-size: 1rem; font-weight: 600; line-height: 1; min-width: 40px; height: 40px; background-color: transparent; border: 1px solid transparent; padding: 0; margin: 0 20px 0 0; cursor: pointer; transition: all 0.4s ease-in-out; z-index: 1; background-image: url(../images/icons/search-icon-mobile.svg); background-position: center; background-repeat: no-repeat; z-index: 2; transition: var(--transition); } #toggleSearch:hover, #toggleSearch:focus { background-image: url(../images/icons/search-icon-mobile-hover.svg); } .header .searchButton { opacity: 0; position: relative; border: none; font-size: 1.125em; min-width: 43px; height: 43px; padding: 0; margin: 0 0 0 auto; cursor: pointer; background-color: var(--lightGray); background-image: url(../images/icons/carrot-right-blue-on-gray.svg); background-repeat: no-repeat; background-position: center; transition: var(--transition); } .header .searchBtn.open ~ .search .searchButton { opacity: 1; } .header .searchButton:hover, .header .searchButton:focus { background-image: url(../images/icons/carrot-right-gray.svg); } /* Mobile Menu */ body.mobileOn { height: 100%; overflow: hidden; } /* Mega Menu List Items */ .megaCol li.subSection { display: none; } #mainMenu .mobileOnly { display: block; clear: both; } #mainMenu { visibility: hidden; background-color: #fbfbfb; max-width: 390px; width: 100%; top: 100px; position: fixed; height: 0; overflow-y: auto; z-index: 15; box-shadow: 0px 8px 10px 0px rgba(87,87,87,1); transition: all .4s ease-in-out; } body.mobileOn #mainMenu { visibility: visible; height: 90%; } .dl-menuwrapper { display: block; top: 18px; } .dim { display: none; opacity: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; transition: opacity 0.8s ease-in-out; z-index: 2; } .dim.on { display: block; opacity: 1; z-index: 6; } /* Mobile Menu Buttons */ .toggleBtn { position: relative; display: block; width: auto; min-width: 50px; height: 40px; background-color: var(--white); padding: 10px; margin: 0; border:none; cursor: pointer; transform:scale(1); } .toggleBtn .iconBar { position:relative; display:block; background-color: var(--darkGray); width: 21px; height: 2px; margin: 4px auto; border-radius: 5px; transition: all 250ms ease-in-out; } .iconBar.bar1Active { width: 22px; transform:translateY(6px) translateX(0) rotate(45deg); } .iconBar.bar2Active { width: 22px; opacity: 0; transform:scale(0); } .iconBar.bar3Active { width: 22px; transform:translateY(-6px) translateX(0) rotate(-45deg); } .toggleBtn .menuText { display: inline-block; color: var(--darkGray); padding: 4px 0 0 4px; } .toggleBtn .menuText.close { display: none; } .toggleBtn.open .menuText.open { display: none; } .toggleBtn.open .menuText.close { display: inline-block; } /* =============================================== Mobile Menu Items ===============================================*/ .navSubButton { display: none; } .dl-menuwrapper { width: 100%; position: relative; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; } .dl-menuwrapper > ul { padding: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow-y: auto; } .dl-menuwrapper li { position: relative; } .dl-menuwrapper li a { display: block; position: relative; color: var(--darkGray); font-size: .98rem; font-weight: 500; padding: 4px 0; margin: 4px 10.25%; line-height: 1.45; text-decoration: none; } .dl-menuwrapper li a:after { content: ""; margin: 0 0 -4px 14px; } .dl-menuwrapper .mainNav > li > a { font-size: 1.14rem; font-weight: 600; padding: 10px 0; margin: 0 10.25%; } .dl-menuwrapper .mainNav > li:not(.accountInfo):not(.lastItem) > a { border-bottom: 1px solid #ebebeb; } .dl-menuwrapper li span.visuallyhidden { position: absolute; } .dl-menuwrapper li.accountInfo { display: block !important; background-color: var(--lightGray); } .dl-menuwrapper li.lastItem + li.accountInfo { margin-top: 20px; padding-top: 12px; } .dl-menuwrapper li.accountInfo.lastItem { padding-bottom: 75px; } .dl-menuwrapper li.accountInfo a, .dl-menuwrapper li.accountInfo span { display: inline-block; font-size: .82rem; padding: 5px 0; margin: 0 10.25%; } .dl-menuwrapper li.accountInfo .title { font-size: 1rem; font-weight: 600; margin-top: 10px; } .dl-menuwrapper li.accountInfo a:after { content: ""; position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 0 -5px 12px; background-image: url(../images/icons/carrot-right-blue.svg); background-repeat: no-repeat; background-position: center; background-size: 40%; } .no-touch .dl-menuwrapper li a:hover { color: var(--color1); } .dl-menuwrapper li.dl-back > a { color: var(--color1); font-size: 1.14rem; font-weight: 600; padding: 4px 30px; margin-left: 15px; z-index: 1; } .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { content: ""; position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 0 -4px 14px; background-image: url(../images/icons/carrot-right-blue.svg); background-repeat: no-repeat; background-position: center; background-size: 45%; } .dl-menuwrapper li.dl-back:after { position: absolute; top: 0; left: 18px; color: var(--color1); line-height: 36px; -webkit-transform: rotate(180deg); transform: rotate(180deg); margin: 7px 0 0 0; } .dl-menuwrapper li > a:after { right: 7px; color: var(--color1); } .dl-menuwrapper .dl-menu { position: absolute; width: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dl-menuwrapper .dl-menu.dl-menu-toggle { transition: all 0.3s ease; } .dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); transform: translateY(0px); overflow-y: hidden; } .dl-menuwrapper .container { padding-left: 0; padding-right: 0; padding-bottom: 20px; } /* Mega Menu Images */ .megaCol.hasImage > ul { overflow-y: visible; margin: 26px 8% 0 8%; } .megaCol.hasImage > ul li:last-of-type { margin-bottom: 0; } .megaCol.hasImage li.megaImage { display: block; overflow-y: visible; } .megaCol.hasImage li.megaImage a { display: block; padding: 0; margin: 0; } .dl-menuwrapper li.megaImage a:after { margin: 0; } .megaCol.hasImage.setOne ul, .megaCol.hasImage.setOne img { max-width: 200px; } .megaCol.hasImage.setTwo ul, .megaCol.hasImage.setTwo img { max-width: 268px; } .megaCol.hasImage.setTwo li.megaImage, .megaCol.hasImage.setTwo img { max-height: 125px; } /* Hide the inner submenus */ .mega .container > span, .dl-menuwrapper li .dl-submenu { display: none; } .dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > a { display: none; } li.dl-subviewopen > .dl-submenu > li.mega > div > div > div > ul > li , li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > div > div > div > div > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li, .dl-menu.dl-menuopen.dl-subview .mega { display: block; } li.dl-subviewopen > .dl-submenu > li.mega > div > div > div > ul > li.subSection, .subSection { display: none; } /* Dynamically added submenu outside of the menu context */ .dl-menuwrapper > .dl-submenu { position: absolute; width: 100%; top: 0; left: 0; margin: 0; } /* Animation classes for moving out and in */ .dl-menu.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s; } .dl-menu.dl-animate-out-2 { -webkit-animation: MenuAnimOut2 0.3s ease-in-out; animation: MenuAnimOut2 0.3s ease-in-out; } .dl-menu.dl-animate-out-3 { -webkit-animation: MenuAnimOut3 0.4s ease; animation: MenuAnimOut3 0.4s ease; } .dl-menu.dl-animate-out-4 { -webkit-animation: MenuAnimOut4 0.4s ease; animation: MenuAnimOut4 0.4s ease; } .dl-menu.dl-animate-out-5 { -webkit-animation: MenuAnimOut5 0.4s ease; animation: MenuAnimOut5 0.4s ease; } @-webkit-keyframes MenuAnimOut1 { 0% {} 50% { -webkit-transform: translateZ(-250px) rotateY(0deg); } 75% { -webkit-transform: translateZ(-372.5px) rotateY(0deg); opacity: .5; } 100% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @-webkit-keyframes MenuAnimOut2 { 0% {} 100% { -webkit-transform: translateX(-100%); opacity: 0; } } @-webkit-keyframes MenuAnimOut3 { 0% {} 100% { -webkit-transform: translateZ(300px); opacity: 0; } } @-webkit-keyframes MenuAnimOut4 { 0% {} 100% { -webkit-transform: translateZ(-300px); opacity: 0; } } @-webkit-keyframes MenuAnimOut5 { 0% {} 100% { -webkit-transform: translateY(40%); opacity: 0; } } @keyframes MenuAnimOut1 { 0% {} 50% { -webkit-transform: translateZ(-250px) rotateY(0deg); transform: translateZ(-250px) rotateY(0deg); } 75% { -webkit-transform: translateZ(-372.5px) rotateY(0deg); transform: translateZ(-372.5px) rotateY(0deg); opacity: .5; } 100% { -webkit-transform: translateZ(-500px) rotateY(0deg); transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @keyframes MenuAnimOut2 { 0% {} 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } } @keyframes MenuAnimOut3 { 0% {} 100% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } } @keyframes MenuAnimOut4 { 0% {} 100% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } } @keyframes MenuAnimOut5 { 0% {} 100% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0; } } .dl-menu.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; } .dl-menu.dl-animate-in-2 { -webkit-animation: MenuAnimIn2 0.3s ease-in-out; animation: MenuAnimIn2 0.3s ease-in-out; } .dl-menu.dl-animate-in-3 { -webkit-animation: MenuAnimIn3 0.4s ease; animation: MenuAnimIn3 0.4s ease; } .dl-menu.dl-animate-in-4 { -webkit-animation: MenuAnimIn4 0.4s ease; animation: MenuAnimIn4 0.4s ease; } .dl-menu.dl-animate-in-5 { -webkit-animation: MenuAnimIn5 0.4s ease; animation: MenuAnimIn5 0.4s ease; } @-webkit-keyframes MenuAnimIn1 { 0% { -webkit-transform: translateZ(-500px) rotateY(deg); opacity: 0; } 20% { -webkit-transform: translateZ(-250px) rotateY(0deg); opacity: 0.5; } 100% { -webkit-transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @-webkit-keyframes MenuAnimIn2 { 0% { -webkit-transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn3 { 0% { -webkit-transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn4 { 0% { -webkit-transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn5 { 0% { -webkit-transform: translateY(40%); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes MenuAnimIn1 { 0% { -webkit-transform: translateZ(-500px) rotateY(0deg); transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -webkit-transform: translateZ(-250px) rotateY(0deg); transform: translateZ(-250px) rotateY(0deg); opacity: 0.5; } 100% { -webkit-transform: translateZ(0px) rotateY(0deg); transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @keyframes MenuAnimIn2 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes MenuAnimIn3 { 0% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn4 { 0% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn5 { 0% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; } .dl-submenu.dl-animate-in-2 { -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out; animation: SubMenuAnimIn2 0.3s ease-in-out; } .dl-submenu.dl-animate-in-3 { -webkit-animation: SubMenuAnimIn3 0.4s ease; animation: SubMenuAnimIn3 0.4s ease; } .dl-submenu.dl-animate-in-4 { -webkit-animation: SubMenuAnimIn4 0.4s ease; animation: SubMenuAnimIn4 0.4s ease; } .dl-submenu.dl-animate-in-5 { -webkit-animation: SubMenuAnimIn5 0.4s ease; animation: SubMenuAnimIn5 0.4s ease; } @-webkit-keyframes SubMenuAnimIn1 { 0% { -webkit-transform: translateX(50%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn2 { 0% { -webkit-transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn3 { 0% { -webkit-transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn4 { 0% { -webkit-transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn5 { 0% { -webkit-transform: translateZ(-200px); opacity: 0; } 100% { -webkit-transform: translateZ(0); opacity: 1; } } @keyframes SubMenuAnimIn1 { 0% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn2 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn3 { 0% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn4 { 0% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn5 { 0% { -webkit-transform: translateZ(-200px); transform: translateZ(-200px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; } .dl-submenu.dl-animate-out-2 { -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out; animation: SubMenuAnimOut2 0.3s ease-in-out; } .dl-submenu.dl-animate-out-3 { -webkit-animation: SubMenuAnimOut3 0.4s ease; animation: SubMenuAnimOut3 0.4s ease; } .dl-submenu.dl-animate-out-4 { -webkit-animation: SubMenuAnimOut4 0.4s ease; animation: SubMenuAnimOut4 0.4s ease; } .dl-submenu.dl-animate-out-5 { -webkit-animation: SubMenuAnimOut5 0.4s ease; animation: SubMenuAnimOut5 0.4s ease; } @-webkit-keyframes SubMenuAnimOut1 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(50%); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut2 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(100%); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut3 { 0% { -webkit-transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(-300px); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut4 { 0% { -webkit-transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(300px); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut5 { 0% { -webkit-transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-200px); opacity: 0; } } @keyframes SubMenuAnimOut1 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } } @keyframes SubMenuAnimOut2 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } @keyframes SubMenuAnimOut3 { 0% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } } @keyframes SubMenuAnimOut4 { 0% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } } @keyframes SubMenuAnimOut5 { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-200px); transform: translateZ(-200px); opacity: 0; } } /* No JS Fallback */ .no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-transform: none; transform: none; } .no-js .dl-menuwrapper li .dl-submenu { display: block; } .no-js .dl-menuwrapper li.dl-back { display: none; } .no-js .dl-menuwrapper li > a:not(:only-child) { color: var(--color1); } .no-js .dl-menuwrapper li > a:not(:only-child):after { content: ''; } } @media all and (max-width: 768px) { .header #toggleSearch.open ~ .search { width: 92%; } } @media all and (max-width: 720px) { .header #toggleSearch.open ~ .search { width: 85%; } } @media all and (max-width: 580px) { /* Mobile Header */ .header .logo img { max-width: 182px; } /* Header Utility Tagline */ .header .tagline { font-size: min(.75rem, .75rem); padding: 12px; } /* Mobile Search */ #toggleSearch.open ~ .search { width: 82%; } } @media all and (max-width: 420px) { #toggleSearch { margin: 0; } .accountOptions > li { padding: 5px 1px; } #skipToTopNav .nxt-ac-main { width: 265px !important; } } @media all and (max-width: 380px) { .header > .container { padding: 0 10px 0 0; } #toggleSearch.open ~ .search { width: 75%; } } @media all and (max-width: 360px) { .header .logo img { max-width: 135px; } } /* iPhone Landscape Menu Height */ @media only screen and (min-width: 320px) and (max-width: 667px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) { .menu { height: 75%; } } @media only screen and (min-width: 320px) and (max-width: 736px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: landscape) { .menu { height: 75%; } } /* Android Landscape Menu Height */ @media screen and (width: 320px) and (height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { .menu { height: 75%; } } /* Default 404 Search */ .search404 { margin: auto; width: 50%; text-align: center; background-color: var(--white); padding: 10px; } .tbSearch404 { font-family: var(--bodyFont); font-weight: 400; font-size: 1.143em; display: inline-block; background-color: transparent; border: 1px solid #ebebeb; color: #434548; padding: 8px 10px; width: 100%; box-shadow: 0px 0px 5px 1px rgba(227,227,227,1); } @media all and (max-width: 768px) { .search404 { width: 100%; } } /* ============================ Footer CTA Banner * ============================*/ .footerCTA { position: relative; width: 100%; padding: 30px 3% 0 3%; margin: 0 auto -40px auto; z-index: 0; } .footerCTA > .wrapper { position: relative; display: flex; flex-direction: row; max-width: 1410px; width: 100%; min-height: 225px; overflow: hidden; } .footerCTAItem { display: flex; width: 100%; background-color: var(--color1); transition: var(--transition); } .footerCTA.gray .footerCTAItem { display: flex; width: 100%; background-color: var(--darkGray); } .footerCTAImgWrap img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform-origin: center center; transition: var(--transition); } .footerCTAItem:hover .footerCTAImgWrap img, .footerCTAItem:focus .footerCTAImgWrap img, .footerCTAItem:focus-within .footerCTAImgWrap img { transform: scale(1.05); } .footerCTAInfo { position: relative; display: flex; flex-direction: column; align-items: end; width: 100%; height: 100%; text-align: right; padding: 25px 2.5%; background-color: rgba(90, 148, 168, 0.70); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); z-index: 1; } .footerCTAItem:hover .footerCTAInfo, .footerCTAItem:focus .footerCTAInfo, .footerCTAItem:focus-within .footerCTAInfo { background-color: rgba(90, 148, 168, 0.80); } .footerCTA.gray .footerCTAInfo { background-color: rgba(0, 0, 0, 0.60); } .footerCTA.gray .footerCTAItem:hover .footerCTAInfo, .footerCTA.gray .footerCTAItem:focus .footerCTAInfo, .footerCTA.gray .footerCTAItem:focus-within .footerCTAInfo { background-color: rgba(0, 0, 0, 0.60); } .footerCTA h2 { width: auto; color: var(--white); margin-top: 0; margin-bottom: 3px; } .footerCTA .lineOne { font-weight: 300; } .footerCTA .textEffectLong { font-weight: 300; } .footerCTA .lineTwo { font-weight: 600; } .footerCTAInfo, .footerCTAInfo p { font-size: 1.13rem; line-height: 1.5; color: var(--white); } .footerCTAInfo p:last-child { margin-bottom: 0; } .footerCTAInfo a { color: var(--white); font-weight: 600; text-decoration: underline; } .footerCTAInfo a:hover, .footerCTAInfo a:focus { color: var(--white); } .footerCTA a.button { text-decoration: none; padding-top: 8px; padding-bottom: 8px; margin: 10px auto; border: 1px solid var(--white); background-color: transparent; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .footerCTA a.button:hover, .footerCTA a.button:focus { color: var(--color1); background-color: var(--white); padding-top: 8px; padding-bottom: 8px; background-color: var(--white); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .footerCTA a.button:hover:after, .footerCTA a.button:focus:after { background-image: url(../images/icons/carrot-right-blue.svg); } @media all and (min-width: 1381px) { .footerCTA .ctaText { width: 100%; max-width: 1042px; } .footerCTA .buttonItems { width: 100%; max-width: 220px; margin: auto; } } @media all and (max-width: 1380px) { .footerCTA .ctaText { max-width: 70%; } .footerCTA .buttonItems { max-width: 30%; margin: auto; } } @media all and (min-width: 961px) { .footerCTAInfo { display: flex; flex-direction: row; } .footerCTA h2 { font-size: min(2.98vw, 4rem); margin-bottom: 6px; } .footerCTA .ctaText { order: 2; margin: auto 0 0 auto; } .footerCTAItem:hover h2 .textEffectLong, .footerCTAItem:focus h2 .textEffectLong { opacity: 1; } .footerCTA .textEffectLong { display: inline-block; opacity: 0; margin-right: -10px; white-space: nowrap; vertical-align: top; overflow: hidden; transition: var(--transition); transition-delay: .2s; } .footerCTAItem:hover .textEffectLong, .footerCTAItem:focus .textEffectLong, .footerCTAItem:focus-within .textEffectLong { margin-right: 0; } .footerCTAItem:focus .textEffectLong, .footerCTAItem:focus-within .textEffectLong { width: auto !important; opacity: 1; } } @media all and (max-width: 960px) { .footerCTA { padding: 30px 30px 0 30px; } .footerCTA h2 { font-size: 2.5rem; } .footerCTAInfo { padding: 25px 20px; background-color: rgba(90, 148, 168, 0.80); } .footerCTAInfo, .footerCTAInfo p { font-size: 1.26rem; } .footerCTA .ctaText { max-width: 100%; } .footerCTA .buttonItems { max-width: 100%; margin: 18px auto; } .footerCTA .button, .footerCTA .button:hover, .footerCTA .button:focus { padding-top: 11px; padding-bottom: 11px; } } @media all and (max-width: 580px) { .footerCTA { padding-left: 20px; padding-right: 20px; } .footerCTA .buttonItems { display: flex; flex-direction: column; align-items: center; } .mainContent .footerCTA .button, .footerCTA .button { display: block; width: max-content; } } /* =============================================== Footer * ===============================================*/ .footer { width: 100%; display: flex; flex-direction: column; background-color: var(--lightGray); } .footerTop { display: flex; padding: 0 0 20px 0; margin: 0 0 30px 0; border-bottom: 1px solid rgba(127, 130, 135, .2); } .footerLogo img { max-width: 392px; width: 100%; } .footer a:hover, .footer a:focus { text-decoration: underline; } .footer a.button:hover, .footer a.button:focus { text-decoration: none; } .footer p { font-size: 1rem; margin-bottom: 10px; } .footer > .wrapper { max-width: 1650px; width: 100%; padding: 68px 3% 10px 3%; line-height: 1.5; } .footerCTA ~ .footer > .wrapper { padding-top: 104px; } .footerContent { display: flex; } /* Footer Left Column */ .footerLeft { width: 36%; margin: 0 3% 0 0; } .footerColName { font-family: var(--bodyFont); font-weight: 600; font-size: 1.286rem; line-height: 1.2; margin-bottom: 7px; } .footerColName.burtonblue-font { color: var(--color3); } .footer a { color: var(--color3); transition: var(--transition); } .footer a:hover, .footer a:focus { color: var(--darkGray); } .footer a.button { color: var(--white); padding-top: 8px; padding-bottom: 8px; } .footer a.button:hover, .footer a.button:focus { color: var(--white); } .footerSubtext { font-family: var(--bodyFont); font-weight: 600; font-size: 1.13rem; line-height: 1; margin: 0 0 15px 0; } .footer .contactbar { font-size: 1rem; margin-bottom: 9px; } .footer .contactbar a, .footer .contactbar span { font-weight: 600; } .socialbar { display: flex; justify-content: flex-end; margin: 0 0 0 auto; } .socialbar a { padding: 0; margin: 0 0 0 35px; vertical-align:top; line-height: 1.2; transform: translate(0, 0); transition: var(--transition); } .socialbar a:hover, .socialbar a:focus { transform: translate(0, -5px); } .socialbar a span { position: absolute; left: -999999px; } .socialbar img {max-width: 30px; width: 100%; } /* Footer Center Column */ .footerCenter { width: 39%; margin: 0 3% 0 0; } .footerCenter .footerText { max-width: 300px; margin: 20px 0; } .footerCenter .footerText p { margin-bottom: 28px; } .whiteBox.news .mfp-iframe-holder .mfp-content { min-height: 250px; max-height: 250px; } /* Footer Right Column */ .footerLinks { width: 21%; margin: 0 3% 0 auto; } .footerLink { padding: 0 0 0 20px; margin: 10px 0 0 0; border-left: 1px solid rgba(127, 130, 135, .2); } .footerLink li { font-size: 1rem; margin-bottom: 3px; } .footerLink li a { color: var(--darkGray); text-decoration: none; } .footerLink li a:hover, .footerLink li a:focus { text-decoration: underline; } /* Footer Copyright and Links */ .footerNav { width: 100%; background-color: var(--lightGray); padding: 16px 5% 32px 5%; margin: 0 auto; text-align: center; } .footerNav li { display: inline-block; font-size: .88rem; padding: 0 5px; margin: 3px 0; } .footerNav li.copy { padding: 0; border-right: none; } .footerNav li a { font-weight: 600; } .footerNav li:last-child { border-right: none; } @media all and (max-width:960px) { /* Footer */ .footer > .wrapper { padding: 38px 3% 10px 3%; } .footerLogo img { max-width: 280px; } .footerContent { flex-direction: column; flex-flow: wrap; padding: 0 20px; } .footerLeft, .footerCenter, .footerLinks { width: 48%; margin: 0 2% 0 0; padding-bottom: 20px; } .footerCenter { padding-bottom: 40px; } .footerCenter .footerText p { text-align: left; } .socialbar a { margin: 0 0 0 20px; } } @media all and (max-width: 580px) { /* Footer */ .footerTop { flex-direction: column; padding: 0 8.5% 50px 8.5%; } .footerLogo { margin: 0 auto 20px auto; } .footerLeft, .footerCenter, .footerLinks { width: 100%; margin: 0; padding-bottom: 20px; text-align: left; } .footerColName { font-size: 1.6rem; } .footerSubtext { font-size: 1.25rem; } .socialbar { justify-content: center; margin: 0 auto; } .socialbar a:first-of-type { margin-left: 0; } /* Footer Columns */ .footerCenter .footerText { text-align: center; } .footerLink li { font-size: 1.15rem; margin-bottom: 2px; } } /* =============================================== Footer Pop-up * ===============================================*/ .footReg { position: fixed; width: 100%; z-index: 999; height: auto; top: 0; bottom: 0; right: 0; left: 0; margin-right: auto; margin-left: auto; display: flex; justify-content: center; align-items: center; } .registerToaster .closeButton { position: absolute; top: 30px; bottom: auto; left: auto; right: 30px; cursor: pointer; margin: 0; padding: 0; width: 27px; height: 27px; color: var(--white); background-image: url(../images/icons/close-white.svg); background-repeat: no-repeat; background-size: 100%; } .registerToaster .closeButton span { color: var(--white); } .registerToaster { position: absolute; display:block; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 1048px; font-family: var(--bodyFont); } .registerToaster.noImage { max-width: 690px; } .registerToaster > .wrapper { position: relative; max-width: 94%; color: var(--white); background-color: var(--color3); margin: 0 3%; } .toasterMSG { display: flex; flex-direction: row; } .footRegImpact { max-width: 340px; width: 100%; } .footRegImpact img { min-height: 100%; object-fit: cover; } .footRegContent { display: flex; flex-direction: column; align-self: center; color: var(--white); background-color: var(--color3); padding: 30px 6.5%; margin: 0 auto; } .registerToaster .name { display: block; font-family: var(--bodyFont); font-size: 2.25rem; font-weight: 600; color: var(--white); line-height: 1.2; text-align: center; } .registerToaster p { color: var(--white); display:block; font-family: var(--bodyFont); } .registerToaster .message { font-size: 1.15em; line-height: 1.4; color: var(--white); margin: 10px 0; } .message.center > p { color: var(--white); } .registerToaster .button.auto { font-size: 1.15rem; font-weight: 500; color: var(--color1); background-color: var(--white); border: 1px solid var(--white); padding: 13px 21px 9px 21px; margin-bottom: 10px; max-width: 382px; width: 100%; } .registerToaster .button.auto:hover, .registerToaster .button.auto:focus { color: var(--white); background-color: var(--color3); } .registerToaster .button:after { display: none; } .registerToaster .closeLink { display: block; font-family: var(--bodyFont); font-size: .9rem; font-weight: 400; color: var(--white); line-height: 1; text-align: center; text-decoration: underline; background-color: var(--color3); border: none; margin: 5px auto; cursor: pointer; } .registerToaster .closeLink:hover, .registerToaster .closeLink:focus { text-decoration: none; } @media all and (max-width: 960px) { .registerToaster > .wrapper { width: 88%; margin: 0 6%; } .registerToaster .closeButton { top: 20px; right: 20px; } .footRegImpact { display: none; } .footRegContent { padding: 55px 6.5%; } .registerToaster .name { font-size: 1.85rem; } } /* =============================================== Footer Slide-up Drawer * ===============================================*/ .foot { position: fixed; width: 100%; max-width: 1920px; z-index: 22; height: auto; right: 0; left: 0; padding: 0 3%; margin-right: auto; margin-left: auto; bottom: 0; } .toasterSlideup { position:relative; display: block; margin: 0 auto; width: 100%; max-width: 1800px; color: var(--white); text-align: center; background-color: var(--color3); padding: 65px 3% 15px 3%; } .toasterSlideup .closeButton { position: absolute; top: 28px; bottom: auto; left: auto; right: 42px; color: var(--white); cursor: pointer; margin: 0; padding: 0; width: 27px; height: 27px; background-image: url(../images/icons/close-white.svg); background-repeat: no-repeat; background-size: 100%; } .toasterSlideup .subName { display: block; font-family: var(--bodyFont); font-size: 1.7rem; font-weight: 300; color: var(--white); text-align: center; margin: 0 auto 20px auto; width: 100%; } .toasterSlideup .name { display: block; color: var(--white); font-size: 2.25rem; font-weight: 600; line-height: 1.2; text-align:center; margin: 8px 0; } .toasterSlideup p { display:block; } .toasterSlideup .button { font-weight: 600; margin: 26px auto; background-color: var(--color3); border: 1px solid var(--white); } @media (max-width: 1250px) { .foot { padding: 0; } } @media all and (max-width: 960px) { .toasterSlideup .subName { font-size: 1.4rem; } .toasterSlideup .name { font-size: 1.85rem; } } /* =============================================== Back to Top Link * ===============================================*/ a#topLink { display: none; opacity: 1; background-color: var(--lightGray); right: 25px; bottom: 25px; color: var(--darkGray); font-size: 0.75rem; font-family: var(--bodyFont); font-weight: 500; text-align: center; max-width: 45px; width: 100%; height: 45px; padding: 0 0 3px 0; text-decoration: none; position: fixed; z-index: 999999; border: 1px solid var(--lightGray); border-radius: 50%; text-align: center; box-shadow: -1px 2px 2px rgba(0,0,0,0.2); } a#topLink:before { display: block; content:""; width: 16px; height: 8px; margin: 8px auto 5px auto; background-image: url(../images/icons/carrot-up-gray.svg); background-size: 100%; background-repeat: no-repeat; transition: var(--transition); } a#topLink:hover, a#topLink:focus { background-color: var(--white); } /* =============================================== Live Person * ===============================================*/ .LPMcontainer.LPMslider, .LPMcontainer.LPMoverlay { min-height: 160px !important; top:60% !important; margin-right: 0 !important; background-color: var(--color3) !important; } .LPMcontainer.LPMoverlay > img { margin: 5px 0px !important; left: 10px !important; } .lp_desktop { display: block; background-color: var(--color1) !important; } .lp_header.lpc_maximized-header.lpc_desktop, .lp_submit_button { background-color: var(--color1) !important; } /* =============================================== Impact Areas * ===============================================*/ /* ADA Slider Play/Pause Controls */ .slick-autoplay-toggle-button { position: absolute; left: 15px; bottom: 15px; z-index: 10; opacity: 0.95; background: none; border: 0; cursor: pointer; color: var(--white); } .slick-autoplay-toggle-button:focus, .slick-autoplay-toggle-button:hover { opacity: 1; } .slick-autoplay-toggle-button:focus { color: var(--white); } .slick-autoplay-toggle-button .slick-pause-icon:before, .slick-autoplay-toggle-button .slick-play-icon:before { font-size: 1rem; width: 45px; height: 45px; line-height: 20px; text-align: center; padding-right: 10px; } .slick-autoplay-toggle-button .slick-pause-icon:before { content: url(../images/icons/pause-button.svg); } .slick-autoplay-toggle-button .slick-play-icon:before { content: url(../images/icons/play-button.svg); } .slick-autoplay-toggle-button .slick-sr-only { position: absolute; left: -99999px; } /* Home Impact Slider */ .impact.home { position: relative; display: flex; flex-direction: column; max-width: 100%; max-width: 1920px; margin: 0 auto; height: inherit; /*max-height: 562px;*/ max-height: none; background: var(--white); overflow: hidden; z-index: 2; } .impact.home > .slides, .impact.home > .video { position: relative; background-color: var(--color1); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25); } .impact.home .slick-dotted.slick-slider { margin-bottom: 0; } .impact.home .group:not(:first-child) { display: none; } .impact.home .slick-initialized .group{ display: flex !important; flex-direction: column; } .impact.home .slick-slide > div { width: 100%; } .impact.home img, .impact.home video { max-width: none; max-height: 562px; min-height: 100%; width: 100%; object-fit: cover; } .impact.home .half img, .impact.home .half video { display: flex; flex-direction: row; /*max-width: 662px;*/ } .impact.home .full img, .impact.home .full video { max-width: none; } .impact.home .group { position: relative; height: 100%; } .impact.home .group > a { height: 100%; } .impact.home .marker { position: absolute; top: 20px; bottom: auto; left: 20px; right: auto; font-size: 1.12rem; font-weight: 600; font-style: italic; color: var(--white); letter-spacing: .08em; line-height: 1; text-align: center; padding: 5px 30px; background-color: var(--red); border: 1px solid var(--red); border-radius: 5px; } .impact.home .marker.red { background-color: var(--red); border: 1px solid var(--red); } .impact.home .marker.green { background-color: var(--green); border: 1px solid var(--green); } /* Home Impact Caption */ .impact.home .captionWrap { display: flex; flex-direction: row; height: 100%; } .impact.home .captionWrap > a { display: flex; width: 100%; height: auto; color: unset; text-decoration: none; } .impact.home .captionWrap > a:focus { border: 1px solid var(--color3); } .impact.home .captionImg { width: 56%; /*max-width: 993px;*/ } .impact.home .full .captionImg { display: flex; width: 100%; max-width: none; /*max-width: 1785px;*/ min-height: 100%; } .impact.home .full .captionImg picture { display: flex; flex: auto; } .impact.home .captionWrap.left .captionImg { order: 2; } .impact.home .captionWrap.center .captionImg { width: 30%; } .impact.home .caption { display: flex; flex-flow: wrap; align-content: center; align-self: center; width: 44%; /*max-width: 783px;*/ height: 100%; font-family: var(--bodyFont); text-align: center; padding: 50px 2.5% 65px 2.5%; } .impact.home .captionWrap.center .caption { width: 40%; /*max-width: 714px;*/ } .impact.home .captionLineOne { width: 100%; font-size: min(2.6vw, 3rem); font-weight: 200; line-height: 1.2; margin-bottom: 15px; margin-left: auto; margin-right: auto; } .impact.home .captionLineTwo { width: 100%; font-size: min(5.5vw, 6.25rem); font-weight: 600; line-height: 1; text-transform: uppercase; margin-bottom: 10px; margin-left: auto; margin-right: auto; } .impact.home .captionLineThree { width: 100%; font-size: min(1.9vw, 2.25rem); font-weight: 200; line-height: 1.2; margin-left: auto; margin-right: auto; } .impact.home .captionLineFour { width: 100%; font-size: min(1.9vw, 1.1rem); font-weight: 500; line-height: 1.2; margin-top: 40px; margin-left: auto; margin-right: auto; } .impact.home .caption .button { color: inherit; background-color: transparent; border-width: 1px; border-style: solid; border-color: inherit; padding-top: 8px; padding-bottom: 8px; margin: 40px auto 0 auto; } .impact.home .caption .button:hover, .impact.home .caption .button:focus { color: var(--color1); background-color: var(--white); } .impact.home .caption .button:after { height: 14px; } .impact.home .caption .button:hover:after, .impact.home .caption .button:focus:after { background-image: url(../images/icons/carrot-right-blue.svg); } /* Home Impact Controls */ .impact.home .slick-prev, .impact.home .slick-next { width: 40px; height: 40px; top: auto; bottom: 2px; left: auto; background-color: rgba(62, 62, 62, 0.5); background-repeat: no-repeat; background-position: center; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); transition: var(--transition); } .impact.home .slick-prev:hover, .impact.home .slick-prev:focus, .impact.home .slick-next:hover, .impact.home .slick-next:focus { background-color: rgba(62, 62, 62, 0.9); } .impact.home .slick-prev { right: 80px; background-image: url(../images/icons/impact-arrow-left.svg); } .impact.home .slick-next { right: 20px; background-image: url(../images/icons/impact-arrow-right.svg); } .impact.home ul.slick-dots { position: absolute; display: block; width: auto; top: auto; bottom: 31px; left: auto; right: 195px; } .impact.home ul.slick-dots > li { width: 18px; margin: 0; } .impact.home ul.slick-dots > li:before { color: var(--white); font-size: 37px; } .impact.home ul.slick-dots > li button:before { font-size: 32px; color: rgba(255, 255, 255, 0.4); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .impact.home ul.slick-dots li.slick-active button:before, .impact.home ul.slick-dots li.slick-active button:hover:before, .impact.home ul.slick-dots li.slick-active button:focus:before { color: var(--white); } .impact.home ul.slick-dots > li button:hover:before, .impact.home ul.slick-dots > li button:focus:before { color: rgba(255, 255, 255, 0.8); } .impact.home .slick-pause-icon, .impact.home .slick-play-icon { color: var(--white); } .impact.home .slick-pause-icon:before { display: block; width: 26px; height: 26px; color: var(--white); content: ""; background: url(../images/icons/pause-button.svg) no-repeat center 0; background-size: contain; } .impact.home .slick-play-icon:before { display: block; width: 26px; height: 26px; content: ""; background: url(../images/icons/play-button.svg) no-repeat center 0; background-size: 40%; } .impact.home .slick-autoplay-toggle-button { width: 40px; height: 40px; left: auto; right: 146px; bottom: 17px; opacity: 1; } /* Home Impact Video Play/Pause Controls */ .impact.home #playButton { z-index: 2; position: absolute; top: auto; bottom: 25px; left: auto; right: 25px; cursor: pointer; background: none; border: none; -webkit-appearance: none; -moz-appearance: none; } .impact.home #playButton span { display: block; position: absolute; text-indent: -999999px; color: var(--white); } .impact.home #playButton:after { display: block; width: 26px; height: 26px; content: ""; background: url(../images/icons/pause-button.svg) no-repeat center 0; background-size: contain; } .impact.home #playButton.initial:after { background: url(../images/icons/play-button.svg) no-repeat center 0; background-size: 60%; } .impact.home #playButton.on:after, #playButton.initial:after { background: url(../images/icons/pause-button.svg) no-repeat center 0; background-size: contain; } @media all and (max-width:1850px) { .impact.home .caption { padding-left: 2%; padding-right: 2%; } } @media all and (min-width:961px) and (max-width:1380px) { /* Home Impact Caption */ .impact.home .caption .button { margin: 24px auto 0 auto; } .impact.home .captionLineOne { font-size: min(2.2vw, 2.9rem); } .impact.home .captionLineTwo { font-size: min(4.5vw, 6.25rem); } .impact.home .captionLineThree { font-size: min(1.6vw, 2.25rem); } .impact.home .captionLineFour { font-size: min(1.4vw, 1.5rem); } } @media all and (min-width:1251px) { .impact.home { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 3%; } } @media all and (min-width:961px) { .impact.home img.desktopImage { display: inline-flex !important; } .impact.home img.tabletImage { display: none !important; } .impact.home img.mobileImage { display: none !important; } .impact.home video { max-height: 562px; } /* Home Impact Caption */ .impact.home .caption { box-shadow: inset 4px 0px 4px 0px rgba(0, 0, 0, 0.25); } .impact.home .captionWrap.left .caption { box-shadow: inset -4px 0px 4px 0px rgba(0, 0, 0, 0.25); } .impact.home .captionWrap.center .caption { box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.25); z-index: 1; } } @media all and (max-width:960px) { .impact.home { max-height: none; } .impact.home .group { height: 100%; flex-direction: column; } .impact.home .group:not(:first-child), .impact.home .slick-initialized .group:not(:first-child) { display: none !important; } .impact.home .slick-initialized .group{ display: flex !important; } .impact.home .marker { font-size: 1rem; padding: 10px 25px; } .impact.home .caption { max-width: 960px; } .impact.home .captionWrap.center .caption { max-width: 960px; } .impact.home img.desktopImage { display: none !important; } .impact.home img.tabletImage { display: inline-flex !important; } .impact.home img.mobileImage { display: none !important; } .impact.home img, .impact.home video { max-width: 100%; max-height: 424px; width: 100%; } .impact.home img, .impact.home .half img, .impact.home .full img, .impact.home video, .impact.home .half video, .impact.home .full video { display: flex; flex-direction: row; max-width: 100%; min-height: 424px; max-height: 424px; object-fit: cover; } .impact.home .full img, .impact.home .full video { min-height: 100%; height: 100%; max-height: 100%; } /* Home Impact Caption */ .impact.home .captionWrap { display: flex; flex-direction: row; } .impact.home .captionWrap > a { flex-direction: column; } .impact.home .captionImg, .impact.home .captionWrap.center .captionImg { width: 100%; } .impact.home .full .captionImg { height: 660px; max-height: 660px; } .impact.home .captionImg ~ .captionImg { display: none; } .impact.home .caption, .impact.home .captionWrap.center .caption { width: 100%; padding: 32px 15% 52px 15%; box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .impact.home .captionWrap.left .captionImg { order: 0; } .impact.home .captionLineOne { font-size: min(3vw, 2.9rem); margin-bottom: 10px; } .impact.home .captionLineTwo { font-size: min(5.5vw, 6.25rem); margin-bottom: 15px; } .impact.home .captionLineThree { font-size: min(2.8vw, 2.25rem); } .impact.home .captionLineFour { font-size: min(2.1vw, 1.5rem); margin-top: 13px; } .impact.home .caption .button { margin: 22px auto 0 auto; } /* Home Impact Controls */ .impact.home .slick-prev, .impact.home .slick-next { width: 28px; height: 28px; background-size: 29%; } .impact.home .slick-prev { right: 64px; } .impact.home ul.slick-dots { bottom: 19px; right: -32px; left: 0; } .impact.home .slick-autoplay-toggle-button { bottom: 5px; right: 0; left: -110px; margin: 0 auto; } /* Home Impact Video Play/Pause Controls */ .impact.home #playButton { bottom: 12px; right: 12px; } } @media all and (max-width:580px) { .impact.home img.desktopImage { display: none !important; } .impact.home img.tabletImage { display: none !important; } .impact.home img.mobileImage { display: inline-flex !important; } .impact.home img, .impact.home .half img, .impact.home video, .impact.home .half video { height: 320px; max-height: 320px; min-height: 320px; } .impact.home .full img, .impact.home .full video { height: 100%; height: 100%; max-height: 100%; } /* Impact Caption */ .impact.home .full .captionImg { height: 615px; max-height: 615px; } .impact.home .slides .caption, .impact.home .slides .captionWrap.center .caption { padding: 18px 15% 52px 15%; } .impact.home.video .caption, .impact.home.video .captionWrap.center .caption { padding: 32px 15% 70px 15%; } .impact.home .captionLineOne { font-size: min(5.1vw, 1.2rem); } .impact.home .captionLineTwo { font-size: min(8.5vw, 2rem); } .impact.home .captionLineTwo + .button { margin-top: 0; } .impact.home .captionLineThree { font-size: min(5.8vw, 1.1rem); } .impact.home .captionLineFour { font-size: min(3.3vw, .85rem); } } /* Home Impact Quicklinks */ .impactLinks { display: flex; flex-direction: column; width: 100%; max-width: 1920px; margin: 0 auto; } .impactLinks > .wrapper { width: 100%; max-width: 100%; margin: 0 auto; padding: 15px 3%; background-color: var(--lightGray); } .mainBody .impactLinks ul { width: 100%; list-style-type: none; text-align: center; padding-left: 0; margin: 0 auto; text-indent: 0; } .mainBody .impactLinks ul li { display: inline-block; list-style-type: none; font-size: 1rem; font-weight: 400; text-align: center; padding: 0; margin: 0 20px 0 0; } .mainBody .impactLinks ul li.noLink { display: inline-block; list-style-type: none; font-size: 1rem; font-weight: 400; text-align: center; padding: 5px 0 5px 38px; margin: 0 20px 0 0; background: url(../images/icons/checkmark.png) no-repeat center left; background-size: 28px; } .mainBody .impactLinks ul li:last-child { margin-right: auto; } .mainBody .impactLinks ul li:before { display: none; } .mainBody .impactLinks ul li a { display: block; color: var(--darkGray); text-decoration: none; padding: 5px 0 5px 38px; transition: all 0.4s ease-in-out; background: url(../images/icons/checkmark.png) no-repeat center left; background-size: 28px; } .mainBody .impactLinks ul li a:hover, .mainBody .impactLinks ul li a:focus { color: var(--color3); text-decoration: underline; background-position: 0 1px } @media all and (min-width:1251px) { .impactLinks { width: 100%; padding: 0 3%; } } @media all and (max-width:960px) { .impactLinks > .wrapper { padding: 23px 3%; } .mainBody .impactLinks ul { display: flex; flex-direction: column; } .mainBody .impactLinks ul li { display: inline-block; padding: 0; margin: 0 auto; } .mainBody .impactLinks ul li.noLink { padding: 8px 0 8px 38px; margin: 0 auto; } .mainBody .impactLinks ul li a { padding: 8px 0 8px 38px; } } /* Landing and Interior Impact */ .impactLanding { position: relative; width: 100%; max-width: 1920px; height: 378px; padding: 0 3%; margin: 0 auto; } .interior .impactLanding { height: 307px; } .impactLanding > .wrapper { position: relative; display: flex; align-items: self-end; width: 100%; height: 100%; background-color: var(--color1); } .impactLanding img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 378px; display: block; z-index: 0; padding: 0; margin: 0; object-fit: cover; } .interior .impactLanding img { height: 307px; } .impactLanding .caption { display: block; position: relative; max-width: 1642px; width: 100%; margin: 0 auto; padding: 28px 3%; z-index: 2; } .impactLanding .caption .wrapper { max-width: 100%; } .impactLanding .impactSummary { display: inline-block; width: auto; color: var(--white); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 5px 0; } .impactLanding h1, .impactLanding .sectionName { display: inline-block; width: auto; font-size: 3rem; font-weight: 700; line-height: 1.15; color: var(--white); margin: 0; } .impactLanding .impactGradientTop { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.60); z-index: 0; } /* No Impact Image */ .impactLanding.noImage { height: auto; } .impactLanding.noImage, .interior .impactLanding.noImage { height: auto; } .impactLanding.noImage > .wrapper { background-color: var(--white); } .impactLanding.noImage .caption { padding: 55px 3% 0 3%; } .impactLanding.noImage .impactSummary { color: var(--color1); } .impactLanding.noImage h1, .impactLanding.noImage .sectionName { color: var(--darkGray); } /* No Impact Centered */ .impactLanding.noImage.center h1, .impactLanding.noImage.center .sectionName { margin-bottom: 10px; } .impactLanding.noImage.center .caption { padding: 40px 3%; } .impactLanding.noImage.center .impactSummary { font-weight: 500; color: var(--darkGray); margin: 10px auto 20px auto; } .impactLanding.noImage.center .caption > .wrapper { border-bottom: 2px solid rgba(127, 130, 135, 0.20); } /* Impact Inside Content Area */ .impactContent { padding: 0; } @media all and (max-width: 1755px){ .impactLanding.noImage { padding: 0; } } @media all and (max-width: 1440px){ .impactLanding { height: 378px; } .impactLanding img { height: 378px; } } @media all and (max-width: 1250px){ .impactLanding { padding-left: 0; padding-right: 0; } } @media all and (max-width: 960px){ .impactLanding { height: 355px; } .impactLanding img { height: 355px; } .impactLanding .impactSummary { font-size: 1rem; margin: 0 0 7px 0; } .impactLanding h1, .impactLanding .sectionName { display: block; font-size: 2rem; } /* No Impact Centered */ .impactLanding.noImage, .interior .impactLanding.noImage { text-align: left; } .impactLanding.noImage.center .caption { padding: 30px 3% 0 3%; } .impactLanding.noImage.center .impactSummary { font-size: 1.12rem; margin: 8px 0 28px 0; } /* Impact Inside Content Area */ .impactContent { padding: 0 20px; } } @media all and (max-width: 580px){ .impactLanding { height: 320px; } .impactLanding img { height: 320px; } .impactLanding .caption { height: auto; padding: 28px 20px; margin: 0; } /* No Impact Image */ .impactLanding.noImage .caption { padding: 28px 20px 0 20px; } /* No Impact Centered */ .impactLanding.noImage.center .caption { padding: 30px 20px 0 20px; } } /* =============================================== * Content * ===============================================*/ .mainBody { padding-top: 267px; } .mainBody ol { margin: 15px 0 15px 45px; } .mainBody .interiorContent ol { display: flex; flex-direction: column; } .mainBody ol + ol, .mainBody ol + ul { margin-top: 0; } .mainBody ol li { list-style: decimal; line-height: 1.5; margin-bottom: 3px; } .mainBody .components ol li { margin-right: 20px; } .mainBody ol li ol, .mainBody ol li ul { margin-top: 10px; } .mainBody ol li::marker { color: var(--color1); font-weight: 600; } .mainBody .blue.bg ol li::marker { color: var(--white); } .mainBody .columnsList ol li::marker, .mainBody .pullQuote ol li::marker { color: var(--color3); } .mainBody ul { margin: 28px 0 28px 35px; padding-left: 1.3em; } .mainBody .interiorContent nav:not(.sectionNav) ul { display: flex; flex-direction: column; } .mainBody ul + ul, .mainBody ul + ol { margin-top: 0; } .mainBody ul li { position: relative; display: block; clear: both; line-height: 1.5; list-style: outside; margin-bottom: 5px; } .mainBody .components ul li { margin-right: 20px; } .mainBody ul li ul, .mainBody ul li ol { margin-top: 10px; } .mainBody ul li:before { position: absolute; top: 8px; bottom: 0; left: -26px; content:""; width: 11px; height: 16px; margin: -2px 14px 0 0; background-image: url(../images/icons/carrot-right-blue-thick.svg); background-size: 100%; background-repeat: no-repeat; } .mainBody .center ul li:before, .mainBody ul li[style="text-align: center;"]:before, .mainBody .center ol li:before, .mainBody ol li[style="text-align: center;"]:before { left: auto; margin: -2px 14px 0 -20px; } .mainBody .center ol { list-style-position: inside; text-align: center; display: inline-block; } .mainBody .center ol li { text-align: left; } .mainBody .blue.bg ul li:before { background-image: url(../images/icons/carrot-right-white.svg); } .mainBody ul.slick-dots li:before { display: none; } .mainBody ul.checklist ul li:before, .mainBody .center ul.checklist li:before, .mainBody ul.checklist li[style="text-align: center;"]:before { display: none; content:''; } ul.checklist .checkmark { display: inline-block; background: url(../images/icons/checkmark.png); background-repeat: no-repeat; background-size: 28px; background-position: 0 0; width: 30px; height: 27px; margin-left: 10px; text-indent: -99999px; border: none; vertical-align: bottom; } .mainContent a.button { color: var(--white); } .mainContent a.button:hover, .mainContent a.button:focus { color: var(--white); } @media all and (max-width: 1250px) { .mainBody { padding-top: 100px; } } @media all and (max-width: 580px) { .mainBody ul li:before { top: 5px; } } /* ============================ Breadcrumbs * ============================*/ .breadcrumbs { width: 100%; clear: both; padding: 0; margin: 8px 0 0 0; } .breadcrumbs ol { list-style: none; margin: 0; } .breadcrumbs ol li { display: inline-block; font-size: 1rem; font-weight: 600; color: var(--white); margin-right: 0; } .breadcrumbs ol li:not(:last-child):after, .breadcrumbs ol li > span { display: inline-block; height: 19px; font-weight: 300; content: "/"; padding: 0; margin: 0 2px 0 6px; } .breadcrumbs ol li a { text-decoration: none; font-weight: 300; color: var(--white); color: rgba(255, 255, 255, 0.97); transition: var(--transition); } .breadcrumbs ol li a[aria-current="page"] { font-weight: 600; color: var(--white); } .breadcrumbs ol li a:hover { color: var(--white); text-decoration: underline; } /* No Impact Image */ .noImage .breadcrumbs ol li { color: var(--darkGray); } .noImage .breadcrumbs ol li a { color: var(--darkGray); } .noImage .breadcrumbs ol li a[aria-current="page"] { color: var(--darkGray); } .noImage .breadcrumbs ol li a:hover { color: var(--darkGray); } @media all and (max-width: 580px) { .breadcrumbs ol li { font-size: .88rem; } } /* =============================================== * Section Navigation * ===============================================*/ .sectionNav { position: relative; margin-bottom: 0; background-color: var(--white); z-index: 3; width: 100%; margin-right: 2.5%; } .sectionNav ul { margin: 0; padding: 0; text-indent: 0; list-style: none; } .sectionNav > ul { width: 100%; margin-bottom: 0; padding-bottom: 0; } .sectionNav .sectionTitle { display: none; } .sectionNav .sectionTitle .menuText { font-size: 1.12rem; font-weight: 600; color: var(--darkGray); line-height: 1.2; } .sectionNav .row { padding: 0; } .sectionNav .title { display: block; font-size: 1.5rem; font-weight: 600; color: var(--color1); border-bottom: 2px solid rgba(127, 130, 135, 0.20); padding: 40px 0 0 0; } .sectionNav ul li .title a { color: var(--color1); padding: 0; line-height: 1.45; } .sectionNav ul li .title a:hover, #mainWrapper .sectionNav ul li .title a:focus { color: var(--color1); text-decoration: none; } .sectionNav ul li { position: relative; font-size: 1.12rem; padding: 1px 0; margin-bottom: 0; } .sectionNav ul li a { display: inline-block; color: var(--black); text-decoration: none; padding: 2px 15px; } .sectionNav ul li::before { content: normal; } .sectionNav ul li.active ul { padding: 8px 0; margin: 10px 0; } .sectionNav ul li.active > a, .sectionNav ul li.active > .noLink { font-weight: 700; color: var(--color3); } .sectionNav ul li.active.sub > button { position: relative; width: 35px; height: 27px; padding: 0 10px 0 0; text-align: left; background-color: var(--white); border: 1px solid var(--white); } .sectionNav ul li.active.sub > button + ul.collapsedNavContent li.active.sub > button, .sectionNav ul.collapsedNavContent .collapseNavButton { background-color: var(--lightGray); border: 1px solid var(--lightGray); } .sectionNav ul.collapsedNavContent .collapseNavButton { padding: 0 10px 0 0; } .sectionNav ul li.active.sub > button:after, .sectionNav .collapseNavButton:after { content: url(../images/icons/carrot-down-blue-thick.svg); display: inline-block; transition: var(--transition); } .sectionNav ul li.active.sub > button[aria-expanded="true"]:after, .sectionNav .collapseNavButton[aria-expanded="true"]:after { transform: rotateX(0deg); } .sectionNav ul li.active.sub > button[aria-expanded="false"]:after, .sectionNav .collapseNavButton[aria-expanded="false"]:after { transform: rotateX(-180deg); } .sectionNav ul li.active.sub > button[aria-expanded="false"], .sectionNav .collapseNavButton[aria-expanded="false"] { vertical-align: text-top; } .sectionNav ul li.active.sub > a, .sectionNav ul li.active.sub > .noLink { padding: 2px 12px 2px 15px; } .sectionNav .content { padding: 0 0 14px 0; } .sectionNav .content > ul { padding: 11px 0; margin: 0; } .sectionNav .content ul li a { text-decoration: none; } .sectionNav .content ul li a:hover, .sectionNav .content ul li a:focus { color: var(--color1); text-decoration: underline; } .sectionNav .content ul > li > ul > li > a:before { float: left; color: var(--color4); } .sectionNav .content li a:before { position: absolute; top: 10px; left: 22px; } /* Tier 2 */ .sectionNav .content > ul > li > a span { padding-left: 0; } .sectionNav ul > li > a { font-weight: 500; } .sectionNav ul li.sub > ul { background-color: var(--lightGray); border: 1px solid var(--lightGray); border-radius: 10px; } .sectionNav ul li.sub li.sub { padding-bottom: 0; } /* Tier 3 */ .sectionNav ul > li > ul > li { font-size: 1rem; padding: 3px 10px 3px 15px; } .sectionNav ul > li > ul > li a { line-height: 1.5; text-transform: none; } .sectionNav ul > li > ul > li.sub > a { padding-bottom: 10px; } .sectionNav .content ul > li > ul > li a span { display: block; } .sectionNav ul > li > ul > li.active > a { color: var(--color3); } @media all and (min-width: 961px) { .sectionNav .content { display: block !important; } } @media all and (max-width: 960px) { .sectionNav { width: 100%; } .sectionNav > ul { padding: 0; margin-left: auto; margin-right: auto; margin-bottom: 0; background-color: var(--lightGray); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0); } .sectionNav.open > ul { box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10); } .sectionNav .sectionTitle { display:inline-block; width: 100%; background: var(--lightGray); border: 1px solid var(--lightGray); text-align: left; padding: 18px; cursor: pointer; } .sectionNav .sectionTitle:before { content: url(../images/icons/carrot-down-blue-thick.svg); position: absolute; top: 20px; right: 16px; width: 20px; height: 16px; transform-origin: 50% 50%; transform: rotateX(0deg); transition: var(--transition); } .sectionNav.open .sectionTitle:before { top: 22px; transform: rotateX(-180deg); } .sectionNav.open .sectionTitle { border-bottom: 1px solid transparent; } .sectionNav .title { display: none; } .sectionNav ul li.row { max-width: 100%; } .sectionNav .content { display: none; width: 100%; padding: 0 20px 14px 20px; } .sectionNav .content > ul { padding: 0 0 11px 0; } .sectionNav ul li { font-size: 1rem; } .sectionNav ul li.active > a, .sectionNav ul li.active > .noLink { font-weight: 500; } .sectionNav ul li.active.sub > button { background-color: var(--lightGray); border: 1px solid var(--lightGray); } .sectionNav ul li.active.sub > button:after { content: url(../images/icons/carrot-down-blue-thick.svg); } .sectionNav ul li a { padding: 2px 0px; } .sectionNav ul li.active.sub > a, .sectionNav ul li.active.sub > .noLink { padding-left: 0; } .sectionNav ul li.active ul { padding: 0; margin: 0; } .sectionNav ul > li > ul > li { padding: 3px 10px 3px 24px; } } /* =============================================== Side Bar Widgets * ===============================================*/ /* Side Bar */ .sideBar .columns { max-width: 385px; width: 100%; padding: 0 55px 0 0; margin: 35px 0; } /* Side Bar Columns */ .sideBar .columns.gray.bg > .wrapper { padding: 35px 30px 25px 30px; background-color: var(--lightGray); border: 1px solid var(--lightGray); border-radius: 10px; } .sideBar .columns.gray.bg h2 { font-size: 1.5rem; color: var(--color3); margin-bottom: 14px; } .sideBar .columns.gray.bg a { color: var(--color3); } .sideBar .columns.gray.bg a.callout { color: var(--darkGray); } .sideBar .columns.gray.bg a.callout:hover, .sideBar .columns.gray.bg a.callout:focus { color: var(--color3); } /* Side Bar CTA Buttons */ .sideBar .ctaButtons { display: block; width: max-content; } @media all and (min-width: 961px) { .interior .productListing.interiorContent .sideBar .components { padding: 0; } } @media all and (max-width: 960px) { .sideBar .columns { max-width: 100%; padding: 0 3%; margin: 25px 0; } } @media all and (max-width: 580px) { .sideBar .columns { padding: 0 20px; } } /* =============================================== WYSIWYG Content * ===============================================*/ .landing .wysiwygContent.components { font-size: 1.25rem; } .wysiwygContent.columns > .wrapper { max-width: 1450px; } .landing .wysiwygContent .buttonItems { margin: 0 0 15px 0; } .landing .wysiwygContent .content .button { margin: 8px 12px; } .wysiwygContent .content > ul, .wysiwygContent .content > ol { display: inline-table; text-align: left; } .wysiwygContent .content ul > li > ul, .wysiwygContent .content ol > li > ol { display: block; } /* Collapsed Content */ .collapsedContent, .collapsedMoreContent, .showCollapsedContent { display: none; } .collapseButton, .collapseMoreButton, .showCollapseButton { display: block; font-size: 1.25rem; color: var(--color1); line-height: 1; background-color: var(--white); border: 1px solid var(--white); transition: var(--transition); padding: 10px 0; margin: -13px 0 5px 0; } .blue.bg .collapseButton, .blue.bg .showCollapseButton { color: var(--white); background-color: var(--color1); border: 1px solid var(--color1); } .showCollapseButton { margin: 0; } .landing .collapseButton, .landing .showCollapseButton { padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; } .landing .columns.left .collapseButton, .landing .columns.left .showCollapseButton { margin-left: 0; } .collapseButton span, .collapseMoreButton span, .showCollapseButton span { text-decoration: underline; } .collapseButton:before, .collapseMoreButton:before, .showCollapseButton:before { display: inline-block; content: url(../images/icons/read-more.svg); padding: 0px 10px 0 0; } .collapsedContent.open + .collapseButton:before, .collapseButton.open:before, .collapseMoreButton.open:before, .showCollapsedContent.open + .showCollapseButton:before { content: url(../images/icons/read-less.svg); } .blue.bg .collapseButton:before, .blue.bg .showCollapseButton:before { content: url(../images/icons/read-more-white.svg); } .blue.bg .collapsedContent.open + .collapseButton:before, .blue.bg .showCollapsedContent.open + .showCollapseButton:before { content: url(../images/icons/read-less-white.svg); } @media all and (min-width: 961px) { .interior .interiorContent .wysiwygContent.components + .wysiwygContent { padding-top: 0; } } @media all and (min-width: 960px) { .interior .interiorContent .wysiwygContent.components + .wysiwygContent { padding-top: 0; } } @media all and (max-width: 580px) { .wysiwygContent .buttonItems { display: inline-flex; flex-direction: column; } .collapseButton, .collapseMoreButton, .showCollapseButton { font-size: 1.1rem; } } /* =============================================== Columns * ===============================================*/ .landing .wysiwygContent.components { font-size: 1.25rem; } .wysiwygContent.columns > .wrapper { max-width: 1450px; } .landing .wysiwygContent .content .button { margin: 16px 12px; } .columns .subhead { font-size: 1.25rem; color: var(--color1); font-weight: 600; line-height: 1.5; margin-bottom: 8px; } .columns > .wrapper > .subhead, .columns > .wrapper > h2, .columns > .wrapper > .intro { display: block; text-align: center; margin-left: auto; margin-right: auto; max-width: 1450px; } .columns.left > .wrapper > .subhead, .columns.left > .wrapper > h2, .columns.left > .wrapper > .intro { text-align: left; margin-left: 0; } .interior .wysiwygContent.columns > .wrapper > .subhead, .interior .wysiwygContent.columns > .wrapper > h2, .interior .wysiwygContent.columns > .wrapper > .intro { text-align: left; } .interior .wysiwygContent.columns.center > .wrapper > .subhead, .interior .wysiwygContent.columns.center > .wrapper > h2, .interior .wysiwygContent.columns.center > .wrapper > .intro { text-align: center; } .columns .content a { font-weight: 600; } .columns .content a.button { margin: 16px 24px 16px 0; } .columns .content a.button:last-of-type { margin-right: 0; } .columns .content h2 > a, .columns .content h3 > a { color: var(--darkGray); text-decoration: none; transition: var(--transition); } .columns .content h2 > a:hover, .columns .content h2 > a:focus, .columns .content h3 > a:hover, .columns .content h3 > a:focus, .columns .content h4 > a:hover, .columns .content h4 > a:focus, .columns .content h5 > a:hover, .columns .content h5 > a:focus { color: var(--color1); } .columns .content h2 > a:after, .columns .content h3 > a:after, .columns .content h4 > a:after, .columns .content h5 > a:after { display: inline-block; content: ""; width: 14px; height: 21px; margin: -1px 0 0 0; background-image: url(../images/icons/carrot-right-blue-thick.svg); background-size: 12px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(18px, 0); vertical-align: middle; } .columns .content h2 > a:hover:after, .columns .content h2 > a:focus:after, .columns .content h3 > a:hover:after, .columns .content h3 > a:focus:after, .columns .content h4 > a:hover:after, .columns .content h4 > a:focus:after, .columns .content h5 > a:hover:after, .columns .content h5 > a:focus:after { transform: translate(23px, 0); } .columns.blue.bg { display: flex; justify-self: center; max-width: 1532px; color: var(--white); background-color: var(--color1); margin: 48px auto; } .columns.blue.bg.left { justify-self: left; } .columns.blue.bg h2, .columns.blue.bg h3, .columns.blue.bg h4, .columns.blue.bg h5, .columns.blue.bg .subhead, .columns.blue.bg h2 > a, .columns.blue.bg h3 > a, .columns.blue.bg h4 > a, .columns.blue.bg h5 > a { color: var(--white); background-color: var(--color1); } .columns.blue.bg .content h2 > a:after, .columns.blue.bg .content h3 > a:after, .columns.blue.bg .content h4 > a:after, .columns.blue.bg .content h5 > a:after { background-image: url(../images/icons/carrot-right-white-thick.svg); } .columns.blue.bg .content a { color: var(--white); } .columns.blue.bg .content a.button:hover, .columns.blue.bg .content a.button:focus { color: var(--color1); } @media all and (max-width: 1630px) { .columns.blue.bg { margin: 48px 3%; } } @media all and (min-width: 961px){ .interiorContent .components .cell .content h2, .interiorContent .components .cell .content h3, .interiorContent .components .cell .content h4, .interiorContent .components .cell .content h5, .interiorContent .components .cell .content h6 { width: auto; } .interior .columns.blue.bg { margin: 48px 0 48px 5.5%; } } @media all and (max-width: 720px) { .columns > .wrapper > h2, .columns > .wrapper > .subhead, .columns .content { padding-left: 22px; padding-right: 22px; } .columns.bg > .wrapper > h2, .columns.bg > .wrapper > .subhead, .columns.bg .content { padding-left: 0; padding-right: 0; } .items > .wrapper > h2, .items > .wrapper > .subhead, .items .content { padding-left: 0; padding-right: 0; } } @media all and (max-width: 580px) { .landing .wysiwygContent.components { font-size: 1rem; } .columns .subhead { font-size: 1rem; } .columns h2 { font-size: 1.5rem; } .columns.blue.bg { margin: 48px 20px; } } /* Two Columns - Stacked */ .columns.twoColumns > .wrapper { max-width: 1348px; } /* Two Columns - Sides */ .twoColumnSides > .wrapper { max-width: 1406px; } .twoColumnSides .cell:first-child .content { padding-right: 13%; } .twoColumnSides .cell:last-child .content { padding-left: 13%; } .interior .twoColumnSides .cell:first-child .content { padding-right: 4%; } .interior .twoColumnSides .cell:last-child .content { padding-left: 4%; } @media all and (max-width: 960px) { .twoColumnSides .cell:first-child .content { padding-right: 4%; } } @media all and (min-width: 721px) { .cell.centerContent { margin-top: auto; margin-bottom: auto; } .twoColumnSides .cell .content { height: 100%; align-content: center; } } @media all and (max-width: 720px) { .twoColumnSides .cell:first-child .content { padding-right: 0; } .twoColumnSides .cell:last-child .content { padding-left: 0; } } /* Three Columns */ .columns.threeColumns > .wrapper { max-width: 1348px; } /* One Two Column */ .columnsList .wrapper > .subhead, .columnsList .wrapper > h2, .columnsList .wrapper > .intro { text-align: left; } .columnsList > .wrapper { max-width: 1406px; } .columnsList .oneTwo { background-color: var(--lightGray); } .columnsList .oneTwo:last-of-type { margin-bottom: 0; } .columnsList .oneTwo .cell:first-of-type { background-color: var(--white); } .columnsList .oneTwo .cell:last-of-type { align-self: center; } .columnsList .oneTwo .content { padding: 28px 3% 28px 0; } .interior .columnsList .oneTwo .content { padding: 24px 5% 20px 0; } .columnsList .oneTwo .content h3 { font-size: 1.25rem; color: var(--darkGray); } .columnsList .oneTwo .content h2 > a, .columnsList .oneTwo .content h3 > a, .columnsList .oneTwo .content h4 > a, .columnsList .oneTwo .content h5 > a { color: var(--darkGray); } .columnsList .oneTwo .content h2 > a:hover, .columnsList .oneTwo .content h3 > a:hover, .columnsList .oneTwo .content h4 > a:hover, .columnsList .oneTwo .content h5 > a:hover, .columnsList .oneTwo .content h2 > a:focus, .columnsList .oneTwo .content h3 > a:focus, .columnsList .oneTwo .content h4 > a:focus, .columnsList .oneTwo .content h5 > a:focus{ color: var(--color3); } .columnsList .oneTwo .content a { color: var(--color3); } .columnsList .oneTwo .content a:hover, .columnsList .oneTwo .content a:focus { color: var(--darkGray); } .columnsList .oneTwo .content a.button { color: var(--white); } .columnsList ol { margin: 6px 0 6px 45px; } .columnsList ol:last-of-type, .columnsList ul:last-of-type { margin-bottom: 0; } .columnsList .videoContent { margin: 0; } @media all and (min-width: 1280px) { .interior .columnsList .oneTwo .content h3 { margin-bottom: 10px; } .interior .columnsList .oneTwo .content p { margin-bottom: 11px; } } @media all and (max-width: 1279px) { .columnsList { max-width: 580px; margin-left: auto; margin-right: auto; } .columnsList .oneTwo .content, .interior .columnsList .oneTwo .content { padding: 0 20px 5px 20px; } .columnsList ol { margin-top: 15px; margin-bottom: 15px; } } /* Zoom Effect */ .imgZoom { display: block; overflow: hidden; width: 100%; } .imgZoom img, .imgZoom > a { display: block; transition: var(--transition); transform-origin: center; width: 100%; } .imgZoom img:hover, .imgZoom > a:hover, .imgZoom img:focus, .imgZoom > a:focus { transform: scale(1.03); } /* Column Video Content */ .videoContent { width: 100%; max-width: 890px; margin: 0 auto; position: relative; } .videoContent a.popupVideo { position: relative; display: block; } .videoWrapper { position: relative; height: 0; padding-bottom: 56.25%; padding-top: 20px; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videoButton { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 99px; height: 73px; margin: auto; background-repeat: no-repeat; transition: var(--transition); background-image: url(../images/icons/video-play-btn.png); background-position: center; background-repeat: no-repeat; background-size: 100%; transform: scale(1.0); z-index: 2; } .videoButton span { position: relative; left: -99999px; } @media all and (max-width: 960px) { .videoButton { width: 50px; height: 40px; } .videoContent a.popupVideo img { max-width:100%; width: 100%; } } /* =============================================== * Featured Banner * ===============================================*/ .featureBanner, .featureBanner a { display: block; text-align: center; text-decoration: none;} .featureBanner .container { display: table; margin: 0 auto; } .featureBanner .container.padding { padding-bottom: 34px; } .featureBanner .container .img{ display: table-cell; max-width: 1188px; padding: 0; vertical-align: middle;} .featureBanner .container .img.button{ padding: 0;} .featureBanner .container .img img { float: left; margin-bottom: 0; } .featureBanner .link { display: table-cell; max-width: 300px; font-family: var(--bodyFont); font-weight: 700; text-decoration: none; font-size: 2.7rem; line-height: 1.0; padding: 3px 10px; vertical-align: middle; } .featureBanner .button { background: none; border: none; } @media all and (min-width: 1250px) { .featureBanner .container .img.button{ padding: 0 8% 0 0;} } /* =============================================== * Product Callouts * ===============================================*/ .productCallouts { width: 100%; max-width: 1920px; text-align: center; padding: 36px 3% 20px 3%; margin: 0 auto; } .productCallouts > .wrapper { display: flex; flex-flow: wrap; justify-content: center; max-width: 100%; } .productCallouts .item { max-width: 160px; margin: 20px 3.25% 0 3.25%; } .interior .productCallouts .item { margin: 20px 2%; } .interior .productCallouts .item:first-child { margin-left: 0; } .interior .productCallouts .item:last-child { margin-right: 0; } .productCallouts a { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; text-decoration: none; transition: var(--transition); } .productCallouts a:hover, .productCallouts a:focus { text-decoration: none; } .productCallouts img { max-width: 160px; width: 100%; margin: 0 auto 25px auto; transition: var(--transition); transform: translate(0, 0); } .interior .productCallouts img { margin: 0 auto 18px auto; } .productCallouts a:hover img, .productCallouts a:focus img { transform: translate(0, -10px); } .productCallouts .name { font-family: var(--bodyFont); font-size: 1.12rem; font-weight: 400; color: var(--darkGray); padding: 0 8%; margin-bottom: 0; line-height: 1.2; margin: 0 auto; transition: var(--transition); transform: translate(0, 0); } .interior .productCallouts .name { padding: 0; } .productCallouts a:hover .name, .productCallouts a:focus .name { color: var(--color1); transform: translate(0, -10px); } .productCallouts .link { visibility: hidden; opacity: 0; color: var(--color1); font-size: 1.12rem; font-weight: 500; transition: var(--transition); } .productCallouts a:hover .link, .productCallouts a:focus .link { visibility: visible; opacity: 1; } .productCallouts .link:after { display: inline-block; content: ""; width: 14px; height: 21px; margin: 0; background-image: url(../images/icons/carrot-right-blue-thick.svg); background-size: 14px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(10px, 0); vertical-align: middle; } .components + .productCallouts { padding-top: 0; } @media all and (max-width: 1690px) { .productCallouts .item { margin: 15px 2.25% 0 2.25%; } } @media all and (min-width: 1581px) { .interior .productListing .productCallouts .item { margin: 15px 3.5% 0 3.5%; } .interior .productListing .productCallouts .item:first-child { margin-left: 0; } .interior .productListing .productCallouts .item:last-child { margin-right: 0; } } @media all and (max-width: 1580px) { .productCallouts .item { margin: 20px 2.5% 0 2.5%; } .interior .productCallouts .item { max-width: 145px; margin: 20px 1.5% 0 1.5%; } } @media (max-width: 1450px) { .productCallouts .item { margin: 20px 1.5% 0 20px; } } @media (max-width: 1250px) { .productCallouts { padding: 36px 0 0 0; } .productCallouts .item { margin: 6px .5% 0 .5%; } .interior .productCallouts .item { max-width: 125px; margin: 20px 1% 0 1%; } .productCallouts .name { font-size: 1rem; max-width: 125px; } .productCallouts .link { font-size: 1rem; } } @media (max-width: 1040px) { .productCallouts { padding: 36px 0 0 0; } .productCallouts .item, .interior .productCallouts .item { margin: 6px .5% 0 .5%; } } @media (min-width: 961px) { .interior .interiorContent .productCallouts.components { padding: 48px 0 0 5.5%; } } @media all and (min-width: 721px) and (max-width: 960px) { .productCallouts.four .item { max-width: 150px; margin: 20px 1% 0 1%; } .interior .productCallouts .item { margin: 20px .5% 0 .5%; } } @media all and (max-width: 720px) { .productCallouts.four { max-width: 480px; } .productCallouts { padding: 30px 0 0 0; } .productCallouts .item { margin: 6px 2.25% 0 2.25%; } .productCallouts img { max-width: 160px; margin: 0 auto 12px auto; } .productCallouts .name { max-width: 105px; font-size: .9rem; } .productCallouts .link { font-size: .9rem; } .productCallouts .link:after { height: 12px; background-size: 10px; transform: translate(5px, 0); } } @media all and (max-width: 580px) { .productCallouts { padding: 30px 0 0 0; } .productCallouts.four { max-width: 320px; } .productCallouts .item, .productCallouts img { max-width: 120px; } } @media all and (max-width: 390px) { .productCallouts .item, .productCallouts img { max-width: 95px; } } /* =============================================== * News Products * ===============================================*/ .newProducts { width: 100%; margin: 0 auto; padding: 30px 3%; } .interior .newProducts { position: relative; overflow: hidden; } .newProducts .responsive { display: flex; flex-flow: wrap; } .newProducts > .wrapper { max-width: 1425px; } .newProducts .slick-dotted.slick-slider { margin-bottom: 50px; } .newProducts .head, .newProducts .head > a, .newProducts .head, .newProducts .head > span { position: relative; width: auto; display: inline-block; font-family: var(--bodyFont); font-size: 1.75rem; color: var(--color1); line-height: 1.2; font-weight: 600; text-decoration: none; background-color: var(--white); padding-right: 68px; margin: 0; z-index: 1; } .newProducts .head > span { padding-right: 26px; } .newProducts .head { position: relative; width: 100%; padding: 5px 10px; margin: 0 0 26px 0; } .landing .newProducts .head, .interior .newProducts .head { padding: 5px 0; } .newProducts .head:before { content: ""; position: absolute; top: 0; bottom: 0; left: 15px; right: 0; width: 98%; height: 2px; background-color: var(--lightGray); margin: auto; z-index: 0; } .newProducts .head span { position: relative; display: inline-block; z-index: 1; color: var(--color1); background-color: var(--white); } .newProducts .head span:after { content: ""; display: block; width: 0; height: 2px; color: var(--white); background-color: var(--color1); transition: var(--transition); } .newProducts .head > a:hover span:after, .newProducts .head > a:focus span:after { width: 100%; } .newProducts .head > a:after { display: inline-block; content: ""; width: 14px; height: 21px; margin: 0; background-image: url(../images/icons/carrot-right-blue-thick.svg); background-size: 14px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(23px, 0); vertical-align: middle; } .newProducts .head > a:hover:after, .newProducts .head > a:focus:after { transform: translate(28px, 0); } .newProducts .subhead { padding: 5px 10px; } .landing .newProducts .subhead, .interior .newProducts .subhead { padding: 5px 0; } .newProducts .subhead, .newProducts .subhead p { font-size: 1.13rem; line-height: 1.2; margin-bottom: 0; } .newProducts .slick-slide { margin-left: 35px; flex-flow: column; } .newProducts .slick-list { margin-left: -35px; } .newProducts .slick-initialized .slick-slide > div { display: flex; flex-direction: column; flex-flow: wrap; height: 100%; } .newProducts .slider { background-color: var(--white); } .newProducts .slider .slick-slide .group { display: none; } .newProducts .slider .slick-initialized .group { position: relative; display: flex !important; flex-direction: column; background-color: var(--white); padding: 18px 22px; margin: 10px; } .newProducts .slider .slick-slide:not(.slick-cloned) .group { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12); } .newProducts .slick-initialized .slick-slide { position: relative; display: flex; } .newProducts .slider .group a { display: block; max-width: 362px; } .newProducts .slider .group a:first-of-type { max-width: 266px; margin-left: auto; margin-right: auto; } .newProducts .slider .group img { max-width: 266px; width: auto !important; height: auto !important; margin: 22px auto 0 auto; } .newProducts .slider .title, .newProducts .sub { font-family: var(--bodyFont); font-weight: 600; } .newProducts .slider .title { font-size: 1.12rem; line-height: 1.1; padding: 10px 0 0 0; } .newProducts .slider .sub { font-family: var(--bodyFont); font-size: 1rem; line-height: 1; } .newProducts .slider a { color: var(--darkGray); text-decoration: none; transition: var(--transition); } .newProducts .slider a:hover, .newProducts .slider a:focus, .newProducts a:hover, .newProducts a:focus { color: var(--color1); text-decoration: none; } .newProducts .priceBox { display: flex; align-items: flex-end; flex: 1 auto; flex-wrap: wrap; } /* New Products Controls */ .newProducts ul.slick-dots { text-align: left; bottom: -34px; } .newProducts .slick-prev, .newProducts .slick-next { width: 55px; height: 55px; padding: 0; margin: 0; background-color: var(--white); background-size: 100%; background-position: center center; background-repeat: no-repeat; } .newProducts .slick-prev { background-image: url(../images/icons/slider-arrow-gray-left.svg); } .newProducts .slick-prev:hover, .newProducts .slick-prev:focus { background-image: url(../images/icons/slider-arrow-gray-left-hover.svg); } .newProducts .slick-next { background-image: url(../images/icons/slider-arrow-gray-right.svg); } .newProducts .slick-next:hover, .newProducts .slick-next:focus { background-image: url(../images/icons/slider-arrow-gray-right-hover.svg); } /* New Products Wishlist */ .newProducts .wishlist { display: block; position: absolute; right: 15px; top: 15px; width: 22px; height: 19px; z-index: 2; background: url(../images/icons/wishlist.svg); background-repeat: no-repeat; text-indent: -99999px; border: none; cursor: pointer; transition: var(--transition); } .newProducts .wishlist:hover, .newProducts .wishlist:focus { background: url(../images/icons/wishlist-hover.svg); } .newProducts.productList .group .wishlist { position: absolute; top: 15px; right: 15px; } .searchListing { grid-template-columns: min-content; } @media all and (min-width: 1581px) { .interior .newProducts .slider { width: 100%; max-width: 955px; margin-left: auto; margin-right: auto; } .interior .newProducts .slick-list { width: 100%; max-width: 950px; margin-left: auto; margin-right: auto; } .interior .newProducts .slider .slick-initialized .group { margin: 10px 12px; } .interior .newProducts .slick-slide { margin-left: auto; margin-right: auto; } .interior .newProducts .slick-prev { left: -6%; } .interior .newProducts .slick-next { right: -6%; } } @media all and (max-width: 1580px) { .newProducts .slick-prev, .newProducts .slick-next { top: -13px; left: auto; width: 28px; height: 28px; } .newProducts .slick-prev { left: auto; right: 50px; } .newProducts .slick-next { right: 9px; } .newProducts .slick-prev { background-image: url(../images/icons/slider-arrow-gray-left-mobile.svg); } .newProducts .slick-prev:hover, .newProducts .slick-prev:focus { background-image: url(../images/icons/slider-arrow-gray-left-mobile-hover.svg); } .newProducts .slick-next { background-image: url(../images/icons/slider-arrow-gray-right-mobile.svg); } .newProducts .slick-next:hover, .newProducts .slick-next:focus { background-image: url(../images/icons/slider-arrow-gray-right-mobile-hover.svg); } } @media all and (max-width: 1450px) { .newProducts .head { margin: 0 0 33px 0; } .newProducts .head:before { width: 96%; } .newProducts ul.slick-dots { text-align: center; bottom: -26px; } } @media all and (min-width: 769px) { .newProducts.productList .wishlist { width: 22px; height: 19px; } .newProducts.productList .wishlist.add { background-position: 0 0; } .newProducts.productList .wishlist.add:hover, .newProducts.productList .wishlist.add:focus { background-repeat: no-repeat; } } @media all and (max-width: 580px) { .newProducts { padding-left: 20px; padding-right: 20px; } .newProducts .subhead, .newProducts .subhead p { font-size: 1rem; } .newProducts .head, .newProducts .head > a, .newProducts .head, .newProducts .head > span { font-size: 1.26rem; padding-right: 30px; } .newProducts .head:before { width: 94%; } .newProducts .head > span { padding-right: 26px; } .newProducts .head > a:after { width: 9px; height: 18px; background-size: 9px; transform: translate(19px, 0); } .newProducts .wishlist { background: url(../images/icons/wishlist-mobile.svg); } .newProducts .wishlist:hover, .newProducts .wishlist:focus { background: url(../images/icons/wishlist-mobile-hover.svg); } } @media all and (max-width: 375px) { .newProducts .head, .newProducts .head > a, .newProducts .head, .newProducts .head > span { padding-right: 8px; } .newProducts .head > a:after { transform: translate(4px, 0); } .newProducts .head > a:hover:after, .newProducts .head > a:focus:after { transform: translate(8px, 0); } } /* Wishlist also used in Product Section */ .wishlist { display: block; position: absolute; right: 15px; top: 15px; z-index: 2; background-color: var(--white); background-repeat: no-repeat; text-indent: -99999px; border: none; cursor: pointer; } /* =============================================== * Featured Tiles * ===============================================*/ .featuredTiles { display: flex; flex-direction: column; max-width: 1520px; text-align: center; padding: 30px 3%; margin: 0 auto; } .featuredTiles > .wrapper { display: flex; flex-flow: wrap; justify-content: center; max-width: 100%; } .featuredTiles .tilesIntroWrap { color: var(--white); background-color: var(--color1); } .featuredTiles .tilesIntro { display: flex; flex-direction: column; width: 100%; color: var(--white); text-align: left; background-color: var(--color1); padding: 30px 12%; margin: auto 0; } .featuredTiles .tilesIntro h2 { width: auto; font-size: min(2.5vw, 2.6rem); color: var(--white); line-height: 1.25; margin-top: 0; margin-bottom: 30px; } .featuredTiles .lineOne { display: block; font-weight: 300; } .featuredTiles .lineTwo { display: block; font-weight: 600; } .featuredTiles .tilesIntro a.button { align-self: flex-start; } .featuredTiles .tiles { display: grid; grid-gap: 1.5rem; } .featuredTiles .tiles img { width: 100%; height: 100%; object-fit: cover; display: block; } .featuredTiles .tile { position: relative; display: grid; background-color: var(--color1); } .featuredTiles .hoverTile { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-decoration: none; transition: var(--transition); } .featuredTiles .hoverTile .caption { position: absolute; width: 100%; height: 50%; top: auto; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; color: var(--white); padding: 15px 28px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 16.67%, #000 99.25%); transition: var(--transition); } .featuredTiles .tile img { margin: 0 auto; transition: var(--transition); transform: translate(0, 0); } .featuredTiles .hoverTile .subhead { visibility: hidden; opacity: 0; color: var(--white); font-size: .95rem; line-height: 1.2; margin: 0px 0 5px 0; transition: var(--transition); } .featuredTiles .hoverTile:hover .subhead, .featuredTiles .hoverTile:focus .subhead, .featuredTiles .hoverTile:focus-within .subhead { visibility: visible; opacity: 1; } .featuredTiles .tile .name { font-size: 1.52rem; font-weight: 600; color: var(--white); line-height: 1.2; margin: 0 0 13px 0; } .featuredTiles .hoverTile .subtext { visibility: hidden; opacity: 0; line-height: 0; color: var(--white); font-size: .9rem; border-left: 1px solid var(--white); padding: 0 10px; margin: 0; transform: scale(1, 0); transform-origin: bottom; transition: var(--transition); } .featuredTiles .hoverTile .subtext a { font-weight: 700; color: var(--white); } .featuredTiles .hoverTile:hover .subtext, .featuredTiles .hoverTile:focus .subtext, .featuredTiles .hoverTile:focus-within .subtext { visibility: visible; opacity: 1; line-height: 1.4; margin: 0 0 20px 0; transform: scale(1, 1); } .featuredTiles .tile .link { align-self: start; color: var(--white); font-size: 1.12rem; font-weight: 500; line-height: 1.2; transition: var(--transition); } .featuredTiles .hoverTile .link:after { display: inline-block; content: ""; width: 9px; height: 14px; margin: -1px 0 0 0; background-image: url(../images/icons/carrot-right-white.svg); background-size: 14px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(10px, 0); vertical-align: middle; } .featuredTiles .hoverTile:hover .link:after, .featuredTiles .hoverTile:focus .link:after, .featuredTiles .hoverTile:focus-within .link:after { transform: translate(15px, 0); } .featuredTiles a.link { text-decoration: none; } @media all and (min-width: 1381px) { .featuredTiles .tiles { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(2, 0fr); } .featuredTiles .two, .featuredTiles .three { grid-template-rows: repeat(1, 0fr); } /* grid-row-start, grid-column-start, grid-row-end, grid-column-end*/ /* Tile Grid and Effects */ .featuredTiles .hoverTile:hover .caption, .featuredTiles .hoverTile:focus .caption, .featuredTiles .hoverTile:focus-within .caption { height: 100%; background: linear-gradient(180deg, rgba(90, 148, 168, 0.70) 0%, rgba(64, 123, 144, 0.90) 101.29%); } /* Tiles Two Images */ .featuredTiles .two .tile:nth-child(1) { grid-area: 1 / 1 / 1 / 3; } .featuredTiles .two .tile:nth-child(2) { grid-area: 1 / 3 / 1 / 7; } .featuredTiles .two .tile:nth-child(3) { grid-area: 2 / 7 / 1 / 9; } /* Tiles Three Images */ .featuredTiles .three .tile:nth-child(1) { grid-area: 1 / 1 / 1 / 3; } .featuredTiles .three .tile:nth-child(2) { grid-area: 1 / 3 / 1 / 5; } .featuredTiles .three .tile:nth-child(3) { grid-area: 2 / 5 / 1 / 7; } .featuredTiles .three .tile:nth-child(4) { grid-area: 2 / 7 / 1 / 9; } /* Tiles Four Images */ .featuredTiles .four .tile:nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .featuredTiles .four .tile:nth-child(2) { grid-area: 1 / 3 / 1 / 7; } .featuredTiles .four .tile:nth-child(3) { grid-area: 2 / 3 / 2 / 5; } .featuredTiles .four .tile:nth-child(4) { grid-area: 2 / 5 / 2 / 7; } .featuredTiles .four .tile:nth-child(5) { grid-area: 1 / 7 / 3 / 9; overflow: hidden; } } @media all and (max-width: 1380px) { .featuredTiles { max-width: 520px; } .featuredTiles .tilesIntro { width: 90%; padding: 62px 20px; } .featuredTiles .tilesIntro h2 { font-size: min(9.5vw, 2.5rem); line-height: 1.55; } .featuredTiles .hoverTile { height: auto; } .featuredTiles .hoverTile .caption { height: 100%; padding: 22px 22px; } .featuredTiles .hoverTile .subhead, .featuredTiles .hoverTile .subtext { display: none; } } @media all and (max-width: 580px) { .featuredTiles { padding-left: 20px; padding-right: 20px; } .featuredTiles .tilesIntro { width: 100%; } } /* ============================ CTA Banner * ============================*/ .ctaBanner { position: relative; width: 100%; padding: 30px 3%; margin: 0 auto; z-index: 1; } .ctaBanner > .wrapper { position: relative; display: flex; flex-direction: row; max-width: 1410px; width: 100%; min-height: 225px; overflow: hidden; } .landing .ctaBanner > .wrapper, .interior .ctaBanner > .wrapper { min-height: 265px; } .ctaBanner .ctaBannerItem { display: flex; width: 100%; background-color: var(--color1); } .ctaBanner.gray .ctaBannerItem { display: flex; width: 100%; background-color: var(--darkGray); } .ctaBannerImgWrap img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform-origin: center center; transition: var(--transition); } .ctaBannerItem:hover .ctaBannerImgWrap img, .ctaBannerItem:focus .ctaBannerImgWrap img, .ctaBannerItem:focus-within .ctaBannerImgWrap img { transform: scale(1.05); } .ctaBannerInfo { position: relative; display: flex; flex-direction: column; align-items: end; width: 100%; height: 100%; text-align: right; padding: 25px 2.5%; background-color: rgba(90, 148, 168, 0.70); z-index: 1; transition: var(--transition); } .ctaBannerItem:hover .ctaBannerInfo, .ctaBannerItem:focus .ctaBannerInfo, .ctaBannerItem:focus-within .ctaBannerInfo { background-color: rgba(90, 148, 168, 0.80); } .ctaBanner.gray .ctaBannerInfo { background-color: rgba(0, 0, 0, 0.60); } .ctaBanner.gray .ctaBannerItem:hover .ctaBannerInfo, .ctaBanner.gray .ctaBannerItem:focus .ctaBannerInfo, .ctaBanner.gray .ctaBannerItem:focus-within .ctaBannerInfo { background-color: rgba(0, 0, 0, 0.60); } .ctaBanner h2 { width: auto; color: var(--white); margin-top: 0; margin-bottom: 3px; } .ctaBanner .lineOne { font-weight: 300; } .ctaBanner .textEffect { font-weight: 300; } .ctaBanner .lineTwo { font-weight: 600; } .ctaBannerInfo, .ctaBannerInfo p { font-size: 1.13rem; line-height: 1.5; color: var(--white); } .ctaBannerInfo p:last-child { margin-bottom: 0; } .ctaBannerInfo p a { color: var(--white); font-weight: 600; text-decoration: underline; } .ctaBannerInfo p a:hover, .ctaBannerInfo p a:focus { color: var(--white); } .mainContent .ctaBanner .button, .ctaBanner .button { text-decoration: none; padding-top: 8px; padding-bottom: 8px; margin: 10px 2.5%; border: 1px solid var(--white); background-color: transparent; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .mainContent .ctaBanner .button:hover, .mainContent .ctaBanner .button:focus, .ctaBanner .button:hover, .ctaBanner .button:focus { color: var(--color1); background-color: var(--white); padding-top: 8px; padding-bottom: 8px; background-color: var(--white); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .ctaBanner .button:hover:after, .ctaBanner .button:focus:after { background-image: url(../images/icons/carrot-right-blue.svg); } @media all and (min-width: 1381px) { .ctaBanner .ctaText { max-width: 50%; width: 100%; } .ctaBanner .buttonItems { max-width: 50%; width: 100%; margin: auto; } .interior .ctaBanner .ctaText { max-width: 64%; } .interior .ctaBanner .buttonItems { max-width: 36%; } } @media all and (max-width: 1380px) { .ctaBanner .ctaText { max-width: 70%; } .ctaBanner .buttonItems { max-width: 30%; text-align: center; margin: auto; } } @media all and (min-width: 961px) { .interior .ctaBanner { padding: 30px 0 30px 5.5%; } .ctaBannerInfo { display: flex; flex-direction: row; } .ctaBanner h2 { font-size: min(2.55vw, 3rem); margin-bottom: 6px; } .landing .ctaBanner h2, .interior .ctaBanner h2 { font-size: min(2.98vw, 4rem); margin-bottom: 6px; } .ctaBanner .ctaText { order: 2; margin: auto 0 0 auto; } .ctaBannerItem:hover h2 .textEffect, .ctaBannerItem:focus h2 .textEffect { opacity: 1; } .ctaBanner .textEffect { display: inline-block; opacity: 0; margin-right: -10px; white-space: nowrap; vertical-align: top; overflow: hidden; transition: var(--transition); transition-delay: .2s; } .ctaBannerItem:hover .textEffect, .ctaBannerItem:focus .textEffect, .ctaBannerItem:focus-within .textEffect { margin-right: 0; } .ctaBannerItem:focus .textEffect, .ctaBannerItem:focus-within .textEffect { width: auto !important; opacity: 1; } .ctaBanner .buttonItems { order: 1; } .interior .ctaBanner .buttonItems { justify-items: center; } .interior .ctaBanner .button { display: block; width: fit-content; margin: 30px 2.5%; } } @media all and (max-width: 960px) { .ctaBanner { padding: 30px; } .ctaBanner h2 { font-size: 2.5rem; } .ctaBannerInfo { padding: 25px 20px; background-color: rgba(90, 148, 168, 0.80); } .ctaBannerInfo, .ctaBannerInfo p { font-size: 1.26rem; } .ctaBanner .ctaText { max-width: 100%; } .ctaBanner .buttonItems { max-width: 100%; margin: 18px auto; } .ctaBanner .button, .ctaBanner .button:hover, .ctaBanner .button:focus { padding-top: 11px; padding-bottom: 11px; } } @media all and (max-width: 580px) { .ctaBanner { padding-left: 20px; padding-right: 20px; } .ctaBanner .buttonItems { display: flex; flex-direction: column; align-items: center; } .mainContent .ctaBanner .button, .ctaBanner .button { display: block; width: max-content; } } /* =============================================== * Catalog Slider * ===============================================*/ .catalogSlider { position: relative; width: 100%; padding: 72px 3% 187px 3%; margin: 0 auto -187px auto; background-color: var(--lightGray); box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.15); } .ctaBanner + .catalogSlider { padding: 102px 3% 187px 3%; margin: -64px auto -187px auto; } .catalogSlider + .yotpo { background-color: #fff; } .catalogSlider:after { content: ""; display: block; position: absolute; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; background-color: var(--lightGray); } .catalogSlider > .wrapper { max-width: 1200px; } .catalogSlider .slider { background-color: var(--lightGray); padding: 16px 0; margin: 0 auto; } .catalogSlider .slider:before { display: block; width: 98%; content: ""; border-top: 2px solid rgba(127, 130, 135, 0.20); margin: 0px 1% 15px 1%; } .catalogSlider .slick-dotted.slick-slider { margin-bottom: 50px; } /* Catalog Slider Intro */ .catalogSlider .head, .catalogSlider .head > a { position: relative; width: auto; display: inline-block; font-family: var(--bodyFont); font-size: 2rem; color: var(--color1); line-height: 1.2; font-weight: 600; text-decoration: none; margin: 0; z-index: 1; } .catalogSlider .head { position: relative; width: 100%; text-align: center; padding: 5px 10px; margin: 0; } .catalogSlider .head > a span { position: relative; display: inline-block; z-index: 1; } .catalogSlider .head > a span:after { content: ""; display: block; width: 0; height: 2px; color: var(--white); background-color: var(--color1); transition: var(--transition); } .catalogSlider .head > a:hover span:after, .catalogSlider .head > a:focus span:after { width: 100%; } .catalogSlider .head > a:after { display: inline-block; content: ""; width: 14px; height: 21px; margin: 0; background-image: url(../images/icons/carrot-right-blue-thick.svg); background-size: 14px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(23px, 0); vertical-align: middle; } .catalogSlider .head > a:hover:after, .catalogSlider .head > a:focus:after { transform: translate(28px, 0); } .catalogSlider .wrapper > .subhead { text-align: center; padding: 5px 10px; } .catalogSlider .wrapper > .subhead, .catalogSlider .wrapper > .subhead p { font-size: 1.13rem; line-height: 1.2; margin-bottom: 0; } /* Catalog Slides */ .catalogSlider .group { position: relative; display: flex !important; flex-direction: column; flex-flow: wrap; background-color: var(--lightGray); padding: 0; margin: 10px; } .catalogSlider .group a { display: flex; flex-direction: column; flex: auto; margin: 0 auto; text-decoration: none; } .catalogSlider .group .catalogImgWrap { display: flex; flex: auto; position: relative; overflow: hidden; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15); } .catalogSlider .group .catalogImgWrap img { width: 100%; margin: 0 auto; object-fit: cover; transform: scale(1.0); transition: var(--transition); } .catalogSlider .group a:hover .catalogImgWrap img, .catalogSlider .group a:focus .catalogImgWrap img { transform: scale(1.05); } /* Catalog Slide Caption */ .catalogSlider .caption { visibility: hidden; opacity: 0; display: flex; flex-flow: wrap; align-content: center; align-self: center; justify-content: center; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; text-align: center; color: var(--white); padding: 15px 13%; background-color: rgba(0, 0, 0, 0.60); transition: var(--transition); } .catalogSlider a:hover .caption, .catalogSlider a:focus .caption { visibility: visible; opacity: 1; } .catalogSlider .caption .subhead { width: 100%; margin-bottom: 8px; } .catalogSlider .caption .name { width: 100%; font-size: 1.6rem; font-weight: 600; line-height: 1.3; margin-bottom: 10px; } .catalogSlider .caption .button { padding-top: 8px; padding-bottom: 8px; margin: 10px 2.5%; border: 1px solid var(--white); background-color: transparent; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .catalogSlider .caption .button:hover, .catalogSlider .caption .button:focus { color: var(--color1); background-color: var(--white); padding-top: 8px; padding-bottom: 8px; background-color: var(--white); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .catalogSlider a:hover .caption .button:after, .catalogSlider a:focus .caption .button:after { background-image: url(../images/icons/carrot-right-blue.svg); } /* Catalog Slide Title */ .catalogSlider .slider a .title { font-family: var(--bodyFont); font-weight: 600; font-size: 1.25rem; line-height: 1.1; padding: 24px 0; color: var(--darkGray); text-decoration: none; transition: var(--transition); } .catalogSlider .slider a:hover .title, .catalogSlider .slider a:focus .title { color: var(--color1); text-decoration: none; } .catalogSlider .slider a .title:after { display: inline-block; content: ""; width: 12px; height: 14px; margin: 0; background-image: url(../images/icons/carrot-right-blue-thick.svg); background-size: 14px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(13px, 0); } .catalogSlider .slider a:hover .title:after, .catalogSlider .slider a:focus .title:after { transform: translate(18px, 0); } /* Catalog Controls */ .catalogSlider .slick-slide { margin-left: 15px; flex-flow: column; } .catalogSlider .slick-list { margin-left: -15px; } .catalogSlider .group { display: none; } .catalogSlider .slick-initialized .slick-slide { display: flex; } .catalogSlider .slick-initialized .slick-slide > div { display: flex; flex-direction: column; flex-flow: wrap; height: 100%; } @media all and (max-width: 1450px) { .catalogSlider ul.slick-dots { text-align: center; bottom: -26px; } } @media all and (max-width: 960px) { .catalogSlider { padding: 55px 3% 182px 3%; margin: 0 auto -200px auto; } .ctaBanner + .catalogSlider { padding: 200px 3% 182px 3%; margin: -136px auto -200px auto; } .catalogSlider .caption { visibility: visible; opacity: 1; } } @media all and (max-width: 580px) { .catalogSlider { padding-left: 30px; padding-right: 30px; } .catalogSlider .wrapper > .subhead, .catalogSlider .wrapper > .subhead p { font-size: 1rem; } .catalogSlider .head, .catalogSlider .head > a { font-size: 1.26rem; } .catalogSlider .head > a:after { width: 9px; height: 18px; background-size: 9px; transform: translate(19px, 0); } .catalogSlider .slider a .title { font-size: 1.12rem; padding: 17px 0; } } /* ============================ Image Banner * ============================*/ .imageBanner { position: relative; width: 100%; padding: 30px 3%; margin: 0 auto; z-index: 1; } .imageBanner > .wrapper { position: relative; display: flex; flex-direction: row; max-width: 1534px; width: 100%; } .imageBannerItem { display: flex; width: 100%; background-color: var(--color1); } .imageBannerImgWrap { position: relative; width: 36%; } .imageBannerImgWrap img { width: 100%; height: 100%; object-fit: cover; z-index: 0; } .imageBannerInfo { position: relative; display: flex; flex-direction: column; align-self: center; width: 64%; font-size: 1.13rem; line-height: 1.5; color: var(--white); padding: 60px 6%; background-color: var(--color1); } .imageBannerInfo p:last-child { margin-bottom: 0; } .imageBanner .subhead { color: var(--white); margin: 0 0 5px 0; } .imageBanner h2 { width: auto; font-size: 2rem; color: var(--white); margin-top: 0; margin-bottom: 30px; } .imageBanner .lineOne { font-weight: 300; } .imageBanner .lineTwo { font-weight: 600; } .imageBanner .subtext { max-width: 95%; color: var(--white); line-height: 1.9; padding: 0 30px; margin: 0 0 30px 0; border-left: 1px solid var(--white); } .imageBanner .subtext, .imageBanner .subtext p { line-height: 2; } .imageBanner .subtext a { color: var(--white); font-weight: 600; text-decoration: underline; } .imageBanner .subtext a:hover, .imageBanner .subtext a:focus { color: var(--white); } .imageBanner .buttonItems { width: 100%; } .imageBanner a.button { padding-top: 8px; padding-bottom: 8px; margin: 10px 3% 10px 0; border: 1px solid var(--white); background-color: transparent; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .imageBanner a.button:hover, .imageBanner a.button:focus { color: var(--color1); background-color: var(--white); padding-top: 8px; padding-bottom: 8px; background-color: var(--white); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .imageBanner a.button:hover:after, .imageBanner a.button:focus:after { background-image: url(../images/icons/carrot-right-blue.svg); } @media all and (max-width: 1580px) { .imageBanner .subtext { max-width: 100%; } } @media all and (max-width: 1279px) { .imageBannerItem { flex-direction: column; max-width: 580px; margin: 0 auto; } .imageBannerImgWrap { width: 100%; } .imageBannerInfo { width: 100%; padding: 30px 4%; } .imageBanner .subhead { margin: 0; } .imageBanner .subtext { padding: 0 20px; margin: 0 0 22px 0; } .imageBanner .buttonItems { margin: 14px auto; } .imageBanner .button, .imageBanner .button:hover, .imageBanner .button:focus { padding-top: 11px; padding-bottom: 11px; } } @media all and (max-width: 580px) { .imageBanner { padding-left: 20px; padding-right: 20px; } .imageBannerInfo { padding: 30px 22px; } .imageBanner .subhead { font-size: 1rem; font-weight: 300; } .imageBanner h2 { font-size: 1.5rem; } .imageBanner .subtext, .imageBanner .subtext p { font-size: 1rem; line-height: 1.6; } } /* =============================================== * Social Wall * ===============================================*/ .socialWall { position: relative; z-index: 1; padding: 30px 3%; } .socialWall > .wrapper { max-width: 1534px; } .socialWall h2 { color: var(--darkGray); font-size: 2rem; line-height: 1.2; font-weight: 300; margin-bottom: 0; } .socialWall h2 > a { color: var(--darkGray); } .socialWall h2 > a:hover, .socialWall h2 > a:focus { text-decoration: none !important; } .socialWall h2 .lineTwo { color: var(--color1); font-weight: 600; } .socialWall h2 .lineTwo:after, .socialWall h2 .lineTwo:before { display: inline-block; content:""; width: 28px; height: 27px; padding: 0 0 0 20px; margin: 0; background-image: url(../images/icons/social-instagram-white-bg.svg); background-size: 28px; background-repeat: no-repeat; background-position: center center; vertical-align: middle; } .socialWall h2 .lineTwo:before { padding: 0 15px 0 0; } .socialWall iframe { width: 100%; margin: 0 auto; padding: 15px 0 0 0; border-top: 2px solid var(--lightGray); border-bottom: none; border-left: none; border-right: none; } .tb_wall_header__, .tb_sb__b_wrapper { display: none !important; } @media all and (min-width: 961px) { .hasTextEffect .textEffect { font-size: 4rem; line-height: 1; font-weight: 200; color: var(--darkGray); } .hasTextEffect a .textEffect { display: inline-block; margin-right: -10px; white-space: nowrap; vertical-align: middle; overflow: hidden; transition: var(--transition); } .hasTextEffect a:hover .textEffect, .hasTextEffect a:focus .textEffect, .hasTextEffect a:focus-within .textEffect { width: auto !important; opacity: 1; margin-right: 0; } .socialWall h2 .lineTwo:before { display: none; } } @media all and (max-width: 960px) { .socialWall h2 { width: auto; display: flex; justify-content: center; padding: 0 0 20px 0; margin: 0 auto; } .socialWall h2 .lineTwo { display: block; } .socialWall h2 .lineTwo:before { width: 25px; height: 24px; background-size: 25px; margin-left: -10px; transition: var(--transition); } .socialWall h2 a:hover .lineTwo:before, .socialWall h2 a:focus .lineTwo:before { width: 28px; height: 27px; background-size: 28px; } .socialWall h2 .lineTwo:after { display: none; } } @media all and (max-width: 580px) { .socialWall { padding-left: 20px; padding-right: 20px; } .socialWall h2 { font-size: 1.22rem; line-height: 1.4; } } /* ============================ Hover Boxes * ============================*/ .hoverColumns { width: 100%; } .hoverColumns .wrapper > h2 + div:not(.one), .hoverColumns .wrapper > h2 + div + div { margin-top: 24px; } .hoverColumns { padding-bottom: 35px; } .hoverColumns + .hoverColumns { padding-top: 0; } .hoverColumns + .components:not(.hoverColumns) { padding-top: 61px; } .hoverColumns.columns > .wrapper { position: relative; display: flex; flex-direction: column; width: 100%; margin: 0 auto; padding: 0; max-width: 1342px; min-height: 378px; } .hoverColumns.columns.four > .wrapper { max-width: 1530px; } .hoverColumns .hoverBlock { position: relative; } .hoverColumns .hoverBlock.cell { display: flex;} .hoverColumns .hoverBlock.cell > * { display: flex; flex-flow: column; max-width: 100%;} .hoverColumns .hoverImg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; flex-basis: auto; overflow: hidden; } .hoverColumns .hoverImg img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: var(--transition); } .hoverColumns .hoverBlock { min-height: 378px; background-color: var(--color1); } .hoverColumns.four .hoverBlock { min-height: 453px; } .hoverColumns .hoverBlock:hover .hoverImg img, .hoverColumns .hoverBlock:focus .hoverImg img, .hoverColumns .hoverBlock:focus-within .hoverImg img { transform: translateX(0%) translateY(0%) scale(1.03); } .hoverColumns .hoverBlock .link { align-self: start; color: var(--white); font-size: 1.12rem; font-weight: 500; line-height: 1.2; transition: var(--transition); } .hoverColumns .hoverBlock .link:after { display: inline-block; content: ""; width: 9px; height: 14px; margin: -1px 0 0 0; background-image: url(../images/icons/carrot-right-white.svg); background-size: 14px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(10px, 0); vertical-align: middle; } .hoverColumns .hoverBlock:hover .link:after, .hoverColumns .hoverBlock:focus .link:after, .hoverColumns .hoverBlock:focus-within .link:after { transform: translate(15px, 0); } .hoverColumns .hoverBlock a.link { text-decoration: none; } .hoverColumns .hoverBlock .cardFront { position: relative; width: 100%; height: 100%; justify-content: flex-end; z-index: 1; padding: 28px 44px; color: var(--white); background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 15%, rgba(0, 0, 0, 0.70) 101.29%); transition: var(--transition); } .hoverColumns.three .hoverBlock .cardFront { padding: 20px 35px; } .hoverColumns.four .hoverBlock .cardFront { padding: 26px 22px; } .hoverColumns .hoverBlock:hover .cardFront, .hoverColumns .hoverBlock:focus .cardFront, .hoverColumns .hoverBlock:focus-within .cardFront { background: linear-gradient(180deg, rgba(90, 148, 168, 0.64) 15%, rgba(64, 123, 144, 0.80) 101.29%); } .hoverColumns .hoverTitle { font-size: 1.52rem; font-weight: 600; color: var(--white); line-height: 1.2; text-align: left; margin: 0 0 10px 0; } .hoverColumns .subtext { visibility: hidden; opacity: 0; line-height: 0; color: var(--white); font-size: .9rem; text-align: left; border-left: 1px solid var(--white); padding: 0 0 0 25px; margin: 0; transform: scale(1, 0); transform-origin: bottom; transition: var(--transition); } .hoverColumns .hoverBlock .subtext a { font-weight: 700; color: var(--white); } .hoverColumns .hoverBlock .subtext a:hover, .hoverColumns .hoverBlock .subtext a:focus { font-weight: 700; color: var(--white); } .hoverColumns .hoverBlock:hover .subtext, .hoverColumns .hoverBlock:focus .subtext, .hoverColumns .hoverBlock:focus-within .subtext { visibility: visible; opacity: 1; line-height: 1.4; margin: 0 0 20px 0; transform: scale(1, 1); } @media all and (max-width: 1380px) { .hoverColumns.columns > .wrapper { min-height: auto; } .hoverColumns .hoverBlock, .hoverColumns.four .hoverBlock { height: auto; min-height: auto; } .hoverColumns .hoverImg { position: relative; } .hoverColumns .hoverImg img { position: relative; height: auto; min-height: auto; } .hoverColumns .hoverBlock .cardFront { position: absolute; padding: 26px 22px; } .hoverColumns .hoverBlock:hover .cardFront, .hoverColumns .hoverBlock:focus .cardFront, .hoverColumns .hoverBlock:focus-within .cardFront { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 15%, rgba(0, 0, 0, 0.70) 101.29%); } .hoverColumns .hoverTitle { font-size: 1.25rem; } .hoverColumns .subtext { display: none; } .hoverColumns .hoverBlock .link { font-size: 1rem; } } @media (min-width: 961px) { .interior .hoverColumns .hoverBlock .cardFront { padding: 20px; } } @media (max-width: 960px) { .hoverColumns.columns .two { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 3rem; } .hoverColumns.columns > .wrapper, .hoverColumns.columns.four > .wrapper { max-width: 580px; } } @media (max-width: 580px) { .hoverColumns.columns .two { gap: 2rem; } } /* ============================ Image Slider * ============================*/ .imageSlider { position: relative; width: 100%; padding: 30px 3%; margin: 0 auto; z-index: 1; } .imageSlider > .wrapper { position: relative; display: flex; flex-direction: row; max-width: 1534px; width: 100%; } .imageSlider .slick-list { padding: 0 0 46px 0; } .imageSlider .group { display: flex !important; width: 100%; height: 100%; background-color: var(--color1); } .imageSliderImgWrap { position: relative; width: 43%; margin: auto auto -40px auto; } .imageSliderImgWrap .wrapper { max-width: 564px; max-height: 452px; margin: 0; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .imageSliderImgWrap img { display: block; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .imageSliderInfo { position: relative; display: flex; flex-direction: column; align-self: center; width: 57%; font-size: 1.13rem; line-height: 1.5; color: var(--white); padding: 40px 2% 60px 6%; background-color: var(--color1); } .imageSliderInfo p:last-child { margin-bottom: 0; } .imageSlider .subhead { color: var(--white); margin: 0 0 5px 0; } .imageSlider h2 { width: auto; font-size: 2rem; color: var(--white); margin-top: 0; margin-bottom: 16px; } .imageSlider .lineOne { font-weight: 300; } .imageSlider .lineTwo { font-weight: 600; } .imageSlider .subtext { max-width: 95%; color: var(--white); line-height: 1.9; padding: 0 0 0 30px; margin: 0 0 16px 0; border-left: 1px solid var(--white); } .imageSlider .subtext, .imageSlider .subtext p { line-height: 1.5; } .imageSlider .subtext a { color: var(--white); font-weight: 600; text-decoration: underline; } .imageSlider .subtext a:hover, .imageSlider .subtext a:focus { color: var(--white); } .imageSlider .buttonItems { width: 100%; } .mainContent .imageSlider a.button { padding-top: 8px; padding-bottom: 8px; margin: 10px 3% 10px 0; border: 1px solid var(--white); background-color: transparent; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .mainContent .imageSlider a.button:hover, .mainContent .imageSlider a.button:focus { color: var(--color1); background-color: var(--white); padding-top: 8px; padding-bottom: 8px; background-color: var(--white); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .imageSlider a.button:hover:after, .imageSlider a.button:focus:after { background-image: url(../images/icons/carrot-right-blue.svg); } /* Image Slider Controls */ .imageSlider .slick-prev, .imageSlider .slick-next { width: 40px; height: 40px; top: auto; bottom: 52px; left: auto; background-color: rgba(62, 62, 62, 0.5); background-repeat: no-repeat; background-position: center; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); transition: var(--transition); } .imageSlider .slick-prev:hover, .imageSlider .slick-prev:focus, .imageSlider .slick-next:hover, .imageSlider .slick-next:focus { background-color: rgba(62, 62, 62, 0.9); } .imageSlider .slick-prev { left: 48%; right: auto; background-image: url(../images/icons/impact-arrow-left.svg); } .imageSlider .slick-next { left: 52%; right: auto; background-image: url(../images/icons/impact-arrow-right.svg); } .imageSlider ul.slick-dots { position: absolute; display: block; width: auto; top: auto; bottom: 81px; left: 40%; right: auto; } .imageSlider ul.slick-dots > li { width: 18px; margin: 0; } .imageSlider ul.slick-dots > li:before { color: var(--white); font-size: 37px; } .imageSlider ul.slick-dots > li button:before { font-size: 32px; color: rgba(255, 255, 255, 0.4); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .imageSlider ul.slick-dots li.slick-active button:before, .imageSlider ul.slick-dots li.slick-active button:hover:before, .imageSlider ul.slick-dots li.slick-active button:focus:before { color: var(--white); } .imageSlider ul.slick-dots > li button:hover:before, .imageSlider ul.slick-dots > li button:focus:before { color: rgba(255, 255, 255, 0.8); } .imageSlider .slick-pause-icon, .imageSlider .slick-play-icon { color: var(--white); } .imageSlider .slick-pause-icon:before { display: block; width: 26px; height: 26px; color: var(--white); content: ""; background: url(../images/icons/pause-button.svg) no-repeat center 0; background-size: contain; } .imageSlider .slick-play-icon:before { display: block; width: 26px; height: 26px; content: ""; background: url(../images/icons/play-button.svg) no-repeat center 0; background-size: 40%; } .imageSlider .slick-autoplay-toggle-button { width: 40px; height: 40px; left: 44%; right: auto; bottom: 68px; color: var(--darkGray); opacity: 1; } @media all and (max-width: 1580px) { .imageSlider .subtext { max-width: 100%; } } @media all and (max-width: 1440px) { .imageSliderImgWrap .wrapper { max-width: 490px; max-height: 393px; } } @media all and (max-width: 1279px) { .imageSlider { max-width: 580px; } .imageSlider .slick-track { display: inline-block; } .imageSlider .slick-list { padding: 0; } .imageSlider .group { flex-direction: column; height: auto; margin: 0 auto; } .imageSliderImgWrap { width: 100%; padding: 0 20px 10px 20px; margin: 0 auto; } .imageSliderImgWrap:after { content: ""; display: block; position: absolute; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 74px; background-color: var(--white); z-index: 0; } .imageSliderImgWrap .wrapper { position: relative; height: 374px; z-index: 1; } .imageSliderInfo { display: block; width: 100%; padding: 45px 4% 68px 4%; } .imageSlider .subhead { margin: 0; } .imageSlider .subtext { padding: 0 20px; margin: 0 0 22px 0; } .imageSlider .buttonItems { margin: 14px auto; } .imageSlider .button, .imageSlider .button:hover, .imageSlider .button:focus { padding-top: 11px; padding-bottom: 11px; } /* Image Slider Controls */ .imageSlider .slick-prev, .imageSlider .slick-next { bottom: 400px; width: 28px; height: 28px; background-size: 29%; } .imageSlider .slick-prev { left: auto; right: 64px; } .imageSlider .slick-next { left: auto; right: 20px; } .imageSlider ul.slick-dots { bottom: 408px; left: 50px; right: auto; } .imageSlider .slick-autoplay-toggle-button { bottom: 395px; left: 4px; right: auto; } } @media all and (max-width: 580px) { .imageSlider { padding-left: 20px; padding-right: 20px; } .imageSliderInfo { padding-left: 22px; padding-right: 22px; } .imageSlider .subhead { font-size: 1rem; font-weight: 300; } .imageSlider h2 { font-size: 1.5rem; } .imageSlider .subtext, .imageSlider .subtext p { font-size: 1rem; line-height: 1.6; } } /* =============================================== Accordion * ===============================================*/ .accordionSection > .wrapper { width: 100%; padding: 0; margin: 0 auto; max-width: 1406px; } .accordionSection .wrapper > .subhead, .accordionSection .wrapper > h2, .accordionSection .wrapper > .intro { text-align: left; } .accordion > h2 { margin-top: 20px; padding: 0 20px; } .accordion > h2, .accordion > h3 { margin: 0; padding: 0; border-top: 2px solid rgba(127, 130, 135, 0.20); } .accordion > h2:first-of-type, .accordion > h3:first-of-type { border-top: 1px solid transparent; } .accordion.focus { border-color: var(--black); } .accordionTrigger { font-size: 1.5rem; font-weight: 500; background: none; display: block; margin: 0; position: relative; text-align: left; width: 100%; transition: var(--transition); cursor: pointer; color: var(--black); padding: 15px 20px; } .accordionTrigger[aria-expanded="true"], .accordionTrigger:focus, .accordionTrigger:hover { color: var(--color1); } .accordion button { border: none; } .accordion button::-moz-focus-inner { border: 0; } .accordionTitle { position: relative; display: block; pointer-events: none; border: transparent 2px solid; padding: 9px 60px; } .accordionTrigger:focus .accordionTitle { border-color: transparent; } .accordionPanel { padding: 5px 0% 30px 6%; margin: 0; contain: layout; } .accordionPanel[hidden] { display: none; } /* Accordion Expander Icon */ .accordion .accordionIcon { position: absolute; padding: 0; cursor: pointer; z-index: 100; width: 30px; height: 30px; background-color: var(--color4); top: -2px; bottom: 0; left: 0; right: auto; margin: auto 10px; border: 1px solid transparent; } .accordion .accordionIcon:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); height: 4px; width: 25px; background: var(--color1); } .accordion .accordionIcon:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1); height: 25px; width: 4px; background: var(--color1); } .accordion .accordionTrigger[aria-expanded="true"] .accordionIcon:before { transform: translate(-50%, -50%) rotate(180deg); width: 0; } .accordion .accordionTrigger[aria-expanded="true"] .accordionIcon:after { transform: translate(-50%, -50%) rotate(180deg); } @media all and (max-width: 960px) { .accordionTrigger { font-size: 1.12rem; padding: 10px 0; } .accordion .accordionIcon:before { width: 3px; height: 19px; } .accordion .accordionIcon:after { width: 19px; } } /* =============================================== Pull Quotes * ===============================================*/ .pullQuote { position: relative; width: 100%; padding: 40px 3%; margin: 0 auto; z-index: 1; } .pullQuote .blue.bg { color: var(--white); background-color: var(--color1); } .pullQuote .gray.bg { background-color: var(--lightGray); } .pullQuote > .wrapper { position: relative; display: flex; flex-direction: row; max-width: 1345px; width: 100%; padding: 30px 4%; } .pullQuote .one { width: 100%; } .pullQuote .cell { flex-direction: row; } .quoteImg { width: 27%; margin: -58px auto; } .quoteImgWrap { position: relative; border: 1px solid transparent; border-radius: 360px; width: 320px; height: 320px; overflow: hidden; } .quoteImgWrap img { width: 100%; height: 100%; object-fit: cover; } .quoteContent { position: relative; width: 61%; align-content: center; line-height: 1.5; padding: 0 23px; margin-top: auto; margin-bottom: auto; } .quoteContent:after { content:""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: 100%; margin: auto 0; color: var(--darkGray); background-color: rgba(255, 255, 255, 0.40); } .pullQuote .gray.bg .quoteContent:after { background-color: rgba(62, 62, 62, 0.40); } .quoteContent p:last-of-type { margin-bottom: 0; } .quoteContent a { color: var(--white); font-weight: 600; } .quoteContent a:hover, .quoteContent a:focus { color: var(--white); } .quoteContent a.button:hover, .quoteContent a.button:focus { color: var(--color1); } .quoteContent .name { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 22px 0 0 0; } .quoteContent .role { font-size: 1.25rem; font-weight: 500; line-height: 1.2; margin: 5px 0 0 0; } .pullQuote .blue.bg .quoteContent .role { color: rgba(255, 255, 255, 0.97); } .pullQuote .gray.bg .quoteContent .role { color: rgba(62, 62, 62, 0.97); } /* No Image */ .pullQuote.noImage .one { align-content: center; } .pullQuote.noImage > .wrapper { max-width: 1058px; width: 100%; min-height: 264px; } .pullQuote.noImage .cell { height: 100%; } .pullQuote.noImage .quoteContent { width: 90%; text-align: center; margin: auto; } .pullQuote.noImage .quoteContent:after { display: none; } @media all and (min-width: 1201px) { .interior .pullQuote > .wrapper { max-width: 1092px; padding: 30px 3%; } .interior .quoteImg { width: 38%; } .interior .quoteContent { width: 62%; padding: 0 0 0 23px; } } @media all and (max-width: 1200px) { .quoteImg { width: 34%; } .quoteContent { width: 56%; } } @media all and (max-width: 1100px) { .quoteImg { width: 42%; } .quoteContent { width: 56%; } } @media all and (max-width: 960px) { .pullQuote > .wrapper { flex-direction: column; padding: 30px 20px; } .pullQuote .cell { flex-flow: wrap; } .quoteImgWrap { width: 310px; height: 310px; margin-left: auto; margin-right: auto; } .quoteImgWrap:after { display: none; } .quoteImg { width: 100%; margin: -78px auto 12px auto; } .quoteContent { width: 100%; line-height: 1.9; padding: 30px 0; } .quoteContent:after { display: none; } } @media all and (max-width: 580px) { .pullQuote { padding-left: 20px; padding-right: 20px; } } @media all and (max-width: 380px) { .quoteImgWrap { width: 275px; height: 275px; } } @media all and (max-width: 360px) { .quoteImgWrap { width: 245px; height: 245px; } } /* =============================================== Infographics * ===============================================*/ .infographics { width: 100%; } .infographics > .wrapper { display: flex; min-height: 265px; padding: 35px 3.5%; background-color: var(--lightGray); } .infographicsCaption { position: relative; display: flex; flex-direction: column; width: 27%; padding: 20px 5% 40px 0; margin: 0 4% 0 0; } .infographicsCaption:after { content:""; display: block; position: absolute; top: 0; bottom: 0; left: auto; right: 0; width: 2px; height: 104px; margin: auto 0; color: var(--darkGray); background-color: rgba(127, 130, 135, 0.20); } .infographics.columns .subhead { color: var(--color3); } .infographicsRow, .infographicsRow.slick-dotted.slick-slider { position: relative; display: flex; flex-direction: row; width: 69%; align-items: center; padding: 0; margin: 0; } .infographics .slick-track { align-items: center; } .infographics .slick-slide { flex-flow: column; } .infographics .infographicSet { position: relative; display: flex !important; height: 100%; align-self: center; } .infographics .infographic { display: flex; flex-direction: row; position: relative; width: 33.33%; height: 100%; text-align: center; line-height: 1; align-items: flex-start; justify-content: center; padding: 0; margin: 0 auto; } .infographics .infographic img { max-width: 95px; margin: 0 28px 0 0; } .infographics .infographicInner { display: flex; flex-direction: column; flex: auto; width: 100%; text-align: left; padding: 0 5px; } .infographics .infoStat { font-weight: 600; color: var(--color3); padding: 5px 0 0 0; } .infographics .infoText { width: 87%; font-size: 1.1rem; font-weight: 500; color: var(--black); line-height: 1.2; padding: 0; margin: 4px 0 0 0; } /* Infographics Slider Controls */ .infographics .slick-prev, .infographics .slick-next { width: 40px; height: 40px; top: auto; bottom: -20px; left: auto; transition: var(--transition); background-repeat: no-repeat; background-position: center; } .infographics .slick-prev { left: 28px; right: auto; transform: rotate(180deg); transform-origin: 0 26%; background-image: url(../images/icons/carrot-right-blue-on-gray-thick.svg); } .infographics .slick-next { left: 28px; right: auto; background-image: url(../images/icons/carrot-right-blue-on-gray-thick.svg); } .infographics .slick-prev:hover, .infographics .slick-prev:focus { } .infographics .slick-next:hover, .infographics .slick-next:focus { } .infographics ul.slick-dots { bottom: -20px; } .infographics ul.slick-dots > li button:before { font-size: 32px; } @media all and (min-width: 1280px) { .infographics .infographicSet { padding: 20px 0 0 0; } .infographics .infographic { overflow: hidden; } .infographics .infoStat { font-size: min(3.2vw, 3.8rem); } } @media all and (max-width: 1279px) { .infographics { max-width: 580px; margin-left: auto; margin-right: auto; } .infographics > .wrapper { flex-direction: column; padding: 30px 20px 65px 20px; } .infographicsCaption h2 { margin-bottom: 6px; } .infographicsRow, .infographicsRow.slick-dotted.slick-slider { width: 100%; padding: 0; } .infographics .slick-initialized .slick-slide { justify-content: center; } .infographicsCaption { width: 100%; padding: 0 0 40px 0; } .infographicsCaption:after { top: auto; left: 0; width: 100%; height: 2px; } .infographics .infographicSet { flex-direction: column; } .infographics .infographic { width: 77%; margin: 28px auto; } .infographics .infographic img { width: 100%; margin: 0 32px 0 0; } .infographics .infoStat { font-size: 3.8rem; padding: 12px 0 0 0; } .infographics .infoText { font-size: 1rem; line-height: 1.45; margin: 9px 0 0 0; } .infographics .slick-prev, .infographics .slick-next { width: 27px; background-size: 32%; bottom: -14px; } .infographics .slick-prev { left: 21px; transform-origin: 0 25%; } .infographics .slick-next { left: 21px; } .infographics .infoStat { font-size: 2.6rem; } .infographics .infoText { font-weight: 400; } .infographics ul.slick-dots { bottom: -39px; } .infographics ul.slick-dots > li button:before { font-size: 45px; } } @media all and (max-width: 580px) { .infographics .infographic { width: 90%; } } /* =============================================== Standalone CTA Buttons * ===============================================*/ .buttons.components { padding-top: 20px; padding-bottom: 20px; } .buttons.components .one { max-width: 756px; margin-left: auto; margin-right: auto; } .buttons.components .button { justify-content: center; font-size: 1.25rem; font-weight: 700; padding-top: 10px; padding-bottom: 10px; } .buttons.components a.button:after { position: relative; top: auto; bottom: auto; left: auto; right: auto; transform: translate(5px, 0); } .buttons.components a.button:hover:after, .buttons.components a.button:focus:after { transform: translate(10px, 0); } @media (min-width: 721px) and (max-width: 960px) { .buttons.components .three .cell > *, .buttons.components .four .cell > * { max-width: 100%; } } @media all and (min-width: 961px) { .interior .interiorContent .buttons.components { padding-top: 20px; padding-bottom: 20px; } .buttons.components a.button:after { width: 9px; } } @media all and (max-width: 960px) { .buttons.components .button { width: 100%; font-size: 1.13rem; padding-top: 18px; padding-bottom: 18px; } .buttons.components .two, .buttons.components .three, .buttons.components .four { max-width: 756px; margin-left: auto; margin-right: auto; grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* =============================================== Items * ===============================================*/ .items { max-width: 1920px; text-align: center; padding: 36px 3% 0 3%; margin: 0 auto; } .items > .wrapper { display: flex; flex-flow: wrap; justify-content: left; max-width: 1050px; } .items.columns > .wrapper > .subhead, .items.columns > .wrapper h2, .items.columns > .wrapper .intro { text-align: left; margin-left: 0; margin-right: 0; } .items.columns .three { width: 100%; margin: 25px auto; } .items .item { position: relative; } .items a { display: flex; flex-direction: column; height: 100%; text-decoration: none; padding: 0 0px 15px 0px; background-color: var(--white); transition: var(--transition); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0); } .items a:hover, .items a:focus { text-decoration: none; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); } .items .marker { position: absolute; top: 17px; bottom: auto; left: 14px; right: auto; font-size: .95rem; font-weight: 600; font-style: italic; color: var(--white); letter-spacing: .08em; line-height: 1; text-align: center; padding: 5px 18px; background-color: var(--red); border: 1px solid var(--red); border-radius: 5px; } .items .marker.red { background-color: var(--red); border: 1px solid var(--red); } .items .marker.green { background-color: var(--green); border: 1px solid var(--green); } .items img { max-width: 160px; margin: 0 auto 25px auto; } .items .name { font-family: var(--bodyFont); font-size: 1.8rem; font-weight: 600; color: var(--darkGray); padding: 0 6%; margin-bottom: 0; line-height: 1.2; margin: 0 auto; transition: var(--transition); } .items a:hover .name, .items a:focus .name { color: var(--color1); } @media all and (max-width:960px) { .items .marker { top: 15px; font-size: .85rem; padding: 5px 13px; } .items .name { font-size: 1.15rem; } .items img { margin: 0 auto 18px auto; } } @media (min-width: 721px) and (max-width: 960px) { .items.columns .three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .items .three .cell > * { max-width: 100%; } } @media (max-width: 720px) { .items.columns .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } } @media (max-width: 580px) { .items { padding: 36px 20px 0 20px; } .items.columns .three { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 375px) { .items.columns .three { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* =============================================== Banner * ===============================================*/ .banner.columns > .wrapper { max-width: 1134px; } .bannerGroup { margin: 0 auto; } .banner .imgZoom { position: relative; max-width: 718px; width: 100%; z-index: 0; } .banner .imgZoom.noContent { max-width: 100%; width: auto; } .banner .content { display: flex; position: relative; max-width: 422px; width: 100%; align-content: center; text-align: center; margin: 40px 0 40px -7%; z-index: 1; } .banner a { display: flex; justify-content: center; width: 100%; color: inherit; text-decoration-thickness: 3px; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 300ms; } .banner a:hover, .banner a:focus { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: inherit; text-underline-offset: 6px;} .banner a:hover .imgZoom img, .banner a:focus .imgZoom img { transform: scale(1.03); } h2.bannerText { width: 100%; font-size: min(3.2vw, 3.8rem); font-weight: 600; line-height: 1.35; padding: 32px 7%; margin-top: auto; margin-bottom: auto; } .interior h2.bannerText { font-size: min(3.2vw, 3rem); line-height: 1; padding: 32px 16%; } @media (max-width: 960px) { .banner .imgZoom { max-width: 100%; } .banner .content { max-width: 100%; margin: 18px auto 0 auto; } .bannerGroup { flex-direction: column; } .banner a { flex-direction: column; } h2.bannerText, .interior h2.bannerText { font-size: 2rem; padding: 32px 7%; } } /* =============================================== Product Listing * ===============================================*/ /* Product Listing Layout */ .productListing.interiorContent:before { display: none; } .productListing.interiorContent { grid-area: 1 / 3 / 8 / 1; max-width: 1642px; grid-row: auto; } .productListing .sectionNavColumn { display: block; min-width: 385px; } .productListing #sectionNavMenu.content { padding: 0; } .productListing .sectionNav ul li.active.sub > button { background-color: var(--white); border: 1px solid var(--white); } .productListing .impactContent { display: grid; grid-area: 1 / 2 / 1 / 2; grid-row: auto; margin: 0 0 30px 0; } .productListing .componentsTopArea { display: grid; grid-area: 2 / 2 / 2 / 2; grid-row: auto; } .interior .productListing.interiorContent .components + .productCallouts { padding: 0 0 20px 0; } .productListing .productsWrap { display: grid; grid-area: 4 / 2 / 3 / 2; grid-row: auto; } .productListing .componentsBottomArea { display: grid; grid-area: 4 / 3 / 4 / 2; grid-row: auto; } .productListing .searchResult, .productListing .noProducts { margin: 0 0 30px 0; } @media all and (max-width: 1585px) { .productListing .sectionNavColumn { min-width: 285px; } } @media all and (max-width: 1385px) { .productListing .sectionNavColumn { min-width: 0; } } @media all and (min-width: 961px) { .interior .productListing.interiorContent .components { padding: 48px 0; } .interior .productListing.interiorContent .productCallouts { padding: 48px 0 20px 0; } } @media all and (max-width: 960px) { .productListing .impactContent { grid-area: 1 / 1 / 1 / 3; } .productListing .componentsTopArea { grid-area: 2 / 1 / 2 / 3; } .productListing .sectionNavColumn { grid-area: 3 / 1 / 3 / 3; margin: 0 0 55px 0; } .productListing .productsWrap { grid-area: 4 / 1 / 4 / 3; } .productListing .componentsBottomArea { grid-area: 5 / 1 / 5 / 3; } .productListing #sectionNavMenu.content { padding: 0 20px; } } @media all and (max-width: 720px) { .productListing .productsWrap { padding-left: 20px; padding-right: 20px; } } /* Product Listing Filters */ /* Sort Products */ .productListing .sortBy { margin: 0px 0 50px 0; } .productListing .sortBy select { width: 100%; font-size: 1.12rem; font-weight: 600; background-color: var(--lightGray); background-image: url(../images/icons/carrot-down-blue-thick.svg); background-repeat: no-repeat; background-size: 14px; background-position: right 18px center; border: 1px solid var(--lightGray); -moz-appearance:none; -webkit-appearance:none; appearance:none; padding: 13px 40px 13px 12px; margin: 0; } /* Clear Filters */ .productListing .clearFilters { padding: 0; margin: 0 0 26px 0; text-indent: 0; } .productListing .clearFilters li:before { display: none; } /* Filter Selections */ .productListing .sectionNav .title { border-bottom: none; padding: 15px 0; } .productListing .sectionNav ul li.sub { margin: 0 0 22px 0; } /* Filter Buttons */ .productListing .sectionNav ul li.active.sub > button:after { position: absolute; top: 0; bottom: auto; left: auto; right: 0; padding-left: 22px; } .productListing .sectionNav ul li.active.sub > button[aria-expanded="false"]:after { padding-left: 0; } .productListing .sectionNav ul li.active.sub > button { width: 100%; /*max-width: 210px;*/ height: auto; font-size: 1.12rem; font-weight: 600; color: var(--darkGray); padding: 0 20px 2px 0; border-bottom: 2px solid rgba(127, 130, 135, 0.20); transition: var(--transition); } .productListing .sectionNav ul li.active.sub > button:hover, .productListing .sectionNav ul li.active.sub > button:focus { color: var(--color1); } .productListing .sectionNav ul li.active.sub > button[aria-expanded="true"]:after { transform: rotateX(180deg); } .productListing .sectionNav ul li.active.sub > button[aria-expanded="false"]:after { transform: rotateX(0deg); } /* Filter Menus */ .sectionNav .content > ul#filters { padding: 11px 0 0 0; } .productListing .sectionNav ul li.sub > ul { background-color: var(--white); border: 1px solid var(--white); } .productListing .sectionNav ul li.active ul { margin: 8px 0 0 0; } .productListing .sectionNav .collapsedNavContent { display: none; } .productListing .sectionNav .collapseNavButton[aria-expanded="true"] + .collapsedNavContent { display: block; } .productListing .sectionNav .collapsedNavContent li { font-size: 1.02rem; padding: 4px 0; } .productListing .sectionNav .collapsedNavContent input[type="checkbox"] { vertical-align: top; margin: 5px 8px 8px 0; } .productListing .sectionNav .collapsedNavContent label, .productListing .sectionNav .collapsedNavContent > li > a, .productListing .sectionNav .showCollapsedContent > li > a { display: inline; position: relative; color: var(--darkGray); font-weight: 400; vertical-align: top; padding: 4px 0 0 0; } .productListing .sectionNav .collapsedNavContent input[type="checkbox"]:checked + label { color: var(--color1); font-weight: 600; } .productListing .sectionNav .showCollapseButton { font-size: 1.12rem; } /* Results Tag */ .resultTags { margin: 0 0 10px 0; } .resultTags ul { padding: 0; margin: 0; text-indent: 0; } .resultTags ul li { position: relative; display: inline-block; font-size: .9rem; color: var(--darkGray); line-height: 1.2; background-color: var(--lightGray); border: 1px solid var(--lightGray); border-radius: 2px; padding: 8px 12px; margin: 0 20px 15px 0; } .resultTags ul li:before { display: none; } .resultTags .appliedFilter { position: absolute; left: -99999px; } .resultTags ul li.inputs { padding: 0; } .resultTags ul li a, .resultTags ul li button, .resultTags ul li label { display: inline-flex; color: var(--darkGray); line-height: 1.2; padding: 0; margin-top: -3px; vertical-align: top; background-color: var(--lightGray); border: 1px solid var(--lightGray); } .resultTags ul li label { padding: 8px 12px 6px 12px; margin-bottom: 0; cursor: pointer; } .resultTags ul li a:after, .resultTags ul li button:after, .resultTags ul li label:after { display: inline-block; width: 15px; height: 15px; content:url(../images/icons/close-blue-on-gray.svg); line-height: 1; transition: var(--transition); } .resultTags ul li label:after { padding: 0 0 0 4px; margin: -2px 0 0 0; } .resultTags ul li a:hover:after, .resultTags ul li a:focus:after, .resultTags ul li button:hover:after, .resultTags ul li button:focus:after, .resultTags ul li label:hover:after, .resultTags ul li label:focus:after { content:url(../images/icons/close-gray-small.svg); } /* Load More */ .loadMoreToggle { margin: 0 0 10px 0; } .loadMoreToggle > .showCollapsedContent, .sectionNav ul li.active .loadMoreToggle ul { padding: 0; margin: 0; } .loadMoreToggle a.moreLink { color: var(--color1); text-decoration: underline; } .loadMoreToggle a.moreLink:before { display: none; } @media all and (max-width: 960px) { .productListing .sortBy { width: 100%; margin: 0px 0 25px 0; } .productListing .sortBy select { width: 100%; max-width: 100%; min-height: 60px; } .sortBy label.customLabel { width: 100%; } .productListing .sectionNav .content { padding: 0 20px 14px 20px; } .productListing .sectionNav ul li.sub { margin: 0 0 4px 0; } .productListing .sectionNav ul li.active.sub > button { font-size: 1rem; max-width: 100%; border-bottom: none; background-color: var(--lightGray); border: 1px solid var(--lightGray); } .productListing .sectionNav ul li.sub > ul { background-color: var(--lightGray); border: 1px solid var(--lightGray); } } /* Product Items */ .productList.grid { position: relative; display: flex; clear: both; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row wrap; flex-flow:row wrap; } .interiorContent .productList.grid { column-gap: 2.333%; } .productList .group { position: relative; background-color: var(--white); padding: 18px 9px; margin: 0 0 36px 0; overflow: hidden; display: flex; flex-direction: column; } .productList .group { padding: 18px 22px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12); } .interiorContent .productList .group { padding: 18px 18px; } .productList .group, .productList .gridSizer { width: 23%; } .productList .gutterSizer { width: 3.5%; display: none; } .productList .gridSizer { display: none; } .productList.full .gutterSizer { width: 3.5%; } .productList .group .wishlist { position: absolute; display: block; top: 15px; right: 15px; width: 26px; height: 22px; z-index: 2; background-image: url(../images/icons/wishlist.svg); background-repeat: no-repeat; background-position: center; text-indent: -99999px; border: none; cursor: pointer; transition: var(--transition); z-index: 1; } .productList .group .wishlist:hover, .productList .group .wishlist:focus { background-image: url(../images/icons/wishlist-hover.svg); } .productList img { display: block; width: auto !important; margin: 22px auto 6px auto; height: auto !important; flex-shrink: 0; } .productList input[type='image'] { max-width: 100%; } .productList .title, .productList .sub { font-family: var(--bodyFont); font-size: 1.12rem; font-weight: 500; line-height: 1.1; padding: 10px 0 0 0; } .mainContent .productList a { color: var(--darkGray); text-decoration: none; } .mainContent .productList .addMsg { color: var(--color1) !important; } .mainContent .productList .addMsg a { color: var(--color1); text-decoration: underline; } .mainContent .productList a:hover, .mainContent .productList a:focus { color: var(--darkGray); } .mainContent .productList .addMsg p { margin-bottom: 0; } .productList .sub { font-size: 1rem; color: rgba(62, 62, 62, 0.80); line-height: 1; } .priceBox { margin-top: 4px; } .priceBox label { display: inline-block; } .priceBox .price { color: var(--color1); font-size: .95rem; flex: 0 0 100%; } .priceBox .price span { font-size: 1.25rem; font-weight: 600; padding: 0 12px 0 0; } .priceBox .amount { font-size: .95rem; padding: 8px 0; flex: 0 0 100%;} .productList .priceBox { font-family: var(--bodyFont); display: -webkit-flex; display: flex;-webkit-align-items: flex-end; align-items: flex-end; flex: 1 auto; flex-wrap: wrap;} .priceBox .quantity { display: inline-flex; flex: 0 0 100%; margin: 28px 0 0 -10px; } .priceBox .quantity select { height: 36px; min-height: 36px; font-weight: 600; text-align: center; padding: 0 20px 0 10px; margin: 0; border: 1px solid var(--lightGray); border-radius: 5px; background-color: var(--lightGray); background-position: right 8px center; background-size: 10px; } .priceBox .quantity .qty { padding-right: 5px; } .priceBox .quantity .listingQty { width: 38px; height: 36px; font-weight: 600; text-align: center; padding: 5px; margin: 0; border-color: var(--lightGray); border-radius: 5px; background-color: var(--lightGray); } .priceBox .msg { font-size: .95rem; font-weight: 700; color: var(--red); line-height: 1.4; padding-top: 10px; padding-bottom: 10px; flex: 0 0 100%;} .priceBox .quantity .button { width: auto; align-self: flex-start; line-height: 1; margin: 0 -10px 0 auto; } .priceBox .quantity .button:after { display: none; } .productList .button { width: auto; padding: 8px 15px; } .interiorContent .productList:not(.wishlistProducts) .button { font-size: .85rem; padding: 11px 13px; } .productList .closeButton { position: relative; right: -81%; top: -11px; z-index: 1; } /* Added Message */ .newProducts .slider .group .addMsg a, .addMsg a { display: inline; color: var(--color1); text-decoration: underline; } .newProducts .slider .group .addMsg a:hover, .newProducts .slider .group .addMsg a:focus, .addMsg a:hover, .addMsg a:focus { color: var(--darkGray); } .addMsg { clear: both; font-size: .95rem; font-weight: 600; line-height: 1.4; } .addMsg a { text-decoration: underline; } .addMsg > div { padding: 0; } @media all and (max-width: 1650px) { .productList .group, .productList .gridSizer { width: 31%; } } @media all and (max-width: 1400px) { .productList .group, .productList .gridSizer { width: 48%; } } @media all and (min-width: 961px) and (max-width: 1024px) { .interiorContent .productList .button { font-size: .8rem; padding: 11px 10px; } } @media all and (max-width: 960px) { .productList .group .wishlist { right: 19px; width: 34px; height: 32px; } .priceBox .quantity .button { width: 48%; } } @media all and (max-width: 580px) { .productList .group, .productList .gridSizer { width: 100%; } .interiorContent .productList .group { margin-left: auto; margin-right: auto; } .newProducts .slider .group img { width: 100%; } .productList .group .wishlist { background-image: url(../images/icons/wishlist-mobile.svg); } .productList .group .wishlist:hover, .productList .group .wishlist:focus { background-image: url(../images/icons/wishlist-mobile-hover.svg); } .productList .button, .interiorContent .productList .button { font-size: .9rem; padding: 11px 26px; } .priceBox .price span { font-size: 1.45rem; } .priceBox .quantity .button { width: 100%; max-width: 138px; padding: 12px 13px; } .priceBox .quantity .listingQty { font-size: 1.1rem; width: 45px; height: 45px; border-radius: 7px; } .priceBox .quantity select.listingQty { height: 45px; padding: 5px 20px 5px 5px; } .priceBox .quantity select { height: 45px; } } @media all and (max-width: 370px) { .productList .button, .interiorContent .productList .button { font-size: .85rem; padding: 11px 13px; } .priceBox .quantity { flex-direction: column; } .priceBox .quantity .button { max-width: 100%; width: 100%; margin: 20px 0 0 0; } } /* Markers */ .saleMarker, .newMarker { position: absolute; top: 13px; bottom: auto; left: 15px; right: auto; font-size: .95rem; font-weight: 600; font-style: italic; color: var(--white); letter-spacing: .04em; line-height: 1; text-align: center; padding: 4px 19px; background-color: var(--red); border: 1px solid var(--red); border-radius: 5px; } .saleMarker { background-color: var(--red); border: 1px solid var(--red); } .newMarker { background-color: var(--green); border: 1px solid var(--green); } .newMarker + .saleMarker { top: 46px; } @media all and (max-width: 580px) { .saleMarker, .newMarker { top: 21px; left: 19px; font-size: 1.12rem; letter-spacing: .08em; padding: 5px 28px; } .newMarker + .saleMarker { top: 60px; } } /* Audio Player */ .productMedia, .jsAnimationMP3 { text-align: center; margin: 10px 0 10px auto; width: 100%; max-width: 580px; } /* Removes Audio Download Button */ audio::-internal-media-controls-download-button { display: none; } audio::-webkit-media-controls-enclosure { overflow: hidden; } audio::-webkit-media-controls-panel { width: calc(100% + 30px); } /* Product Controls */ .productControls { display: flex; align-items: center; justify-content: flex-end; width: 100%; padding: 0 0 12px 0; margin: 0; /*border-bottom: 2px solid rgba(127, 130, 135, 0.20);*/ } .productControls.bottom { margin-top: 0; border-bottom: none; } /* Items Per Page */ .itemsPerPage { display: table-cell; text-align:left; vertical-align: middle; } .itemsPerPage > label { display: inline; margin-right: 7px; } .itemsPerPage > span { display: inline-block; font-size: 1rem; margin-right: 7px; } .itemsPerPage > input { margin-right: 7px; } #ctrmyorders_btnFilter { margin-right: 7px; } .pageSize { display: inline; text-align: center; padding: 3px 5px; margin: 0 2px; font-family: var(--bodyFont); font-size: 1.185em; border:none; cursor:pointer; } .pageSize.on { background-color: var(--color1); color:var(--white); } .pageSize.off { background-color:var(--white); } .pageSize.off:hover, .pageSize.off:focus { color:var(--color1); } /* List Paging */ .listPaging { text-align:right; vertical-align: middle; min-width: 165px; } .listPaging ul { text-indent: 0; list-style: none; margin: 0; padding: 0 20px; } .listPaging ul > a { display: none !important; } .listPaging ul li { display: inline-block; } .listPaging ul li a { padding: 3px 9px; margin: 0 2px; } .listPaging ul li a:empty { display: none; } .listPaging ul li:before { display: none; content: ''; margin: 0; } .listPaging .listPage { display:inline; text-align: center; margin: 0; font-family: var(--bodyFont); font-size: 1.185em; border:none; cursor:pointer; } .listPaging .listPage.on, .listPaging.orders span span { background-color: var(--color3); color:var(--white); padding: 2px 8px; text-decoration: none; } .listPaging .listPage.off, .listPaging.orders a { background-color: var(--white); color: var(--darkGray); font-size: 1rem; } .listPaging .listPage.off:hover, .listPaging .listPage.off:focus, .listPaging.orders a:hover, .listPaging.orders a:focus { color:var(--color3); text-decoration: none; } .listPaging .prev, .listPaging .next { font-size: 1.6em; line-height: 1; color: var(--color3); padding: 0 5px; background-color: var(--white); border: none; cursor: pointer; text-decoration: none; } .listPaging .prev:hover, .listPaging .prev:focus, .listPaging .next:hover, .listPaging .next:focus { text-decoration: none; } #ctrmyorders_pnlOrders > .wysiwygContent { padding-top: 0; } /* Product Listing Logged Out Message */ .loginRegister { font-weight: 600; text-align: right; font-size: .875em;} .loginLinks { color: #d12f2c; } .loginLinks a { color: #d12f2c; text-decoration: none; } .loginLinks a:hover, .loginLinks a:focus { text-decoration: underline; } @media all and (min-width: 961px) and (max-width: 1500px) { .orders.productControls.top { flex-flow: wrap; align-items: flex-end; } .itemsPerPage { display: flex; flex-flow: column; } .itemsPerPage > input { margin-right: 5px; } .itemsPerPage > input[type=text] { padding: 10px 2px; } } @media all and (max-width: 960px) { .myOrderInfo { padding-top: 0; margin-top: -15px; } .productControls { border-top: none; padding: 0; } .productControls.bottom { display: inline-block; } .productControls.top { margin-top: 2px; margin-bottom: 18px; } .orders.productControls.top { flex-flow: wrap; align-items: flex-end; justify-content: start; } .productControls.bottom { margin-bottom: 12px; } /* Product Listing Items */ .itemsPerPage, .listPaging { display: block; text-align: center; padding: 4px 5px; } .orders .itemsPerPage { display: flex; flex-flow: column; text-align:left; vertical-align: middle; margin-bottom: 15px; } .orders .itemsPerPage > span { display: inline-block; margin-right: 7px; } .productControls.top .itemsPerPage, .productControls.top .listPaging { } } @media all and (max-width: 580px) { .myOrderInfo { padding: 0 20px 0px 20px; } .orders .itemsPerPage { width: 100%; } .itemsPerPage > input { margin-right: 0; } #ctrmyorders_btnFilter { margin-right: 0; } } /* =============================================== Product Detail * ===============================================*/ /* Product Detail Prev/Next/Return Navigation */ .detailNav { position: relative; display: flex; align-items: flex-end; width: 100%; max-width: 1300px; padding: 0 3%; margin: 22px auto 12px auto; } .detailButton { position: relative; font-family: var(--bodyFont); } .detailButton a { color: var(--darkGray); text-decoration: none; font-weight: 600; } .detailButton a:hover { color: var(--color1); } .detailButton.backTo { padding: 0 0 0 15px; } .detailButton.backTo a { text-decoration: none; } .detailButton.backTo a:before { display: inline-block; content: ""; width: 14px; height: 21px; background-image: url(../images/icons/carrot-right-blue-thick.svg); background-size: 12px; background-repeat: no-repeat; transform: translate(-13px, 0px) rotate(180deg); vertical-align: middle; margin: -1px 0px 0px; background-position: right center; transition: var(--transition); } .detailButton.left { margin: 0 0 0 auto; } .detailButton.backTo a:hover:before, .detailButton.backTo a:focus:before { transform: translate(-18px, 0px) rotate(180deg); } .detailButton.left a, .detailButton.right a { display: block; width: 42px; height: 42px; background-color: var(--white); background-repeat: no-repeat; transition: var(--transition); } .detailButton.left a { background-image: url(../images/icons/detail-slider-arrow-gray-left.svg); } .detailButton.left a:hover, .detailButton.left a:focus { background-image: url(../images/icons/detail-slider-arrow-gray-left-hover.svg); } .detailButton.right { margin: 0 0 0 20px; } .detailButton.right a { background-image: url(../images/icons/detail-slider-arrow-gray-right.svg); } .detailButton.right a:hover, .detailButton.right a:focus { background-image: url(../images/icons/detail-slider-arrow-gray-right-hover.svg); } /* Product Detail Group */ .productDetailImages { display: flex; width: 100%; max-width: 1572px; padding: 0 3%; margin: 0 auto; } /* Product Detail Gallery Images */ #productDetailLeft { display: flex; flex-direction: column; width: 50%; margin: 0 4% 0 0; } .productDetailImages .zoomGallery { display: flex; width: 100%; margin: 0; position: relative; overflow: hidden; } .productDetailImages .zoomGallery a { position: relative; display: block; max-width: 580px; width: 100%; vertical-align: top; margin: 10px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12); } .productDetailImages .zoomGallery > a { margin-left: auto; } .productDetailImages .zoomGallery a img { position: relative; z-index: -1; max-width: 580px; width: 100% !important; height: auto !important; } .productDetailImages .thumbnail { text-align: left; margin-right: 2%; } .productDetailImages .thumbnail a { position: relative; display: flex; flex-direction: column; width: 100px; height: 100px; text-align: center; margin: 8px 10px 20px 10px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .12); } .productDetailImages .popupVideo .youtube { margin: auto; } .productDetailImages .thumbnail .play { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 56px; height: 56px; margin: auto; border-radius: 360px; background-color: rgba(0, 0, 0, 0.70); background-image: url(../images/icons/video-play-btn-white.svg); background-repeat: no-repeat; background-position: left 19px center; transition: var(--transition); } .productDetailImages .thumbnail a:hover .play, .productDetailImages .thumbnail a:focus .play { background-color: rgba(0, 0, 0, 1); } .productDetailImages .thumbnail img, .productDetailImages .zoomGallery .thumbnail a img { max-width: 90px; width: 100% !important; height: auto !important; margin: auto; } .productDetailImages h1 { font-size: 1.5rem; color: var(--darkGray); margin: 0 0 8px 0; } /* Product Detail Information */ .productDetailInfo { display: flex; width: 38%; flex-direction: column; background: var(--white); padding: 16px 0 0 0; margin: 0; } #productDetailTop { padding: 0; margin: 0 0 25px 0; border-bottom: 2px solid rgba(127, 130, 135, 0.20); } #productDetailTop .asyncContent { display: flex; width: 100%; flex-direction: row; } .markerDetail { display: block; width: 100%; margin: 0 0 5px 0; } .markerDetail .saleMarker, .markerDetail .newMarker { display: inline-flex; position: relative; left: auto; margin: 0 5px 10px 0; } .markerDetail .newMarker { top: auto; } .markerDetail .saleMarker { top: auto; } .productDetailInfo .contentLeft { width: 80%; } .productDetailInfo .contentRight { width: 20%; } .productDetailInfo .productNumbers { display: inline-block; font-size: 1.25rem; font-weight: 500; margin: 4px 5px 0 0; } .productDetailInfo .productNumbers .productNumbers { margin: 0; } .upc_hide { visibility: hidden; } #productDetailTop .yotpo, #productDetailTop .yotpo-widget-instance { display: inline-block; font-size: 1rem; font-weight: 500; vertical-align: top; padding: 0; } #productDetailTop .yotpo-reviews-star-ratings-widget:before { content: ""; width: 1px; height: 15px; padding: 0 0 0 20px; margin: auto; border-left: 2px solid rgba(127, 130, 135, 0.20); } .productDetailInfo .button { display: block; width: auto; position: relative; } .productDetailInfo .button.addCart { max-width: 374px; width: 100%; font-size: 1.2rem; font-weight: 700; color: var(--white); background-color: var(--color1); text-transform: uppercase; padding: 10px 30px; margin: 0 20px 0 auto; } .productDetailInfo .button.addCart:hover, .productDetailInfo .button.addCart:focus { color: var(--color1); background-color: var(--white); padding: 10px 30px; } .wishlistInput { display: flex; height: 72px; font-size: 1rem; color: var(--darkGray); background-color: var(--white); background-image: url(../images/icons/wishlist-button.svg); background-repeat: no-repeat; background-size: 40px; background-position: center top; border: 1px solid var(--white); padding: 32px 0 0 0; margin: 0 10px 10px auto; cursor: pointer; transition: var(--transition); } .wishlistInput:hover, .wishlistInput:focus { color:var(--color1); text-decoration: none; background-color: var(--white); background-image: url(../images/icons/wishlist-button-hover.svg); } .jsAddToCart { margin: 0 0 10px 0; } #productDetailBottom.priceBox .price { display: flex; align-items: baseline; } #productDetailBottom.priceBox .quantity { width: 100%; margin: 0 0 25px 0; } #productDetailBottom #addMsg { font-size: 1rem; font-weight: 600; text-transform: uppercase; } #productDetailBottom #outofstock { font-size: 1rem; font-weight: 600; text-transform: uppercase; padding-bottom: 25px; } #productDetailBottom .msg.jsSale { font-size: 1rem; font-weight: 600; text-transform: uppercase; } #productDetailBottom.priceBox .price span { font-size: 1.75rem; padding: 0 12px 0 0; } #productDetailBottom.priceBox .amount { flex: auto; text-align: center; } #productDetailBottom.priceBox .amount { text-align: left; } #productDetailBottom.priceBox .msrp { padding: 0 28px 0 0; } #productDetailBottom .retailers { font-weight: 600; } .jsPriceLevelRowTemplate { display: table-row-group; } .jsContractDisclaimer { font-size: .85rem; } #priceLevels { width: 100%; } .productDesc { font-size: 1rem; line-height: 1.5; background-color: var(--lightGray); padding: 25px 18px; margin: 40px 0 18px 0; } .productDesc .title { font-family: var(--bodyFont); font-size: 1.25rem; font-weight: 600; font-size: 1.268em; border-bottom: 2px solid rgba(127, 130, 135, 0.20); padding: 0 0 6px 0; margin: 0 0 15px 0; } .productDesc a { font-weight: 700; color: var(--color3); } #asyncPDP.pageLoad .loadProdName { width: 80%; } #asyncPDP.pageLoad .loadProdSKU { width: 50px; } #asyncPDP.pageLoad .loadProdPrice { width: 100px; background: var(--color1); } #asyncPDP.pageLoad .loadProdText { width: 75px; } #asyncPDP.pageLoad .loadingTextBlock { display: inline-block; vertical-align: middle; margin: 5px auto; background: #f0f0f0; height: 25px; } #asyncPDP.pageLoad .loadingImgBlock { background: url(../../_images/loading.gif) no-repeat 50% 50%; display: inline-block; width: 100%; padding-bottom: 100%; border: 1px solid #ebebeb; } .productVariants { max-width: 600px; width: 100%; padding: 10px 0 20px 0; margin: 0 0 0 auto; } .productVariants .variantSwitch { display: inline-block; border: 2px solid #ebebeb; padding: 5px; margin: 5px; } .productVariants .variantSwitch.active { border: 3px solid rgba(127, 130, 135, 0.40); } .productVariants .variantSwitch img { vertical-align: middle; margin: auto; max-width: 80px; min-width: 100%; width: auto !important; height: auto !important; } #asyncPDP .asyncContainer, #asyncPDP .asyncDim { position: relative; } .asyncDim a { text-decoration: underline; } .asyncDim a.callout { text-decoration: none; } #asyncPDP .asyncContainer .asyncContent + .asyncContent { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #asyncPDP.dimActive .asyncDim { opacity: 0.5; } #asyncPDP.dimActive .asyncDim:after { background: url(../../_images/loading.gif) no-repeat 50% 100%; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .productDetailInfo .burtonblue-font .title { font-family: var(--bodyFont); font-weight: 600; font-size: 1.12rem; color: var(--darkGray); } .productDetailInfo .burtonblue-font .price-area { font-size: .875rem; color: var(--darkGray); font-weight: 400; } .productDetailInfo .burtonblue-font .price-area .burtonblue-font { display: inline; font-weight: 400; font-size: 1rem; } .productDetailInfo .burtonblue-font .price-area strong.burtonblue-font { font-weight: 700; } @media all and (min-width: 1321px) { .productDetailInfo { width: 100%; max-width: 538px; } } @media all and (max-width: 1320px) { .productDetailInfo { width: 47%; max-width: none; } } @media all and (min-width: 961px) { .productDetailImages .zoomGallery { flex-direction: row-reverse; } } @media all and (min-width: 961px) and (max-width: 1200px) { .productDetailInfo .button.addCart { max-width: 240px; } } @media all and (max-width: 960px) { /* Product Detail Group */ .productDetailImages { flex-direction: column; } /* Product Detail Gallery Images */ #productDetailLeft { width: 100%; margin: 0 auto; } .productDetailImages .zoomGallery { display: flex; flex-direction: column; padding: 0 5px; margin: 0 auto; } .productDetailImages .zoomGallery > a { margin-left: auto; margin-right: auto; } .productDetailImages .thumbnail { display: flex; margin: 0 auto; } .productMedia { margin: 10px auto; } .productVariants { margin: 0 auto; } /* Product Detail Information */ .productDetailInfo { width: 100%; max-width: 730px; margin: 0 auto; } .markerDetail { margin: 0 0 10px 0; } .productDesc { padding: 30px 38px; margin-left: -3%; margin-right: -3%; } .productDesc .title { padding: 0 0 15px 0; } #productDetailBottom .retailers { font-size: 1.12rem; } } @media all and (max-width: 580px) { /* Product Detail Group */ .productDetailImages { padding: 0 20px; } /* Product Detail Information */ #productDetailTop { margin: 0 0 25px 0; } .productDetailInfo .productNumbers { display: block; font-size: 1.12rem; margin: 0; } #productDetailTop .yotpo, #productDetailTop .yotpo-widget-instance { display: block; border-left: none; padding: 0; margin: 0 0 25px 0; } #productDetailTop .yotpo-reviews-star-ratings-widget:before { display: none; } #productDetailBottom.priceBox .quantity { display: flex; flex-direction: column; } .quantityWrap { display: flex; align-items: center; margin: 0 0 22px 0; } #productDetailBottom input[type='button'][value='subtract'], #productDetailBottom input[type='button'][value='add'] { background-size: 22px; margin-left: 15px; margin-right: 15px; } #productDetailBottom.priceBox .quantity .listingQty { width: 48px; height: 48px; } #productDetailBottom.priceBox .amount { text-align: left; padding: 8px 12px; } .productDetailInfo .button.addCart { max-width: 100%; width: 100%; font-size: 1.12rem; font-weight: 600; padding: 15px 30px; margin: 0 auto; } .productDetailInfo .button.addCart:hover, .productDetailInfo .button.addCart:focus { padding: 15px 30px; } .productDesc { margin-left: -20px; margin-right: -20px; } /* Product Detail Prev/Next/Return Navigation */ .detailNav { padding: 0 20px; margin: 52px auto 12px auto; } .detailButton.left a, .detailButton.right a { width: 40px; height: 40px; } .detailButton.left a { background-image: url(../images/icons/detail-slider-arrow-gray-left-mobile.svg); } .detailButton.left a:hover, .detailButton.left a:focus { background-image: url(../images/icons/detail-slider-arrow-gray-left-mobile-hover.svg); } .detailButton.right a { background-image: url(../images/icons/detail-slider-arrow-gray-right-mobile.svg); } .detailButton.right a:hover, .detailButton.right a:focus { background-image: url(../images/icons/detail-slider-arrow-gray-right-mobile-hover.svg); } } /* =============================================== Blog Landing and Listing * ===============================================*/ /* Featured Blog */ .impact.blog { position: relative; display: flex; flex-direction: column; max-width: 100%; max-width: 1920px; margin: 0 auto; height: inherit; /*max-height: 446px;*/ max-height: none; background: var(--white); z-index: 2; } .impact.blog > .featuredGroup { position: relative; border-bottom: 1px solid rgba(127, 130, 135, 0.20); padding: 0 0 48px 0; } .impact.blog img { max-width: 100%; max-height: 446px; min-height: 100%; width: 100%; object-fit: cover; } .impact.blog .group { position: relative; display: flex; height: 100%; } .impact.blog .group > a { height: 100%; } /* Featured Blog Caption */ .impact.blog .captionWrap { display: flex; flex-direction: row; height: 100%; } .impact.blog .captionWrap > a { display: flex; width: 100%; height: auto; color: unset; text-decoration: none; } .impact.blog .captionImg { width: 58%; } .impact.blog .caption { display: flex; flex-flow: wrap; align-content: center; align-self: center; width: 42%; height: 100%; font-family: var(--bodyFont); text-align: center; padding: 50px 2.5% 65px 2.5%; } .impact.blog .captionLineOne { width: 100%; font-size: min(1.7vw, 2rem); font-weight: 200; line-height: 1.2; margin-bottom: 15px; margin-left: auto; margin-right: auto; } .impact.blog .captionLineTwo { width: 100%; font-size: min(2.7vw, 3rem); font-weight: 600; line-height: 1; text-transform: uppercase; padding: 0 8%; margin-bottom: 24px; margin-left: auto; margin-right: auto; } .impact.blog .captionLineThree { width: 100%; font-size: min(1.29vw, 1.5rem); font-weight: 200; line-height: 1.2; margin-left: auto; margin-right: auto; } .impact.blog .caption .button { color: inherit; background-color: transparent; border-width: 1px; border-style: solid; border-color: inherit; padding-top: 8px; padding-bottom: 8px; margin: 24px auto 0 auto; } .impact.blog .caption .button:hover, .impact.blog .caption .button:focus { color: var(--color1); background-color: var(--white); } .impact.blog .caption .button:after { height: 14px; } .impact.blog .caption .button:hover:after, .impact.blog .caption .button:focus:after { background-image: url(../images/icons/carrot-right-blue.svg); } @media all and (max-width:1850px) { .impact.blog .caption { padding-left: 2%; padding-right: 2%; } } @media all and (min-width:961px) and (max-width:1380px) { /* Featured Blog Caption */ .impact.blog .caption .button { margin: 24px auto 0 auto; } .impact.blog .captionLineOne { font-size: min(2.2vw, 2.9rem); } .impact.blog .captionLineTwo { font-size: min(4.5vw, 6.25rem); } .impact.blog .captionLineThree { font-size: min(1.6vw, 2.25rem); } } @media all and (min-width:1251px) { .impact.blog { width: 100%; max-width: 1652px; margin: 0 auto; padding: 0 3%; } } @media all and (min-width:961px) { .impact.blog { margin: 48px auto 0 auto; } .impact.blog img.desktopImage { display: inline-flex !important; } .impact.blog img.tabletImage { display: none !important; } .impact.blog img.mobileImage { display: none !important; } /* Featured Blog Caption */ .impact.blog .caption { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25); } } @media all and (max-width:960px) { .impact.blog { max-height: none; } .impact.blog > .featuredGroup { border-bottom: none; padding: 0 0 10px 0; } .impact.blog .group { height: 100%; flex-direction: column; } .impact.blog .caption { max-width: 960px; } .impact.blog img.desktopImage { display: none !important; } .impact.blog img.tabletImage { display: inline-flex !important; } .impact.blog img.mobileImage { display: none !important; } .impact.blog img { max-width: 100%; max-height: 424px; width: 100%; } .impact.blog img { display: flex; flex-direction: row; max-width: 100%; min-height: 424px; max-height: 424px; object-fit: cover; } /* Featured Blog Caption */ .impact.blog .captionWrap { display: flex; flex-direction: row; } .impact.blog .captionWrap > a { flex-direction: column; } .impact.blog .captionImg { width: 100%; } .impact.blog .caption { width: 100%; padding: 32px 15% 52px 15%; box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .impact.blog .captionLineOne { font-size: min(3vw, 2.9rem); margin-bottom: 10px; } .impact.blog .captionLineTwo { font-size: min(5.5vw, 6.25rem); margin-bottom: 15px; } .impact.blog .captionLineThree { font-size: min(2.8vw, 2.25rem); } .impact.blog .caption .button { margin: 22px auto 0 auto; } } @media all and (max-width:580px) { .impact.blog img.desktopImage { display: none !important; } .impact.blog img.tabletImage { display: none !important; } .impact.blog img.mobileImage { display: inline-flex !important; } .impact.blog img { height: 320px; max-height: 320px; min-height: 320px; } /* Featured Blog Caption */ .impact.blog .featuredGroup .caption { padding: 18px 15% 52px 15%; } .impact.blog .captionLineOne { font-size: min(5.1vw, 1.2rem); } .impact.blog .captionLineTwo { font-size: min(8.5vw, 2rem); } .impact.blog .captionLineTwo + .button { margin-top: 0; } .impact.blog .captionLineThree { font-size: min(5.8vw, 1.1rem); } } /* Blog Section Navigation */ .blogNavColumn .sectionNav .title { color: var(--darkGray); padding: 10px 0 0 0; } .blogNavColumn .sectionNav ul li .title a { font-weight: 600; color: var(--darkGray); } .blogNavColumn .sectionNav ul li { font-size: 1rem; } .blogNavColumn .sectionNav ul li a { font-weight: 400; transition: var(--transition); } .blogNavColumn .sectionNav ul li.active > a, .sectionNav ul li.active > .noLink { font-weight: 500; } @media all and (min-width: 961px) { .blogNavColumn.sectionNavColumn { padding-top: 25px; } .impact.blog + .mainContent .blogNavColumn.sectionNavColumn { padding-top: 0; } .blogNavColumn .sectionNav ul li a { padding: 3px 15px 3px 0; } } /* Blog Listing */ .blogListing .detailButton.backTo { margin: 0 0 15px 0; } .blogListing h1 { font-size: 2rem; color: var(--darkGray); margin: 0 0 35px 0; } .blogListing article { display: grid; grid-template-columns: 29% minmax(0, 1fr); gap: 64px; padding: 34px 0; border-top: 2px solid rgba(127, 130, 135, 0.20); } .blogListing article:first-of-type { padding-top: 0; border-top: none; } .blogListing .newsThumb a { display: block; } .blogListing .newsThumb img { display: block; } .blogListing article h2 { font-size: 1.5rem; } .blogListing .newsDescription > a { text-decoration: none; } .blogListing .newsDescription > a h2 { transition: var(--transition); } .blogListing .newsDescription > a:hover h2, .blogListing .newsDescription > a:focus h2 { color: var(--color1); } .blogListing .newsDescription p.intro { margin-bottom: 0; } p.loadItem { margin: 30px auto; } .ctaArea { display: block; width: 100%; margin: 30px auto; } @media all and (min-width: 961px) { .interior .interiorContent.blogListing .components { padding: 5px 0 48px 1%; } } @media all and (max-width: 650px) { .blogListing article { display: flex; flex-flow: column; gap: 15px; } } /* Blog Article */ .interiorContent.blogArticle:before { display: none; } .blogArticle .detailButton.backTo { padding: 0 0 13px 15px; } .blogArticle h1 { font-size: 2rem; color: var(--darkGray); margin: 0 0 14px 0; } .blogArticle .postDate { font-weight: 500; color: var(--color1); padding: 0 0 35px 0; margin: 0 0 35px 0; border-bottom: 2px solid rgba(127, 130, 135, 0.20); } .blogArticle .postDate .pipe { font-weight: 500; color: rgba(127, 130, 135, 0.50); padding: 0 12px; } .shareTitle { display: block; clear: both; color: var(--darkGray); font-size: 1.25rem; margin: 68px 0 15px 0; font-weight: 700; } #st-1 { text-align: left !important; margin: 0 0 30px 0; } #st-1 .st-btn[data-network='email'] { background-color: #4d4d4d !important; } #st-1 .st-btn[data-network='blogger'] > span { color: var(--black) !important; } .mostRecent { margin-bottom: 50px; } .mostRecent h2 { font-size: 1.5rem; margin: 0 auto 30px auto; } .mostRecent .content h3 > a:after { display: none; } .mostRecent .content h3 { font-size: 1.26rem; margin: 0 0 5px 0; } .mostRecent.columns .cell .imgZoom + .content { padding-top: 14px; } .fullWidthTag { float: left; width: 100%; margin-top: 60px; } .shareTitle .fullWidthTag { float: left; width: 100%; margin-top: 0; } @media all and (min-width: 961px) { .interiorContent.blogArticle .components h2, .interiorContent.blogArticle .components h3, .interiorContent.blogArticle .components h4, .interiorContent.blogArticle .content h5, .interiorContent.blogArticle .components h6 { width: auto; } .interiorContent.blogArticle .components:first-of-type { padding-top: 8px; } .interiorContent.blogArticle .components { padding: 48px 30px; } .interiorContent.blogArticle .components.bg { padding: 40px 30px; } } @media all and (max-width: 960px) { .mostRecent { padding-top: 30px; } .mostRecent h2 { margin: 12px auto 35px auto; } } /* Social Side Bar */ .socialSidebar { margin: 0; } .socialSidebar h2 { font-size: 1.5rem; margin-bottom: 6px; } .sideBar .socialSidebar.columns { margin: 10px 0; } .socialLinks { display: block; padding: 10px 0; margin: 0; border-top: 2px solid rgba(127, 130, 135, 0.20); } .socialLinks a { padding: 0; margin: 0; vertical-align: middle; line-height: 1.2; } .socialLinks a img { transform: translate(0, 0); transition: var(--transition); } .socialLinks a:hover img, .socialLinks a:focus img { transform: translate(0, -5px); } .socialLinks a span { position: absolute; left: -999999px; } .socialLinks img {max-width: 40px; width: 100%; margin: 20px 13% 0 0; } @media all and (max-width: 960px) { .socialLinks { padding: 0px 0 10px 0; } .socialLinks img { margin: 20px 20px 0 0; } } /* =============================================== Sitemap Page * ===============================================*/ .mainBody .container > .sitemap:not(:first-child) { margin: 25px 0; } .sitemap div { clear: none; list-style: none; display: inline-block; margin: 0 0 8px 0; vertical-align: top; width: 100%; } .sitemap div:not(:first-child) { width: 21.5%; } .sitemap, div.sitemap, .sitemap:first-child { width: 100%; } .sitemap { clear: both; width: 100% !important; margin: 0; padding: 0; text-indent: 0; } .sitemap span { font-family: 'Poppins', Helvetica, Arial, san-serif; font-size: 1.5em; font-weight: 600; line-height: 1.4; width: 100%; margin: 0; display: block; } .sitemap > .sitemap span { font-size: 1.2em; } @media all and (max-width:960px) { .sitemap div:not(:first-child) { width: 33%; } } @media all and (max-width:620px) { .sitemap div:not(:first-child) { width: 45%; } } @media all and (max-width:580px) { .sitemap div:not(:first-child) { width: 100%; } } /* =============================================== Product Reviews Third Party Override * ===============================================*/ /* Review Container */ #reviews { width: 100%; max-width: 1652px; margin-left: auto; margin-right: auto; padding: 25px 3% 30px 3%; border-top: 2px solid #e3e3e3; } #reziew-area { width:100%; margin:auto; background: #fbfbfb !important; color: var(--darkGray); } #reziew-area #crt-reviews-list, #reziew-area #crt-form-area { margin: 0 !important; } .reziew-rating-area.one.grade-50 { display: inline-block; margin: 20px 0; width: 100px; padding-right: 15%; } .readReviews { display: inline-block; } .productDetailImages .readReviews { margin-top: 18px; vertical-align: top; } /* Review Trigger */ #reviews .trigger { font-family: var(--bodyFont); padding: 0 0 10px 0; min-height:20px; } #reviews .trigger a { color:var(--darkGray); text-decoration: none; } #reviews .trigger a:hover { color: var(--color1); text-decoration: none; } /* Review Header */ .crt-review-header h3 { font-family: var(--headingFont) !important; font-weight: 600 !important; } /* Review Fonts */ #mini-summary,#crt-review,.review-textarea,#review-form-error span,.result,.social-share-label,.line,.crt-review-message,#global-summary-div,#rating-tot { color:var(--darkGray); font-family: var(--bodyFont) !important; } /* Review Top Total Reviews, Login Text and Leave Button */ #no-review-form{ border: none !important; margin: 0 !important; padding: 0 !important; height: 40px !important; } #reziew-area #no-review-form.right { margin-top: -10px; } #mini-summary { margin: 0 !important; font-size: .9em; } .cleanslate { font-size: 1em !important; font-family: var(--bodyFont) !important; color: var(--darkGray) !important; } /* Review Items */ #reziew-area > div{ margin: 25px 0; padding-top: 25px; border-top: 1px solid #ebebeb; } #reziew-area > div.right, #reziew-area > div.left{ margin: 10px 0; padding-top: 0; border-top: none; } div.read-only-rating.small-star.read-only-rating {background-image: url(../images/icons/sprite-small-star.png?rand=1) !important; width: 73px !important; height: 14px !important; } #reziew-area .thumbsup.mini_thumbs a { background-image: url(../images/icons/tiny_thumbs.png) !important; } #reziew-area .social-share a { background-image: url(../images/icons/sprite_share.png) !important; } #reziew-area .crt-review-footer-report a { background-image: url(../images/icons/sprite_flags.png) !important; } #reziew-area .crt-review-message.pros span.icon, #reziew-area .crt-review-message.cons span.icon, #reziew-area .recommend span.icon { background-image: url(../images/icons/sprite-icons16.png) !important; } #reziew-area .line { font-size: 1.143em; } #reziew-area .line.dtreviewed { font-style: italic; font-size: .9em; padding: 10px 0; } .crt-review-body-wrapper { margin-top: 15px !important; } #reziew-area .crt-review-message { font-size: 1em !important; } #crt-reviews-list { border: none !important; } #reziew-area #crt-reviews-list .crt-review-item {border-top:1px solid #ebebeb !important; border-bottom: none !important; } #reziew-area #crt-reviews-list .crt-review-item:first-of-type{ border-top: none !important; } #crt-review,.review-textarea,.review-text{ border-radius:0 !important; } #crt-review{ width:85% !important; } /* Review Buttons */ #loadReviewForm, #post-form, #flag-box-yes, #post-comment-form { background:var(--color1) !important; border-radius:0 !important; border: none !important; text-align: center; font-family: var(--bodyFont); padding: 11px 9px 9px 9px !important; font-size: 1em !important; } #loadReviewForm { float: right; width: auto; } #loadReviewForm:hover, #post-form:hover, #flag-box-yes:hover, #post-comment-form:hover { background: var(--color1) !important; } #flag-box-no{ border-radius:0 !important; } #reziew-area .orange.button, #reziewbox .button, #reziew-area .qq-upload-button, a.medio.green.button,a.button.medio.green,a.button.medio.white,a.medio.green.button{box-shadow:none !important; background-color: var(--color1) !important; } .filled.rounded-div{background:#f2f2f2 !important;border-radius:0 !important;border:1px solid #ebebeb !important;} /* Review Item Content */ .average,.recommend.positive{color: var(--color1) !important; font-style: italic; } .small a,a.comment-link.left,a.ctr-edit-profile,a.ctr-user-sign-out{color:var(--color1) !important;text-decoration:none !important;} .small a:hover,a.comment-link.left:hover,a.ctr-edit-profile:hover,a.ctr-user-sign-out:hover{color: #D12F2B !important;} .comment-item{background:#f2f2f2 !important;border:none !important;} .more-reviews.filled.rounded-div{background:#bfbfbf !important;border:none !important;} .crt-review-comment-list{margin-top:5px !important;} a.pager,a.pager:hover{ color:var(--darkGray) !important; text-decoration:none !important; font-weight:bold; } a#crt-footer-link,a#crt-footer-link:hover{ color:#ebebeb !important;text-decoration:none !important; } .rating-label{ display:none !important; } .product-title{ position:relative; } .product-title div.title{ width:75%; } .spch-bub-inside,.spch-bub-inside em{ background-image:none !important; background-color: var(--color1) !important;} .point{display:none !important;} .crt-user-avatar{ border:1px solid #ebebeb !important; } #rezboxTitle{ background: var(--color1) !important;color:var(--white) !important; border:1px solid var(--color1) !important;border-radius:0 !important;font-size:12px !important;text-align:left !important;padding:8px 0 0 10px; } #rezboxLoadedContent{ border:3px solid var(--color1) !important; } #review-form-error span,#flag-box { font-family: var(--bodyFont) !important; } #rezboxClose{background:url(/includes/greybox/w_close.gif) no-repeat right bottom !important;margin:10px 5px 0 0 !important;} /* Product Reviews NON JS */ .review, .reviewsummary{ color:var(--darkGray);} .starRating, .itemReviewed, .count{ font-weight:bold; } .reviewby,.reviewdate,.reviewtext,.starRating,.total,.avgReview{ font-size: 1em; } .reviewtext{ margin-top:10px; } .reviewLogin{ padding:0 0 8px 7px; } @media all and ( max-width:580px ){ #reviews { padding: 25px 20px 30px 20px; } } /********************CUSTOM YOTPO STYLES*********************/ .yotpo-reviews-carousel { width: 100%; max-width: 1652px !important; padding: 0 3% 30px 3% !important; margin-left: auto !important; margin-right: auto !important; } .yotpo-reviews-carousel .carousel-display-wrapper #carousel-top-panel .headline { font-family: var(--headingFont); color: var(--color1) !important; font-size: 1.75rem !important; font-weight: 600 !important; margin-bottom: 20px !important; } .yotpo-reviews-carousel .carousel-display-wrapper { overflow-x: hidden; padding-left: 0 !important; padding-right: 0 !important; } .mainBody .yotpo .yotpo-nav li:before { display:none; } span.yotpo-stars { margin-right: .5em!important; } .yotpo a, #reviews .yotpo a { color: #497B8D !important; } .yotpo .yotpo-review .yotpo-header .yotpo-header-element .y-label.yotpo-user-name, .yotpo .yotpo-nav ul .yotpo-nav-tab.yotpo-active span, .yotpo.yotpo-main-widget .yotpo-label .yotpo-logo-title, .yotpo .yotpo-modal-dialog .yotpo-label .yotpo-logo-title, .yotpo .yotpo-logo-link-new>*, .yotpo .font-color-primary { color: #497B8D !important; } .yotpo.yotpo-main-widget .yotpo-bottomline.yotpo-bottomline-2-boxes .yotpo-bottomline-box-2 .yotpo-star-distribution .yotpo-star-distribution-content .yotpo-distributions-graphs .yotpo-star-distribution-graph .yotpo-star-distribution-score-wrapper .yotpo-star-distribution-graph-score, .yotpo .yotpo-modal-dialog .yotpo-bottomline.yotpo-bottomline-2-boxes .yotpo-bottomline-box-2 .yotpo-star-distribution .yotpo-star-distribution-content .yotpo-distributions-graphs .yotpo-star-distribution-graph .yotpo-star-distribution-score-wrapper .yotpo-star-distribution-graph-score { background-color: #497B8D !important;} .yotpo .yotpo-nav ul .yotpo-nav-tab.yotpo-active .yotpo-nav-wrapper { border-color: #497B8D !important; } .yotpo { margin-top:0; display: block; } .main-widget .yotpo-nav.yotpo-nav-primary ul { width:100%!important;list-style: none!important; } .main-widget .yotpo-nav.yotpo-nav-primary ul li { float:none!important;display: inline-block!important;text-align: center;width:50%!important;max-width:200px!important; } .yotpo .yotpo-nav li .yotpo-nav-wrapper { overflow:initial!important; } .yotpo .yotpo-nav ul .yotpo-nav-tab.yotpo-active .yotpo-nav-wrapper { overflow: visible!important;max-width: inherit!important; } .yotpo-reviews-carousel .carousel-display-wrapper #carousel-top-panel .all-reviews a { display: inline-block; font-family: var(--headingFont); color: var(--color1) !important; padding-top: 2px; } .yotpo-reviews-carousel .carousel-display-wrapper #carousel-top-panel .all-reviews a:after { display: inline-block; content: ""; width: 12px; height: 14px; margin: 0px 0 -1px 0; background-image: url(../images/icons/carrot-right-blue.svg); background-size: 14px; background-repeat: no-repeat; background-position: center right; transition: var(--transition); transform: translate(13px, 0); } .yotpo-reviews-carousel .carousel-display-wrapper #carousel-top-panel .all-reviews a:hover:after, .yotpo-reviews-carousel .carousel-display-wrapper #carousel-top-panel .all-reviews a:focus:after { transform: translate(18px, 0); } .yotpo-reviews-carousel .carousel-display-wrapper .carousel-read-more { color: var(--color1) !important; } @media all and ( max-width:985px ){ .yotpo-reviews-carousel .carousel-display-wrapper #carousel-top-panel .all-reviews a { margin-left: 0 !important; } } @media all and ( max-width:580px ){ .yotpo-reviews-carousel .carousel-display-wrapper #carousel-top-panel .headline { font-size: 1.26rem !important; } .yotpo.yotpo-main-widget{ margin-bottom:2em!important; } .yotpo .yotpo-icon.yotpo-icon-three-lines{ display:none!important; } } /* Dialog Pop-Ups */ .ui-widget-overlay { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0; right: 0; width: 100%; height: auto !important; background-color: rgba(11, 11, 11, 0.65); z-index: 9999; } .ui-widget-overlay.ui-front { align-content: center; } .ui-widget-overlay .ui-widget-content { top: 0 !important; } .ui-dialog { position: absolute; bottom: auto; left: 0; right: 0; margin: auto; padding: 15px 30px 30px 30px; width: 92% !important; max-width: 800px; margin-left: auto; margin-right: auto; } .ui-widget-content { position: relative; border: 1px solid var(--white); background-color: var(--white); color: var(--darkGray); z-index: 99999; } .ui-widget-content h2, .ui-widget-content h3 { color: var(--color1); } .ui-dialog-content .title { padding: 10px 0 0 0; } .ui-dialog-content .sub { padding: 5px 0 0 0; } .ui-widget-content a { color: var(--color1); font-weight: 600; } .ui-widget-content a.button { color: var(--white); } .ui-widget-content a.button.blue { color: var(--color3); } #dialog_message { text-align: center; line-height: 1.4; } #dialog_message .button {margin-bottom: 10px;} .ui-dialog-titlebar-close { position: absolute; top: 20px; bottom: auto; left: auto; right: 20px; color: var(--darkGray); background-color: var(--white); border: 1px solid var(--white); text-indent: -999999px; cursor: pointer; margin: 0; padding: 0; width: 20px; height: 20px; color: var(--darkGray); background-image: url(../images/icons/close-darkgray-large.svg); background-repeat: no-repeat; background-size: 100%; } #ui-id-1.ui-dialog-title { display: block; font-size: 2rem; font-weight: 600; color: var(--darkGray); line-height: 1.2; text-align: center; } /* UI Dialog Buttons */ .ui-dialog .ui-dialog-buttonpane button { display: inline-block; width: auto; max-width: 100%; font-family: var(--bodyFont); font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; padding: 8px 20px; margin: 20px 10px 0 10px; color: var(--white); background-color: var(--color3); border: 1px solid var(--color3); border-radius: 5px; text-decoration: none; white-space: normal; cursor: pointer; transition: var(--transition); } .ui-dialog .ui-dialog-buttonpane button:hover, .ui-dialog .ui-dialog-buttonpane button:focus { color: var(--color1); background-color: var(--white); border: 1px solid var(--color1); text-decoration: none; } .ui-widget button { font-family: var(--bodyFont); } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; text-align: center; } @media all and (max-width: 960px) { .ui-dialog-titlebar-close { top: 20px; right: 20px; } .ui-dialog { padding: 30px 6.5%; } } @media all and (max-width: 580px) { .ui-widget-content h2 { font-size: 1.5rem; } #ui-id-1.ui-dialog-title { font-size: 1.5rem; } } /* Block UI */ .blockMsg { width: 25%; top: 45%; left: 0; right: 0; margin: auto; text-align: center; background-color: var(--white); border: 1px solid var(--white); padding: 30px; color: var(--darkGray); } .blockMsg p { font-weight: 600; color: var(--color1); } .blockMsg p:last-of-type { margin-bottom: 0; } .loader img { position: relative; z-index: -1; margin: -20px auto -30px auto; } @media all and (max-width: 960px) { .blockMsg { width: 70%; } } /* =============================================== Wishlist Listing * ===============================================*/ /* Wishlist Controls */ .impactWishlist.noImage .caption { padding: 20px 3% 0 3%; } .nameWishlist { font-size: 1.5rem; font-weight: 600; color: var(--color1); line-height: 1.2; } .nameChange{ display: flex; width: 100%; } ul.wishlistControls { list-style: none; padding: 0; margin: 0; text-indent: 0; } ul.wishlistControls.right { margin: 0 0 0 auto; } .wishlistSelectPanel.sectionNav .content > ul { padding: 0 0 12px 0; } .wishlistNames { border-top: 2px solid rgba(127, 130, 135, 0.20); padding: 0; } .wishlistSelectPanel.sectionNav .content > ul.wishlistNames { padding: 20px 0; } .sectionNav .content ul.wishlistNames li a { font-size: 1rem; font-weight: 400; padding: 4px 0; } .sectionNav .content ul.wishlistNames li.checked a{ color: var(--color1); text-decoration: underline; } .wishlistSelectPanel.sectionNav .title { color: var(--darkGray); border-bottom: none; padding: 0; } ul.wishlistControls li.wishBtn input { font-family: var(--bodyFont); font-size: .85rem; color: var(--color1); background-color: transparent; border: none; vertical-align: middle; text-decoration: underline; } .mainBody ul.wishlistControls li:before { display: none; } ul.wishlistControls li.wishBtn { position: relative; display: inline-block; padding: 0 30px 4px 0; margin-bottom: 0; } ul.wishlistControls li.wishBtn:last-child { padding: 0 0 4px 0; } ul.wishlistControls li.wishBtn a { font-size: .85rem; color: var(--color1); line-height: 1; text-decoration: underline; background-position: left center; transition: var(--transition); } ul.wishlistControls li.wishBtn a:hover, ul.wishlistControls li.wishBtn a:focus, ul.wishlistControls li.wishBtn a:hover > input, ul.wishlistControls li.wishBtn a:hover, ul.wishlistControls li.wishBtn a:focus { color: var(--darkGray); } ul.wishlistControls input[type="submit"], ul.wishlistControls input[type="button"] { font-family: var(--bodyFont); font-size: .85rem; font-weight: 400; color: var(--color1); border: none; background-color: transparent; background-repeat: no-repeat; background-position: left center; transition: var(--transition); padding: 0 0 0 24px; text-decoration: underline; cursor: pointer; transition: var(--transition); } ul.wishlistControls input[type="submit"]:hover, ul.wishlistControls input[type="submit"]:focus, ul.wishlistControls input[type="button"]:hover, ul.wishlistControls input[type="button"]:focus { color: var(--darkGray); } ul.wishlistControls li.wishBtn .on, ul.wishlistControls li.wishBtn a.on:hover, ul.wishlistControls li.wishBtn a.on:focus { color: var(--color1); } ul.wishlistControls .renameBtn { background-image: url(../images/icons/icon-pencil.svg); background-size: 18px; background-repeat: no-repeat; padding: 0 0 0 22px; } ul.wishlistControls .addBtn { background-image: url(../images/icons/add-wishlist.svg); background-size: 13px; background-repeat: no-repeat; padding: 0 5px 0 22px; } ul.wishlistControls .cartBtn { background-image: url(../images/icons/icon-cart.svg); background-size: 18px; padding: 0 5px 0 25px; } ul.wishlistControls .deleteBtn { background-image: url(../images/icons/icon-trash-light-blue.svg); background-size: 18px; padding: 0 5px 0 22px; } .wishBtn .plus { display: inline-block; font-weight: 600; font-size: 2.2rem; font-family: var(--bodyFont); vertical-align: bottom; margin-bottom: 1px; } /* Wishlist Controls Submenu */ .mainBody ul.wishSubMenu, .sectionNav .wishBtn a + ul.wishSubMenu { display: none; position: absolute; top: 134%; left: 0; list-style:none; width:300px; height:auto; background-color: var(--white); z-index: 2; text-indent: 0; padding: 20px 25px 15px 25px; margin: 0; border: 1px solid rgba(62, 62, 62, 0.40); border-radius: 0; } .mainBody .wishBtn a.on + ul.wishSubMenu, .sectionNav .wishBtn a.on + ul.wishSubMenu { display: block; background-color: var(--white); } ul.wishSubMenu:before, ul.wishSubMenu:after { content: ""; display: block; position: absolute; border-style: solid; border-width: 0 10px 14px 10px; left: 19px; } ul.wishSubMenu:before { border-color: rgba(62, 62, 62, 0.40) transparent; top: -14px; left: 19px; } ul.wishSubMenu:after { content: ""; display: block; position: absolute; border-style: solid; border-color: var(--white) transparent; border-width: 0 10px 14px 10px; top: -12px; } .sectionNav ul.wishSubMenu li { padding: 0; margin: 0; } ul.wishSubMenu li:before { content: ''; } .mainBody ul.wishSubMenu label { font-size: 1rem; line-height: 1.2; font-weight: 500; text-indent: 0; margin-bottom: 0; } ul.wishlistControls li.wishBtn input.placeholder { font-size: 1em; display: inline-block; background-color: var(--white); border: 1px solid rgba(62, 62, 62, 0.40); color: #434548; margin: 10px 0; padding: 8px 10px; width: 100%; text-decoration: none; } ul.wishlistControls ul.wishSubMenu input[type="submit"] { font-size: .9rem; font-weight: 600; color: var(--darkGray); background-size: 7px; background-position: right center; padding: 0 14px 0 0; text-decoration: none; } ul.wishlistControls ul.wishSubMenu input[type="submit"]:hover, ul.wishlistControls ul.wishSubMenu input[type="submit"]:focus { text-decoration: underline; padding: 0 19px 0 0; background-image: url(../images/icons/carrot-right-blue.svg); } ul.wishSubMenu input.plusButton { font-size: 3em; color: var(--darkGray); font-family: var(--bodyFont); font-weight: 600; } ul.wishSubMenu input.plusButton:hover, ul.wishSubMenu input.plusButton:focus { color: var(--color1); cursor: pointer; } /* WishList Product Grid */ .wishlistControlWrap { position: relative; z-index: 2; margin: 0 0 20px 0; border-bottom: 2px solid rgba(127, 130, 135, 0.20); } .interior .noImage + .mainContent.wishlistItems { position: relative; z-index: 1; padding: 0 3%; } .wishlistItems .interiorContent:before { display: none; content: ''; } .interiorContent .productList.wishlistProducts.grid { column-gap: 3.333%; } .productList.wishlistProducts .group, .productList.wishlistProducts .gridSizer { width: 31%; } .wishlistProducts input[type='submit'].closeButton { color: var(--darkGray); background-color: var(--white); background-image: url(../images/icons/close-darkgray-large.svg); background-size: 18px; background-repeat: no-repeat; background-position: center; border: 1px solid var(--white); transition: var(--transition); text-indent: -9999px; } .wishlistProducts.productList .closeButton { right: -84%; } .wishlistProducts.productList img { margin: 0 auto 6px auto; } @media all and (max-width: 1400px) { .productList.wishlistProducts .group, .productList.wishlistProducts .gridSizer { width: 48%; } } @media all and (max-width: 1350px) { .wishlistProducts.productList .closeButton { right: -81%; } } @media all and (min-width: 961px) { .wishlistSelectPanel.sectionNav .content > ul.wishlistNames { width: 100%; max-width: 240px; } .wishlists.productsWrap { width: 100%; max-width: 1075px; margin: 0 0 0 auto; } } @media all and (max-width: 960px) { .wishlistControlWrap { margin: 0; } .sectionNav.wishlistSelectPanel { margin: 10px 0 30px 0; } .impactWishlist.noImage .caption { padding: 20px 20px 0 20px; } .interior .noImage + .mainContent.wishlistItems { padding: 0; } ul.wishlistControls li.wishBtn .on, ul.wishlistControls li.wishBtn a.on:hover, ul.wishlistControls li.wishBtn a.on:focus { color: var(--color3); } } @media all and (max-width: 720px) { .wishlists.productsWrap { padding-left: 20px; padding-right: 20px; } .productList.wishlistProducts .group, .productList.wishlistProducts .gridSizer { width: 100%; } .wishlistProducts.productList .closeButton { right: -92%; } } @media all and (max-width: 580px) { .nameChange { flex-direction: column; } ul.wishlistControls.right { margin: 0; } .wishlistProducts.productList .closeButton { right: -85%; } } /* =============================================== Wishlist Popup * ===============================================*/ /* Wishlist Items */ .popup .mainContent.col9, .popup .mainContent.col12 { margin-top: 18px; } .popup h2.title { margin: 0 20px 18px 20px; width: auto; } h2.popup, .ui-widget-content h2.popup { color: var(--color1); text-align: center; margin-top: -42px; margin-bottom: 16px; } .whiteBox .mfp-iframe-holder .mfp-content { max-width: 780px; min-height: 550px; } .wishlistArea { display: flex; flex-flow: wrap; justify-content: center; margin-top: -20px; } .wishlistArea .group { display: flex; flex-direction: column; width: 24%; text-align: center; padding: 15px; margin: 0 1% 25px 0; background-color: var(--white); } .wishlistArea .group .title { font-family: var(--bodyFont); padding: 10px 0 0 0; margin: 0; font-size: 1rem; font-weight: 600; background: none; border: none; white-space: normal; } .ui-dialog-content .wishlistArea .sub { text-transform: none; margin: 0 0 15px 0; font-family: var(--bodyFont); font-size: .9rem; font-weight: 400; } .createWishlist { background-color: var(--white); border: none; display: inline-block; width: 100%; cursor: pointer; } .createWishlist.plus { font-family: var(--bodyFont); height: 126px; line-height: 126px; font-weight: 300; color: var(--color1); font-size: 8.5rem; } .createWishlist.title { width: 85%; display: inline; color: var(--darkGray); } .ui-dialog-content .createWishlist.title { padding-top: 0; width: 100%; text-align: center; } .ui-dialog-content input.createWishlist.title { max-width: 100%; width: min-content; } .wishlistArea .group label { width: 100%; font-size: .9rem; } .productList .button.whiteBg { padding: 9px 12px 0 12px; } .wishlistArea .button { width: auto; padding: 9px; margin-bottom: 10px; } #dialog_message .wishlistArea .group .button { font-size: 0.81rem; padding: 8px 5px; margin: auto auto 0 auto; background-position: right 8px center; } #dialog_message .wishlistArea .group .button { background-image: none; } #dialog_message .wishlistArea .group .button:hover, #dialog_message .wishlistArea .group .button:focus { background-image: url(../images/icons/carrot-right-white.svg); } #tbWishListName, #btnCreateWishList { width: 100%; } #tbWishListName { margin: 10px auto; } #ltlCreateError, #ctrWishlist_rqName, #ctrWishlist_rqNewName { font-size: 1rem; font-weight: bold; color: var(--red); line-height: 1.2; margin: 0 0 8px 0; } #ctrWishlist_rqName, #ctrWishlist_rqNewName { font-size: .9rem; } #pnlCreateWishlist { display: flex; flex-direction: column; flex-flow: wrap; height: 100%; } input.createWishlist.title.mobile[type=checkbox] { position: absolute; left: -99999px; } input.createWishlist.title.mobile[type=checkbox]:checked ~ #pnlCreateWishListMobile { margin-top: 0; max-height: 0; opacity: 0; display: none; } label[for=pnlCreateWishListMobile]{ color: var(--color1); font-size: 1rem; padding: 12px; cursor: pointer; } label[for=pnlCreateWishListMobile]:hover, label[for=pnlCreateWishListMobile]:focus{ text-decoration: underline; } .closeWishMenu { font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 1.1rem; line-height: 1; position: absolute; top: -10px; bottom: auto; left: auto; right: -24px; color: var(--darkGray); background-color: var(--white); border: 1px solid var(--white); padding: 4px 15px; margin: 0; } .closeWishMenu:hover, .closeWishMenu:focus { color: var(--color1); } @media all and (max-width: 960px) { .createWishlist.title { width: 100%; padding: 12px; text-align: left; color: var(--color1); } #dialog_message .tabletOnly .group { position: relative; text-align: left; } .ui-dialog-content input.createWishlist.title { display: block; width: auto; font-size: 1rem; color: var(--color1); background-color: var(--white); background-image: none; padding: 12px; margin: 15px 0; } .ui-dialog-content input.createWishlist.title:hover, .ui-dialog-content input.createWishlist.title:focus { text-decoration: underline; } input.createWishlist.title.mobile[type=checkbox] { opacity: 0; position: absolute; left: 0; width: 100%; } input.createWishlist.title.mobile[type=checkbox]:hover + label, input.createWishlist.title.mobile[type=checkbox]:focus + label { text-decoration: underline; } #tbMobileWishListName { display: block; width: 100%; margin: 5px 0 15px 0; } } /* =============================================== View Cart Page ===============================================*/ .impactLanding.viewCart .caption .wrapper { display: flex; align-items: center; } .quickOrder, .quickOrder.col9,.quickOrder.col9:last-child { width: 71%; margin: 44px 0 5px 0; } .orderNotice + .quickOrder, .orderNotice + .quickOrder.col9,.quickOrder.col9:last-child { margin-top: 0; } .quickOrder .collapsedMoreContent { display: block; font-size: .95rem; } .quickOrder .collapseMoreButton span { font-size: 1.12rem; } .addProduct.formRow, .addProduct.formRow.col9:last-child { display: flex; width: 71%; align-items: center; margin: 0 0 30px 0; } .addProduct label { font-weight: 600; } .addProduct #tbProductNumber { width: 96%; } .addProduct .addBtn { text-align: right; } .addProduct.formRow > div.col4.addBtn { margin-right: 0; } .continueButton { display: inline-block; margin: 0 0 0 3%; } /*** NOTICE ***/ .orderNotice, .orderNotice.col9 { width: 71%; margin: 44px 0 0 0; } .orderNotice .wrapper.whiteBg { background-color: var(--white); border: 1px solid rgba(62, 62, 62, 0.40); } .orderNotice .wrapper { display: flex; flex-direction: column; font-size: 1rem; line-height: 1.5; background-color: var(--lightGray); border: 1px solid var(--lightGray); border-radius: 10px; padding: 35px 29px; margin: 0 0 35px auto; } .orderNotice h2 { font-size: 1.5rem; color: var(--color3); margin-bottom: 28px; } .orderNotice p:last-of-type { margin-bottom: 0; } /*** RESPONSIVE TABLES ***/ .viewCart.table { display: table; border-top: 1px solid var(--lightGray); } .viewCart .table-head { display: table-header-group; background: var(--lightGray); border-bottom: none; } .viewCart .table-head .col9 { width: 75%; } .viewCart .table-head .column { background: var(--lightGray); text-align: left; } .viewCart .tableRow.hidden { display: none; } .viewCart .tableRow { width:100%; position:relative; } .viewCart .tableRow:last-child .column { border-bottom: none; } .viewCart .tableRow .column { display: table-cell; padding: 15px; border-right: 0px; border-left:0px; border-bottom:0 !important; background:transparent!important; font-size: 1.143em; font-weight: 600; } .viewCart .tableRow:after { display: block; content: ""; width: 100%; height: 1px; background-color: rgba(127, 130, 135, 0.30); } /*** PRODUCT ORDER TABLE ***/ .viewCart .table.product-order-table, .table.product-order-table .column, .table.product-order-table .tableRow .column:nth-child(1) { border: none; background: none; font-weight: bold; font-size: 13px; } .col2, .col3, .col4, .col6, .col8, .col9, .col12 { float: left; margin: 0 3% 0 0; } .col3 { float: left; margin: 0 2.5% 0 0; } .col4 { float: left; margin: 0 2% 0 0; } .col2:last-child, .col3:last-child, .col4:last-child, .col6:last-child, .col8:last-child, .col9:last-child, .col12 { margin: 0; } .col2 { width: 14%; } .col3 { width: 22.5%; } .col4 { width: 31%; } .col6 { width: 48%; } .col8 { width: 65%; } .col9 { width: 73.5%; } .col12 { width: 100%; margin: 0; } @media all and (max-width: 580px) { .col2, .col3, .col4, .col6, .col8, .col9 { width: 100%; } } /*** VIEW CART TABLE ***/ .viewCartWrap { display: flex; flex-direction: column; width: 100%; max-width: 1642px; padding: 0 3%; margin: 0 auto 20px auto; } .viewCartTable.col9 { margin: 0; } #emptyCart { padding: 0 0 30px 0; } .cartDetails { display: flex; } #deletedItems.cartDetails { flex-direction: column; padding: 0 0 20px 0; } #deletedItems .deletedItem { display: flex; flex-direction: row; font-weight: 600; color: var(--red); padding: 0 0 10px 0; } #deletedItems .deletedSku { padding: 0 15px 5px 0; } #deletedItems .deletedName { padding: 0 0 5px 0; } .tableGroup { display: table; width: 100%; } .viewCart.table { width: 100%; font-size: 1rem; margin: 0 0 30px 0; overflow-x: hidden; } .viewCart.table .column { padding: 40px 15px; } .viewCart .table-head .column { padding: 14px 15px; } .viewCart.table .subtotal .column { background: #ccc; font-weight: bold; } .viewCart.table .total { text-align: right; } .viewCart.table .delete { text-align: center; margin: 10px auto 0 auto; } .viewCart.table input[type='button']{color: var(--color3); text-decoration: none; border: none; cursor: pointer; } .viewCart.table input[type='button']:hover {text-decoration: underline;} .viewCart.table .txtBtn input { font-family: var(--bodyFont); font-size: .9rem; font-weight: 400; color: var(--color3); border: none; background-color: transparent; background-size: 17px; background-repeat: no-repeat; background-position: left center; transition: var(--transition); padding: 0 0 0 24px; text-decoration: underline; cursor: pointer; transition: var(--transition); } .viewCart.table .txtBtn input:hover, .viewCart.table .txtBtn input:focus { color: var(--darkGray); } .viewCart.table .wishBtn { background-image: url(../images/icons/icon-heart.svg); background-repeat: no-repeat; } .viewCart.table .deleteBtn { background-image: url(../images/icons/icon-trash.svg); background-repeat: no-repeat; } div[class^="column col"]:not(:nth-child(-n+3)) { text-align:center; } .viewCart.table .prodTitle { display: block; float:left; width:100%; font-size: 1.05rem; font-weight: 600; line-height: 1.2; margin: 0 0 15px 0; } .viewCart.table .prodTitle a { color: inherit; text-decoration: none; transition: var(--transition); } .viewCart.table .prodTitle a:hover, .viewCart.table .prodTitle a:focus { color: var(--color3); } .viewCart.table .prodNumber { font-size: .9rem; font-weight: normal; margin: 0 0 15px 0; } .viewCart.table a { text-decoration: underline; } .viewCart.table .prodPrice { font-size: .9rem; display:block; font-weight: 400; } .viewCart.table .unitPrice { font-size: 1rem; font-weight: 600; margin: 0 0 2px 0; } .viewCart.table .prodPrice span { display:block; clear:both; line-height: 1.4; } .viewCart.table .trWrap--no-margin .column.col2 { padding-right: 0; } .viewCart.table #qty { font-size: 1rem; text-align:center; } .viewCart.table .quantity { margin: 0 auto; } .viewCart.table .quantity > div { display: flex; justify-content: center; margin: 0 auto; } .viewCart.table .quantity select { height: 36px; min-height: 36px; font-weight: 600; text-align: center; padding: 0 13px 0 8px; margin: 0 3px; border: 1px solid var(--lightGray); border-radius: 10px; background-color: var(--lightGray); background-position: right 8px center; background-size: 10px; } .viewCart.table .quantity .qty { padding-right: 5px; } .viewCart.table input[type='button'][value='subtract'], .viewCart.table input[type='button'][value='add'] { width: 40px; } .viewCart.table #isLineItems { display: table; width: 100%; } .viewCart.table .quantity .listingQty { width: 38px; height: 36px; font-weight: 600; text-align: center; padding: 5px; margin: 0 4px; border-color: var(--lightGray); border-radius: 10px; background-color: var(--lightGray); } .viewCart.table .outOfStock { display: table; width: 100%; } .viewCart.table .outOfStock input[type='button'][value='subtract']:hover, .viewCart.table .outOfStock input[type='button'][value='add']:hover, .viewCart.table .outOfStock input[type='button'][value='subtract']:focus, .viewCart.table .outOfStock input[type='button'][value='add']:focus { color: var(--darkGray); background-color: #fef8e5; } .viewCart.table .outOfStock .quantity .listingQty, .viewCart.table .outOfStock .quantity select { border-color: rgba(127, 130, 135, 0.10); background-color: rgba(127, 130, 135, 0.10); } .outOfStock { background:#fef8e5; } .outOfStockNotice { font-size: .9rem; font-weight: 600; color: var(--red); line-height: 1.4; margin: 0 0 15px 0; text-transform: uppercase; } .viewCart.table .quantity .qtyMsg { font-size: .95rem; font-weight: 400; line-height: 1.4; text-align: center; margin: 0 auto 7px auto; } .viewCart.table .totalValue { font-size: 1.15rem; color: var(--color3); font-weight: 700; } .checkoutMsg, .checkoutMsg.col9:last-child { font-size: .95rem; font-weight: 600; color: var(--red); margin: 0 0 15px 0; } #qoProdError, #qoQtyError { display: inline-block; margin: 0 0 10px 0; text-transform: none; } .invalidInput { font-size: .9rem; font-weight: 600; color: var(--red); text-align: center; margin: 15px 0 0 0; } .priceBox .invalidInput { margin: 5px 0 0 0; } .stockNotice { float: left; width: 50%; font-size: 1.05rem; font-weight: 600; line-height: 1.4; padding: 20px 25px; } .stockNoticePrice { float: right; width: 50%; text-align: right; font-size: 1.05rem; font-weight: 600; line-height: 1.4; padding: 20px 25px; } .stockNotice.full, .stockNoticePrice.full { width: 100%; } .desktop { display:block; } .viewCart .trWrap--no-margin.col9 { width: 71%; margin-right: 0; } .viewCart .tableRow .trWrap.col3 { display: flex; } .viewCart .tableRow .trWrap.col3 .column.col2 { display: flex; -ms-flex-direction: column; flex-direction: column; flex: 1; justify-content: center; align-items: center; } .quickOrderProductNumber .placeholder { width:100%; } .quickOrderQty .placeholder { width:100%; } .quickOrderAddToCart { text-align: right; } .quickOrderAddToCart.col6 { margin-top: 21px; } .quickOrderAddToCart .button { width: 100%; } .viewCart input[type=submit]:hover, .continueShopping .txtBtn:nth-child(-n+3) input[type=submit]:hover { text-decoration: underline; } /* Order Summary */ .orderSummaryWrap, .orderSummaryWrap.col3 { display: flex; width: 30%; padding-right: 5px; margin: 0 0 0 auto; } .orderSummary { width: 100%; float: left; margin: 0 0 0 auto; } .orderSummary h2 { font-size: 1.5rem; color: var(--color3); margin-bottom: 28px; } .orderSummary .rightShift { text-align: right; margin: 0 0 0 0; } .orderSummary .subTotal { font-weight: 400; margin-bottom: 5px; } .orderSummary .subTotal.discount { font-weight: 700; } .orderSummary .subTotalValue { font-weight: 700; } .orderSummary .estimatedTaxValue { font-weight: 700; } .orderSummary.col3 { margin-right: 0; } .orderSummary.col3 .accordion { width: 100%; } .orderSummary .wrapper { display: flex; flex-direction: column; max-width: 372px; font-size: 1rem; line-height: 1.5; background-color: var(--lightGray); border: 1px solid var(--lightGray); border-radius: 10px; padding: 35px 29px; margin: 0 0 35px auto; } .orderSummary .wrapper.whiteBg { background-color: var(--white); border: 1px solid rgba(62, 62, 62, 0.40); } .orderSummary .wrapper.whiteBg p:last-of-type { margin-bottom: 0; } .bannerAd { float: left; margin: 20px 0; text-align: center; } .orderSummary .zip .placeholder { width:100%; } .orderSummary .zip.col6:not(:first-child) { margin:0px 0 0 0!important; } .orderSummary .zip select { width: 100%; padding: 8px 30px 8px 10px !important; -webkit-padding-end: 30px !important; -webkit-padding-start: 10px !important; } .orderSummary .zip, .orderSummary .calculateBtn { margin-top:0px; } .orderSummary .button { width: 94%; line-height: 1.2; margin: 21px auto; } .orderSummary .button + .button { margin-top: 0; } .orderSummary .accordion.focus.button:last-of-type { margin-bottom: 0; } .orderSummary .button.calcShip { margin-top: 0; } .orderSummary .calculateBtn.col12 { margin-top: 8px; display: block; } .orderSummary .regZip, .orderSummary .tbZip, .orderSummary .rqState { color: #CC2A24; margin-top: -6px; } .orderSummary .zip.col6 { position: relative; } .orderSummary .regZip, .orderSummary .rqState { position:absolute; bottom:-8px; left:0;} .orderSummary .tbZip { display: block; } .orderSummary .estimatedShippingValue , .orderSummary .estimatedTotalValue, .orderSummary .estTaxValue, .orderSummary .estimatedTotal { font-weight: 700; } .orderSummary .estimatedTotal { line-height: 1.8; margin-top: 10px; } .orderSummary .estimatedTotalValue { font-size: 1.15rem; color: var(--color3); margin-top: 10px; } .orderSummary .divide { display: block; width: 100%; border-bottom: 1px solid rgba(127, 130, 135, 0.30); clear: both; padding-top: 24px; margin-bottom: 24px; } .orderSummaryTable .container.center, .orderSummaryTable .container.center td, .orderSummaryTable .container.center a { display: block !important; } .notFulfilled { color: #CC2A24; font-weight: 600; margin-top: 18px; margin-bottom: 18px; } .notFulfilled p:last-child { margin-bottom: 0; } .mainBody .orderSummary ul { padding-left: 0; margin-left: 34px; } .mainBody .orderSummary ul li:before { top: 2px; bottom: auto; left: -16px; color: var(--color3); content: "\2022"; width: 10px; height: 10px; margin: -3px 4px 0 0; background-image: none; } .orderSummary a, .orderSummary li a { font-weight: 700; line-height: 1.5; color: var(--color3); } .orderSummary a:hover, .orderSummary li a:hover { color: var(--darkGray); } .orderSummary ul { margin-bottom: 0; } .orderSummary ul li { margin-bottom: 0; } #mainBody_ctrcheckout_ddlSalesRepLabel { font-weight: 700; margin-top: 15px; margin-bottom: 7px; display: block; } #mainBody_ctrcheckout_ddlSalesRep{margin-bottom: 20px;} .shippingMsg { font-size: .775rem; font-style: italic; margin-top: 7px; display: inline-block; line-height: 1.5; } .codMessage { display: block; color: var(--red); font-weight: 700; padding: 0px 5px 16px 9px; } /* Continue Shopping */ .continueShopping { display: flex; display:-ms-flexbox; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center } .continueShopping > .col6 { display: flex; -ms-flex-pack: justify; justify-content: space-between; } .continueShopping a { color:#434548!important; text-decoration: underline; } @media all and (min-width: 1780px) { .viewCartWrap + .newProducts > .wrapper { max-width: 1528px; } } @media all and (max-width: 1200px) { .viewCart .table-head { display: none; } .viewCart .tableRow .col4:first-of-type { width: 100%; padding-bottom: 0; } .viewCart.table .trWrap--no-margin .column.col2 { width: 31%; padding-right: 15px; } .viewCart.table .trWrap--no-margin .column.col2 + .column.col2 { padding: 30px 15px; } .viewCart .tableRow .col4:last-of-type { width: 31%; padding-right: 0;} } @media all and (min-width: 961px) { .addProduct input[type='button'].button { width: 94%; } .orderSummary { padding: 0 0 0 10%; } } @media all and (max-width: 960px) { .impactLanding.viewCart .continueButton { display: block; margin: 20px 0 0 0; } .impactLanding.viewCart .caption .wrapper { flex-direction: column; align-items: flex-start; } .orderNotice, .orderNotice.col9 { width: 100%; } .quickOrder, .quickOrder.col9 { width: 100%; } .addProduct.formRow, .addProduct.formRow.col9:last-child { width: 100%; } .addProduct .formCol.col4 { margin: 0 4% 0 0; } .addProduct .formCol.col4.addBtn { margin: 0; } .viewCartTable.col9 { width: 100%; } .checkoutMsg.col9 { width: 100%; } .cartDetails { flex-direction: column; } .orderSummary { margin: 0; } .orderSummary .wrapper { max-width: 100%; margin: 0 0 30px 0; } .orderSummary .wrapper:last-of-type { margin: 0; } .emailForm.browserView .orderSummary { margin: 20px 0; } .orderSummaryWrap, .orderSummaryWrap.col3 { width: 100%; margin: 0 0 30px 0; } } @media all and (min-width: 721px) { .addProduct #tbQty { max-width: 224px; } .viewCart.table .stockNoticePrice { padding-right: 12%; } } @media all and (max-width: 720px) { .addProduct.formRow, .addProduct.formRow.col9:last-child { flex-flow: wrap; } .addProduct .formCol.col4 { width: 48%; } .addProduct .formCol.col4 + .formCol.col4 { width: 48%; margin-right: 0; } .addProduct input { width: 100%; } .addProduct .formCol.col4 + .formCol.col4.addBtn { width: 100%; } .viewCart.table .stockNoticePrice { padding-right: 6%; } } @media all and (min-width: 581px) { .viewCart .tableRow .column:nth-child(1) { padding-left: 0; } .viewCart .tableRow .col4:first-of-type { padding-right: 0; } /* Cart Table Sides */ .viewCart.table .table-head > .col3 > .column { padding-left: 0; } .viewCart.table .table-head > .col3, .viewCart.table .stockNotice, .viewCart .tableRow .trWrap.col3 { padding-left: 6%; } } @media all and (max-width: 580px) { .addProduct #tbProductNumber { width: 100%; } .viewCart.table { border-top: none; } .viewCart.table .column { padding: 30px 15px; } .viewCart.table .column.col10 { text-align: center; padding-bottom: 0; margin: 0 auto; } .viewCart.table .quantity .listingQty { width: 45px; height: 45px; } .viewCart.table .quantity select { height: 45px; } .orderSummary .col8 { width: 65%; } .orderSummary .col4 { width: 31%; } .orderSummary .col3 { width: 22.5%; } } @media all and (max-width: 370px) { .viewCart.table .trWrap--no-margin .column.col2, .viewCart.table .trWrap--no-margin .column.col2 + .column.col2 { width: 47%; padding: 30px 15px 20px 15px; } .viewCart.table .trWrap--no-margin .column.col4 { width: 100%; padding-right: 0; } .viewCart.table .trWrap--no-margin .column.col4:last-of-type { padding: 0 0 30px 0; } } /* =============================================== Checkout ===============================================*/ .checkoutWrap { display: flex; flex-direction: column; width: 100%; max-width: 1610px; padding: 0 3%; margin: 0 auto 20px auto; } .checkoutForm.col9 { width: 71%; margin-right: 2%; } .checkoutForm h2 { font-size: 2.25rem; font-weight: 700; } .checkoutForm label { font-weight: 400; } .checkoutForm label.semiBold { font-weight: 600; } .checkoutForm label.bold { font-weight: 700; } .checkoutForm .notActive h2 { color: rgba(62, 62, 62, 0.60); } .checkoutForm input[type="text"], .checkoutForm input[type="email"], .checkoutForm input[type="tel"], .checkoutForm select { width: 100%; } .formWrap { font-size: .95rem; border: 1px solid rgba(62, 62, 62, 0.40); border-radius: 10px; padding: 40px 5%; margin: 0 0 50px 3%; } .notActive > .formWrap { /*display: none;*/ } .panelType.notActive { margin-bottom: 30px; } .formWrap.fullWidth { padding: 24px 3%; margin-left: 0; margin-right: 0; } .formOptionWrap { display: flex; align-items: center; border: 1px solid rgba(62, 62, 62, 0.40); background-color: var(--white); padding: 15px 30px 15px 15px; margin: 15px 0; } .formOptionWrap.selected { border: 1px solid var(--color1); background-color: rgba(241, 241, 241, 0.60); } .formOptionWrap.noBorder { border: 1px solid var(--lightGray); border-radius: 10px; background: var(--lightGray); padding: 35px 30px; margin: 10px 0 25px 0; } .formOptionWrap .rightShift, .editInfo .rightShift { align-content: center; text-align: right; margin-left: auto; } .formOptionWrap .rightShift span, .editInfo .rightShift span { font-size: 1.12rem; font-weight: 700; color: var(--color3); } .formOptionWrap .checkboxLabel { width: auto; font-weight: 600; } .formOptionWrap .smallText { margin-top: 5px; } .formRow.radioOptions table tbody, .formRow.radioOptions table tr, .formRow.radioOptions table tr td { float: left; width: 100%; } td > input[type="checkbox"] + label, td > input[type="radio"] + label, input[type="checkbox"] + .checkboxLabel, input[type="radio"] + .checkboxLabel { float: left; display: inline-block; margin-bottom: 10px; } td > input[type="checkbox"] + label, td > input[type="radio"] + label { width: 85%; } .checkboxLabel { width: 95%; line-height: 1.2; } .formRow .col6 .checkboxLabel { width: 91%; } .notComplete .checkboxLabel label.semiBold { font-size: .95rem; margin-bottom: 8px; } .formWrap .complete { padding-left: 3%; } .formWrap p, .formRow p, .formRow span { font-size: .95rem; } .formRow input[type=text], .formRow input[type=email], .formRow input[type=url], .formRow input[type=password], .formRow input[type=tel], .formRow textarea, .formRow select { padding: 16px; margin-bottom: 18px; } .formRow input[type=checkbox] { float: left; clear: left; vertical-align: top; margin: 3px 8px 10px 0; } .formRow td > input[type=checkbox] { margin-top: 2px; } .formRow.radioOptions { float: left; width: 100%; margin-bottom: 18px; } .formRow.radioOptions input[type=radio] { float: left; clear: left; margin-top: 3px; } .formRow select { min-height: 58px; } .formRow > div.col6 { width: 48%; } .formRow > div.col6 { font-weight: bold; } .formRow > div.col6 img { vertical-align: top; } .formRow > div.col6:first-of-type { margin-right: 4%; } .formRow > div.col4 { width: 30.33%; } .formRow > div.col4:not(last-of-type) { margin-right: 4.333%; } .formRow > div.col4:last-of-type { margin-right: 0; } .formRow input[type='submit'] { margin-top: 15px; } .formRow input[type="checkbox"]:checked { vertical-align: top; } .editInfo { display: flex; font-size: .95rem; line-height: 1.5; } .editInfo .txtBtn input, .editInfo .txtBtn input[type='submit'] { font-size: .9rem; font-weight: 400; color: var(--color3); background-color: var(--white); background-image: none; border: none; text-decoration: underline; padding: 0; margin: 5px 0 0 0; } .formOptionWrap .editInfo .txtBtn input, .formOptionWrap .editInfo .txtBtn input[type='submit'] { background-color: var(--lightGray); } .editInfo .txtBtn input:hover, .editInfo .txtBtn input:focus { color: var(--darkGray); } .noBorder .editInfo .txtBtn input:hover, .noBorder .editInfo .txtBtn input:focus, .noBorder .editInfo .txtBtn input[type='submit'] { background-color: var(--lightGray); } .editInfo > div { margin: 0 20px 0 0; } .editInfo label, .editInfo .semiBold, .notComplete .semiBold:not(label) { font-size: 1.12rem; font-weight: 600; } .editInfo label { margin-bottom: 0; } .verifyInfo { width: 58%; font-size: 1.12rem; font-weight: 600; color: rgba(62, 62, 62, 0.80); } .formOptionWrap.noBorder .verifyInfo { width: auto; } .mediumText { font-size: .95rem; } .smallText, span.smallText { display: block; color: var(--darkGray); font-size: .8rem; font-weight: 500; } .smallText.red-font { color: var(--red); } .formOptionWrap.selected .smallText.red-font { color: #CC2A24; } .smallFont, .formWrap p.smallFont, .formRow span.smallFont { font-size: .74rem; } .txtBtn input { font-family: var(--bodyFont); font-size: .9rem; font-weight: 400; color: var(--color3); border: none; background-color: transparent; transition: var(--transition); text-decoration: underline; cursor: pointer; transition: var(--transition); } .checkoutForm .txtBtn input { padding: 0; } .txtBtn input:hover, .txtBtn input:focus { color: var(--darkGray); } .ccImg { width: auto; margin-top: 30px; max-height: 60px; } .ccImg.ccv { max-height: 50px; } .rightShift { text-align: right; } .checkoutWrap .orderSummaryWrap, .checkoutWrap .orderSummaryWrap.col3 { width: 27%; } .orderSummary .toggleBox { display: flex; padding: 14px 20px 10px 20px; margin-top: 58px; } .toggleItems { width: 100%; } .toggleItems h2 { display: inline; font-size: 1.12rem; color: var(--darkGray); margin-right: 20px; } .toggleItems .rightShift { display: inline; } .orderSummary .toggleItems a.txtBtn { display: inline; font-size: .85rem; font-weight: 400; margin-right: 20px; } .orderSummary .stockNoticePrice.full { padding-top: 0; } .orderSummary .outOfStock + .stockNoticePrice.full { padding-top: 20px; } .orderSummary .tableRow:not(:first-of-type):after { display: block; content: ""; width: 100%; height: 1px; background-color: rgba(127, 130, 135, 0.30); } .toggleItems .collapseMoreButton { float: right; display: inline; padding: 4px 0; margin: 0; font-size: .85rem; } .toggleItems .collapseMoreButton span { color: var(--darkGray); text-decoration: none; transition: var(--transition); } .toggleItems .collapseMoreButton:hover span { color: var(--color1); } .toggleItems .collapseMoreButton:before { display: none; } .toggleItems .collapseMoreButton:after { content: url(../images/icons/carrot-down-blue.svg); display: inline-block; padding: 0 0 0 8px; transition: var(--transition); } .toggleItems .collapseMoreButton.open:after { transform: rotateX(-180deg); } .toggleItems .collapsedMoreContent { padding: 24px 0 0 0; } .toggleItems .col8 .col8 { padding: 15px 0; } .toggleItems .prodTitle { font-size: .95rem; font-weight: 600; line-height: 1.3; } .toggleItems .prodPrice { font-size: 1rem; font-weight: 700; color: var(--color3); padding: 15px 0 0 0; } .toggleItems .qualityTitle { font-size: .8rem; margin: 5px 0 0 0; } .toggleItems .outOfStockNotice { padding-right: 20px; } .toggleItems img { padding: 15px 10px 0 10px; } .continueButton.alignRight { margin-left: auto; } .confirmMsg { margin-bottom: 30px; } .checkmarkIcon { display: flex; align-items: center; margin: 18px 0; } .checkmarkIcon span { font-size: 1.48rem; font-weight: 500; line-height: 1.2; padding: 5px 10px; } .checkmarkIcon:before { display: inline-block; content:""; width: 32px; height: 32px; background-image: url(../images/icons/checkmark-circle.svg); background-repeat: no-repeat; background-size: 32px; background-position: top left; padding: 0; } .orderDetails.col9 { width: 68.5%; margin-right: 0; } .orderDetails.col9 tr > td { width: 48%; padding-top: 28px; } .orderDetails .col4.semiBold { font-size: 1.12rem; } .emailForm.browserView .orderDetails .col4.semiBold { width: 100%; margin-bottom: 10px; } .orderDetails .col8 p { margin-bottom: 10px; } .formWrap.fullWidth .orderSummary .wrapper { margin-bottom: 0; } .orderSummary .button.printReceipt { display: block !important; font-size: .9rem; font-weight: 600; color: var(--color3); background-color: var(--lightGray); padding: 8px 10px; } .orderSummary .button.printReceipt:hover, .orderSummary .button.printReceipt:focus { color: var(--white); background-color: var(--color3); } .orderSummary .button.printReceipt:hover:after, .orderSummary .button.printReceipt:focus:after { display: none; } .viewCartWrap.confirm .cartDetails { padding: 0 7%; } .viewCartWrap.confirm .viewCartTable h2 { font-size: 3rem; font-weight: 700; } /* Your Items */ .loadMore { color:var(--color1)!important; text-decoration:none; margin-left:5px!important; padding-bottom:20px; display: inline-block; } .loadMore:after { content: ''; background: url(../images/icons/load-more.svg) no-repeat 0 100%; width: 15px; height: 15px; display: inline-block; margin-left: 5px; } @media all and (max-width: 1350px) and (min-width: 961px) { .orderSummary .toggleBox { padding: 10px 15px; } .toggleItems h2 { margin-right: 10px; } .toggleItems .col8 .col8 { padding: 15px 0 0 0; width: 100%; } .toggleItems .prodPrice { padding: 8px 0 15px 0; } .orderSummary .toggleItems a.txtBtn { margin-right: 10px; } .toggleItems .collapseMoreButton { width: 100%; text-align: left; } .toggleItems .collapsedMoreContent { margin: 10px 0 0 0; } .emailForm.browserView .orderDetails.col9 { width: 100%; margin-right: 0; } .emailForm.browserView .orderSummary { padding: 0; } .emailForm.browserView .orderSummaryWrap, .emailForm.browserView .orderSummaryWrap.col3 { width: 100%; padding-right: 0; margin: 20px 0; } .emailForm.browserView .orderSummary .wrapper { width: 100%; max-width: 100%; margin: 0; } } @media all and (max-width: 1250px) { .checkboxLabel { width: 92%; } .orderDetails .col4.semiBold { width: 100%; margin: 0 0 10px 0; } .orderDetails .col8 { width: 100%; margin-right: 0; } } @media all and (max-width: 960px) { .checkoutForm.col9 { width: 100%; margin-right: 0; } .checkoutWrap .orderSummaryWrap, .checkoutWrap .orderSummaryWrap.col3 { width: 100%; } .checkoutForm .formWrap { padding: 40px 5%; margin: 0 0 30px 0; } .checkboxLabel { width: 92%; } .formRow .col6 .checkboxLabel { width: 86%; } .orderSummary .toggleBox { display: flex; padding: 10px 30px; margin-top: 0; } .orderSummary .toggleBox .tableRow { float: left; width: 100%; } .verifyInfo, .editInfo label, .editInfo .semiBold, .notComplete .semiBold:not(label) { font-size: 1.05rem; } .orderDetails.col9 { width: 100%; } .orderDetails.col9 tr > td { padding-top: 0; } } @media all and (max-width: 720px) { .formRow > div.col8 { width: 100%; } .formRow > div.col6, .formRow > div.col6:first-of-type { width: 100%; margin-right: 0; } .formRow .col6 .checkboxLabel { width: 90%; } .formRow > div.col4 { width: 100%; } .formRow > div.col4:not(last-of-type) { margin-right: 0; } .formRow > div.col3 { width: 100%; } .formWrap .complete { padding-left: 0; } .verifyInfo { width: auto; } .editInfo { flex-direction: column; } .editInfo .txtBtn input[type='submit'] { margin: 5px 0 15px 0; } .ccImg { max-width: 200px; max-height: none; margin-top: 0; } .ccImg.ccv { max-width: 120px; max-height: none; } } @media all and (max-width: 580px) { .checkoutWrap { padding: 0 20px; } .checkmarkIcon span { font-size: 1.32rem; } .orderDetails.col9 tr > td { display: block; width: 100%; padding-top: 0; } .checkboxLabel { width: 88%; } .orderDetails .col4.semiBold { margin-top: 10px; } .viewCartWrap.confirm .cartDetails { padding: 0; } .viewCartWrap.confirm .viewCartTable h2 { font-size: 2rem; } } @media all and (max-width: 420px) { .checkboxLabel { width: 83%; } .formRow .col6 .checkboxLabel { width: 83%; } } @media all and (max-width: 370px) { .orderSummary .toggleBox { padding: 10px 15px; } .toggleItems h2 { margin-right: 10px; } .orderSummary .toggleItems a.txtBtn { margin-right: 10px; } } /* =============================================== My Account Login * ===============================================*/ .columns.components.message { padding: 26px 20px 0 20px; } .columns.components.message + .loginPanels { padding-top: 36px; } .loginPanels p.intro { margin-bottom: 35px; } .loginPanels p, .loginPanels a { font-size: .95rem; } .mainContent .loginPanels a { color: var(--color3); font-weight: 600; } .loginPanels p.required { margin-bottom: 12px; } #ctrLogin_Login1_LoginButton { color: var(--white); max-width: 150px; width: 100%; margin: 15px 0 20px 0; } /* Account Sign In */ .accountSignInPanel, .createAccountPanel { padding: 42px 38px; } .accountSignInPanel { background-color: var(--lightGray); padding: 42px 38px 20px 38px; margin-right: 7%; } .accountSignInPanel h1, .accountSignInPanel h2, .createAccountPanel h2 { font-size: 2.25rem; font-weight: 700; color: var(--darkGray); line-height: 1.2; margin-bottom: 28px; } .accountSignInPanel h2 { margin-bottom: 3px; } .accountSignInPanel .required { color: #CC2A24; } .mainContent .accountSignInPanel > a { color: var(--color3); } .mainContent .accountSignInPanel a.button { color: var(--white); } #ctrLogin_Login1 { display: table; } .accountSignInPanel table, .accountSignInPanel table table { display: table; width: 100%; max-width: 100%; } .accountSignInPanel table tbody tr:first-child, .accountSignInPanel table table tbody tr:first-child { display: none; } .accountSignInPanel td { display: flex; padding: 0; text-align: left; } .accountSignInPanel label { font-weight: 700; line-height: 1.2; } .accountSignInPanel label:before { content:"*"; color: var(--red); } .accountSignInPanel input[type=text], .accountSignInPanel input[type=password] { width: 100%; margin-bottom: 25px; } .accountSignInPanel input[type=text] + span, .accountSignInPanel input[type=password] + span { opacity: 0; } .accountSignInPanel > a { display: block; margin-bottom: 20px; } .accountSignInPanel > a:last-of-type { margin-bottom: 0; } .guestPanel { border-top: 1px solid rgba(127, 130, 135, 0.30); padding: 40px 0 0 0; margin: 22px 0 0 0; } .guestPanel h2 { font-size: 1.7rem; } .guestPanel p { padding: 0 20px 0 0; margin-bottom: 0px; } .guestPanel .button { max-width: 150px; width: 100%; } /* Create Account */ .createAccountPanel { padding: 42px 0 42px 38px; } .createAccountPanel h2 { margin-bottom: 28px; } .createAccountPanel p.intro { padding: 0 20px 0 0; } .mainContent .createAccountPanel a.button { color: var(--white); } .createAccountPanel .chooseAccount { margin: 0 0 12px 0; } .createAccountPanel .chooseAccount a { display: flex; align-items: center; width: 100%; color: var(--darkGray); background-color: var(--white); border-radius: 10px; border: 1px solid rgba(62, 62, 62, 0.40); box-shadow: 0px 0px 0px 1px var(--white); text-decoration: none; padding: 14px 18px; margin: 0 0 27px 0; transition: var(--transition); } .createAccountPanel .chooseAccount a:hover, .chooseAccount .createAccountPanel a:focus { background-color: var(--lightGray); border: 1px solid var(--color3); box-shadow: 0px 0px 0px 1px var(--color3); } .createAccountPanel .chooseAccount a span { display: inline-block; } .createAccountPanel .icon { height: 60px; width: 100%; max-width: 60px;; background-color: rgba(217, 217, 217, 0.50); border: 1px solid var(--lightGray); border-radius: 360px; background-repeat: no-repeat; background-position: center center; background-size: 35px; margin: 0 24px 0 0; transform: translate(0, 0); transition: var(--transition); } .createAccountPanel .chooseAccount a:hover .icon, .createAccountPanel .chooseAccount a:focus .icon { transform: translate(0, -5px); } .createAccountPanel .icon.business { background-image: url(../images/icons/cart-outline.svg); background-size: 37px; } .createAccountPanel .icon.existing { background-image: url(../images/icons/balloon-blue-outline.svg); } .createAccountPanel .icon.consumer { background-image: url(../images/icons/bag-check-outline.svg); } .createAccountPanel .linkText { max-width: 370px; width: 100%; line-height: 1.4; padding: 0 20px 0 0; } .createAccountPanel .chooseAccount a .linkText strong { transition: var(--transition); } .createAccountPanel .chooseAccount a:hover .linkText strong, .createAccountPanel .chooseAccount a:focus .linkText strong { color: var(--color3); } .createAccountPanel .arrow, .createAccountPanel .chooseAccount a span.arrow { position: relative; display: flex; align-items: center; font-weight: 700; margin: auto 10px auto auto; transition: var(--transition); } .createAccountPanel .chooseAccount a .arrow strong { visibility: hidden; opacity: 0; white-space: nowrap; transition: var(--transition); } .createAccountPanel .chooseAccount a:hover .arrow strong, .createAccountPanel .chooseAccount a:focus .arrow strong { visibility: visible; opacity: 1; } .createAccountPanel .chooseAccount a:hover .arrow, .createAccountPanel .chooseAccount a:focus .arrow { font-weight: 700; margin: auto 0 auto auto; } .createAccountPanel .arrow:after { display: inline-block; content: ""; width: 20px; height: 20px; font-weight: 700; background-image: url(../images/icons/carrot-right-blue-on-gray.svg); background-repeat: no-repeat; background-position: center center; background-size: 12px; padding: 0 0 0 30px; margin: auto 0 auto auto; transition: var(--transition); } .createAccountPanel .chooseAccount a:hover .arrow:after, .createAccountPanel .chooseAccount a:hover .arrow:focus { padding: 0 0 0 20px; margin: auto 5px auto auto; } .createAccountPanel .button { max-width: 300px; width: 100%; margin-bottom: 10px; } @media all and (max-width: 1380px) { .columns.loginPanels .two { gap: 0rem; } /* Account Sign In */ .accountSignInPanel { margin-right: 0; } /* Create Account */ .createAccountPanel .arrow, .createAccountPanel .chooseAccount a span.arrow { margin: auto 0 auto auto; } .createAccountPanel .chooseAccount a .arrow:after { padding: 0 0 0 20px; margin: auto 5px auto auto; } } @media all and (max-width: 960px) { .columns.loginPanels .two { grid-template-columns: minmax(0, 1fr); grid-column: auto; grid-row: auto; gap: 1rem; } /* Account Sign In */ .accountSignInPanel { padding: 22px 30px 20px 30px; } /* Create Account */ .createAccountPanel { padding: 42px 30px 20px 30px; } .createAccountPanel .chooseAccount a .arrow strong { display: none; } } @media all and (max-width: 720px) { .columns.loginPanels .content { padding-left: 0; padding-right: 0; } } @media all and (max-width: 580px) { /* Account Sign In */ .accountSignInPanel { padding: 32px 20px 20px 20px; } .accountSignInPanel h1, .createAccountPanel h2 { font-size: 1.5rem; } .accountSignInPanel h2 { font-size: 1.25rem; } /* Create Account */ .createAccountPanel { padding: 32px 20px 20px 20px; } .createAccountPanel .chooseAccount a { padding: 12px 10px; } .createAccountPanel .icon { height: 40px; max-width: 40px; margin-right: 10px; } .createAccountPanel .chooseAccount a { font-size: .85rem; } .createAccountPanel .icon.business, .createAccountPanel .icon.existing, .createAccountPanel .icon.consumer { background-size: 23px; } .createAccountPanel .linkText { padding: 0 5px 0 0; } .createAccountPanel .chooseAccount a .arrow:after { padding: 0; margin: auto; } } /* =============================================== My Orders * ===============================================*/ .orders.productControls.top { overflow: hidden; } .orders.productControls.top input[type=text] { margin-bottom: 0; } .aspNetDisabled, a.aspNetDisabled, a.aspNetDisabled:hover, a.aspNetDisabled:focus { color: var(--darkGray); text-decoration: none; } /* =============================================== Registration * ===============================================*/ .impactLanding.register { margin-bottom: 12px; } .impactLanding.register .impactSummary { font-size: 1.5rem; font-weight: 700; margin: 0 0 18px 0; } .impactLanding.register .wrapper .wrapper { display: flex; width: 71%; margin: 0; } .impactLanding.register .buttons { align-content: flex-end; margin: 0 0 0 auto; } .impactLanding.register .button { margin-bottom: 18px; } .impactLanding.register .button:first-child { margin-right: 35px; } .impactLanding.register .button:last-child { min-width: 152px; margin-right: 0; } .impactLanding.register h1 { font-size: 2.25rem; font-weight: 700; margin-bottom: 18px; } .impactLanding.register .caption { max-width: 1526px; } .registerWrap { display: flex; flex-direction: column; width: 100%; max-width: 1526px; padding: 0 3%; margin: 0 auto 20px auto; } .registerWrap .orderSummaryWrap, .registerWrap .orderSummaryWrap.col3 { width: 27%; } .registerForm.col9 { width: 71%; margin-right: 2%; } .registerForm label { font-weight: 400; } .registerForm .checkboxLabel label { font-weight: 600; } .registerForm label.semiBold { font-weight: 600; } .registerForm .notActive h2 { color: rgba(62, 62, 62, 0.60); } .registerForm input[type="text"], .registerForm input[type="email"], .registerForm input[type="password"], .registerForm input[type="url"], .registerForm select { width: 100%; } .registerForm .txtBtn input { padding: 0; } .registerForm .formWrap { padding: 40px 3.5%; margin: 0 0 50px 0; } .registerPanel .chooseAccount { margin: 38px 0; } .registerPanel .chooseAccount .formOptionWrap { display: flex; flex-flow: wrap; align-items: center; justify-content: center; width: 100%; color: var(--darkGray); background-color: var(--white); border-radius: 10px; border: 1px solid rgba(62, 62, 62, 0.40); box-shadow: 0px 0px 0px 2px var(--white); text-decoration: none; padding: 0; margin: 0 auto 27px auto; transform: translate(0, 0); transition: var(--transition); } .registerPanel .chooseAccount .formOptionWrap:hover, .chooseAccount .registerPanel .formOptionWrap:focus, .registerPanel .formOptionWrap.selected { background-color: rgba(241, 241, 241, 0.60); border: 1px solid var(--color3); box-shadow: 0px 0px 0px 2px var(--color3); transform: translate(0, -5px); } .registerPanel .formOptionWrap.selected { border: 1px solid var(--color1); background-color: rgba(241, 241, 241, 0.60); } .registerPanel .chooseAccount .formOptionWrap span { display: block; margin-left: auto; margin-right: auto; } .registerPanel .checkboxLabel { width: 100%; text-align: center; cursor: pointer; padding: 24px 18px; } .registerPanel .chooseAccount input[type="radio"] { position: absolute; left: -999999px; } .registerPanel .icon { height: 60px; width: 100%; max-width: 60px;; background-color: rgba(217, 217, 217, 0.50); border: 1px solid var(--lightGray); border-radius: 360px; background-repeat: no-repeat; background-position: center center; background-size: 35px; margin: 0 auto 10px auto; } .registerPanel .icon.business { background-image: url(../images/icons/cart-outline.svg); background-size: 37px; } .registerPanel .icon.existing { background-image: url(../images/icons/balloon-blue-outline.svg); } .registerPanel .icon.consumer { background-image: url(../images/icons/bag-check-outline.svg); } .registerPanel .linkText { max-width: 370px; width: 100%; font-size: .8rem; font-weight: 400; line-height: 1.4; padding: 0 14px; } .registerPanel .linkText strong { display: block; font-size: 1.12rem; line-height: 1.2; margin: 0 auto 10px auto; } .registerPanel .chooseAccount .formOptionWrap:hover .linkText strong, .registerPanel .chooseAccount .formOptionWrap:focus .linkText strong, .registerPanel .formOptionWrap.selected .linkText strong { color: var(--color3); } @media all and (min-width: 721px) and (max-width: 960px) { .chooseAccount .columns .three .cell > * + * { padding-left: 0; } .chooseAccount .columns .three .cell > *, .columns .four .cell > * { max-width: 100%; } .chooseAccount .columns .three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .registerPanel .checkboxLabel { padding: 24px 8px; } .registerPanel .linkText { padding: 0px 3px; } } @media all and (max-width: 1640px) { .impactLanding.register .wrapper .wrapper { width: 100%; } .registerForm.col9 { width: 100%; margin-right: 0; } .registerWrap .orderSummaryWrap, .registerWrap .orderSummaryWrap.col3 { width: 100%; } .registerForm .formWrap { padding: 40px 5%; margin: 0 0 30px 0; } } @media all and (max-width: 960px) { .impactLanding.register .wrapper .wrapper { width: 100%; flex-direction: column; } .impactLanding.register h1 { margin-bottom: 0; } .impactLanding.register .buttons { margin: 20px 0 0 0; } .impactLanding.register .button:last-child { min-width: 0; } } @media all and (max-width: 720px) { .registerPanel .chooseAccount .formOptionWrap { margin: 0 auto; } } @media all and (max-width: 580px) { .impactLanding.register .impactSummary { font-size: 1.15rem; } .impactLanding.register h1 { font-size: 1.9rem; } .registerWrap { padding: 0 20px; } } /* Contact Form */ .hidden { display:none; } select { background-image: url(../images/icons/carrot-down-blue-thick.svg); background-repeat: no-repeat; background-size: 9px; background-position: right 9px center; padding: 8px 28px 8px 8px; -moz-appearance: none; -webkit-appearance: none; -webkit-border-radius: 0px; appearance: none; min-width: 65px; width: auto; font-size: 1rem; color: var(--darkGray); margin-bottom: 15px; box-sizing: border-box; -ms-flex-align: center; align-items: center; white-space: pre; background-color: var(--white); border: 1px solid rgba(62, 62, 62, 0.30); cursor: pointer; position: relative; } input[type=textbox] { box-sizing: border-box; } /* Chrome Only */ @media all and (-webkit-min-device-pixel-ratio:0) { select, input[type=textbox] { min-height: 47px; } } select::-ms-expand { display: none; } /* removes default IE dropdown arrow */ /* =============================================== Catalog Landing Page ===============================================*/ .catalogItems + .components { padding-top: 0; } .catalogItems .productList.grid { column-gap: 2.333%; } .productList .group.catalog { box-shadow: none; } .catalog-block img { margin-bottom: 0; } .catalog-block { display:block!important; font-family: var(--bodyFont); font-size: 1.185em; margin-bottom: 10px; } .catalog .button.auto { margin-bottom: 15px; } .mainContent a.catalog-block { color: var(--black); } .mainContent a.catalog-block:hover, .mainContent a.catalog-block:focus { color:var(--color1); text-decoration: none; } .mainContent .catalog a.button { color: var(--white); } .mascots { padding: 3px 9px; font-family: var(--bodyFont); font-size: 1.185em; color:var(--color1); } /* Catalog Request */ #mainBody_ctrMailForm_cbEverydayCatalog {vertical-align: top;} #mainBody_ctrCatalogRequest_cbEverydayCatalog, #mainBody_ctrCatalogRequest_cbSeasonalCatalog {vertical-align: top;} label[for=cbEverydayCatalog], label[for=cbSeasonalCatalog] { width: 0; padding-right: 0; } label[for=mainBody_ctrCatalogRequest_cbEverydayCatalog] , label[for=mainBody_ctrCatalogRequest_cbSeasonalCatalog] { max-width: 65px; width: 100%; display: inline-block; margin-right: 36px; } /* =============================================== Collections Listing Page ===============================================*/ .productListing .impactContent.collectionImpact { display: block; margin: 0 0 30px 0; } /* =============================================== Print ===============================================*/ @media print { body { font-size: 70%; } .header { position: relative; height: 45px; } .utility, #toggleButton, #toggleSearch, .headerLogoArea .accountOptions, #mainMenu, .sectionNavColumn, .LPMcontainer.LPMoverlay, #topLink, a#topLink, .footerTop, .footerContent { display: none; } .footerCTA ~ .footer > .wrapper { padding-top: 58px; } img.itemThumb.printHide { display: none; } } /* =============================================== Slick Slider * ===============================================*/ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: flex; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: auto; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide[aria-hidden="true"] a { visibility: hidden; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: flex; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slider */ .slick-loading .slick-list{ background: var(--white) url(./ajax-loader.gif) center center no-repeat;} /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 55px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; border: none; z-index: 2; transition: var(--transition); } .slick-prev { left: -4%; background: url(../images/icons/slider-arrow-gray-large.png); background-repeat: no-repeat; background-position: 0 0; } .slick-next { right: -4%; background: url(../images/icons/slider-arrow-gray-large.png); background-repeat: no-repeat; background-position: -22px 0; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } ul.slick-dots { position: absolute; display: block; width: 100%; bottom: -40px; padding: 0; margin: 0; list-style: none; text-align: center; text-indent: 0; } ul.slick-dots > li, .mainBody ul.slick-dots > li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 2px; padding: 0; cursor: pointer; clear: none; } ul.slick-dots li:before { content: ''; } ul.slick-dots > li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; background: transparent; } ul.slick-dots li button:hover, ul.slick-dots li button:focus { } ul.slick-dots li button:hover:before, ul.slick-dots li button:focus:before { opacity: 1; } ul.slick-dots > li button:before { font-family: var(--bodyFont); font-size: 45px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '\2022'; text-align: center; color: #ccc; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } ul.slick-dots li.slick-active button:before { color: var(--color1); } @media all and (max-width: 1300px) { /* Arrows */ .slick-prev { left: 0; } .slick-next { right: 0; } } @media all and (max-width: 580px) { ul.slick-dots > li button:before { font-size: 35px; } } /* =============================================== Magnific Popup * ===============================================*/ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.65; filter: alpha(opacity=65); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: var(--white); } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow, .closeButton { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; transition: var(--transition); } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close, .closeButton { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 1; filter: alpha(opacity=100); padding: 0 0 18px 10px; color: var(--darkGray); font-style: normal; font-size: 1rem; } .mfp-close:hover, .mfp-close:focus, .closeButton:hover, .closeButton:focus{ color: var(--darkGray); opacity: 0.70; filter: alpha(opacity=70); } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: var(--darkGray); } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: var(--white); right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow .mfp-a { top: 8px; } .mfp-arrow .mfp-b { opacity: 0.7; } .mfp-arrow-left { background: url(../images/icons/slider-arrow.png) top left !important; background-repeat: no-repeat; width: 20px; height: 55px; background-position: 0 0; left: 40px; padding-left: 40px;} .mfp-arrow-right { background: url(../images/icons/slider-arrow.png) top right !important; background-repeat: no-repeat; width: 20px; height: 55px;background-position: -20px 0; right: 40px; padding-right: 40px; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media all and (max-width:800px) and (orientation:landscape), all and (max-height:300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width:900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } @media all and (max-width:580px) { .mfp-arrow-left { background: url(../images/icons/slider-arrow-gray-left.svg); width: 55px; height: 55px; } .mfp-arrow-right { background: url(../images/icons/slider-arrow-gray-right.svg); width: 55px; height: 55px; } }