:root { --thematic-blue: #266bbe; --thematic-blue-hover: #1b508f; --thematic-yellow: #ca2f10; --thematic-spinner: #ed0c8c; --thematic-border-color: #e2e2e2; --white: #ffffff; } /********* CSS RESETS/DEFAULTS ***********/ * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} html { font-family: Arial, sans-serif; font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-size-adjust: 100%; } body { font-family: "Roboto", Helvetica, Arial, sans-serif;font-size: 14px;font-weight: 400;line-height: 1.3;color: #333;background-color: rgba(248, 248, 248, 1);margin: 0;overflow-x: hidden; background-color: #FFF; } *, *:focus, *:hover { outline:none; } [hidden], template {display: none;} a {background-color: transparent;color: #337ab7;text-decoration: none;} a:focus { outline: thin dotted; outline-offset: -3px; } a:focus, a:hover {color: var(--thematic-yellow);text-decoration: none;} body a:hover { cursor: pointer; } a, button {-ms-touch-action: manipulation;touch-action: manipulation;} abbr[title] {border-bottom: 1px dotted;} abbr[data-original-title], abbr[title] {cursor: help;border-bottom: 1px dotted #777;} address {margin-bottom: 20px;font-style: normal;line-height: 1.42857143;} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;} audio, canvas, progress, video {display: inline-block;vertical-align: baseline;} audio:not([controls]) {display: none;height: 0;} b, strong {font-weight: 700;} blockquote .small, blockquote footer, blockquote small {display: block;font-size: 80%;line-height: 1.42857143;color: #777;} blockquote .small:before, blockquote footer:before, blockquote small:before {content: "\2014 \00A0";} blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {margin-bottom: 0;} blockquote {padding: 10px 20px;margin: 0 0 20px;font-size: 17.5px;border-left: 5px solid #eee;} body blockquote {font-size: 17px;font-weight: 400;padding-left: 20px;margin-top: 20px;margin-bottom: 20px;border-width: 0;border-left-width: 5px;border-style: solid;border-color: var(--thematic-yellow);float: none;display: flex;flex-direction: column;max-width: 500px;} body blockquote::before {margin-left: initial;margin-right: auto;float: none;content: "\e9af" !important;font-family: icomoon !important;font-size: 45px;color: var(--thematic-blue-hover);margin-right: 10px;margin-bottom: 10px;} button {overflow: visible;border: none; margin: 0;padding: 0;} button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button;cursor: pointer;} button, input, optgroup, select, textarea {margin: 0;font: inherit;color: inherit;} button, input, select, textarea {font-family: inherit;font-size: inherit;line-height: inherit;} button, select {text-transform: none;} select { background-color: #ffffff; height: 30px; border: 1px solid #a9a9a9; font-size: 1em; } select:disabled { color: -internal-light-dark(graytext, rgb(170, 170, 170)); opacity: 0.7; border-color: rgba(118, 118, 118, 0.3); } input:focus, select:focus, textarea:focus { outline: 1px solid #167ac6; } button::-moz-focus-inner, input::-moz-focus-inner {padding: 0;border: 0;} button[disabled], html input[disabled], html input[readonly] { cursor: default; color: #CCC; } caption {padding-top: 8px;padding-bottom: 8px;color: #777;text-align: left;} code {padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;} code, kbd, pre, samp {font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 1em;} dd {margin-left: 0;} dd, dt {line-height: 1.42857143;} dl {margin-top: 0;margin-bottom: 20px;} dt {font-weight: 700;} dfn {font-style: italic;} fieldset {min-width: 0;padding: 0;margin: 0;border: 0;} fieldset[disabled] input[type="checkbox"], fieldset[disabled] input[type="radio"], input[type="checkbox"].disabled, input[type="checkbox"][disabled], input[type="radio"].disabled, input[type="radio"][disabled] {cursor: not-allowed;} figure {margin: 0;} h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600;margin: 0; line-height: 1.1;color: inherit;} h1, h2, h3, .h1, .h2, .h3 {margin-top: 0;margin-bottom: 15px;} h4, h5, h6, .h4, .h5, .h6 {margin-top: 0;margin-bottom: 10px;} h1, .h1 {font-size: 30px; } h2, .h2 {font-size: 26px;} h3, .h3 {font-size: 22px;} h4, .h4 {font-size: 18px;} h5, .h5 {font-size: 14px; color: #8B9198;font-weight: 400; } h6, .h6 {font-size: 12px; color: #8B9198;font-weight: 400; } h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, .h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small {font-size: 65%;font-weight: 400;line-height: 1;color: #777;} h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small {font-size: 75%;font-weight: 400;line-height: 1;color: #777;} header { position: relative; background: rgba(255, 255, 255, 1); z-index: 1; } header::before { background: rgba(255, 255, 255, 1); width: 100%;height: 35px;position: absolute;top: 0;content: "";z-index: 0; } header ul { list-style: none;padding: 0;margin: 0; } hr {height: 0;margin-top: 20px;margin-bottom: 20px;border: 0;border-top: 1px solid var(--thematic-border-color);-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;overflow: hidden;} img {border: 0;vertical-align: middle;max-width: 100%;height: auto;-ms-flex-item-align: start;align-self: flex-start;} input {line-height: normal;border: 1px solid #a9a9a9; } input[type="checkbox"], input[type="radio"] {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 0; margin: 0; line-height: normal;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;} input[type="search"] {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} input[type="file"] {display: block;} input[type="file"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus { outline: thin dotted; outline-offset: -2px; } input[type="range"] {display: block;width: 100%;} input[type="text"] { font-size: 14px; height: 30px; } kbd kbd {padding: 0;font-size: 100%;font-weight: 700;-webkit-box-shadow: none;box-shadow: none;} kbd {padding: 2px 4px;font-size: 90%;color: #fff;background-color: #333;border-radius: 3px;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);} label {display: inline-block;max-width: 100%;font-weight: 700;position: relative;} legend {display: block;width: 100%;padding: 0;margin: 10px 0;font-size: 21px;line-height: inherit;color: #333;border: 0;border-bottom: 1px solid #e5e5e5;} mark {color: #000; padding: 0.2em;background-color: #fcf8e3;} ol ol, ol ul, ul ol, ul ul {margin-bottom: 0;} ol, ul {margin-top: 0;margin-bottom: 10px;} optgroup {font-weight: 700;} output {display: block;padding-top: 7px;font-size: 14px;line-height: 1.42857143;color: #555;} p:not(:last-child) {margin: 0 0 15px 0;} p:last-child {margin: 0;} p:empty, .validationSummary:empty { display: none; visibility: hidden; } a:empty { visibility: hidden; } pre {overflow: auto;display: block;padding: 9.5px;margin: 0 0 10px;font-size: 13px;line-height: 1.42857143;color: #333;word-break: break-all;word-wrap: break-word;background-color: #f5f5f5;border: 1px solid #ccc;border-radius: 4px;} pre code {padding: 0;font-size: inherit;color: inherit;white-space: pre-wrap;background-color: transparent;border-radius: 0;} s { text-decoration: none;font-size: 70%;font-style: normal;font-weight: 400;white-space: normal;line-height: 1;max-width: 125px;-webkit-transition: all 0.075s ease-out;transition: all 0.075s ease-out;} select.input-lg {height: 46px;line-height: 46px;} select.input-sm {height: 30px;line-height: 30px;} select[multiple], select[size] {height: auto;} small {font-size: 80%;} sub {bottom: -0.25em;} sub, sup {position: relative;font-size: 75%;line-height: 0;vertical-align: baseline;} sup {top: -0.5em;} svg:not(:root) {overflow: hidden;} .table, table { border-spacing: 0; border-collapse: collapse; background-color: transparent; border: 1px solid #e2e2e2; } table col[class*="col-"] { position: static;display: table-column;float: none; } table th {text-align: left;padding: 0;} table td { color: #333333; background: rgba(255, 255, 255, 1); padding: 0; } table td a { vertical-align: middle; } table td[class*="col-"], table th[class*="col-"] { position: static;display: table-cell;float: none; } table tbody tr:nth-child(even) td { background: rgba(250, 250, 250, 1); } table tbody tr:last-child td, table tbody tr:last-child th, .table-bordered tbody tr:last-child td, .table-bordered tbody tr:last-child th { border-bottom-width: 0; } .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { padding: 8px 14px; border-top-color: transparent; vertical-align: middle; } .table-bordered { border: 1px solid #ddd; } .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th { border: 1px solid #ddd; } .table-bordered::-webkit-scrollbar { -webkit-appearance: none; height: 1px; width: 1px; } .table-bordered::-webkit-scrollbar-thumb {background-color: var(--thematic-yellow);border-radius: 5px;} textarea { overflow: auto; border: 1px solid #a9a9a9; } textarea.form-control {height: auto;} :after, :before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} iframe {max-width: 100%;border: none;} hr {margin-top: 10px;margin-bottom: 10px;position: relative;overflow: visible;} hr::before {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);line-height: 0;width: 1em;height: 1em;display: flex;align-items: center;justify-content: center;} br {height: 1px;display: block;} br + br { margin: 5px; } blockquote {border: none;padding: 0;margin: 0;border: none;font-size: inherit;} blockquote::before {float: left;line-height: 1;font-size: 2.5em;font-style: normal;} blockquote::after {content: "";display: table;width: 100%;clear: both;} /************ ICONOGRAPHY ***********/ @font-face { font-family: "FontAwesome"; src: url("/Content/Fonts/FontAwesome/fontawesome-webfont.eot?v=4.7.0"); src: url("/Content/Fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("/Content/Fonts/FontAwesome/fontawesome-webfont.2.woff?v=4.7.0"), url("/Content/Fonts/FontAwesome/fontawesome-webfont.woff?v=4.7.0") format("font/woff"), url("/Content/Fonts/FontAwesome/fontawesome-webfont.ttf?v=4.7.0"), url("/Content/Fonts/FontAwesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "icomoon";src: url("/Content/Fonts/Icomoon/icomoon.ttf"), url("/Content/Fonts/Icomoon/icomoon.woff"), url("/Content/Fonts/Icomoon/icomoon.svg#icomoon") format("svg");font-weight: normal;font-style: normal;font-display: block;} .icon {font-family: "icomoon" !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1; } .fa {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;} .fa-lg {font-size: 1.33333333em;line-height: 0.75em;vertical-align: -15%;} .fa-2x {font-size: 2em;} .fa-3x {font-size: 3em;} .fa-4x {font-size: 4em;} .fa-5x {font-size: 5em;} .fa-fw {width: 1.28571429em;text-align: center;} .fa-ul {padding-left: 0;margin-left: 2.14285714em;list-style-type: none;} .fa-ul > li {position: relative;} .fa-li {position: absolute;left: -2.14285714em;width: 2.14285714em;top: 0.14285714em;text-align: center;} .fa-li.fa-lg {left: -1.85714286em;} .fa-border {padding: 0.2em 0.25em 0.15em;border: solid 0.08em #eee;border-radius: 0.1em;} .fa-pull-left {float: left;} .fa-pull-right {float: right;} .fa.fa-pull-left {margin-right: 0.3em;} .fa.fa-pull-right {margin-left: 0.3em;} .pull-right {float: right;} .pull-left {float: left;} .fa.pull-left {margin-right: 0.3em;} .fa.pull-right {margin-left: 0.3em;} .fa-spin {-webkit-animation: fa-spin 2s infinite linear;animation: fa-spin 2s infinite linear;} .fa-pulse {-webkit-animation: fa-spin 1s infinite steps(8);animation: fa-spin 1s infinite steps(8);} /*@-webkit-keyframes fa-spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);} } @keyframes fa-spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);} } .fa-rotate-90 {-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);} .fa-rotate-180 {-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);} .fa-rotate-270 {-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg);} .fa-flip-horizontal {-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0,mirror=1)";-webkit-transform: scale(-1, 1);-ms-transform: scale(-1, 1);transform: scale(-1, 1);} .fa-flip-vertical {-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform: scale(1, -1);-ms-transform: scale(1, -1);transform: scale(1, -1);} :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical {filter: none;}*/ .fa-stack {position: relative;display: inline-block;width: 2em;height: 2em;line-height: 2em;vertical-align: middle;} .fa-stack-1x, .fa-stack-2x {position: absolute;left: 0;width: 100%;text-align: center;} .fa-stack-1x {line-height: inherit;} .fa-stack-2x {font-size: 2em;} .fa-inverse {color: #fff;} .fa-glass:before {content: "\f000";} .fa-music:before {content: "\f001";} .fa-search:before {content: "\f002";} .fa-envelope-o:before {content: "\f003";} .fa-heart:before {content: "\f004";} .fa-star:before {content: "\f005";} .fa-star-o:before {content: "\f006";} .fa-user:before {content: "\f007";} .fa-film:before {content: "\f008";} .fa-th-large:before {content: "\f009";} .fa-th:before {content: "\f00a";} .fa-th-list:before {content: "\f00b";} .fa-check:before {content: "\f00c";} .fa-remove:before, .fa-close:before, .fa-times:before {content: "\f00d";} .fa-search-plus:before {content: "\f00e";} .fa-search-minus:before {content: "\f010";} .fa-power-off:before {content: "\f011";} .fa-signal:before {content: "\f012";} .fa-gear:before, .fa-cog:before {content: "\f013";} .fa-trash-o:before {content: "\f014";} .fa-home:before {content: "\f015";} .fa-file-o:before {content: "\f016";} .fa-clock-o:before {content: "\f017";} .fa-road:before {content: "\f018";} .fa-download:before {content: "\f019";} .fa-arrow-circle-o-down:before {content: "\f01a";} .fa-arrow-circle-o-up:before {content: "\f01b";} .fa-inbox:before {content: "\f01c";} .fa-play-circle-o:before {content: "\f01d";} .fa-rotate-right:before, .fa-repeat:before {content: "\f01e";} .fa-refresh:before {content: "\f021";} .fa-list-alt:before {content: "\f022";} .fa-lock:before {content: "\f023";} .fa-flag:before {content: "\f024";} .fa-headphones:before {content: "\f025";} .fa-volume-off:before {content: "\f026";} .fa-volume-down:before {content: "\f027";} .fa-volume-up:before {content: "\f028";} .fa-qrcode:before {content: "\f029";} .fa-barcode:before {content: "\f02a";} .fa-tag:before {content: "\f02b";} .fa-tags:before {content: "\f02c";} .fa-book:before {content: "\f02d";} .fa-bookmark:before {content: "\f02e";} .fa-print:before {content: "\f02f";} .fa-camera:before {content: "\f030";} .fa-font:before {content: "\f031";} .fa-bold:before {content: "\f032";} .fa-italic:before {content: "\f033";} .fa-text-height:before {content: "\f034";} .fa-text-width:before {content: "\f035";} .fa-align-left:before {content: "\f036";} .fa-align-center:before {content: "\f037";} .fa-align-right:before {content: "\f038";} .fa-align-justify:before {content: "\f039";} .fa-list:before {content: "\f03a";} .fa-dedent:before, .fa-outdent:before {content: "\f03b";} .fa-indent:before {content: "\f03c";} .fa-video-camera:before {content: "\f03d";} .fa-photo:before, .fa-image:before, .fa-picture-o:before {content: "\f03e";} .fa-pencil:before {content: "\f040";} .fa-map-marker:before {content: "\f041";} .fa-adjust:before {content: "\f042";} .fa-tint:before {content: "\f043";} .fa-edit:before, .fa-pencil-square-o:before {content: "\f044";} .fa-share-square-o:before {content: "\f045";} .fa-check-square-o:before {content: "\f046";} .fa-arrows:before {content: "\f047";} .fa-step-backward:before {content: "\f048";} .fa-fast-backward:before {content: "\f049";} .fa-backward:before {content: "\f04a";} .fa-play:before {content: "\f04b";} .fa-pause:before {content: "\f04c";} .fa-stop:before {content: "\f04d";} .fa-forward:before {content: "\f04e";} .fa-fast-forward:before {content: "\f050";} .fa-step-forward:before {content: "\f051";} .fa-eject:before {content: "\f052";} .fa-chevron-left:before {content: "\f053";} .fa-chevron-right:before {content: "\f054";} .fa-plus-circle:before {content: "\f055";} .fa-minus-circle:before {content: "\f056";} .fa-times-circle:before {content: "\f057";} .fa-check-circle:before {content: "\f058";} .fa-question-circle:before {content: "\f059";} .fa-info-circle:before {content: "\f05a";} .fa-crosshairs:before {content: "\f05b";} .fa-times-circle-o:before {content: "\f05c";} .fa-check-circle-o:before {content: "\f05d";} .fa-ban:before {content: "\f05e";} .fa-arrow-left:before {content: "\f060";} .fa-arrow-right:before {content: "\f061";} .fa-arrow-up:before {content: "\f062";} .fa-arrow-down:before {content: "\f063";} .fa-mail-forward:before, .fa-share:before {content: "\f064";} .fa-expand:before {content: "\f065";} .fa-compress:before {content: "\f066";} .fa-plus:before {content: "\f067";} .fa-minus:before {content: "\f068";} .fa-asterisk:before {content: "\f069";} .fa-exclamation-circle:before {content: "\f06a";} .fa-gift:before {content: "\f06b";} .fa-leaf:before {content: "\f06c";} .fa-fire:before {content: "\f06d";} .fa-eye:before {content: "\f06e";} .fa-eye-slash:before {content: "\f070";} .fa-warning:before, .fa-exclamation-triangle:before {content: "\f071";} .fa-plane:before {content: "\f072";} .fa-calendar:before {content: "\f073";} .fa-random:before {content: "\f074";} .fa-comment:before {content: "\f075";} .fa-magnet:before {content: "\f076";} .fa-chevron-up:before {content: "\f077";} .fa-chevron-down:before {content: "\f078";} .fa-retweet:before {content: "\f079";} .fa-shopping-cart:before {content: "\f07a";} .fa-folder:before {content: "\f07b";} .fa-folder-open:before {content: "\f07c";} .fa-arrows-v:before {content: "\f07d";} .fa-arrows-h:before {content: "\f07e";} .fa-bar-chart-o:before, .fa-bar-chart:before {content: "\f080";} .fa-twitter-square:before {content: "\f081";} .fa-facebook-square:before {content: "\f082";} .fa-camera-retro:before {content: "\f083";} .fa-key:before {content: "\f084";} .fa-gears:before, .fa-cogs:before {content: "\f085";} .fa-comments:before {content: "\f086";} .fa-thumbs-o-up:before {content: "\f087";} .fa-thumbs-o-down:before {content: "\f088";} .fa-star-half:before {content: "\f089";} .fa-heart-o:before {content: "\f08a";} .fa-sign-out:before {content: "\f08b";} .fa-linkedin-square:before {content: "\f08c";} .fa-thumb-tack:before {content: "\f08d";} .fa-external-link:before {content: "\f08e";} .fa-sign-in:before {content: "\f090";} .fa-trophy:before {content: "\f091";} .fa-github-square:before {content: "\f092";} .fa-upload:before {content: "\f093";} .fa-lemon-o:before {content: "\f094";} .fa-phone:before {content: "\f095";} .fa-square-o:before {content: "\f096";} .fa-bookmark-o:before {content: "\f097";} .fa-phone-square:before {content: "\f098";} .fa-twitter:before {content: "\f099";} .fa-facebook-f:before, .fa-facebook:before {content: "\f09a";} .fa-github:before {content: "\f09b";} .fa-unlock:before {content: "\f09c";} .fa-credit-card:before {content: "\f09d";} .fa-feed:before, .fa-rss:before {content: "\f09e";} .fa-hdd-o:before {content: "\f0a0";} .fa-bullhorn:before {content: "\f0a1";} .fa-bell:before {content: "\f0f3";} .fa-certificate:before {content: "\f0a3";} .fa-hand-o-right:before {content: "\f0a4";} .fa-hand-o-left:before {content: "\f0a5";} .fa-hand-o-up:before {content: "\f0a6";} .fa-hand-o-down:before {content: "\f0a7";} .fa-arrow-circle-left:before {content: "\f0a8";} .fa-arrow-circle-right:before {content: "\f0a9";} .fa-arrow-circle-up:before {content: "\f0aa";} .fa-arrow-circle-down:before {content: "\f0ab";} .fa-globe:before {content: "\f0ac";} .fa-wrench:before {content: "\f0ad";} .fa-tasks:before {content: "\f0ae";} .fa-filter:before {content: "\f0b0";} .fa-briefcase:before {content: "\f0b1";} .fa-arrows-alt:before {content: "\f0b2";} .fa-group:before, .fa-users:before {content: "\f0c0";} .fa-chain:before, .fa-link:before {content: "\f0c1";} .fa-cloud:before {content: "\f0c2";} .fa-flask:before {content: "\f0c3";} .fa-cut:before, .fa-scissors:before {content: "\f0c4";} .fa-copy:before, .fa-files-o:before {content: "\f0c5";} .fa-paperclip:before {content: "\f0c6";} .fa-save:before, .fa-floppy-o:before {content: "\f0c7";} .fa-square:before {content: "\f0c8";} .fa-navicon:before, .fa-reorder:before, .fa-bars:before {content: "\f0c9";} .fa-list-ul:before {content: "\f0ca";} .fa-list-ol:before {content: "\f0cb";} .fa-strikethrough:before {content: "\f0cc";} .fa-underline:before {content: "\f0cd";} .fa-table:before {content: "\f0ce";} .fa-magic:before {content: "\f0d0";} .fa-truck:before {content: "\f0d1";} .fa-pinterest:before {content: "\f0d2";} .fa-pinterest-square:before {content: "\f0d3";} .fa-google-plus-square:before {content: "\f0d4";} .fa-google-plus:before {content: "\f0d5";} .fa-money:before {content: "\f0d6";} .fa-caret-down:before {content: "\f0d7";} .fa-caret-up:before {content: "\f0d8";} .fa-caret-left:before {content: "\f0d9";} .fa-caret-right:before {content: "\f0da";} .fa-columns:before {content: "\f0db";} .fa-unsorted:before, .fa-sort:before {content: "\f0dc";} .fa-sort-down:before, .fa-sort-desc:before {content: "\f0dd";} .fa-sort-up:before, .fa-sort-asc:before {content: "\f0de";} .fa-envelope:before {content: "\f0e0";} .fa-linkedin:before {content: "\f0e1";} .fa-rotate-left:before, .fa-undo:before {content: "\f0e2";} .fa-legal:before, .fa-gavel:before {content: "\f0e3";} .fa-dashboard:before, .fa-tachometer:before {content: "\f0e4";} .fa-comment-o:before {content: "\f0e5";} .fa-comments-o:before {content: "\f0e6";} .fa-flash:before, .fa-bolt:before {content: "\f0e7";} .fa-sitemap:before {content: "\f0e8";} .fa-umbrella:before {content: "\f0e9";} .fa-paste:before, .fa-clipboard:before {content: "\f0ea";} .fa-lightbulb-o:before {content: "\f0eb";} .fa-exchange:before {content: "\f0ec";} .fa-cloud-download:before {content: "\f0ed";} .fa-cloud-upload:before {content: "\f0ee";} .fa-user-md:before {content: "\f0f0";} .fa-stethoscope:before {content: "\f0f1";} .fa-suitcase:before {content: "\f0f2";} .fa-bell-o:before {content: "\f0a2";} .fa-coffee:before {content: "\f0f4";} .fa-cutlery:before {content: "\f0f5";} .fa-file-text-o:before {content: "\f0f6";} .fa-building-o:before {content: "\f0f7";} .fa-hospital-o:before {content: "\f0f8";} .fa-ambulance:before {content: "\f0f9";} .fa-medkit:before {content: "\f0fa";} .fa-fighter-jet:before {content: "\f0fb";} .fa-beer:before {content: "\f0fc";} .fa-h-square:before {content: "\f0fd";} .fa-plus-square:before {content: "\f0fe";} .fa-angle-double-left:before {content: "\f100";} .fa-angle-double-right:before {content: "\f101";} .fa-angle-double-up:before {content: "\f102";} .fa-angle-double-down:before {content: "\f103";} .fa-angle-left:before {content: "\f104";} .fa-angle-right:before {content: "\f105";} .fa-angle-up:before {content: "\f106";} .fa-angle-down:before {content: "\f107";} .fa-desktop:before {content: "\f108";} .fa-laptop:before {content: "\f109";} .fa-tablet:before {content: "\f10a";} .fa-mobile-phone:before, .fa-mobile:before {content: "\f10b";} .fa-circle-o:before {content: "\f10c";} .fa-quote-left:before {content: "\f10d";} .fa-quote-right:before {content: "\f10e";} .fa-spinner:before {content: "\f110";} .fa-circle:before {content: "\f111";} .fa-mail-reply:before, .fa-reply:before {content: "\f112";} .fa-github-alt:before {content: "\f113";} .fa-folder-o:before {content: "\f114";} .fa-folder-open-o:before {content: "\f115";} .fa-smile-o:before {content: "\f118";} .fa-frown-o:before {content: "\f119";} .fa-meh-o:before {content: "\f11a";} .fa-gamepad:before {content: "\f11b";} .fa-keyboard-o:before {content: "\f11c";} .fa-flag-o:before {content: "\f11d";} .fa-flag-checkered:before {content: "\f11e";} .fa-terminal:before {content: "\f120";} .fa-code:before {content: "\f121";} .fa-mail-reply-all:before, .fa-reply-all:before {content: "\f122";} .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before {content: "\f123";} .fa-location-arrow:before {content: "\f124";} .fa-crop:before {content: "\f125";} .fa-code-fork:before {content: "\f126";} .fa-unlink:before, .fa-chain-broken:before {content: "\f127";} .fa-question:before {content: "\f128";} .fa-info:before {content: "\f129";} .fa-exclamation:before {content: "\f12a";} .fa-superscript:before {content: "\f12b";} .fa-subscript:before {content: "\f12c";} .fa-eraser:before {content: "\f12d";} .fa-puzzle-piece:before {content: "\f12e";} .fa-microphone:before {content: "\f130";} .fa-microphone-slash:before {content: "\f131";} .fa-shield:before {content: "\f132";} .fa-calendar-o:before {content: "\f133";} .fa-fire-extinguisher:before {content: "\f134";} .fa-rocket:before {content: "\f135";} .fa-maxcdn:before {content: "\f136";} .fa-chevron-circle-left:before {content: "\f137";} .fa-chevron-circle-right:before {content: "\f138";} .fa-chevron-circle-up:before {content: "\f139";} .fa-chevron-circle-down:before {content: "\f13a";} .fa-html5:before {content: "\f13b";} .fa-css3:before {content: "\f13c";} .fa-anchor:before {content: "\f13d";} .fa-unlock-alt:before {content: "\f13e";} .fa-bullseye:before {content: "\f140";} .fa-ellipsis-h:before {content: "\f141";} .fa-ellipsis-v:before {content: "\f142";} .fa-rss-square:before {content: "\f143";} .fa-play-circle:before {content: "\f144";} .fa-ticket:before {content: "\f145";} .fa-minus-square:before {content: "\f146";} .fa-minus-square-o:before {content: "\f147";} .fa-level-up:before {content: "\f148";} .fa-level-down:before {content: "\f149";} .fa-check-square:before {content: "\f14a";} .fa-pencil-square:before {content: "\f14b";} .fa-external-link-square:before {content: "\f14c";} .fa-share-square:before {content: "\f14d";} .fa-compass:before {content: "\f14e";} .fa-toggle-down:before, .fa-caret-square-o-down:before {content: "\f150";} .fa-toggle-up:before, .fa-caret-square-o-up:before {content: "\f151";} .fa-toggle-right:before, .fa-caret-square-o-right:before {content: "\f152";} .fa-euro:before, .fa-eur:before {content: "\f153";} .fa-gbp:before {content: "\f154";} .fa-dollar:before, .fa-usd:before {content: "\f155";} .fa-rupee:before, .fa-inr:before {content: "\f156";} .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before {content: "\f157";} .fa-ruble:before, .fa-rouble:before, .fa-rub:before {content: "\f158";} .fa-won:before, .fa-krw:before {content: "\f159";} .fa-bitcoin:before, .fa-btc:before {content: "\f15a";} .fa-file:before {content: "\f15b";} .fa-file-text:before {content: "\f15c";} .fa-sort-alpha-asc:before {content: "\f15d";} .fa-sort-alpha-desc:before {content: "\f15e";} .fa-sort-amount-asc:before {content: "\f160";} .fa-sort-amount-desc:before {content: "\f161";} .fa-sort-numeric-asc:before {content: "\f162";} .fa-sort-numeric-desc:before {content: "\f163";} .fa-thumbs-up:before {content: "\f164";} .fa-thumbs-down:before {content: "\f165";} .fa-youtube-square:before {content: "\f166";} .fa-youtube:before {content: "\f167";} .fa-xing:before {content: "\f168";} .fa-xing-square:before {content: "\f169";} .fa-youtube-play:before {content: "\f16a";} .fa-dropbox:before {content: "\f16b";} .fa-stack-overflow:before {content: "\f16c";} .fa-instagram:before {content: "\f16d";} .fa-flickr:before {content: "\f16e";} .fa-adn:before {content: "\f170";} .fa-bitbucket:before {content: "\f171";} .fa-bitbucket-square:before {content: "\f172";} .fa-tumblr:before {content: "\f173";} .fa-tumblr-square:before {content: "\f174";} .fa-long-arrow-down:before {content: "\f175";} .fa-long-arrow-up:before {content: "\f176";} .fa-long-arrow-left:before {content: "\f177";} .fa-long-arrow-right:before {content: "\f178";} .fa-apple:before {content: "\f179";} .fa-windows:before {content: "\f17a";} .fa-android:before {content: "\f17b";} .fa-linux:before {content: "\f17c";} .fa-dribbble:before {content: "\f17d";} .fa-skype:before {content: "\f17e";} .fa-foursquare:before {content: "\f180";} .fa-trello:before {content: "\f181";} .fa-female:before {content: "\f182";} .fa-male:before {content: "\f183";} .fa-gittip:before, .fa-gratipay:before {content: "\f184";} .fa-sun-o:before {content: "\f185";} .fa-moon-o:before {content: "\f186";} .fa-archive:before {content: "\f187";} .fa-bug:before {content: "\f188";} .fa-vk:before {content: "\f189";} .fa-weibo:before {content: "\f18a";} .fa-renren:before {content: "\f18b";} .fa-pagelines:before {content: "\f18c";} .fa-stack-exchange:before {content: "\f18d";} .fa-arrow-circle-o-right:before {content: "\f18e";} .fa-arrow-circle-o-left:before {content: "\f190";} .fa-toggle-left:before, .fa-caret-square-o-left:before {content: "\f191";} .fa-dot-circle-o:before {content: "\f192";} .fa-wheelchair:before {content: "\f193";} .fa-vimeo-square:before {content: "\f194";} .fa-turkish-lira:before, .fa-try:before {content: "\f195";} .fa-plus-square-o:before {content: "\f196";} .fa-space-shuttle:before {content: "\f197";} .fa-slack:before {content: "\f198";} .fa-envelope-square:before {content: "\f199";} .fa-wordpress:before {content: "\f19a";} .fa-openid:before {content: "\f19b";} .fa-institution:before, .fa-bank:before, .fa-university:before {content: "\f19c";} .fa-mortar-board:before, .fa-graduation-cap:before {content: "\f19d";} .fa-yahoo:before {content: "\f19e";} .fa-google:before {content: "\f1a0";} .fa-reddit:before {content: "\f1a1";} .fa-reddit-square:before {content: "\f1a2";} .fa-stumbleupon-circle:before {content: "\f1a3";} .fa-stumbleupon:before {content: "\f1a4";} .fa-delicious:before {content: "\f1a5";} .fa-digg:before {content: "\f1a6";} .fa-pied-piper-pp:before {content: "\f1a7";} .fa-pied-piper-alt:before {content: "\f1a8";} .fa-drupal:before {content: "\f1a9";} .fa-joomla:before {content: "\f1aa";} .fa-language:before {content: "\f1ab";} .fa-fax:before {content: "\f1ac";} .fa-building:before {content: "\f1ad";} .fa-child:before {content: "\f1ae";} .fa-paw:before {content: "\f1b0";} .fa-spoon:before {content: "\f1b1";} .fa-cube:before {content: "\f1b2";} .fa-cubes:before {content: "\f1b3";} .fa-behance:before {content: "\f1b4";} .fa-behance-square:before {content: "\f1b5";} .fa-steam:before {content: "\f1b6";} .fa-steam-square:before {content: "\f1b7";} .fa-recycle:before {content: "\f1b8";} .fa-automobile:before, .fa-car:before {content: "\f1b9";} .fa-cab:before, .fa-taxi:before {content: "\f1ba";} .fa-tree:before {content: "\f1bb";} .fa-spotify:before {content: "\f1bc";} .fa-deviantart:before {content: "\f1bd";} .fa-soundcloud:before {content: "\f1be";} .fa-database:before {content: "\f1c0";} .fa-file-pdf-o:before {content: "\f1c1";} .fa-file-word-o:before {content: "\f1c2";} .fa-file-excel-o:before {content: "\f1c3";} .fa-file-powerpoint-o:before {content: "\f1c4";} .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before {content: "\f1c5";} .fa-file-zip-o:before, .fa-file-archive-o:before {content: "\f1c6";} .fa-file-sound-o:before, .fa-file-audio-o:before {content: "\f1c7";} .fa-file-movie-o:before, .fa-file-video-o:before {content: "\f1c8";} .fa-file-code-o:before {content: "\f1c9";} .fa-vine:before {content: "\f1ca";} .fa-codepen:before {content: "\f1cb";} .fa-jsfiddle:before {content: "\f1cc";} .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before {content: "\f1cd";} .fa-circle-o-notch:before {content: "\f1ce";} .fa-ra:before, .fa-resistance:before, .fa-rebel:before {content: "\f1d0";} .fa-ge:before, .fa-empire:before {content: "\f1d1";} .fa-git-square:before {content: "\f1d2";} .fa-git:before {content: "\f1d3";} .fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before {content: "\f1d4";} .fa-tencent-weibo:before {content: "\f1d5";} .fa-qq:before {content: "\f1d6";} .fa-wechat:before, .fa-weixin:before {content: "\f1d7";} .fa-send:before, .fa-paper-plane:before {content: "\f1d8";} .fa-send-o:before, .fa-paper-plane-o:before {content: "\f1d9";} .fa-history:before {content: "\f1da";} .fa-circle-thin:before {content: "\f1db";} .fa-header:before {content: "\f1dc";} .fa-paragraph:before {content: "\f1dd";} .fa-sliders:before {content: "\f1de";} .fa-share-alt:before {content: "\f1e0";} .fa-share-alt-square:before {content: "\f1e1";} .fa-bomb:before {content: "\f1e2";} .fa-soccer-ball-o:before, .fa-futbol-o:before {content: "\f1e3";} .fa-tty:before {content: "\f1e4";} .fa-binoculars:before {content: "\f1e5";} .fa-plug:before {content: "\f1e6";} .fa-slideshare:before {content: "\f1e7";} .fa-twitch:before {content: "\f1e8";} .fa-yelp:before {content: "\f1e9";} .fa-newspaper-o:before {content: "\f1ea";} .fa-wifi:before {content: "\f1eb";} .fa-calculator:before {content: "\f1ec";} .fa-paypal:before {content: "\f1ed";} .fa-google-wallet:before {content: "\f1ee";} .fa-cc-visa:before {content: "\f1f0";} .fa-cc-mastercard:before {content: "\f1f1";} .fa-cc-discover:before {content: "\f1f2";} .fa-cc-amex:before {content: "\f1f3";} .fa-cc-paypal:before {content: "\f1f4";} .fa-cc-stripe:before {content: "\f1f5";} .fa-bell-slash:before {content: "\f1f6";} .fa-bell-slash-o:before {content: "\f1f7";} .fa-trash:before {content: "\f1f8";} .fa-copyright:before {content: "\f1f9";} .fa-at:before {content: "\f1fa";} .fa-eyedropper:before {content: "\f1fb";} .fa-paint-brush:before {content: "\f1fc";} .fa-birthday-cake:before {content: "\f1fd";} .fa-area-chart:before {content: "\f1fe";} .fa-pie-chart:before {content: "\f200";} .fa-line-chart:before {content: "\f201";} .fa-lastfm:before {content: "\f202";} .fa-lastfm-square:before {content: "\f203";} .fa-toggle-off:before {content: "\f204";} .fa-toggle-on:before {content: "\f205";} .fa-bicycle:before {content: "\f206";} .fa-bus:before {content: "\f207";} .fa-ioxhost:before {content: "\f208";} .fa-angellist:before {content: "\f209";} .fa-cc:before {content: "\f20a";} .fa-shekel:before, .fa-sheqel:before, .fa-ils:before {content: "\f20b";} .fa-meanpath:before {content: "\f20c";} .fa-buysellads:before {content: "\f20d";} .fa-connectdevelop:before {content: "\f20e";} .fa-dashcube:before {content: "\f210";} .fa-forumbee:before {content: "\f211";} .fa-leanpub:before {content: "\f212";} .fa-sellsy:before {content: "\f213";} .fa-shirtsinbulk:before {content: "\f214";} .fa-simplybuilt:before {content: "\f215";} .fa-skyatlas:before {content: "\f216";} .fa-cart-plus:before {content: "\f217";} .fa-cart-arrow-down:before {content: "\f218";} .fa-diamond:before {content: "\f219";} .fa-ship:before {content: "\f21a";} .fa-user-secret:before {content: "\f21b";} .fa-motorcycle:before {content: "\f21c";} .fa-street-view:before {content: "\f21d";} .fa-heartbeat:before {content: "\f21e";} .fa-venus:before {content: "\f221";} .fa-mars:before {content: "\f222";} .fa-mercury:before {content: "\f223";} .fa-intersex:before, .fa-transgender:before {content: "\f224";} .fa-transgender-alt:before {content: "\f225";} .fa-venus-double:before {content: "\f226";} .fa-mars-double:before {content: "\f227";} .fa-venus-mars:before {content: "\f228";} .fa-mars-stroke:before {content: "\f229";} .fa-mars-stroke-v:before {content: "\f22a";} .fa-mars-stroke-h:before {content: "\f22b";} .fa-neuter:before {content: "\f22c";} .fa-genderless:before {content: "\f22d";} .fa-facebook-official:before {content: "\f230";} .fa-pinterest-p:before {content: "\f231";} .fa-whatsapp:before {content: "\f232";} .fa-server:before {content: "\f233";} .fa-user-plus:before {content: "\f234";} .fa-user-times:before {content: "\f235";} .fa-hotel:before, .fa-bed:before {content: "\f236";} .fa-viacoin:before {content: "\f237";} .fa-train:before {content: "\f238";} .fa-subway:before {content: "\f239";} .fa-medium:before {content: "\f23a";} .fa-yc:before, .fa-y-combinator:before {content: "\f23b";} .fa-optin-monster:before {content: "\f23c";} .fa-opencart:before {content: "\f23d";} .fa-expeditedssl:before {content: "\f23e";} .fa-battery-4:before, .fa-battery:before, .fa-battery-full:before {content: "\f240";} .fa-battery-3:before, .fa-battery-three-quarters:before {content: "\f241";} .fa-battery-2:before, .fa-battery-half:before {content: "\f242";} .fa-battery-1:before, .fa-battery-quarter:before {content: "\f243";} .fa-battery-0:before, .fa-battery-empty:before {content: "\f244";} .fa-mouse-pointer:before {content: "\f245";} .fa-i-cursor:before {content: "\f246";} .fa-object-group:before {content: "\f247";} .fa-object-ungroup:before {content: "\f248";} .fa-sticky-note:before {content: "\f249";} .fa-sticky-note-o:before {content: "\f24a";} .fa-cc-jcb:before {content: "\f24b";} .fa-cc-diners-club:before {content: "\f24c";} .fa-clone:before {content: "\f24d";} .fa-balance-scale:before {content: "\f24e";} .fa-hourglass-o:before {content: "\f250";} .fa-hourglass-1:before, .fa-hourglass-start:before {content: "\f251";} .fa-hourglass-2:before, .fa-hourglass-half:before {content: "\f252";} .fa-hourglass-3:before, .fa-hourglass-end:before {content: "\f253";} .fa-hourglass:before {content: "\f254";} .fa-hand-grab-o:before, .fa-hand-rock-o:before {content: "\f255";} .fa-hand-stop-o:before, .fa-hand-paper-o:before {content: "\f256";} .fa-hand-scissors-o:before {content: "\f257";} .fa-hand-lizard-o:before {content: "\f258";} .fa-hand-spock-o:before {content: "\f259";} .fa-hand-pointer-o:before {content: "\f25a";} .fa-hand-peace-o:before {content: "\f25b";} .fa-trademark:before {content: "\f25c";} .fa-registered:before {content: "\f25d";} .fa-creative-commons:before {content: "\f25e";} .fa-gg:before {content: "\f260";} .fa-gg-circle:before {content: "\f261";} .fa-tripadvisor:before {content: "\f262";} .fa-odnoklassniki:before {content: "\f263";} .fa-odnoklassniki-square:before {content: "\f264";} .fa-get-pocket:before {content: "\f265";} .fa-wikipedia-w:before {content: "\f266";} .fa-safari:before {content: "\f267";} .fa-chrome:before {content: "\f268";} .fa-firefox:before {content: "\f269";} .fa-opera:before {content: "\f26a";} .fa-internet-explorer:before {content: "\f26b";} .fa-tv:before, .fa-television:before {content: "\f26c";} .fa-contao:before {content: "\f26d";} .fa-500px:before {content: "\f26e";} .fa-amazon:before {content: "\f270";} .fa-calendar-plus-o:before {content: "\f271";} .fa-calendar-minus-o:before {content: "\f272";} .fa-calendar-times-o:before {content: "\f273";} .fa-calendar-check-o:before {content: "\f274";} .fa-industry:before {content: "\f275";} .fa-map-pin:before {content: "\f276";} .fa-map-signs:before {content: "\f277";} .fa-map-o:before {content: "\f278";} .fa-map:before {content: "\f279";} .fa-commenting:before {content: "\f27a";} .fa-commenting-o:before {content: "\f27b";} .fa-houzz:before {content: "\f27c";} .fa-vimeo:before {content: "\f27d";} .fa-black-tie:before {content: "\f27e";} .fa-fonticons:before {content: "\f280";} .fa-reddit-alien:before {content: "\f281";} .fa-edge:before {content: "\f282";} .fa-credit-card-alt:before {content: "\f283";} .fa-codiepie:before {content: "\f284";} .fa-modx:before {content: "\f285";} .fa-fort-awesome:before {content: "\f286";} .fa-usb:before {content: "\f287";} .fa-product-hunt:before {content: "\f288";} .fa-mixcloud:before {content: "\f289";} .fa-scribd:before {content: "\f28a";} .fa-pause-circle:before {content: "\f28b";} .fa-pause-circle-o:before {content: "\f28c";} .fa-stop-circle:before {content: "\f28d";} .fa-stop-circle-o:before {content: "\f28e";} .fa-shopping-bag:before {content: "\f290";} .fa-shopping-basket:before {content: "\f291";} .fa-hashtag:before {content: "\f292";} .fa-bluetooth:before {content: "\f293";} .fa-bluetooth-b:before {content: "\f294";} .fa-percent:before {content: "\f295";} .fa-gitlab:before {content: "\f296";} .fa-wpbeginner:before {content: "\f297";} .fa-wpforms:before {content: "\f298";} .fa-envira:before {content: "\f299";} .fa-universal-access:before {content: "\f29a";} .fa-wheelchair-alt:before {content: "\f29b";} .fa-question-circle-o:before {content: "\f29c";} .fa-blind:before {content: "\f29d";} .fa-audio-description:before {content: "\f29e";} .fa-volume-control-phone:before {content: "\f2a0";} .fa-braille:before {content: "\f2a1";} .fa-assistive-listening-systems:before {content: "\f2a2";} .fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before {content: "\f2a3";} .fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before {content: "\f2a4";} .fa-glide:before {content: "\f2a5";} .fa-glide-g:before {content: "\f2a6";} .fa-signing:before, .fa-sign-language:before {content: "\f2a7";} .fa-low-vision:before {content: "\f2a8";} .fa-viadeo:before {content: "\f2a9";} .fa-viadeo-square:before {content: "\f2aa";} .fa-snapchat:before {content: "\f2ab";} .fa-snapchat-ghost:before {content: "\f2ac";} .fa-snapchat-square:before {content: "\f2ad";} .fa-pied-piper:before {content: "\f2ae";} .fa-first-order:before {content: "\f2b0";} .fa-yoast:before {content: "\f2b1";} .fa-themeisle:before {content: "\f2b2";} .fa-google-plus-circle:before, .fa-google-plus-official:before {content: "\f2b3";} .fa-fa:before, .fa-font-awesome:before {content: "\f2b4";} .fa-handshake-o:before {content: "\f2b5";} .fa-envelope-open:before {content: "\f2b6";} .fa-envelope-open-o:before {content: "\f2b7";} .fa-linode:before {content: "\f2b8";} .fa-address-book:before {content: "\f2b9";} .fa-address-book-o:before {content: "\f2ba";} .fa-vcard:before, .fa-address-card:before {content: "\f2bb";} .fa-vcard-o:before, .fa-address-card-o:before {content: "\f2bc";} .fa-user-circle:before {content: "\f2bd";} .fa-user-circle-o:before {content: "\f2be";} .fa-user-o:before {content: "\f2c0";} .fa-id-badge:before {content: "\f2c1";} .fa-drivers-license:before, .fa-id-card:before {content: "\f2c2";} .fa-drivers-license-o:before, .fa-id-card-o:before {content: "\f2c3";} .fa-quora:before {content: "\f2c4";} .fa-free-code-camp:before {content: "\f2c5";} .fa-telegram:before {content: "\f2c6";} .fa-thermometer-4:before, .fa-thermometer:before, .fa-thermometer-full:before {content: "\f2c7";} .fa-thermometer-3:before, .fa-thermometer-three-quarters:before {content: "\f2c8";} .fa-thermometer-2:before, .fa-thermometer-half:before {content: "\f2c9";} .fa-thermometer-1:before, .fa-thermometer-quarter:before {content: "\f2ca";} .fa-thermometer-0:before, .fa-thermometer-empty:before {content: "\f2cb";} .fa-shower:before {content: "\f2cc";} .fa-bathtub:before, .fa-s15:before, .fa-bath:before {content: "\f2cd";} .fa-podcast:before {content: "\f2ce";} .fa-window-maximize:before {content: "\f2d0";} .fa-window-minimize:before {content: "\f2d1";} .fa-window-restore:before {content: "\f2d2";} .fa-times-rectangle:before, .fa-window-close:before {content: "\f2d3";} .fa-times-rectangle-o:before, .fa-window-close-o:before {content: "\f2d4";} .fa-bandcamp:before {content: "\f2d5";} .fa-grav:before {content: "\f2d6";} .fa-etsy:before {content: "\f2d7";} .fa-imdb:before {content: "\f2d8";} .fa-ravelry:before {content: "\f2d9";} .fa-eercast:before {content: "\f2da";} .fa-microchip:before {content: "\f2db";} .fa-snowflake-o:before {content: "\f2dc";} .fa-superpowers:before {content: "\f2dd";} .fa-wpexplorer:before {content: "\f2de";} .fa-meetup:before {content: "\f2e0";} /************************************************************************************************************************************/ /******* Global Styles ***************************************************************************************************************************/ /******* Ajax Loader ********/ @keyframes ajax-o { 0% { opacity: 1; transform: translate(0 0) } 49.99% { opacity: 1; transform: translate(40px,0) } 50% { opacity: 0; transform: translate(40px,0) } 100% { opacity: 0; transform: translate(0,0) } } @keyframes ajax { 0% { transform: translate(0,0) } 50% { transform: translate(40px,0) } 100% { transform: translate(0,0) } } .ajax-spinner { width: 25px; height: 18px; display: inline-block; overflow: hidden; background: none; } .ajax { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(0.25); backface-visibility: hidden; transform-origin: 0 0; } .ajax div { box-sizing: content-box; } .ajax div { position: absolute; width: 40px; height: 40px; border-radius: 50%; top: 30px; left: 10px; } .ajax div:nth-child(1) { background: var(--thematic-spinner); animation: ajax 1.6666666666666667s linear infinite; animation-delay: -0.8333333333333334s; } .ajax div:nth-child(2) { background: var(--thematic-blue); animation: ajax 1.6666666666666667s linear infinite; animation-delay: 0s; } .ajax div:nth-child(3) { background: var(--thematic-spinner); animation: ajax-o 1.6666666666666667s linear infinite; animation-delay: -0.8333333333333334s; } .page-title {display: block;border-width: 0;border-bottom-width: 1px;border-style: solid;border-color: #e2e2e2;margin-top: 15px;margin-bottom: 30px;white-space: normal;overflow: visible;text-overflow: initial;} .page-title::after { content: "";display: block;position: relative;margin-top: 10px;width: 100px;height: 1px; background: var(--thematic-yellow); } .title:not(.page-title) { font-weight: 600; margin-bottom: 15px; white-space: normal; overflow: visible; text-overflow: initial; position: relative; line-height: 1.2; margin: 0; padding: 0;} .title span::after {top: 1px;} .title::after {content: ""; display: block; position: relative; margin-top: 10px;} .title.page-title > span::after {content: "";display: block;position: relative;margin-top: 10px;} .title::after, .title.page-title > span::after {width: 50px;height: 1px;background: var(--thematic-yellow);} i.fa {font-style: normal;} .btn-cart::before, .fa-shopping-cart::before {content: "\e99b" !important;font-family: icomoon !important;margin-right: 3px;} .stepper { position: relative; max-width: 110px; min-width: 75px; width:100%; overflow: visible; display: inline-block; vertical-align: middle; border: none; height: auto; background-color:#FFF; } .stepper input[type="text"].form-control { display: block; background: 0 0; text-align: center; width: 100%; padding: 5px 25px; margin: 0; border: 1px solid #e2e2e2 !important; max-width: 100%; height: 35px; line-height: 1.42; font-size: 1em; } .stepper span { position:unset; } .stepper span i { background-color: #FFFFFF; color: #8B9198; cursor: pointer; position: absolute; display: block; top: 0; bottom: 0; padding: 5px 0; width: 30px; height: 100%; text-align: center; line-height: 26px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; font-weight: normal; font-size: 12px; } .stepper span i.plus { right: 0; border: 1px solid #e2e2e2; } .stepper span i.minus { left: 0; border: 1px solid #e2e2e2; } .stepper span i.plus::before { content: "\f067"; } .stepper span i.minus::before { content: "\f068"; } .btn { align-items: center;background-image: none;background: transparent;border-radius: 4px; border: 1px solid transparent; color: rgba(255, 255, 255, 1);cursor: pointer;display: inline-flex;font-size: 14px;font-weight: 400;justify-content: center;line-height: 1;margin-bottom: 0;min-width: 0;padding: 13px 18px;position: relative;text-align: center;text-transform: uppercase;touch-action: manipulation;transition: all 0.1s ease-out; -webkit-user-select: none; user-select: none;white-space: nowrap; } .btn .caret {margin-left: 0;} .btn > .links-text:empty {display: none;} .btn > span:first-of-type {min-width: 0;white-space: nowrap;} .btn:visited {font-size: 13px;color: rgba(255, 255, 255, 1);font-weight: 400;text-transform: uppercase;} .btn.active, .btn:active {background-image: none;outline: 0;-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);} .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: thin dotted; outline-offset: -3px; } .btn.disabled, .btn[disabled], fieldset[disabled] .btn {cursor: not-allowed;filter: alpha(opacity=65);-webkit-box-shadow: none;box-shadow: none;opacity: 0.65;} .btn.focus, .btn:focus, .btn:hover {color: #333;text-decoration: none;} a.btn.disabled, fieldset[disabled] a.btn {pointer-events: none;} .btn i { margin-right:4px; } .btn.btn-primary {color: #fff;background-color: #337ab7;border-color: #1459ad;} .btn.btn-primary.active, .btn.btn-primary:active, .open > .dropdown-toggle.btn-primary {background-image: none;} .btn.btn-primary.active, .btn.btn-primary:active, .open > .dropdown-toggle.btn-primary {color: #fff;background-color: #286090;border-color: #204d74;} .btn.btn-primary.active.focus, .btn.btn-primary.active:focus, .btn.btn-primary.active:hover, .btn.btn-primary:active.focus, .btn.btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {color: #fff;background-color: #204d74;border-color: #122b40;} .btn.btn-primary.disabled, .btn.btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {background-color: #337ab7;border-color: #2e6da4;} .btn.btn-primary.focus, .btn.btn-primary:focus {color: #fff;background-color: #286090;border-color: #122b40;} .btn.btn-primary:hover { color: #fff; background-color: var(--thematic-blue-hover); border-color: #204d74; } .btn.btn-success {color: #fff;background-color: #5cb85c;border-color: #2f972f;} .btn.btn-success.active, .btn.btn-success:active, .open > .dropdown-toggle.btn.btn-success {background-image: none;} .btn.btn-success.active, .btn.btn-success:active, .open > .dropdown-toggle.btn.btn-success {color: #fff;background-color: #449d44;border-color: #398439;} .btn.btn-success.active.focus, .btn.btn-success.active:focus, .btn.btn-success.active:hover, .btn.btn-success:active.focus, .btn.btn-success:active:focus, .btn.btn-success:active:hover, .open > .dropdown-toggle.btn.btn-success.focus, .open > .dropdown-toggle.btn.btn-success:focus, .open > .dropdown-toggle.btn.btn-success:hover {color: #fff;background-color: #398439;border-color: #255625;} .btn.btn-success.disabled, .btn.btn-success.disabled.active, .btn.btn-success.disabled.focus, .btn.btn-success.disabled:active, .btn.btn-success.disabled:focus, .btn.btn-success.disabled:hover, .btn.btn-success[disabled], .btn.btn-success[disabled].active, .btn.btn-success[disabled].focus, .btn.btn-success[disabled]:active, .btn.btn-success[disabled]:focus, .btn.btn-success[disabled]:hover, fieldset[disabled] .btn.btn-success, fieldset[disabled] .btn.btn-success.active, fieldset[disabled] .btn.btn-success.focus, fieldset[disabled] .btn.btn-success:active, fieldset[disabled] .btn.btn-success:focus, fieldset[disabled] .btn.btn-success:hover {background-color: #5cb85c;border-color: #4cae4c;} .btn.btn-success.focus, .btn.btn-success:focus {color: #fff;background-color: #449d44;border-color: #255625;} .btn.btn-success:hover {color: #fff !important;background-color: #449d44 !important;border-color: #398439 !important;} .btn.btn-warning {color: #fff;background-color: #f0ad4e;border-color: #eea236;} .btn.btn-warning.active, .btn.btn-warning:active, .open > .dropdown-toggle.btn.btn-warning {background-image: none;} .btn.btn-warning.active, .btn.btn-warning:active, .open > .dropdown-toggle.btn.btn-warning {color: #fff;background-color: #ec971f;border-color: #d58512;} .btn.btn-warning.active.focus, .btn.btn-warning.active:focus, .btn.btn-warning.active:hover, .btn.btn-warning:active.focus, .btn.btn-warning:active:focus, .btn.btn-warning:active:hover, .open > .dropdown-toggle.btn.btn-warning.focus, .open > .dropdown-toggle.btn.btn-warning:focus, .open > .dropdown-toggle.btn.btn-warning:hover {color: #fff;background-color: #d58512;border-color: #985f0d;} .btn.btn-warning.disabled, .btn.btn-warning.disabled.active, .btn.btn-warning.disabled.focus, .btn.btn-warning.disabled:active, .btn.btn-warning.disabled:focus, .btn.btn-warning.disabled:hover, .btn.btn-warning[disabled], .btn.btn-warning[disabled].active, .btn.btn-warning[disabled].focus, .btn.btn-warning[disabled]:active, .btn.btn-warning[disabled]:focus, .btn.btn-warning[disabled]:hover, fieldset[disabled] .btn.btn-warning, fieldset[disabled] .btn.btn-warning.active, fieldset[disabled] .btn.btn-warning.focus, fieldset[disabled] .btn.btn-warning:active, fieldset[disabled] .btn.btn-warning:focus, fieldset[disabled] .btn.btn-warning:hover {background-color: #f0ad4e;border-color: #eea236;} .btn.btn-warning.focus, .btn.btn-warning:focus {color: #fff;background-color: #ec971f;border-color: #985f0d;} .btn.btn-warning:hover {color: #fff;background-color: #ec971f;border-color: #d58512;} .btn.btn-search { border: 1px solid #AAA; color: #666; background: #EEE;} .btn.btn-search.active, .btn.btn-search:active { color: #fff !important;background-color: #afafaf !important;border-color: #666666 !important; } .btn.btn-search.active.focus, .btn.btn-search.active:focus, .btn.btn-search.active:hover, .btn.btn-search:active.focus, .btn.btn-search:active:focus {color: #fff !important;background-color: #afafaf !important;border-color: #666666 !important;} .btn.btn-search.focus, .btn.btn-search:focus { color: #fff; background-color: #536779; border-color: #122b40; } .btn.btn-search:hover { color: #fff !important;background-color: #afafaf !important;border-color: #666666 !important; } .btn.btn-dark {background: rgba(44, 54, 64, 1);} .btn.btn-dark.btn.disabled::after {font-size: 20px;} .btn.btn-dark:hover {background: rgba(58, 71, 84, 1) !important; color: #FFF; } .btn-light.btn, .btn-light.btn:visited { color: #333333; background: rgba(240,242,245, 1); border-color: #e1e1e1; } .btn-light.btn.btn.disabled::after {font-size: 20px;} .btn-light.btn:hover {background: #afafaf !important;} .btn-lg.btn {padding: 10px 16px;font-size: 18px;line-height: 1.3333333;border-radius: 6px;} .btn-sm.btn {padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px; border-width: 1px; } .btn-xs.btn {padding: 1px 5px;font-size: 10px;line-height: 1.5;border-radius: 3px;} .line-clamp-1 { -webkit-line-clamp: 1; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .line-clamp-5 { -webkit-line-clamp: 5; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .error { color:rgba(221, 14, 28, 1); } .errorMsg { text-align:left; padding:4px; margin-bottom: 10px; background-color: #ffe7e7;border: 1px solid #ffc7c6; color:rgba(221, 14, 28, 1); } .errorMsg ul { margin:0; } .errorMsg p:first-child { margin: 0 0 5px 0; padding: 0; } .noteMsg, .contentHighlight { text-align:left; padding:4px; margin-bottom: 10px; color: #8a6d3b; background-color: #fcf8e3;border: 1px solid #faebcc; } .noteMsg p:first-child { margin: 0 0 5px 0; padding: 0; } .checkmark { color: #50AD55; font-weight: bold; } .display-block { display:block !important; width:100% !important; } .display-flex { display:flex !important; } .display-inline { display:inline-block !important; } .display-none { display:none !important; } .bolditalics { font-weight:bold; font-style:italic; } .input-validation-error { border: 1px solid #ff0000; background-color: #ffeeee; } .greenBox { margin: 10px; padding: 8px; border: 1px solid #50AD55; background-color: #dcffed; flex: 0 0 100%; width: 100%; } .greenBox:empty { display: none; } .greenHighlight { background-color: #dcffed !important; color: #50AD55 !important; font-weight: bold; } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; -webkit-overflow-scrolling: touch; outline: 0; color: #333; } .hover { position: absolute; top: 0px; transform: translateY(15px); right: 0; z-index: 1050; display: none; -webkit-overflow-scrolling: touch; outline: 0; color: #333; width: 400px; box-shadow: 0 0px 10px #bcbcbc; } body.modal-open { overflow: hidden; } .close button.btn { margin: 0 auto; display: block; } .reqMsg { font-size:.8em; flex: 0 0 100%; text-align: right; } /************************************************************************************************************************************/ /* .nav .nav-divider { height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5; } .nav > li.disabled > a { color: #777;} .nav > li.disabled > a:focus, .nav > li.disabled > a:hover { color: #777;text-decoration: none;cursor: not-allowed;background-color: transparent; } .nav .open > a, .nav .open > a:focus, .nav .open > a:hover { background-color: #eee;border-color: #337ab7; } .nav > li > a > img { max-width: none; } #ContentTabs .nav-tabs > li > a::before { font-size: 18px;} .nav-tabs > li > a::before {margin-right: 5px;font-weight: 400;line-height: 1;} .nav-tabs > li > a::before {font-size: 18px;} .nav-tabs > li > a:hover { border-color: #eee #eee #ddd; } .nav-tabs > li > a:focus, .nav-tabs > li > a:hover { text-decoration: none;background-color: #eee; } #ContentTabs .nav-tabs > li:first-child > a { } #ContentTabs .nav-tabs > li:last-child > a { } #ContentTabs .nav-tabs > li.active > a { color: #333333; } #ContentTabs .nav-tabs > li.active > a, #ContentTabs .nav-tabs > li.active > a:hover, #ContentTabs .nav-tabs > li.active > a:focus { } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {color: #555;cursor: default;background-color: #fff;border: 1px solid #ddd;border-bottom-color: transparent;} .nav-tabs > li:hover > a, .nav-tabs > li.active > a {color: #333333;} .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {color: #333333;} .nav-tabs > li:hover > a, .nav-tabs > li.active > a, .nav-tabs > li:focus > a {border: 0;background: transparent;} .nav-tabs > li:hover > a:hover, .nav-tabs > li:hover > a:focus, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs > li:focus > a:hover, .nav-tabs > li:focus > a:focus {background: inherit;border: 0;} #ContentTabs .nav-tabs > li.active::after { } #ContentTabs .nav-tabs > li:first-child { border-left: 1px solid #e2e2e2; } #ContentTabs .nav-tabs > li:last-child { border-right: 1px solid #e2e2e2; } #ContentTabs .nav-tabs > li:not(:last-child) { } #ContentTabs .nav-tabs > li + li { border-left: 1px solid #e2e2e2; } */ /********* SHARED CONTENT TABS STYLINGS *********/ #ContentTabs { flex: 0 0 100%; display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; } #ContentTabs .nav-tabs { flex: 0 0 100%; max-width: 800px; margin: 0 auto; display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; list-style: none; min-width: 50px; z-index: 1; padding: 0; } #ContentTabs .nav-tabs::before, #ContentTabs .nav-tabs::after { display: none; } #ContentTabs .nav-tabs > li { border-bottom: 2px solid transparent; flex: 0 0 25%; } #ContentTabs .nav-tabs > li.active { border-bottom: 2px solid var(--thematic-yellow); background-color:#FFF; } #ContentTabs .nav-tabs > li > a { color: #8B9198;text-transform: uppercase; outline-offset: -1px; outline-color: #AAA; font-weight: bold; font-size: 1.1em; line-height: 1.25; white-space: nowrap; padding: 10px 15px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #ContentTabs .nav-tabs > li:hover > a, #ContentTabs .nav-tabs > li.active > a, #ContentTabs .nav-tabs > li.active > a:hover, #ContentTabs .nav-tabs > li.active > a:focus { color: #333333; } #ContentTabs .tab-content { padding:0; background:#FFF; flex: 0 0 100%; position: relative; border-width: 1px; z-index: 0; margin-top: -1px; } #ContentTabs .tab-content > .tab-pane { display: none; padding: 0; background: transparent; border-radius: inherit; } #ContentTabs .tab-content > .active { display: flex; } /************************************************************************************************************************************/ /********* MAIN SITE STYLINGS *********/ #SiteWrapper > .container, .breadcrumb, .title-wrapper, .page-title > span, .grid-cols, #WebsiteHeader .full-header, #SiteWrapper { max-width: 1280px; } #SiteWrapper { position: relative; width: 100%; min-height: 80vh; display: flex; flex-direction: column; margin: 0 auto; z-index: 1; } #SiteWrapper > .container { margin: 0 auto; flex: 0 0 100%; width: 100%; padding: 0; display: flex;flex-direction: column; flex-grow: 1; gap: 30px; } #SiteWrapper > .container > .row { flex: 0 0 100%; display: flex; flex-grow: 1; } #SiteWrapper > .container::before, #SiteWrapper > .container::after, #SiteWrapper > .container > .row::before, #SiteWrapper > .container > .row::after {display: none;} /********* SITEWIDE STRUCTURE *****/ .grid-items { height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } .grid-item { width: 100%;} .grid-rows { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } .grid-row { position: relative; flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } .grid-row::before { width: 100vw;height: 100%;position: absolute;top: 0;left: 50%;pointer-events: none; outline: 1px solid transparent; } .grid-cols {flex: 0 0 100%; display: flex; flex-wrap: nowrap; flex-direction: row; align-content: center; justify-content: space-evenly; align-items: center; margin: 0 auto;height: 100%; } .grid-col { width: 100%;position: relative; } /************************************************************************************************************************************/ #WebsiteHeader .full-header { height: 100%; display: flex; align-items: center; flex-direction: column; gap: 7px; margin: 0 auto; position: relative; padding: 0 10px; } #WebsiteHeader .full-header > div { width: 100%; } /******** Mobile Hamburger Navigation Bar *********/ #WebsiteHeader .mobile-menu-container { -webkit-user-select: none; user-select: none; cursor:pointer; display: none; flex: 0 0 40px; } /******** Main Header Bar *********/ #WebsiteHeader .full-header #HeaderMain { flex: 0 0 90px; max-height: 100px; display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; flex-direction: column; align-content: space-between; position: relative; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper { margin: 0 20px 0 0; order: 0; flex: 0 0 auto; width: 250px; display: flex; flex-wrap: wrap; flex-direction: row; align-content: flex-end; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper .tagline { flex: 0 0 100%; font-size: .8em; padding: 0 0 3px 3px; line-height: 1; color: #5e5e5e; } #WebsiteHeader .full-header #HeaderMain .free-shipping { text-align: center; display: block; position: relative; margin: 0; order: 1; flex: 0 0 35px; width: calc(100% - 530px); color: #545454; font-size: .9em; font-weight: bold; line-height: 2; } #WebsiteHeader .full-header #HeaderMain .free-shipping > span { vertical-align: middle; } #WebsiteHeader .full-header #HeaderMain .free-shipping .question { color: #8B9198; content: '\f29c' !important; font-family: icomoon !important; cursor: pointer; } #WebsiteHeader .full-header #HeaderMain .free-shipping span + span::before { content: "|"; padding: 0 3px; } #WebsiteHeader .full-header #HeaderMain .free-shipping .shipping-modal { display: none; font-size: 1em; text-align: left; border: 1px solid #CCC; background: #FFF; width: 100%; height: 170px; padding: 15px; max-width: 420px; min-width: 350px; box-shadow: 30px 40px 90px -10px rgba(0, 0, 0, 0.25); } #WebsiteHeader .full-header #HeaderMain .free-shipping .shipping-modal.show { display: block; position: absolute; float: left; z-index: 100; left: 50%; top: 0; transform: translate(-50%, 25px); } #WebsiteHeader .full-header #HeaderMain .free-shipping .shipping-modal li { font-size: 14px; } #WebsiteHeader .full-header #HeaderMain .free-shipping .shipping-modal li + li { padding: 10px 0 0 0 ; } #WebsiteHeader .full-header #HeaderMain .free-shipping .shipping-modal .note { font-size: 11px; padding: 0; bottom: 10px; position: absolute; font-weight: normal; } #WebsiteHeader .full-header #HeaderMain .search-wrapper { margin: 0; order: 2; flex: 0 0 50px; width: calc(100% - 490px); max-width: 460px; align-self: center; } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { margin: 0 0 0 20px; order: 3; flex: 0 0 60px; width: 220px; display: flex; } /*#WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper > div { border: 1px solid #efefef; } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper > div > div { border: 1px solid #efefef; }*/ #WebsiteHeader .full-header #Logo { flex: 0 0 100%; height: auto; } #WebsiteHeader .full-header #Logo a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-start; transition: all 0.075s ease-out; } #WebsiteHeader .full-header #Logo a > img { max-width: 100%; max-height: 100%; width: auto; height: auto; position: relative; align-self: center; } #WebsiteHeader .full-header #HeaderMain .search-wrapper form { width: 100%; } #WebsiteHeader .full-header #Search { width: 100%; height: 40px; background-color: #FFF; display: block; max-height: 100%; min-height: 30px; position: relative; } #Search > .keyword-search { width: 100%; height: 100%; } #Search > .keyword-search::before {display: none;} #Search .header-search {border: 1px solid rgba(175, 203, 255, 1);border-radius: 3px;display: flex;align-items: center;height: 100%;} #Search .header-search.focused, #Search .header-search.focused:hover {border-color: rgba(13, 82, 214, 1);} #Search .header-search input {width: 100%;height: 100%;border-radius: 0;border: 0;-webkit-box-shadow: none;box-shadow: none;background: white !important;padding: 0 12px;} #Search .header-search input:focus {-webkit-box-shadow: none;box-shadow: none; } #Search .header-search > * {-webkit-box-ordinal-group: 6;-ms-flex-order: 5;order: 5;} #Search .header-search > input {border-top-left-radius: 0;border-bottom-left-radius: 0;border-top-right-radius: 0;border-bottom-right-radius: 0;} #Search .header-search > input:first-child {border-top-left-radius: inherit;border-bottom-left-radius: inherit;border-top-right-radius: 0;border-bottom-right-radius: 0;} #Search .header-search .search-categories {height: 100%;display: flex;align-items: center;-webkit-transition: all 0.075s ease-out;transition: all 0.075s ease-out;background-color: var(--thematic-blue);border-top-left-radius: inherit;border-bottom-left-radius: inherit;border-top-right-radius: 0;border-bottom-right-radius: 0;} #Search .header-search .search-categories:hover {background: var(--thematic-blue-hover);} #Search .header-search .search-categories-button, #Search .header-search .search-categories-button > a {color: rgba(223, 231, 246, 1);} #Search .header-search .search-categories-button {padding: 0 10px;position: relative;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 150px;border-top-left-radius: inherit;border-bottom-left-radius: inherit;display: flex;align-items: center;cursor: default;} #Search .header-search .search-categories-button a {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} #Search .header-search .search-categories-button::after {position: relative;margin-left: 7px;content: "\f0dc";font-size: 11px;font-family: icomoon;} #Search .header-search .search-categories:hover .search-categories-button {color: rgba(255, 255, 255, 1);} #Search .header-search .search-categories-button::after {content: "\f0d7" !important;font-family: icomoon !important;top: 1px;} #Search .header-search .search-categories.drop-menu > .j-dropdown {left: 0;right: auto;transform: translate3d(0, -10px, 0);} #Search .header-search .search-categories.drop-menu.animating > .j-dropdown {left: 0;right: auto;transform: none;} #Search .header-search .search-categories.drop-menu > .j-dropdown::before {left: 10px;right: auto;transform: translateX(0);} #Search .header-search .search-categories.dropdown .j-menu .dropdown > a::after {display: block;} #Search .header-search .search-categories.dropdown .j-menu > li > a {font-size: 14px;color: rgba(58, 71, 84, 1);font-weight: 400;background: rgba(255, 255, 255, 1);padding: 10px;padding-left: 15px;} #Search .header-search .search-categories.dropdown .j-menu .links-text {white-space: normal;overflow: visible;text-overflow: initial;} #Search .header-search .search-categories.dropdown .j-menu > li > a::before {margin-right: 7px;min-width: 20px;font-size: 18px;} #Search .header-search .search-categories.dropdown .j-menu > li:hover > a, #Search .header-search .search-categories.dropdown .j-menu > li.active > a {background: rgba(240, 242, 245, 1);} #Search .header-search .search-categories.dropdown .j-menu > li > a {border-style: none;} #Search .header-search .search-categories.dropdown:not(.mega-menu) .j-dropdown {min-width: 200px;} #Search .header-search .search-categories.dropdown:not(.mega-menu) .j-menu {box-shadow: 30px 40px 90px -10px rgba(0, 0, 0, 0.2);} #Search .header-search .search-categories.dropdown .j-dropdown::before {display: block;border-bottom-color: rgba(255, 255, 255, 1);margin-left: 7px;margin-top: -10px;} #Search .header-search .search-categories .j-menu::before {margin-top: -10px;} #Search .header-search > .search-input {border-top-left-radius: 0;border-bottom-left-radius: 0;border-top-right-radius: 0;border-bottom-right-radius: 0;flex-grow: 1;width: 100%;height: 100%;position: static !important;} #Search .header-search > .search-input .tt-hint {display: none;} #Search .header-search > .search-input .tt-menu {width: 100%;} #Search .header-search > .search-input .tt-menu > div {box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);border-radius: 3px;} #Search .header-search > .search-input .tt-menu > div {max-height: 350px;overflow-y: auto;background-color: white;margin-left: auto;} #Search .header-search > .search-input .tt-menu > div > div > a {-webkit-transition: all 0.075s ease-out;transition: all 0.075s ease-out;} #Search .header-search > .search-input .tt-menu:not(.tt-empty)::before {display: block;margin-top: -10px;left: 100%;transform: translateX(-150%);} #Search .header-search > .search-input .tt-menu:not(.tt-empty)::before {content: "";width: 0;height: 0;border: 10px solid transparent;border-bottom-color: white;left: 100%;-webkit-transform: translateX(-150%);transform: translateX(-150%);} #Search .header-search > .search-input input {border-radius: inherit;} #Search .header-search > .search-input:first-child {border-top-left-radius: inherit;border-bottom-left-radius: inherit;border-top-right-radius: 0;border-bottom-right-radius: 0;} #Search .header-search .search-button {padding: 0;min-width: 40px;height: 100%;border-radius: 0;font-size: 20px;background-color: var(--thematic-blue);order: 5;border-top-left-radius: 0;border-bottom-left-radius: 0;border-top-right-radius: inherit;border-bottom-right-radius: inherit;} #Search .header-search .search-button:hover {background: var(--thematic-blue-hover);} #Search .header-search > .search-button::before {content: "\f002" !important;font-family: icomoon !important;font-size: 20px;color: rgba(223, 231, 246, 1);top: -1px;} #Search .header-search > .search-button:hover::before {color: rgba(255, 255, 255, 1) !important;} #Search .header-search .search-categories .j-dropdown div {overflow: hidden;} #Search .header-search .search-categories .j-dropdown ul {max-height: 350px;width: 200px;overflow-y: auto;overflow-x: hidden;border-radius: inherit;-webkit-overflow-scrolling: touch;} #Search .header-search .search-categories .j-dropdown ul > li {font-size: 13px;width: 100%;white-space: normal;overflow: hidden;text-overflow: ellipsis;cursor: pointer;position: relative;} #Search .header-search .search-categories .j-dropdown ul > li a {cursor: pointer;padding-left: 15px;} #Search .header-search .search-categories .j-dropdown ul > li.category-level-1 a::before {display: none;} #Search .header-search .search-categories .j-dropdown ul > li.category-level-4 a {padding-left: 35px;} #Search .header-search .search-categories .j-dropdown ul > li.category-level-3 a {padding-left: 25px;} #Search .header-search .search-categories .j-dropdown ul > li.category-level-2 a {padding-left: 15px;} #Search .search-results-empty {padding: 10px 15px;} .search-result .product-name {font-weight: 700;} .search-result > a > span {justify-content: flex-start;} .search-result.view-more a::after {content: "\e5c8" !important;font-family: icomoon !important;} .search-result {position: relative;} .search-result > a {padding: 8px;display: flex;border-width: 1px 0 0 0;color: #555;font-size: 14px;} .search-result > a > span {-ms-flex: 1;flex: 1;padding: 0 5px 5px 10px;display: flex;flex-direction: column;} .search-result:first-child > a {border-top-width: 0;} .search-result .button-group {-ms-flex-item-align: center;align-self: center;margin-left: auto;display: none;} .search-result .product-name {color: #444;line-height: 1.2;margin-bottom: 2px;} .search-result .product-name + span {display: flex;align-items: center;} .search-result .price-new {position: relative;-webkit-box-ordinal-group: 0;-ms-flex-order: -1;order: -1;} .search-result .price-old {font-size: 80%;padding: 1px 3px;border-radius: 3px;margin: 0 5px;} .search-result.view-more a {padding: 8px 15px;} .search-result.view-more a::after {margin-left: 5px;} #AccountLogin .account-items { flex: 0 0 100%; display:flex; justify-content: space-between; flex-direction: row; } #AccountLogin .account-items .account-item-1 { position: relative; flex: 0 0 45px; } #AccountLogin .account-items .account-item-2 { position: relative; flex: 0 0 45px; } #AccountLogin .account-items .account-item-3 { position: relative; flex: 0 0 45px; font-size: .9em; } #AccountLogin .account-items .account-item-4 { position: relative; flex: 0 0 45px; font-size: .9em; } #AccountLogin .account-items .account-item a { text-align: center; font-size: .9em; color: #545454; width: 100%;height: 100%;max-height: 100%; display: flex; flex-direction: column; align-items:center; justify-content:center; transition: color 0.1s ease-out, background-color 0.1s ease-out; } #AccountLogin .account-items .account-item a:focus, #AccountLogin .account-items .account-item a:hover {color: #262626;text-decoration: none;background-color: #f5f5f5;} #AccountLogin .account-items .account-item a::before { color: rgba(105, 105, 115, 1); margin: 0px; margin-bottom: 2px; font-size: 2em; } #AccountLogin .account-items .account-item-1 a::before { content: "\ead9" !important;font-family: icomoon !important; } #AccountLogin .account-items .account-item-2 a::before { content: "\e90d" !important;font-family: icomoon !important; } #AccountLogin .account-items .account-item-3 a::before { content: "\e90c" !important;font-family: icomoon !important; } #AccountLogin .account-items .account-item-4 a::before { content: "\f0a9" !important;font-family: icomoon !important; } #AccountLogin .account-items .account-item-1 a > .links-text {display: block;white-space: normal;overflow: visible;text-overflow: initial;} #AccountLogin #Cart { flex: 0 0 calc(100% - 90px); display:flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-end; transition: all 0.05s ease-out;} #AccountLogin #Cart .cart-heading { flex: 0 0 100%; display: flex; align-items: center; flex-direction: row; justify-content: flex-end; gap: 5px; position: relative; background-color: transparent; transition: all 0.05s ease-out;max-height: 100%; } #AccountLogin #Cart .cart-heading:hover { color: inherit;} #AccountLogin #Cart > .cart-heading > i { flex: 0 0 40px; order: 0; height: 40px; background: var(--thematic-blue); border-radius: 3px; display: flex;align-items: center;justify-content: center;flex-direction: column; transition: all 0.05s ease-out; font-size: 1.5em;max-height: 100%; } #AccountLogin #Cart > .cart-heading > i span { flex:1; position: relative; font-size: .9em;padding: 0 5px; transition: all 0.05s ease-out; } #AccountLogin #Cart > .cart-heading > i::before { content: "\e904";font-family: "icomoon"; transition: all 0.1s ease; font-size: 24px; color: rgba(255, 255, 255, 1); left: 1px; top: -1px; } #AccountLogin #Cart > cart-heading::after { display: none !important;} #AccountLogin #Cart #CartTotal { flex: 0 0 calc(100% - 55px); display: flex; flex-flow: column; align-items: flex-start; font-size: .9em; color: #545454; order: 1; white-space: nowrap; } #AccountLogin #Cart .cart-label { display: inline-block;color: rgba(240, 242, 245, 1);} #AccountLogin #Cart:hover > a > i { background: var(--thematic-blue-hover); } #AccountLogin #Cart:hover #CartTotal { color: var(--thematic-blue-hover); } #CartItemsCount {z-index: 1;top: 0;right: 0;margin: 0;position: absolute; transform: translateX(5px);margin-top: -7px;display: none;} /******** Main Menu Bar *********/ #MainMenu { flex: 0 0 40px; top: -40px; display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; } #MainMenu::before { content: ""; position: absolute; width: 100vw; left: 50%; margin-left: -50vw; bottom: 0; z-index: -1; background-color: var(--thematic-blue); height: 40px; } #MainMenu .main-menu { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; } #MainMenu .main-menu-links { flex: 0 0 calc(100% - 220px); margin-left: -10px; order: 0; } #MainMenu .main-menu .j-menu { flex: 0 0 100%; display: flex; align-items: center; flex-wrap: wrap; height: 100%; list-style: none; margin: 0; padding: 0; position: relative; } #MainMenu .main-menu .main-menu-item { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; position: relative; height: 40px; } #MainMenu .main-menu .main-menu-item > a { flex: 0 0 100%; cursor: pointer; font-weight: bold; font-size: 1em; color: #FFFFFF; text-transform: uppercase; padding: 0 10px; display: flex; justify-content: center; align-items: center; } #MainMenu .main-menu .main-menu-item > a .links-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #MainMenu .main-menu .main-menu-item > a::before { margin-right: 5px; font-size: 1.2em; } #MainMenu .main-menu .main-menu-item > a:hover, #MainMenu .main-menu .main-menu-item > a:active , #MainMenu .main-menu .main-menu-item > a:focus { outline: none; color: #333333; background: rgba(255, 255, 255, 1); } #MainMenu .main-menu .main-menu-item:first-of-type { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } #MainMenu .main-menu .main-menu-item:first-of-type > a { border-left-width: 0; border-radius: inherit; } #MainMenu .main-menu .main-menu-item:last-of-type { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } #MainMenu .main-menu .main-menu-item:last-of-type > a { border-right-width: 0; border-radius: inherit; } #MainMenu .main-menu .main-menu-item.dropdown > a::after { transform: rotate(90deg); margin: 0 5px; } #MainMenu .main-menu .open-menu {display: none;} #MainMenu .main-menu-links > .j-menu > .dropdown > .dropdown-menu { background-clip: padding-box; background-color: transparent; border-radius: 0; display: none; float: left; font-size: 1em; left: 0; list-style: none; margin: 0; min-width: 160px; opacity: 0; padding: 0; position: absolute; right: auto; text-align: left; top: 100%; transform-origin: 50% 0; z-index: 1000; } #MainMenu .main-menu-links > .j-menu > .dropdown > .dropdown-menu::before { left: 10px; right: auto; transform: translateX(0); } #MainMenu .main-menu-links > .j-menu > .dropdown.mega-menu > .dropdown-menu { width: 97vw; } #MainMenu .main-menu-links .vendor-dropdown { position: static; } #MainMenu .main-menu-links .vendor-dropdown .mega-menu-content { max-width: 1024px; position: relative; left: 0; transform: none; border: 1px solid #ccc; background: #FFFFFF; box-shadow: 30px 40px 90px -10px rgba(0, 0, 0, 0.25); } /*max-height: calc(100vh - 100px);*/ #MainMenu .main-menu-links > .j-menu > .first-dropdown::before {display: block !important;background-color: rgba(0, 0, 0, 0.5);} #MainMenu .main-menu-links > .j-menu > .first-dropdown::before {z-index: 0;position: absolute;width: 100%;height: calc(100vh - 60px);top: 100%;left: 0;pointer-events: none; animation: overlay 0.3s ease; opacity: 0; visibility: hidden; transition: all 0.15s 0.15s ease-in-out; content: ""; display: none; } #MainMenu .main-menu-links > .j-menu > .first-dropdown::before { transform: translateX(calc(0px - (100vw - 1280px) / 2)); } #MainMenu .main-menu-links > .j-menu > .first-dropdown.vendor-dropdown::before { width: 200vw; } #MainMenu .main-menu-links > .j-menu > .first-dropdown.vendor-dropdown::before {transform: translateX(calc(0px - (200vw - 1280px) / 2));} #MainMenu .main-menu-links .product-grid {display: flex;flex-wrap: wrap;padding: 5px;} #MainMenu .main-menu-links .product-grid .product-layout {padding: 10px;width: calc(100% / 6 - 0.01px);display: flex;position: relative;} #MainMenu .main-menu-links .product-grid .product-layout:hover {z-index: 2;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb {display: flex;flex-direction: column;flex-grow: 1;min-width: 0;position: relative;-webkit-transition: all 0.075s ease-out;transition: all 0.075s ease-out;overflow: hidden;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb:hover {z-index: 1;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb .image {height: 100%;position: relative;overflow: hidden;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb .image::before {content: "";position: absolute;width: 100%;bottom: 0;height: 100%;pointer-events: none;z-index: 1;-webkit-transition: all 0.01s ease-out;transition: all 0.01s ease-out;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb .product-img {display: block; border: 1px solid #e2e2e2;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb .product-img > div {position: relative;display: flex;align-items: center;justify-content: center;-webkit-transition: all 0.25s ease-out;transition: all 0.25s ease-out;padding: 7px;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb .product-img img {border-radius: 5px;pointer-events: none;-webkit-transition: all 0.2s ease-out;transition: all 0.2s ease-out;width: 100%;height: auto;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb:hover .product-img {border-color: var(--thematic-blue-hover);} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb:hover .product-img > div {transform: scale(1.12);} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb .caption {display: flex;flex-direction: column;flex-grow: 1;position: relative;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb .name {display: flex;width: 100%;max-width: 100%;justify-content: flex-start;align-items: center;margin-left: 0;margin-right: auto;margin-top: 5px;font-size: 14px;font-weight: 400;line-height: 1.3;} #MainMenu .main-menu-links .product-grid .product-layout .product-thumb .name a {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 600;font-size: 12px;color: #333333;text-align: left;} /**** Customer Support ****/ #MainMenu .main-menu-links .customersupport .dropdown-menu { width: 280px; left: 50%;margin-left: -50vw; border: 1px solid #ccc; box-shadow: 30px 40px 90px -10px rgba(0, 0, 0, 0.25); } #MainMenu .main-menu-links .customersupport .dropdown-menu {padding-top: 0;} #MainMenu .main-menu-links .customersupport .dropdown-menu::before {display: none;} #MainMenu .main-menu-links .main-menu-item-link.mega-menu .grid-row-1 {padding: 10px;} #MainMenu .main-menu-links .main-menu-item-link.mega-menu .grid-row-1::before {display: block;left: 0;width: 100vw;} #MainMenu .main-menu-links .main-menu-item-link.mega-menu .grid-row-1 .grid-col-1 {width: 80%;padding: 10px;} #MainMenu .main-menu-links .main-menu-item-link.mega-menu .grid-row-1 .grid-col-1 .grid-items {justify-content: flex-start;} #MainMenu .main-menu-links .customersupport .mega-menu-content { padding: 10px; background: #FFFFFF; } #MainMenu .main-menu-links .customersupport .mega-menu-content li { padding: 10px 0; } #MainMenu .main-menu-links .customersupport .mega-menu-content li.links-menu-item-shopping > a::before {content: "\ebb5" !important;font-family: icomoon !important;margin-right: 5px;} #MainMenu .main-menu-links .customersupport .mega-menu-content li.links-menu-item-shipping > a::before {content: "\eab9" !important;font-family: icomoon !important;margin-right: 5px;} #MainMenu .main-menu-links .customersupport .mega-menu-content li.links-menu-item-warranty > a::before {content: "\f1da" !important;font-family: icomoon !important;margin-right: 5px;} #MainMenu .main-menu-links .customersupport .mega-menu-content li.links-menu-item-rewards > a::before {content: "\e263" !important;font-family: icomoon !important;margin-right: 5px;} #MainMenu .main-menu-links .customersupport .mega-menu-content li.links-menu-item-help > a::before {content: "\eb1d" !important;font-family: icomoon !important;margin-right: 5px;} #MainMenu .main-menu-links .customersupport .mega-menu-content li.links-menu-item-about > a::before {content: "\e942" !important;font-family: icomoon !important;margin-right: 5px;} #MainMenu .main-menu-links .customersupport .mega-menu-content li.links-menu-item-6 > a::before {content: "\e984" !important;font-family: icomoon !important;margin-right: 5px;} #MainMenu .main-menu-links .customersupport .mega-menu-content li.links-menu-item-7 > a::before {content: "\e901" !important;font-family: icomoon !important;margin-right: 5px;} /************************/ #MainMenu .main-menu-links > .j-menu > .open > #tonermenu {display: block;left: 0;right: auto;transform: none;} #MainMenu .main-menu-links > .j-menu > .open > #inkmenu {display: block;left: 0;right: auto;transform: none;} #MainMenu .main-menu-links > .j-menu > .open > #customersupport {display: block;transform: none;} #MainMenu .main-menu-links > .j-menu > .animating > .dropdown-menu { width:270px; left: 0; right: auto; opacity: 1; transition: transform 0.1s ease-out, opacity 0.1s ease-out, visibility 0.1s ease-out; } #MainMenu .main-menu-phone { flex: 0 0 240px; gap: 9px; order: 1; } #MainMenu .main-menu-phone > div { flex: 0 0 auto; display: flex; flex-direction: row; justify-content: center; height: 100%; } #MainMenu .main-menu-phone .phone > a, #MainMenu .main-menu-phone .hours { color: #FFF; text-transform: uppercase; } #MainMenu .main-menu-phone .phone > a::before { margin-right: 1px;content: "\eb97" !important; font-family: icomoon !important; font-size: 12px; font-weight:normal; line-height: 1;} #MainMenu .main-menu-phone .phone > a:focus { outline-offset: 0; } #MainMenu .rewards-learn-more-modal { max-height:300px; width: 300px; transform: translateY(15px); } #MainMenu .main-menu-item.rewards a .question::after { color: #40c8ff; margin: 0 0 0 3px; padding: 0; font-weight: normal; } #MainMenu .main-menu-item.rewards .hover { opacity: 0; } #MainMenu .main-menu-item.rewards.show .hover { box-shadow: 30px 40px 90px -10px rgba(0, 0, 0, 0.25);display: block; top: 25px; right: 0; opacity: 1; transition: transform 0.1s ease-out, opacity 0.1s ease-out, visibility 0.1s ease-out; } #MainMenu .main-menu-item.rewards.show .hover ul { list-style: circle; padding: unset; margin: 10px; padding-left: 20px; } /*#ShopNotice { max-width: 1000px; width: calc(100% - 20px); text-align:left; padding:4px; color: #8a6d3b; background-color: #fcf8e3; border: 1px solid #faebcc; margin: 10px auto 0 auto; }*/ #ShopNotice { display: none; max-width: 1000px; width: calc(100% - 20px); text-align:center; padding: 0 2px; color:#333; background-color: #ffcee4; border: 1px solid #be266b; margin: 10px auto 0 auto; font-size: 1em; } #ShopNotice .shop-notice-module { display: flex; align-content: center; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: row; height: 60px; } #ShopNotice img { height: 30px; width: auto; align-self: center; } #ShopNotice img.new-logo { margin-top: -10px; } #ShopNotice .notice { flex: 0 0 calc(100% - 35px); display: flex; align-content: center; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: row; gap: 4px; line-height: 1; } #ShopNotice .shop-notice-module .notice::before { content: "\e001" !important;font-family: icomoon !important; font-size: 20px; color: #be266b; height: 20px; line-height: 1; } #ShopNotice .sn-close { flex: 0 0 30px; height: 60px; display: flex; } #ShopNotice .sn-close .btn-sn-close { font-size: 12px; text-transform: none; margin: 0; padding: 5px; color: #545454; } #ShopNotice .sn-close .btn-sn-close:hover, #ShopNotice .sn-close .btn-sn-close:active, #ShopNotice .sn-close .btn-sn-close:focus { color: #333 !important; font-weight: bold; } #ShopNotice .sn-close .btn-sn-close::before { color: inherit; content: '\e5cd' !important; font-family: icomoon !important; font-size: 22px; } /************************************************************************************************************************************/ /************************* HOMEPAGE ********************************************************************/ #Homepage { background: rgba(255, 255, 255, 1); padding: 20px 0px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 30px; } /********************* HOMEPAGE - MASTER BANNER MODULE ********************************/ #Homepage-Main { width: 100%; flex: 0 0 100%; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; gap: 0; } #Main-Banners { flex: 0 0 calc(100% - 300px); display: flex; justify-content: flex-start; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; height: 280px; } #Main-Banners .main-banner { max-width: 100%;height: 100%; flex: 0 0 100%;position: relative; } #Homepage-Main:not(.coupon) #Main-Banners .main-banner { max-width: 100%;height: 100%; flex: 0 0 100%;position: relative; background-image:url('/Content/Assets/Images/Theme/RotatingBanners/modern-printer-office-supplies-800x280-v2.1.jpg'); background-repeat: no-repeat; background-size: cover; background-position: left bottom; } #Main-Banners .main-banner .main-text { display:none; text-align: center; margin-top: 20px; width: 90%; margin: 42px auto 0 auto; } #Main-Banners .main-banner .main-text h2 { font-size: 60px; text-transform: uppercase; color: #3fb6ff; text-shadow: 1px 2px 5px #333; } #Main-Banners .main-banner .main-text p { font-weight: bold; font-size: 1.5em; color: #fff; text-shadow: 2px 2px 5px #333; } #Main-Bottom { flex: 0 0 100%; display: flex; justify-content: center; margin: 10px 0 -10px 0; padding: 0 10px; } #Main-Bottom .main-banner { flex: 0 0 100%; margin: 5px auto 0 auto; } #Main-Bottom .main-banner .main-text { text-align: center; } #Main-Bottom .main-banner .main-text h1 { font-size: 50px; margin: 0; padding: 0; color: #11a5e0; } #Main-Bottom .main-banner .main-text p { font-weight: bold; font-size: 1.3em; color: #333; margin: 0; padding: 0; } /********************************************************************/ /******************* HOMEPAGE - Coupon Themes *****************/ #Homepage-Main.coupon { justify-content: center; } #Main-Top { flex: 0 0 100%; margin-top: -20px; display: flex; justify-content: center; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; } #Homepage-Main.coupon #Main-Banners { flex: 0 0 calc(100% - 300px); max-width: 600px; height: 310px; margin-right: 15px; } #Homepage-Main.coupon #Main-Banners .main-banner { flex: 0 0 100%; display: flex; justify-content: center; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; } #Homepage-Coupon { position: relative; flex: 0 0 100%; display: flex; justify-content: center; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; } #Homepage-Coupon > div { flex: 0 0 100%; line-height: 1; } #Homepage-Coupon .coupon-image { } #Homepage-Coupon .coupon-image img { height: 100%; } #Homepage-Coupon .coupon-text { margin: 0; padding: 0; position: absolute; top: calc(50% - 45px); } #Homepage-Coupon .coupon-code { width: 100%; max-width: 300px; height: auto; border: 1px solid var(--thematic-blue); background-color: rgba(255,255,255,.8); padding: 15px; margin: 0 auto; text-align: center; display: flex; justify-content: center; align-content: space-between; align-items: flex-start; flex-flow: wrap; flex-direction: row; gap: 15px; } #Homepage-Coupon .coupon-code > div { flex: 0 0 100%; } #Homepage-Coupon .coupon-code .discount-title { font-size: 1.3em; font-weight: bold; color: #005bcc; } #Homepage-Coupon .coupon-code .astr { font-size: .8em; } #Homepage-Coupon .coupon-code .code-text { font-size: 1em; margin-bottom: 0; line-height: 1; } #Homepage-Coupon .coupon-code .code-name { font-size: 1.3em; font-weight: bold; color: red; } #Homepage-Coupon .coupon-expiry { text-align: center; margin-top: 0; line-height: 1; } #Homepage-Coupon .coupon-expiry span { font-size: .8em; color: #8B9198; } #Homepage-Coupon .coupon-legal { text-align: left; font-size: .8em; color: #8B9198; margin-top: 5px; padding-left: 11px; text-indent: -.8em; } /********************************************************************/ /****** Homepage/Category/Vendor/Silo Page *******/ #RightBanners { flex: 0 0 300px; display: flex; justify-content: flex-start; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; } #RightBanners #VendorSearch { max-width:300px; } #VendorSearch { background-color:#FFFFFF; min-width: 300px; flex: 0 0 100%; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } #VendorSearch .model-finder { flex: 0 0 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;flex-flow: row;flex-wrap: nowrap; } #VendorSearch .vendor-image { text-align:center;flex: 1 1 200px;max-width: 300px;min-width: 200px; } #VendorSearch .vendor-image h3 { margin: 0; padding: 0; } #VendorSearch .vendor-image img { width: 90%; } #VendorSearch .vendorContent { flex: 0 1 100%; max-width: 400px; min-width: 250px; display: flex; flex-direction: row; justify-content: center; align-items: stretch; } #VendorSearch .vendorContent .vendorModelSearch { flex: 0 0 100%; background-color: #be266b; padding: 15px; border: 2px solid #900c48; height: 230px; display: flex; flex-direction: row; justify-content: center; align-content: space-around; flex-wrap: wrap; } #VendorSearch .vendorContent .vendorModelSearch .vendorTitle { flex: 0 0 100%; text-align: center; margin-bottom: 10px; } #VendorSearch .vendorContent .vendorModelSearch .finder-text { padding: 0; display:flex; justify-content: flex-start; align-content: center; align-items: center; flex-wrap: wrap; flex-direction: row; gap: 20px; } #VendorSearch .vendorContent .vendorModelSearch h3 { font-size: 26px; margin: 0;color: #FFF; } #VendorSearch .vendorContent .vendorModelSearch .subtext { flex: 0 0 100%; color: #fda5cd; text-align:center; margin: 0; font-size: .9em; } #VendorSearch .vendorContent .vendorModelSearch form { flex: 0 0 100%; display: flex; flex-direction: row; justify-content: center; align-content: flex-start; } #VendorSearch .vendorContent .vendorModelSearch .vendorInput { flex: 0 0 100%; position: relative; } #VendorSearch .vendorContent .vendorModelSearch .vendorInput .feedback { width: auto; top: 6px; right: 3px; position: absolute; display: none; background: #FFF; font-size: .9em; color: #545454; padding-right: 5px; } #VendorSearch .vendorContent .vendorModelSearch .vendorInput select { width: 100%; height: 40px; padding-left: 10px; } #VendorSearch .vendorContent .vendorModelSearch .vendorSubmit button { text-align:center;font-size: 1em; width: 100%; height: 50px; } #VendorSearch .vendorContent .vendorModelSearch .keywordHint { font-size:70%;color:#AAA;display:block; } #VendorSearch .vendorContent #KeywordResultsWrapper { margin-left: 204px; } #RightBanners #VendorSearch .vendorContent .vendorModelSearch { height: 280px; } #RightBanners #VendorSearch .vendorContent .vendorModelSearch h3 { margin-bottom: 0; } #Homepage-ValueProps { flex: 0 0 100%; display: flex; justify-content: flex-start; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; } #Homepage-ValueProps .module-body { flex: 0 0 100%; display: flex;flex-wrap: wrap; grid-gap: 10px; } #Homepage-ValueProps .module-body .module-item {padding: 0px;width: calc(100% / 4 - 8.01px);} #Homepage-ValueProps .module-body .info-block { background: #F0F2F5; padding: 15px 10px; display: flex;flex-direction: row; justify-content: flex-start; text-align: left; position: relative; height: 100%; grid-gap: 10px; } #Homepage-ValueProps .module-body .info-block::before { align-self: center; width: 60px; height: 60px; font-size: 30px; color: var(--thematic-yellow); border-width: 2px; border-style: solid; border-color: var(--thematic-blue); border-radius: 50%; display: flex;align-items: center;justify-content: center;-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;line-height: 1;text-align: center;} #Homepage-ValueProps .module-body .module-item-1 .info-block::before { content: "\eab9" !important; font-family: icomoon !important; } #Homepage-ValueProps .module-body .module-item-2 .info-block::before { content: "\e980" !important; font-family: icomoon !important; } #Homepage-ValueProps .module-body .module-item-3 .info-block::before { content: "\f08a" !important; font-family: icomoon !important; } #Homepage-ValueProps .module-body .module-item-4 .info-block::before { content: ""; background: url(/Content/Assets/Images/Theme/Credentials/bizrate-logo.png) no-repeat center center/cover; border: none; } #Homepage-ValueProps .module-body .info-block .info-block-content { display: flex; flex-direction: column; justify-content: center;} #Homepage-ValueProps .module-body .info-block .info-block-title { font-weight: bold; font-size: 1.1em; color: #333333; display: block; line-height: 1.2; } #Homepage-ValueProps .module-body .info-block .info-block-text { font-size: .9em; color: #333333; line-height: 1.3; display: block;} #Homepage .title-module, #Homepage .content-module { margin: 0; flex: 0 0 100%; display: flex;flex-direction: row;justify-content: flex-start; align-items: center; align-content:center; } #Homepage .title-module h2 { text-align:center; } #Homepage .title-module .content { font-size: 1em; color: #8B9198; max-width: 980px; margin: 0 auto;} #Homepage .title-module .title-divider {display: block;max-width: 50px;height: 2px;background: var(--thematic-yellow);margin: 15px auto;} #Homepage .title-module .title-divider::before {line-height: 0;position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);} #Homepage .title-module .title-wrapper {position: relative;margin: 0 auto;text-align: left;} #Homepage .title-module .title-wrapper::before {opacity: 0.05;display: block;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} #Homepage .content-module { padding: 0; } #Homepage .content-module .content { margin: 0; flex: 0 0 100%; } #Homepage-CustomerReviews { flex: 0 0 100%; display: flex; flex-direction: row;justify-content: flex-start; align-items: center; align-content:center; flex-wrap: wrap; gap: 15px; max-width: 1100px; margin: 0 auto; } #Homepage-CustomerReviews .grid-items { flex: 0 0 100%; display: flex; flex-direction: row;justify-content: flex-start; align-items: center; align-content:center; flex-wrap: wrap; } #Homepage-CustomerReviews .grid-items .grid-item { flex: 0 0 100%; display: flex; flex-direction: row;justify-content: flex-start; align-items: center; align-content:center; flex-wrap: wrap; } #Homepage #Homepage-CustomerReviews .title-module .title-divider { margin-bottom: 0; } #Homepage-CustomerReviews .review-count { flex: 0 0 100%; text-align: center; margin-bottom: 0; color: #333; font-size: 1.2em; } #Homepage-CustomerReviews .review-count span { font-weight: bold; font-size: 1.2em; } #Homepage-CustomerReviews .module-customer-reviews { flex: 0 0 100%; display: flex;flex-direction: row;justify-content: flex-start; align-items: center; align-content:center; padding: 0; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget { flex: 0 0 100%; height: 180px; display: flex; position: relative; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav { flex: 0 0 40px; display: flex; align-items: center; cursor: pointer; padding: 0 10px; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav i { border: 1px solid #F0F2F5; border-radius: 50%; padding: 6px; background-color: #F0F2F5; height: 30px; width: 30px; font-size: 1.2em; text-align: center; color: #FFF; vertical-align: middle; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav.right-arrow, #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav.left-arrow { } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav.right-arrow:hover i, #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav.left-arrow:hover i { background-color: rgba(105, 105, 115, 1); } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav.left-arrow { order: 0; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav.right-arrow { order: 2; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews { order: 1; flex: 0 0 calc(100% - 100px); padding: 0; display: flex; flex-direction: row; justify-content: space-between; gap: 10px; overflow: hidden; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review { display: none; flex: 0 0 calc(33% - 10px); flex-direction: row; justify-content: flex-start; gap: 10px; font-size: .9em; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review.show { display:flex; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-image { flex: 0 0 70px; display: flex; flex-direction: row; justify-content: center; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-image > img { align-self: center; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content { flex: 0 0 calc(100% - 80px); display: flex; flex-direction: column; align-content: stretch; gap: 5px; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content > div { flex: 0 0 auto; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content .review-title { font-weight:bold; order: 1; font-size: 1.1em; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content .review-rating { order: 0; color: gold; font-size: 1.5em; display: flex; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content .review-body { order: 2; flex: 0 0 90px; line-height: 18px; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content .review-product { order: 4; max-width: 180px; margin-bottom: -8px; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content .review-product a { font-size: .9em; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content .review-name { color:#8B9198; font-style:italic; font-size: 1em; order: 3; font-weight:bold; margin-bottom: -8px; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content .review-date { color:#8B9198; font-style:italic; font-size: .9em; order: 5; margin-bottom: -8px; } #Homepage-Rewards { flex: 0 0 100%; display: flex; justify-content: center; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; background: #F0F2F5; padding: 15px 0; position: relative; } #Homepage-Rewards .module-body { flex: 0 0 100%; max-width: 860px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; } #Homepage-Rewards .module-body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .10; background-image: url(/Content/Assets/Images/Theme/GiftCards/giftcard-fan-newlogo.png), url(/Content/Assets/Images/Theme/GiftCards/giftcard-fan-newlogo.png); background-repeat: no-repeat; background-size: 210px; background-position: right center, left center; } #Homepage-Rewards .module-body .module-item { flex: 0 0 100%; max-width: 860px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; flex-direction: row; gap: 5px; text-shadow: 0px 0px #333; } #Homepage-Rewards .module-body .module-item.module-item-2 .content-block { flex: 0 0 100%; display: flex; justify-content: center; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; gap: 10px; } #Homepage-Rewards .module-body .module-item.module-item-2 .content-block .info-block-text { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: nowrap; flex-direction: row; gap: 3px; line-height: 1; text-shadow: 0px 0px #333; } #Homepage-Rewards .module-body .module-item.module-item-2 .content-block .info-block-text i { font-size: .9em; color: #50AD55; width: 10px; height: 20px; text-align: right; line-height: 1.4; } #Homepage-Rewards .module-body .module-item .content-block .learn-more a { padding: 12px; } #Homepage-Vendors { flex: 0 0 100%; display: flex; justify-content: flex-start; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; } #Homepage-Vendors .product-models-links { flex: 0 0 100%; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; gap: 40px 10px; } #Homepage-Vendors .product-models-links .links { flex: 0 0 24%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content:space-between; height: 320px; min-width: 20%; } #Homepage-Vendors .product-models-links .links > div { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } #Homepage-Vendors .product-models-links .links .brand h3 { margin: 0; padding: 0; } #Homepage-Vendors .product-models-links .links .image { height: 100px; } #Homepage-Vendors .product-models-links .links .image img { width: 200px; display: block; margin: 0 auto; padding: 0; } #Homepage-Vendors .product-models-links .links .link-list a { flex: 0 0 100%; text-align: center; } #Homepage-Vendors .product-models-links .links .more-links { margin-top: 0px; flex: 0 0 100%; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } #Homepage-Vendors .product-models-links .links .more-links > div { flex: 0 0 100%; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } #Homepage-Vendors .product-models-links .links .more-links > div a { } #Homepage-Vendors .product-models-links .links .more-links > div + div { } #Homepage-Content { flex: 0 0 100%; display: flex; justify-content: flex-start; align-content: flex-start; align-items: flex-start; flex-flow: wrap; flex-direction: row; } #Homepage-Content .content-module .content { margin: 0 auto; flex: 0 0 100%; max-width: 1000px; } #SiteWrapper > h1.page-title > span {display: block;margin: 0 auto;} #SiteWrapper > h1.page-title::after {display: none !important;} #SiteWrapper .breadcrumb { padding: 10px; margin: 0 auto 0 auto; list-style: none; background-color: #FFFFFF; width: 100%; position: relative; text-align: left; white-space: nowrap; } #SiteWrapper .breadcrumb::before { background: rgba(255, 255, 255, 1); content: ""; position: absolute; width: 100vw; height: 100%; left: 50%; margin-left: -50vw; top: 0; z-index: -1; } #SiteWrapper .breadcrumb a { font-size: 12px; color: rgba(105, 105, 115, 1); } #SiteWrapper .breadcrumb a:focus { outline-offset: 0; } #SiteWrapper .breadcrumb > li { display: inline-block; position: relative; word-break: break-all;} #SiteWrapper .breadcrumb > li + li:before {padding: 0 5px; color: rgba(105, 105, 115, 1); content: "→";} #SiteWrapper .breadcrumb > li:last-of-type a { pointer-events: none; text-decoration: none; color: rgba(105, 105, 115, 1); } #SiteWrapper .breadcrumb > li:first-of-type a i::before {content: "\eb69" !important;font-family: icomoon !important;top: 1px;} /*****************************************************************************************************************************************************/ /******************* Sales Login Themes *****************/ #SalesLogin { width: 320px; margin: 0 auto; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 15px; } #SalesLogin .inputs { display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; margin-bottom:15px; } #SalesLogin .inputs > div { flex: 0 0 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } #SalesLogin .inputs > div:not(:last-child) { margin-bottom:15px; } #SalesLogin .inputs label { flex: 0 0 100px; text-align: right;font-size: 1em; padding: 0; margin: 0 5px 0 0; } #SalesLogin .inputs input[type=text], #SalesLogin .inputs input[type=password] { flex: 0 0 calc(100% - 115px); margin: 0; min-width: 175px; max-width: 260px; font-size: 14px; height: 30px; } #SalesLogin .button { text-align:center;margin-bottom:15px; } #SalesNotice .sales-notice-module { font-size:12px;padding:5px; margin: 0 auto; width: 100%; max-width: 1000px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #SalesNotice .sales-notice-module.hasCustomer { border: 1px solid #50AD55;background-color: #dcffed !important; } #SalesNotice .sales-notice-module.noCustomer { background-color: #ffe7e7; border: 1px solid #ffc7c6; } #SalesNotice .sales-notice-module .one { flex: 0 0 150px; } #SalesNotice .sales-notice-module .two { flex: 0 0 calc(100% - 515px); } #SalesNotice .sales-notice-module .three { flex: 0 0 365px; } #SalesNotice .sales-notice-module .customer, #SalesNotice .sales-notice-module .user { font-weight: bold; } p#SalesAdminPassword.error { margin: 0; font-size:12px; } #SalesCustomerSearch { width: 100%; max-width: 800px; margin: 0 auto; background: rgba(240,242,245, 1); padding: 10px; } #SalesCustomerSearch #CustomerSearch { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px; } #SalesCustomerSearch #CustomerSearch > .inputs { flex: 0 0 32%; } #SalesCustomerSearch #CustomerSearch > .inputs > div:not(:last-child) { margin-bottom:15px; } #SalesCustomerSearch #CustomerSearch > .inputs label { width: 80px; text-align: right;font-size: 14px; padding: 0; margin: 0 5px 0 0; } #SalesCustomerSearch #CustomerSearch > .inputs input[type=text], #SalesCustomerSearch #CustomerSearch > .inputs input[type=password] { margin: 0; width: calc(100% - 90px); font-size: 14px; height: 30px; } #SalesCustomerSearch #CustomerSearch > .inputs .button { text-align:center; } #CustomerSearchResults > div { font-size: 12px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CustomerSearchResults > div > .customerResult { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; margin: 0 0 10px 0; } #CustomerSearchResults > div > .customerResult > div { flex: 0 0 auto; margin-right: 5px; } #CustomerSearchResults > div > .customerResult > .customerid { flex: 0 0 60px; } #CustomerSearchResults > div > .customerResult > .email { flex: 0 0 200px; } /********************************************************************/ /******************* CUSTOMER SERVICE MAIN THEMES *****************/ #CategoryFooter .content > div#topLinks { margin-bottom:20px;display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: center; align-items: stretch; } #CategoryFooter .content > div#topLinks + div, #CategoryFooter .content > div#topLinks + div + div { justify-content: center; } #topLinks .contactLink, #topLinks .phoneLink, #topLinks .chatLink { flex: 1 1 230px; max-width: 230px; min-width: 190px; padding:8px;margin-right:10px; background-color:#FFF; border: 1px solid #DDD; } #topLinks .contactLink h2 { color:#CA2F10;margin:10px 0; } #topLinks .phoneLink h2 { color:var(--thematic-blue);margin:10px 0; } #topLinks .chatLink h2 { color:#6DBE45;margin:10px 0; } #topLinks .contactLink p, #topLinks .phoneLink p, #topLinks .chatLink p { } #topLinks .guarantee { font-weight:bold; color:#CA2F10; } #CategoryContent, #CategoryFooter { flex: 0 0 100%; padding: 20px; background: #FFF; border:1px solid #e2e2e2; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CategoryContent .content, #CategoryFooter .content, #CategorySection, #ContentSection { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CategoryContent .content .validationSummary { background-color: #FFE7E7;border: 1px solid #FFC7C6;padding:10px;color:#3B3B3B; margin-bottom: 15px; } #CategoryFooter .question::after { display: none; } #CategoryFooter .content div.clear { display:none;visibility:hidden; } #CategoryFooter .content > div, #CategoryFooter .content > h2, #CategoryFooter .content > h3, #CategoryFooter .content > h4 { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CategoryFooter .content > p { flex: 0 0 100%; } #CategoryFooter .content .helpCalloutHdg { } #CategoryFooter .content .helpCallout { display: block; margin: 0 0 15px 20px; } #CategoryFooter .content .helpCallout table { width: 400px; margin: unset !important; } #CategoryFooter .content .helpCallout table td img { margin-right: 5px; } #CategoryFooter .content .initReturn { margin-bottom: 10px; } #CategoryFooter .content .troubleNav a { margin-bottom: 10px; flex: 0 0 49%; text-align: center; } #CategoryFooter .aboutLinks, #CategoryFooter .shippingLinks, #CategoryFooter .troubleshootingTips, #CategoryFooter .shoppingLinks, #CategoryFooter .warrantyLinks, #CategoryFooter .rewardsLinks { flex: 1 1 33%;max-width: 350px; margin:0 7px 20px 0; } #CategoryFooter .content > div.faq-container { justify-content: center; } #CategoryFooter .shippingFAQs, #CategoryFooter .warrantyFAQs, #CategoryFooter .orderingFAQs, #CategoryFooter .troubleshootingFAQs { flex: 1 1 calc(50% - 10px);max-width: 500px; padding:0; margin:0 0 10px 0; } #CategoryFooter .shippingFAQs, #CategoryFooter .warrantyFAQs { margin-right: 10px; } #CategoryFooter .rewardsFAQs { margin-bottom: 20px; } #CategoryFooter .rewardsFAQs p { flex: 0 0 100%; } #CategoryFooter .returnInstructions, #CategoryFooter .returnPolicy, #CategoryFooter .techsupportLeft, #CategoryFooter .techsupportRight { padding:0; margin: 0; background-color:#FFF; } .shippingLinks h2,.shoppingLinks h2,.warrantyLinks h2, .shippingFAQs h2,.orderingFAQs h2,.returnInstructions h2, .returnPolicy h2 { background-color:#6DBE45;color:#FFF;padding: 10px;text-shadow: 1px 1px 0px #333; font-size:1.4em; } .rewardsLinks h2,.troubleshootingTips h2,.aboutLinks h2, .warrantyFAQs h2, .troubleshootingFAQs h2 { background-color:var(--thematic-blue);color:#FFF;padding: 10px;text-shadow: 1px 1px 0px #333; font-size:1.4em; } .aboutLinks p,.shippingLinks p,.troubleshootingTips p,.shoppingLinks p,.warrantyLinks p,.rewardsLinks p,.shippingFAQs p,.warrantyFAQs p,.orderingFAQs p,.troubleshootingFAQs p,.returnInstructions p, .returnPolicy p,.techsupportLeft p,.techsupportRight p { padding:0 5px 0 20px; } #CategoryContent .helpAlertTXT { display: block; color: #e82000; } #CategoryFooter .contentHighlight { margin: 0px auto 12px auto; text-align: center; max-width: 800px; width: 100%; } #CategoryFooter .content div.returnsSection:not(:last-child) { flex-direction:column; margin-bottom: 15px; } #CategoryFooter .content div.returnsSection:not(#topLinks):first-child { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: center; align-items: stretch; margin-bottom: 20px; } #CategoryFooter .returnInstructions { margin-right: 10px;min-width:250px; } #CategoryFooter .content > div#AboutUsWrapper { flex-flow: row wrap; justify-content:flex-start; } #CategoryFooter .content > div#AboutUsWrapper p { flex: 0 0 100%; } #CategoryFooter .content > div#AboutUsWrapper h2 { flex: 0 0 100%; } #CategoryContent table.helpTopMenu { max-width: 400px; width: 100%; margin: 0 auto; } #CategoryContent table.helpTopMenu td { padding: 5px; } #CategoryContent #CategorySection #ContentSection .topContent { flex: 0 0 100%;margin-bottom: 15px; } #CategoryContent #CategorySection #ContentSection .bottomContent { flex: 0 0 100%;margin-bottom: 15px; } /*** FAQ TABLE ***/ #CategoryFooter .answer.supportTable { margin: 20px auto; display: table; width: 75%; padding: 0; } #CategoryFooter .answer.supportTable .row { display: table-row; } #CategoryFooter .answer.supportTable th { color:#FFF;white-space:nowrap;background-color: var(--thematic-blue);padding: 6px 10px;text-align: center; display: table-cell; vertical-align:middle; font-weight:bold; } #CategoryFooter .answer.supportTable .l { border-left: 1px solid var(--thematic-blue);border-bottom: 1px solid #BFBFBF;font-weight:bold;padding:6px;white-space:nowrap;display: table-cell; vertical-align:middle; text-align:left; } #CategoryFooter .answer.supportTable .m { border-left: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;padding:6px;display: table-cell; vertical-align:middle; text-align:left; } #CategoryFooter .answer.supportTable .r { border-left: 1px solid #BFBFBF;border-bottom: 1px solid #BFBFBF;border-right: 1px solid var(--thematic-blue);padding: 6px;display: table-cell; vertical-align:middle; text-align:left; } #CategoryFooter .answer.supportTable .subtext { font-size:11px;font-weight:normal;font-style:italic; } /*** SHIPPING TABLE ***/ #CategoryFooter .supportTable { margin: 20px auto; max-width: 500px; width: 100%; padding: 0; } #CategoryFooter .supportTable th { text-align: center; padding: 10px 0; } #CategoryFooter .supportTable .row { display: table-row; } #CategoryFooter .supportTable .th { flex: 0 0 33%; height: 55px;color:#FFF;background-color: var(--thematic-blue);padding: 6px 5px;text-align: center; display: table-cell; vertical-align:middle; font-weight:bold; } #CategoryFooter .supportTable .l, #CategoryFooter .supportTable .tdl { flex: 0 0 33%; font-weight:bold;padding:6px;white-space:nowrap;display: table-cell; vertical-align:middle; text-align:left; } #CategoryFooter .supportTable .m, #CategoryFooter .supportTable .tdm { flex: 0 0 33%; padding:6px;display: table-cell; vertical-align:middle; text-align:center; } #CategoryFooter .supportTable .r, #CategoryFooter .supportTable .tdr { flex: 0 0 33%; padding: 6px;display: table-cell; vertical-align:middle; text-align:center; } #CategoryFooter .supportTable .subtext { font-size:11px;font-weight:normal;font-style:italic; } #CategoryFooter .content .row { flex: 0 0 100%; margin-bottom: 15px; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CategoryFooter .content .row .cell { flex: 0 0 33%; padding: 0 10px; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CategoryFooter .content .row .cell ul, #CategoryFooter .content .row .cell ol { padding: 0; margin: 0 0 0 20px; } #CategoryFooter .content > div:not(#topLinks).troubleNav, #CategoryFooter .content > div:not(#topLinks).initReturn { display: none; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting { flex-wrap: wrap; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting .cell.th { display: none; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting .cell { flex: 0 0 100%; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting .cell h3 { flex: 0 0 100%; margin: 0; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting .cell + .cell { flex: 0 0 50%; padding-left: 30px; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting .cell + .cell + .cell::before { content: "Resolution"; font-weight: bold; width: 100%; margin-top: 10px; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting .cell + .cell::before { content: "Diagnosis"; font-weight: bold; width: 100%; margin-top: 10px; } #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting { flex-wrap: wrap; } #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting .cell.th { display: none; } #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting .cell { flex: 0 0 100%; } #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting .cell h3 { flex: 0 0 100%; margin: 0; } #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting .cell + .cell { padding-left: 30px; } #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting .cell + .cell + .cell::before { content: "Resolution"; font-weight: bold; width: 100%; margin-top: 10px; } #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting .cell + .cell::before { content: "Diagnosis"; font-weight: bold; width: 100%; margin-top: 10px; } /******************* FAQs **************************************/ .shippingFAQs img, .warrantyFAQs img, .orderingFAQs img, .troubleshootingFAQs img { display:block; text-align:center; margin:5px auto; } #CategoryFooter .question { background-color:#DFF0FE; margin-bottom: 3px; padding: 6px; font-weight:bold; flex: 0 0 100%; } #CategoryFooter .answer { padding: 0 3px 0 7px; margin-bottom:10px; flex: 0 0 100%; } #CategoryFooter .bot { margin-bottom: 20px; } #CategoryFooter .question strong, #CategoryFooter .answer strong { margin-right: 3px; } #CategoryFooter .content > div:not(#topLinks).bot { margin-bottom:20px; justify-content: flex-start; } #CategoryFooter .topLink{ color: #808080; text-decoration: none; font-size: 11px; } #CategoryFooter .topLink img { margin-right: 3px; } #CategoryFooter .rewardsFAQsContent table { margin: 10px auto; max-width: 400px; } /*********** Contact Form Page **************/ #ContactFormWrapper { display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: 600px; margin: 10px auto; } #ContactFormWrapper div { flex: 0 0 100%; margin-bottom:10px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ContactFormWrapper div.reqMsg { justify-content: flex-end; } #ContactFormWrapper .error { text-align:left;margin:0 0 0 4px;color:rgba(221, 14, 28, 1); font-size:12px; justify-content: flex-end; margin-bottom: 5px; } #ContactFormWrapper label { flex: 0 0 180px; text-align:right; margin-right: 5px; } #ContactFormWrapper input { flex: 0 0 calc(100% - 190px); max-width: 300px; } #ContactFormWrapper .commentLbl { text-align:left;display: block; } #ContactFormWrapper textarea { flex: 0 0 97%; height: 200px; } #ContactFormWrapper div button { margin: 0 auto; } /*********** Rewards Page **************/ #RewardsPageContent { flex: 0 0 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; gap: 30px; } #RewardsPageContent h2 { padding: 0; margin: 0; flex: 0 0 100%; } #RewardsPageContent .rewards-content { flex: 0 0 100%; max-width: 1024px; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; gap: 20px; } #RewardsPageContent .rewards-content .content { } #RewardsPageContent .rewards-content .content ul { padding-bottom: 0; margin-bottom: 0; } #RewardsPageContent .rewards-content .points-options { flex: 0 0 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 30px; } #RewardsPageContent .rewards-content .points-options .points-option { flex: 0 0 calc(33% - 20px); display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; gap: 10px; } #RewardsPageContent .rewards-content .points-options .points-option > div { flex: 0 0 100%; text-align: center; } #RewardsPageContent .rewards-content .points-options .points-option .points-value h3 { padding: 0; margin: 0; } #RewardsPageContent .rewards-content .points-options .points-option .points-image { width: 150px; } #RewardsPageContent .join-now { flex: 0 0 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; gap: 10px; } #RewardsPageContent .join-now div { flex: 0 0 auto; } #RewardsPageContent .rewards-footer { flex: 0 0 100%; text-align: center; } #ContentTabs.rewards-content-tabs { gap: 30px; } #ContentTabs.rewards-content-tabs .nav-tabs { flex: 0 0 100%; order: 1; z-index: unset; } #ContentTabs.rewards-content-tabs .balance { flex: 0 0 100%; order: 0; } #ContentTabs.rewards-content-tabs .balance .points { font-size: 18px; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; align-items: flex-start; width: 100%; gap: 10px; } #ContentTabs.rewards-content-tabs .balance .points .lbl { flex: 0 0 210px; color: #8B9198; } #ContentTabs.rewards-content-tabs .balance .points .txt { font-weight: bold; flex: 0 0 50px; text-align: center; } #ContentTabs.rewards-content-tabs .tab-content { order: 2; flex: 0 0 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; } #RewardsOptions:not(.active), #RewardsGiftCardHistory:not(.active), #RewardsTimeline:not(.active), #RewardsFAQs:not(.active) { display: none; } #RewardsOptions.landing { display: flex; } #RewardsGiftCardHistory #GiftCardEvents { max-width: 800px; margin: 0 auto 15px auto; } #RewardsGiftCardHistory #GiftCardEvents .pageOfEvents { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; } #RewardsGiftCardHistory #GiftCardEvents .EventWrapper { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; padding: 5px; } #RewardsGiftCardHistory #GiftCardEvents .EventWrapper:nth-child(odd):not(.header) { background-color: #efefef; } #RewardsGiftCardHistory #GiftCardEvents .EventWrapper.header { font-weight: bold; background-color: #b7b7b7; } #RewardsGiftCardHistory #GiftCardEvents .EventWrapper .EventCreationTime { flex: 0 0 90px; } #RewardsGiftCardHistory #GiftCardEvents .EventWrapper .EventType { flex: 0 0 80px; } #RewardsGiftCardHistory #GiftCardEvents .EventWrapper .EventDetails { flex: 0 0 calc(100% - 170px); } #RewardsGiftCardHistory #GiftCardEvents .EventWrapper .EventStatus { flex: 0 0 70px; } #RewardsGiftCardHistory #GiftCardEvents .EventWrapper .EventPoints { flex: 0 0 70px; text-align: center; } #RewardsTimeline #AddEventWrapper { text-align: right; cursor: pointer; color: #004b91; margin-bottom: 10px; flex: 0 0 100%; } #RewardsTimeline #Events { max-width: 800px; margin: 0 auto; } #RewardsTimeline #Events .pageOfEvents { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; } #RewardsTimeline #Events .EventWrapper { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; padding: 5px; } #RewardsTimeline #Events .EventWrapper:nth-child(odd):not(.header) { background-color: #efefef; } #RewardsTimeline #Events .EventWrapper.header { font-weight: bold; background-color: #b7b7b7; } #RewardsTimeline #Events .EventWrapper .EventCreationTime { flex: 0 0 90px; } #RewardsTimeline #Events .EventWrapper .EventType { flex: 0 0 80px; } #RewardsTimeline #Events .EventWrapper .EventDetails { flex: 0 0 calc(100% - 310px); padding-right: 4px; } #RewardsTimeline #Events .EventWrapper .EventStatus { flex: 0 0 70px; } #RewardsTimeline #Events .EventWrapper .EventPoints { flex: 0 0 70px; text-align: center; } #RewardsTimeline .navWrapper { text-align: right; margin-top: 10px; height: 40px; display: flex; justify-content: flex-end; } #RewardsTimeline .navWrapper .loading { flex: 0 0 50%; display: none; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; align-content: center; gap: 5px; } #RewardsTimeline #Events ul { list-style: none; margin: 0; padding: 0; display: flex; flex: 0 0 100%; align-items: center; justify-content: flex-end; } #RewardsTimeline #Events .pagination > li { text-align: center; flex: 0 0 40px; display: flex; align-content: center; align-items: center; justify-content: center; } #RewardsTimeline #Events .pagination-sm > li > a, #Events .pagination-sm > li > span { padding: 5px; } #RewardsTimeline #Events .pagination > li > a, #Events .pagination > li > span { color: #004b91; background-color: #fff; padding: 6px 12px; position: relative; } /*#EditEventModal, #NewEventsModal { background: #FFF;display:none;z-index: 1000; padding:20px;max-width: 500px; width: calc(90%); height:280px; }*/ #EditEventModal h2, #NewEventsModal h2 { margin: 0 0 5px 0; } #EditEventForm fieldset, #NewEventForm fieldset { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; gap: 5px; } #EditEventForm fieldset .inputs, #NewEventForm fieldset .inputs { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; } #EditEventForm fieldset .inputs label, #NewEventForm fieldset .inputs label { flex: 0 0 110px; } #EditEventForm fieldset .inputs span, #NewEventForm fieldset .inputs span { flex: 0 0 calc(100% - 120px); } #EditEventForm fieldset .inputs span#EditCharacterCount, #NewEventForm fieldset .inputs span#CharacterCount { flex: 0 0 40px; } #EditEventForm fieldset .inputs select, #NewEventForm fieldset .inputs select { flex: 0 0 80px; } #EditEventForm fieldset .inputs input, #NewEventForm fieldset .inputs input { flex: 0 0 80px; height: 30px; width: 80px; } #EditEventForm fieldset .inputs textarea, #NewEventForm fieldset .inputs textarea { flex: 0 0 250px; height: 70px; } #RewardsPageContent .rewards-content #CategoryFooter.content { border: none; padding: 0; gap: 30px; } #RewardsFAQs { } #RewardsFAQs table { } #RewardsFAQs table th, #RewardsFAQs table td { padding: 2px 5px; } #RewardsFAQs .rewardsFAQsContent .question::after { display: none; } /*********** Search Results ************/ /*#KeywordResultsWrapper, #KeywordSearchResultsWrapper, #KeywordResultsWrapper div { z-index: 1000; } #KeywordSearchResultsWrapper { } #KeywordResultsWrapper div, #KeywordSearchResultsWrapper div, */ #KeywordHeaderResultsWrapper { display: none; position: absolute; width: auto; z-index: 1000; min-width: 350px; width: 100%; min-height: 200px; } #KeywordHeaderResultsWrapper { font-weight: normal; color:#333; background: #fff none repeat scroll 0 0; border: 1px solid #afafaf; box-shadow: 1px 1px 4px #888; font-size: 100%; margin: 0; outline: 0 none; padding: 5px 0 5px 10px; vertical-align: baseline; } #KeywordHeaderResultsWrapper .keywordResultsList { list-style: outside none none; margin: 0; overflow: hidden; padding: 0; background: transparent none repeat scroll 0 0; border: 0 none; font-size: 100%; } #KeywordHeaderResultsWrapper .keywordResultsList li.kw-header { list-style: outside none none; color: #1b4b99;font-weight:bold;padding: 2px 2px;font-size: 120%; } #KeywordHeaderResultsWrapper .keywordResultsList li.option { cursor: pointer; list-style: outside none none; text-align:left; padding: 5px 0 5px 10px; } #KeywordHeaderResultsWrapper .keywordResultsList li.option:hover { padding-left: 20px; color: var(--thematic-blue); } #KeywordHeaderResultsWrapper .keywordResultsList li.series + .kw-header { margin-top: 10px; } /*********** Search PAGE LAYOUT ************/ #SearchTermResults.topContent { margin: 0 auto; } #SearchResults #RelatedProducts .productContentRow .productInfo { } #SearchResults #RelatedProducts .productContentRow .productImage { flex: 0 0 150px; } #SearchResults #RelatedProducts .productContentRow .productInfo .descr { } #SearchResults #RelatedProducts .productContentRow .productInfo .productPricing { text-align:center; } #SearchResults #RelatedProducts .productContentRow .productInfo .productPricing .priceWrapper { align-self: center; margin-right:20px; } #SearchResults #RelatedProducts .productContentRow .productInfo .detailsBtn { align-self: center; flex: 0 0 150px; display: flex; justify-content: flex-end; } #SearchResults #RelatedProducts .productContentRow .productInfo .detailsBtn a { } /****** Category/Vendor/Silo Page *******/ #CategoryContent #VendorSearch .vendorContent .vendorModelSearch { height: 190px; align-content: stretch; } #VendorPageLinks { margin-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; gap: 5px; } #VendorPageLinks div { text-align: center; border: 1px solid #e2e2e2; background-color:#FFFFFF;flex: 0 0 calc(20% - 4px); padding: 5px; } #VendorPageLinks img { display: block; width: 100%; max-width: 150px; margin: 0 auto 5px auto; } #PopularPrinters, #PopularSeries, #PopularProducts { flex: 0 0 100%; } #PopularPrinterGrid .grid, #PopularProductsGrid .grid { border: 1px solid #e2e2e2; background-color:#FFFFFF; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center;padding: 20px; gap:20px; } #PopularPrinterGrid .grid .cell, #PopularProductsGrid .grid .cell { text-align:center; padding: 5px 10px; border: 1px solid #e2e2e2; min-height: 210px; flex: 0 0 calc(20% - 16px); display: flex; justify-content: center; align-content: center; flex-direction: column; gap: 5px; } #PopularPrinterGrid .grid .cell div, #PopularProductsGrid .grid .cell div { } #PopularPrinterGrid .grid .cell img, #PopularProductsGrid .grid .cell img { width: 120px; margin: 0 auto; } #PopularPrinterGrid .pagination { text-align: center; flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; align-items: center; } #PopularPrinterGrid .pagination a, #PopularPrinterGrid .pagination span.selected { font-size: 12px; width: 30px; } #PopularPrinterGrid .pagination span { } #SaleProducts { flex: 0 0 100%; } #SaleProductsGrid .grid { border: 1px solid #e2e2e2; background-color:#FFFFFF; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; padding: 20px 0; gap: 50px 20px; } #SaleProductsGrid .grid .cell { text-align:center; flex: 0 0 calc(25% - 15px); display: flex; flex-direction: row; flex-wrap: wrap; align-content: stretch; justify-content: space-between; align-items: center; gap: 10px; } #SaleProductsGrid .grid .cell > div { padding: 0 5px; flex: 0 0 auto; width: 100%; } #SaleProductsGrid .grid .cell img { max-width:120px; width:100%; margin: 0 auto; } #SaleProductsGrid .grid .cell .product-url { line-height: 1.2; font-size: .9em; } #SaleProductsGrid .grid .cell .free-shipping { font-size: 1em; color: #8B9198; line-height: 1; } #SaleProductsGrid .grid .cell .free-shipping .txt > span { font-size: 12px;display: block; text-align: center; } #SaleProductsGrid .grid .cell .free-shipping .txt > span.freeShippingSubText { font-size: 10px;display: block; text-align: center; } #SaleProductsGrid .grid .cell form { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: center; } #SaleProductsGrid .grid .cell .product-qty-fields { flex: 0 0 100%; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; gap: 10px; } #SaleProductsGrid .grid .cell .product-qty-fields > div { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } #SaleProductsGrid .grid .cell .product-qty-fields .pricing { display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; min-width: 70px; flex: 0 0 70px; padding: 0 0 0 10px; margin: 0; } #SaleProductsGrid .grid .cell .product-qty-fields .pricing .price { flex: 0 0 100%; text-align: right; } #SaleProductsGrid .grid .cell .product-qty-fields .pricing .price .current-price { font-size: 1.0em; line-height: 1; } #SaleProductsGrid .grid .cell .product-qty-fields .pricing .price .current-price span { font-size: 0.8em; display: block; } #SaleProductsGrid .grid .cell .product-qty-fields .qty-input { flex: 0 0 110px; max-width: 110px; padding: 0 10px 0 0; margin: 0; } #SaleProductsGrid .grid .cell .product-qty-fields .add-to-cart { flex: 0 0 100%; } #SaleProductsGrid .grid .cell .product-qty-fields .rewards-points { display: flex; justify-content: center; align-items: center; font-size: .9em; line-height: 1; flex: 0 0 100%; padding: 0 10px; } #ProductSearch { max-width: 425px; margin: 0 auto; display:flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 15px; } #ProductSearch > div { flex: 0 0 100%; } #ProductSearch #VendorSearch .vendorContent .vendorModelSearch { height: auto; } #ProductSearch .searchTitle { } #ProductSearch .searchChoices { display: flex; flex-direction: row; justify-content: center; align-items: stretch;flex-flow: row wrap; } #ProductSearch .searchChoices > div { flex: 1 1 300px; max-width:400px; } #ProductSearch .searchChoices > div + div { margin-left:40px; } #ProductSearch .searchModel div { display:flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } #ProductSearch .searchModel .chooseBrand { margin-bottom: 10px; } #ProductSearch .searchModel .chooseModel { margin-bottom: 10px; } #ProductSearch .searchModel label { margin: 0px; margin-right: 10px; } #ProductSearch .searchModel select { min-width: 200px; flex: 0 0 60%; display:block; width: 100%; height: 40px; border: 1px solid #ddd; font-size: 1em; padding-left: 10px; } #ProductSearch .searchModel .modelSubmit { text-align:center; } #ProductSearch .searchKeyword { } #ProductSearch .searchKeyword .keywordInput { margin-bottom: 10px; } #ProductSearch .searchKeyword label { display:inline-block; width:130px; vertical-align:middle; text-align:right;font-weight:bold;margin:0px; } #ProductSearch .searchKeyword input { display:inline-block; vertical-align:middle; } #ProductSearch .searchKeyword .keywordHint { font-size:70%;color:#AAA;display:block;margin-left: 100px; } #ProductSearch .keywordSubmit { text-align:center; } #ProductSearch #KeywordResultsWrapper { margin-left: 134px; } /**** Product Page ******/ #ProductContent { flex-shrink: 0; flex-grow: 0; display: flex; flex-basis: 100%; flex-wrap: wrap; flex-direction: row; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ProductPage .product-info { margin-bottom:30px; display: flex; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ProductPage .product-info > div {position: relative;} #ProductPage .product-left { flex: 0 0 40%;display: flex;justify-content: flex-end; } #ProductPage .product-right { flex: 1 1 50%;display: flex;flex-direction: column; gap: 10px; } #ProductImage { max-width: 400px;max-height: 400px;position: relative;display: flex;flex-direction: column;align-items: flex-end;} #ProductImage .main-image { display: flex;max-width: 400px;min-height: 300px;padding: 20px; background-color: #FFF; border-width: 1px;border-style: solid;border-color: #e2e2e2;border-radius: 3px; text-align:center;box-shadow: 0px 0px 3px #3f3f4426; } #ProductImage > div {-webkit-box-ordinal-group: 6;-ms-flex-order: 5;order: 5;} #ProductImage img { align-self: center;flex: 1 1 360px; } #ProductDetails { display: flex; flex-direction: row; order: 1; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; padding-left: 20px; } #ProductDetails > div { } #ProductDetails .page-title {-webkit-box-ordinal-group: -99;-ms-flex-order: -100;order: -100;display: none;} #ProductDetails .product-description { padding:0; margin:0; order: 2; flex: 0 0 100%; } #ProductDetails .product-description p { padding:0; margin:0 0 5px 0; } #ProductDetails .product-price-group { text-align: left; display: flex; justify-content: flex-start; pointer-events: none; order:3; flex: 0 0 100%; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2e2e2; } #ProductDetails .product-price-group .price-wrapper { order: 1; flex: 0 0 295px; display:flex; align-items: center; } #ProductDetails .product-price-group .price-wrapper .price-group { flex:1; display: flex;flex-wrap: wrap;pointer-events: auto;white-space: nowrap;text-align:right; padding-right: 20px;flex-direction: column;align-items: flex-start;} #ProductDetails .product-price-group .price-wrapper .price-group .product-price-oem { display: flex; flex-direction: column; flex: 1; align-self: end; } #ProductDetails .product-price-group .price-wrapper .price-group .product-price-oem > div + div { margin-top: 5px; } #ProductDetails .product-price-group .price-wrapper .price-group .product-price-oem .originalPrice {color: #bfbfbf;font-size: .9em; text-decoration: line-through; } #ProductDetails .product-price-group .price-wrapper .price-group .product-price-oem .currentPrice { font-size: 24px;font-weight: 700;line-height: 1;} #ProductDetails .product-price-group .price-wrapper .price-group .product-price-oem .amountSaved {color: #50AD55;font-size: .9em;} #ProductDetails .product-price-group .price-wrapper .price-group .partSeriesGrid th { font-size: 1em; text-align:center; font-weight:bold; color: #8B9198; padding:12px; background-color:#FFF; } #ProductDetails .product-price-group .price-wrapper .price-group .partSeriesGrid th .ea { font-size:.8em;display:block;line-height: 1.5; } #ProductDetails .product-price-group .price-wrapper .price-group .partSeriesGrid td { font-size: 1em; text-align:center; font-weight:normal; padding:12px; color: #8B9198; } #ProductDetails .product-price-group .product-stats {pointer-events: auto;flex-grow: 1;} #ProductDetails .product-stats { position: relative;display: flex;justify-content: space-between;flex-wrap: wrap;order:2;} #ProductDetails .product-stats b {font-size: 12px; font-weight: bold;margin-right: 5px; white-space: nowrap; } #ProductDetails .product-stats span {font-size: 12px;} #ProductDetails .product-stats ul { display: flex;flex-direction: column;flex-wrap: wrap;margin: 0;overflow-x: auto;flex-grow: 1; padding: 0;} #ProductDetails .product-stats li {margin-right: 10px;display: flex;align-items: center;} #ProductDetails .product-stats li::before { /*content: "\f111" !important;font-family: icomoon !important;font-size: 7px;margin-right: 5px;vertical-align: middle;*/ } #ProductDetails .product-stats .in-stock span {color: #50AD55;font-weight: 700;text-transform: uppercase;} #ProductDetails .product-stats .out-of-stock span {color: rgba(221, 14, 28, 1);font-weight: 700;text-transform: uppercase;} #ProductDetails .product-stats .product-stock.in-stock::before {content: "\eb1b" !important;font-family: icomoon !important;font-size: 16px; color: #50AD55;} #ProductDetails .product-stats .product-stock.out-of-stock::before {content: "\e14b" !important;font-family: icomoon !important;font-size: 16px;color: rgba(221, 14, 28, 1);top: -1px;} #ProductDetails .product-stats .product-stock b {display: none;} #ProductDetails .button-group-page { display:flex; order:4; flex: 0 0 100%; max-width: 320px; } #ProductDetails .button-group-page .buttons-wrapper { flex: 1;display: flex;align-items: center;flex-wrap: wrap;margin: 0 auto;} #ProductDetails .button-group-page .buttons-wrapper .stepper-group { display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;min-height: 100%;} #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell { display: flex; flex: 0 0 160px; justify-content: center;align-items: center; flex-direction: row; margin: 0; height: 55px; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .control-label { flex: 0 0 80px; text-align: right; padding-right: 10px; display: none; } /*#ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .stepper { display: flex;height: 45px;margin-right: 40px;min-width: 90px;overflow: visible; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .stepper span i { width: 25px; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .stepper .form-control {padding-right: 25px;font-size: 1em;}*/ #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.priceLbl { font-weight:bold; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.priceLbl span { flex: 0 0 auto; margin-right: 4px; font-size: 20px; text-align: right; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .button { justify-content: center; align-self: flex-end; display: flex; flex: 1; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .btn-cart {display: inline-flex;} #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .btn-cart::before {font-size: 17px;margin-right: 5px;} #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .earnMsg { font-size:.9em; flex: 0 0 auto;justify-content: flex-start; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .earnMsg .earnPtsTotal { white-space: nowrap; } #ProductDetails .rating { flex: 0 0 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; padding-bottom: 5px; order: 1; } #ProductDetails .rating .fa-stack { font-size: 15px;width: 1.2em; } #ProductDetails .rating .fa-star, #ProductDetails .product-info .product-details .rating .fa-star + .fa-star-o { color: rgba(254, 212, 48, 1); } #ProductDetails .rating .fa-star-o:only-child { color: rgba(105, 105, 115, 1); } #ProductDetails .rating > span { display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; } #ProductDetails .rating > span:last-of-type { margin-right: 10px; } #ProductDetails .rating b { font-weight: 400; } #ProductDetails .rating div a { display: inline-flex;margin: 0 2px; align-items: center; font-size: 12px; } #ProductDetails .rating div b { font-size: 14px; } #ProductDetails .rating-stars { margin-right: 5px; } #ProductDetails .rating-page > div { flex: 0 0 auto; line-height: normal; display: flex; align-content: center; flex-wrap: nowrap; flex-direction: row; } #ProductDetails .rating-page i { margin-right: 4px; line-height: normal; } #ProductDetails .rating-page span { line-height: normal; } #ProductDetails .rating-page img { vertical-align:unset; height:15px; line-height: normal; } #ProductDetails .review-links a + a { margin-left: 3px; } #ProductDetails .free-shipping { color: #8B9198; order: 3; line-height: 1; } #ProductContent .product-blocks#SocialButtons { order:2; align-items: flex-end; margin: 0; } #ProductContent .product-blocks { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 100%; } #ProductContent .block-body { flex: 0 0 100%; height: 100%; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ProductContent .block-body::after {content: "";clear: both;display: table;} #ProductContent .block-body .title {width: 100%;} #ProductContent .tab-pane .block-content { flex: 0 0 100%; position: relative; padding:20px; border: 1px solid #e2e2e2; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; gap: 20px; } #ProductContent .tab-pane .block-content h2, #ProductContent .tab-pane .block-content h3, #ProductContent .tab-pane .block-content > div, #ProductContent .tab-pane .block-content p { flex: 0 0 100%; margin: 0; } #ProductContent .tab-pane .block-content .content-block { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; gap: 15px; } /********* Product Specs Tab *********/ #ProductTabsSpecsGrid #Product-Specs { max-width: 800px; margin: 0 auto; } #ProductSpecsTable table { min-width: 250px; } #ProductSpecsTable table td { padding: 10px 5px; text-align: center; } #Product-Video { max-width: 800px; margin: 0 auto; } /********* Related Products Tab *********/ #ProductContent .productNotice { background-color: #fcf8e3; padding: 5px; border: 1px #faebcc solid; margin: 15px auto 0 auto; text-align:center; } #ProductContent .productNotice p { } #ProductContent .productNotice p::before { content: "\eafa" !important; font-family: icomoon !important; font-size: 1em; color: var(--thematic-yellow); margin-right: 5px; margin-left: 5px; float: none; } #ProductContent .productNotice select { height: 40px; border: 1px solid #ddd;padding: 10px 5px; min-width:240px;max-width: 320px; } #LoadMoreProducts { text-align:center; margin-top: 20px; } #ProductContent .displaySection { margin-top: 40px; } /********* Product Reviews *********/ #ProductReviews .writeReview { display: none; } #AllProductReviews img { vertical-align: unset; } #AllProductReviews span { line-height: normal; } #ReviewStats { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; max-width: 900px; width: 100%; background: #f3f3f3; padding: 20px; margin: 0 auto 20px auto; border-top: 2px solid var(--thematic-blue); } #ReviewStats label { font-weight: bold; flex: 0 0 140px; font-size: 16px; } #ReviewStats .attribute { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; } #ReviewStats #OverallRatings { flex: 0 0 calc(100% - 300px); display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; max-width: 900px; width: 100%; } #ReviewStats #OverallRatings > div { flex: 0 0 100%; line-height: normal; } #ReviewStats #OverallRatings > div + div { } #ReviewStats #OverallRatings #OverallRating { height: 30px; } #ReviewStats #OverallRatings #OverallRating label { color: var(--thematic-blue); } #ReviewStats #OverallRatings #OverallRating > span + span { margin-left: 10px; } #ReviewStats #OverallRatings #OverallRating .overallRatingAvg { font-size: 16px; font-weight: bold; } #ReviewStats .totalReviews { font-size: 12px;margin-left: 10px; } #ReviewStats #OverallRatings .overallWouldRecommend { color: #909090; font-size: 12px; } #ReviewStats #OverallAttributes { flex: 0 0 300px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; max-width: 900px; width: 100%; } #ReviewStats #OverallAttributes > div { flex: 0 0 100%; color: rgba(105, 105, 115, 1); } #ReviewStats #OverallAttributes > div + div { margin-top: 5px; } #WriteAReview, .writeAReview { margin-top: 20px; } #WriteAReview span, .writeAReview { color: #337ab7; cursor: pointer; } #AllProductReviews #WriteFirstReview p { margin-bottom: 10px; } #IndividualReviews { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; max-width: 900px; width: 100%; margin: 0 auto; } #IndividualReviews .reviewContainer { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #IndividualReviews .reviewContainer + .reviewContainer { margin-top: 15px; padding-top: 10px; border-top: 1px solid #e5e5e5; } #IndividualReviews .reviewContainer .writer { flex: 0 0 190px; } #IndividualReviews .reviewContainer .reviewAttributes { flex: 0 0 265px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; } #IndividualReviews .reviewContainer .reviewAttributes .attribute { flex: 0 0 100%; line-height: normal; display: flex; align-items: center; } #IndividualReviews .reviewContainer .reviewAttributes label { font-weight: bold; flex: 0 0 130px; } #IndividualReviews .reviewContainer .reviewComments { flex: 0 0 calc(100% - 455px); } #IndividualReviews .reviewContainer .reviewComments .reviewTitleWrapper { font-weight: bold; } #IndividualReviews .reviewContainer .reviewComments .reviewDateTimeWrapper { font-size: 12px; } #IndividualReviews .reviewContainer .reviewComments .wouldRecommendWrapper { text-align: right; font-size: 12px; margin-top: 7px; } #AllProductReviews div > p:only-of-type { padding: 0; margin: 0; } #ProductReviews .writeReview fieldset { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; max-width: 700px; width: 100%; margin: 0 auto; } #ProductReviews .writeReview fieldset > div { flex: 0 0 100%; } #ProductReviews .writeReview legend { font-weight:bold; padding:0; margin:0 0 10px 0; } #ProductReviews .writeReview .reqNote { font-size: 80%; text-align: left; } #ProductReviews .writeReview .req { color:#FF0000; font-size: 9px; } #ProductReviews .writeReview div { } #ProductReviews .writeReview > div { margin-bottom:10px; clear:both; } #ProductReviews .writeReview label { display: inline-block;line-height: 24px;padding-right: 7px;text-align: right;width: 160px; } #ProductReviews .writeReview .comments { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ProductReviews .writeReview .ratingComments { flex: 0 0 calc(100% - 310px); max-width:370px; margin-right: 20px; } #ProductReviews .writeReview .ratingComments textarea { width: 100%; height: 90px; } #ProductReviews .writeReview .ratingCommentsuggestions { flex:0 0 290px; font-size: 12px; color:#777; } #ProductReviews .writeReview .ratingCommentsuggestions p { margin-bottom:5px; } #ProductReviews .writeReview .attribute4Wrapper label { vertical-align: middle; width: 70px; } #ProductReviews .writeReview .attribute4Wrapper input { margin: 0; vertical-align: middle; } #ProductReviews .writeReview .attributeRatings, #ProductReviews .writeReview .basicFields, #ProductReviews .writeReview .comments, #ProductReviews .writeReview .attribute4Wrapper { margin-bottom:10px; } #ProductReviews .writeReview .instructions { font-weight:bold;margin-bottom:5px; } #ProductReviews .writeReview .note { font-size:80%; } #ProductReviews .writeReview .errorMsg { text-align:inherit; } #ProductReviews .writeReview .msg { color:#FF0000; height: auto; } #ProductReviews .writeReview .errorList { padding-left: 5px; } #ProductReviews .writeReview .overallRating, #ProductReviews .writeReview .attribute1, #ProductReviews .writeReview .attribute2, #ProductReviews .writeReview .attribute3 { cursor:pointer; } #ProductReviews .writeReview .submit { text-align: center; } #ProductReviews .seeAllDetails, #ProductReviews .seeLessDetails { display: none; } /*********************************************************************************************************/ /********* SERIES PAGE LAYOUT *********/ #MainContent { padding-bottom: 10px; } #PrinterReview, #ModelVideo { padding: 10px; } #SeriesTopContent { padding:20px 20px 5px 20px;background:#FFFFFF; margin:0 0 20px 0;border: 1px solid #e2e2e2;display: flex;justify-content: flex-start; align-items: flex-start; } #SeriesTopContent h1 { padding: 0; margin: 0 0 15px 0; } #SeriesTopContent #TopContent { flex: 1 1 auto; } #SeriesTopContent #SeriesImg { flex: 0 0 200px; } #SeriesModelList ul { padding: 0;list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #SeriesModelList ul li { border: 1px solid #d8d8d8; margin: 0 7px 7px 0; min-width: 90px; flex: 0 1 100px; padding: 5px 10px; text-align: center; font-size: .9em; background-color: #f1f1f1; } #SeriesMainWrapper { margin-bottom:20px;background: #FFF; padding: 15px;border: 1px solid #e2e2e2; } #SeriesMainWrapper .highlightCell { margin-bottom:10px;display: flex;justify-content: flex-start; align-items: center; position:relative; } #SeriesMainWrapper .highlightCell p { margin: 0; } #SeriesMainWrapper .highlightCell .reveal-cart { cursor: pointer; text-decoration:underline; text-decoration-style: dotted; color: rgba(105, 105, 115, 1); } #SeriesMainWrapper .highlightCell#CartContainer { display: none; max-width:1100px; border: 1px solid #e2e2e2; padding: 10px; margin: 0 auto; } #SeriesMainWrapper .highlightCell#CartContainer h3 { margin: 0 0 15px 0; } #SeriesMainWrapper .highlightCell#CartContainer .cart-products { width: 90%; border: none; } #SeriesGrid.qtyTable { max-width:1100px; margin: 0 auto;border: 1px solid #8ec7db;border-bottom:0px; } #SeriesGrid.qtyTable #TopRow.qtyRow .header { font-weight:bold;background: #f7f8ff;padding:5px 0; } #SeriesGrid.qtyTable #TopRow.qtyRow .imageCell { } #SeriesGrid.qtyTable #TopRow.qtyRow .descCell { } #SeriesGrid.qtyTable #TopRow.qtyRow .priceCell { } #SeriesGrid.qtyTable #TopRow.qtyRow .qtyInputCell { text-align:center; } #SeriesGrid.qtyTable .qtyRow { display: flex; justify-content: flex-start; align-items: stretch; } #SeriesGrid.qtyTable .qtyCell { border-bottom:1px solid #efefef; } #SeriesGrid.qtyTable .qtyRow .imageCell { flex: 1 0 150px; min-width: 150px;max-width: 200px;padding: 5px 10px; } #SeriesGrid.qtyTable .qtyRow .imageCell img { width:100%; max-height:80px; } #SeriesGrid.qtyTable .qtyRow .descCell { flex: 1 1 350px; max-width: 500px; display: flex; flex-direction: column; } #SeriesGrid.qtyTable .qtyRow .descCell .productDesc { font-size: 12px; } #SeriesGrid.qtyTable .qtyRow .descCell .productDesc a { font-size: 14px; } #SeriesGrid.qtyTable .qtyRow .descCell .productRating { display: flex;justify-content: flex-start; align-items: flex-start;height:20px; } #SeriesGrid.qtyTable .qtyRow .descCell .productRating div { font-size:.8em; color:rgba(105, 105, 115, 1); flex: 0 0 auto; display: flex; align-items: center; } #SeriesGrid.qtyTable .qtyRow .descCell .productRating img { width: auto;height:15px; margin: 0 3px 0px 0;vertical-align:initial; } #SeriesGrid.qtyTable .priceCell { text-align:center; flex: 1 0 60px; max-width: 80px; min-width: 60px; display: flex; justify-content: center; align-items: center; } #SeriesGrid.qtyTable .qtyInputCell { text-align:center; flex: 0 0 110px; max-width: 110px; min-width: 110px; display: flex; justify-content: center; align-items: center; padding: 0 5px; } /*#SeriesGrid.qtyTable .highlightColumn { background-color:#dcffed; color: #50AD55; font-weight:700; } #SeriesGrid .stepper { min-width: 65px; overflow: visible; }*/ #SeriesGridTotals.qtyTable { max-width:1100px; margin: 0 auto; background: #f7f8ff; padding: 10px 0; border: 1px solid #8ec7db;border-top:0px; } #SeriesGridTotals .question::after { } #SeriesGridTotals.qtyTable .qtyRow { display: flex; justify-content: space-between; align-items: stretch; } #SeriesGridTotals.qtyTable .valuesCell { font-size: 1em; padding: 0 10px; flex: 1 0 400px; max-width: 800px; min-width: 400px; } #SeriesGridTotals.qtyTable .valuesCell .earnMsg { justify-content: flex-start; } #SeriesGridTotals.qtyTable .valuesCell p { margin:0;line-height:20px; font-size: 12px; } #SeriesGridTotals.qtyTable .gridTotalCell { flex: 0 0 200px; } #SeriesGridTotals.qtyTable .gridTotalCell .totalLabelCell { text-align:right; font-weight:bold; width: 95px; } #SeriesGridTotals.qtyTable .gridTotalCell .totalCell { text-align:center; font-weight:bold; display: inline-block; width: 100px; font-size: 110%; } #SeriesGridTotals.qtyTable .gridTotalCell .seriesBuyAll { text-align: right;margin: 10px 20px 0 0; } #SeriesGridInline { display:none; } #SeriesProducts .seriesProducts:not(:empty):not(:blank) { padding: 20px 0 0 0; } #RelatedSeriesList { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 5px; align-items: stretch; align-content: flex-start; flex-direction: row; } #RelatedSeriesList .series { border: 1px solid #e2e2e2; padding: 5px; flex: 0 0 calc(100% / 4 - 4px); } #RelatedSeriesList .series .model { font-size: 12px; } /****************************************************************************************************/ /***************************************** Product List View Styles ********************************************************/ #RelatedProducts { } #RelatedProducts .productContentRow { display: flex; margin-bottom: 10px; padding: 15px 0; background-color:#FFFFFF; justify-content: flex-start; align-items: flex-start; border-bottom: 1px solid #e2e2e2; } #RelatedProducts .productContentRow > div + div { } #RelatedProducts .productContentRow .productImage { padding: 0; flex: 0 0 230px; } #RelatedProducts .productContentRow .productImage img { width:100%; } #RelatedProducts .productContentRow .productInfo { flex: 1 1 auto;padding: 0px 20px 0 20px; display: flex; justify-content: flex-start; align-items: baseline; } #RelatedProducts .productContentRow .productInfo .descr { margin-bottom: 15px; flex: 0 0 100%; display: flex;justify-content: flex-start; align-items: center; flex-wrap: wrap; } #RelatedProducts .productContentRow .productInfo .descr h3 { margin:0 0 7px 0; flex: 0 0 100%; } #RelatedProducts .productContentRow .productInfo .descr p { margin: 0; flex: 0 0 100%; } #RelatedProducts .productContentRow .productInfo .descr .productRating { flex: 1 1 auto; display: flex;justify-content: flex-start; align-items: center;height:20px;margin-top:-5px; margin-bottom: 10px; } #RelatedProducts .productContentRow .productInfo .descr .productRating div { font-size: 11px; color:rgba(105, 105, 115, 1); } #RelatedProducts .productContentRow .productInfo .descr .productRating img { width: auto; height:15px; margin: 0 3px -1px 0;vertical-align:initial; } #RelatedProducts .productContentRow .productInfo .descr .freeShippingDiv { color: #8B9198; } .shippingLevel { font-size: .9em; } .shippingLevel .freeShippingSubText { font-size:.8em; } #RelatedProducts .productContentRow .productPricing { flex: 0 0 300px; display: flex; flex-flow: column; } #RelatedProducts .productContentRow .productPricing .product-pricing { display: flex;align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; } #RelatedProducts .productContentRow .productPricing .product-pricing table { flex: 0 0 100%; order: 1; margin-bottom: 5px; } #RelatedProducts .productContentRow .productPricing td { font-size: 1em; color: #8B9198; text-align:center; white-space: nowrap; padding: 12px 10px; } /*#RelatedProducts .productContentRow .productPricing td.highlightColumn { background-color:#dcffed; color: #50AD55;font-weight:bold; }*/ #RelatedProducts .productContentRow .productPricing > div { flex: 0 0 100%; margin: 0; } #RelatedProducts .productContentRow .productPricing .priceWrapper { text-align:right; flex: 0 0 100%; min-height: 50px; padding-right: 25px; } #RelatedProducts .productContentRow .productPricing .priceWrapper .OriginalPrice { font-size: .85em; text-decoration:line-through; color:#BFBFBF; line-height: 1.25; } #RelatedProducts .productContentRow .productPricing .priceWrapper .CurrentPrice { font-weight:bold; font-size:20px; } #RelatedProducts .productContentRow .productPricing .priceWrapper .OriginalPrice + .CurrentPrice { line-height: 2; } #RelatedProducts .productContentRow .productPricing .priceWrapper .AmountSaved { font-size: .85em; color: #50AD55; line-height: 1.25; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: center; width: 100%; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div { flex: 0 0 50%; height: 60px; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div.earnMsg { height: 20px; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields label { display:none; flex: 1 1 50px; text-align: right; margin-right: 10px; } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.qty-input { } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.priceLbl { font-size: 18px; font-weight:bold; text-align: center; } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.priceLbl span + span { margin-left: 4px; font-size: .9em; } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.addToCartBtn { } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.addToCartBtn button { } #RelatedProducts .productContentRow .productPricing .product-qty-fields .earnMsg { justify-content: center; } #RelatedProducts .productContentRow .productPricing .product-qty-fields .earnMsg .earnPtsTotal { } #RelatedProducts .productContentRow .productPricing.out-of-stock .product-qty { align-self: center; line-height: normal; display: flex; width: 100%; flex: 0 0 50px; justify-content: center; align-items: center; } #RelatedProducts .productContentRow .productPricing .outOfStock { text-align:center; color:rgba(221, 14, 28, 1); font-weight: bold; } #RelatedProducts .productContentRow .productPricing .partGridMessage { font-size: 10px; color: #AAA; margin-bottom:0; flex: 0 0 100%; order: 0; display: block; } #RelatedProducts .productContentRow .productPricing .partGridMessage span { flex: 0 0 100%; margin-right: 3px; } .earnPtsTotal { color:#50AD55;font-weight:bold;white-space: nowrap; } .earnMsg { display: flex; align-items: center; font-size: 12px; position: relative; } .earnMsg.show .rewards-learn-more-modal { display: block; } .question::after { margin-left: 5px; display: inline-block; vertical-align: middle; font-size:16px; color: #8B9198; content: '\f29c' !important; font-family: icomoon !important; cursor:pointer; } /****************************************************************************************************/ /********* Modal Styles **********/ .modal .modalBody { margin: 0 0 15px 0; } .closeModal { cursor: pointer; width: 26px; height: 26px; position: absolute; right: 0px; top: 0px; z-index: 50000; transform: translate(10px, -20px); } .closeModal::before { content:"\e5c9" !important; font-family: icomoon !important; color: #333; font-size: 26px; background: #FFF; border-radius: 40px; } .shoppingcart, .rewards-learn-more-modal, .productTypeExplainedDiv, .oemWarrantyDiv, .compatibleWarrantyDiv, #GridExplained, #EditEventModal, #NewEventsModal { background: #FFF;display:none;z-index: 1000;overflow: visible; max-width: 660px; width:90%; border:1px solid #CCC;text-align:left;padding:15px; } #GridExplained { height: 70vh; max-width: unset; } #GridExplained h3 { margin: 0 0 10px 0; } #GridExplained .modalBody { overflow: hidden; overflow-y: scroll; height: 85%; } #GridExplained .grid-img { text-align: center; } #GridExplained .grid-img img { width: 100%; max-width: 500px; } #GridExplained .close { text-align:center; margin-top: 15px; } .shoppingcart, .productTypeExplainedDiv, .oemWarrantyDiv, .compatibleWarrantyDiv, #EditEventModal, #NewEventsModal { height: fit-content; min-height: 225px; } .shoppingcart h2.title:not(.page-title), .productTypeExplainedDiv h2, .oemWarrantyDiv h2, .compatibleWarrantyDiv h2 { padding: 0; margin: 0 0 10px 0; } .oemWarrantyDiv .close { text-align:center; } .compatibleWarrantyDiv .close { text-align:center; } .rewards-learn-more-modal { max-height: 270px; width: 350px; } .rewards-learn-more-modal h4 { font-size: 16px; padding: 0; margin: 0 0 10px 0; } .rewards-learn-more-modal p { padding: 0; margin: 0; } .rewards-learn-more-modal ul { margin-top: 5px; } .rewards-learn-more, .closeForm { text-decoration:underline; cursor:pointer; color:#004B91; } .rewards-learn-more img, #explainGrid img, .CompatibleWarranty img, .prodTypeLM img { width: 18px; } /********* Shopping Cart Modal *********/ #ItemCount, #CartSubTotal { font-weight: bold; } .shoppingcart #QtyDiscounts { margin-bottom: 15px; } .shoppingcart #ShippingMsg .freeShippingSubText { font-size:.7em; } .shoppingcart #NavButtons { margin-top: 20px; } .shoppingcart #NavButtons > div { display:inline-block;width:49%;vertical-align:top; } .shoppingcart #NavButtons .closeCart { } .shoppingcart #NavButtons .viewCart { text-align: right; } .shoppingcart .errorMsg:empty { display: none; } /********* Email Capture Modal *********/ #Newsletter-Modal { max-width: 500px; width:90%; min-height:240px; height: fit-content; background-color:#fff; display:none; z-index:1000; border:1px solid #CCC; padding:15px; flex-direction: row; text-align: left; justify-content: flex-start; flex-wrap: wrap; align-content: flex-start; align-items: center; } #Newsletter-Modal h2 { flex: 0 0 100%; font-size:1.6em; margin-bottom: 10px; } #Newsletter-Modal h2.title::after { left: 0;right: auto;transform: none; } #Newsletter-Modal .module-body { flex: 0 0 100%; display: flex; flex-direction: row; text-align: left; justify-content: flex-start; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 10px; } #Newsletter-Modal .module-body::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; opacity: .10; background-image: url(/Content/Assets/Images/Theme/Cartridges/Capture-Products.png); background-repeat: no-repeat; background-size: 50%; background-position: calc(96%) center; } #Newsletter-Modal .module-body > div { flex: 0 0 100%; display: flex; justify-content: inherit; align-self: flex-start; flex-wrap: nowrap; flex-direction: row; } #Newsletter-Modal .module-body .newsletter-text { color: rgba(105, 105, 115, 1); font-size: 1.2em; } #Newsletter-Modal .module-body .newsletter-form { flex: 0 0 100%; width: 100%; } #Newsletter-Modal .module-body .subTxt { color: rgba(105, 105, 115, 1); font-size: .8em; } #Newsletter-Modal .module-body .errorTxt:empty { display: none; } #Newsletter-Modal .module-body .errorTxt.errorMsg { margin-bottom: 0; } #Newsletter-Modal .module-body .newsletter-form form { max-width: 100%; display: flex; flex: 0 0 100%; } #Newsletter-Modal .module-body .newsletter-form .input-group { height: 40px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; flex: 0 0 100%; } #Newsletter-Modal .module-body .newsletter-form .input-group input { flex: 0 0 100%; max-width: 300px; height: 40px; padding: 5px; } #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn {width: 1%; white-space: nowrap; vertical-align: middle; position: relative; font-size: 0; } #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn { position: absolute; right: 0; z-index: 2; padding: 2px 6px; min-width: 70px; min-height: 30px; height: 40px; border-top-left-radius: 0; border-bottom-left-radius: 0; } #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn::before { content: "\eb79" !important; font-family: icomoon !important;margin-right: 5px; } #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn, #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn:visited { font-size: 12px;font-weight: 400;text-transform: none; } #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn:hover { box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.25); } #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn:active, #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn:hover:active, #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn:focus:active { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25); } #Newsletter-Modal .module-body .newsletter-form .input-group .input-group-btn .btn:focus { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25); } #Newsletter-Modal .module-body .close { text-align: center; } /********* Billing and Shipping Address Selection Modal *********/ .address-modal { display: none; width: calc(100% - 100px); max-width: 900px; max-height: calc(100vh - 160px); min-height: 220px; background-color: #FFF; z-index: 120; padding: 10px 0 10px 10px; position: relative; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } .address-modal.modal { overflow:visible; top: 0px; bottom: unset; } .address-modal h2 { margin: 0 0 10px 0; } .address-modal .address-list { overflow-y:scroll; height:94%; max-height: calc(100vh - 230px); flex: 0 0 99%; background-color:#FFF; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; flex-direction: row; gap: 5px; } .address-modal .address-list > div { flex: 0 0 calc(100% / 4 - 5px); } .address-modal .saved-address { border: 1px solid #ccc; background-color: #fafafa; padding: 5px; overflow: hidden; display: flex; position: relative; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-content: space-between; } .address-modal .address { flex: 0 0 100%; } .address-modal .address .defaultAddress { font-weight: bold; font-size: .8em; } .address-modal .addressActions { flex: 1; display: flex; justify-content: center; margin-top: 5px; } .address-modal .addressActions .useAsAddress { } #Background { display: none; position: fixed; height: 100%; width: 100%; top: 0; left: 0; background: #000000; z-index: 110; } /****************************************************************************************************/ /********* Account Pages **********/ #AccountBody { flex: 0 0 100%; width: 100%; max-width:900px; margin: 0 auto; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; } #AccountBody h2 { flex: 0 0 100%; margin-bottom: 15px; } #LoginWrapper { flex: 0 0 100%; width: 100%; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 15px; } #LoginWrapper > div { flex: 0 0 calc(50% - 10px); min-width: 300px; max-width: 400px; } #LoginWrapper > div#LoggedIn { flex: 0 0 60%; min-width: 300px; max-width: 400px; } #LoginWrapper > div.heading { flex: 0 0 100%; min-width: 100%; max-width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; } .secure-lock { color: #fff;border-radius: 50%; background-color: #5cb85c; border: 1px solid #2f972f; font-size: 1.2em; width: 30px; height: 30px; text-align: center; } .secure-lock:before { display: block; margin-top: 6px; } #LoginWrapper .heading img { width: 40px; align-self:center; } #LoginWrapper .heading img { margin-left: 4px; } #LoginWrapper .heading h2, #LoginWrapper .heading h3 { margin: 0 10px 0 0; } #LoginWrapper > div .subheader { color: var(--thematic-blue);font-size: 1.5em; } #LoginWrapper > div label { flex: 0 0 100px; text-align: right;font-size: 1em; padding: 0; margin: 0 5px 0 0; } #LoginWrapper > div .inputs { display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; margin-bottom:15px; } #LoginWrapper > div .inputs > div { flex: 0 0 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } #LoginWrapper > div .inputs > div:not(:last-child) { margin-bottom:15px; } #LoginWrapper > div .inputs input[type=email], #LoginWrapper > div .inputs input[type=password], #LoginWrapper > div .inputs input[type=text] { flex: 0 0 calc(100% - 115px); margin: 0; min-width: 175px; max-width: 260px; font-size: 14px; height: 30px; } #LoginWrapper > div .button { text-align:center;margin-bottom:15px; } #LoginWrapper .acctNote, #LoginWrapper p { margin: 0 0 10px 0; padding: 0; font-size: 12px; } #LostPassword { margin: 0 auto; text-align:center; width:50%; } #LostPassword .lostInputs { margin-bottom:15px; } #LostPassword label { display: inline-block; vertical-align: middle; width: 110px;text-align: right;font-size: 1em; padding: 0; margin: 0 10px 0 0; } #LostPassword input[type=email] { display: inline-block; vertical-align: middle; margin: 0; width: 200px; } #ForgotPassword { display:none; } #ForgotPassword p { margin: 0; } #ForgotPassword #RetrieveResponse { margin:10px 0; font-size:1em; } #ForgotPasswordBtn, #KnowPasswordBtn { font-size:.9em; text-align:left; } #ForgotPassword.recovery { margin: 0 auto; width:350px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 15px; } #ForgotPassword.recovery h2, #ForgotPassword.recovery div, #ForgotPassword.recovery p, #ForgotPassword.recovery form { flex: 0 0 100%; } #ForgotPassword.recovery > div label { flex: 0 0 100px; text-align: right;font-size: 1em; padding: 0; margin: 0 5px 0 0; } #ForgotPassword.recovery > div .inputs { display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; margin-bottom:15px; } #ForgotPassword.recovery > div .inputs > div { flex: 0 0 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } #ForgotPassword.recovery > div .inputs > div:not(:last-child) { margin-bottom:15px; } #ForgotPassword.recovery > div .inputs input[type=email], #ForgotPassword.recovery > div .inputs input[type=password], #ForgotPassword.recovery > div .inputs input[type=text] { flex: 0 0 calc(100% - 115px); margin: 0; min-width: 175px; max-width: 260px; font-size: 14px; height: 30px; } #ForgotPassword.recovery > div .button { text-align:center;margin-bottom:15px; } #TrackingWrapper { margin: 0 auto; width:50% } #TrackingWrapper label { display: inline-block; vertical-align: middle; width: 200px;text-align: right;font-size: 1em; padding: 0px; margin: 0 5px 0 0; font-weight:bold; } #TrackingWrapper input[type=text], #TrackingWrapper input[type=password] { display: inline-block; vertical-align: middle; margin: 0;width: 200px; } #TrackingWrapper .subheader { color: var(--thematic-blue);font-size: 20px;margin-bottom:5px;} #TrackingWrapper .trackingInputs { margin:20px 0; } #TrackingWrapper .trackingInputs .input { margin: 0 0 10px 0; } #TrackingWrapper .button { margin-bottom:20px; text-align:center; } #ForgotOrderIDWrap, #KnowOrderIDWrap { margin: 0 0 10px 0; } #ForgotOrderIDWrap a, #KnowOrderIDWrap a { font-size: .9em; } #TrackingWrapper #RetrieveResponse { display:none; } #NavDiv { width: 100%; margin-bottom:20px; padding: 0;display: flex;flex-direction: row;flex-grow: 1;justify-content: flex-start;align-items: flex-start; } #NavDiv > div { flex: 0 1 auto;min-width: 100px;max-width: 250px;padding-right: 7px; } #NavDiv > div + div { margin-left: 20px; } #NavDiv .nav1 { } #NavDiv .nav2 { } #NavDiv .nav3 { } #NavDiv .nav4 { } #MobileNavDiv { display:none; } /******* Reset Password/Email ********/ #UpdateEmailAddress { flex: 0 0 100%; border-bottom: 1px solid #EFEFEF; padding-bottom: .5em; margin-bottom: 1em; } #UpdatePassword { flex: 0 0 100%; } #UpdatePassword label, #UpdateEmailAddress label { display:inline-block; vertical-align:middle; width: 112px; text-align: right; font-weight:bold; margin:0; margin-right: 5px; } #UpdatePassword div, #UpdateEmailAddress div { margin-bottom: 10px; } #UpdateEmailAddress .currentEmailAddress { display:inline-block; vertical-align:middle; line-height: 22px; } #UpdatePassword input, #UpdateEmailAddress input { height: 30px; width: 200px; } #CouponWrap input { height: 30px; width: 200px; } /********* Previous Orders ******/ #PreviousOrders { flex: 0 0 100%; } #OrderInfoTable { margin-bottom: 1em; font-size: 1em; } #OrderInfoTable .th { width:100%; text-align:left; font-weight:bold; } #OrderInfoTable .msg { margin-bottom: 1em; } #PreviousOrders .navWrapper { border-top: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF; padding: .5em 0; margin: .5em 0 1em 0;display: flex;justify-content: flex-start;align-items: center;flex-direction: row; } #PreviousOrders .navWrapper > div { font-size: .9em; } #PreviousOrders .searchTd { flex: 0 0 calc(100% - 250px); } #PreviousOrders .searchTd:only-child { flex: 0 0 calc(100%); } #PreviousOrders .searchTd select { height: 30px; } #PreviousOrders .navTd { text-align: right; flex: 0 0 250px; } #PreviousOrdersList { margin-bottom:20px; } #PreviousOrdersList .previousOrder { display: flex;justify-content: flex-start;align-items: flex-start; } #PreviousOrdersList .previousOrder + .previousOrder { margin-top: 15px; padding-top: 15px; border-top: 1px solid #efefef; } #PreviousOrdersList .orderInfoCell { padding:0;border:0;flex: 0 1 190px;min-width: 190px; } #PreviousOrdersList .orderItemsInfoCell { padding:0; border:0;flex: 1 1 auto; } #PreviousOrdersList .orderInformation { font-size:1em; margin:0; padding: 0; } #PreviousOrdersList .orderInformation label { flex: 0 0 85px; text-align: right; font-weight:bold;margin: 0 3px 0 0; } #PreviousOrdersList .orderInformation span { flex: 0 0 auto; text-align: right; } #PreviousOrdersList .orderButtons { text-align:center; } #PreviousOrdersList .orderButtons > div { margin-top: 1em; } #PreviousOrdersList .itemsWrapper { padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } #PreviousOrdersList .itemHeader { flex: 0 0 100%; display:flex; align-content: center; align-items: center; background-color: #EFEFEF;padding:5px;border: 1px solid #D2D2D2; } #PreviousOrdersList .itemWrapper:nth-child(odd) { background-color: #E1F7FE; } #PreviousOrdersList .itemWrapper { flex: 0 0 100%; display:flex; align-content: center; align-items: center; flex-wrap: wrap; margin: 0; padding:5px 0 5px 5px; } #PreviousOrdersList .qtyTh, #PreviousOrdersList .itemTh, #PreviousOrdersList .newQtyTh, #PreviousOrdersList .rateTh { font-weight:bold; font-size: 1em; } #PreviousOrdersList .itemTh { flex: 0 0 calc(100% - 255px); } #PreviousOrdersList .qtyTh { text-align:center;flex: 0 0 65px; } #PreviousOrdersList .newQtyTh { text-align:center;flex: 0 0 100px; } #PreviousOrdersList .rateTh { flex: 0 0 80px; } #PreviousOrdersList .itemCell { flex: 0 0 calc(100% - 255px); text-align:left; font-size: .9em; padding:0; margin: 0; } #PreviousOrdersList .qtyCell { flex: 0 0 65px;font-size:1em; text-align:center; } #PreviousOrdersList .qtyCell .qtyTh { display:none;} #PreviousOrdersList .newQtyCell { flex: 0 0 100px; text-align:center; } #PreviousOrdersList .newQtyCell span { font-size:.8em; } #PreviousOrdersList .newQtyCell .newQtyTh { display:none; } #PreviousOrdersList .ratingCell { flex: 0 0 90px;font-size: 1em; text-align:center; } #PreviousOrdersList .ratingCell i { margin-right: 3px; } #PreviousOrdersList .ratingCell span { color:#adadad; font-size:.8em; } #PreviousOrdersList .itemCell .itemTh { display:none; } #PreviousOrdersList .reviewWrapper { clear:both; } #PreviousOrdersList .buttonsWrapper { flex: 0 0 280px; margin: 5px 0 0 auto; text-align: center; } #reviewModal { background-color: #FFFFFF; width: 94%; max-width: 750px; padding: 20px; } #PreviousOrdersList.trackingOrderDetail { margin: 0 auto; width:100%; max-width: 800px; } #PreviousOrdersList.trackingOrderDetail .orderItemsInfoCell { padding:0; border:0;flex: 1 1 auto; } #PreviousOrdersList.trackingOrderDetail .itemTh { flex: 0 0 calc(100% - 65px); } #PreviousOrdersList.trackingOrderDetail .itemCell { flex: 0 0 calc(100% - 65px); } /********* ORDER INVOICE & CONFIRMATION PAGE ******/ #PrintOrder { background-color:#FFFFFF; padding: 0; text-align:right;font-size:.8em;margin-top: -10px; } #OrderDetails { background-color:#FFFFFF; padding: 0; } #Identity { margin-bottom: 10px;display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;flex-direction: row; } #Identity .returnAddress { font-size: 1em; flex: 0 0 100%; } #Identity .orderInfo { flex-basis: 50%; margin-bottom: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-evenly; align-items: flex-start; } #Identity #OrderNumCell { font-size: 1em;text-align: left; font-weight: bold;white-space:nowrap;margin-bottom:10px; } #Identity #OrderNumInfoCell { font-size: 1em;margin-bottom:10px; } #Identity .cellLabel { font-size: 1em;text-align: left; font-weight: bold;white-space:nowrap; flex: 0 0 85px; } #Identity .addressCell { font-size: 1em; flex: 0 0 calc(100% - 100px); } #MethodsTable { font-size: 1em;width: 100%; margin: 0 auto; border-top: 2px solid #333; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; } #MethodsTable .method { padding: 3px 0; flex: 0 0 170px; } #MethodsTable .method.empty { display: none; } #MethodsTable .th { font-size: 1em;text-align:center;font-weight:bold; } #MethodsTable .td { font-size: 1em;text-align:center; } #OrderItems { width: 100%; margin: 0 auto 20px auto; border-left: 1px solid #D2D2D2;border-bottom: 1px solid #D2D2D2; border-right: 1px solid #D2D2D2; padding-bottom: 5px; } #OrderItems .thWrap { border-bottom: 1px solid #636363; border-top: 1px solid #636363; padding: 3px; background-color: #EFEFEF;display: flex;justify-content: flex-start;align-items: center;flex-direction: row; } #OrderItems .th { font-size: 1em; font-weight:bold; } #OrderItems .descTh { flex: 1 1 calc(100% - 320px); } #OrderItems .costTh { flex: 0 0 100px;text-align:center; } #OrderItems .qtyTh { flex: 0 0 100px;text-align:center; } #OrderItems .priceTh { flex: 0 0 120px;text-align:center; } #OrderItems .product { display: flex;justify-content: flex-start;align-items: center;flex-direction: row;padding: 5px 10px; } #OrderItems .product:nth-child(odd) { background-color: #E1F7FE; } #OrderItems .descriptionCell { flex: 1 1 calc(100% - 320px);text-align:left;min-height:65px;font-size: 1em; } #OrderItems .priceCell { flex: 0 0 100px;font-size: 1em;text-align:center; } #OrderItems .priceCell .st, #OrderItems .itemTotalCell .st { text-decoration:line-through; color: #BFBFBF; font-size: .85em; } #OrderItems .quantityCell { flex: 0 0 100px;font-size: 1em;text-align:center; } #OrderItems .itemTotalCell { flex: 0 0 120px;white-space:nowrap;font-size: 1em;text-align: right; } #OrderItems .itemTotalCell .save { white-space:nowrap; color: #50AD55; font-size: .85em; } #OrderItems .descLbl, #OrderItems .costLbl, #OrderItems .qtyLbl, #OrderItems .priceLbl { display: none; } #OrderTotals { display: flex;justify-content: flex-end;align-items: flex-start;padding-right:10px; } #OrderTotals .totalLbls { flex-basis: 100px; margin-right: 20px;text-align: right; font-weight:bold; } #OrderTotals .totals { flex: 0 1 100px;text-align: right; } #OrderTotals .totalLbls div, #OrderTotals .totals div { } #OrderTotals .underline { border-bottom:1px solid black; } #savingsWrapper #savings { font-size: 1em; } #savingsText { font-size: 1em;padding:5px;text-align:left; margin-bottom:10px; } #savingsText .lblWrapperTotal { display:inline-block;width:150px;font-size: 1em;padding-right:5px;font-weight:bold;text-align:right; } #savingsText .totalSavings { display:inline-block;width:50px;font-size: 1em;text-align:right;font-weight:bold; } #savingsText .lblWrapper { display:inline-block;width:150px;font-size: 1em;padding-right:5px;text-align:right; } #savingsText .savings { display:inline-block;width:50px;font-size: 1em;text-align:right; } #OrderComments { font-size: 1em;width: 100%; padding: 0; } #OrderComments h4 { font-size: 1em;font-weight:bold;margin-bottom: 0; padding-left: 7px; } #OrderComments p { font-size: 1em;margin-top: 5px; padding: 0 7px } #Terms { font-size: 1em;width: 100%; } #Terms p { font-size: 1em;margin-bottom: 10px; padding-left: 7px; } #Terms h4 { font-size: 1em;font-weight:bold;margin-bottom: 0; } /********* RMA Orders List Page ******/ #RMAList { } #RMAList > div { position: relative; } #RMAList .previousOrder { display: flex;justify-content: flex-start;align-items: flex-start; } #RMAList .previousOrder + .previousOrder { margin: 10px 0 0 0; padding: 15px 0 0 0; border-top: 1px solid #efefef; } #RMAList .rmaInfoCell { border:0;flex: 0 1 200px;min-width: 200px; } #RMAList .orderInformation { } #RMAList .orderInformation .orderInformationLabel { display:inline-block; vertical-align:middle; width: 85px; text-align: right; font-weight:bold;margin: 0 3px 0 0; } #RMAList .orderInformation .orderInformation { display:inline-block; vertical-align:middle; width: auto; text-align: right; } #RMAList .RMAButtons { text-align:center; } #RMAList .RMAButtons > div { margin-top: 1em; } #RMAList .orderItemsInfoCell { border:0;flex: 1 1 auto; } #RMAList .itemHeader { display:block;background-color: #EFEFEF;padding:5px;border: 1px solid #D2D2D2; } #RMAList .RMAButtons { font-size: 1em; padding: 0.3rem; vertical-align:middle; text-align:center; } #RMAList .RMAButtons div { margin: .5rem 0; } #RMAList .RMAButtons .RMAExpired { margin: 0 auto;width: calc(100% - 40px); font-size:.8em;color: #de0300; } #RMAList .itemsWrapper { } #RMAList .itemWrapper { padding: 5px; } #RMAList .itemWrapper:nth-child(odd) { background-color: #E1F7FE; } #RMAList .itemTh { display:inline-block;vertical-align:top;width: calc(100% - 64px);font-weight: bold; } #RMAList .qtyTh { display:inline-block;vertical-align:top; width: 60px;font-weight: bold; } #RMAList .itemCell { display:inline-block;width: calc(100% - 64px); text-align:left;font-size: .9em;margin-bottom: 0.25rem; } #RMAList .itemCell .itemTh { display:none; } #RMAList .qtyCell { display:inline-block;vertical-align:top;width: 60px;font-size: 1em;text-align: center; } #RMAList .qtyCell .qtyTh { display:none; } #RMAList .buttonsWrapper { } #RMAList .reviewWrapper:first-child { width:100%; } #RMAList .orderInvoiceWrapper { margin-bottom:.5rem; } /********* RMA Order Page ******/ #RMADetails .orderInformation { font-size: 1em; margin:0 0 20px 0; } #RMADetails .orderInformation .orderInformationLabel { display:inline-block; vertical-align:middle; width: 130px; text-align: right; font-weight:bold; margin-right:5px; } #RMADetails .orderInformation .orderInfo { display:inline-block; vertical-align:middle; width: auto; } #RMADetails .errorMsg { width: 90%; margin: 10px auto; } #NewRow { display:none; } #RMAForm form { display: flex; justify-content: flex-start; align-items: flex-start; align-content: flex-start; flex-direction: row; flex-wrap: wrap; gap: 20px; } #RMAForm form > div { flex: 0 0 100%; } #RMAForm .productWarning { margin: -10px 0 15px 0; display: none; font-size: 1em;background-color: #FFE7E7;border: 1px solid #FFC7C6;padding:10px;color:#3B3B3B; } #OrderItemsList { margin: 0 auto; max-width:900px; } #RMADetails h1, #RMADetails h2, #RMADetails h3, #RMADetails h4 { flex: 0 0 100%; width: 100%; } #RMADetails .closeWhatsThis span, #RMADetails .returnMoreInline { cursor:pointer; border-bottom: 1px dotted #337ab7; color: #337ab7; font-size: 1em; font-weight: normal; } #RMAItems { width: 100%; margin: 0 auto; border-left: 1px dotted #D2D2D2;border-bottom: 1px dotted #D2D2D2; border-right: 1px dotted #D2D2D2; padding-bottom: 5px; } #RMAItems .th { font-size: 1em; border-bottom: 2px solid #333; border-top: 2px solid #333; padding: 3px; background-color: #EFEFEF; } #RMAItems .product { padding: 10px 5px; border-bottom: 2px solid black; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #RMAItems .product.bundle { background-color:#a9eaff; } #RMAItems .descriptionCell { flex: 0 0 100%; display: flex;justify-content: flex-start;align-items: center;flex-direction: row; flex-wrap: nowrap; align-content: flex-start; } #RMAItems .descriptionCell .lineItemLabel { font-weight:bold; flex: 0 0 135px;align-self: flex-start;text-align: right;margin-right: 10px; } #RMAItems .descriptionCell .description { text-align:left; font-size:1em;flex: 1 1 auto; } #RMAItems .descriptionCell .returnCell { text-align:center; font-size:1em;flex: 0 0 100px; } #RMAItems .descriptionCell .returnCell .return { } #RMAItems .descriptionCell .oemWarning { text-align:left; font-size:1em; } #RMAItems .product .subProduct { flex: 0 0 calc(100% - 85px); padding-right: 10px; margin:0 0 10px auto; display:none; } #RMAItems .product .subProduct .container { padding: 0; margin:0; font-size: 14px; } #RMAItems .product .subProduct .container > div:first-child, #RMADetails .returnReasonDetails { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #RMAItems .product .subProduct .container > div:first-child > div { flex: 0 0 100%; } #RMAItems .product .subProduct .closeContainer { font-size:.8em; } #RMAItems .product .subProduct .returnOptionsExplainedTable td { padding: 5px; } #RMAItems .product .subProduct .returnOptionsExplainedTable .td { width: 125px; font-weight:bold; text-align: right; } #RMADetails .removeForm { text-align:right; margin:10px 0; } #RMADetails .quantityGreaterThanOne { margin-bottom:10px; } #RMADetails .rmaLabel { text-align:left; font-weight:bold; font-size: 1em; flex: 0 0 125px; } #RMADetails .input { padding: 0; margin: 0; flex: 0 0 calc(100% - 125px); display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; } #RMADetails .returnQuantity { padding: 0; margin: 0 0 15px 0; display: flex; } #RMADetails .returnQuantity input { text-align:center; width:60px; } #RMADetails .returnQuantity .input > span { font-size: 12px; margin-left: 5px; } #RMADetails .returnReason { margin-bottom:15px; display: flex; } #RMADetails .returnReason .input { flex-wrap: nowrap; } #RMADetails .returnReason .select { flex: 0 0 49%; max-width: 200px; } #RMADetails .returnReason .select + .select { margin-left: 5px; } #RMADetails .returnOptions { margin-bottom: 10px; display: flex; } #RMADetails .returnOptions .input { flex: 1 1 auto; margin-right: 10px; max-width: 340px; } #RMADetails .returnOptions label { padding: 0; margin:0 0 0 4px; font-weight:normal; } #RMADetails .returnOptions label + input[type="radio"] { margin-left: 15px; } #RMADetails .returnOptions input[type="radio"] { padding: 0; margin: 0 0 0 0; } #RMADetails .returnOptions .whatsThis { display: inline; width: 30px; } #RMADetails .returnOptions .whatsThis .question::after { margin-top:-4px; } #RMADetails td .rmaLabel { width: 66%; display:inline-block; vertical-align: middle; } #RMADetails td .closeWhatsThis { width: 33%; display:inline-block; vertical-align: middle; font-size: 12px; text-align: right; } #RMADetails .returnOptionsExplained { margin-bottom:10px;display:none; } #RMADetails .returnReasonDetails { display: flex; } #RMADetails .returnReasonDetails .input { flex: 0 0 calc(100% - 125px); display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #RMADetails .returnReasonDetails textarea { font-size: 14px; display:block; width: 100%; max-width: 400px; } #RMADetails .returnReasonDetails span:not(.rmaLabel) { flex: 0 0 10%; font-size: 12px; } #RMADetails .returnReasonDetails span:not(.rmaLabel) + span:not(.rmaLabel) { flex: 0 0 75%; margin-left: 10px; } #RMADetails .returnReasonDetails .requiredReason { color: rgba(221, 14, 28, 1); } #RMADetails .returnMoreProduct { display: none; align-self: center; margin: 0 auto 10px auto; } #RMADetails .returnMoreProduct .subProductError { color: rgba(221, 14, 28, 1); font-size: 14px; font-weight: bold; padding-left: 5px; } #AlternativeEmail { margin: 0 auto; max-width:900px; } #AlternativeEmail p { font-size: .9em; } #AlternativeEmail .rmaLabel { display: inline-block;vertical-align: middle; text-align:left; font-weight:bold; font-size: 1em; width: 135px; } #AlternativeEmail .input { display: inline-block;vertical-align: middle; width: auto; padding: 0; margin: 0; } #AlternativeEmail .altEmail { margin-bottom: 10px; } #RMADetails #ShippingSection { display: none; } #RMADetails #BillingInfo { max-width: 900px; margin: 0 auto; display:none; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; align-items: flex-start; } #RMADetails #BillingInfo > div { flex: 0 0 100%; } #RMADetails #BillingInfo .reqMsg, #RMADetails #BillingInfo #BillingHead { margin-bottom: 5px; } #RMAButtons { text-align:center; } /********* Manage Shipping Addresses ******/ #ManageShippingAddresses { flex: 0 0 100%; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 20px; } #ManageShippingAddresses > div { flex: 0 0 100%; } #AddNewAddress { flex: 0 0 100%; width: 100%; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; } #ShippingAddresses { display: flex;justify-content: flex-start;align-items: stretch;flex-direction: row;flex-flow: row wrap; gap: 10px; } #ShippingAddresses .shippingAddress { border:1px solid #ccc; background-color:#f7f7f7; padding: 5px; flex: 0 0 calc(25% - 8px); font-size: .9em; display: flex; position: relative;flex-direction:column; } #ShippingAddresses .shippingAddress .shippingTxtOnly { font-size:1em;flex-grow:1;margin-bottom: 10px; } #ShippingAddresses .shippingAddress .addressActions { display: flex;justify-content: flex-end;align-items: stretch;flex-direction: row;flex-flow: row wrap; } #ShippingAddresses .shippingAddress .addressActions > .addressAction + .addressAction { margin-left: 5px; } #ShippingAddresses .reqMsg { display:block; width: 100%; } .defaultAddress { font-weight:bold; } /************* Edit Shipping Address ******************/ #ChoicesExplained { display:none; margin: -5px 0 15px 0; } /******** Manage Billing Options **********/ #AddBillingOption { padding: 0; margin-bottom:20px; text-align:right; } #AddBillingOption .loadingCard { display:none;font-size:.9em; } #SavedCardList { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px; } #SavedCardList .card { padding: 5px; border:#EFEFEF 1px solid; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px; } #BillingOptions { max-width: 900px; width: 100%; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } #BillingOptions #CardList #SavedCardList .card { flex: 0 0 100%; font-size: 1em; } #SavedCardList .card > div { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #SavedCardList .card .paymentType { background-color: #F7F7F7; padding: 5px;display: flex;justify-content: space-between;align-items: center; flex: 0 0 100%; font-weight: bold; } #SavedCardList .card .paymentType .paymentName { flex: 0 0 calc(100% - 85px); display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; } #SavedCardList .card .paymentType .paymentName > span { font-weight:bold; } #SavedCardList .card .paymentType .paymentName > span + span { margin-left: 10px; } #SavedCardList .card .paymentType .paymentName img { vertical-align:middle; height: 21px; width: 34px; margin-right: 5px; } #SavedCardList .card .paymentType .paymentName .defaultCard { font-size:.8em; font-style: italic; color: #adadad; } #SavedCardList .card .cardOpen { flex: 0 0 85px; display: flex; justify-content: flex-end; } #SavedCardList .card .loadingCard { display:none;font-size:.9em; flex: 0 0 85px; justify-content: space-between; align-content: center; align-items: center; } #SavedCardList .card .loadingCard img { width:auto; height:auto; } #SavedCardList .card .openOrderMsg { margin: 5px; } #SavedCardList .card .cardDetails { background-color: #FFF; padding: 5px; flex: 0 0 170px; } #SavedCardList .card .cardDetails .cardExpiry { } #SavedCardList .card .cardDetails .cardExpired { color: #FF0000; } #SavedCardList .card .billingAddress { padding: 5px; flex: 0 0 calc(100% - 275px); } #SavedCardList .card .billingAddress br + br { margin: 0; } #SavedCardList .card .deleteWrapper { flex: 0 0 80px; align-self: center; } #SavedCardList .card .cardExpired { color: #FF0000; } #SavedCardList .cardForm { padding:12px; background-color: #FFF; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } #SavedCardList .cardForm form { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } #SavedCardList .cardForm h3 { padding:0; margin-bottom: 0; } #SavedCardList .cardForm .cancelOrSaveCard { flex: 0 0 100%; max-width: 800px; display:none; } #SavedCardList .cardForm .heading { flex: 0 0 100%; max-width: 650px; align-items: flex-start; justify-content: flex-start; display: flex; } #SavedCardList .cardForm .reqMsg { max-width: 800px; } #SavedCardList .newCardForm { padding: 0; display: none; } #SavedCardList .newCardForm.submitError { display:flex; } #CreditCard { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: center; } #SavedCardList #CreditCardPaymentMethod .cardForm .credit-card-images { justify-content: center; margin-bottom: 10px; } #LoadAddressButtons { max-width: 800px;margin: 10px auto; } #LoadAddressButtons div { } #LoadAddressButtons .link { } #CreditCard .ccFields { display:flex; justify-content: space-between;align-items: flex-start;max-width: 400px;margin: 0 0 15px 0; flex-flow: wrap; } #CheckoutContent #CreditCard .ccFields { max-width: unset; } #CreditCard .ccFields .creditCardInfo { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; gap: 5px; } #CreditCard .ccFields .creditCardInfo .inputs { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; gap: 5px; } #CreditCard .ccNumber { } #CreditCard .ccNumber img { vertical-align:middle; height: 21px; width: 34px; } #CreditCard .defaultCard { font-weight:bold; } #CreditCard #IsDefaultCardTxtLbl { text-align:center; } #CreditCard .creditCardInfo .cardType { flex: 0 0 40px; display: flex; justify-content:center; } #CreditCard .creditCardInfo .cardType img { display:none; } #CreditCard .creditCardInfo .ExpiryMonth { flex: 0 0 110px; width: 110px; } #CreditCard .creditCardInfo .ExpiryYear { flex: 0 0 110px; width: 110px; } #CreditCard .creditCardInfo label { flex:0 0 130px; text-align:right; justify-content: flex-end; } #CreditCard .creditCardInfo #CardNumber { font-size: 14px; height: 30px; flex: 0 0 140px; width: 140px; } #CreditCard .creditCardInfo input[type=text], #CreditCard .creditCardInfo input[type=number] { font-size: 14px; height: 30px; } #CreditCard .creditCardInfo select { font-size: 14px; height: 30px; } #CreditCard .creditCardInfo select + select { } #CreditCard .creditCardInfo input[type=checkbox] { margin: 0; padding:0; } #CreditCard .creditCardInfo #ExplainCCV { flex: 0 0 auto; align-self: flex-start; cursor: pointer; } #CreditCard .creditCardInfo #ExplainCCV .question::after { font-size: 20px; } #CreditCard .creditCardInfo #ExplainCCV img { width:20px; } #CreditCard .creditCardInfo #CardNumberTxt { flex: 0 0 calc(100% - 240px); text-align: left; min-width: 185px; } #CreditCard .creditCardInfo #CardNumberTxt:empty { display: none; } #CreditCard .creditCardInfo #CardNumberTxt img { vertical-align:middle; height: 21px; width: 34px; } #CreditCard .creditCardInfo #CardCVN, #CreditCard .creditCardInfo .CardCVN { width:50px; height: 30px; } #CreditCard .ccAddressWrapper { flex: 0 0 100%; display:flex;justify-content: flex-start;align-items: flex-start;max-width: 800px;margin: 0 auto 15px auto; } #CreditCardPaymentMethod .credit-card-images { flex: 0 0 100%; display: none; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px; } #CreditCardPaymentMethod .credit-card-images > .credit-card { flex: 0 0 49%; max-width: 300px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CreditCardPaymentMethod .credit-card-images > .credit-card h3 { font-size:1.3em; margin: 0; } #CreditCardPaymentMethod .credit-card-images > .credit-card img { width: 100%; } #BillingLeft, #BillingRight { max-width: 340px; display:flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 5px; } #BillingLeft { flex: 0 0 48%; } #BillingLeft .inputs, #BillingRight .inputs { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; gap: 5px; } #BillingLeft label, #BillingRight label { flex: 0 0 130px; text-align:right; } #BillingLeft input[type=text], #BillingRight input[type=tel], #BillingRight input[type=text], #BillingRight select { flex: 0 0 calc(100% - 140px); width: calc(100% - 140px); font-size: 14px; height: 30px; } #BillingRight { flex: 0 0 52%; } #BillingRight #USPhoneWrapper { display:flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: nowrap; align-content: center; flex: 1; max-width: 240px; flex-flow: inherit; } #BillingRight input#Phone { min-width: 110px; max-width: 110px; flex: 0 0 110px; } #BillingRight label.extLabel { flex:0 0 30px; min-width: 30px; } #BillingRight input[type=text].extension { min-width: 45px; max-width: 45px; flex: 0 0 45px; } #AddressButtons { max-width: 800px;margin: 0 auto; text-align:right; } #AddressButtons button { margin-right: 10px; } /************ Shopping Cart Page *****************/ #ShoppingCartContent { background-color:#FFFFFF; } #CartTbl { margin-bottom: 20px; } #CartTbl form { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CartTbl form > div { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CartTbl form .buttons .cont { flex: 0 0 190px; } #CartTbl form .buttons .recalc { flex: 0 0 calc(100% - 190px); display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; align-items: flex-start; } #CartTbl form .buttons .recalc a + button { margin-left: 10px; } #CartTbl form .buttons.topButtons { margin-bottom: 10px; } #CartTbl form .proceed { margin: 0 0 10px 0; padding: 0; } #CartTbl form .proceed p { margin: 0; padding: 0; font-size: .9em; } #CartTable { margin: 0 auto 20px auto; padding-bottom: 5px; position: relative; } #CartTable input[type=text], #CartTable input[type=tel] { height: 30px; font-size: 14px; min-width: 70px; padding: 5px; } #CartTable input[disabled=disabled] { color: #CCC; } #CartTable .tr { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid #ededed; } #CartTable .tr.thWrap { border-bottom: 1px solid #e2e2e2;; align-items: center; padding: 0; } #CartTable .tr .th { font-size: 1em; font-weight:bold; padding: 5px 0; } #CartTable .tr .th.removeTh { flex: 0 0 40px; padding: 0; } #CartTable .tr .th.descTh { flex: 0 0 calc(100% - 330px); } #CartTable .tr .th.costTh { flex: 0 0 100px;text-align:center; } #CartTable .tr .th.qtyTh { flex: 0 0 100px;text-align:center; } #CartTable .tr .th.priceTh { flex: 0 0 100px;text-align:center; } #CartTable .tr .th.subTotalTh { flex: 0 0 90px;text-align:center; } #CartTable .tr .td { min-height: 85px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CartTable .tr .td > div { flex: 0 0 auto; line-height: normal; } #CartTable .tr .td .st { text-decoration:line-through; color: #BFBFBF; font-size: .85em; } #CartTable .tr .td.removeTd { flex: 0 0 40px; height: 40px; justify-content: center; align-content: center; } #CartTable .tr .td.removeTd input { margin: 0; padding: 0; } #CartTable .tr .td.descriptionTd { text-align:left; flex: 0 0 calc(100% - 330px); padding: 5px 5px 0 0; margin-bottom: 10px; } #CartTable .tr .td.descriptionTd .img { flex: 0 0 80px; justify-content: center; align-content: center; } #CartTable .tr .td.descriptionTd .img img { width: 100%; } #CartTable .tr .td.descriptionTd .desc { flex: 0 0 calc(100% - 100px); padding-left: 5px; } #CartTable .tr .td.descriptionTd .desc .prodTitle { font-weight:bold; flex: 0 0 100%; } #CartTable .tr .td.descriptionTd .desc .productDesc { flex: 0 0 100%; display: none; font-size: .85em; } #CartTable .tr .td.descriptionTd .desc .promoPrice { font-weight:bold; font-size: 12px; } #CartTable .tr .td.descriptionTd .desc .expand { font-size: 11px; } #CartTable .tr .td.descriptionTd .desc .expand .moreInfoLink { text-align:center; font-size:.9em; color:#8B9198; cursor:pointer; text-decoration: underline; text-decoration-style: dotted; } #CartTable .tr .td.quantityTd { flex: 0 0 100px; justify-content: center; align-content: center; } #CartTable .tr .td.quantityTd .stepper span i { line-height:22px; } #CartTable .tr .td.priceTd { flex: 0 0 100px; justify-content: flex-end; align-content: center; text-align: right; } #CartTable .tr .td.priceTd > div { flex: 0 0 100%; text-align: right; } #CartTable .tr .td.priceTd > div.costTd { margin-top: 5px; text-align: center; } #CartTable .tr .td.priceTd input.unit-price { min-width: unset; width: 60px; text-align: center; } #CartTable .tr .td.itemTotalTd { white-space:nowrap; padding: 0; flex: 0 0 90px; justify-content: flex-end; align-content: center; position: relative; } #CartTable .tr .td.itemTotalTd > div { flex: 0 0 100%; text-align: right; padding-right: 5px; } #CartTable .tr .td.itemTotalTd .save { white-space:nowrap; color: #50AD55; font-size: .85em; } #CartTable .tr .td.itemTotalTd .savings .question { line-height: 1.2; } #CartTable .tr .td.itemTotalTd #CalculationExplained { display:none; right:90px; white-space:normal; text-align: left; background: #fff; padding: 10px; } #CartTable .tr .td.itemTotalTd #CalculationExplained h4 { margin-bottom: 10px; } #CartTable .tr .td.descriptionTd .discount.img{ color: #50AD55; text-align: center; font-size: 110%; font-weight: bold; border: 3px solid #BFBFBF; border-style: dashed; } #CartTable .cartBottom.tr { padding: 10px 5px 0 10px; justify-content: flex-start; gap: 10px; border: none; } #CartTable .cartBottom .codeTitle { font-weight: bold; font-size: 1em; margin-bottom:5px; } #CartTable .cartBottom p { margin: 0 0 2px 0; padding:0; font-size: 11px; } #CartTable .cartBottom .note { font-size: 10px; color: #BFBFBF; } #CartTable .cartBottom #CodeEntry { order: 2; flex: 0 0 calc(100% - 460px); display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 15px; } #CartTable .cartBottom #CodeEntry input[type=text] { width: 120px; } #CartTable .cartBottom #SubTotalCell { order: 3; flex: 0 0 240px; } #CartTable .cartBottom #SubTotalCell .subtotal { text-align: right; } #CartTable .cartBottom #SubTotalCell .subtotal .subtotalLbl { margin:0; padding: 0; font-weight: bold; } #CartTable .cartBottom #SubTotalCell .subtotal .subtotalTxt { } #CartTable .cartBottom #SubTotalCell .shtaxTxt { font-size: 10px; text-align: right; color: #AAAAAA; } #CartTable .cartBottom #SubTotalCell .greenBox { margin: 0; font-size: 12px; } #CartTable .cartBottom #SubTotalCell .greenBox + .greenBox { margin-top: 10px; } #CartTable .cartBottom #SubTotalCell .freeShippingSubText { font-size:11px; } #CartTable .cartBottom #EstimateCell { order: 1; flex: 0 0 200px; } #CartTable .cartBottom #EstimateCell .codeTitle { font-weight: bold; font-size: 1em; } #CartTable .cartBottom #EstimateCell .codeText { margin: 0 0 5px 0; padding:0; font-size: 11px; } #LoggedIn { margin: 0 auto 40px auto; width: 50%; text-align:center; } #LoggedIn .loginTitle { font-weight: bold; font-size: 1.2em; } #LoggedIn .loginText { margin: 0 0 10px 0; padding:0; font-size: .8em; } #EarnPointsNotice { max-width: 400px; border: 1px solid #ccc; margin: 10px auto; padding: 5px; position: relative; } #EarnPointsNotice .rewardsTitle { font-weight: bold; font-size: 1.2em; } #EarnPointsNotice p { margin:0; } #EarnPointsNotice .earnMsg { display: inline-flex; height: 16px; position: unset; } #EarnPointsNotice .earnMsg .question::after { margin: 0; padding: 0; } #EarnPointsNotice .earnMsg .hover { top: 45px; } #PrivacyPolicy { display: none; } .tacNote { text-align: right; font-size: 12px; margin-top: 10px; } /******* CHECKOUT PAGE **********/ #ShoppingContent { width:100%; padding: 20px; background: #FFF; border:1px solid #e2e2e2; } #CheckoutContent #ValidationSummary { flex: 0 0 100%; max-width: 900px; } #CheckoutContent #frmSubmitOrder { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: flex-start; width: 100%; gap: 20px; } #CheckoutContent #ShipOptionsTotals { flex: 0 0 100%; max-width: 900px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 20px; } #CheckoutContent #BillingInfo { flex: 0 0 100%; max-width: 900px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; } #CheckoutContent #AdditionalOptions { flex: 0 0 100%; max-width: 900px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; } #CheckoutContent #AdditionalOptions > div, #CheckoutContent .heading { flex: 0 0 100%; } #CheckoutContent h3 { margin-bottom: 0; flex: 0 0 100%; } #CheckoutContent p { } #ShippingSection { flex: 0 0 100%; max-width:900px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ShippingSection .heading { flex: 0 0 100%; } #ShippingSection #ShippingWarning { display:none; flex: 0 0 100%; } #ShippingSection #ShippingTxtOnly { flex: 0 0 calc(100% - 240px); flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ShippingSection #EditAddressOptions { flex: 0 0 240px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; align-items: flex-end; justify-content: flex-start; } #ShippingSection #EditAddressOptions div { margin-bottom: 10px; } #ShippingSection #EditAddressOptions.editMode { margin: 0; height: auto; flex: 0 0 100%; flex-flow: row; justify-content: flex-start; } #ShippingSection #EditAddressOptions.editMode div { margin:0 5px 0 0; flex: 0 0 auto; } #ShippingSection #EditAddressOptions.textMode div { margin-bottom:10px; } #ShippingSection .shippingAddress .reqMsg { width: 100%; } #ShippingSection #EditShippingAddress { flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ShippingSection #EditShippingAddress h2 { } #ShippingSection #EditShippingAddress .reqMsg { flex-basis: 100%; flex: 0 0 100%; align-self: flex-start; margin: 5px 0; } #ShipTo { flex: 0 0 100%; margin-bottom:20px; display: flex;justify-content: center;align-items: center;flex-direction: row;flex-wrap: wrap; } #ShipTo > div { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; line-height: normal; align-content: center; flex-wrap: nowrap; flex-direction: row; } #ShipTo label { line-height: normal; font-weight: normal; font-size: 14px; } #ShipTo .atLbl { flex: 0 0 135px; font-weight: bold; justify-content: flex-end; } #ShipTo .slLbl { flex: 0 1 130px; } #ShipTo .poLbl { flex: 0 1 95px; } #ShipTo .apoLbl { flex: 0 1 130px; } #ShipTo input[type=radio] { margin:0 5px 0 0; line-height: normal; } #ShipTo .whichShouldIChoose { cursor:pointer; font-weight: normal; font-size: .85em; text-decoration:underline; text-decoration-style: dotted; color: rgba(105, 105, 115, 1); flex: 1 1 130px; justify-content: flex-start; } #ShipToErrors { flex: 0 0 100%;display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: row; flex-wrap: wrap; align-content: flex-start; } #ShipToErrors .addressIsPOBox, #ShipToErrors .addressIsNotPOBox { display:none; } #ShippingSection #EditShippingAddress .ccAddressWrapper { flex:0 0 100%; margin: 0 auto 15px 0; display: flex;justify-content: center;align-items: flex-start;flex-direction: row; flex-wrap: wrap; } #ShippingLeft { flex: 0 0 350px; display: flex;justify-content: flex-start;align-items: center;flex-direction: row; flex-wrap: wrap; align-content: center; gap: 5px 0; } #ShippingLeft > div { flex: 0 0 100%; display: flex;justify-content: flex-start;align-items: center;flex-direction: row; flex-wrap: nowrap; align-content: flex-start; } #ShippingLeft > div + div { margin-top: 5px; } #ShippingLeft label { flex: 0 0 135px; text-align:right;margin-right:4px; font-weight:bold; } #ShippingLeft label.extLabel { } #ShippingLeft input[type=text], #ShippingLeft select, #ShippingLeft span { flex: 0 0 calc(100% - 140px); max-width:210px; height: 30px; } #ShippingLeft #ShipToAddressLineTwo { flex-basis: 190px; margin-right: 2px; } #ShippingLeft .addressLine2 { position:relative; flex-wrap: wrap; } #ShippingLeft .aptLine { color:#717171; text-align:right;font-size:.7em;margin: 0; flex: 0 0 90%; } #ShippingLeft .help-tip { text-align: center;background-color: #A7C2CF;border-radius: 50%; height: 19px; width: 19px; font-size: 16px;line-height: 22px;cursor: pointer; } #ShippingLeft .help-tip:before { content: '?';font-weight: bold;color: #fff; } #ShippingLeft .help-tip:hover span { display: block;transform-origin: 100% 0%;-webkit-animation: fadeIn 0.3s ease-in-out;animation: fadeIn 0.3s ease-in-out;z-index:100; } #ShippingLeft .help-tip span { display: none;text-align: left;background-color: #F8F8F8;padding: 5px; position: absolute;border-radius: 3px;box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);color: #333;font-size: .8em;line-height: 1.4;right: -250px;bottom: -25px; } #ShippingLeft #Phone, #ShippingLeft #ShipToPhone { width: 120px; } #ShippingLeft #Extension, #ShippingLeft #ShipToExtension { width: 45px; } #ShippingLeft #USPhoneWrapper label, #ShippingLeft #USShipToPhoneWrapper label { } #ShippingLeft .btnWrap { flex: 0 0 100%; justify-content: flex-end; margin-top: 10px; } #ShippingRight { flex: 1 1 40%; max-width: 400px; display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: row; flex-wrap: wrap; align-content: flex-start; margin-left: 10px; } #ShippingRight #VerifiedAddressHeader { margin-bottom: 15px; } #ShippingRight p { margin: 0; padding: 0; font-size:14px; } #ShippingRight .errorMsg p:first-child { margin-bottom: 10px; } #ShippingRight #VerifiedDisclaimer { } #ShippingRight #VerifiedShippingAddresses { position:relative; margin-bottom: 15px; } #ShippingRight #VerifiedShippingAddresses h3 { margin: 0 0 5px 0; font-size: 1.3em; } #ShippingRight #VerifiedShippingAddresses .verifiedAddress { font-weight:bold;color:#50AD55; font-size: 14px; } #ShippingRight #VerifiedShippingAddresses .addressValidationIssueLabel { font-weight:bold; } #ShippingRight #VerifiedShippingAddresses .addressValidationIssueSuggestion { margin-top:15px; } #ShippingRight #VerifiedShippingAddresses .addressValidationError { color:#ff0000; } #ShippingRight #VerifiedShippingAddresses .addressValidationIssue + .addressValidationIssue { margin-top:15px; } #ShippingRight #VerifiedShippingAddresses .cityIssue { } #ShippingRight #VerifiedShippingAddresses .stateIssue { } #ShippingRight #VerifiedShippingAddresses .postalCodeIssue { } #ShippingSection #SaveAddress, #ShippingSection #SetDefault { flex: 0 0 75%; } #ShippingSection #SaveAddress input, #ShippingSection #SetDefault input { margin: 0 5px 0 0; } #SaveAddress span, #SetDefault span { } #ShipOptionsTotals #ShippingMethods { flex: 0 0 calc(100% - 280px); } #selectTxt { text-align: center; font-size: 12px; justify-content: center; } #ShipOptionsTotals #ShippingMethods select { width: 215px; } #ShipOptionsTotals #CartTotals { flex: 0 0 260px; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ShipOptionsTotals #SubTotalCell { flex: 0 0 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ShipOptionsTotals #SubTotalCell > div { flex: 0 0 100%; max-width: 250px; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ShipOptionsTotals #SubTotalCell > div label { flex: 0 0 170px; } #ShipOptionsTotals #SubTotalCell > div span { flex: 0 0 80px; text-align: right; } #ShipOptionsTotals #SubTotalCell > div.greenBox span { flex: 0 0 68px; text-align: right; } #ShipOptionsTotals #SubTotalCell .subtotalTxt input[type=text] { width: 50px; } #ShipOptionsTotals #SubTotalCell .greenBox { margin:0; max-width: unset; } #ShipOptionsTotals #CartTotals .sa-coupon-entry { flex: 0 0 100%; } #ShipOptionsTotals #CartTotals .sa-coupon-entry .ajax-spinner { display: none; } #PaymentMethodsList { margin-bottom:10px; flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px; } #PaymentMethodsList > div { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #PaymentMethodsList > div.inputs { margin-left: 50px; flex: 0 0 calc(100% - 50px); gap: 5px; height: 25px; align-content: center; align-items: center; } #PaymentMethodsList > div input { flex: 0 0 40px; height: 18px; } #PaymentMethodsList .nprLbl { } #PaymentMethodsList .netLbl { } #PaymentMethodsList .ccLbl { } #PaymentMethodsList .ppLbl { } #BillingHead { flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #BillingHead p { padding: 0; margin: 0 0 5px 0; } #PayPalPaymentMethod { flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #PayPalPaymentMethod > div { flex: 0 0 100%; } #PaymentMethod { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 20px; } #CheckoutContent #PaymentMethod { max-width: 900px; flex: 0 0 100%; margin: 0 auto; background: #fbfbfb; padding: 10px; border: 1px solid #CCC; } #CreditCardPaymentMethod { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #CreditCardPaymentMethod #CreditCards { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px 0; } #CreditCardPaymentMethod #CreditCards > div { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; order: 1; } #CreditCardPaymentMethod #CreditCards > div#SecureWrapper { order: 0; } #CreditCardPaymentMethod #CreditCards > div#CreditCard { flex: 0 0 calc(100% - 230px); text-align: right; margin: 0; } #CreditCardPaymentMethod #CreditCards > div#CardButtons { flex: 0 0 230px; display: flex; flex-direction: column; align-items: flex-end; align-content: flex-end; gap: 10px; } #CreditCardPaymentMethod #CreditCards > div#CardButtons div { flex: 0 0 100%; } #CreditCardPaymentMethod #CreditCards > div#CreditCard #CardToCharge { flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; flex: 0 0 210px; } #CreditCardList #SavedCardList .card { flex: 0 0 calc(25% - 10px); min-width: 150px; font-size: .9em; } #CreditCardList p { padding:0 0 0 4px; margin: 0; } #CreditCardPaymentMethod #CreditCardList { display:none;width:calc(100% - 40px);max-width: 900px;height:500px;background-color:#FFF;z-index:120;padding: 10px;position:relative; } #CreditCardPaymentMethod #CreditCardList h4 { margin-bottom: 5px; } #CreditCardPaymentMethod #CreditCard .creditCardInfo .ExpiryMonth { flex: 0 0 90px; width: 90px; } #CreditCardPaymentMethod #CreditCard .creditCardInfo .ExpiryYear { flex: 0 0 90px; width: 90px; } #SavedCardList .card > div.c { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; } #SavedCardList .card > div.c .img { flex: 0 0 50px; } #SavedCardList .card > div.c .img img { width: 100%; } #SavedCardList .card > div.c .cardType { flex: 0 0 calc(100% - 50px); text-align: right; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } #SavedCardList .card > div.c .cardType > span { flex: 0 0 100%; } #SavedCardList .card > div.u { text-align: center; justify-content: center; } #BillingAddressEntry { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; align-items: flex-start; gap: 10px 0; } #BillingTxtOnly { flex: 0 0 calc(100% - 230px); display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; margin: 0; } #BillingEditButtons { flex: 0 0 230px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #BillingEditButtons div { margin-bottom: 10px; } #BillingEditButtons { display: none; } #BillingEditButtons.editMode { flex: 0 0 100%; gap: 7px; text-align: left; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #BillingEditButtons.editMode div { } #BillingEditButtons.editMode div.addBillAddress { } #BillingEditButtons.editMode div.editBillAddress { display: none; } #BillingEditButtons.textMode { flex: 0 0 230px; display: flex; flex-direction: column; align-items: flex-end; align-content: flex-end; } #BillingEditButtons.textMode div { } #BillingEditButtons.textMode div.addBillAddress { display: none; } #BillingEditButtons.textMode div.editBillAddress { display: inherit; } #BillingAddress { margin-bottom: 10px; flex: 0 0 100%; flex-wrap: wrap; justify-content: center; } #BillingAddress .copyBillingError { display:none; } #NetTermsPaymentMethod { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #POReferenceInfo { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; gap: 5px; } #POReferenceInfo label { flex: 0 0 200px; text-align: right; } #POReferenceInfo input { height: 30px; } #POReferenceInfo h3 { font-size:1em; } #StaffAssist, #OrderOriginationOption, #BlindOption, #DoubleBlindOption { margin-bottom:10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: center; gap: 10px; } #StaffAssist label, #OrderOriginationOption label, #BlindOption label, #DoubleBlindOption label { flex: 0 0 285px; text-align: right; } #StaffAssist select, #OrderOriginationOption select { height: 30px; } #DoubleBlindOption span { color: #AAA; font-style: italic; font-size: 10px; } #AdditionalEmails { margin-bottom:10px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } #AdditionalEmails label { flex: 0 0 285px; text-align: right; margin: 0 5px 0 0; } #AdditionalEmails textarea { margin-right: 10px; flex: 0 0 350px; height: 30px; } #AdditionalEmails div { flex: 0 0 100%; max-width: 485px; margin-left: 290px; font-size: 12px; } #CommentsEntry { margin-bottom:10px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; } #CommentsEntry label { flex: 0 0 285px; text-align: right; margin: 0 5px 0 0; } #CommentsEntry textarea { margin-right: 10px; flex: 0 0 350px; height: 70px; } #AgreeNotice, #CheckoutBtn, #CustomerRewardsNotice { width: 80%; margin: 0 auto 15px auto; max-width: 900px; } #AgreeNotice,#TimingNotice, #RewardsNotice { font-size: 1em; } #RewardsNotice { margin: 0 0 10px 0; display: flex; align-items: center; justify-content: flex-start; align-content: center; gap: 10px; flex-wrap: nowrap; flex-direction: row; } #CheckoutBtn button { display:block; margin:0 auto; } #ProcessingOrder { border: 1px solid #b5b5b5; padding:0px; max-width: 480px; width: 90%; height:150px; background: #FFF; display:none; z-index: 11000; box-shadow: 0px 2px 5px 2px #666; } #ProcessingOrder img { display:inline-block; vertical-align:middle; margin-right: 6px; } #ProcessingOrder span { display:inline-block; vertical-align:middle; } #ProcessingOrder .loadingContent { font-size:1em;padding: 10px; } #ProcessingOrder .loadingContent .processing { font-size:1.2em;color:#50AD55; } #ProcessingOrder .loadingContent .dontClose { margin-top:5px; } #ProcessingOrder .loadingPayPal { font-size:1em;padding: 10px; display:none; } #ProcessingOrder .loadingPayPal .processing { font-size:1.2em;color:#50AD55; } #ProcessingOrder .loadingPayPal .dontClose { margin-top:5px; } #TimingNotice { text-align: center; font-size: .8em; } /*********************************/ /***** Sitemap *****/ #SiteMap { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px; } #SiteMap .container { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; border: 1px solid #e2e2e2; padding: 10px; } #SiteMap .container:empty { display: none; } #SiteMap .container h2 { padding: 0; margin: 0 0 0 0; font-size: 18px; } #SiteMap .container h3 { padding: 0; margin: 0 0 0 0; font-size: 14px; } #SiteMap .container ul { padding-left: 20px; margin: 0; } #SiteMap .container .section { flex: 0 0 50%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 0px; } #SiteMap .container .section > div { flex: 0 0 100%; margin: 0 0 0 20px; } #SiteMap .container .section > div:not(:last-child) { margin-bottom: 10px; } #SiteMap .page-count { margin: 10px 0; } /*********************************/ /***** SITEWIDE FOOTER *****/ footer { margin-top: 30px; position:relative; } footer .grid-row-1 { background: rgba(58, 71, 84, 1); padding: 30px; } footer .grid-row-1::before { display: block; left: 0; width: 100vw; } footer .grid-row-1 .grid-col-1 {flex: 0 0 100%; } footer .grid-row-1 .grid-col-1 .grid-items { justify-content: flex-start; } footer .grid-row-1 .grid-col-1 .grid-item { height: auto; } /*************** Social Media Icons *************************/ footer .grid-row-2 { background: rgba(240,242,245, 1);padding: 15px;padding-right: 5px;padding-left: 5px; } footer .grid-row-2::before { display: block;left: 0;width: 100vw; } footer .grid-row-2 .grid-col-1 {flex: 0 0 100%; } footer .grid-row-2 .grid-col-1 .grid-items { justify-content: flex-start; } footer .grid-row-2 .grid-col-1 .grid-item { height: auto; } /*************** Main Footer Content *************************/ footer .grid-row-3 { padding: 20px 0; display: flex; } footer .grid-row-3::before { display: block;left: 0;width: 100vw; } footer .grid-row-3 .grid-cols { flex: 0 0 100%; display: flex; align-items: flex-start;flex-direction: row;flex-wrap: nowrap; align-content: flex-start; justify-content: center; } footer .grid-row-3 .grid-cols .grid-col { display:flex; flex-flow: row wrap; align-items: flex-start; flex: 0 0 20%; width: unset; min-height: 275px; } footer .grid-row-3 .grid-cols .grid-col:first-child { padding-left: 20px; } footer .grid-row-3 .grid-cols .grid-col + .grid-col { border-left: 1px solid #e2e2e2; padding-left: 15px; margin-left: 10px; } footer .grid-row-3 .grid-cols .grid-col .grid-items { justify-content: flex-start; flex: 1 1 100%; } footer .grid-row-3 .grid-cols .grid-col .grid-items .grid-item { display:flex; justify-content: flex-start; flex-direction: row; align-content: flex-start; flex-wrap: nowrap; flex: 0 0 100%; width: unset; } footer .grid-row-3 .grid-cols .grid-col-1 { flex: 0 0 200px; } footer .grid-row-3 .grid-cols .grid-col-2 { flex: 0 0 220px; } footer .grid-row-3 .grid-cols .grid-col-3 { flex: 0 0 260px; } footer .grid-row-3 .grid-cols .grid-col-4 { flex: 0 1 400px; padding-right: 10px; } footer .grid-row-3 .grid-cols .grid-col-4 .grid-item { } footer .grid-row-3 .grid-cols .grid-col-4 .module-newsletter { flex: 0 0 100%; display: flex; flex-direction: row; text-align: left; justify-content: flex-start; flex-wrap: wrap; align-content: flex-start; align-items: center; } footer .grid-row-3 .grid-cols .grid-col-4 .module-newsletter .title { flex: 0 0 100%; } footer .grid-row-3 .grid-cols .grid-col-4 .module-newsletter .title::after { left: 0;right: auto;transform: none; } footer .grid-row-3 .grid-cols .grid-col-4 .module-newsletter .ml-coupon { display: none; flex-wrap: wrap; flex-direction: row; } footer .module-newsletter .module-body { display: flex; flex: 0 0 100%; justify-content: inherit; flex-wrap: wrap; flex-direction: row; align-content: flex-start; gap: 10px; } footer .module-newsletter .module-body > div { flex: 0 0 100%; display: flex; justify-content: inherit; align-self: flex-start; flex-wrap: nowrap; flex-direction: row; } footer .module-newsletter .module-body .newsletter-text { color: rgba(105, 105, 115, 1); } footer .module-newsletter .module-body .newsletter-form { flex: 0 0 100%; width: 100%; } footer .module-newsletter .module-body .subTxt { color: rgba(105, 105, 115, 1); font-size: .8em; } footer .module-newsletter .module-body .errorTxt:empty { display: none; } footer .module-newsletter .module-body .errorTxt.errorMsg { margin-bottom: 0; } footer .module-newsletter .module-body .newsletter-form form { max-width: 100%; display: flex; flex: 0 0 100%; } footer .module-newsletter .module-body .newsletter-form .input-group { height: 40px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; flex: 0 0 100%; } footer .module-newsletter .module-body .newsletter-form .input-group input { flex: 0 0 100%; max-width: 300px; height: 40px; padding: 5px; } footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn {width: 1%; white-space: nowrap; vertical-align: middle; position: relative; font-size: 0; } footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn { position: absolute; right: 0; padding: 2px 6px; min-width: 70px; min-height: 30px; height: 40px; border-top-left-radius: 0; border-bottom-left-radius: 0; } footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn::before { content: "\eb79" !important; font-family: icomoon !important;margin-right: 5px; } footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn, footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn:visited { font-size: 12px;font-weight: 400;text-transform: none; } footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn:hover { box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.25); } footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn:active, footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn:hover:active, footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn:focus:active { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25); } footer .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn:focus { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25); } /*************** Copyright / credit cards *************************/ footer .grid-row-4 { background: rgba(58, 71, 84, 1); padding: 0 20px; } footer .grid-row-4::before { display: block; left: 0; width: 100vw; } footer .grid-row-4 .grid-col-1 { flex: 0 0 calc(100% - 290px); align-self: center; } footer .grid-row-4 .grid-col-1 .grid-items { justify-content: center; } footer .grid-row-4 .grid-col-1 .grid-item { height: auto; } footer .grid-row-4 .grid-col-2 { flex: 0 0 290px; } footer .grid-row-4 .grid-col-2 .grid-items { justify-content: center; } footer .grid-row-4 .grid-col-2 .grid-item { height: auto; } footer .grid-cols { flex-flow: row wrap; align-items: flex-start; } footer .grid-cols .grid-col { flex-flow: row wrap; align-items: flex-start; } footer .icons-menu > ul { list-style: none; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0; padding: 0; } footer .icons-menu > ul > .menu-item {margin: 0;position: relative;} footer .icons-menu > ul > .menu-item:hover {z-index: 1;} footer .icons-menu > ul > .menu-item > a {display: flex;align-items: center;justify-content: center;flex-direction: column;font-size: 22px;position: relative;} footer .icons-menu > ul > .menu-item > a .links-text {font-size: 0.47em;padding: 0 5px;margin: 3px 0 -3px 0;width: 100%;text-align: center;line-height: 1.2;} footer .icons-menu > ul > .menu-item > a::before {content: "\F05E";font-family: icomoon;line-height: 1;} footer .icons-menu > ul > .menu-item > a::after {display: none;} footer .icons-menu .icon-menu-image a::before {display: none;} footer .icons-menu-social a {background: var(--thematic-blue);width: 40px;height: 40px;} footer .icons-menu-social a:hover {background: var(--thematic-blue-hover);} footer .icons-menu-social a::before {color: rgba(255, 255, 255, 1);} footer .icons-menu-social .menu-item a {border-radius: 50px;} footer .icons-menu-social .links-text {white-space: normal;overflow: visible;text-overflow: ellipsis;display: none;} footer .icons-menu-social > ul > .icons-menu-item {padding: calc(10px / 2);} footer .icons-menu-social ul {justify-content: center;} footer .icons-menu-social .module-title {text-align: center;} footer .icons-menu-social .module-title::after {left: 50%;right: auto;transform: translate3d(-50%, 0, 0);} footer .icons-menu-social .icons-menu-item-1.icon-menu-icon > a::before {content: "\f09a" !important;font-family: icomoon !important;} footer .icons-menu-social .icons-menu-item-2.icon-menu-icon > a::before {content: "\f099" !important;font-family: icomoon !important;} footer .icons-menu-social .icons-menu-item-3.icon-menu-icon > a::before {content: "\f231" !important;font-family: icomoon !important;} footer .icons-menu-social .icons-menu-item-4.icon-menu-icon > a::before {content: "\f0e1" !important;font-family: icomoon !important;} footer .icons-menu-social .icons-menu-item-5.icon-menu-icon > a::before {content: "\f167" !important;font-family: icomoon !important;} footer .icons-menu-social .icons-menu-item-6.icon-menu-icon > a::before {content: "\f17e" !important;font-family: icomoon !important;} footer .icons-menu-social .icons-menu-item-7.icon-menu-icon > a::before {content: "\f0d5" !important;font-family: icomoon !important;} .title:not(.page-title).module-title { margin-bottom: 15px; } .links-menu .module-body {flex-wrap: wrap;width: 100%;} .links-menu ul, .links-menu li {list-style: none;margin: 0;padding: 0;} .links-menu .menu-item {position: relative;border-width: 1px 0 0 0;-webkit-transition: all 0.08s ease-out;transition: all 0.08s ease-out;display: flex;align-items: center;} .links-menu .menu-item:first-child {border-top-width: 0;border-left-width: 0;} .links-menu .menu-item.dropdown > a::after {display: none;} .links-menu .menu-item a {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;align-items: center;-webkit-transition: all 0.08s ease-out;transition: all 0.08s ease-out;position: relative;width: inherit;} .links-menu .menu-item a .menu-label {right: 0;top: auto;-webkit-transform: translateX(100%);transform: translateX(100%);} .links-menu .menu-item a::before {line-height: 1;} .links-menu .menu-item a::after {display: none !important;} .links-menu .menu-item a:not([href]) {cursor: default;} .links-menu-about .module-body {display: block;justify-content: flex-start;align-items: flex-start;-webkit-overflow-scrolling: touch;column-count: initial;column-rule-style: solid;} .links-menu-about .menu-item {border-width: 1px 0 0 0;justify-content: flex-start;flex-grow: 0;width: auto;} .links-menu-about .menu-item a .links-text {white-space: normal;} .links-menu-about .menu-item a {justify-content: flex-start;padding-bottom: 12px;} div.links-menu-about .module-body {-webkit-overflow-scrolling: touch;} .links-menu-cs .module-body {display: block;justify-content: flex-start;align-items: flex-start;-webkit-overflow-scrolling: touch;column-count: initial;column-rule-style: solid;} .links-menu-cs .menu-item {border-width: 1px 0 0 0;justify-content: flex-start;flex-grow: 0;width: auto;} .links-menu-cs .menu-item a .links-text {white-space: normal;} .links-menu-cs .menu-item a {justify-content: flex-start;padding-bottom: 12px;} div.links-menu-cs .module-body {-webkit-overflow-scrolling: touch;} .links-menu-trust-us { flex: 0 0 100%; display: flex;justify-content: flex-start;align-items: flex-start; flex-direction: row; flex-wrap: wrap;} .links-menu-trust-us .module-body { flex: 0 0 100%; display: flex; justify-content: space-between; align-items: center;-webkit-overflow-scrolling: touch;column-count: initial;column-rule-style: solid;} .links-menu-trust-us .menu-item { border-width: 1px 0 0 0; justify-content: flex-start; flex: 0 0 48%; min-height: 80px; align-items: center; align-content: center; flex-direction: row; flex-wrap: wrap; } .links-menu-trust-us .menu-item a .links-text {white-space: normal;} .links-menu-trust-us .menu-item a {justify-content: flex-start;padding-bottom: 12px;} div.links-menu-trust-us .module-body {-webkit-overflow-scrolling: touch;} div.links-menu-77 .menu-item a .links-text {color: #8B9198;font-size: 80%;} div.links-menu-77 .module-body {-webkit-overflow-scrolling: touch;} .icons-menu-228 span::before {color: #8B9198;font-size: 30px;} .icons-menu-228 span:hover::before {color: rgba(255, 255, 255, 1);} .icons-menu-228 > ul {margin: -8px;} .icons-menu-228 .links-text {white-space: normal;overflow: visible;text-overflow: ellipsis;display: none;} .icons-menu-228 > ul > .icons-menu-item {padding: calc(15px / 2);} .icons-menu-228 ul {justify-content: flex-end;} .icons-menu-228 .module-title {text-align: right;} .icons-menu-228 .module-title::after {left: 100%;right: auto;transform: translate3d(-100%, 0, 0);} .icons-menu-228 .icons-menu-item-1.icon-menu-icon > span::before {content: "\f1f0" !important;font-family: icomoon !important;} .icons-menu-228 .icons-menu-item-2.icon-menu-icon > span::before {content: "\f1f1" !important;font-family: icomoon !important;} .icons-menu-228 .icons-menu-item-3.icon-menu-icon > span::before {content: "\f1f3" !important;font-family: icomoon !important;} .icons-menu-228 .icons-menu-item-4.icon-menu-icon > span::before {content: "\f1f2" !important;font-family: icomoon !important;} .icons-menu-228 .icons-menu-item-5.icon-menu-icon > span::before {content: "\f1f4" !important;font-family: icomoon !important;} .icons-menu-228 .icons-menu-item-6.icon-menu-icon > span::before {content: "\f1f5" !important;font-family: icomoon !important;} /**********************************************************************************************************************/ @media (max-width: 1320px) { #SiteWrapper .breadcrumb { padding-left: 20px; } #SiteWrapper .title.page-title { padding-left: 20px; padding-right: 5px; } #ProductContent, #SiteWrapper #Main-Container { padding: 0 20px; } }/** End of MAX-WIDTH:1320px **/ @media (max-width: 1300px) { }/** End of MAX-WIDTH:1300px **/ @media (max-width: 1280px) { }/** End of MAX-WIDTH: 1280px **/ @media (max-width: 1200px) { /*********Product List Display *************/ #RelatedProducts .productContentRow .productImage { flex: 0 0 230px; } #RelatedProducts .productContentRow .productInfo h3 { font-size: 18px; } #RelatedProducts .productContentRow .productPricing { flex: 0 0 275px; } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.addToCartBtn button { padding: 12px } }/** End of MAX-WIDTH:1200px **/ @media (max-width: 1150px) { }/** End of MAX-WIDTH:1150px **/ @media (max-width: 1024px) { /***** 1024px - Homepage ****/ #ShopNotice { margin: 10px 10px 0 10px; } #VendorSearch .vendorContent .vendorModelSearch .subtext { font-size: .84em; } #WebsiteHeader .full-header #HeaderMain .free-shipping { position: absolute; width: calc(100% - 300px); top: 5px; left: 280px; height: 35px; text-align: left; } #WebsiteHeader .full-header #HeaderMain .free-shipping .shipping-modal.show { transform: translate(-80%, 25px); } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { max-width: 200px; } /***** 1024px - Series Page ****/ #SeriesGrid.qtyTable .imageCell { padding:3px; } #SeriesGrid.qtyTable .qtyCell { font-size: 1em; } #SeriesGridTotals.qtyTable .descriptionCell { width: 71%; } /********* 1024px - General Product List Display *************/ #RelatedProducts .productContentRow { } #RelatedProducts .productContentRow .productImage { flex: 0 0 200px; } #RelatedProducts .productContentRow .productInfo { } #RelatedProducts .productContentRow .productInfo > div { font-size: .9em;margin-bottom: 7px; } #RelatedProducts .productContentRow .productInfo h3 { margin-bottom: 10px; } #RelatedProducts .productContentRow .productPricing { } #RelatedProducts .productContentRow .productPricing .product-qty label { } #RelatedProducts .productContentRow .productPricing .priceLbl { } #RelatedProducts .productContentRow .productPricing .addToCartBtn { } #RelatedProducts .productContentRow .productPricing .product-pricing { } #RelatedProducts .productContentRow .productPricing .product-qty .addToCartBtn { } /********* 1024px - Vendor/Silo Page *************/ #PopularPrinterGrid .grid, #PopularProductsGrid .grid { padding: 15px; gap: 15px; } #PopularPrinterGrid .grid .cell, #PopularProductsGrid .grid .cell { flex: 0 0 calc(25% - 12px); } /********* 1024px - RMA Page Submit Display *************/ #RMAItems .descriptionCell .lineItemLabel { flex: 0 0 75px; } } /** End of MAX-WIDTH:1024px **/ @media (max-width: 980px) { /***** 980px - Header ****/ #Homepage-ValueProps .info-blocks .info-block::before { width: 40px; height: 40px; font-size: 20px; } #CartTable .cartBottom #CodeEntry { } #CartTable .cartBottom #EstimateCell { } } /** End of MAX-WIDTH:980px **/ @media (max-width: 950px) { /***** 950px - Header ****/ #AccountLogin .account-items .account-item a::before { margin-bottom: -5px; } #MainMenu .main-menu-links { flex: 0 0 calc(100% - 90px); } #MainMenu .main-menu-phone { flex: 0 0 101px; display: flex; flex-direction: column; align-content: flex-end; align-items: flex-end; gap: 0; } #MainMenu .main-menu-phone div { height: auto; } #MainMenu .main-menu-phone .phone > a, #MainMenu .main-menu-phone .hours { font-size:12px;line-height:16px; } #MainMenu .main-menu-phone .phone > a::before { font-size: 12px;margin-right: 2px; } /***** 950px - Homepage ****/ #Homepage-Main.coupon #Main-Banners { margin-right: 0; } #Main-Banners .main-banner .main-text h2 { font-size: 52px; } #Main-Banners .main-banner .main-text p { font-size: 1.3em; } #RightBanners #VendorSearch .vendorContent .vendorModelSearch .finder-text { padding: 0; border: 0; } #RightBanners h4 { font-size:1.1em; } #RightBanners p.subtext:last-of-type { } #RightBanners .finder-text div select { font-size: .9em;padding-left: 0;height:30px; } #Homepage-ValueProps .module-body { gap: 6px; } #Homepage-ValueProps .module-body .module-item { width: calc(100% / 4 - 5.01px); } #Homepage-ValueProps .module-body .info-block .info-block-title { font-size: 14px; } #Homepage-ValueProps .info-blocks .info-block { align-items: flex-start; padding: 10px; gap: 5px; } #Homepage-ValueProps .module-body .info-block .info-block-text { font-size: .9em; } #Homepage-Vendors, #Homepage-Content { padding: 0 10px; } #Homepage-Vendors .product-models-links { gap: 40px 8px; } #Homepage-Vendors .product-models-links .links .image img { width: 90%; } /***** 950px - Search Page ****/ #SearchResults #RelatedProducts .productContentRow .productPricing { margin: 0 0 0 auto; } #SearchResults #RelatedProducts .productContentRow .productPricing .product-pricing { flex: 0 0 100%; } #SearchResults #RelatedProducts .productContentRow .productPricing .product-pricing .priceWrapper { padding: 0; } /********* 950px - Product Page Display *************/ #ProductDetails .product-stats li.product-model { flex-flow: column; justify-content: flex-start; align-items: flex-start; } #ProductDetails .product-stats li.product-model::before { display:none; } /********* 950px - Product Page List Display *************/ #RelatedProducts .productContentRow { display:block;align-items: unset;justify-content:unset; min-height: 220px; } #RelatedProducts .productContentRow .productInfo h3 { } #RelatedProducts .productContentRow .productImage { float:left; width:200px;height: 200px; margin-right: 15px;flex: unset; } #RelatedProducts .productContentRow .productImage::after {content: "";display: table;width: 100%;clear: both;} #RelatedProducts .productContentRow .productInfo { flex: 0 0 calc(100% - 215px); padding:0; } #RelatedProducts .productContentRow .productPricing { display: flex; flex: 0 0 100%; padding: 0; align-content: center; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; flex-direction: row; } #RelatedProducts .productContentRow .productPricing .product-pricing { flex: 0 0 calc(100% - 250px);min-width: 275px; padding-right: 15px; display: flex;align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; } #RelatedProducts .productContentRow .productPricing .priceWrapper { min-height: unset; line-height: 60px; } #RelatedProducts .productContentRow .productPricing .product-qty { flex: 0 0 250px; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div:nth-child(odd) { flex-basis: 140px; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div:nth-child(even) { flex-basis: 110px; justify-content: flex-end; } #RelatedProducts .productContentRow .productPricing .partGridMessage { text-align: left; order: 1; } #RelatedProducts .productContentRow .productPricing .outOfStock { max-height: 120px; } #RelatedProducts .productContentRow:not(.hasQtyPricing) .productInfo > div { margin-bottom:7px; } #RelatedProducts .productContentRow:not(.hasQtyPricing) .productPricing .CurrentPrice { font-size:130%; } #RelatedProducts .productContentRow:not(.hasQtyPricing) .freeShippingDiv { margin-bottom:0; } #RelatedProducts .productContentRow .productPricing.out-of-stock .product-qty { flex: 0 0 250px; margin: 0 auto; } /***** 950px - Previous Order/Invoice Page ****/ #OrderDetails { font-size: 95%; } /***** 950px - Contact Page ****/ #ContactFormWrapper { width: 80%; margin: 10px auto; } #CartTable .cartBottom #CodeEntry { flex-flow: wrap; } #CartTable .cartBottom #CodeEntry > div { flex: 0 0 100%; } /***** 950px - Footer Section ****/ footer .grid-row-3 .grid-cols { flex-wrap: wrap; } footer .grid-row-3 .grid-cols .grid-col { min-height: unset; } footer .grid-row-3 .grid-cols .grid-col + .grid-col { padding: 0 10px 0 20px; margin: 0; border: 0; min-height: unset; } footer .grid-row-3 .grid-cols .grid-col-1 { flex: 0 0 50%; } footer .grid-row-3 .grid-cols .grid-col-2 { flex: 0 0 50%; } footer .grid-row-3 .grid-cols .grid-col-3 { flex: 0 0 50%; } footer .grid-row-3 .grid-cols .grid-col-4 { flex: 0 0 50%; } .links-menu-trust-us .module-body { justify-content: flex-start; gap:10px; } .links-menu-trust-us .menu-item { min-width: 120px; flex: 0 0 20%; justify-content: center; } } /** End of MAX-WIDTH:950px **/ @media (max-width: 900px) { /***** 900px - Homepage ****/ #Homepage-Main.coupon #Main-Banners { flex: 0 0 100%; margin-bottom: 15px; } #Homepage-Rewards .module-body { max-width: unset; padding: 0 15px; } #Homepage-Rewards .module-body .module-item-1 { } #Homepage-Rewards .module-body .module-item-2 { } #Homepage-Rewards .module-body .module-item-3 { } /***** 900px - Product Page - Tabs ****/ #ContentTabs .nav-tabs { } #ContentTabs .nav-tabs > li > a { font-size: 1em; } #ContentTabs .nav-tabs > li.active + li { } #ContentTabs .nav-tabs > li:not(:last-child) { } #ContentTabs .nav-tabs > li:last-child { } /***** 900px - Checkout ****/ /*#ShippingAddressList { width: calc(100% - 30px); }*/ } /***** End of MAX-WIDTH:900px ****/ @media (max-width: 885px) { /****************** 885px - HEADER *************************/ #ShopNotice .shop-notice-module { height: auto; } #ShopNotice .notice { height: unset; padding: 10px 0; } /********* 885px - Category/Vendor/Silo Page *************/ #SaleProductsGrid .grid .cell .product-qty-fields .qty-input { flex-basis: 100px; } /********* 885px - Product Page List Display *************/ #RelatedProducts .productContentRow .productImage { width: 150px; } #RelatedProducts .productContentRow .productInfo { flex: 0 0 calc(100% - 165px); } #RelatedProducts .productContentRow .productPricing { flex: 0 0 calc(100% - 165px); } /********* 885px - Checkout Page Display *************/ #AdditionalEmails div { max-width: 410px; } } /***** End of MAX-WIDTH:885px ****/ @media (max-width: 850px) { /****************** 850px - General Layout *************************/ #SiteWrapper h1, #SiteWrapper .h1 {font-size: 28px; } #SiteWrapper h2, #SiteWrapper .h2 {font-size: 24px; } #SiteWrapper h3, #SiteWrapper .h3 {font-size: 18px; } #SiteWrapper h4, #SiteWrapper .h4 {font-size: 16px; } /****************** 850px - HEADER *************************/ #MainMenu .main-menu .main-menu-item > a { padding: 0 8px; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper { margin: 0 10px 0 0; } #WebsiteHeader .full-header #HeaderMain .free-shipping { width: calc(100% - 275px); left: 270px; } #WebsiteHeader .full-header #HeaderMain .search-wrapper { width: calc(100% - 470px); } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { margin: 0 0 0 10px; } /****************** 850px - Homepage *************************/ #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .nav { padding: 0 10px; } #Homepage-Content { padding: 0 10px; } #Homepage-ValueProps .info-blocks .info-block::before { width: 30px; height: 30px; font-size: 16px; } #Homepage-ValueProps .info-blocks .info-block { padding: 10px; } #PopularPrinterGrid .grid .cell, #PopularProductsGrid .grid .cell { flex: 0 0 calc(33% - 8px); } /********* 850px - Category/Vendor/Silo Page *************/ #SaleProductsGrid .grid { gap: 50px 0; } #SaleProductsGrid .grid .cell { flex: 0 0 calc(25%); } #VendorPageLinks div { text-align: center; border: 1px solid #e2e2e2; background-color:#FFFFFF;flex: 0 0 calc(25% - 4px); padding: 5px; } /********* 850px - Account Page Nav Layout *************/ #NavDiv { width: 100%; display: flex;flex-direction: row;flex-wrap:wrap;flex-grow: 0;justify-content: flex-start;align-items: flex-start; } #NavDiv > div { padding-right: 7px;min-width: unset;max-width: none;padding:0; } #NavDiv > div + div { margin:0; } #NavDiv .nav1 { flex: 1 0 180px; max-width: 200px; order: 1; } #NavDiv .nav2 { flex: 1 0 210px; max-width: 230px; order: 2; } #NavDiv .nav3 { flex: 1 0 160px; max-width: 180px; order: 3; } #NavDiv .nav4 { flex: 0 0 60px; order: 4; } /********* 850px - Search Page Layout *************/ #SearchResults .productContentRow .productInfo { flex-flow: column; } #SearchResults .productContentRow .productInfo .detailsBtn { flex: 0; align-self: flex-end; } /********* 850px - Series Page Layout *************/ #SeriesGrid.qtyTable .qtyCell { font-size: 12px; } /********* 850px - Product Page Display *************/ #ProductDetails .rating { margin-bottom: 10px; } #ProductDetails .product-price-group { flex-flow: column-reverse; margin-bottom: 10px; } #ProductDetails .product-price-group .price-wrapper { flex: 0 0 100%; } #ProductDetails .product-price-group .price-wrapper .price-group { padding: 0; flex-direction: row; justify-content: center; text-align: left; } #ProductDetails .product-price-group .product-stats { margin-bottom: 10px; } #ProductDetails .product-price-group .product-stats ul { flex-direction: row;align-items: center; } #ProductDetails .product-price-group .product-stats li.product-model { flex-direction: row; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell { justify-content: center;flex: 0 1 calc(50% - 0px); } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.qty { order: 2; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.qty label { flex-basis: 50px; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .stepper { } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.priceLbl { order: 1; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.addtocart { order: 4; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.earn-points { order: 3; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .earnMsg .earnPtsTotal { text-align: right; } /********* 850px - Product List Display *************/ #ContentTabs .nav-tabs > li > a { padding: 10px 10px 8px 10px; } #ProductContent .tab-pane .block-content { border-width: 1px 0 0 0; padding: 20px 10px; } #RelatedProducts .productContentRow .productPricing .product-qty label { } #RelatedProducts .productContentRow .productPricing .product-qty { } /********* 850px - Product Review & Ratings Display *************/ #ReviewStats { padding: 10px; } #ReviewStats label { font-size: 14px; flex: 0 0 120px; } #ReviewStats #OverallRatings { flex: 0 0 calc(100% - 275px); } #ReviewStats #OverallAttributes { flex: 0 0 275px; } #IndividualReviews .reviewContainer .writer { flex: 0 0 155px; } #IndividualReviews .reviewContainer .reviewAttributes { flex: 0 0 245px; } #IndividualReviews .reviewContainer .reviewAttributes label { flex: 0 0 120px; } #IndividualReviews .reviewContainer .reviewComments { flex: 0 0 calc(100% - 400px); } /********* 850px - Customer Service Page Display *************/ #CategoryFooter .content > div:not(#topLinks) { flex-wrap: wrap; justify-content: flex-start; align-items: stretch; } #CategoryFooter .shippingLinks, #CategoryFooter .shoppingLinks, #CategoryFooter .aboutLinks, #CategoryFooter .rewardsLinks { flex: 0 0 calc(50% - 10px); margin: 0 0 20px 0; max-width: none; } #CategoryFooter .shoppingLinks, #CategoryFooter .aboutLinks { margin-right: 20px;max-width: none; } #CategoryFooter .warrantyLinks, #CategoryFooter .troubleshootingTips { flex: 0 0 100%; max-width: none; margin: 0 0 20px 0; } #CategoryFooter .aboutLinks { order: 1; } #CategoryFooter .troubleshootingTips { order: 3; } #CategoryFooter .rewardsLinks { order: 2; } } /** End of MAX-WIDTH:850px **/ @media (max-width: 800px) { /****************** 800px - Header *************************/ #MainMenu .main-menu-links .product-grid .product-layout { width: calc(100% / 5 - 0.01px) } #ShopNotice .shop-notice-module { font-size: 12px; } /****************** 800px - Homepage *************************/ #WebsiteHeader .full-header #HeaderMain .free-shipping { font-size: .9em; } #Homepage-ValueProps .module-body { gap: 0; } #Homepage-ValueProps .module-body .module-item { padding: 0px; width: calc(100% / 2 - 0.01px); } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews { gap: 5px; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review { flex: 0 0 calc(33% - 5px); } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-image { display: none; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review .review-content { flex: 0 0 100%; } /********* 800px - Vendor Page Layout *************/ #SaleProductsGrid .grid { justify-content: space-between; } #SaleProductsGrid .grid .cell { flex: 0 0 calc(33%); } #SaleProductsGrid .grid .cell .product-qty-fields .qty-input { flex-basis: 110px; } /***** 800px - Manage Payment Information Page ****/ #CreditCard .ccFields { flex-flow: wrap; margin: 0 0 15px 0; } /*#BillingLeft label, #BillingRight label { } #CreditCard .creditCardImages { flex-basis:100%; }#CreditCard .creditCardInfo label { flex:0 0 115px; font-size:14px; }*/ /*#BillingAddressesList .addressList > div { flex: 0 0 calc(100% / 3 - 5px); }*/ /***** 900px - Shipping Address List Page ****/ #ShippingAddresses .shippingAddress { flex: 0 0 calc(33% - 5px); } /***** Checkout ****/ /*#ShippingAddressList .addressList > div { flex: 0 0 calc(100% / 3 - 5px); } #ShippingAddressList .address { }*/ } /***** End of MAX-WIDTH:800px ****/ @media (max-width: 790px) { /****************** 790px - HEADER *************************/ /********* 885px - Checkout Page Display *************/ #AdditionalEmails div { max-width: unset; flex: 0 0 400px; margin: 0 0 0 auto; } } /***** End of MAX-WIDTH: 790px ****/ @media (max-width: 775px) { #RelatedProducts .productContentRow .productInfo .descr { margin-bottom: 5px; } #RelatedProducts .productContentRow .productInfo .descr .productRating { margin-bottom: 5px; } #RelatedProducts .productContentRow .productPricing .product-pricing { flex-basis: calc(100% - 150px); } #RelatedProducts .productContentRow .productPricing .product-pricing table { flex-basis: auto; margin-bottom: 3px; } #RelatedProducts .productContentRow .productPricing .partGridMessage { text-align: right; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; align-content: flex-start; } #RelatedProducts .productContentRow .productPricing .product-qty { flex-basis: 150px; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div:nth-child(odd) { flex-basis: 100%; height: auto; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div:nth-child(even) { flex-basis: 100%; justify-content: center; height: auto; } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.priceLbl { min-height: 40px; } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.addToCartBtn button { padding: 12px 10px; } #CartTable .cartBottom #CodeEntry { gap: 5px; } .hover { } } /***** End of MAX-WIDTH: 775px ****/ @media (max-width: 750px) { #ProductContent, #SiteWrapper #Main-Container { padding: 10px; } #SiteWrapper #Main-Container { background: #FFF; } #SiteWrapper h1, #SiteWrapper .h1 { margin-bottom: 15px; } /****************** 750px - HEADER *************************/ #WebsiteHeader .full-header #HeaderMain .logo-wrapper { width: 200px; flex: 0 0 76px; margin: 0 10px 0 0; } #WebsiteHeader .full-header #HeaderMain .free-shipping { width: calc(100% - 350px); position: unset; bottom: unset; left: unset; } #WebsiteHeader .full-header #HeaderMain .free-shipping span + span { display: none; } #WebsiteHeader .full-header #HeaderMain .free-shipping .shipping-modal.show { transform: translate(-50%, 40px); } #WebsiteHeader .full-header #HeaderMain .search-wrapper { width: calc(100% - 350px); } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { flex: 0 0 90px; width: 130px; padding: 0; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; } #WebsiteHeader .full-header #Logo { flex: 0 0 100%; height: 60px; align-self: flex-end; } #AccountLogin .account-items { justify-content: flex-end; flex-direction: row; flex-wrap: wrap; } #AccountLogin .account-items .account-item { } #AccountLogin .account-items .account-item a { gap: 4px; flex-direction: row; justify-content: flex-end; } #AccountLogin .account-items .account-item a::before { font-size: 1em; } #AccountLogin .account-items .account-item-1 { flex: 0 0 50%; height: 40px; } #AccountLogin .account-items .account-item-2 { flex: 0 0 50%; height: 40px; } #AccountLogin .account-items .account-item-3 { flex: 0 0 50%; height: 40px; } #AccountLogin .account-items .account-item-4 { flex: 0 0 50%; height: 40px; } #WebsiteHeader .full-header #Cart { height: 40px; justify-content: center; flex-basis: 120px; } #WebsiteHeader .full-header #Cart > a { flex-direction: row-reverse; justify-content:flex-start; } #WebsiteHeader .full-header #Cart > a #CartTotal { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; } #WebsiteHeader .full-header #Cart > a #CartTotal span { flex: 1; } #WebsiteHeader .full-header #Cart > a #CartTotal span + span { margin-left: 5px; } #WebsiteHeader .full-header #Cart > a > i { margin-bottom: 0px; } #WebsiteHeader .full-header #Cart > a > i::before { font-size: 20px; left: 2px; margin-right: 1px; } #MainMenu .main-menu .main-menu-item i { display:none; } #Search .header-search input { font-size: 14px; } /****************** 750px - Homepage *************************/ #Homepage-Main { flex: 0 0 100%; flex-wrap: wrap; padding: 0; gap: 15px; } #Main-Banners { flex: 0 0 100%;padding: 0; margin: 0 auto; } #Homepage-Main.coupon #Main-Banners { height: auto; margin: 0; margin-top: -15px; } #Homepage #RightBanners { flex: 0 0 100%; padding: 0; max-width: 810px; justify-content:center; } #Main-Bottom, #Main-Bottom .main-banner { margin-top: 0; } #Main-Bottom .main-banner .main-text h1 { font-size: 40px; } #Main-Bottom .main-banner .main-text p { font-size: 1.2em; } #ShopNotice img { height: 25px; } #ContentTabs.rewards-content-tabs .nav-tabs { border-bottom: 1px solid #e2e2e2; } /***** 750px - Vendor/Silo Page ****/ #CategoryContent { border: none; padding: 0; } #VendorSearch { border: none; padding: 0; } #PopularPrinterGrid .grid, #PopularProductsGrid .grid { border: none; padding: 0; } #SaleProductsGrid .grid { border-width: 0; padding: 0; margin: 0; } /********* 750px - Account Page: Previous Orders Layout *************/ #PreviousOrdersList .itemHeader { display:none; } #PreviousOrdersList .itemWrapper { justify-content: flex-end; } #PreviousOrdersList .itemCell { flex: 0 0 100%; margin: 0 0 5px 0; } #PreviousOrdersList .qtyCell { display: none; } #PreviousOrdersList .buttonsWrapper { flex: 0 0 100%;margin: 5px 0 0 0;text-align:left; } #PreviousOrdersList .buttonsWrapper button { margin-left: auto;display: block;margin-right: 12px; } #ShoppingContent { border: none; padding: 20px 0 0 0; } #ShipTo > div:not([class]) { } /********* 750px - Product Page Display *************/ #ProductContent .product-blocks { margin: 0 -10px; flex: 0 0 calc(100% + 20px) } #ContentTabs .nav-tabs { margin-left: 0; } #ContentTabs .nav-tabs > li > a { white-space: normal;text-align: center; } /********* 750px - Product Page List Display *************/ #RelatedProducts .productContentRow { margin-bottom: 5px; box-shadow: none;border-width: 0 0 1px 0;display:flex; flex-flow: column; align-content: center; justify-content: center;align-items: center; gap: 10px; } #RelatedProducts .productContentRow .productImage { float:none; flex: 1; margin: 0; } #RelatedProducts .productContentRow .productImage::after {content: "";display: table;width: 100%;clear: both;} #RelatedProducts .productContentRow .productInfo { display: flex; width: auto; vertical-align: top; flex: 1; padding: 0px; margin-bottom: 0px; } #RelatedProducts .productContentRow .productInfo h3 { } #RelatedProducts .productContentRow .productPricing { display: flex; flex: 0 0 100%; padding: 0; } #RelatedProducts .productContentRow .productPricing .product-pricing { flex: 0 0 calc(100% - 250px); } #RelatedProducts .productContentRow .productPricing .product-qty { flex: 0 0 250px; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div:nth-child(odd) { flex-basis: 140px; height: 50px; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div:nth-child(even) { flex-basis: 110px; justify-content: flex-end; } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.addToCartBtn button { padding: 12px 10px; } #RelatedProducts .productContentRow .productPricing .partGridMessage { text-align: right; } #RelatedProducts .productContentRow .productPricing.out-of-stock { width: 100%; } /********* 750px - Product Review & Ratings Display *************/ #AllProductReviews img { width: 100px; flex: 0 0 100px; } #ReviewStats { justify-content: space-between; } #ReviewStats #OverallRatings { flex: 0 0 calc(100% - 285px); } #ReviewStats #OverallRatings #OverallRating label { flex-basis: auto; margin-right: 10px; } #ReviewStats #OverallRatings #OverallRating > span + span { margin-left: 3px; } #ReviewStats #OverallAttributes { flex: 0 0 265px; } #ReviewStats #OverallAttributes img { width: 100px; } #IndividualReviews .reviewContainer .writer { flex: 0 0 100%; font-weight: bold; } #IndividualReviews .reviewContainer .reviewAttributes { flex: 0 0 250px; color: rgba(105, 105, 115, 1); } #IndividualReviews .reviewContainer .reviewAttributes label { flex: 0 0 120px; } #IndividualReviews .reviewContainer .reviewComments { flex: 0 0 calc(100% - 250px); } #WriteAReview span { font-size: 12px; } /********* 750px - Series Page Display *************/ #SeriesTopContent, #SeriesMainWrapper { margin-top: 0; border: 0; padding: 0; } #SeriesMainWrapper { margin: 0; } /***** 750px - RMAA Edit Page ****/ #ImportantNotes ul { padding-left: 20px; } /***** 750px - Contact Page ****/ #ContactFormWrapper { width: 100%; margin: 10px auto; } /***** 750px - Sales Customer Search ****/ #SalesCustomerSearch #CustomerSearch > .inputs > div:not(:last-child) { margin-bottom:10px; } #SalesCustomerSearch #CustomerSearch > .inputs label { width: 100%; text-align: left;font-size: 14px; padding: 0; margin: 0; } #SalesCustomerSearch #CustomerSearch > .inputs input[type=text], #SalesCustomerSearch #CustomerSearch > .inputs input[type=password] { margin: 0; width: 100%; font-size: 14px; height: 30px; } } /** End of MAX-WIDTH: 750px **/ @media (max-width: 700px) { /****************** 700px - HEADER *************************/ #MainMenu .main-menu .main-menu-item i { display:none; } #SalesNotice .sales-notice-module .one { flex: 0 0 100px; } #SalesNotice .sales-notice-module .two { flex: 0 0 calc(100% - 465px); } #ShopNotice .shop-notice-module { line-height: 1.4; } #Homepage-Vendors .product-models-links { justify-content: flex-start; } #Homepage-Vendors .product-models-links .links { flex: 0 0 calc(100% / 3 - 6px); } /****************** 700px - REWARDS PAGE *************************/ #RewardsPageContent .rewards-content .points-options { gap: 15px } #RewardsPageContent .rewards-content .points-options .points-option { flex: 0 0 30%; } #RewardsPageContent .rewards-content .points-options .points-option .points-value span { display: block; } /****************** 700px - Content Page Display *************/ #tonerTroubleShooting .row:first-child, #inkTroubleShooting .row:first-child { display: none; } #tonerTroubleShooting .row .cell:first-child, #inkTroubleShooting .row .cell:first-child { flex: 0 0 100%; padding: 0; } #tonerTroubleShooting .row .cell:not(:first-child), #inkTroubleShooting .row .cell:not(:first-child) { flex: 0 0 49%; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting .cell + .cell, #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting .cell + .cell { flex: 0 0 50%; padding: 0 15px 0 0; } #CategoryFooter #tonerTroubleShooting .row .cell ul, #CategoryFooter #inkTroubleShooting .row .cell ul { padding-bottom: 0; margin-bottom: 0; } #tonerTroubleShooting .row .cell h3, #inkTroubleShooting .row .cell h3 { flex: 0 0 100%; } #CategoryFooter .content .row .cell ul, #CategoryFooter .content .row .cell ol { padding: 0; margin: 0 0 20px 20px; } /****************** 700px - Product Page Display *************/ #ProductDetails .rating { } #ProductDetails .rating-page div { height: auto; } #ProductDetails .rating-stars { padding: 0; } #ProductDetails .review-links { display: flex;flex-flow: column; } /****************** 700px - Series Page - Qty Grid Display *************/ #SeriesGrid.qtyTable .qtyRow { font-size: 14px; } #SeriesGrid.qtyTable .qtyRow .imageCell { min-width: 130px; flex: 1 1 130px; } #SeriesGrid .productDesc > span + span { display:none; } #SeriesGrid .productRating > div + div { display:none; } #SeriesGrid.qtyTable .qtyRow .descCell .productRating img { height: 12px; } #SeriesGridTotals.qtyTable .valuesCell { min-width: 300px; flex: 1 1 300px; } /****************** 700px - Manage Payment Information Page ****/ /*#CreditCard .creditCardInfo label { flex:0 0 110px; font-size:13px; }*/ #BillingLeft, #BillingRight { } #BillingLeft label, #BillingRight label { font-size: 13px; flex: 0 0 110px; } #BillingLeft input[type=text], #BillingRight input[type=tel], #BillingRight input[type=text], #BillingRight select { flex: 0 0 calc(100% - 115px); } #BillingRight input#Phone { flex: 0 0 115px; } #BillingRight label.extLabel { flex: 0 0 26px; min-width: unset; } /****************** 700px - Cart Page ****/ #CartTbl form > div#CartTable { margin: 0 -10px; flex: 0 0 calc(100% + 20px); border: none; margin-bottom: 10px; } #CartTbl { margin-bottom: 40px; } #CartTable .tr .td { height: auto; min-height: 50px; } #CartTable .cartBottom.tr { gap: 5px; } #CartTable .cartBottom #CodeEntry { order: 1; flex: 0 0 calc(100% - 245px); } #CartTable .cartBottom #EstimateCell { order: 3; display: none; } #CartTable .cartBottom #SubTotalCell { order: 2; } /****************** 700px - Checkout Page ****/ #ShippingSection #EditAddressOptions.editMode .btn-sm.btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } #ShippingSection #EditShippingAddress .ccAddressWrapper { flex-flow: wrap; } #ShipTo { margin-bottom: 0; } #ShipTo .atLbl { flex: 0 0 110px; } #ShipTo .slLbl { flex: 0 1 150px; } #ShipTo .poLbl { flex: 0 1 115px; } #ShipTo .apoLbl { flex: 0 1 150px; } #ShipTo .whichShouldIChoose { justify-content: flex-end; margin: 10px 0; } #ShippingLeft { order: 2; } #ShippingRight { order: 1; flex: 0 0 85%; margin: 0; max-width: unset; margin-bottom: 20px; } #ShippingRight #VerifiedAddressHeader { margin: 0; } #ShippingRight #VerifiedShippingAddresses { margin: 7px 0; } #ShippingSection #SaveAddress, #ShippingSection #SetDefault { order: 3; } #AdditionalEmails div { max-width: unset; flex: 0 0 calc(100% - 195px); margin-left: 195px; } #AdditionalEmails label, #CommentsEntry label { flex: 0 0 190px; } /****************** 700px - Account Pages **********/ /*#AccountBody { } #LoginWrapper { width: 80%; margin: 0 auto; } #LoginWrapper > div { flex: 0 0 100%; margin-bottom: 20px; min-width: unset; max-width: unset; } #ReturningCustomers .subheader, #NewCustomerLogin .subheader { margin-bottom: 5px;} #ReturningCustomers .inputs, #ForgotPassword .inputs, #NewCustomerLogin .inputs { margin: 0; }*/ #ForgotPasswordBtn, #KnowPasswordBtn { text-align: right; } } /** End of MAX-WIDTH: 700px **/ @media (max-width: 675px) { /********* Customer Service Page Display *************/ #topLinks { flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; margin: 0; } #topLinks .contactLink, #topLinks .phoneLink, #topLinks .chatLink { flex: 0; max-width: none; min-width: unset; border: 0; padding: 0; margin: 0 0 10px 0; } /*#topLinks h2, #PopularPrinterGrid h2 { font-size: 110%; margin: 0 0 5px 0 !important; padding: 0; }*/ #topLinks p { margin: 0; padding: 0; } #CategoryFooter .content div.returnsSection:not(#topLinks):first-child { flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; margin: 0; margin-bottom: 20px; } #CategoryFooter .content div.returnsSection:not(#topLinks):first-child div { min-width: 100%; } #CategoryFooter .returnInstructions { margin: 0 0 10px 0; } /***** 675px - Cart Page ****/ #CartTbl form .proceed p { font-size: 12px; margin-bottom: 5px; } /*.rewards-learn-more-modal { max-height:280px; } .productTypeExplainedDiv { max-height: 450px; } .compatibleWarrantyDiv { max-height: 350px; }*/ } /** End of MAX-WIDTH: 675px **/ @media (max-width: 650px) { /****************** 650px - HEADER *************************/ #MainMenu .main-menu .main-menu-item i { display:none; } #MainMenu .main-menu .main-menu-item.contact { display:none; } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { width: 110px; } #WebsiteHeader .full-header #HeaderMain .search-wrapper { width: calc(100% - 330px); } #WebsiteHeader .full-header #HeaderMain .free-shipping .shipping-modal { } #WebsiteHeader .full-header #HeaderMain .free-shipping { width: calc(100% - 330px); } #WebsiteHeader .full-header #Cart { flex-basis: 100%; } #AccountLogin { justify-content:flex-start; } #AccountLogin .account-items { flex: 1; } #AccountLogin .account-items .account-item a { justify-content: flex-end; } #AccountLogin .account-items .account-item a::before { display:none; } #AccountLogin .account-items .account-item a > .links-text { } /********* 650px - Series Page - Qty Grid Display *************/ #SeriesMainWrapper { display:none; } #SeriesGridInline { display:block; } #ProductDetails .rating-page span { display: none; } /********* 650px - Product Review & Ratings Display *************/ #ReviewStats #OverallRatings #OverallRating { height: unset; } #ReviewStats #OverallRatings #OverallRating label { flex-basis: 100%; margin-right: 0; font-size: 16px; } #ReviewStats #OverallRatings #OverallRating .overallRatingAvg { font-size: 14px; margin: 4px 6px; } #ReviewStats #OverallRatings .overallWouldRecommend { margin-top: 7px; } #IndividualReviews .reviewContainer .reviewAttributes { flex: 0 0 230px; } #IndividualReviews .reviewContainer .reviewComments { flex: 0 0 calc(100% - 230px); } /********* 650px - Vendor/Silo Page Display *************/ #VendorSearch .vendorSearch { } #PopularPrinterGrid .grid, #PopularProductsGrid .grid { gap: 15px; } #SaleProductsGrid .grid .cell { flex: 0 0 calc(50% - 15px); } #PopularPrinterGrid .grid .cell, #PopularProductsGrid .grid .cell { flex: 0 0 calc(33% - 10px); } #PreviousOrders.orderList .searchTd { flex: 0 0 calc(100% - 120px); } #PreviousOrders.orderList .navTd { flex: 0 0 120px; text-align: center; } /***** 900px - Shipping Address List Page ****/ #ShippingAddresses .shippingAddress .addressActions > .addressAction i { display: none; } #RMAItems .product .subProduct { flex: 0 0 100%; padding: 5px; } /***** 650px - Cart Page ****/ #CartTable .tr { justify-content: flex-end; padding-bottom: 10px; border: 0; align-items: stretch; } #CartTable .tr:not(.thWrap):not(.cartBottom):nth-child(odd) { } #CartTable .tr:not(.thWrap) + .tr:not(.thWrap) { } #CartTable .tr .td { height: auto; min-height: auto; } #CartTable .tr .td.removeTd { height: auto; background: rgba(240,242,245, 1); margin-bottom: 5px; } #CartTable .tr .td.descriptionTd { flex: 0 0 calc(100% - 40px); padding: 0px; align-self: center; align-content: center; min-height: 25px; margin-bottom: 5px; background-color: rgba(240,242,245, 1); padding: 10px 5px; } #CartTable .tr .td.descriptionTd .img { display: none; padding-left: 0px; } #CartTable .tr .td.descriptionTd .desc { flex: 0 0 100%; } #CartTable .tr .td.descriptionTd .desc .expand { display: none; } #CartTable .tr .td.quantityTd { align-content: flex-start; } #CartTable .tr .td.priceTd { align-content: flex-start; font-size: .9em; } #CartTable .tr .td.itemTotalTd { align-content: flex-start; font-size: .9em; } /***** 650px - Billing Info Layout ****/ #CreditCard .ccAddressWrapper { flex-wrap: wrap; justify-content: center; } #BillingLeft, #BillingRight { flex: 0 0 100%; max-width: 330px; justify-content: center; } #BillingLeft + #BillingRight { margin-top: 5px; } #BillingLeft label, #BillingRight label { flex: 0 0 120px; font-size: 14px; } #BillingLeft input[type=text], #BillingRight input[type=tel], #BillingRight input[type=text], #BillingRight select { flex: 0 0 calc(100% - 120px); max-width: 205px; } #BillingRight input#Phone { flex-basis: 115px; } #BillingRight label.extLabel { } #LoginWrapper > div { min-width: 200px; } #LoginWrapper p { font-size: .9em; padding: 0; margin: 0 0 5px 0; } #LoginWrapper > div label { flex: 0 0 100%; text-align: left; margin: 0; } #LoginWrapper > div .inputs input[type=email], #LoginWrapper > div .inputs input[type=password] { flex: 0 0 100%; } /***** 650px - Checkout ****/ #ShippingSection #EditAddressOptions.editMode { flex-wrap: wrap;flex-direction: column; align-items: flex-end; align-content: flex-end; } #ShippingSection #EditAddressOptions.editMode div + div { margin-top: 10px; } #BillingAddress { flex-flow: wrap; justify-content: center; } #BillingEditButtons.editMode { gap: 0; justify-content: space-between; } #BillingEditButtons.editMode div { padding: 5px 3px; } /***** 650px - Sitemap ****/ #SiteMap .container .section { flex: 0 0 100%; } #SiteMap .container .section + .section { margin-top: 20px; } } /** End of MAX-WIDTH: 650px **/ @media (max-width: 625px) { #Search .header-search input { font-size: 13px; } } /** End of MAX-WIDTH: 625px **/ @media (max-width: 600px) { body { font-size: 14px; } body p, body li { } #SiteWrapper h1, #SiteWrapper .h1 {font-size: 24px; margin: 0.67em 0; } #SiteWrapper h2, #SiteWrapper .h2 {font-size: 20px;} #SiteWrapper h3, #SiteWrapper .h3 {font-size: 18px;} #SiteWrapper h4, #SiteWrapper .h4 {font-size: 16px;} #SiteWrapper .title.page-title { padding-left: 10px; } /****************** 600px - HEADER *************************/ #SalesNotice .sales-notice-module .one { flex: 0 0 100px; } #SalesNotice .sales-notice-module .two { flex: 0 0 calc(100% - 325px); } #SalesNotice .sales-notice-module .three { flex: 0 0 225px; text-align: right; } header#WebsiteHeader { background: rgba(255, 255, 255, 1); display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; } #WebsiteHeader .full-header .cart-wrapper { margin-bottom: 0px; } #WebsiteHeader .full-header #Cart { flex-wrap: nowrap; flex-direction: row; align-content: flex-start; justify-content: center; align-items: center; } #WebsiteHeader .full-header #Cart > a #CartTotal { display: none; } #WebsiteHeader .full-header #Cart > a > i { width: 30px; height: 30px; font-size: 1.2em; } #WebsiteHeader .full-header #Cart > a > i::before { font-size: 1em; } #WebsiteHeader .full-header #CartItemsCount.count-zero { display: flex; background: #50AD55; color: #FFF; height: 20px; border: 2px solid rgba(248, 248, 248, 1); transform: translateX(-18px); padding: 0 6px; z-index: 1; position: absolute; flex-wrap: wrap; font-size: 0.9rem; min-width: 20px; box-sizing: border-box; transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; align-items: center; font-weight: 500; line-height: 1; align-content: center; border-radius: 10px; flex-direction: row; justify-content: center; } #WebsiteHeader .full-header #HeaderMain .free-shipping { width: calc(100% - 280px); flex: 0 0 30px; } #WebsiteHeader .full-header #HeaderMain .search-wrapper { width: calc(100% - 280px); } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { flex: 0 0 90px; width:50px; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper { } #AccountLogin .account-items { justify-content: flex-end; align-items: center; height: 100%; align-content: center; } #AccountLogin .account-items .account-item-1, #AccountLogin .account-items .account-item-3 { border: 1px solid #AAA; color: #666; background: #EEE; flex: 0 0 auto; height: 30px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; padding: 5px; } #AccountLogin .account-items .account-item a:focus, #AccountLogin .account-items .account-item a:hover { } #AccountLogin .account-items .account-item-1 a, #AccountLogin .account-items .account-item-3 a { justify-content: center; } #AccountLogin .account-items .account-item-2, #AccountLogin .account-items .account-item-4 { display: none; } #MainMenu { justify-content: flex-end; top: 0; } #MainMenu::before { } #MainMenu .main-menu#MainMenu-Links { display: none; } #MainMenu .main-menu-links { flex: 0 0 calc(100% - 85px); } #MainMenu .main-menu-phone { flex: 0 0 95px; align-items: center; flex-direction: row; justify-content: flex-end; } #MainMenu .main-menu-links .product-grid .product-layout { width: calc(100% / 4 - 0.01px) } #ShopNotice { font-size: .9em; } #SiteWrapper .breadcrumb { padding: 5px 8px; overflow: hidden; } #SiteWrapper .breadcrumb a { font-size: 10px; } /********* 600px - Homepage *************/ #Homepage-Rewards .module-body { max-width: 600px; } #Homepage-Rewards .module-body::before { background-image: url(/Content/Assets/Images/Theme/GiftCards/giftcard-fan-newlogo.png); background-repeat: no-repeat; background-size: 210px; background-position: right center; } #RightBanners h4 { font-size: 26px; } /********* 600px - Product Page Display *************/ #ProductDetails .product-price-group .price-wrapper { } #ProductDetails .rating div a { font-size: 12px; } #ContentTabs .nav-tabs > li { flex-shrink: 1; flex-basis: 25%; } #ContentTabs .nav-tabs > li:not(:last-child) { margin-right: 0px; } #ContentTabs .nav-tabs > li.active { border-left: none !important; } #RelatedSeriesList .series { flex: 0 0 calc(100% / 3 - 4px); } /***** 600px - Vendor/Silo Page ****/ #PopularPrinterGrid .grid, #PopularProductsGrid .grid { line-height: 17.5px; gap: 8px; } #PopularPrinterGrid .grid .cell, #PopularProductsGrid .grid .cell { flex: 0 0 calc(33% - 4px); } #PopularPrinterGrid .grid a, #PopularProductsGrid .grid a { font-size:12px; } /***** 600px - Previous Order/Invoice Page ****/ #OrderDetails { font-size: 12px; } #OrderItems { border: none; } #OrderItems .product { padding: 0 5px 0 0; } #OrderItems .descTh { flex: 1 1 100px; } #OrderItems .costTh { flex: 0 1 70px;text-align:center; } #OrderItems .qtyTh { flex: 0 0 60px;text-align:center; } #OrderItems .priceTh { flex: 0 1 70px;text-align:center; } #OrderItems .descriptionCell { flex: 1 1 100px; } #OrderItems .priceCell { flex: 0 1 70px; } #OrderItems .quantityCell { flex: 0 0 60px; } #OrderItems .itemTotalCell { flex: 0 1 70px; } #OrderTotals { padding: 0 5px 0 0; } #reviewModal #ProductReviews .writeReview .ratingComments { flex: 0 0 80%; margin: 0 auto; } #reviewModal #ProductReviews .writeReview label { width: 130px; } /***** 600px - Manage Payment Information Page ****/ #BillingAddressesList .addressList > div { flex: 0 0 calc(100% / 2 - 5px); } #SavedCardList .card .cardDetails { flex: 0 0 140px; } #SavedCardList .card .billingAddress { flex: 0 0 calc(100% - 225px); } /***** 600px - Manage Shipping Address Edit Information Page ****/ #EditShippingAddress { line-height: normal; } #ShipTo .atLbl { flex-basis: auto; } #ShipTo .slLbl { flex-basis: 120px; } #ShipTo .poLbl { flex-basis: 80px; } #ShipTo .apoLbl { flex-basis: 130px; } /***** 600px - RMA Submission Page ****/ #RMAItems { } #RMAItems .descriptionCell .lineItemLabel { flex-basis: 70px; } /***** 600px - Checkout Page ****/ /*#ShippingAddressList .addressList > div { flex: 0 0 calc(100% / 2 - 5px); }*/ #tblShipMethodSelect select { width: 95%; height: 30px; } #tblShipMethodSelect button { display: none; } #BillingHead { margin-bottom: 10px; } #CheckoutContent #PaymentMethod { border: none; padding: 0; background-color: unset; } #CreditCard .creditCardInfo label { flex: 0 0 110px; } #AdditionalEmails, #CommentsEntry { flex: 0 0 100%; max-width: 400px; margin: 0 auto; } #AdditionalEmails label, #CommentsEntry label { flex: 0 0 100%; text-align: left; margin: 0; } #AdditionalEmails div { flex: 0 0 100%; margin: 0 0 10px 0; } /********* 600px - Content Page Display *************/ #tonerTroubleShooting .row:first-child, #inkTroubleShooting .row:first-child { display: none; } #tonerTroubleShooting .row .cell:first-child, #inkTroubleShooting .row .cell:first-child { flex: 0 0 100%; } #tonerTroubleShooting .row .cell:not(:first-child), #inkTroubleShooting .row .cell:not(:first-child) { flex: 0 0 100%; } #tonerTroubleShooting .row .cell h3, #inkTroubleShooting .row .cell h3 { flex: 0 0 100%; } #CategoryFooter .content > div:not(#topLinks)#tonerTroubleShooting .cell + .cell, #CategoryFooter .content > div:not(#topLinks)#inkTroubleShooting .cell + .cell { flex: 0 0 100%; } .hover { } } /** End of MAX-WIDTH: 600px **/ @media (max-width: 580px) { /********* 580px - General Page Layout *************/ #SiteWrapper .title.page-title { } #SiteWrapper #Main-Container { padding: 0; } #MainContent { padding: 0; } #PrinterReview, #ModelVideo { padding: 0; } #SearchTermResults.topContent, #CategoryContent, #CategoryFooter, #PopularSeries, #PopularProducts, #ShoppingContent { border-width: 0; border-top-width: 0; padding: 0; } #SiteWrapper > .container > .row { padding: 0 10px; } #SiteWrapper > .container > .row + .row { margin: 0; margin-top: 0; padding-top: 0; } #SiteWrapper > .container > .row + .row #CategoryFooter { border: 0; padding-top: 0; } /****************** 580px - HEADER *************************/ #WebsiteHeader .full-header #HeaderMain .free-shipping { font-weight: normal; font-size: .8em; } #MainMenu .main-menu .main-menu-item > a { padding: 0 7px; } #MainMenu .main-menu-phone .phone > a, #MainMenu .main-menu-phone .hours { font-size: .8em; line-height: 1.2; } #MainMenu .main-menu .main-menu-item:first-of-type { } /********* 580px - Vendor/Silo Page Display *************/ #VendorSearch .model-finder { flex-flow:row wrap;margin-bottom: 0; } #VendorSearch .vendor-image { flex: 0 0 100%; max-width: unset;margin-bottom: 5px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center; } #VendorSearch .vendor-image h3 { padding: 0 0 5px 0; margin: 0; flex: 0 0 115px; } #VendorSearch .vendor-image img { max-width: 150px; margin: 0 0 0 15px; flex: 0 0 100%; } #VendorSearch .vendorContent { margin: 0; width: 100%; } #VendorSearch .model-finder > div + div { margin: 0; } #SaleProducts { padding: 0; margin: 0; } #SaleProducts h2 { padding: 0; margin: 0; } #SaleProductsGrid .grid .cell { flex: 0 0 calc(50% - 10px); } #VendorPageLinks div { flex: 0 0 32%; max-width: unset; } #PopularPrinterGrid { margin: 0; } #PopularPrinterGrid .grid, #PopularProductsGrid .grid { } #PopularPrinterGrid .pagination span:not(.selected) { flex: 0 0 100%; margin: 10px 0; } #PopularPrinterGrid .pagination a, #PopularPrinterGrid .pagination span.selected { height: 35px; flex: 0 0 35px; display: flex; align-content: center; justify-content: center; align-items: center; } /********* 580px - Account Page Nav Layout *************/ #NavDiv { display: none; } #MobileNavDiv { display: block; text-align:center;margin-bottom: 20px; } /********* 580px - Search Page Layout *************/ #SearchResults .productContentRow .productImage { flex: 0 0 150px; } /********* 580px - Product Page Display *************/ #ProductPage .product-info { flex-direction: column;margin-bottom: 20px; } #ProductPage .product-left { justify-content: center;margin-bottom: 20px; align-self: center; } #ProductPage .product-right #ProductDetails { padding: 0; } #ProductImage { max-width: 200px; max-height: 200px; } #ProductImage .main-image { max-width: 200px; min-height: 200px; } #ProductDetails .rating-page span { display: inherit; } #ProductDetails .review-links { flex-flow: row; } #ProductDetails .product-description p { line-height: 1.3; } #ProductDetails .product-price-group { display: flex; align-content: flex-start; justify-content: flex-end; align-items: flex-start; flex-basis: calc(100% - 160px); flex-flow: column-reverse; } #ProductDetails .product-price-group .price-wrapper { min-width: 100%; max-width: 100%; } #ProductDetails .product-price-group .product-stats { flex-grow: 0; } #ProductDetails .button-group-page { margin: 35px 0 0 0; flex: 0 0 160px; } #ProductDetails .button-group-page .buttons-wrapper form { flex: 0 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group { align-items: flex-start;flex-wrap: wrap; justify-content: center; align-content: flex-start; flex-direction: row; flex: 0 0 100%; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell { margin: 0; flex: 0 0 100%; height: unset; min-height: 40px; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.qty { order: 1; justify-content: center; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .control-label { flex: 0 0 45px; font-size: 14px; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .stepper { margin: 0; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.priceLbl { order: 2; justify-content: center; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.priceLbl span { flex: 0 0 60px; font-size: 120%; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.addtocart { order: 3; justify-content: center; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.earn-points { order: 4; justify-content: center; } #ProductContent .product-blocks#SocialButtons { margin: 0; } #RelatedProducts .productContentRow .productPricing { } #RelatedProducts .productContentRow .productPricing .product-pricing { flex: 0 0 calc(100% - 150px); padding: 0 5px; } #RelatedProducts .productContentRow .productPricing .product-qty { flex: 0 0 150px; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields { justify-content: center; gap: 10px; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div:nth-child(odd) { flex-basis: 100%; height: auto; } #RelatedProducts .productContentRow .productPricing .product-qty .product-qty-fields > div:nth-child(even) { flex-basis: 100%; justify-content: center; height: 20px; line-height: 1; min-height: unset; } #ProductTabsRelatedProducts .block-content { padding: 20px 0px; } /********* 580px - Series Page Display *************/ #SeriesTopContent { margin: 0 0 20px 0 ; padding: 0; border: none; flex-direction:column; align-items: center; } #SeriesTopContent #TopContent { margin-bottom:20px; } #SeriesTopContent #TopContent h1 { display: block; border-width: 0; border-bottom-width: 1px; border-style: solid; border-color: #e2e2e2; } #SeriesTopContent #TopContent h1 > span::after { content: ""; display: block; position: relative; margin-top: 10px; width: 100px; height: 1px; background: var(--thematic-yellow); } #SeriesTopContent #SeriesImg { flex: 0; } #SeriesTopContent #SeriesImg img { width: 200px; } #RMADetails .returnOptions .input { } #LoginWrapper > div#LoggedIn { flex: 0 0 90%; } /***** 580px - Contact Page ****/ #ContactFormWrapper input { width: 260px; } /********* 580px - Customer Service Page Display *************/ #CategoryFooter .shippingFAQs, #CategoryFooter .warrantyFAQs, #CategoryFooter .orderingFAQs, #CategoryFooter .troubleshootingFAQs { flex: 0 0 100%;max-width: none; padding:0; margin:0 0 10px 0; } #CategoryFooter .troubleshootingFAQs { margin-bottom: 20px; } #CategoryFooter .supportTable .l { min-width:110px; max-width: 200px; white-space:normal; } /***** 580px - Cart Page ****/ #CartTbl .topButtons.buttons .btn, #CartTbl .bottomButtons.buttons .btn { padding: 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } #CartTbl form .buttons .cont { flex: 0 0 140px; } #CartTbl form .buttons .recalc { flex: 0 0 calc(100% - 140px); } /***** 580px - Checkout Page ****/ #BillingEditButtons.editMode div { flex: 0 0 48%; margin-bottom: 3px; } /***** 580px - Footer Section ****/ footer .grid-row-3 .grid-cols { flex-wrap: wrap; } footer .grid-row-3 .grid-cols .grid-col { height: auto;margin: 0 0 0 0; } footer .grid-row-3 .grid-cols .grid-col + .grid-col { padding: 0; margin: 0 0 0 0; border: 0; } footer .grid-row-3 .grid-cols .grid-col-1 { flex: 0 0 50%; } footer .grid-row-3 .grid-cols .grid-col-2 { flex: 0 0 50%; } footer .grid-row-3 .grid-cols .grid-col.grid-col-3 { flex: 0 0 100%; padding: 0 20px; } footer .grid-row-3 .grid-cols .grid-col.grid-col-4 { flex: 0 0 100%; padding: 0 20px; } /** testing */ header { } .product-blocks { display:none; } .module-newsletter .module-body .newsletter-form .input-group .input-group-btn .btn { min-width: 60px; } /*.productTypeExplainedDiv { max-height: 480px; } .compatibleWarrantyDiv { max-height: 370px; }*/ } /** End of MAX-WIDTH:580px **/ @media (max-width: 550px) { /********* 550px - General Page Layout *************/ #WebsiteHeader .full-header { width: 100%; gap: 3px; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper { width: 170px; flex: 0 0 75px; margin: 0 0 3px 0; display: flex; align-content: flex-end; justify-content: flex-start; align-items: flex-end; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper .tagline { font-size: 0.75em; white-space: nowrap; overflow: hidden; } #WebsiteHeader .full-header #Logo { height: 50px; } #WebsiteHeader .full-header #HeaderMain .free-shipping { width: calc(100% - 245px); } #WebsiteHeader .full-header #HeaderMain .free-shipping span + span { } #WebsiteHeader .full-header #HeaderMain .search-wrapper { width: calc(100% - 245px); } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { } #MainMenu .main-menu .main-menu-item.reorder { display: none; } #AccountLogin #Cart .cart-heading { gap: 3px; } #WebsiteHeader .full-header #Cart > a > i { flex-basis: 30px; height: 30px; } #WebsiteHeader .full-header #Cart > a > i::before { font-size: 16px; } #WebsiteHeader .full-header #Cart > a #CartTotal span { text-align: right; line-height: 1; } #WebsiteHeader .full-header #Cart > a #CartTotal span > span { display: none; } #MainMenu .main-menu .j-menu { margin-left: 0; } #MainMenu .main-menu-links > .j-menu > .dropdown.mega-menu > .dropdown-menu { width: 95vw; } #MainMenu .main-menu .main-menu-item > a { padding: 0 10px; } /********* 550px - Home Page Layout *************/ #Homepage-Vendors .product-models-links .links { flex: 0 0 calc(100% / 2 - 5px); } /********* 550px - Rewards Page Layout *************/ #RewardsGiftCardHistory #GiftCardEvents .EventWrapper .EventDetails { flex: 0 0 100%; } #RewardsTimeline #Events, #RewardsGiftCardHistory #GiftCardEvents { font-size: .9em; } #RewardsTimeline #Events .EventWrapper { gap: 5px; } #RewardsTimeline #Events .EventWrapper.header { font-weight: bold; background-color: #b7b7b7; } #RewardsTimeline #Events .EventWrapper .EventCreationTime { flex: 0 0 calc(25% - 15px); order: 0; } #RewardsTimeline #Events .EventWrapper .EventType { flex: 0 0 calc(25% - 15px); order: 1; } #RewardsTimeline #Events .EventWrapper .EventDetails { flex: 0 0 100%; order: 4; font-style: italic; } #RewardsTimeline #Events .EventWrapper .EventStatus { flex: 0 0 calc(25% - 15px); order: 2; } #RewardsTimeline #Events .EventWrapper .EventPoints { flex: 0 0 calc(25% - 15px); text-align: right; order: 3; } /********* 550px - Product Page Layout *************/ #ProductDetails .product-price-group .price-wrapper .price-group .partSeriesGrid th { padding: 10px; } #ProductDetails .product-price-group .price-wrapper .price-group .partSeriesGrid td { padding: 10px; } #RelatedProducts .productContentRow .productPricing td { padding: 10px; } /********* 550px - Product Review & Ratings Display *************/ #ReviewStats { justify-content: flex-start; } #AllProductReviews img, #ReviewStats #OverallAttributes img { width: 90px; flex: 0 0 90px; } #ReviewStats #OverallRatings { flex: 0 0 100%; margin-bottom: 10px; } #ReviewStats #OverallAttributes { flex: 0 0 100% } #ReviewStats #OverallRatings #OverallRating label { flex-basis: auto; margin-right: 10px; } #ReviewStats #OverallRatings .overallWouldRecommend { margin-top: 0; } #WriteAReview { margin-top: 10px; } #IndividualReviews .reviewContainer .reviewAttributes { flex: 0 0 220px; } #IndividualReviews .reviewContainer .reviewComments { flex: 0 0 calc(100% - 220px); } /***** 550px - Manage Payment Information Page ****/ #SavedCardList .card .cardType .cardName { flex-direction: column; align-items: flex-start; } #CreditCard .creditCardInfo label { font-size: .9em; flex: 0 0 97px; } #RMAList .rmaInfoCell { min-width: 180px; } /***** 550px - Shipping Address List Page ****/ #ShippingAddresses .shippingAddress { flex: 0 0 49%; } /***** 550px - Initiate Return Request Page ****/ #RMADetails .rmaLabel { } #RMADetails .returnOptions .input { width: calc(100% - 165px); } #RMAItems .product .subProduct .container > div:first-child > div { flex-wrap: wrap; } #RMADetails .returnQuantity input { height: 35px; } #RMADetails .returnReason .input { flex-wrap: wrap; } #RMADetails .returnReason .select { flex: 0 0 100%; max-width: unset; height: 35px; } #RMADetails .returnReason .select + .select { margin: 5px 0 0 0; } #RMADetails .returnOptions input { display: inline-block; width: 10%; margin: 5px 0; } #RMADetails .returnOptions label + input[type="radio"] { margin: 0; } #RMADetails .returnOptions label { display: inline-block; width: 90%; margin: 5px 0; } #RMADetails .returnReasonDetails { flex-direction: column; } #RMADetails .returnReasonDetails .rmaLabel { flex: 0 0 auto; } .rewards-learn-more-modal { max-height:300px; width: 300px; transform: translateY(15px); } .compatibleWarrantyDiv { max-height: 400px; } /***** 550px - Checkout Page ****/ #CheckoutContent h3 { margin: 0; } #CheckoutContent p { margin-bottom: 5px; } #CheckoutForm .btn-light.btn.btn-sm { padding: 1px 5px;font-size: 10px;line-height: 1.5;border-radius: 3px; align-self: flex-end; margin: 0; } #CheckoutForm .btn-light.btn.btn-sm + .btn-light.btn.btn-sm { } #ShippingSection #EditAddressOptions { flex: 0 0 50%; margin: 0; align-content: flex-end; gap: 10px; } #ShippingSection #ShippingTxtOnly { flex: 0 0 50%; margin: 0; } #ShippingSection #EditAddressOptions.textMode div { margin: 0; } #CheckoutContent #ShipOptionsTotals > div { flex: 0 0 100%; padding: 0; } #ShipOptionsTotals #ShippingMethods { margin-bottom: 15px; } #ShipOptionsTotals #ShippingMethods select { width: 80%;margin: 0 auto; display: block; } #ShipOptionsTotals #SubTotalCell { flex: 0 0 100%; max-width: 260px; margin: 0 auto; } #CreditCardPaymentMethod #CreditCards > div#CreditCard { flex: 0 0 calc(100% - 170px); margin: 0; } #CreditCardPaymentMethod #CreditCards > div#CardButtons { flex: 0 0 150px; margin: 0; align-content: flex-end } #CreditCardPaymentMethod .credit-card-images > .credit-card { flex: 0 0 100%; } #SavedCardList { gap: 5px; } #SavedCardList .card { flex: 0 0 calc(33% - 6px); gap: 5px; min-width: 140px; padding: 3px; } #CheckoutContent #SavedCardList .c .img { flex: 0 0 40px; } #CheckoutContent #SavedCardList .c .cardType { flex: 0 0 calc(100% - 40px); font-size: .85em; } #BillingAddressEntry { margin-bottom: 10px; } #BillingEditButtons.editMode { gap: 10px; } #BillingTxtOnly { flex: 0 0 50%; margin: 0; } #BillingEditButtons, #BillingEditButtons.textMode { flex: 0 0 50%; margin: 0; align-content: flex-end; gap: 10px; } /***** 550px - Footer ****/ footer .grid-row-4 { padding: 10px 15px; } footer .grid-row-4 .grid-cols { flex-direction: column; } footer .grid-row-4 .grid-col-1 { flex: 0 0 30px; } footer .grid-row-4 .grid-col-1 .grid-items { align-content: center; } footer .grid-row-4 .grid-col-2 { flex: 0 0 auto; } footer .grid-row-4 .grid-col-2 .icons-menu-228 > ul > .icons-menu-item { padding: 0 5px; } } /** End of MAX-WIDTH:550px **/ @media (max-width: 525px) { /****************** 525px - REWARDS PAGE *************************/ #RewardsPageContent h2 { flex: 0 0 100%; } #RewardsPageContent .rewards-content .points-options { gap: 20px } #RewardsPageContent .rewards-content .points-options .points-option { flex: 0 0 calc(50% - 20px); } /********* 525px - Checkout Page Layout *************/ #StaffAssist label, #OrderOriginationOption label, #BlindOption label, #DoubleBlindOption label { flex: 0 0 150px; } } /** End of MAX-WIDTH:525px **/ @media (max-width: 500px) { /********* 500px - General Page Layout *************/ header#WebsiteHeader { padding-top: 5px; align-items: flex-start; } #WebsiteHeader .full-header #HeaderMain { flex-wrap: wrap; justify-content: space-between; align-items: center; flex: 0 0 100%; display: flex; flex-direction: row; max-height: unset; } #WebsiteHeader .full-header #HeaderMain .free-shipping { display: none; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper { order: 2; flex: 0 0 200px; max-width: 200px; } #WebsiteHeader .full-header #HeaderMain .search-wrapper { order: 4; margin: 0; flex: 0 0 100%; padding: 0; } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { order: 3; flex-direction: row; align-items: center; transform: none; margin: 0; flex: 0 0 85px; min-width: unset; max-width: unset; justify-content: flex-end; } #WebsiteHeader .full-header #Cart { flex: 0 0 40px; } #AccountLogin .account-items .account-item { margin: 0; } #MainMenu { margin-top: 5px; } #MainMenu .main-menu .main-menu-item > a { padding: 0 7px; } #AccountLogin { justify-content: flex-end; margin: 0 10px 0 0; flex: 0 0 60px; } #WebsiteHeader .full-header .cart-wrapper { flex: 0 0 40px; padding-right: 6px; } #WebsiteHeader .full-header #Search { } #SalesNotice { margin-bottom: 5px; } #SalesNotice .sales-notice-module { flex-wrap: wrap; gap: 5px; } #SalesNotice .sales-notice-module .two { flex: 0 0 calc(100% - 105px); } #SalesNotice .sales-notice-module .three { flex: 0 0 100%; } /****************** 500px - Homepage *************************/ #Main-Top span { font-size: .9em; } #Homepage-Coupon .coupon-code { padding: 10px; gap: 10px; } #HomepageValueProps .info-blocks .info-block::before { border: none; width:30px; height: 30px; } #HomepageMain .title-module h3 { font-size: 24px; } #Homepage-Rewards .module-body .module-item.module-item-2 .content-block { margin-left: 40px; flex: 0 0 calc(100% - 40px); gap: 5px; } #Homepage-Rewards .module-body .module-item.module-item-2 .content-block .info-block-text { flex: 0 0 calc(100%); justify-content: flex-start; } #Homepage-Rewards .module-body .module-item.module-item-2 .content-block .info-block-text i { width: 10px; } /****************** 500px - Vendor/Silo *************************/ #PopularPrinterGrid .grid .cell, #PopularProductsGrid .grid .cell { margin: 0; flex: 0 0 calc(50% - 4px); min-width: unset; min-height: 180px; } /********* 500px - Product Page Display *************/ #ProductPage .product-right #ProductDetails > div { flex: 0 0 100%; max-width: unset; } #ProductDetails .product-price-group { } #ProductDetails .product-price-group .price-wrapper .price-group { text-align: right; } #ProductDetails table.partSeriesGrid { flex: 0; table-layout: fixed; display: flex; flex-direction: row; width: 100%; } #ProductDetails table.partSeriesGrid tbody { display: flex; flex-direction: row; flex: 1; } #ProductDetails table.partSeriesGrid tr { flex-direction: column; display: flex; flex: 1; } #ProductDetails .product-price-group .price-wrapper .price-group .partSeriesGrid th .ea { display:inline; } #ProductDetails table.partSeriesGrid th, #ProductDetails table.partSeriesGrid td { flex: 1; font-size: 13px; min-width: 70px; } #ProductDetails table.partSeriesGrid tr:first-child td { width: 100px; } #ProductDetails table.partSeriesGrid td br { display: none; } #ProductDetails .button-group-page { margin: 0 0 0 0; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell .stepper { margin: 0;height: auto; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.earn-points { position: relative; } #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.earn-points .earnMsg { position: unset; } #SocialButtons { order: 0; align-self: flex-end; margin: 0 0 10px 0 !important; } #RelatedProducts .productContentRow .productPricing .product-pricing { flex: 0 0 calc(100% - 140px); padding: 0 5px 0 0; min-width: 100px; } #RelatedProducts .productContentRow .productPricing .product-pricing td { white-space: normal } #RelatedProducts .productContentRow .productPricing .product-qty { flex: 0 0 140px; } #RelatedSeriesList { } #RelatedSeriesList .series { } /********* 500px - Previous Order Page Layout *************/ #PreviousOrders.orderList .navWrapper { justify-content: space-between; } #PreviousOrders.orderList .searchTd { flex: 0 0 230px; } #PreviousOrders .navTd { } #PreviousOrdersList .previousOrder { flex-direction: column; } #PreviousOrdersList .orderInfoCell { flex: 0 0 100%; } #PreviousOrdersList .orderInformation { display: flex;justify-content: flex-start;flex-direction: row;flex-wrap: wrap; } #PreviousOrdersList .orderInformation > div { flex: 0 0 30%;text-align: center; } #PreviousOrdersList .orderInformation > div + div { margin-left:10px; } #PreviousOrdersList .orderInformation label { width: auto; } #PreviousOrdersList .orderInformation span { width: auto; } #PreviousOrdersList .orderInformation .orderButtons { margin-left: 0; flex: 0 0 100%;display: flex;justify-content: flex-end;flex-direction: row; } #PreviousOrdersList .orderButtons > div { margin: 10px auto; flex: 0 0 100%; display: flex; } #PreviousOrdersList .orderButtons > div a { flex: 0 0 auto; } #PreviousOrdersList .orderInformation .orderButtons > div + div { margin-left: 10px; } /***** 500px - Previous Order/Invoice Page ****/ #Identity .orderInfo { flex-basis: 100%; } #MethodsTable { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-evenly; } #MethodsTable .method { flex: 1; } #MethodsTable .method.empty { display: none; } /***** 500px - Manage Payment Information Page ****/ #SavedCardList .card { flex: 0 0 calc(50% - 5px); } #ImportantNotes ul { padding-left: 30px } #RMAItems .descriptionCell { flex-wrap: wrap; } #RMAItems .descriptionCell .lineItemLabel { flex-basis: 100%; text-align: left; } #RMAItems .descriptionCell .description { flex-basis: 100%; } #RMAItems .descriptionCell .returnCell { flex-basis: 100%; display: flex; justify-content: center; } #RMAItems .descriptionCell .returnCell .return { margin: 10px 0; } /***** 500px - Contact Page ****/ #CategorySection .helpAlertTXT { display:block; } #ContactFormWrapper { } #ContactFormWrapper div { display:flex;flex-direction: row;flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; flex: 0 0 100%; min-width: 100%; margin-bottom: 15px; } #ContactFormWrapper .error { align-items: end; } #ContactFormWrapper label { flex: 0 0 100%; width: auto; text-align: left; margin: 0; } #ContactFormWrapper input { flex: 0 0 98%; width: auto;height: 40px; max-width: unset; } #ContactFormWrapper select { flex: 0 0 98%; width: auto;height: 40px; } #ContactFormWrapper textarea { height: 100px; } #ContactFormWrapper button { align-self: center; } /********* 500px - Customer Service Page Display *************/ #CategoryFooter .content > div:not(#topLinks) { } #CategoryFooter .content > div:not(#topLinks) > div { margin: 0 0 10px 0; flex: 0 0 100%; } #CategoryFooter .answer.supportTable { margin: 20px auto; width: 100%; padding: 0; } #CreditCardPaymentMethod #CreditCards #CreditCardHeader p { margin: 0; } #CreditCardPaymentMethod #CreditCards > div#CardButtons { flex: 0 0 100%; order: 3; flex-direction: row; justify-content: center; align-items: center; } #CreditCardPaymentMethod #CreditCards > div#CardButtons div { flex: 0 0 auto; } #CreditCardPaymentMethod #CreditCards > div#CreditCard { flex: 0 0 100%; order: 4; } #CreditCard .creditCardInfo label { } #CartTable .cartBottom.tr { gap: 10px; } #CartTable .cartBottom #CodeEntry { order: 2; flex: 0 0 100%; } #CartTable .cartBottom #EstimateCell { } #CartTable .cartBottom #SubTotalCell { order: 1; margin: 0 0 0 auto; } #CartTable .cartBottom #CodeEntry > div { flex: 0 0 49%; } /****************** 500px - Footer Content *************************/ footer .grid-row-3 .grid-col-1 { order:2; } footer .grid-row-3 .grid-col-2 { order:3; } footer .grid-row-3 .grid-col-3 { order:4; width: 100%; } footer .grid-row-3 .grid-cols .grid-col.grid-col-4 { order:1; width: 100%; margin-bottom: 20px; } .links-menu-trust-us .module-body { justify-content: center; } .links-menu-trust-us .menu-item { min-width: auto; flex: 0 0 auto; justify-content: center; max-width: 125px; } /*.productTypeExplainedDiv { max-height: 520px; }*/ .earnMsg .hover { width: 88vw; } } /** End of MAX-WIDTH:500px **/ @media (max-width: 475px) { /****************** 475px - General Page Layout *************************/ #MainMenu .main-menu .main-menu-item > a { padding: 0 7px; font-size: .9em; } #MainMenu .main-menu .main-menu-item:first-of-type { } /****************** 475px - Product Page Display *************/ #ContentTabs .nav-tabs > li > a { font-size: 12px; } #ContentTabs .nav-tabs > li.product-video { display: none; } #RelatedProducts .productContentRow .productPricing .product-pricing table td { font-size: .9em; } /****************** 475px - Checkout *************/ #EditShippingAddress h2 { margin: 0; padding: 0; } #EditShippingAddress .reqMsg { align-self: center; } #ShipTo { flex: 0 0 270px; margin: auto 0 0 0; } #ShipTo .atLbl { flex-basis: 135px; justify-content: flex-end; order: 0; margin-right: 5px; } #ShipTo .slLbl { flex-basis: 100%; margin: 10px 0 10px 140px; justify-content: flex-start; order: 2; } #ShipTo .poLbl { flex-basis: 100%; margin: 10px 0 10px 140px; justify-content: flex-start; order: 3; } #ShipTo .apoLbl { flex-basis: 100%; margin: 10px 0 10px 140px; justify-content: flex-start; order: 4; } #ShipTo .whichShouldIChoose { flex-basis: 130px; order: 1; justify-content: flex-start; } #ShippingLeft { order: 0; margin-bottom: 0px; flex-basis: 100%; } #ShippingRight { flex-basis: 100%; order: 2; margin: 20px 0 0 0; } #ShippingRight #VerifiedAddressHeader { flex: 0 0 100%; order: 2; } #ShippingRight #VerifiedShippingAddresses { flex: 0 0 100%; order: 1; } #ShippingSection #SaveAddress, #ShippingSection #SetDefault { order: 1; flex-basis: 90%; margin: 10px 0; } /*.rewards-learn-more-modal { max-height:320px; } .productTypeExplainedDiv { max-height: 550px; } .compatibleWarrantyDiv { max-height: 430px; }*/ } /** End of MAX-WIDTH: 475px **/ @media (max-width: 450px) { /****************** 450px - General Page Layout *************************/ #WebsiteHeader .mobile-menu-container { -webkit-user-select: none; user-select: none; cursor:pointer; display: flex; } #WebsiteHeader .mobile-menu-container .menu-trigger { color: #767676; display: block; order: 1; flex: 0 0 40px; min-width: 40px; max-width: 40px; background: #FFF; height: 40px; cursor: pointer;-webkit-touch-callout: none; padding: 5px; } #WebsiteHeader .mobile-menu-container .menu-trigger:before { content: "\f0c9"; font-size: 34px; } /* #WebsiteHeader .mobile-menu-container .menu-trigger span { display: block;width: 30px;height: 4px;margin-bottom: 5px;position: relative;background: #767676;border-radius: 3px;z-index: 1;transform-origin: 4px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } #WebsiteHeader .mobile-menu-container .menu-trigger span:first-child { transform-origin: 0% 0%; } #WebsiteHeader .mobile-menu-container .menu-trigger span:nth-last-child(2) { transform-origin: 0% 100%; }*/ #WebsiteHeader .mobile-menu-container .navbar { visibility: hidden; z-index:100; position: fixed; top: 7.5rem; flex-direction: column; background-color: #FFFFFF; width: 90%; text-align: center; transition: 0.3s; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } #WebsiteHeader .mobile-menu-container .navbar .nav-menu { padding: 0; margin: 0; } #WebsiteHeader .mobile-menu-container .navbar .nav-menu .nav-item { list-style: none; margin: 0; } #WebsiteHeader .mobile-menu-container .nav-item + .nav-item { border-top: 1px solid rgba(219, 219, 219, 1); } #WebsiteHeader .mobile-menu-container .navbar a { transition: color 0.3s ease; display: block; padding: 20px 0; } #WebsiteHeader .mobile-menu-container:focus-within .navbar { visibility:visible; transform: none; box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.25); } #WebsiteHeader .mobile-menu-container:focus-within .menu-trigger span { opacity: 1;transform: rotate(45deg) translate(-2px, -1px);background: #232323; margin-left: 5px; } #WebsiteHeader .mobile-menu-container:focus-within .menu-trigger span:nth-last-child(3) { opacity: 0;transform: rotate(0deg) scale(0.2, 0.2); } #WebsiteHeader .mobile-menu-container:focus-within .menu-trigger span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #WebsiteHeader .full-header { } #WebsiteHeader .full-header #HeaderMain { justify-content: flex-start; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper { max-width: unset; } #WebsiteHeader .full-header #Logo a { align-items: center; justify-content: center; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper .tagline { text-align: center; } #WebsiteHeader .full-header #HeaderMain .search-wrapper { flex: 0 0 100%; padding: 0; } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { flex: 0 0 calc(100% - 240px); min-width: unset; } #MainMenu { margin-top: 5px; flex: 0 0 25px; } #MainMenu::before { height: 25px; } #MainMenu .main-menu-links { display: none; } #MainMenu .main-menu-phone { flex: 0 0 100%; display: flex; flex-direction: row-reverse; justify-content: flex-start; align-content: center; align-items: center; flex-wrap: nowrap; gap: 10px; } #MainMenu .main-menu-phone > div { height: 23px; align-items: center; } /****************** 450px - Homepage *************************/ #Homepage-Content img { display: none; } #Homepage-CustomerReviews .module.title-module { padding: 0 10px; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews { flex-wrap: wrap; } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review { flex: 0 0 calc(50% - 10px); } #Homepage-CustomerReviews .module-customer-reviews .reviews-widget .list-of-reviews .review.show:nth-child(1) { display: none !important; } /****************** 450px - Category/Vendor/Silo Page *************************/ #SaleProductsGrid .grid .cell .product-qty-fields .pricing { max-width: unset; flex: 0 0 60px; padding: 0; min-width: 60px; } #SaleProductsGrid .grid .cell .product-qty-fields .pricing .price { text-align: right; } #SaleProductsGrid .grid .cell .product-qty-fields .qty-input { flex: 0 0 100px; padding: 0; } /****************** 450px - Product Page Display *************************/ #RelatedProducts .productContentRow.hasQtyPricing .productPricing .product-pricing { min-width: 100px; padding-right: 0; justify-content: center; } #RelatedProducts .productContentRow .productPricing .product-pricing table { flex: 0; table-layout: fixed; display: flex; flex-direction: row; width:100%; } #RelatedProducts .productContentRow .productPricing .product-pricing table tbody { display: flex;flex-direction: row;flex: 1; } #RelatedProducts .productContentRow .productPricing .product-pricing table tr { flex-direction: column;display: flex;flex: 1; } #RelatedProducts .productContentRow .productPricing .product-pricing table tr:first-child td { width: 100px; } #RelatedProducts .productContentRow .productPricing .product-pricing table td { flex: 1;font-size: 13px; min-width: 70px; } #RelatedProducts .productContentRow .productPricing .product-pricing table td.topRow { flex: 1;font-size: 13px; min-width: 70px; } #RelatedProducts .productContentRow .productPricing .product-pricing table td br { display:none; } #RelatedProducts .productContentRow .productPricing .partGridMessage { justify-content: center; } #ProductSpecsTable table.costPerPageTable { table-layout: fixed; display: flex; flex-direction: row; width:100%; } #ProductSpecsTable table.costPerPageTable tbody { display: flex;flex-direction: row;flex: 1; } #ProductSpecsTable table.costPerPageTable tr { flex-direction: column;display: flex;flex: 1; } #ProductSpecsTable table.costPerPageTable td { flex: 1; } #ProductSpecsTable table.costPerPageTable td br { display:none; } /********* 450px - Product Review & Ratings Display *************/ #ReviewStats { } #AllProductReviews img, #ReviewStats #OverallAttributes img { } #ReviewStats #OverallRatings { } #ReviewStats #OverallAttributes { flex: 0 0 100% } #ReviewStats #OverallRatings #OverallRating label { flex-basis: auto; margin-right: 10px; } #ReviewStats #OverallRatings .overallWouldRecommend { margin-top: 0; } #WriteAReview { margin-top: 10px; } #IndividualReviews .reviewContainer .reviewAttributes { flex: 0 0 100%; margin: 0 0 10px 10px; } #IndividualReviews .reviewContainer .reviewComments { flex: 0 0 100%; } /********* 450px - Series Page Display *************/ #SeriesTopContent #SeriesImg img { width: 150px; } /****************** 450px - Search Page *************************/ #ProductSearch .searchModel div { flex-wrap: wrap; } #ProductSearch .searchModel select { min-width: 300px; } /***** 450px - Manage Payment Information Page ****/ #SavedCardList .card .cardDetails { flex: 0 0 50%; } #SavedCardList .card .billingAddress { flex: 0 0 50%; } #SavedCardList .card .deleteWrapper { flex: 0 0 100%; padding: 5px; justify-content:flex-end; } #RMAList .rmaInfoCell { min-width: 155px; font-size: 12px; } #RMAList .orderInformation .orderInformationLabel { width: 72px; } #RMAList .RMAButtons i { display: none; } #RMAList .RMAButtons .btn-sm.btn { padding: 5px; } #RMAList .RMAButtons .RMAExpired { width: 100%; font-size: 10px; } #RMAList .qtyTh, #RMAList .qtyCell { display: none; } #RMAList .itemCell { width: 100%; } /********* 450px - RMA **********/ #AlternativeEmail p { font-size:12px; } #AlternativeEmail .rmaLabel { font-size:14px; width: 125px; } #AlternativeEmail .input { font-size:14px; width: calc(100% - 125px); } #AlternativeEmail .input input { width: 100%; } /********* 450px - Cart/Login Pages **********/ #LoginWrapper { gap: 0; } #LoginWrapper > div.heading { margin-bottom: 10px; } #LoginWrapper .heading img { width: 30px; } #LoginWrapper > div { flex: 0 0 100%; } #LoginWrapper > div label { flex: 0 0 110px; } #CartTbl form .buttons.topButtons { gap: 10px; } #CartTbl form .buttons .cont { flex: 0 0 100%; } #CartTbl form .buttons .recalc { flex: 0 0 calc(100%); } /********* 450px - Checkout **********/ #ShippingAddressList .addressList > div { width: 100%; } .close button.btn { margin: 0 auto; } .rewards-learn-more-modal { max-height:330px; } .compatibleWarrantyDiv { max-height: 430px; font-size: 90% } .compatibleWarrantyDiv p { margin: 0 0 10px 0; } /***** 450px - Sitemap ****/ #SiteMap .container .section > div { margin-left: 0; } } /** End of MAX-WIDTH:450px **/ @media (max-width: 415px) { /***** Manage Payment Information Page ****/ #SavedCardList .card { border: none; } #SavedCardList .cardForm { padding: 0; } #RMADetails .returnMoreProduct a { font-size: 80%; } .rewards-learn-more-modal { font-size: 90%; } .productTypeExplainedDiv { font-size: 90%; } .productTypeExplainedDiv p { margin: 0 0 10px 0; } } /** End of MAX-WIDTH:415px **/ @media (max-width: 400px) { /********* 400px - General Page Layout *************/ #WebsiteHeader .mobile-menu-container { flex: 0 0 50px; } #WebsiteHeader .full-header #HeaderMain .logo-wrapper { flex: 0 0 150px; max-width: 150px; min-width: 150px; } #WebsiteHeader .full-header #HeaderMain .search-wrapper { flex: 0 0 calc(100% - 20px); } #WebsiteHeader .full-header #HeaderMain .manage-cart-wrapper { flex: 0 0 calc(100% - 200px); min-width: unset; max-width: 200px; } #AccountLogin { margin: 0 5px; } #WebsiteHeader .full-header .cart-wrapper { } /****************** 400px - Homepage *************************/ #HomepageValueProps .info-blocks .info-block { flex-direction: column; } /****************** 400px - REWARDS PAGE *************************/ #RewardsPageContent .rewards-content .points-options { } #RewardsPageContent .rewards-content .points-options .points-option { flex: 0 0 100%; } /****************** 400px - Vendor/Silo/Category *************************/ #SaleProductsGrid .grid { gap: 20px; } #SaleProductsGrid .grid .cell { flex: 0 0 100%; border-bottom: 1px solid #e2e2e2; padding-bottom: 20px; } #SaleProductsGrid .grid .cell .product-qty-fields .pricing { flex: calc(100% - 120px); padding: 0 0 0 10px; } #SaleProductsGrid .grid .cell .product-qty-fields .qty-input { flex: 0 0 120px; margin: unset; } #PopularPrinterGrid .grid .cell, #PopularProductsGrid .grid .cell { padding: 5px; min-height: 160px; } #PopularPrinterGrid .grid .cell img, #PopularProductsGrid .grid .cell img { width: 100px; } #PopularPrinterGrid .grid .cell div, #PopularProductsGrid .grid .cell div { -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } #CategoryFooter .content > p { font-size: 0.9em; line-height: 1.4; } /********* 400px - Product Review & Ratings Display *************/ #ReviewStats #OverallRatings #OverallRating label { flex-basis: 100%; margin-right: 0; font-size: 16px; } /********* 400px - Product Page *************/ #ProductDetails .button-group-page .buttons-wrapper .stepper-group .stepper-cell.earn-points .earnMsg.show .hover { left: 0; } #RelatedProducts .productContentRow .productPricing .product-qty-fields > div.addToCartBtn button { font-size: 12px; line-height: 1.5; border-radius: 3px; border-width: 1px; padding: 10px; } /***** 400px - Manage Shipping Information Page ****/ #ShippingAddresses .shippingAddress { flex: 0 0 100%; margin: 0 0 5px 0; max-width: unset; flex-direction: row; } #ShippingAddresses .shippingAddress .shippingTxtOnly { flex: 0 0 calc(100% - 80px); margin: 0; } #ShippingAddresses .shippingAddress .addressActions { flex: 0 0 80px; align-content: flex-start; } #ShippingAddresses .shippingAddress .addressActions > .addressAction + .addressAction { margin: 10px 0 0 0; } #ShippingAddresses .shippingAddress .addressActions > .addressAction i { display: initial; } /***** 400px - Manage Payment Information Page ****/ #SavedCardList .card .cardDetails { flex: 0 0 100%; } #SavedCardList .card .billingAddress { flex: 0 0 100%; } #SavedCardList .card .deleteWrapper { flex: 0 0 100%; padding: 5px; justify-content:flex-end; } #SavedCardList .cardForm .heading { flex: 0 0 100%; max-width: 100%; height: auto; } #SavedCardList .cardForm h3 { margin: 0; padding: 0; } #SavedCardList .cardForm .reqMsg { flex: 0 0 100%; max-width: 100%; margin-bottom: 10px; } #CreditCard .ccFields .creditCardInfo { flex: 0 0 100%; } #CreditCard .creditCardInfo #CardNumber { flex: 0 0 calc(100% - 160px); } #CreditCard .creditCardInfo .cardType { display: none; } /*#CreditCard .creditCardImages { flex-flow: wrap; } #CreditCard .creditCardImages .cvvExplainer { flex: 0 0 100%; }*/ #CreditCard .creditCardInfo .ExpiryMonth, #CreditCard .creditCardInfo .ExpiryYear { flex: 0 1 28%; min-width: 70px; } #CreditCard .creditCardInfo select + select { margin-left: 3px; } #BillingLeft, #BillingRight { max-width: 100%; } #BillingLeft label, #BillingRight label { flex: 0 0 108px; } #BillingLeft input[type=text], #BillingRight input[type=tel], #BillingRight input[type=text], #BillingRight select { max-width: 100%; } /****************** 400px - Email/Password Reset Page *************************/ #UpdatePassword div, #UpdateEmailAddress div { font-size:90%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; } #UpdatePassword label, #UpdateEmailAddress label { width:100px; flex: 0 0 100px; margin-right: 5px; } #UpdateEmailAddress .currentEmailAddress, #UpdatePassword input, #UpdateEmailAddress input { flex: 0 0 calc(100% - 105px); height: 30px; } /****************** 400px - Shipping Address Edit Page *************************/ #ShippingLeft { flex: 0 0 100%; } #ShippingLeft select#Country { width: 100%; } /****************** 400px - RMA List Page Page *************************/ #RMAList .previousOrder { flex-direction: row; flex-wrap: wrap; } #RMAList .rmaInfoCell { flex: 0 0 100%; display: flex; align-content: center; justify-content: space-between; align-items: center; } #RMAList .orderInformation { flex: 0 0 130px; } #RMAList .orderInformation .orderInformationLabel { width: 62px; } #RMAList .RMAButtons { flex: 0 0 calc(100% - 130px); } /****************** 400px - RMA Edit Page *************************/ #RMADetails .rmaLabel { flex: 0 0 100%; } #RMADetails .input { flex: 0 0 100%; } #AlternativeEmail .rmaLabel { font-size:14px; width: 100%; } #AlternativeEmail .input { font-size:14px; width: calc(100%); } #AlternativeEmail .input input { height: 35px; } /****************** 400px - Checkout Page *************************/ #ShippingSection div#EditAddressOptions { order: 1; flex: 0 0 100%; flex-direction: row; justify-content: space-between; align-items: center; gap: 5px; margin-bottom: 10px; } #ShippingSection #EditAddressOptions.textMode div, #BillingEditButtons.textMode div { white-space:normal; height: 35px; padding: 3px 5px; } #ShippingSection div#ShippingTxtOnly { order: 2; flex: 0 0 100%; } #BillingEditButtons.textMode, #BillingEditButtons.editMode { order: 1; flex: 0 0 100%; flex-direction: row; justify-content: space-between; align-items: center; gap: 5px; margin: 5px 0; } #BillingTxtOnly { order: 2; flex: 0 0 100%; } #CheckoutForm .btn-light.btn.btn-sm { flex: 0 0 49%; } #CheckoutForm .btn-light.btn.btn-sm + .btn-light.btn.btn-sm { margin: 0 !important; } /****************** 400px - Footer Content *************************/ footer .grid-cols { flex-direction: column;align-content: center;justify-content: flex-start;align-items: center; } footer .grid-row-3 .grid-col { width: 100%; border: none; } /*footer .grid-row-3 .grid-col-1 { order:1; } footer .grid-row-3 .grid-col-2 { order:2; } footer .grid-row-3 .grid-col-3 { order:3; } footer .grid-row-3 .grid-col-4 { order:4; } .productTypeExplainedDiv { max-height: 60vh; } .compatibleWarrantyDiv { max-height: 55vh; }*/ .shoppingcart { font-size: 90%; } .shoppingcart .customerChoices { display: flex !important; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: flex-start; } .shoppingcart #ShippingMsg .freeShippingSubText { } .shoppingcart #NavButtons { flex: 1; display: flex !important; flex-direction: column; justify-content: space-evenly; align-content: center; align-items: center; } .shoppingcart #NavButtons .closeCart { margin-bottom: 15px; flex: 1 1 100%; min-width: 100%; } .shoppingcart #NavButtons .viewCart { flex: 1 1 100%; width: 100%; } .shoppingcart #NavButtons .closeCart span, .shoppingcart #NavButtons .viewCart a { width: 100%; } } /** End of MAX-WIDTH:400px **/ @media (max-width: 380px) { #LoadAddressButtons { display: flex; flex-wrap: wrap; flex-direction: row; align-content: flex-start; justify-content: center; align-items: flex-start; } #LoadAddressButtons div { flex: 0 0 100%; } #LoadAddressButtons div + div { margin-top: 10px; } #RMADetails .returnMoreProduct a { font-size: 10px; } } /** End of MAX-WIDTH:380px **/ @media (max-width: 375px) { #AccountLogin { display: none; } #RelatedProducts .productContentRow .productPricing .product-pricing table td { padding: 5px !important; } #ShippingLeft label { flex: 0 0 115px; } #ShippingLeft input[type=text], #ShippingLeft select { flex: 0 0 calc(100% - 115px); } } /** End of MAX-WIDTH:375px **/ @media (max-width: 350px) { } /** End of MAX-WIDTH:350px **/