*
* This will reverse the displayed order of the system so that it runs in the
* opposite order to our source, effectively flipping the system over.
*
*
*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes.
=========================================== */
.o-layout {
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin: 0 0 0 calc(0px - 16px);
padding: 0;
list-style: none;
/*transition: all .3s ease;*/
}
.o-layout__item {
flex: 1 1 auto;
max-width: 100%;
padding-left: 16px;
/*transition: all .3s ease;*/
}
.o-layout.o-layout__item {
margin-left: 0;
/*padding-left: 0;*/
}
/* Layout Display Direction.
* The flex-direction property specifies the direction of the flexible items
* inside the flex container. The default value of flex-direction is row
* (left-to-right, top-to-bottom).
=========================================== */
/**
* To reverse the layout direction, use o-layout--row-reverse.
*/
.o-layout--row-reverse {
flex-direction: row-reverse;
}
/**
* Use o-layout--column to set the flex items vertically.
*/
.o-layout--column {
flex-direction: column;
}
/**
* Same as column, but reversed.
*/
.o-layout--column-reverse {
flex-direction: column-reverse;
}
@media screen and (min-width: 48em) {
.o-layout--row--m {
flex-direction: row;
}
.o-layout--row-reverse--m {
flex-direction: row-reverse;
}
.o-layout--column--m {
flex-direction: column;
}
.o-layout--column-reverse--m {
flex-direction: column-reverse;
}
}
@media screen and (min-width: 60em) {
.o-layout--row--l {
flex-direction: row;
}
.o-layout--row-reverse--l {
flex-direction: row-reverse;
}
.o-layout--column--l {
flex-direction: column;
}
.o-layout--column-reverse--l {
flex-direction: column-reverse;
}
}
@media screen and (min-width: 90em) {
.o-layout--row--w {
flex-direction: row;
}
.o-layout--row-reverse--w {
flex-direction: row-reverse;
}
.o-layout--column--w {
flex-direction: column;
}
.o-layout--column-reverse--w {
flex-direction: column-reverse;
}
}
/* Gutter size modifiers.
=========================================== */
/**
* Smaller gutters between items.
*/
.o-layout--narrow {
margin-left: calc(0px - (16px * 0.5));
}
.o-layout--narrow > .o-layout__item {
padding-left: calc(16px * 0.5);
}
/**
* Larger gutters between items.
*/
.o-layout--wide {
margin-left: calc(0px - (16px * 2));
}
.o-layout--wide > .o-layout__item {
padding-left: calc(16px * 2);
}
/**
* No gutters between items.
*/
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
/**
* Make full width of parent.
*/
.o-layout--full {
margin-right: calc(0px - 16px);
}
/* Vertical gutter modifiers.
=========================================== */
/**
* Include vertical gutters on layout items.
*/
.o-layout--spaced > .o-layout__item {
margin-bottom: 16px;
}
/**
* If we've chosen to change the size of the horizontal gutters, let's change
* the vertical gutters accordingly.
*/
.o-layout--spaced.o-layout--narrow > .o-layout__item {
margin-bottom: calc(16px * 0.5);
}
.o-layout--spaced.o-layout--wide > .o-layout__item {
margin-bottom: calc(16px * 2);
}
/* Align-Items modifiers.
* The align-items property controls how flex items are positioned
* when the items do not use all available space along the container's cross-axis.
=========================================== */
/**
* Items are positioned at the start of the container's cross-axis.
*/
.o-layout--align-top {
align-items: flex-start;
}
/**
* Items are positioned along the center of the container's cross-axis.
*/
.o-layout--align-center {
align-items: center;
}
/**
* Items are positioned at the end of the container's cross-axis.
*/
.o-layout--align-bottom {
align-items: flex-end;
}
/**
* Items are positioned at along the container's cross-axis so that their baselines align.
*/
.o-layout--align-baseline {
align-items: baseline;
}
/**
* Default value. Items are stretched to fit the container's cross-axis.
*/
.o-layout--align-stretch {
align-items: stretch;
}
/* Align-Content modifiers.
* The align-content property controls how lines are positioned in multi-line containers.
=========================================== */
/**
* Default value. Lines are packed at the start of the container's cross-axis.
*/
.o-layout--align-content-start {
align-content: flex-start;
}
/**
* Lines are packed along the center of the container's cross-axis.
*/
.o-layout--align-content-center {
align-content: center;
}
/**
* Lines are packed at the end of the container's cross-axis.
*/
.o-layout--align-content-end {
align-content: flex-end;
}
/**
* Lines are distributed along the container's cross-axis with equal spacing around each line.
*/
.o-layout--align-content-around {
align-content: space-around;
}
/**
* Lines are distributed along the container's cross-axis with equal spacing between each line.
*/
.o-layout--align-content-between {
align-content: space-between;
}
/* Align-Self modifiers.
* The align-self property controls how individual flex items are positioned along the container's cross-axis.
=========================================== */
/**
* Default value. Items are aligned based on the flex container's `align-items` value.
*/
.o-layout--align-self-auto {
align-self: auto;
}
/**
* Items are aligned to the start of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-start {
align-self: flex-start;
}
/**
* Items are aligned along the center of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-center {
align-self: center;
}
/**
* Items are aligned to the end of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-end {
align-self: flex-end;
}
/**
* Items are stretched to fill the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-stretch {
align-self: stretch;
}
/* Justify-Content modifiers.
* The justify-content property controls how flex items are positioned
* when the items do not use all available space along the container's main-axis.
=========================================== */
/**
* Default value. Items are justified at the start of the container's main-axis.
*/
.o-layout--justify-start {
justify-content: flex-start;
}
/**
* Items are justified along the center of the container's main-axis.
*/
.o-layout--justify-center {
justify-content: center;
}
/**
* Items are justified at the end of the container's main-axis.
*/
.o-layout--justify-end {
justify-content: flex-end;
}
/**
* Items are justified along the container's main-axis with equal spacing around each item.
*/
.o-layout--justify-around {
justify-content: space-around;
}
/**
* Items are justified along the container's main-axis with equal spacing between each item.
*/
.o-layout--justify-between {
justify-content: space-between;
}
/* Growth control.
=========================================== */
.o-layout--grow {
flex-grow: 1;
}
.o-layout--no-grow {
flex-grow: 0;
}
.o-layout--shrink {
flex-shrink: 1;
}
.o-layout--no-shrink {
flex-shrink: 0;
}
/* Wrapping modifiers.
=========================================== */
.o-layout--no-wrap {
flex-wrap: nowrap;
}
.o-layout--wrap {
flex-wrap: wrap;
}
.o-layout--wrap-reverse {
flex-wrap: wrap-reverse;
}
/* Flex ordering modifiers.
* Set an item to be first or last in grid.
=========================================== */
.o-layout__first {
order: -1;
}
.o-layout__last {
order: 1;
}
@media screen and (min-width: 40em) {
.o-layout__first--s {
order: -1;
}
.o-layout__last--s {
order: 1;
}
}
@media screen and (min-width: 48em) {
.o-layout__first--m {
order: -1;
}
.o-layout__last--m {
order: 1;
}
}
@media screen and (min-width: 60em) {
.o-layout__first--l {
order: -1;
}
.o-layout__last--l {
order: 1;
}
}
@media screen and (min-width: 90em) {
.o-layout__first--w {
order: -1;
}
.o-layout__last--w {
order: 1;
}
}
/* ==========================================================================
OBJECTS / LISTS
========================================================================== */
/**
* The o-list-bare object strips list-like appearance from lists by removing
* their bullets, and any indentation.
*/
.o-list-bare {
margin-left: 0;
list-style: none;
}
/**
* The o-list-block object displays any list of items into stacked blocks.
*/
.o-list-block {
margin-left: 0;
list-style: none;
}
.o-list-block__item {
display: block;
}
/**
* The o-list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
.o-list-inline__item:not(:last-child) {
margin-right: 16px;
}
/* Spacing modifiers
=========================================== */
.o-list-inline--narrow > .o-list-inline__item {
margin-right: calc(16px * 0.5);
}
.o-list-inline--wide > .o-list-inline__item {
margin-right: calc(16px * 2);
}
/* ==========================================================================
OBJECTS / TABLES
========================================================================== */
/**
* A simple object for manipulating the structure of HTML 'table's.
*/
.o-table {
width: 100%;
}
/* Equal-width table cells.
========================================================================== */
/**
* 'table-layout: fixed' forces all cells within a table to occupy the same
* width as each other. This also has performance benefits: because the browser
* does not need to (re)calculate cell dimensions based on content it discovers,
* the table can be rendered very quickly. Further reading:
* https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
*/
.o-table--fixed {
table-layout: fixed;
}
/* Padding variants.
========================================================================== */
.o-table--narrow th,
.o-table--narrow td {
padding: calc(16px * 0.5);
}
.o-table--wide th,
.o-table--wide td {
padding: calc(16px * 2);
}
/* Borderless table
* Removes default border-bottom on TABLE rows.
=========================================== */
.o-table-borderless tr {
border: none;
}
/* ==========================================================================
OBJECTS / WRAPPER
========================================================================== */
/**
* Page-level constraining and wrapping elements.
*/
.o-site-wrapper {
width: 100%;
max-width: 100rem;
margin-right: auto;
margin-left: auto;
}
.o-wrapper {
width: 100%;
max-width: 90rem;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-left: 16px;
}
.o-wrapper--full {
max-width: 100vw;
}
.o-wrapper--flush {
padding-right: 0;
padding-left: 0;
}
/* ==========================================================================
COMPONENTS / BUTTONS
========================================================================== */
/**
* 1. Allows styling of box model properties.
* 2. Reset browser styles.
* 3. Subtract border-width from the padding so buttons don't grow if the
* border-width is modified.
* 4. Tidy alignment for when the button size needs to be modified.
* 5. Make buttons inherit font styles (necessary when styling `input`s as
* buttons).
* 6. Set default button font-size.
* 7. Set default button font-weight.
* 8. Set default button text-alignment.
* 9. Remove anchor text-decoration (necessary when styling `a`s as buttons).
* 10. Base transparent border for modifiers to alter.
* 11. Set default button border-radius.
* 12. Set default button transition (color, background-color, border-color and box-shadow)
* 13. Force all button-styled elements to appear click-able.
* 14. Remove browser outline styles.
*/
.c-button {
display: inline-block; /* [1] */
margin: 0; /* [2] */
padding: calc(0.5em - 1px) calc(1em - 1px); /* [3] */
position: relative;
vertical-align: middle; /* [4] */
font-family: inherit; /* [5] */
font-size: 1em; /* [6] */
font-weight: 400; /* [7] */
line-height: normal;
text-align: center; /* [8] */
text-decoration: none; /* [9] */
background-color: #c0c0c0;
border: 1px solid rgba(0, 0, 0, 0); /* [10] */
border-radius: 0.125em; /* [11] */
color: #fff;
-webkit-appearance: none;
appearance: none;
cursor: pointer; /* [13] */
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* [12] */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c-button:hover,
.c-button:active,
.c-button:focus {
text-decoration: none; /* [9] */
outline: none; /* [1] */
}
.c-button:not([class*="u-bg-"]):not([class*="c-button--primary"]):hover{
background-color: #9a9a9a;
}
/**
* Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
*/
.c-button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Button aesthetic modifiers
=========================================== */
/**
* For buttons that identify as the primary action.
*/
.c-button--primary {
background-color: #3d70b2;
border-color: #3d70b2;
color: #fff;
}
.c-button--primary:hover,
.c-button--primary:active {
background-color: #4888c8;
border-color: #4888c8;
}
/**
* For outlined or hollow buttons.
*/
.c-button--hollow {
background-color: rgba(0, 0, 0, 0);
border-color: currentColor;
color: #3d70b2;
}
.c-button--hollow:not([class*="u-bg-"]):hover{
background-color: #eaeaea;
}
/**
* For buttons you want to look like normal links.
*/
.c-button--clear {
background-color: rgba(0, 0, 0, 0);
}
.c-button--clear:hover,
.c-button--clear:active {
border-bottom: 1px solid currentColor;
}
.c-button--clear:not([class*="u-bg-"]):hover{
background-color: rgba(0, 0, 0, 0);
}
/* Button state modifiers
=========================================== */
/**
* For buttons whose state is toggled.
*/
.c-button:disabled,
.c-button.is-disabled,
.c-button.is-disabled:hover,
.c-button.is-disabled:active,
.c-button.is-disabled:focus {
color: #fff;
background-color: #c0c0c0;
border-color: #c0c0c0;
cursor: not-allowed;
}
/**
* For buttons whose state is toggled when a related form or field contains
* an error or multiple errors.
*/
.c-button.is-error,
.c-button.is-error:hover,
.c-button.is-error:active,
.c-button.is-error:focus,
.is-error .c-button,
.is-error .c-button:hover,
.is-error .c-button:active,
.is-error .c-button:focus {
background-color: #c8102e;
border-color: #c8102e;
color: #fff;
cursor: not-allowed;
}
/* Button sizing modifiers
=========================================== */
.c-button--tiny {
padding: calc(0.5em / 2 - 1px) calc(1em / 2 - 1px); /* [3] */
font-size: 0.625em;
}
.c-button--small {
padding: calc(0.5em / 1.5 - 1px) calc(1em / 1.5 - 1px); /* [3] */
font-size: 0.75em;
}
.c-button--large {
padding: calc(0.5em * 2 - 1px) calc(1em * 2 - 1px); /* [3] */
}
.c-button--huge {
padding: calc(0.5em * 3 - 1px) calc(1em * 3 - 1px); /* [3] */
}
.c-button--flush {
padding-right: 0;
padding-left: 0;
}
/**
* For buttons that need to display full-width on small devices only.
*/
.c-button--full-small {
display: block;
width: 100%;
}
/**
* For buttons that need to display full-width.
*/
.c-button--full {
display: block;
width: 100%;
}
/* Button glossy modifiers
=========================================== */
.c-button--glossy {
box-shadow: 0 1px 4px -2px #707070;
text-shadow: 0 -1px #707070;
}
.c-button--glossy::after {
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
border-radius: inherit;
content: '';
}
/* ==========================================================================
COMPONENTS / CONTROL GROUPS
========================================================================== */
/**
* To group related buttons and/or inputs together, you can use the
* `.c-control-group` wrapping element. This will bunch the related elements
* together and remove the spacing between them.
*/
.c-control-group {
display: flex;
}
.c-control-group .c-control-group__label {
height: calc(2.5em - (1px * 2));
margin-bottom: 0;
padding-right: calc(16px / 2);
line-height: calc(2.5em - (1px * 2));
}
.c-control-group .c-control-group__button,
.c-control-group .c-control-group__field {
border-radius: 0;
}
.c-control-group .c-control-group__field {
height: auto;
margin-bottom: 0;
}
.c-control-group .c-control-group__button:not(:first-child):not(:first-of-type),
.c-control-group .c-control-group__field:not(:first-child):not(:first-of-type) {
border-left-width: 0;
}
.c-control-group .c-control-group__button:first-child,
.c-control-group .c-control-group__field:first-child {
border-top-left-radius: 0.125em;
border-bottom-left-radius: 0.125em;
}
.c-control-group .c-control-group__button:last-child,
.c-control-group .c-control-group__field:last-child {
border-top-right-radius: 0.125em;
border-bottom-right-radius: 0.125em;
}
/**
* Adding the `.c-control-group--rounded` modifier will make the first and
* last related elements rounded.
*/
.c-control-group--rounded .c-control-group__button:first-child,
.c-control-group--rounded .c-control-group__field:first-child {
border-top-left-radius: 10em;
border-bottom-left-radius: 10em;
}
.c-control-group--rounded .c-control-group__field:first-child {
padding-left: 16px;
}
.c-control-group--rounded .c-control-group__button:last-child,
.c-control-group--rounded .c-control-group__field:last-child {
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
}
/**
* Adding the `.c-control-group--rounded-right` modifier will make the last
* related element rounded.
*/
.c-control-group--rounded-right .c-control-group__button:last-child,
.c-control-group--rounded-right .c-control-group__field:last-child {
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
}
/**
* Adding the `.c-control-group--rounded-left` modifier will make the first
* related element rounded.
*/
.c-control-group--rounded-left .c-control-group__button:first-child,
.c-control-group--rounded-left .c-control-group__field:first-child {
border-top-left-radius: 10em;
border-bottom-left-radius: 10em;
}
/**
* Adding the `.c-control-group--stacked` modifier will turn the related
* elements into a vertical element.
*/
.c-control-group--stacked {
flex-wrap: wrap;
}
.c-control-group--stacked .c-control-group__button:not(:first-child):not(:first-of-type),
.c-control-group--stacked .c-control-group__field:not(:first-child):not(:first-of-type) {
border-left-width: 1px;
}
.c-control-group--stacked .c-control-group__button,
.c-control-group--stacked .c-control-group__field {
flex: 0 0 100%;
max-width: 100%;
margin-left: 0;
}
.c-control-group--stacked .c-control-group__button:not(:first-child):not(:first-of-type),
.c-control-group--stacked .c-control-group__field:not(:first-child):not(:first-of-type) {
border-top: 0;
}
.c-control-group--stacked .c-control-group__button:not(:first-child):not(:last-child):not(:first-of-type):not(:last-of-type),
.c-control-group--stacked .c-control-group__field:not(:first-child):not(:last-child):not(:first-of-type):not(:last-of-type) {
border-radius: 0;
}
.c-control-group--stacked .c-control-group__button:first-child,
.c-control-group--stacked .c-control-group__field:first-child {
border-radius: 0.125em 0.125em 0 0;
}
.c-control-group--stacked .c-control-group__button:last-child,
.c-control-group--stacked .c-control-group__field:last-child {
border-radius: 0 0 0.125em 0.125em;
}
/* ==========================================================================
COMPONENTS / DIVIDER
========================================================================== */
/**
* Divider component to provide more prominent horizontal rules between other
* elements.
*
* The default Divider and it's `--top` modifier are intended for use on
* horizontal rules.
* e.g. `
`
*
* 1. Set a transparent border on the relevant edge to prevent element collapse.
* 2. Reduce the `margin-bottom` by the same width as the divider in order to
* keep on our baseline grid.
*/
.c-divider {
position: relative;
margin-bottom: calc(16px - 1px); /* 2 */
border: solid transparent;
border-width: 0 0 1px; /* 1 */
}
.c-divider::before,
.c-divider::after {
display: block;
position: absolute;
width: 100%;
content: "";
}
/**
* Divider gradient border.
*/
.c-divider::before {
bottom: 0;
height: 1px;
background: linear-gradient(to right, rgba(191, 191, 191, 0), rgb(192, 192, 192), rgba(191, 191, 191, 0));
}
/**
* Divider shadow.
*/
.c-divider::after {
top: 100%;
height: calc(16px / 2);
background: radial-gradient(at 50% 0, rgba(74, 74, 74, .15), transparent 40%);
}
/**
* Top divider
*/
.c-divider--top {
border-width: 1px 0 0;
}
.c-divider--top::before {
bottom: 100%;
background: linear-gradient(to right, rgba(191, 191, 191, 0), rgb(192, 192, 192), rgba(191, 191, 191, 0));
}
.c-divider--top::after {
top: calc(0px - calc(16px / 2) - 1px);
background: radial-gradient(at 50% 100%, rgba(74, 74, 74, .15), transparent 40%);
}
/* ==========================================================================
COMPONENTS / FORMS
========================================================================== */
/* Form list
=========================================== */
/**
* All form fields should be presented in a list so that
*
* a) they are easier to navigate using a screen reader;
* b) if CSS fails to load for any reason, the user is still presented with a
* well-formatted list of fields.
*/
.c-form-list:not(.o-layout) {
margin: 0;
padding: 0;
list-style: none;
}
.c-form-list__item {
display: block;
margin-bottom: calc(1em / 2);
width: 100%;
}
@media (min-width: 48em) {
.c-form-list__item {
max-width: 20em;
}
/* For any inputs that need to be displayed full-width */
.c-form-list__item--full {
max-width: 100%;
}
}
/* Form labels
=========================================== */
/**
* All LABEL elements must also carry a class of `.c-form-label`. By applying
* these styles to a class and not to the LABEL element directly, we are free
* to reuse the same look-and-feel on spoofed LABEL elements. E.g. when we have
* a ‘meta label’ covering a number of sub labels:
*
* Gender
* • Male • Female • Rather not say
*
*/
.c-form-label {
display: inline-block;
margin-bottom: calc(1em / 4);
}
/* Form text inputs
=========================================== */
/**
* All text-like form inputs require a class of `.c-form-input`: we do not use
* selectors like `input[type="text"] {}`.
*
* 1. Fix for IE 10/11 removing vertical padding from inputs which was being
* ignored.
* 2. Padding added via line-height/height to re-center text for all browsers
* (38px to account for border).
*/
.c-form-input {
display: inline-block;
margin-bottom: calc(1em / 4);
padding: 0 calc(1em / 2); /* [1] */
width: 100%;
height: calc(2.5em - (1px * 2)); /* [2] */
line-height: calc(2.5em - (1px * 2)); /* [2] */
background-color: #fff;
border: 1px solid #c0c0c0;
border-radius: 0.125em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
outline: 0;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
-moz-appearance: none;
-webkit-appearance: none;
}
.c-form-input:focus {
border-color: #fff;
box-shadow: inset 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
outline: none;
}
/**
* For use on large text inputs such as textareas
*/
.c-form-input--long {
height: 6em;
}
.c-form-input--file {
padding: 0;
line-height: calc(2em - (1px * 2));
}
/* Form select inputs
=========================================== */
.c-form-select {
display: inline-block;
position: relative;
margin-bottom: calc(1em / 4);
width: 100%;
font-size: 1em;
line-height: 1.5;
cursor: pointer;
}
/**
* Gradient to hide the overflow of long labels
*
* 1. Stretch to full height on the right (taking into account border width)
*/
.c-form-select::before {
position: absolute;
top: 1px; /* [1] */
right: 1px; /* [1] */
bottom: 1px; /* [1] */
width: calc(1em * 2);
background: #fff;
background: -ms-linear-gradient(right, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0));
background: linear-gradient(to left, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0));
border-radius: 0 0.125em 0.125em 0;
content: "";
pointer-events: none;
}
/**
* Custom drop-down indicator icon
*/
.c-form-select::after {
position: absolute;
top: 50%;
right: calc(1em / 2);
margin-bottom: calc(1em / 4);
width: calc(1em / 2);
height: calc(1em / 2);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAkCAYAAAA5DDySAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPVJREFUeNrk2s0NgzAMhmFno47EKGzQETpSR2CEjkCjyEg0aiAhP7Y/IuUSuLyPhDg4RLycc5PfH78fBLy48/3TyYcrb1iEv53RISxCqpM4dkVGSMSHTakHKAhH8RvAExXhLD58AvziCw0hJz7+E8AgFMcjIVyOR0CojreM0CzeIkLzeEsI3eItIHSP14wwLF4jwvB4TQhi8RoQxOMlEdTESyCoix+JoDZ+BIL6+J4IZuJ7IJiLb4lgNr4Fgvn4GgSY+CsIcPGFCDP0bCIDAXowU4OANZ8sRMCcUGciYN9ROEGAv6BxhHCP+B3CvLubsEjFfwUYAKjtGJxFvDJsAAAAAElFTkSuQmCC") no-repeat center center;
background-size: contain;
content: "";
pointer-events: none;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.c-form-select__dropdown {
width: 100%;
height: calc(2.5em - (1px * 2));
padding: calc(1em / 2) calc(1em / 2);
font-size: inherit;
background-color: #fff;
border: 1px solid #c0c0c0;
border-radius: 0.125em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
outline: 0;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.c-form-select__dropdown::-ms-expand {
display: none;
}
.c-form-select__dropdown:focus {
/*border-color: #fff;
box-shadow: inset 0 0 0.5em 0 rgba(0, 0, 0, 0.2);*/
}
/* Form checkbox inputs
=========================================== */
.c-form-checkbox {
display: inline-block;
margin-bottom: calc(1em / 4);
width: 100%;
cursor: pointer;
font-size: 1em;
}
/**
* For cases where checkboxes or radio buttons need to display inline.
*/
.c-form-checkbox--inline {
width: auto;
margin-right: calc(1em * 2);
}
/**
* Hide the default input visually to utilise keyboard functionality and allow
* for custom input styles.
*/
.c-form-checkbox__input {
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.c-form-checkbox__caption {
display: flex;
align-items: center;
position: relative;
margin-left: calc(1em + 1em);
user-select: none;
}
.c-form-checkbox__caption::before {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
margin-right: 1em;
margin-left: calc(0px - (1em + 1em));
background-color: #fff;
border: 1px solid #c0c0c0;
content: "";
transition: border-color 0.25s ease;
}
.c-form-checkbox--radio .c-form-checkbox__caption::before {
border-radius: 100%;
}
.c-form-checkbox__input:focus + .c-form-checkbox__caption::before {
outline: none;
}
.c-form-checkbox__input:checked + .c-form-checkbox__caption::before {
box-shadow: inset 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.c-form-checkbox__input:checked + .c-form-checkbox__caption::after {
position: absolute;
left: calc(0px - (1em + 1em));
width: calc(1em + 1px);
height: calc(1em + 1px);
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xMTYuMTU4LDI5LjMzNmwtNC45NzUtNC45NzVjLTMuNDY5LTMuNDY5LTkuMDg4LTMuNDc4LTEyLjU0OS0wLjAxOUw0OC4xMDMsNzQuODc1TDI5LjM2NCw1Ni4xMzYgIGMtMy40NTktMy40Ni05LjA3OC0zLjQ1LTEyLjU0OSwwLjAyMWwtNC45NzQsNC45NzRjLTMuNDcsMy40Ny0zLjQ4LDkuMDg5LTAuMDIsMTIuNTQ5TDQxLjgsMTAzLjY1NyAgYzEuNzQxLDEuNzQxLDQuMDI2LDIuNjAyLDYuMzEsMi41ODhjMi4yNzksMC4wMTEsNC41NTktMC44NTIsNi4yOTctMi41OWw2MS43NzEtNjEuNzcxICBDMTE5LjYzNywzOC40MjQsMTE5LjYzMSwzMi44MDcsMTE2LjE1OCwyOS4zMzZ6IiBmaWxsPSIjMjMyMzIzIi8+PC9zdmc+") no-repeat center center;
background-size: contain;
content: "";
}
.c-form-checkbox--radio .c-form-checkbox__input:checked + .c-form-checkbox__caption::after {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyMHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCIgd2lkdGg9IjIwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzguMDAwMDAwLCAtMzM4LjAwMDAwMCkiPjxnIGlkPSJyYWRpby1idXR0b24tb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzOC4wMDAwMDAsIDMzOC4wMDAwMDApIj48cGF0aCBkPSJNMTAsNSBDNy4yLDUgNSw3LjIgNSwxMCBDNSwxMi44IDcuMiwxNSAxMCwxNSBDMTIuOCwxNSAxNSwxMi44IDE1LDEwIEMxNSw3LjIgMTIuOCw1IDEwLDUgTDEwLDUgWiBNMTAsMCBDNC41LDAgMCw0LjUgMCwxMCBDMCwxNS41IDQuNSwyMCAxMCwyMCBDMTUuNSwyMCAyMCwxNS41IDIwLDEwIEMyMCw0LjUgMTUuNSwwIDEwLDAgTDEwLDAgWiBNMTAsMTggQzUuNiwxOCAyLDE0LjQgMiwxMCBDMiw1LjYgNS42LDIgMTAsMiBDMTQuNCwyIDE4LDUuNiAxOCwxMCBDMTgsMTQuNCAxNC40LDE4IDEwLDE4IEwxMCwxOCBaIiBpZD0iU2hhcGUiLz48L2c+PC9nPjwvZz48L3N2Zz4=");
border-radius: 100%;
}
.c-form-checkbox__input:disabled + .c-form-checkbox__caption {
opacity: 0.5;
cursor: not-allowed;
}
.c-form-checkbox__input:disabled + .c-form-checkbox__caption::before {
background-color: #c0c0c0;
border-color: #c0c0c0;
}
/* Form modifiers
=========================================== */
/**
* Since the majority of form field in an ecommerce site are required, all LABEL
* elements without the `is-required` class will automatically italicized.
*/
.c-form-label:not(.is-required):not(.u-text-normal) {
/*font-style: italic;*/
}
/* Disabled Form Elements
=========================================== */
.c-form-input[disabled],
.c-form-select__dropdown[disabled],
.c-form-checkbox__input[disabled] {
background-color: #c0c0c0;
}
/* Form errors
=========================================== */
/**
* Errors are handled by adding the .has-error class to the field's parent –
* usually the .c-form-list__item.
*
* The `invalid` class is included here to work with code output by Miva Merchant on some pages.
*/
.has-error,
.invalid {
color: #c8102e;
}
/**
* Change form field styles
*/
.has-error .c-form-input,
.invalid .c-form-input,
.c-form-input.has-error,
/*.c-form-input:not(:focus):invalid,*/
.has-error .c-form-select__dropdown,
.invalid .c-form-select__dropdown,
.c-form-select__dropdown.has-error/*,
.c-form-select__dropdown:not(:focus):invalid*/ {
border-color: #c8102e;
}
.has-error .c-form-input:focus,
.invalid .c-form-input:focus,
.c-form-input.has-error:focus,
/*.c-form-input:invalid:focus,*/
.has-error .c-form-select__dropdown:focus,
.invalid .c-form-select__dropdown:focus,
.c-form-select__dropdown.has-error:focus/*,
.c-form-select__dropdown:invalid:focus*/ {
border-color: #fff;
box-shadow: inset 0 0 0.5em 0 rgba(200, 16, 46, 0.75);
}
/**
* Change checkbox/radio indicator border color
*/
.has-error .c-form-checkbox__caption::before,
.invalid .c-form-checkbox__caption::before,
.c-form-checkbox__caption.has-error::before,
.c-form-checkbox__caption:invalid::before {
border-color: #c8102e;
}
/* Input sizing modifiers
=========================================== */
.c-form-input--large {
height: calc(3.5em - (1px * 2)); /* [2] */
line-height: calc(3.5em - (1px * 2)); /* [2] */
}
.c-form-input--huge {
height: calc(4.5em - (1px * 2)); /* [2] */
line-height: calc(4.5em - (1px * 2)); /* [2] */
}
.c-form-input--large.c-form-select__dropdown,
.c-form-input--huge.c-form-select__dropdown {
line-height: inherit;
}
/* ==========================================================================
COMPONENTS / KEYLINE
========================================================================== */
/**
* Simple keyline component to provide horizontal rules between other elements.
* e.g. `
`
*
* 1. Reduce the `margin-bottom` by the same width as the keyline in order to
* keep on our baseline grid.
*/
.c-keyline {
margin-bottom: calc(16px - 1px); /* [1] */
border: none;
border-bottom: 1px solid #c0c0c0;
}
/**
* Heavier keylines.
*/
.c-keyline--thick {
margin-bottom: calc(16px - calc(1px * 2)); /* [1] */
border-bottom-width: calc(1px * 2);
}
/**
* Smaller gaps underneath keylines.
*/
.c-keyline--small {
margin-bottom: calc((16px / 2) - 1px); /* [1] */
}
/**
* Adjust smaller gaps underneath thicker keylines.
*/
.c-keyline--small.c-keyline--thick {
margin-bottom: calc((16px / 2) - calc(1px * 2)); /* [1] */
}
/* ==========================================================================
COMPONENTS / MENU
========================================================================== */
.c-menu {}
.c-menu__title {
font-weight: 700;
}
.c-menu__list {
margin-left: 0;
line-height: 2;
list-style: none;
}
.c-menu__row {}
.c-menu__link {
display: block;
color: currentColor;
}
@media (min-width: 48em) {
.c-menu__link {
display: inline-block;
}
}
.c-collapsible-menu__trigger {
display: none;
}
@media (max-width: 47.9em) {
.c-collapsible-menu {
}
.c-collapsible-menu__label {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
}
.c-collapsible-menu__label::after {
display: inline-block;
font-size: 1rem;
line-height: 1;
content: '+';
}
.c-collapsible-menu .c-menu__title {
display: none;
}
.c-collapsible-menu .c-menu__list {
display: block;
max-height: 0;
opacity: 0;
visibility: hidden;
transition-delay: 0.15s, 0s, 0s;
}
.c-collapsible-menu__trigger:checked ~ .c-collapsible-menu__label::after {
content: '-';
}
.c-collapsible-menu__trigger:checked ~ .c-menu__list {
display: block;
max-height: 25em;
margin-top: 1em;
opacity: 1;
overflow: hidden;
transition: visibility 0s ease, max-height 0.3s ease, opacity 0.3s ease;
transition-delay: 0s;
visibility: visible;
}
}
@media (min-width: 48em) {
.c-collapsible-menu__label {
display: none;
}
}/* ==========================================================================
COMPONENTS / MINI-MODAL
========================================================================== */
.has-active-mini-modal {
overflow: hidden;
}
.c-mini-modal {
width: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: all ease 300ms;
z-index: 500;
}
.c-mini-modal--active {
opacity: 1;
}
.c-mini-modal__overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.9);
}
.c-mini-modal__viewport {
height: 100%;
position: relative;
pointer-events: none;
}
.c-mini-modal__item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all ease 300ms;
}
.c-mini-modal__item--added,
.c-mini-modal__item--removed {
opacity: 0;
}
.c-mini-modal__item--added--previous,
.c-mini-modal__item--removed--next {
transform: translateX(-100%);
}
.c-mini-modal__item--added--next,
.c-mini-modal__item--removed--previous {
transform: translateX(100%);
}
.c-mini-modal__status {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
color: #fff;
opacity: 0;
transition: all ease 300ms;
transform: translate(-50%, -50%);
}
.c-mini-modal__item--loading .c-mini-modal__status {
opacity: 1;
}
.c-mini-modal__content {
height: 100%;
opacity: 0;
transition: all ease 300ms;
transform: scale(0.5);
}
.c-mini-modal__item--loaded .c-mini-modal__content {
transform: none;
opacity: 1;
}
.c-mini-modal__item--removed--previous .c-mini-modal__content,
.c-mini-modal__item--removed--next .c-mini-modal__content {
transform: scale(0.5);
}
.c-mini-modal__element {
display: block;
max-width: 85vw;
max-height: 75vh;
margin: auto;
position: relative;
top: 50%;
overflow: auto;
transform: translateY(-50%);
pointer-events: auto;
}
.c-mini-modal__element--iframe,
.c-mini-modal__element--map {
background-color: #fff;
}
.c-mini-modal__element--iframe,
.c-mini-modal__iframe {
width: 100%;
height: 100%;
}
.c-mini-modal__element--video {
max-width: calc(100vh * (16 / 9));
}
.c-mini-modal__element--video::before {
display: block;
padding-bottom: 56.25%;
background-color: #000;
content: '';
}
.c-mini-modal__element-subject {
margin: auto;
padding: 2rem 2rem 1rem;
overflow: hidden;
}
.c-mini-modal__video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.c-mini-modal__caption {
padding: 1em;
position: absolute;
right: 0;
bottom: 0;
left: 0;
color: #fff;
pointer-events: auto;
}
.c-mini-modal__close,
.c-mini-modal__nav {
display: inline-block;
width: 1em;
height: 1em;
margin: 0;
padding: 0;
position: absolute;
font-family: monospace;
font-size: 3rem;
font-weight: 400;
line-height: 1;
text-align: center;
text-decoration: none;
border: 0 none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c-mini-modal__close:hover,
.c-mini-modal__close:active,
.c-mini-modal__close:focus,
.c-mini-modal__nav:hover,
.c-mini-modal__nav:active,
.c-mini-modal__nav:focus {
text-decoration: none;
outline: none;
}
.c-mini-modal__close {
top: 0.5rem;
right: 0.5rem;
background-color: rgba(0, 0, 0, 0);
color: #fff;
}
.c-mini-modal__nav {
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border-radius: 50%;
}
.c-mini-modal__nav--previous {
left: 0.5rem;
}
.c-mini-modal__nav--next {
right: 0.5rem;
}
/* ==========================================================================
COMPONENTS / NAVIGATION
========================================================================== */
.c-navigation {
position: relative;
}
.c-navigation__trigger {
display: none;
}
.c-navigation__trigger:checked ~ .c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row .c-navigation__row {
display: block;
}
.c-navigation__label {
display: block;
min-height: 2em;
margin: 0;
padding: 1em;
position: relative;
font-style: normal;
background-color: #9f9f9f;
color: #fff;
}
.c-navigation__label::after,
.c-navigation__label::before {
position: absolute;
right: 1em;
transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}
.c-navigation__label::after {
content: "\2212";
opacity: 0;
transform: scale(0);
}
.c-navigation__label::before {
content: "\2261";
opacity: 1;
transform: scale(2);
}
.c-navigation__trigger:checked ~ .c-navigation__label::after {
opacity: 1;
transform: scale(2);
}
.c-navigation__trigger:checked ~ .c-navigation__label::before {
opacity: 0;
transform: scale(0);
}
.c-navigation__row {
display: none;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.c-navigation__link {
display: block;
padding: 0.5em 1em;
background-color: #fff;
color: #0f0f0f;
}
.c-navigation__link:hover {
text-decoration: none;
box-shadow: 0 2px 0 -1px #0f0f0f;
transition: box-shadow ease-in 0.2s;
}
.c-navigation__row:nth-child(2) .c-navigation__link {
padding-left: 2em;
}
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 3em;
}
@media (min-width: 48em) {
.c-navigation__label {
display: none;
}
.c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row .c-navigation__row {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.c-navigation__list {
position: relative;
flex: 1 1 auto;
text-align: center;
}
.c-navigation__list .c-navigation__row {
display: none;
min-width: 100%;
position: absolute;
white-space: nowrap;
z-index: 100;
}
.c-navigation__row:nth-child(2) .c-navigation__list {
text-align: left;
}
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type {
top: 0;
left: 100%;
z-index: 200;
}
.c-navigation__row:nth-child(2) .c-navigation__link,
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 1em;
}
.c-navigation__row:nth-child(2) .c-navigation__link:hover {
background-color: #eaeaea;
box-shadow: none;
transition: background-color ease-in 0.2s;
}
.c-navigation__list:hover > .c-navigation__row {
display: table;
box-shadow: 1px 1px 0.25em 0 #0f0f0f;
box-shadow: 0 8px 13px -8px #000;
}
.c-navigation__link {
border-right: 0 solid #0f0f0f; /* Change to 1px to add a right-border */
}
.c-navigation__list:last-of-type .c-navigation__link,
.c-navigation__row:nth-child(2) .c-navigation__list .c-navigation__link {
border-right: 0;
}
}
/* ==========================================================================
COMPONENTS / TABLES
========================================================================== */
/**
* The simple table offers easy to read data with a horizontal divider between
* rows at the expense of occupying more space.
*/
.c-table-simple {
border-collapse: collapse;
}
.c-table-simple__row {
border-bottom: 1px solid #c0c0c0;
}
.c-table-simple__cell {
padding: calc(16px / 2);
text-align: left;
vertical-align: top;
}
.c-table-simple__cell--standard {
padding: 16px;
}
.c-table-simple__cell--wide {
padding: calc(16px * 2);
}
/**
* The stripped table offers easy to read data with alternating background rows.
*/
.c-table-stripped {
border-collapse: collapse;
}
.c-table-stripped__row:not(:nth-child(even)) {
background-color: #eaeaea;
}
/**
* This is a basic, responsive table set-up. It does require using a `data-label`
* attribute if you would like to show the row titles.
*/
.c-table-responsive {
width: 100%;
border-collapse: collapse;
}
.c-table-responsive_thead {
display: none;
}
.c-table-responsive__row {
display: block;
margin-bottom: calc(16px / 2);
border-bottom: 1px solid #c0c0c0;
}
.c-table-responsive__cell {
display: block;
padding-bottom: calc(16px / 2);
}
.c-table-responsive__cell::before {
display: block;
font-weight: 700;
text-align: left;
content: attr(data-label);
}
.c-table-responsive__cell--flex {
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 48em) {
.c-table-responsive_thead {
display: table-header-group;
}
.c-table-responsive__row {
display: table-row;
margin-bottom: 0;
}
.c-table-responsive__cell {
display: table-cell;
padding: calc(16px / 2);
text-align: left;
vertical-align: top;
}
.c-table-responsive__cell--standard {
padding: 16px;
}
.c-table-responsive__cell--wide {
padding: calc(16px * 2);
}
.c-table-responsive__cell::before {
display: none;
}
}
/* ==========================================================================
COMPONENTS / TYPOGRAPHY
========================================================================== */
/**
* In order to divorce our semantic decisions from our stylistic ones, we only
* define opinionated typographical styles against classes, NOT against
* typographic HTML elements.
*
* Further reading:
* http://csswizardry.com/2016/02/managing-typography-on-large-apps/
*/
/* Heading-level typography
=========================================== */
.c-heading-alpha {
font-size: calc((((16px * 1.2) * 1.2) * 1.2) * 1.2);
line-height: 1.25;
}
.c-heading-bravo {
font-size: calc(((16px * 1.2) * 1.2) * 1.2);
line-height: 1.154;
}
.c-heading-charlie {
font-size: calc((16px * 1.2) * 1.2);
line-height: 1.136;
}
.c-heading-delta {
font-size: calc(16px * 1.2);
line-height: 1.125;
}
.c-heading-echo {
font-size: 16px;
line-height: 1.125;
}
.c-heading-foxtrot {
font-size: calc(16px / 1.2);
line-height: 1.125;
}
@media (min-width: 40em) {
/**
* Small Breakpoint [40em = 640px]
* When in the small breakpoint, 'font-size' and 'line-height' are
* dynamically adjusted.
*/
.c-heading-alpha {
font-size: calc(((((16px * 1.2) * 1.2) * 1.2) * 1.2) + (((((16 * 1.333) * 1.333) * 1.333) * 1.333) - ((((16 * 1.2) * 1.2) * 1.2) * 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.25em + 0.2 * ((100% - (640 * 1px)) / 640));
}
.c-heading-bravo {
font-size: calc((((16px * 1.2) * 1.2) * 1.2) + ((((16 * 1.333) * 1.333) * 1.333) - (((16 * 1.2) * 1.2) * 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.154em + 0.096 * ((100% - (640 * 1px)) / 640));
}
.c-heading-charlie {
font-size: calc(((16px * 1.2) * 1.2) + (((16 * 1.333) * 1.333) - ((16 * 1.2) * 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.136em + 0.114 * ((100% - (640 * 1px)) / 640));
}
.c-heading-delta {
font-size: calc((16px * 1.2) + ((16 * 1.333) - (16 * 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.125em + 0.95 * ((100% - (640 * 1px)) / 640));
}
.c-heading-echo {
font-size: calc(16px * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.125em + 0.25 * ((100% - (640 * 1px)) / 640));
}
.c-heading-foxtrot {
font-size: calc((16px / 1.2) + ((16 / 1.333) - (16 / 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.125em + 0.25 * ((100% - (640 * 1px)) / 640));
}
}
@media (min-width: 60em) {
/**
* Large Breakpoint [60em = 960px] and Greater
*/
.c-heading-alpha {
font-size: calc((((16px * 1.333) * 1.333) * 1.333) * 1.333);
line-height: 1.05;
}
.c-heading-bravo {
font-size: calc(((16px * 1.333) * 1.333) * 1.333);
line-height: 1.25;
}
.c-heading-charlie {
font-size: calc((16px * 1.333) * 1.333);
line-height: 1.25;
}
.c-heading-delta {
font-size: calc(16px * 1.333);
line-height: 1.22;
}
.c-heading-echo {
font-size: 16px;
line-height: 1.5;
}
.c-heading-foxtrot {
font-size: calc(16px / 1.333);
line-height: 1.5;
}
}
.c-heading--subheading {
font-size: 0.6em;
font-weight: 400;
}
.c-heading--keyline {
display: inline-block;
margin-bottom: 1em;
position: relative;
}
.c-heading--keyline::after {
display: block;
width: 25%;
height: calc(16px / 8);
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0.5em);
-ms-transform: translate(-50%, 0.5em);
transform: translate(-50%, 0.5em);
background-color: #c0c0c0;
content: "";
}
/* Text-level typography
=========================================== */
.c-text-body {
font-size: 16px;
}
/* ==========================================================================
UTILITIES / BORDERS
========================================================================== */
/**
* Utility classes to adjust element borders.
*/
.u-border-none {
border-width: 0;
}
.u-border-thick {
border-width: calc(1px * 2);
}
.u-border-rounded {
border-radius: 10em;
}
.u-border-square {
border-radius: 0;
}
/* ==========================================================================
UTILITIES / CLEAR FIX
========================================================================== */
/**
* Class-based implementation of the 'clearfix hack'.
* http://cssmojo.com/the-very-latest-clearfix-reloaded/
*/
.u-clear-fix::after {
display: table;
clear: both;
content: "";
}/* ==========================================================================
UTILITIES / COLORS
========================================================================== */
/**
* Utility classes to adjust element colors inline.
* Both .u-bg-*** and .u-color-*** work for each color class.
*/
.u-bg-red::before,
.u-bg-red {
background-color: #c8102e;
}
.u-bg-yellow::before,
.u-bg-yellow {
background-color: #f9ed1f;
}
.u-bg-blue::before,
.u-bg-blue {
background-color: #003b6f;
}
.u-bg-green::before,
.u-bg-green {
background-color: #009a44;
}
.u-bg-black::before,
.u-bg-black {
background-color: #0f0f0f;
}
.u-bg-gray-50::before,
.u-bg-gray-50 {
background-color: #222;
}
.u-bg-gray-40::before,
.u-bg-gray-40 {
background-color: #707070;
}
.u-bg-gray-30::before,
.u-bg-gray-30 {
background-color: #9f9f9f;
}
.u-bg-gray-20::before,
.u-bg-gray-20 {
background-color: #c0c0c0;
}
.u-bg-gray-10::before,
.u-bg-gray-10 {
background-color: #eaeaea;
}
.u-bg-white::before,
.u-bg-white {
background-color: #fff;
}
.u-bg-transparent {
background-color: rgba(0, 0, 0, 0);
}
.u-bg-primary::before,
.u-bg-primary {
background-color: #3d70b2;
}
.u-bg-secondary::before,
.u-bg-secondary {
background-color: #5aaafa;
}
.u-bg-tertiary::before,
.u-bg-tertiary {
background-color: #008571;
}
.u-bg-highlight::before,
.u-bg-highlight {
background-color: #f9ed1f;
}
.u-bg-accent::before,
.u-bg-accent {
background-color: #3cc;
}
.c-button:hover.u-bg-red {
background-color: #a00c24;
}
.c-button:hover.u-bg-yellow {
background-color: #c7bd19;
}
.c-button:hover.u-bg-blue {
background-color: #34638b;
}
.c-button:hover.u-bg-green {
background-color: #007c36;
}
.c-button:hover.u-bg-black {
background-color: #3f3f3f;
}
.c-button:hover.u-bg-gray-50 {
background-color: #4e4e4e;
}
.c-button:hover.u-bg-gray-40 {
background-color: #5a5a5a;
}
.c-button:hover.u-bg-gray-30 {
background-color: #7f7f7f;
}
.c-button:hover.u-bg-gray-20 {
background-color: #9a9a9a;
}
.c-button:hover.u-bg-gray-10 {
background-color: #bcbcbc;
}
.c-button:hover.u-bg-white {
background-color: #cbcbcb;
}
.c-button:hover.u-bg-primary {
background-color: #315a8e;
}
.c-button:hover.u-bg-secondary {
background-color: #4888c8;
}
.c-button:hover.u-bg-tertiary {
background-color: #006b5b;
}
.c-button:hover.u-bg-highlight {
background-color: #c7bd19;
}
.c-button:hover.u-bg-accent {
background-color: #29a4a4;
}
.u-color-red {
color: #c8102e;
}
.u-color-yellow {
color: #f9ed1f;
}
.u-color-blue {
color: #003b6f;
}
.u-color-green {
color: #009a44;
}
.u-color-black {
color: #0f0f0f;
}
.u-color-gray-50 {
color: #222;
}
.u-color-gray-40 {
color: #707070;
}
.u-color-gray-30 {
color: #9f9f9f;
}
.u-color-gray-20 {
color: #c0c0c0;
}
.u-color-gray-10 {
color: #eaeaea;
}
.u-color-white {
color: #fff;
}
.u-color-transparent {
color: rgba(0, 0, 0, 0);
}
.u-color-primary {
color: #3d70b2;
}
.u-color-secondary {
color: #5aaafa;
}
.u-color-tertiary {
color: #008571;
}
.u-color-highlight {
color: #f9ed1f;
}
.u-color-accent {
color: #3cc;
}
/**
* This will make sure the full background of a layout object is filled.
*/
.o-layout[class*="u-bg-"] {
position: relative;
background-color: rgba(0, 0, 0, 0);
}
.o-layout[class*="u-bg-"]::before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 16px;
content: '';
}
.o-layout--narrow[class*="u-bg-"]::before {
left: calc(16px * 0.5);
}
.o-layout--wide[class*="u-bg-"]::before {
left: calc(16px * 2);
}
.o-layout--flush[class*="u-bg-"]::before {
left: 0;
}
.o-layout[class*="u-bg-"] > * {
position: relative;
z-index: 1;
}
/* ==========================================================================
UTILITIES / DISPLAY
========================================================================== */
.u-overflow-hidden {
overflow: hidden;
}
/**
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.u-hide-visually {
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.u-hide-visually.focusable:active,
.u-hide-visually.focusable:focus {
width: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
clip: auto;
white-space: inherit;
}
/**
* Hide visually and from screen readers.
*/
[aria-hidden='true'],
.u-hidden {
display: none;
}
/**
* Hidden visually but maintains the layout.
*/
.u-invisible {
visibility: hidden;
}
/**
* Various utility classes to show the content.
*/
.u-flex {
display: flex;
}
.u-block,
.u-shown {
display: block;
}
.u-inline {
display: inline;
}
.u-inline-block {
display: inline-block;
}
.u-visible {
visibility: visible;
}
/* Small Breakpoint [40em = 640px]
=========================================== */
@media screen and (min-width: 40em) {
.u-hidden--s {
display: none;
}
.u-invisible--s {
visibility: hidden;
}
.u-flex--s {
display: flex;
}
.u-block--s,
.u-shown--s {
display: block;
}
.u-inline--s {
display: inline;
}
.u-inline-block--s {
display: inline-block;
}
.u-visible--s {
visibility: visible;
}
}
/* Medium Breakpoint [48em = 768px]
=========================================== */
@media screen and (min-width: 48em) {
.u-hidden--m {
display: none;
}
.u-invisible--m {
visibility: hidden;
}
.u-flex--m {
display: flex;
}
.u-block--m,
.u-shown--m {
display: block;
}
.u-inline--m {
display: inline;
}
.u-inline-block--m {
display: inline-block;
}
.u-visible--m {
visibility: visible;
}
}
/* Large Breakpoint [60em = 960px]
=========================================== */
@media screen and (min-width: 60em) {
.u-hidden--l {
display: none;
}
.u-invisible--l {
visibility: hidden;
}
.u-flex--l {
display: flex;
}
.u-block--l,
.u-shown--l {
display: block;
}
.u-inline--l {
display: inline;
}
.u-inline-block--l {
display: inline-block;
}
.u-visible--l {
visibility: visible;
}
}
/* Extra-Large Breakpoint [75em = 1200px]
=========================================== */
@media screen and (min-width: 75em) {
.u-hidden--xl {
display: none;
}
.u-invisible--xl {
visibility: hidden;
}
.u-flex--xl {
display: flex;
}
.u-block--xl,
.u-shown--xl {
display: block;
}
.u-inline--xl {
display: inline;
}
.u-inline-block--xl {
display: inline-block;
}
.u-visible--xl {
visibility: visible;
}
}
/* Wide-Screen Breakpoint [90em = 1440px]
=========================================== */
@media screen and (min-width: 90em) {
.u-hidden--w {
display: none;
}
.u-invisible--w {
visibility: hidden;
}
.u-flex--w {
display: flex;
}
.u-block--w,
.u-shown--w {
display: block;
}
.u-inline--w {
display: inline;
}
.u-inline-block--w {
display: inline-block;
}
.u-visible--w {
visibility: visible;
}
}
/* ==========================================================================
UTILITIES / GRIDS
========================================================================== */
/**
* A series of utility classes that give an automatic number of columns based
* on the class used, media breakpoints are included.
*
*
*
* The above will create a three-column structure in which each column will
* fluidly fill one-third of the width of the parent with the remainder elements
* wrapping as needed. We can have more complex systems:
*
*
*
* The above will create a structure in which each column will be 100% width
* until we enter our medium breakpoint, then they will be one-third the width
* of the parent container with the remainder elements wrapping as needed.
THIS IS HOW MIVA WAS PRODUCING VALUES:
.u-grids-2 > .o-layout__item {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
*/
/* Mobile First
=========================================== */
.u-grids-1 > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2 > .o-layout__item {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
.u-grids-3 > .o-layout__item {
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
.u-grids-4 > .o-layout__item {
flex-basis: calc(100% / 4);
max-width: calc(100% / 4);
}
.u-grids-5 > .o-layout__item {
flex-basis: calc(100% / 5);
max-width: calc(100% / 5);
}
.u-grids-6 > .o-layout__item {
flex-basis: calc(100% / 6);
max-width: calc(100% / 6);
}
.u-grids-7 > .o-layout__item {
flex-basis: calc(100% / 7);
max-width: calc(100% / 7);
}
.u-grids-8 > .o-layout__item {
flex-basis: calc(100% / 8);
max-width: calc(100% / 8);
}
.u-grids-9 > .o-layout__item {
flex-basis: calc(100% / 9);
max-width: calc(100% / 9);
}
.u-grids-10 > .o-layout__item {
flex-basis: calc(100% / 10);
max-width: calc(100% / 10);
}
.u-grids-11 > .o-layout__item {
flex-basis: calc(100% / 11);
max-width: calc(100% / 11);
}
.u-grids-12 > .o-layout__item {
flex-basis: calc(100% / 12);
max-width: calc(100% / 12);
}
/* Small Breakpoint [40em = 640px]
=========================================== */
@media screen and (min-width: 40em) {
.u-grids-1--s > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--s > .o-layout__item {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
.u-grids-3--s > .o-layout__item {
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
.u-grids-4--s > .o-layout__item {
flex-basis: calc(100% / 4);
max-width: calc(100% / 4);
}
.u-grids-5--s > .o-layout__item {
flex-basis: calc(100% / 5);
max-width: calc(100% / 5);
}
.u-grids-6--s > .o-layout__item {
flex-basis: calc(100% / 6);
max-width: calc(100% / 6);
}
.u-grids-7--s > .o-layout__item {
flex-basis: calc(100% / 7);
max-width: calc(100% / 7);
}
.u-grids-8--s > .o-layout__item {
flex-basis: calc(100% / 8);
max-width: calc(100% / 8);
}
.u-grids-9--s > .o-layout__item {
flex-basis: calc(100% / 9);
max-width: calc(100% / 9);
}
.u-grids-10--s > .o-layout__item {
flex-basis: calc(100% / 10);
max-width: calc(100% / 10);
}
.u-grids-11--s > .o-layout__item {
flex-basis: calc(100% / 11);
max-width: calc(100% / 11);
}
.u-grids-12--s > .o-layout__item {
flex-basis: calc(100% / 12);
max-width: calc(100% / 12);
}
}
/* Medium Breakpoint [48em = 768px]
=========================================== */
@media screen and (min-width: 48em) {
.u-grids-1--m > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--m > .o-layout__item {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
.u-grids-3--m > .o-layout__item {
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
.u-grids-4--m > .o-layout__item {
flex-basis: calc(100% / 4);
max-width: calc(100% / 4);
}
.u-grids-5--m > .o-layout__item {
flex-basis: calc(100% / 5);
max-width: calc(100% / 5);
}
.u-grids-6--m > .o-layout__item {
flex-basis: calc(100% / 6);
max-width: calc(100% / 6);
}
.u-grids-7--m > .o-layout__item {
flex-basis: calc(100% / 7);
max-width: calc(100% / 7);
}
.u-grids-8--m > .o-layout__item {
flex-basis: calc(100% / 8);
max-width: calc(100% / 8);
}
.u-grids-9--m > .o-layout__item {
flex-basis: calc(100% / 9);
max-width: calc(100% / 9);
}
.u-grids-10--m > .o-layout__item {
flex-basis: calc(100% / 10);
max-width: calc(100% / 10);
}
.u-grids-11--m > .o-layout__item {
flex-basis: calc(100% / 11);
max-width: calc(100% / 11);
}
.u-grids-12--m > .o-layout__item {
flex-basis: calc(100% / 12);
max-width: calc(100% / 12);
}
}
/* Large Breakpoint [60em = 960px]
=========================================== */
@media screen and (min-width: 60em) {
.u-grids-1--l > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--l > .o-layout__item {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
.u-grids-3--l > .o-layout__item {
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
.u-grids-4--l > .o-layout__item {
flex-basis: calc(100% / 4);
max-width: calc(100% / 4);
}
.u-grids-5--l > .o-layout__item {
flex-basis: calc(100% / 5);
max-width: calc(100% / 5);
}
.u-grids-6--l > .o-layout__item {
flex-basis: calc(100% / 6);
max-width: calc(100% / 6);
}
.u-grids-7--l > .o-layout__item {
flex-basis: calc(100% / 7);
max-width: calc(100% / 7);
}
.u-grids-8--l > .o-layout__item {
flex-basis: calc(100% / 8);
max-width: calc(100% / 8);
}
.u-grids-9--l > .o-layout__item {
flex-basis: calc(100% / 9);
max-width: calc(100% / 9);
}
.u-grids-10--l > .o-layout__item {
flex-basis: calc(100% / 10);
max-width: calc(100% / 10);
}
.u-grids-11--l > .o-layout__item {
flex-basis: calc(100% / 11);
max-width: calc(100% / 11);
}
.u-grids-12--l > .o-layout__item {
flex-basis: calc(100% / 12);
max-width: calc(100% / 12);
}
}
/* Extra-Large Breakpoint [75em = 1200px]
=========================================== */
@media screen and (min-width: 75em) {
.u-grids-1--xl > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--xl > .o-layout__item {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
.u-grids-3--xl > .o-layout__item {
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
.u-grids-4--xl > .o-layout__item {
flex-basis: calc(100% / 4);
max-width: calc(100% / 4);
}
.u-grids-5--xl > .o-layout__item {
flex-basis: calc(100% / 5);
max-width: calc(100% / 5);
}
.u-grids-6--xl > .o-layout__item {
flex-basis: calc(100% / 6);
max-width: calc(100% / 6);
}
.u-grids-7--xl > .o-layout__item {
flex-basis: calc(100% / 7);
max-width: calc(100% / 7);
}
.u-grids-8--xl > .o-layout__item {
flex-basis: calc(100% / 8);
max-width: calc(100% / 8);
}
.u-grids-9--xl > .o-layout__item {
flex-basis: calc(100% / 9);
max-width: calc(100% / 9);
}
.u-grids-10--xl > .o-layout__item {
flex-basis: calc(100% / 10);
max-width: calc(100% / 10);
}
.u-grids-11--xl > .o-layout__item {
flex-basis: calc(100% / 11);
max-width: calc(100% / 11);
}
.u-grids-12--xl > .o-layout__item {
flex-basis: calc(100% / 12);
max-width: calc(100% / 12);
}
}
/* Wide-Screen Breakpoint [90em = 1440px]
=========================================== */
@media screen and (min-width: 90em) {
.u-grids-1--w > .o-layout__item {
flex-basis: 100%;
max-width: 100%;
}
.u-grids-2--w > .o-layout__item {
flex-basis: calc(100% / 2);
max-width: calc(100% / 2);
}
.u-grids-3--w > .o-layout__item {
flex-basis: calc(100% / 3);
max-width: calc(100% / 3);
}
.u-grids-4--w > .o-layout__item {
flex-basis: calc(100% / 4);
max-width: calc(100% / 4);
}
.u-grids-5--w > .o-layout__item {
flex-basis: calc(100% / 5);
max-width: calc(100% / 5);
}
.u-grids-6--w > .o-layout__item {
flex-basis: calc(100% / 6);
max-width: calc(100% / 6);
}
.u-grids-7--w > .o-layout__item {
flex-basis: calc(100% / 7);
max-width: calc(100% / 7);
}
.u-grids-8--w > .o-layout__item {
flex-basis: calc(100% / 8);
max-width: calc(100% / 8);
}
.u-grids-9--w > .o-layout__item {
flex-basis: calc(100% / 9);
max-width: calc(100% / 9);
}
.u-grids-10--w > .o-layout__item {
flex-basis: calc(100% / 10);
max-width: calc(100% / 10);
}
.u-grids-11--w > .o-layout__item {
flex-basis: calc(100% / 11);
max-width: calc(100% / 11);
}
.u-grids-12--w > .o-layout__item {
flex-basis: calc(100% / 12);
max-width: calc(100% / 12);
}
}
/* ==========================================================================
UTILITIES / ICONS
========================================================================== */
/**
* This contains the "@font-face" call needed to add the ReadyTheme Icons Font
* package to your site. These icons are available for use in addition to any
* theme-based icons which may be referenced in the "theme-fonts.css" file.
*/
@font-face {
font-family: 'ReadyTheme Icons';
font-style: normal;
font-weight: normal;
src: url('../../ui/css/ReadyThemeIcons.woff') format('woff');
}
[class^="u-icon-"],
[class*=" u-icon-"],
[data-icon]::before,
/* THE GALLERY ARROWS */
.ug-arrow-left.ug-skin-alexis,
.ug-arrow-right.ug-skin-alexis,
.ug-lightbox .ug-lightbox-arrow-left, .ug-lightbox .ug-lightbox-arrow-right {
font-family: "ReadyTheme Icons", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-transform: none;
}
[data-icon]::before {
content: attr(data-icon);
}
[class^="u-icon-"]::before,
[class*=" u-icon-"]::before,
[data-icon]::before {
background-color: rgba(0, 0, 0, 0);
}
.u-icon-error::before {
content: "\21";
}
.u-icon-warning::before {
content: "\22";
}
.u-icon-question::before {
content: "\23";
}
.u-icon-info::before {
content: "\24";
}
.u-icon-gift::before {
content: "\25";
}
.u-icon-settings::before {
content: "\26";
}
.u-icon-protected::before {
content: "\27";
}
.u-icon-secure::before {
content: "\28";
}
.u-icon-envelope::before {
content: "\29";
}
.u-icon-truck::before {
content: "\2a";
}
.u-icon-globe::before {
content: "\2b";
}
.u-icon-history::before {
content: "\2c";
}
.u-icon-balance::before {
content: "\2d";
}
.u-icon-remove::before {
content: "\2e";
}
.u-icon-cart-add::before {
content: "\2f";
}
.u-icon-chevron-up::before {
content: "\30";
}
.u-icon-chevron-down::before {
content: "\31";
}
.u-icon-chevron-left::before, .ug-arrow-left.ug-skin-alexis::before,.ug-lightbox .ug-lightbox-arrow-left::before {
content: "\32";
}
.u-icon-chevron-right::before, .ug-arrow-right.ug-skin-alexis::before, .ug-lightbox .ug-lightbox-arrow-right::before {
content: "\33";
}
.u-icon-triangle-up::before {
content: "\34";
}
.u-icon-triangle-down::before {
content: "\35";
}
.u-icon-triangle-left::before {
content: "\36";
}
.u-icon-triangle-right::before {
content: "\37";
}
.u-icon-arrow-up::before {
content: "\38";
}
.u-icon-arrow-down::before {
content: "\39";
}
.u-icon-arrow-left::before {
content: "\3a";
}
.u-icon-arrow-right::before {
content: "\3b";
}
.u-icon-subtract::before {
content: "\3c";
}
.u-icon-add::before {
content: "\3d";
}
.u-icon-cross::before {
content: "\3e";
}
.u-icon-check::before {
content: "\3f";
}
.u-icon-zoom-out::before {
content: "\40";
}
.u-icon-zoom-in::before {
content: "\41";
}
.u-icon-search::before {
content: "\42";
}
.u-icon-credit-card::before {
content: "\43";
}
.u-icon-heart-empty::before {
content: "\44";
}
.u-icon-heart-full::before {
content: "\45";
}
.u-icon-star-empty::before {
content: "\46";
}
.u-icon-star-full::before {
content: "\47";
}
.u-icon-home::before {
content: "\48";
}
.u-icon-user::before {
content: "\49";
}
.u-icon-phone::before {
content: "\4a";
}
.u-icon-facebook::before {
content: "\4b";
}
.u-icon-twitter::before {
content: "\4c";
}
.u-icon-pinterest::before {
content: "\4d";
}
.u-icon-google::before {
content: "\4e";
}
.u-icon-instagram::before {
content: "\4f";
}
.u-icon-vimeo::before {
content: "\50";
}
.u-icon-youtube::before {
content: "\51";
}
.u-icon-flickr::before {
content: "\52";
}
.u-icon-print::before {
content: "\53";
}
.u-icon-wallet::before {
content: "\54";
}
.u-icon-document::before {
content: "\55";
}
.u-icon-menu::before {
content: "\56";
}
.u-icon-calendar::before {
content: "\57";
}
.u-icon-bag-empty::before {
content: "\58";
}
.u-icon-bag-full::before {
content: "\59";
}
.u-icon-cart-empty::before {
content: "\5a";
}
.u-icon-cart-full::before {
content: "\5b";
}
.u-icon-location::before {
content: "\5c";
}
/* ==========================================================================
UTILITIES / PRINT
========================================================================== */
/**
* Print styles taken from the HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
* Inlined to avoid the additional HTTP request:
* http://www.phpied.com/delay-loading-your-print-css/
*/
@media print {
/**
* 1. Black prints faster: http://www.sanbeiji.com/archives/953
*/
*,
*:before,
*:after,
p:first-letter,
div:first-letter,
blockquote:first-letter,
li:first-letter,
p:first-line,
div:first-line,
blockquote:first-line,
li:first-line {
background: transparent !important;
color: #000 !important; /* [1] */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers, or use the `javascript:`
* pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
.u-printable__content {
display: none;
visibility: hidden;
}
@media print {
.u-printable:not(.u-printable__content) {
display: none;
visibility: hidden;
}
.u-printable__content {
display: block;
width: 100%;
position: absolute;
left: 0;
top: 0;
visibility: visible;
}
.u-printable__content * {
visibility: visible;
}
}
/* ==========================================================================
UTILITIES / TYPOGRAPHY
========================================================================== */
/* Set font-family options
=========================================== */
.u-font-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.u-font-secondary {
font-family: "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", "Times", "Source Serif Pro", serif;
}
/* Text alignment utilities
=========================================== */
.u-text-left {
text-align: left;
}
.u-text-center {
text-align: center;
}
.u-text-right {
text-align: right;
}
.u-text-justify {
text-align: justify;
}
@media screen and (min-width: 40em) {
.u-text-left--s {
text-align: left;
}
.u-text-center--s {
text-align: center;
}
.u-text-right--s {
text-align: right;
}
.u-text-justify--s {
text-align: justify;
}
}
@media screen and (min-width: 48em) {
.u-text-left--m {
text-align: left;
}
.u-text-center--m {
text-align: center;
}
.u-text-right--m {
text-align: right;
}
.u-text-justify--m {
text-align: justify;
}
}
@media screen and (min-width: 60em) {
.u-text-left--l {
text-align: left;
}
.u-text-center--l {
text-align: center;
}
.u-text-right--l {
text-align: right;
}
.u-text-justify--l {
text-align: justify;
}
}
@media screen and (min-width: 90em) {
.u-text-left--w {
text-align: left;
}
.u-text-center--w {
text-align: center;
}
.u-text-right--w {
text-align: right;
}
.u-text-justify--w {
text-align: justify;
}
}
/* Font sizing utilities
=========================================== */
.u-font-tiny {
font-size: 0.625em;
}
.u-font-small {
font-size: 0.75em;
}
@media screen and (min-width: 40em) {
.u-font-tiny {
font-size: 0.75em;
}
.u-font-small {
font-size: 0.832em;
}
}
.u-font-medium {
font-size: 1em;
}
.u-font-large {
font-size: 1.25em;
}
.u-font-huge {
font-size: 1.75em;
}
/* Font style utilities
* 1. This is a hold-over class for content output by Miva.
=========================================== */
.u-text-light {
font-weight: 200;
}
.u-text-regular {
font-weight: 400;
}
.u-text-medium {
font-weight: 600;
}
.required, /* [1] */
.u-text-bold {
font-weight: 700;
}
.u-text-boldest {
font-weight: 900;
}
.u-text-caps {
font-variant: small-caps;
}
.u-text-italic {
font-style: italic;
}
.u-text-normal {
font-style: normal;
}
.u-text-lowercase {
text-transform: lowercase;
}
.u-text-revert {
text-transform: none;
}
.u-text-uppercase {
text-transform: uppercase;
}
.u-text-strike {
text-decoration: line-through;
}
.u-text-underline {
text-decoration: underline;
}
a.u-text-underline:hover {
text-decoration: none;
}
/**
* Text utility to constrain text to a maximum of 75 characters per line,
* regardless of the text's 'font-size'. 30em is roughly equal to 75 characters,
* so we hard-code this value. Please don't change it.
*
* https://jsfiddle.net/5571te7g/
*
*/
.u-text-constrain {
max-width: 30em;
}
/* ==========================================================================
UTILITIES / VERTICAL ALIGN
========================================================================== */
.u-align-baseline {
vertical-align: baseline;
}
.u-align-bottom {
vertical-align: bottom;
}
.u-align-middle {
vertical-align: middle;
}
.u-align-top {
vertical-align: top;
}
/**
* Utility classes to vertically align an element centrally within its parent.
*
* Using .u-vertical-align-center on an element can cause visual issues if it renders
* on a half pixel so we can apply preserve-3d to prevent this on the parent
* element.
*/
.u-vertical-align-parent {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/**
* This class requires a set height on the parent element to function correctly.
*/
.u-vertical-align-center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* ==========================================================================
UTILITIES / WIDTHS
========================================================================== */
/**
* A series of utility classes that give a fluid width to whichever element
* they are applied to, media breakpoints are included.
*/
/* Mobile First
=========================================== */
/**
* Width size modifiers.
*/
.u-width-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2 {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3 {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5 {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6 {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8 {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9 {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11 {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12 {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1 {
margin-left: 8.333%;
}
.u-offset-2 {
margin-left: 16.666%;
}
.u-offset-3 {
margin-left: 25%;
}
.u-offset-4 {
margin-left: 33.333%;
}
.u-offset-5 {
margin-left: 41.666%;
}
.u-offset-6 {
margin-left: 50%;
}
.u-offset-7 {
margin-left: 58.333%;
}
.u-offset-8 {
margin-left: 66.666%;
}
.u-offset-9 {
margin-left: 75%;
}
.u-offset-10 {
margin-left: 83.333%;
}
.u-offset-11 {
margin-left: 91.666%;
}
/* Small Breakpoint [40em = 640px]
=========================================== */
@media screen and (min-width: 40em) {
.u-width-1--s {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--s {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--s {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--s {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--s {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--s {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--s {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--s {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--s {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--s {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--s {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--s {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1--s {
margin-left: 8.333%;
}
.u-offset-2--s {
margin-left: 16.666%;
}
.u-offset-3--s {
margin-left: 25%;
}
.u-offset-4--s {
margin-left: 33.333%;
}
.u-offset-5--s {
margin-left: 41.666%;
}
.u-offset-6--s {
margin-left: 50%;
}
.u-offset-7--s {
margin-left: 58.333%;
}
.u-offset-8--s {
margin-left: 66.666%;
}
.u-offset-9--s {
margin-left: 75%;
}
.u-offset-10--s {
margin-left: 83.333%;
}
.u-offset-11--s {
margin-left: 91.666%;
}
}
/* Medium Breakpoint [48em = 768px]
=========================================== */
@media screen and (min-width: 48em) {
.u-width-1--m {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--m {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--m {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--m {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--m {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--m {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--m {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--m {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--m {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--m {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--m {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--m {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-1--m {
margin-left: 8.333%;
}
.u-offset-2--m {
margin-left: 16.666%;
}
.u-offset-3--m {
margin-left: 25%;
}
.u-offset-4--m {
margin-left: 33.333%;
}
.u-offset-5--m {
margin-left: 41.666%;
}
.u-offset-6--m {
margin-left: 50%;
}
.u-offset-7--m {
margin-left: 58.333%;
}
.u-offset-8--m {
margin-left: 66.666%;
}
.u-offset-9--m {
margin-left: 75%;
}
.u-offset-10--m {
margin-left: 83.333%;
}
.u-offset-11--m {
margin-left: 91.666%;
}
}
/* Large Breakpoint [60em = 960px]
=========================================== */
@media screen and (min-width: 60em) {
.u-width-1--l {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--l {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--l {
flex-basis: 25%;
max-width: 25%;
}
.u-width-3point--l {
flex-basis: calc(100% / 12 * 3.5);
max-width: calc(100% / 12 * 3.5);
}
.u-width-4--l {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--l {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--l {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--l {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--l {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--l {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--l {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--l {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--l {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-point--l {
margin-left: calc(100% / 12 * .5);
}
.u-offset-1--l {
margin-left: 8.333%;
}
.u-offset-2--l {
margin-left: 16.666%;
}
.u-offset-3--l {
margin-left: 25%;
}
.u-offset-4--l {
margin-left: 33.333%;
}
.u-offset-5--l {
margin-left: 41.666%;
}
.u-offset-6--l {
margin-left: 50%;
}
.u-offset-7--l {
margin-left: 58.333%;
}
.u-offset-8--l {
margin-left: 66.666%;
}
.u-offset-9--l {
margin-left: 75%;
}
.u-offset-10--l {
margin-left: 83.333%;
}
.u-offset-11--l {
margin-left: 91.666%;
}
}
/* Wide-Screen Breakpoint [75em = 1200px]
=========================================== */
@media screen and (min-width: 75em) {
.u-width-1--w {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--w {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--w {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--w {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--w {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--w {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--w {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--w {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--w {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--w {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--w {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--w {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-zero--w {
margin-left: 0px;
}
.u-offset-1--w {
margin-left: 8.333%;
}
.u-offset-2--w {
margin-left: 16.666%;
}
.u-offset-3--w {
margin-left: 25%;
}
.u-offset-4--w {
margin-left: 33.333%;
}
.u-offset-5--w {
margin-left: 41.666%;
}
.u-offset-6--w {
margin-left: 50%;
}
.u-offset-7--w {
margin-left: 58.333%;
}
.u-offset-8--w {
margin-left: 66.666%;
}
.u-offset-9--w {
margin-left: 75%;
}
.u-offset-10--w {
margin-left: 83.333%;
}
.u-offset-11--w {
margin-left: 91.666%;
}
}
/* Wide-Screen Breakpoint [85em = 1360px]
=========================================== */
@media screen and (min-width: 85em) {
.u-width-1--xw {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--xw {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-2point--xw {
flex-basis: calc(100% / 12 * 2.5);
max-width: calc(100% / 12 * 2.5);
}
.u-width-3--xw {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--xw {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--xw {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--xw {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--xw {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--xw {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--xw {
flex-basis: 75%;
max-width: 75%;
}
.u-width-9point--xw {
flex-basis: calc(100% / 12 * 9.5);
max-width: calc(100% / 12 * 9.5);
}
.u-width-10--xw {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--xw {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--xw {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-zero--xw {
margin-left: 0px;
}
.u-offset-1--xw {
margin-left: 8.333%;
}
.u-offset-2--xw {
margin-left: 16.666%;
}
.u-offset-3--xw {
margin-left: 25%;
}
.u-offset-4--xw {
margin-left: 33.333%;
}
.u-offset-5--xw {
margin-left: 41.666%;
}
.u-offset-6--xw {
margin-left: 50%;
}
.u-offset-7--xw {
margin-left: 58.333%;
}
.u-offset-8--xw {
margin-left: 66.666%;
}
.u-offset-9--xw {
margin-left: 75%;
}
.u-offset-10--xw {
margin-left: 83.333%;
}
.u-offset-11--xw {
margin-left: 91.666%;
}
}
/* Wide-Screen Breakpoint [100em = 1600px]
=========================================== */
@media screen and (min-width: 100em) {
.u-width-1--xxw {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--xxw {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--xxw {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--xxw {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--xxw {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--xxw {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--xxw {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--xxw {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--xxw {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--xxw {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--xxw {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--xxw {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-zero--xxw {
margin-left: 0px;
}
.u-offset-1--xxw {
margin-left: 8.333%;
}
.u-offset-2--xxw {
margin-left: 16.666%;
}
.u-offset-3--xxw {
margin-left: 25%;
}
.u-offset-4--xxw {
margin-left: 33.333%;
}
.u-offset-5--xxw {
margin-left: 41.666%;
}
.u-offset-6--xxw {
margin-left: 50%;
}
.u-offset-7--xxw {
margin-left: 58.333%;
}
.u-offset-8--xxw {
margin-left: 66.666%;
}
.u-offset-9--xxw {
margin-left: 75%;
}
.u-offset-10--xxw {
margin-left: 83.333%;
}
.u-offset-11--xxw {
margin-left: 91.666%;
}
}
/* Wide-Screen Breakpoint [120em = 1920px]
=========================================== */
@media screen and (min-width: 120em) {
.u-width-1--xxlw {
flex-basis: 8.333%;
max-width: 8.333%;
}
.u-width-2--xxlw {
flex-basis: 16.666%;
max-width: 16.666%;
}
.u-width-3--xxlw {
flex-basis: 25%;
max-width: 25%;
}
.u-width-4--xxlw {
flex-basis: 33.333%;
max-width: 33.333%;
}
.u-width-5--xxlw {
flex-basis: 41.666%;
max-width: 41.666%;
}
.u-width-6--xxlw {
flex-basis: 50%;
max-width: 50%;
}
.u-width-7--xxlw {
flex-basis: 58.333%;
max-width: 58.333%;
}
.u-width-8--xxlw {
flex-basis: 66.666%;
max-width: 66.666%;
}
.u-width-9--xxlw {
flex-basis: 75%;
max-width: 75%;
}
.u-width-10--xxlw {
flex-basis: 83.333%;
max-width: 83.333%;
}
.u-width-11--xxlw {
flex-basis: 91.666%;
max-width: 91.666%;
}
.u-width-12--xxlw {
flex-basis: 100%;
max-width: 100%;
}
/**
* Offset size modifiers.
*/
.u-offset-zero--xxlw {
margin-left: 0px;
}
.u-offset-1--xxlw {
margin-left: 8.333%;
}
.u-offset-2--xxlw {
margin-left: 16.666%;
}
.u-offset-3--xxlw {
margin-left: 25%;
}
.u-offset-4--xxlw {
margin-left: 33.333%;
}
.u-offset-5--xxlw {
margin-left: 41.666%;
}
.u-offset-6--xxlw {
margin-left: 50%;
}
.u-offset-7--xxlw {
margin-left: 58.333%;
}
.u-offset-8--xxlw {
margin-left: 66.666%;
}
.u-offset-9--xxlw {
margin-left: 75%;
}
.u-offset-10--xxlw {
margin-left: 83.333%;
}
.u-offset-11--xxlw {
margin-left: 91.666%;
}
}
/* ==========================================================================
UTILITIES / Z-INDEX
========================================================================== */
/**
* Utility classes to set display relevance on the 'Z' axis.
*/
.u-below-content {
z-index: -1;
}
.u-over-content {
z-index: 100;
}
.u-over-control {
z-index: 200;
}
.u-over-page {
z-index: 300;
}
.u-over-screen {
z-index: 400;
}
.u-over-everything {
z-index: 500;
}
/* ==========================================================================
EXTENSIONS / BREADCRUMBS / COLLAPSING BREADCRUMBS
========================================================================== */
.x-collapsing-breadcrumbs__group,
.x-collapsing-breadcrumbs__list {
padding-left: 1rem;
font-size: 0.875rem;
line-height: 3;
}
.x-collapsing-breadcrumbs__group {
margin-bottom: 0;
border-bottom: 0 none;
}
.x-collapsing-breadcrumbs__list {
border-bottom: 1px solid #c0c0c0;
}
.x-collapsing-breadcrumbs__button {
padding-top: 0;
padding-bottom: 0;
font-size: 1rem;
}
.x-collapsing-breadcrumbs__list .o-list-inline__item:not(:last-child) {
margin-right: 1em;
}
.x-collapsing-breadcrumbs .o-list-inline__item:not(:last-of-type)::after {
display: inline-block;
position: relative;
right: -0.5em;
content: '/';
}
/* ==========================================================================
EXTENSIONS / CATEGORY TREE / CATEGORY TREE
========================================================================== */
.x-category-tree {
margin-bottom: 16px;
position: relative;
}
.x-category-tree__trigger {
display: none;
}
.x-category-tree__trigger:checked ~ .x-category-tree__row,
.x-category-tree__trigger:checked ~ .x-category-tree__row .x-category-tree__row {
display: block;
}
.x-category-tree__label {
display: block;
min-height: 2em;
margin: 0;
padding: 1em;
position: relative;
font-style: normal;
background-color: #3d70b2;
color: #fff;
}
.x-category-tree__label::after,
.x-category-tree__label::before {
position: absolute;
right: 1em;
transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}
.x-category-tree__label::after {
content: "\2212";
opacity: 0;
transform: scale(0);
}
.x-category-tree__label::before {
content: "\2261";
opacity: 1;
transform: scale(2);
}
.x-category-tree__trigger:checked ~ .x-category-tree__label::after {
opacity: 1;
transform: scale(2);
}
.x-category-tree__trigger:checked ~ .x-category-tree__label::before {
opacity: 0;
transform: scale(0);
}
.x-category-tree__title {
display: none;
}
.x-category-tree__row {
display: none;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.x-category-tree__link {
display: block;
padding: 0.5em 1em;
color: #0f0f0f;
}
.x-category-tree__link:hover {
text-decoration: none;
}
.x-category-tree__list--level-2 .x-category-tree__link {
padding-left: 2em;
}
.x-category-tree__list--level-3 .x-category-tree__link {
padding-left: 3em;
}
.x-category-tree__link--current {
font-weight: 700;
}
@media (min-width: 60em) {
.x-category-tree__label {
display: none;
}
.x-category-tree__title {
display: block;
}
.x-category-tree__heading {
padding-top: 1.125rem;
}
.x-category-tree__row,
.x-category-tree__trigger:checked ~ .x-category-tree__row,
.x-category-tree__trigger:checked ~ .x-category-tree__row .x-category-tree__row {
display: block;
}
.x-category-tree__link:not(.x-category-tree__link--current):hover {
text-decoration: none;
background-color: #eaeaea;
/*transition: background-color ease-in 0.3s 0.05s;*/
}
}
/**
* This section contains the necessary styles when using the built-in search
* faceting ability of Miva. Since the functional code is generated at run-time,
* these styles do not conform to the tenants used in the rest of the framework.
*/
.mm_facet_rangeslider {
display: block;
height: 2em;
margin: 0.25em;
position: relative;
}
.mm_facet_rangeslider_input_container_low,
.mm_facet_rangeslider_input_container_high {
width: 4em;
height: 2em;
position: absolute;
top: 0;
text-align: center;
border: 1px solid #c0c0c0;
}
.mm_facet_rangeslider_input_container_low {
left: 0;
border-radius: 0.25em 0 0 0.25em;
}
.mm_facet_rangeslider_input_container_high {
right: 0;
border-radius: 0 0.25em 0.25em 0;
}
.mm_facet_rangeslider_input_container_low.mm_facet_rangeslider_input_active,
.mm_facet_rangeslider_input_container_high.mm_facet_rangeslider_input_active {
border-color: #3d70b2;
}
.mm_facet_rangeslider_input {}
.mm_facet_rangeslider_track_container {
height: 2em;
position: absolute;
top: 0;
right: 4em;
left: 4em;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mm_facet_rangeslider_track {
height: 0.25em;
position: absolute;
top: 50%;
right: 0.25em;
left: 0.25em;
transform: translateY(-50%);
}
.mm_facet_rangeslider_track_background,
.mm_facet_rangeslider_track_selection {
position: absolute;
top: 0;
right: 0.5em;
bottom: 0;
left: 0.5em;
background: #c0c0c0;
}
.mm_facet_rangeslider_track_selection {
background: #3d70b2;
}
.mm_facet_rangeslider_track_handle_low,
.mm_facet_rangeslider_track_handle_high {
width: 2em;
height: 2em;
position: absolute;
top: 50%;
left: -0.5em;
background: #fff;
border: 1px solid #c0c0c0;
border-radius: 50%;
cursor: pointer;
transform: translateY(-50%);
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini {
height: 6em;
margin: 0;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_low {
width: 50%;
border-radius: 0.25em 0 0 0;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_high {
width: 50%;
border-radius: 0 0.25em 0 0;
border-left: none;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_track_container {
height: 3em;
top: 2em;
right: 0;
left: 0;
border: 1px solid #c0c0c0;
border-top: none;
border-radius: 0 0 0.25em 0.25em;
}
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_low.mm_facet_rangeslider_input_active,
.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_high.mm_facet_rangeslider_input_active {
border-color: #eaeaea;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
EXTENSIONS / DISPLAY LIST FILTERING / DISPLAY LIST FILTERING
========================================================================== */
/**
* Display list filtering is for use in product list filtering as well as any
* place a batch list or sortable data is used.
*/
.x-display-list-filtering {
display: flex;
flex-wrap: wrap;
}
.x-display-list-filtering__per-page {
margin-right: calc(16px * 2);
}
/* ==========================================================================
EXTENSIONS / HERO
========================================================================== */
/**
* The Hero component provides a dominant piece of media to a page
*
* 1. Allows for absolute positioning of borders and content.
* 2. Hero images set via background-image should cover and center.
*/
.x-hero {
display: block;
position: relative; /* [1] */
background-position: center; /* [2] */
background-size: cover; /* [2] */
}
/**
* The caption overlays at the bottom of a Hero, providing space for additional
* content such as titles or logos.
*/
.x-hero__caption {
position: absolute;
bottom: 0;
padding: 16px 0;
width: 100%;
text-shadow: 0 0 25px rgba(15, 15, 15, 0.25), 1px 1px 1px rgba(15, 15, 15, 0.5);
}
/**
* Hero video needs to be set to `display: block` to avoid spacing issues.
*/
.x-hero__video {
display: block;
width: 100%;
height: 100%;
object-fit: fill;
}
/**
* Hero link inherits the Hero `color` to override anchor element styles.
*/
.x-hero__link {
color: inherit;
}
/**
* As we cannot set a border property over video, borders are implemented
* using pseudo-elements.
*/
.x-hero--borders::before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: calc(16px / 4) solid rgba(255, 255, 255, 0.3);
content: "";
}
/**
* Make any other content below the Hero overlap upwards.
*/
.x-hero--overlap {
margin-bottom: calc(0px - 10vh);
}
/**
* If hero has overlap modifier, shift caption upwards to compensate.
*/
.x-hero--overlap .x-hero__caption {
bottom: 10vh;
}
/* ==========================================================================
EXTENSIONS / MESSAGES
========================================================================== */
/**
* Messages are block elements used to display information to the visitor about
* their current session. Typically these are informational or error messages
* such as you would see on a checkout page if there was an error with the
* credit card used.
*/
.x-messages {
margin-bottom: 1em;
padding: 0.5em 1em;
background-color: #eaeaea;
border: 1px solid currentColor;
}
/**
* This is a hold-over for some Miva message elements and modules which place a
* `br` tag as the first element of the messaging block.
*/
.x-messages br:first-child {
display: none;
}
.x-messages *:last-child {
margin-bottom: 0;
}
.x-messages--borderless {
border: 0 none;
}
.x-messages--error {
background-color: #fee8eb;
color: #c8102e;
}
.x-messages--info {
background-color: #eaefed;
color: #003b6f;
}
.x-messages--success {
background-color: #eaf4ef;
color: #009a44;
}
.x-messages--warning {
background-color: #ffffe5;
border-color: #f9ed1f;
}
/**
* These classes will help format the message if you are adding an icon.
*/
.x-messages--with-icon {
display: flex;
align-items: center;
justify-content: space-between;
}
.x-messages__icon {
font-size: 3rem;
}
.x-messages__close {
position: absolute;
top: 50%;
right: 0.25rem;
margin-top: -1rem;
color: #333;
font-size: 2rem;
line-height: 1;
text-decoration: none;
opacity: 0.3;
}
/*
what??? they have an old browser?
This can be removed if you do not need to alert for IE < 9.
*/
.x-messages--update-browser {
width: 100%;
position: relative;
text-align: center;
}
/* ==========================================================================
EXTENSIONS / PAGINATION
========================================================================== */
/**
* Pagination is for use in product list as well as any place a pageable batch
* list or data is used.
*/
.x-pagination {
display: flex;
max-width: 19rem;
margin: 0;
align-items: center;
}
.x-pagination--centered {
margin: auto;
}
.x-pagination--right {
margin-left: auto;
}
/* ==========================================================================
EXTENSIONS / PRODUCT LAYOUT / PRODUCT LAYOUT
========================================================================== */
/**
* This is the default product layout for the product page.
*/
.x-product-layout {}
.x-product-layout-images {
margin-left: 0;
margin-right: 0;
}
.x-product-layout-images__image {
display: inline-block;
margin-bottom: calc(16px * 1.5);
}
.x-product-layout-images__thumbnail-list {}
.x-product-layout-images__thumbnail-image {
margin-bottom: 16px;
}
.x-product-layout-purchase {}
.x-product-layout-purchase__pricing-original {
padding-right: calc(16px * 1.5);
}
.x-product-layout-purchase__options-attribute {
margin-bottom: calc(16px / 2);
}
.x-product-layout-purchase__options-attribute .c-form-label {
font-size: 0.875rem;
}
/* ==========================================================================
EXTENSIONS / PRODUCT LISTS / PRODUCT LISTS
========================================================================== */
/**
* Product lists are used in many spots throughout the store. They can be found
* on the storefront as featured product, the related products section of a
* product page, as an auto-suggest feature during checkout, or wherever.
*/
.x-product-list {
margin-bottom: 16px;
}
.x-product-list__heading {
margin-bottom: 2em;
}
.x-product-list__item, .sub-x-product-list__item {
margin-bottom: 16px;
}
.x-product-list__link {
color: #0f0f0f;
transition: ease-in-out 0.3s;
}
.x-product-list__link:hover {
color: #9f9f9f;
text-decoration: none;
}
.x-product-list__figure {
margin: 0;
}
.x-product-list__name,
.x-product-list__price {
display: block;
}
.x-product-list__image {
display: inline-block;
margin-bottom: 16px;
}
.x-product-list__price {
font-size: 0.875rem;
}
.x-product-list__action {
padding-top: 16px;
}
/**
* If you are creating a product carousel, add this class to the element.
*/
.x-product-list--carousel {}
.x-product-list--carousel .x-product-list__item, .x-product-list--carousel .sub-x-product-list__item {
margin-bottom: 0;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
/* ==========================================================================
EXTENSIONS / SEARCH-PREVIEW / SEARCH-PREVIEW
========================================================================== */
.x-search-preview {
display: none;
width: 100%;
padding: 0.75rem 0.5rem;
position: absolute;
background-color: #fff;
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity ease-in-out 0.5s;
z-index: 500;
}
.x-search-preview--open {
opacity: 1;
}
.x-search-preview__entry {
display: block;
}
.x-search-preview__list {
padding: 0 0.5rem;
}
.x-search-preview__line {
display: flex;
padding: 0.5rem 0;
position: relative;
align-items: center;
font-size: 0.875rem;
border-bottom: 1px solid #eaeaea;
cursor: pointer;
}
.x-search-preview__image {
width: 4rem;
height: 4rem;
margin: 0 1em 0 0;
overflow: hidden;
text-align: center;
}
.x-search-preview__item {
display: flex;
flex: 1;
justify-content: space-between;
text-decoration: none;
}
.x-search-preview__search-all {
padding: 0.5rem;
font-style: italic;
cursor: pointer;
}
/**
* This section contains the necessary styles when using the built-in search
* preview ability of Miva. Since the functional code is generated at run-time,
* these styles do not conform to the tenants used in the rest of the framework.
*/
.mm_searchfield_menuitem_selected {
background-color: #eaeaea;
}
/* ==========================================================================
EXTENSIONS / SUBSCRIPTIONS / SUBSCRIPTIONS
========================================================================== */
/**
* When using the subscription function of Miva, this is the default styling
* used for the date picker. You can update the styles in your theme file if
* you are looking to make changes.
*/
.miva_datepicker {
display: none;
position: absolute;
padding: 16px;
background: #fff;
border: 1px solid #9f9f9f;
z-index: 1000;
}
.miva_datepicker_calendar_container {
display: inline-block;
width: 214px;
position: relative;
vertical-align: top;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.miva_datepicker_calendar_month_selector {
display: flex;
align-items: center;
position: relative;
background: #707070;
}
.miva_datepicker_calendar_month_selector_next,
.miva_datepicker_calendar_month_selector_prev {
width: 35px;
height: 35px;
background: 0 -35px no-repeat;
cursor: pointer;
}
.miva_datepicker_calendar_month_selector_next:hover,
.miva_datepicker_calendar_month_selector_prev:hover {
background-color: #222;
}
.miva_datepicker_calendar_month_selector_title {
flex-grow: 1;
color: #fff;
text-align: center;
}
.miva_datepicker_calendar_month_selector_title_month {
display: inline-block;
}
.miva_datepicker_calendar_month_selector_title_year {
display: inline-block;
margin-left: 0.25em;
}
.miva_datepicker_cancel {
display: inline-block;
margin-top: 0.75em;
}
.miva_datepicker_calendar_weekday_container {
height: 34px;
margin: 2px;
position: relative;
}
.miva_datepicker_calendar_weekday_title {
display: inline-block;
width: 28px;
padding: 3px 0;
position: absolute;
font-weight: 700;
text-align: center;
}
#miva_datepicker_calendar_week_container {
margin: 2px;
position: relative;
}
.miva_datepicker_calendar_week {
display: block;
height: 30px;
position: relative;
}
.miva_datepicker_calendar_day {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
position: absolute;
top: 1px;
bottom: 1px;
font-size: 0.75em;
border: 1px solid #9f9f9f;
cursor: pointer;
}
.miva_datepicker_calendar_day:hover {
background: #707070;
border-color: #222;
color: #fff;
}
.miva_datepicker_calendar_day_noselect,
.miva_datepicker_calendar_day_noselect:hover {
background: #c0c0c0;
border-color: #222;
color: #222;
}
.miva_datepicker_calendar_day_current {
border-color: #222;
color: #222;
font-weight: 700;
}
.miva_datepicker_calendar_day_current:hover {
background: #222;
color: #fff;
}
.miva_datepicker_calendar_day_active {
background: #222;
border-color: #707070;
color: #fff;
font-weight: 700;
}
.miva_datepicker_calendar_day_0 {
left: 1px;
}
.miva_datepicker_calendar_day_1 {
left: 31px;
}
.miva_datepicker_calendar_day_2 {
left: 61px;
}
.miva_datepicker_calendar_day_3 {
left: 91px;
}
.miva_datepicker_calendar_day_4 {
left: 121px;
}
.miva_datepicker_calendar_day_5 {
left: 151px;
}
.miva_datepicker_calendar_day_6 {
left: 181px;
}
/* ==========================================================================
EXTENSIONS / MINI-BASKET / MINI-BASKET
========================================================================== */
/**
* This is an extension to use the mini-basket functionality of Miva in an
* off-canvas method.
*/
.x-mini-basket {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
transform: scaleX(0);
transform-origin: right;
transition: all ease-in-out 0.2s;
z-index: 500;
opacity: 0;
}
.x-mini-basket--open {
opacity: 1;
transform: scaleX(1);
}
.x-mini-basket__content {
display: flex;
flex: 1 1 100%;
flex-direction: column;
width: 100vw;
max-width: 30rem;
padding: 1rem;
}
.x-mini-basket__header {
display: flex;
justify-content: space-between;
}
.x-mini-basket__list {
overflow-y: auto;
}
.x-mini-basket__line {
display: flex;
margin-bottom: 2em;
font-size: 0.875rem;
flex-wrap: wrap;
}
.x-mini-basket__image {
width: 5rem;
height: 5rem;
margin: 0 1em 0 0;
overflow: hidden;
text-align: center;
}
.x-mini-basket__item {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
}
.x-mini-basket__item:hover {
text-decoration: none;
}
.x-mini-basket__item-name {
display: block;
margin-bottom: 1em;
}
.x-mini-basket__subscription {
flex-basis: 100%;
}
.x-mini-basket__item-total {
display: flex;
align-items: center;
justify-content: space-between;
}
.x-mini-basket__item-total hr {
margin: 0 0.75em;
flex-grow: 1;
}
.x-mini-basket__footer {
}
.x-mini-basket__charges,
.x-mini-basket__total,
.x-mini-basket__cta {
display: flex;
flex-grow: 1;
justify-content: space-between;
}
.x-mini-basket__charges {
flex-direction: column;
margin-bottom: 1em;
font-size: 0.875rem;
}
.x-mini-basket__charge-item {
display: flex;
justify-content: space-between;
}
.x-mini-basket__total {
margin-bottom: 1em;
}
.x-mini-basket__cta {
font-size: 0.875rem;
}
/* ==========================================================================
EXTENSIONS / QUANTIFY / QUANTIFY
========================================================================== */
/**
* This extension allows for the use of buttons to increase/decrease item
* quantities on the product and basket pages. When used on the basket page,
* the decrease button becomes a remove button if the quantity is 1.
*/
.x-quantify {}
.x-quantify .c-control-group__button {
border-color: #c0c0c0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.x-quantify .c-control-group__field {
height: auto;
border-left-width: 0;
}
/* ==========================================================================
EXTENSIONS / TABS / FLEX-TABS
========================================================================== */
/**
* This extension allows for creating tabbed content which converts to an
* accordion layout on smaller devices/screens.
*/
.x-flex-tabs {
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
}
input[data-flex-tab] {
display: none;
visibility: hidden;
}
.x-flex-tabs__tab {
width: 100%;
border-bottom: 0.125rem solid transparent;
cursor: pointer;
}
@media (min-width: 64em) {
.x-flex-tabs:not(.x-flex-tabs--accordion) .x-flex-tabs__tab {
/* let tabs scale to fit multiple on each row */
width: auto;
/* shift all tabs to appear before content */
order: -1;
}
.x-flex-tabs:not(.x-flex-tabs--accordion) .x-flex-tabs__tab:not(:first-of-type) {
margin-left: 2em;
}
}
.x-flex-tabs__content {
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
transform-origin: top;
transition: opacity 0.3s ease-out;
}
input[data-flex-tab]:checked + .x-flex-tabs__tab {
font-weight: 700;
border-color: currentColor;
}
input[data-flex-tab]:checked + .x-flex-tabs__tab + .x-flex-tabs__content {
height: auto;
padding-top: 1em;
padding-bottom: 1em;
overflow-y: auto;
opacity: 1;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
transition: opacity 0.3s ease-in;
}
/* ==========================================================================
EXTENSIONS / NAVIGATION / TRANSFIGURE NAVIGATION
========================================================================== */
@media screen and (max-width: 59.9em) {
.has-open-main-menu,
.has-open-main-menu body {
overflow: hidden;
}
.x-transfigure-navigation {
padding: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: -100vw;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
overflow: hidden;
transition: all ease-out 0.2s;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
transform-origin: left;
z-index: -1;
}
.x-transfigure-navigation.is-open {
left: 0;
background: rgba(0, 0, 0, 0.65);
opacity: 1;
transition: all ease-in 0.2s;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
z-index: 2;
}
.x-transfigure-navigation__wrap {
max-width: 22.5rem;
min-height: 100%;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
}
.x-transfigure-navigation__header {}
.x-transfigure-navigation__header .c-button {
padding: calc(1em - 1px);
}
.x-transfigure-navigation__content {
position: relative;
}
.x-transfigure-navigation__row,
.x-transfigure-navigation__row .c-navigation__row,
.x-transfigure-navigation__row .c-navigation__row:nth-child(2) .c-navigation__row:last-of-type {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
background-color: #fff;
list-style: none;
transition: transform 0.3s;
}
.x-transfigure-navigation .c-navigation__list {
position: static;
}
.x-transfigure-navigation .c-navigation__list:hover > .c-navigation__row {
display: block;
box-shadow: none;
}
.x-transfigure-navigation .c-navigation__link {
display: flex;
height: 3.75rem;
padding: 0 0 0 1rem;
align-items: center;
justify-content: space-between;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 0 solid #d3d3d3;
border-top-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
transition: all 0.3s;
/*white-space: nowrap;*/
}
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__link,
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 1rem;
}
.x-transfigure-navigation__row .c-navigation__list:first-of-type > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row .c-navigation__list:first-of-type > .c-navigation__link {
/*border-top-width: 0;*/
}
.x-transfigure-navigation__row .c-navigation__list:last-of-type > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row .c-navigation__list:last-of-type > .c-navigation__link {
border-bottom-width: 1px;
}
.x-transfigure-navigation__row.is-hidden,
.x-transfigure-navigation__row .c-navigation__row.is-hidden {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.x-transfigure-navigation__row.is-hidden > .cmp-primary-navigation__title,
.x-transfigure-navigation__row.show-next > .cmp-primary-navigation__title,
.x-transfigure-navigation__row.is-hidden > .c-navigation__list > .c-navigation__link,
.x-transfigure-navigation__row.show-next > .c-navigation__list > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row.is-hidden > .c-navigation__list > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row.show-next > .c-navigation__list > .c-navigation__link {
opacity: 0;
}
.x-transfigure-navigation__row.show-next > .c-navigation__list > .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row.show-next > .c-navigation__list > .c-navigation__link {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.x-transfigure-navigation .c-navigation__link-carat {
display: none;
}
.x-transfigure-navigation .has-child-menu .c-navigation__link-carat {
display: inline-flex;
align-self: stretch;
}
.x-transfigure-navigation .c-navigation__link-carat > * {
display: flex;
width: 4rem;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.x-transfigure-navigation__footer {
padding: 1rem;
font-size: 0.75rem;
list-style: none;
border-top: 1px solid #d3d3d3;
}
.x-transfigure-navigation__footer-link {
display: block;
padding-top: 1em;
padding-bottom: 1em;
font-weight: 500;
line-height: 2;
}
}
@media screen and (min-width: 60em) {
.x-transfigure-navigation__row .c-navigation__row {
display: none;
width: auto;
position: absolute;
white-space: nowrap;
z-index: 100;
}
.x-transfigure-navigation > .c-navigation__row {
display: flex;
}
.x-transfigure-navigation .c-navigation__link {
display: flex;
align-items: center;
justify-content: space-around;
}
.x-transfigure-navigation__row .c-navigation__row:nth-child(2) .c-navigation__list {
text-align: left;
}
.x-transfigure-navigation__row .c-navigation__row:nth-child(2) .c-navigation__row:last-of-type {
top: 0;
left: 100%;
z-index: 200;
}
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__link,
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
justify-content: space-between;
}
.x-transfigure-navigation .c-navigation__list:hover > .c-navigation__row {
display: table;
/*box-shadow: 1px 1px 0.25em 0 rgba(15, 15, 15, 0.5);*/
}
.x-transfigure-navigation__row .is-off-screen .c-navigation__row:nth-child(2) .c-navigation__row {
left: auto;
right: 100%;
box-shadow: -1px 1px 0.25em 0 rgba(15, 15, 15, 0.5);
}
.x-transfigure-navigation__row .c-navigation__row:nth-child(2) .c-navigation__row .c-navigation__link,
.x-transfigure-navigation__row .c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 1em;
}
.x-transfigure-navigation .c-navigation__link-carat {
font-size: 0.5em;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__link-carat {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/* ==========================================================================
EXTENSIONS / CAROUSEL / ROUNDABOUT
========================================================================== */
/**
* The Roundabout extension gives you the ability to create a hero image
* carousel or convert a product list into a carousel of products.
*/
.x-carousel {
display: flex;
flex: 1;
position: relative;
overflow: hidden;
transition: visibility ease-in-out 0.1s;
visibility: hidden;
}
.x-carousel--is-loaded {
visibility: visible;
}
.x-carousel__button {
display: inline-block;
padding: 0;
position: absolute;
top: 50%;
font-size: 3rem;
background-color: rgba(255, 255, 255, 0);
border: 0 none;
opacity: 0.25;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
transition: ease-in-out 0.3s;
z-index: 50;
}
.x-carousel__button-right {
right: 0;
}
.x-carousel__button:hover {
background-color: rgba(255, 255, 255, 0.25);
opacity: 1;
}
.x-carousel__container {
display: flex;
width: 100%;
flex: 1 1 auto;
position: relative;
left: -100%;
transform: translate3d(100%, 0, 0);
}
.x-carousel--reverse {
transform: translate3d(-100%, 0, 0);
}
.x-carousel--animate {
transform: none;
transition: all 250ms ease-in-out;
}
.x-carousel__item {
display: flex;
flex: 1 0 100%;
min-width: 100%;
margin: 0;
align-items: flex-start;
}
.x-carousel__item img {
opacity: 1;
transition: opacity 250ms;
}
.x-carousel__item img[data-src] {
opacity: 0;
}
/* ==========================================================================
EXTENSIONS / FACETS / FACETS
========================================================================== */
.x-facet-set {}
.x-facet-set__trigger {
display: none;
}
.x-facet-set__label {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.5em;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
}
.x-facet-set__label::after {
display: inline-block;
font-size: 1rem;
line-height: 1;
content: '+';
}
.x-facet-set__list {
display: block;
max-height: 0;
opacity: 0;
visibility: hidden;
transition-delay: 0.15s, 0s, 0s;
}
.x-facet-set__trigger:checked ~ .x-facet-set__label::after {
content: '-';
}
.x-facet-set__trigger:checked ~ .x-facet-set__list {
display: block;
overflow: hidden;
opacity: 1;
transition: visibility 0s ease, max-height 0.3s ease, opacity 0.3s ease;
max-height: 50em;
visibility: visible;
transition-delay: 0s;
}
/* ==========================================================================
EXTENSIONS / FASTEN HEADER / FASTEN HEADER
========================================================================== */
.x-fasten-header {
display: none;
}
@media screen and (min-width: 60em) {
.x-fasten-header {
display: flex;
width: 100vw;
max-width: none;
padding: 0.5rem 1rem;
position: fixed;
top: 0;
background-color: #222;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
color: #fff;
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
transform-origin: top;
transition: all ease-in-out 0.15s;
z-index: 300;
}
.x-fasten-header--is-active .x-fasten-header {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.x-fasten-header__logo-image {
max-height: 4rem;
}
}
/* ==========================================================================
THEME STYLE MODIFICATIONS
========================================================================== */
/**
* Set all your THEME styles in this file.
*
* Adding a Theme to a design is very straightforward as every component works
* like an extensible class. This allows you to add theme specific classes
* and/or override existing classes.
*
* NOTE: Any new classes created should follow the established coding
* standards for the framework. Theme specific classes should be prefixed by
* `.t-`.
*
* Why do it this way?
* By decoupling the theme styling from the default framework, you get the
* following benefits:
* Keep the framework core library up-to-date
* Updates to the core styles of the framework do not get overwritten when
* extending the component.
*
* End-user entry points remain untouched
* End-users do not need to use any custom name that belongs only to the
* theme.
*/
html,
.u-font-primary {
/* font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
}
button,
input,
html,
select,
textarea {
letter-spacing: 0.05em;
}
.c-keyline {
border-color: #eaeaea;
}
.o-site-wrapper {
max-width: 100vw;
}
.c-form-input:focus {
border-color: #c0c0c0;
box-shadow: none;
}
.c-form-input--large {
height: calc(3.875em - (1px * 2));
line-height: calc(3.875em - (1px * 2));
}
.c-form-checkbox__input:checked + .c-form-checkbox__caption::after {
background: none;
background-color: #0f0f0f;
border: 1px solid currentColor;
box-shadow: inset 0 0 0 2px #fff;
}
.x-messages {
margin-bottom: 1rem;
padding: 0.75em 1.25em;
font-size: 0.875rem;
border: 0 none;
}
.x-messages--info,
.x-messages--warning {
background-color: #f2f2f2;
color: #a3a3a3;
}
/**
* Shadows Color Overrides
*/
.u-bg-red::before,
.u-bg-red {
background-color: #f02;
}
.u-bg-yellow::before,
.u-bg-yellow {
background-color: #deded4;
}
.u-bg-blue::before,
.u-bg-blue {
background-color: #003b6f;
}
.u-bg-green::before,
.u-bg-green {
background-color: #13c4a3;
}
.u-bg-black::before,
.u-bg-black {
background-color: #000;
}
.u-border-red {
border-color: #f02;
}
.u-border-yellow {
border-color: #deded4;
}
.u-border-blue {
border-color: #003b6f;
}
.u-border-green {
border-color: #13c4a3;
}
.u-border-black {
border-color: #000;
}
.u-color-red {
color: #f02;
}
.u-color-yellow {
color: #deded4;
}
.u-color-blue {
color: #003b6f;
}
.u-color-green {
color: #13c4a3;
}
.u-color-black {
color: #000;
}
/* Site Header
=========================================== */
.t-site-header {
border-bottom: 1px solid #eaeaea;
}
.t-site-header__top-navigation {
font-size: 0.8125rem;
}
.t-site-header__message {
display: inline-block;
padding: 1em 0 1em 1em;
}
.t-site-header__links {}
.t-site-header__links [class^="u-icon-"] {
margin-right: 0.25em;
font-size: 1.25rem;
vertical-align: text-bottom;
}
.t-site-header__links a:hover {
text-decoration: none;
opacity: 0.75;
transition: 0.3s;
}
.t-site-header__links .o-layout__item {
padding: 1em 1rem;
}
@media (min-width: 48em) {
.t-site-header__links .o-layout__item:not(:first-of-type) {
border-left: 1px solid #5a5a5a;
}
}
.t-site-header__links .x-transfigure-navigation__footer {
display: flex;
justify-content: flex-end;
}
.t-site-header__links .x-transfigure-navigation__footer-link {
margin: 0 1rem;
padding: 0;
font-size: inherit;
font-weight: 900;
letter-spacing: inherit;
color: #eaeaea;
}
.t-site-header__basket-link--mobile {
display: flex;
font-size: 2rem;
}
.t-site-header__basket-link-quantity--mobile {
display: inline-block;
min-width: 2em;
height: 2em;
padding: 0 0.25em;
font-size: 0.75rem;
line-height: 2;
text-align: center;
border-radius: 50%;
touch-action: none;
-webkit-transform: translate(-0.75em, -1em);
-ms-transform: translate(-0.75em, -1em);
transform: translate(-0.75em, -1em);
z-index: -1;
}
.t-site-header__basket-link-quantity {
margin-left: 0.5em;
padding: 0.625em 1.125em;
}
.t-global-account {
width: 100vw;
max-width: 22.5rem;
padding: 1rem;
position: absolute;
top: 100%;
right: 0;
background-color: #fafafa;
border: 1px solid #eaeaea;
box-shadow: 0 2px 1px -2px #707070;
opacity: 0;
transition: all ease-in-out 0.15s;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
transform-origin: top;
}
.t-global-account.is-open {
opacity: 1;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.t-global-account__form {
margin-bottom: 0;
}
.t-global-account__form .c-form-list__item:last-of-type {
margin-bottom: 0;
padding-top: 0.5em;
}
.t-site-header__masthead {
max-width: 80rem;
padding-top: 1em;
padding-bottom: 1em;
position: relative;
font-size: 0.875rem;
}
.x-fasten-header {
max-width: none;
padding: 0.5rem 1rem;
position: fixed;
background-color: #fff;
box-shadow: 0 2px 4px rgba(128, 128, 128, 0.15);
color: #222;
}
.t-site-header__logo {
margin-bottom: 0;
}
.t-site-header__store-name {}
.t-site-header__store-tagline {}
.t-site-header__search-form {
margin-bottom: 0;
position: relative;
border: 1px solid #eaeaea;
}
.t-site-header__search-form .c-form-list__item {
margin-bottom: 0;
margin-left: auto;
}
.t-site-header__search-form .c-form-input {
padding-right: calc(2em - 1px);
padding-left: calc(2em - 1px);
}
.t-site-header__search-form .c-button {
}
.t-site-header__masthead-links {
align-items: center;
justify-content: flex-end;
}
.t-site-header__masthead-links [class^="u-icon-"] {
margin-right: 0.25em;
font-size: 1.25rem;
vertical-align: text-bottom;
}
.t-site-header__masthead-links a:hover {
text-decoration: none;
opacity: 0.75;
transition: 0.3s;
}
.t-site-header__masthead-links a:first-of-type {
margin-right: 1.5em;
padding-top: 0.5em;
padding-right: calc(1.5em + 1px);
padding-bottom: 0.5em;
border-right: 1px solid #eaeaea;
}
.t-site-navigation {
margin-bottom: 1rem;
}
.t-site-navigation__wrap {
max-width: 80rem;
width: 100%;
margin-right: auto;
margin-left: auto;
position: relative;
font-size: 0.875rem;
}
@media (min-width: 60em) {
.t-site-navigation {
border-bottom: 1px solid #eaeaea;
}
.x-transfigure-navigation:hover .c-navigation__list .c-navigation__link {
/*color: #adadad;*/
transition: color ease-in 0.1s;
}
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__list .c-navigation__link {
color: #adadad;
}
.x-transfigure-navigation .c-navigation__list:hover .c-navigation__link {
color: #0f0f0f;
transition: color ease-out 0.1s;
}
}
.x-transfigure-navigation__content {
padding-top: 1em;
padding-bottom: 1em;
}
.x-transfigure-navigation .c-navigation__link {
font-weight: 900;
color: #454545;
}
.x-transfigure-navigation .c-navigation__link:hover {
box-shadow: none;
}
.x-transfigure-navigation .c-navigation__row:nth-child(2) .c-navigation__link:hover {
background-color: #fff;
color: #0f0f0f;
transition: color ease-out 0.1s;
}
.x-search-preview {
right: 0;
}
.t-breadcrumbs {
margin-bottom: 1rem;
text-transform: uppercase;
}
.x-collapsing-breadcrumbs__group,
.x-collapsing-breadcrumbs__list {
max-width: 80rem;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 1em;
padding-right: 1rem;
font-size: 0.6875rem;
line-height: inherit;
border-bottom: 0 none;
}
.x-collapsing-breadcrumbs__list {
padding-bottom: 2em;
}
/* Main Element
=========================================== */
.t-main-content-element {
max-width: 80rem;
}
/* Site Footer
=========================================== */
.t-site-footer {
padding-top: 1rem;
}
.t-site-footer .o-wrapper {
max-width: 80rem;
}
.t-site-footer__content,
.t-site-footer__disclaimer {
padding-top: 2em;
padding-bottom: 2em;
}
.t-site-footer .c-menu__title,
.t-site-footer .c-collapsible-menu__label {
font-weight: 600;
}
.t-site-footer__content .c-menu__link:not([class*=" u-icon-"]) {
font-size: 0.875rem;
font-weight: 500;
color: #828282;
}
.t-site-footer__content .c-menu__link:hover {
text-decoration: none;
opacity: 0.75;
}
.t-site-footer__disclaimer {
font-size: 0.75rem;
}
.t-global-footer-social-links .c-menu__link {
padding: 0 1rem 1rem 0;
}
.t-global-footer-social-links .c-menu__link:hover {
text-decoration: none;
opacity: 0.75;
}
.t-newsletter-form__input {
padding-top: 0.5em;
padding-bottom: 0.5em;
height: auto;
}
@media (max-width: 47.9em) {
.t-newsletter-form fieldset {
display: block;
max-height: 0;
opacity: 0;
visibility: hidden;
transition-delay: 0.15s, 0s, 0s;
}
.t-newsletter-form .c-collapsible-menu__trigger:checked ~ fieldset {
display: block;
max-height: 10em;
margin-top: 1em;
opacity: 1;
overflow: hidden;
transition: visibility 0s ease, max-height 0.3s ease, opacity 0.3s ease;
transition-delay: 0s;
visibility: visible;
}
}
@media (min-width: 48em) {
.t-site-footer {
padding-top: 4rem;
}
.t-site-footer__content,
.t-site-footer__disclaimer {
padding-top: 4em;
padding-bottom: 4em;
}
}
/* Storefront
=========================================== */
.t-storefront-about {}
.t-storefront-about .c-heading-charlie {
font-size: 1.875rem;
letter-spacing: 3px;
}
.t-storefront-about .c-heading--subheading {
font-size: 1rem;
font-weight: 600;
letter-spacing: 2px;
}
.t-storefront-about__brief {
font-size: 0.9375rem;
line-height: 1.667;
}
.t-featured-products {
margin-bottom: 2rem;
padding-top: 3rem;
}
.t-featured-products .x-product-list__heading {
margin-bottom: 3em;
font-size: 1.5rem;
}
.t-featured-products .x-product-list__action {
max-width: 18em;
margin: auto;
}
.t-featured-products .x-product-list__action .c-button {
padding-right: calc(1rem * 4.5 - 1px);
padding-left: calc(1rem * 4.5 - 1px);
}
/* Category Tree
=========================================== */
.x-category-tree__label {
margin-bottom: 1em;
padding: 1em 0;
font-size: 0.75rem;
font-weight: 700;
background-color: #fff;
border-bottom: 1px solid #eaeaea;
color: #222;
}
.x-category-tree__heading {
font-size: 15px;
}
@media (min-width: 60em) {
.x-category-tree__heading {
padding-top: 0.25rem;
}
}
.x-category-tree__label::after,
.x-category-tree__label::before {
font-family: 'ReadyTheme Icons', sans-serif;
font-size: 0.625em;
font-weight: 400;
}
.x-category-tree__label::after {
content: "\30";
}
.x-category-tree__label::before {
content: "\31";
transform: scale(1);
}
.x-category-tree__trigger:checked ~ .x-category-tree__label::after {
transform: scale(1);
}
.x-category-tree__link {
padding: 0 0 1rem;
padding: 0;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
color: #0f0f0f;
transition: color ease-in-out 0.2s;
}
.x-category-tree__list--level-2 .x-category-tree__link {
padding-left: 1.75em;
font-size: 13px;
color: #9f9f9f;
}
.x-category-tree__list--level-3 .x-category-tree__link {
padding-left: 2.75em;
font-size: 12px;
color: #9f9f9f;
}
.x-category-tree__link--current,
.x-category-tree__list--level-2 .x-category-tree__link--current,
.x-category-tree__list--level-3 .x-category-tree__link--current {
font-weight: 700;
color: #0f0f0f;
}
.x-category-tree__link:not(.x-category-tree__link--current):hover {
text-decoration: underline;
background-color: inherit;
}
.t-faceting .c-form-checkbox {
font-size: 14px;
}
/* Category Page
=========================================== */
.t-display-list-filtering {
flex-wrap: nowrap;
}
.t-display-list-filtering .x-display-list-filtering__per-page,
.t-display-list-filtering .x-display-list-filtering__sort-by,
.t-display-list-filtering .c-form-list__item,
.t-display-list-filtering .c-form-label,
.t-display-list-filtering .c-form-select {
margin-bottom: 0;
}
.t-display-list-filtering .c-form-label {
font-size: 0.6875rem;
}
.t-display-list-filtering .c-form-select__dropdown {
padding: 0;
font-size: 0.75rem;
background-color: #fff;
border: 0 none;
color: initial;
}
.t-pagination {}
.t-pagination.x-pagination--centered {
width: 13rem;
justify-content: center;
}
.t-pagination .o-list-inline {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.t-pagination .c-button {
width: 2em;
height: 2em;
padding: 0;
line-height: 2;
border-color: #c0c0c0;
}
.t-pagination .c-form-select {
margin-bottom: 0;
}
.t-pagination .c-form-select__dropdown {
padding: 0;
border: 0 none;
}
.x-product-list__item, .sub-x-product-list__item {
margin-bottom: 2rem;
}
.x-product-list__name,
.x-product-list__price {
font-weight: 600;
}
.x-product-list__price {
display: inline-block;
padding-right: 0.5em;
padding-left: 0.5em;
color: #7f7f7f;
}
/* Product Page
=========================================== */
@media (min-width: 60em) {
.x-product-layout {
padding-top: 2rem;
}
}
.x-product-layout-purchase__name {
margin-bottom: 2rem;
}
.x-product-layout-purchase__pricing-original,
.x-product-layout-purchase__pricing-current {
font-size: 1.125rem;
font-weight: 500;
}
.x-product-layout-purchase .is-required {
font-weight: 500;
}
.x-product-layout-purchase__options {
display: flex;
width: auto;
max-width: none;
}
.x-product-layout-purchase__options-attribute .c-form-label {
font-size: 0.75rem;
}
.t-quantify .c-control-group__button {
padding-top: calc(0.5em * 3 + 1px);
padding-bottom: calc(0.5em * 3 + 1px);
}
.t-quantify .c-control-group__button,
.t-quantify .c-control-group__field {
max-width: calc(100% / 3);
flex-basis: calc(100% / 3);;
}
.x-product-description {
margin-bottom: 6rem;
padding-top: 6rem;
}
.x-product-description .x-flex-tabs__tab {
padding-top: 0.75em;
padding-bottom: 0.75em;
}
@media (max-width: 47.9em) {
.x-product-description .x-flex-tabs__tab {
display: flex;
align-items: center;
justify-content: space-between;
}
.x-product-description .x-flex-tabs__tab::after {
display: inline-block;
font-size: 1rem;
line-height: 1;
content: '+';
}
.x-product-description input[data-flex-tab]:checked + .x-flex-tabs__tab ~ .x-flex-tabs__tab::after {
content: '-';
}
}
.x-product-description .x-flex-tabs__content {
font-size: 0.875rem;
}
/* Basket Page
=========================================== */
.t-basket__product-summary .c-table-responsive__row,
.t-basket__order-summary .c-table-simple__row {
border-color: #eaeaea;
}
.t-basket__product-summary thead {
border-top: 1px solid #eaeaea;
}
.t-basket__product-summary tbody .c-table-responsive__cell {
padding-top: 1.5rem;
}
.t-basket__product-details {
font-size: 0.875rem;
font-weight: 600;
}
.t-basket-update .x-quantify {
width: 10em;
font-size: 0.875rem;
}
.t-basket-update .x-quantify .c-control-group__button {
padding-top: calc(0.625em * 2 + 1px);
padding-bottom: calc(0.625em * 2 + 1px);
font-size: 0.875em;
}
.t-basket-update .x-quantify .c-control-group__button,
.t-basket-update .x-quantify .c-control-group__field {
max-width: calc(100% / 3);
flex-basis: calc(100% / 3);;
}
.t-basket__product-remove {
width: 3em;
height: 3em;
padding: 0;
line-height: 3;
}
.t-basket_basket-coupon-form-toggle:checked ~ label > .u-icon-add::before {
content: "\3c";
}
.t-basket_basket-coupon-form-toggle:checked ~ .t-basket_coupon-form {
height: 3rem;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.t-basket_coupon-form {
height: 0;
margin-bottom: 0;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
transform-origin: top;
transition: all ease-in-out 0.2s;
}
/* Checkout Pages
=========================================== */
.t-ocst-account-message {
display: block;
padding: 2em;
font-size: 0.75rem;
}
.t-checkout-log-in__form {
display: block;
max-height: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
transition-delay: 0.15s, 0s, 0s;
}
.t-checkout-log-in__label {
cursor: pointer;
}
.t-checkout-log-in__trigger:checked ~ .t-checkout-log-in__form {
display: block;
max-height: 9rem;
padding-top: 1em;
opacity: 1;
overflow: hidden;
transition: visibility 0s ease, max-height 0.3s ease, opacity 0.3s ease;
transition-delay: 0s;
visibility: visible;
}
.t-checkout-basket-summary {
height: calc(100% - 1rem);
padding: 2rem 2rem 0;
background-color: #f2f2f2;
}
.t-checkout-basket-summary__product-summary tbody .c-table-simple__cell {
padding-top: 1.5rem;
}
.t-checkout-basket-summary__image {
margin-right: 2rem;
}
.t-checkout-basket-summary__promo-form,
.t-checkout-basket-summary__promo-form:first-child,
.t-checkout-basket-summary__promo-form:last-child {
display: block;
margin: -1px -2rem;
padding-right: 2rem;
padding-left: 2rem;
background-color: #dedede;
}
@media (max-width: 59.9em) {
.t-page-ocst .t-site-header__logo,
.t-page-osel .t-site-header__logo,
.t-page-opay .t-site-header__logo {
flex-basis: calc(100% / 12 * 12);
max-width: calc(100% / 12 * 12);
}
}
@media (min-width: 90em) {
.t-page-ocst .t-main-content-element,
.t-page-osel .t-main-content-element,
.t-page-opay .t-main-content-element {
max-width: none;
padding-right: 0;
padding-left: 0;
}
.t-checkout-basket-summary {
height: 100%;
}
.t-checkout-basket-summary .c-table-simple {
width: 60%;
}
.t-checkout-basket-summary__promo-form,
.t-checkout-basket-summary__promo-form:first-child,
.t-checkout-basket-summary__promo-form:last-child {
margin: -1px 0;
}
.t-page-ocst .t-site-footer,
.t-page-osel .t-site-footer,
.t-page-opay .t-site-footer {
padding-top: 0;
}
.t-page-ocst .t-site-footer__disclaimer,
.t-page-osel .t-site-footer__disclaimer,
.t-page-opay .t-site-footer__disclaimer {
padding-top: 1em;
padding-bottom: 1em;
text-align: left;
}
.t-page-ocst .t-site-footer__disclaimer .o-layout__item,
.t-page-osel .t-site-footer__disclaimer .o-layout__item,
.t-page-opay .t-site-footer__disclaimer .o-layout__item {
flex: 0;
white-space: nowrap;
}
}
@media (min-width: 48em) {
.t-payment-cta {
flex-grow: 0;
}
.t-payment-form {
justify-content: center;
}
.t-payment-form .o-layout__item {
display: flex;
max-width: 75%;
align-items: center;
}
.t-payment-form .c-form-label {
width: 25%;
margin-right: 1rem;
}
.t-payment-form .c-form-input {
max-width: 50%;
}
.t-payment-form .c-form-input--cvv {
max-width: 25%;
margin-right: 0.5rem;
}
.t-payment-form .c-control-group {
max-width: 50%;
flex-grow: 1;
}
}
.t-checkout-customer-summary {
margin-bottom: 1rem;
padding: 1rem 2rem 0;
}
.t-checkout-customer-summary .c-keyline {
border-color: #c0c0c0;
}
/* Account Landing Page
=========================================== */
.t-account-landing-section {
margin-bottom: 1rem;
}
.t-account-landing-section .x-category-tree__label {}
.t-account-landing-section .c-heading-echo {
font-size: 14px;
}
@media (min-width: 48em) {
.t-account-landing-section .c-heading-echo {
font-size: 15px;
}
}
.t-account-landing-section__content {
padding-top: 1.25rem;
padding-right: 1rem;
padding-bottom: 1rem;
}
.t-account-landing-section__content.x-category-tree__row {
padding-left: 1rem;
}
.t-account-landing-section__content.x-category-tree__row span.x-category-tree__link:hover {
text-decoration: none;
}
/* Wish List Page
=========================================== */
.t-wish-list-search .c-control-group {
border: 1px solid #eaeaea;
}
.t-wish-list-search__button {
padding-right: calc(1em - 1px);
padding-left: calc(1em - 1px);
}
.t-wish-list__item .c-control-group__button {
flex: 1 1 50%;
padding-right: 0;
padding-left: 0;
}
/* CSS Document */
/*::::::::: global :::::::::*/
html {
font-family: 'Lato', 'Roboto', sans-serif;
}
body {
/*background: url(/images/bg-crosslines.png);*/
}
.site-wrapper {
position: relative;
/* max-width: 1280px;
max-width: 1600px;box-shadow: 0 2px 8px rgba(0,0,0,.5);*/
width: 100%;
margin: 0 auto;
background: #fff;
}
.o-wrapper {
padding-right: .5em;
padding-left: .5em;
}
.t-main-content-element {
max-width: 100%;
max-width: 1600px;
}
a {
color: #383838;
}
/* COMMON */
.normal {
font-weight: normal;
}
.italic {
font-style: italic;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.uppercase {
text-transform: uppercase;
}
.red {
color: #aa0301;
}
.bold {
font-weight: bold;
}
.center-margin {margin: 0 auto;}
.l-spacing1 {
letter-spacing: 1px;
}
.l-spacing2 {
letter-spacing: 2px;
}
.roboto{font-family: 'Roboto', 'Lato', sans-serif}
.lato{font-family: 'Lato', 'Roboto', sans-serif}
.mt {margin-top: .5em;}
.mt2 {margin-top: 1em;}
.mb {margin-bottom: .5em;}
.mb2 {margin-bottom: 1em;}
:focus {
outline: none !important;
}
.flex-top {align-self: flex-start;}
a:focus, a:hover {
text-decoration: none;
}
.u-bg-gray-40::before, .u-bg-gray-40 {
background-color: #aa0301;
}
.c-button:hover.u-bg-gray-40 {
background-color: #880000;
}
button.c-button.u-bg-gray-40.u-color-gray-10.u-icon-cross.c-control-group__button::before, button.c-button.u-bg-gray-40.u-icon-cross::before {
background-color: transparent;
}
.c-button.large-border-button {
text-transform: uppercase;
font-size: 1.5em;
font-weight: 700;
color: #383838;
background-color: #fff;
border: solid 3px #383838;
border-radius: 0;
padding-right: 1.7em;
}
.c-button.large-border-button span {
font-size: .8em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: .75em;
}
.c-button.large-border-button:hover {
background: #fff !important;
color: #545454;
border: solid 3px #545454;
box-shadow: 0 23px 5px -20px #a9a9a9;
}
.overflow-hidden {overflow: hidden;}
@media screen and (max-width: 960px) {.mobile-padding {padding: 0 1em;}}
/* main content header margin fix */
#js-WISH .o-layout__item.u-width-12.u-width-9--l, #js-WLST .o-layout__item.u-width-12.u-width-9--l, #js-WLED .o-layout__item.u-width-12.u-width-9--l, #js-WLAD .o-layout__item.u-width-12.u-width-9--l{
margin-top: 1.2em;
}
/* hide locations */
/*#js-WLST .locationM, #js-WISH .locationM, #js-WLED .locationM, #js-WLST .locationM, #js-WPCK .locationM {display: none;}
*/
/* transitions & animations */
/* .5s */
ul.aboutUsDrop li, li.aboutUs:hover a.aulink, .c-navigation__list .c-navigation__link.mLink, .c-navigation__row.is-hidden.oDrops a.c-navigation__link, .logo, .m-logo, .mLinkList span.c-navigation__link-carat, ul.aboutUsDrop li a, .hp-featured-product img, .hp-featured-product .hp-fp-title, .inventoryNavImage img, .hp-featured-category a img, .hp-featured-category a:after, .hp-featured-category p, .c-button.large-border-button span, .hp-featured-product .flex-center, .footer-location img, .subCat .x-product-list__image, .subCat img, .x-product-list__name, .prod img, .sfnt-gallery-container .slick-next, .sfnt-gallery-container .slick-prev, .staff-bio.bio-link:hover, .bio-contact:hover {
transition: all 500ms ease-in-out;
}
.product-list-container {
transition: all 250ms ease-in-out;
}
/* cubic */
ul.aboutUsDrop, .c-navigation__row.InventoryNav, ul.c-navigation__row.is-hidden.oDrops {
transition: all 250ms cubic-bezier(.4, .01, .1, 1);
transition-delay: 300ms;
}
/*::::::::: Header :::::::::/*
/*top bar NEW */
section.t-site-header__top-navigationND {
position: absolute;
top: 0;
right: 0;
z-index: 5;
}
.t-site-header__links .x-transfigure-navigation__footer-link, .top-phone {
font-size: 10px;
color: #2d2d2d;
font-weight: 900;
}
.t-site-header__links [class^="u-icon-"] {
font-size: 1rem;
}
/*top bar */
.t-site-header__top-navigation .t-site-header__basket-link-quantity {
background-color: white;
box-shadow: inset -1px 1px 3px #ccc;
color: #383838;
text-shadow: none;
}
.t-site-header__links .o-layout__item {
padding: 0 1rem;
line-height: 2.75em;/*cursor: pointer;*/
margin-top: .5em;
}
.top-phone {
max-width: 175px;
}
.top-b-left {
border-left: 1px solid #820000 !important;
}
.u-bg-gray-50::before, .u-bg-gray-50 {
background-color: #c10000;
}
li.aboutUs ul {
list-style: none;
}
li.aboutUs:hover ul.aboutUsDrop {
left: auto;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
ul.aboutUsDrop {
position: absolute;
background: #ffffff;
margin: 0;
box-shadow: 0 8px 13px -8px #000;
opacity: 0;
left: auto;
font-size: .85em;
font-weight: 900;
pointer-events: none;
transform: translateY(-5%);
}
ul.aboutUsDrop li:first-child {
padding-top: .25em;
}
ul.aboutUsDrop li:last-child {
padding-bottom: .5em;
}
ul.aboutUsDrop li a {
width: 100%;
height: 100%;
line-height: 3.5em;
padding: 0 1.25em;
display: block;
color: #2b2b2b;/*transition: color ease-out 0.1s;*/
}
ul.aboutUsDrop li a:hover {
background: #eaeaea;
transition: color ease-out 0.1s;
}
a.aulink {
position: relative;
}
li.aboutUs:hover a.aulink {
opacity: .75;
}
.aulink:after, .mLink:after {
content: "";
width: 0;
height: 2px;
background: #eb1d2a;
opacity: 0;
bottom: -3px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transition: all 250ms ease-in-out;
}
.hp-featured-product .flex-center a:after {
content: "";
width: 0;
height: 2px;
background: #eb1d2a;
opacity: 0;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
margin-top: 1.75em;
}
li.aboutUs:hover .aulink:after, .mLinkList:hover .mLink:after {
width: 100%;
opacity: 1;
}
.hp-featured-product .flex-center:hover a:after {
width: 50%;
opacity: 1;
}
/*::::::::: HEADER :::::::::*/
.t-site-header__masthead {
padding: 0;
font-size: 0.8rem;
}
.t-site-header__masthead-links [class^="u-icon-"] {
font-size: 1.15rem;
}
.t-site-header__basket-link-quantity--mobile {
z-index: 1;
}
.logo, .m-logo {
margin: 10px 0;
opacity: 1;
}
img.logo {
max-width: 280px;
width: 100%;
}
@media screen and (max-width: 768px) {img.logo {max-width: 220px; width: 100%;}}
.logo:hover, .m-logo:hover {
opacity: .7
}
aside.o-layout__item.sidebarNav {
display: none;
}
.t-storefront-about__brief.u-text-constrain {
line-height: 1.667;
text-align: left;
font-weight: 500;
font-size: 1em;
color: black;
max-width: 52em;
}
.t-site-header__search-form {
border-right: none;
border-left: none;
}
.hp-fp-title {
font-size: 1.2em;
}
#js-SFNT main.o-wrapper.t-main-content-element/*, #js-CTGY main.o-wrapper.t-main-content-element, #js-CTGY_SUB_SUB main.o-wrapper.t-main-content-element, #js-SRCH main.o-wrapper.t-main-content-element, #js-WEBU main.o-wrapper.t-main-content-element*/ {
padding: 0 .5em;
}
.t-storefront-about .c-heading-charlie {
color: #aa0301;
}
.inventoryNavImageDefault img, .inventoryNavImage img {
border-radius: 30px 5px;
box-shadow: -13px 40px 5px -38px #0000004a;
}
@media screen and (min-width: 960px) {
.hp-fp-title {
font-size: 1.5em;
}
.navBorder {
/*position: relative;
height: 2px;
width: 100%;
display: block;
background: #cd0000;
margin: .5em 1em 0 0em;
margin: 0;*/
}
.t-site-header__masthead {
max-height: 219px;
/*overflow: hidden;*/
}
.t-site-header__masthead .o-layout--align-center {
align-items: normal;
}
.x-fasten-header--is-active .t-site-header__masthead .o-layout--align-center {
align-items: center;
}
.t-site-header__search-form {
margin-bottom: 0;
position: relative;
border: 1px solid #eaeaea;
}
.logo {
padding: 10px 0px 8px 18px;
margin: 0;
}
.o-layout__item.LogoContainer {
width: 350px;
flex-basis: 350px;
max-width: 342px;
padding: 1em 1.5em;
align-items: normal;
}
.o-layout__item.u-hidden.u-shown--l.HeaderGalleryContainer {
height: 100%;
padding: 0;
}
.galleryTcontainer {
position: relative;
width: 50%;
float: left;
height: 219px;
background-position-x: center;
}
.galleryTcontainer div {
position: absolute !important;
width: 100% !important;
height: 100%;
top: 0 !important;
left: 0 !important;
background-position: center;
background-size: cover;
}
.galleryTcontainer.left {
width: 100%
}
.galleryTcontainer.right {
border-left: solid 5px #fff;
width: 50%;
display: none;
}
.galleryTcontainer.rightM {
display: none;
border-left: solid 5px #fff;
width: 33.33333333333%;
}
.galleryTcontainer.right, .galleryTcontainer.rightM, .galleryTcontainer.left {
opacity: 0;
transition: .75s all
}
.t-site-header {
border-bottom: none;
}
.galleryTcontainer.left.slick-initialized, .galleryTcontainer.right.slick-initialized, .galleryTcontainer.rightM.slick-initialized {
opacity: 1
}
/*SFNT */
#js-SFNT .o-layout__item.mainContent {
max-width: calc(100% - 359px);
padding-left: 0;
}
.o-layout-padding-fix {
padding: 0 1em;
}
.sfnt-header {overflow: hidden;}
h3.x-category-tree__heading.c-heading-echo.u-text-bold.u-text-uppercase {
/* DELETE IF APPROVED
position: absolute;
background: #aa0301;
background: linear-gradient(to bottom, #a90b07 0%, #a90b07 59%, #880000 100%);
width: 104%;
clear: both;
font-weight: normal;
color: #fff;
padding: 0 2em 0;
line-height: 2.5em;
font-size: 13px;*/
background: #eaeaea;
width: 100%;
font-weight: 700;
color: #000;
padding: 0 .4em 0;
line-height: 2.5em;
font-size: 1.2em;
position: relative;
display: block;
}
.x-category-tree__title {
position: relative;
display: block;
margin-top: 1.25em;
}
/*.x-category-tree__title::before {
content: '';
position: absolute;
top: 2em;
right: -14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 14px 7px 0;
z-index: 0;
border-width: 6px 14px 0 0px;
border-color: #d20f0d transparent transparent transparent;
}*/
a.button-arrow, .button-arrow a {
background: url(/images/button-arrow.gif) no-repeat;
width: 29px;
height: 34px;
display: block;
text-indent: -9999px;
}
a:hover.button-arrow, .button-arrow a:hover {
background-position: 0 -34px;
}
.view-latest-announcements .view-content {
padding: 0 1em;
border-bottom: solid 1px #ccc;
margin-bottom: 5px;
}
.t-site-header__masthead {
max-width: 100%;
}
.t-site-navigation__wrap {
max-width: 100%;
}
.o-layout__item.staff-photo img {
width: 100%;
}
/* SFNT Featured Products */
.hp-featured-product-container {
margin-bottom: 1.75em;
}
.hp-featured-product .flex-center {
position: relative;
}
.hp-featured-product img {width: 100%;}
.hp-featured-product:hover img {
opacity: .3;
}
.hp-fp-title {
position: absolute;
width: 100%;
/*left: 8px;*/
text-transform: uppercase;
font-size: 2em;
opacity: 0;
padding: 0 1.2em;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
}
.hp-featured-product:hover .hp-fp-title {
opacity: 1
}
.hp-featured-product .flex-center {
overflow: hidden;
}
.hp-featured-product .flex-center:hover {
box-shadow: 0 23px 5px -20px #a9a9a9;
}
.hp-featured-product:hover img {
/*transform: scale(1.02);*/
}
}
@media screen and (min-width: 960px) {
.t-storefront-about {
padding: 0 1em 0 2.5em;
}
/*section.o-layout.sfnt-header {
border: solid 2px #a80301;
}*/
}
.t-storefront-about p {
padding: 0 1em;
}
.o-layout__item.staff-photo {
max-width: 820px;
margin: 0 auto;
}
.o-layout__item.staff-photo img {
box-shadow: 0 20px 10px -12px #c7c7c7;
}
@media screen and (min-width: 1200px) {
.o-layout__item.staff-photo, .o-layout__item.t-storefront-about {
width: 50%;
max-width: 50%;
}
section.o-layout.sfnt-header {
/*flex-direction: row-reverse;*/
}
.o-layout__item.staff-photo {
display: flex;
align-items: center;
max-width:100%;
}
.o-layout__item.staff-photo img {
border-radius: 0 3em 3em 0em;
box-shadow: 0 20px 10px -12px #c7c7c7;
}
}
/*::::::::: main menu :::::::::*/
ul.InventoryNavColumn {
list-style: none;
margin: 0;
}
ul.InventoryNavColumn.InventoryNavColumnFeatured {
display: none;
}
span.inventoryNavImage {
display: none;
}
img.m-logo {
width: 100%;
max-width: 200px;
}
.c-navigation__link.m-logoC {
padding-right: 0;
}
.t-site-navigation {
margin-bottom: 0;
}
.t-site-navigation__wrap {
font-size: .8em;
}
.InventoryNavColumn {
list-style: none;
}
a.x-transfigure-navigation__footer-link {
font-weight: 900;
}
.o-layout__item.u-text-center.top-phone.top-b-left {
padding: 0 1em 0 2rem;
}
@media screen and (max-width: 1159px) {
.inventoryNavImageDefault, .inventoryNavImage {
display: none !important;
}
}
@media screen and (max-width: 59.9em) {
.close-menu-background {
position: absolute;
/*z-index: 1;*/
width: 100%;
height: 100%;
top: 0;
bottom: 0;
z-index: -1;
}
}
@media screen and (max-width: 60em) {
.t-site-header__basket-link-quantity--mobile {
z-index: 0;
}
}
@media screen and (min-width: 60em) {
.x-transfigure-navigation__row {
background: #cd0000;
background: #c10000;
/*background: #a90b07;*/
}
ul.c-navigation__row.InventoryNav {
position: absolute;
display: table;
opacity: 0;
transform: translateY(-5%);
pointer-events: none;
background: #fff;
padding: 1em 2em;
min-width: calc(100% - 230px);
width: calc(100% - 399px);
box-shadow: 0 8px 13px -8px #000;
z-index: 3;
}
.c-navigation__link.mLink {
/*margin-top: 2.5em;*/
}
.t-site-navigation__wrap {
font-size: .75em;
}
a.c-navigation__link.max-width {
max-width: 280px;
white-space: pre-wrap;
line-height: 1.75em;
padding: .25em;
}
.x-transfigure-navigation__wrap.nav-e-container {
width: 100%;
max-width: 100vw;
margin-right: auto;
margin-left: auto;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
padding: 0;
list-style: none;
}
.x-transfigure-navigation__content.o-layout__item {
max-width: 100% !important;
align-self: flex-end !important;
margin-bottom: 4px;
}
.c-navigation__list.mLinkList.desktop-logo {
padding-left: 0;
}
}
@media screen and (min-width: 1000px) {
.t-site-navigation__wrap {
font-size: .8em;
}
.t-site-header__links .x-transfigure-navigation__footer-link, .top-phone {
font-size: 12px;
color: #2d2d2d;
font-weight: 900;
}
}
@media screen and (min-width: 1200px) {
img.m-logo {
max-width: 200px;
}
}
@media screen and (min-width: 1300px) {
img.m-logo {
max-width: 230px;
}
.t-site-navigation__wrap {
font-size: .875em;
}
}
@media screen and (min-width: 60em) {
.t-site-navigation {
border-bottom: none;
max-width: 1600px;
margin: 0 auto .5em;
padding: 0 .5em;
}
.c-navigation__list {
position: unset;
flex: unset;
}
.x-transfigure-navigation {
font-family: 'Lato,''Roboto', sans-serif;
}
.x-transfigure-navigation .c-navigation__link-carat {
width: 20px;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.mLinkList:hover span.c-navigation__link-carat {
padding-left: 10px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.x-transfigure-navigation__content {
padding-top: 0;
padding-bottom: 0;
}
.x-transfigure-navigation__content ul.c-navigation__row.x-transfigure-navigation__row {
justify-content: space-between;
}
.x-transfigure-navigation .c-navigation__list:hover > .c-navigation__row {
display: table;
pointer-events: auto;
transform: translateY(0);
}
.x-transfigure-navigation__row .c-navigation__row {
display: unset;
}
ul.InventoryNavColumn {
list-style: none;
margin: 0;
}
.c-navigation__link {
padding: 0em 1em;
line-height: 3em;
}
.c-navigation__list .c-navigation__link.mLink {
position: relative;
cursor: pointer;
background: transparent;
/*font-weight: 400;*/
font-weight: 600;
/*text-shadow: 1px 1px 5px #000;*/
color: #ffffff;
letter-spacing: 1px;
z-index: 4;
}
ul.c-navigation__row.x-transfigure-navigation__row:hover .c-navigation__list .c-navigation__link {
color: rgba(255, 255, 255, 0.8);
}
ul.c-navigation__row.x-transfigure-navigation__row .c-navigation__list:hover .c-navigation__link {
color: #ffffff;
}
/* inventory dropdown */
ul.InventoryNavColumn {
list-style: none;
margin: 0;
width: 24%;
width: 33.333%;
float: left;
}
.c-navigation__list.spacer.u-hidden.u-shown--l {
height: 3em;
width: 1px;
/*background-color: #860800;*/
border-right: solid 1px #9c0900;
border-left: solid 1px #dc0d00;
}
.c-navigation__list.spacer.u-hidden.u-shown--l:first-of-type, .c-navigation__list.spacer.u-hidden.u-shown--l:last-of-type {
background-color: #c10000;
}
@media screen and (min-width: 1000px) {
ul.c-navigation__row.InventoryNav {
min-width: calc(100% - 250px);
}
}
@media screen and (min-width: 1100px) {
}
@media screen and (min-width: 1200px) {
ul.c-navigation__row.InventoryNav {
padding: 1em 0 1em 2em;
}
ul.c-navigation__row.InventoryNav {
min-width: calc(100% - 275px);
}
ul.InventoryNavColumn {
width: 22%;
}
ul.InventoryNavColumn.InventoryNavColumnFeatured {
width: 29%;
width: 34%;
display: block;
padding-right: 1em;
margin: 0 !important;
position: absolute;
right: 0;
}
span.inventoryNavImage {
position: absolute;
display: none;
width: 34%;
right: 0;
top: 1.25em;
z-index: 1;
padding-right: 1em;
}
.inventoryNavImageDefault {
position: absolute;
display: block;
width: 33.6%;
right: 0;
top: 1.25em;
z-index: 0;
padding-right: 1.03em;
}
/*.inventoryNavImage img {opacity: 0;}
.InventoryNavColumn li.c-navigation__list:hover > .inventoryNavImage {
display: block !important;
}
.InventoryNavColumn li.c-navigation__list:hover > .inventoryNavImage img {
opacity: 1;
}*/
}
@media screen and (min-width: 1300px) {
ul.c-navigation__row.InventoryNav {
min-width: calc(100% - 370px);
}
}
@media screen and (min-width: 1400px) {
ul.c-navigation__row.InventoryNav {
min-width: calc(100% - 390px);
}
}
@media screen and (min-width: 1500px) {
ul.c-navigation__row.InventoryNav {
min-width: calc(100% - 400px);
}
}
@media screen and (min-width: 960px) and (max-width: 1060px) {
.custom-media-1 {
display: none;
}
}
.x-transfigure-navigation .c-navigation__list:hover > .c-navigation__row.InventoryNav {
opacity: 1;
transform: translateY(3px);
pointer-events: auto;
}
.InventoryNav a.c-navigation__link {
position: relative;
white-space: normal;
line-height: 1em;
font-weight: 700;
/*font-family: 'Lato','Roboto', sans-serif;*/
font-family: 'Roboto', sans-serif;
color: #696969 !important;
display: inline-block;
padding: .75em 0 !important;
font-size: 12px;
}
.InventoryNav a.c-navigation__link:hover {
background-color: #fff;
color: #0f0f0f !important;
transition: color ease-out 0.1s;
}
.InventoryNav a.c-navigation__link:after, .hp-featured-category a:after, .hp-l-title:after {
position: absolute;
left: 0;
right: 0;
content: "";
width: 0;
height: 2px;
background: #eb1d2a;
opacity: 0;
bottom: 5px;
margin: 0 auto;
transition: all 250ms ease-in-out;
}
.hp-l-title:after {
bottom: 0;
}
.hp-featured-category a:after {
bottom: 24px;
left: 1em;
}
.hp-featured-category a:after, .hp-l-title:after,.hp-featured-product .flex-center a:after {
transition: all 500ms ease-in-out;
-webkit-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.InventoryNav a.c-navigation__link:hover:after {
width: 100%;
opacity: 1;
}
.hp-featured-category a:hover:after, .footer-location:hover .hp-l-title:after {
width: 25%;
opacity: 1;
}
.hp-featured-category a:hover p {
transform: translateY(-2px);
}
ul.InventoryNavColumn.InventoryNavColumnFeatured img {
max-width: 420px;
width: 100%;
}
/* other nav dropdowns */
li.c-navigation__list.has-child-menu.oDropsLI {
position: relative;
}
ul.c-navigation__row.is-hidden.oDrops {
left: 0;
opacity: 0;
pointer-events: none;
transform: translateY(-5%);
z-index: 3;
}
.x-transfigure-navigation .c-navigation__list:hover > .c-navigation__row.oDrops {
opacity: 1;
transform: translateY(3px);
box-shadow: 1px 1px 0.25em 0 rgba(15, 15, 15, 0.5);
box-shadow: 0 8px 13px -8px #000;
}
ul.c-navigation__row.is-hidden.oDrops a.c-navigation__link {
background: #ffffff;
font-family: 'Lato', 'Roboto', sans-serif;
font-weight: 900;
color: #737373 !important;
font-size: .92em;
}
ul.c-navigation__row.is-hidden.oDrops a.c-navigation__link:hover {
background: #eaeaea;
color: #383838 !important;
}
/* Sticky Header */
.x-fasten-header {
padding: 1rem 1rem;
}
}
/* mini basket */
.x-mini-basket__cta .u-bg-gray-40 {
background-color: #a90b07;
}
/*products*/
span.x-search-preview__item-price.u-text-right, span.u-text-bold.x-mini-basket__item-price, .x-mini-basket__total {
/*display: none;*/
}
/*::::::::: main header :::::::::*/
.needHelp {
display: none;
}
#goUpButton {
display: none;
}
.x-fasten-header--is-active .x-fasten-header {
margin: 0
}
@media screen and (min-width: 1600px) {
.needHelp {
position: fixed;
display: block;
/*bottom: 2.5em;
left: 2em;*/
bottom: 0em;
left: 0em;
z-index: 5;
/*padding: 1em 1em;*/
padding: 1em 1.25em .75em 1em;
/*background: rgba(0, 0, 0, 0.4);*/
color: white;
font-size: .85em;
/*border-radius: 3px;*/
letter-spacing: .03em;
cursor: pointer;
/*background: rgb(170, 3, 1);*/
background: rgba(0, 0, 0, 0.51);
/* border-radius: 0 47px 0 0; */
border-radius: 0 60px 0 0;
display: none;
}
.needHelp ul {
list-style: none;
margin: 0;
padding: 0;
}
}
/*::::::::: CTGY ::::::::*/
.x-product-list, .subCat-x-product-list {
justify-content: center;
}
.subCat .x-product-list__name {
font-weight: bold;
}
.subCat .x-product-list__figure, .prod .x-product-list__figure {position:relative;}
.subCat:hover img, .prod:hover img {
opacity: .8;
/* box-shadow: 0 23px 5px -20px #a9a9a9;*/
}
article.b-post-article h2 {
position: relative;
}
.subCat figure:after, .prod figure:after, article.b-post-article h2:after {
position: absolute;
left: 0;
right: 0;
content: "";
width: 0;
height: 2px;
background: #eb1d2a;
opacity: 0;
bottom: 0;
margin: 0 auto;
transition: all 500ms ease-in-out;
-webkit-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.subCat:hover {z-index:2;}
.subCat:hover .x-product-list__name, .prod:hover .x-product-list__name{
transform: translateY(-5px);
}
.subCat:hover figure:after, .prod:hover figure:after, article.b-post-article:hover h2:after {
width: 25%;
opacity: 1;
}
.x-product-list__link .x-product-list__name {
font-weight: 700;
}
#js-CTGY .x-hero img {
width: 100%;
}
#js-CTGY ul.c-form-list.x-facets {
padding: 0 .5em;
}
.o-layout__item.x-product-list__item.prod {
display: flex;
justify-content: center;
align-items: self-start;
}
span.prod-image-container {
/*height: 250px;*/
position: relative;
display: block;
margin-bottom: .5em;
}
.prod-image-container .x-product-list__image {
max-height: 100%;
display: block;
margin: 0 auto;
position: relative;
/*top: 50%;
transform: translateY(-50%);*/
}
/*::: SUB SUB CATS :::*/
h2.c-heading-charlie.c-heading--keyline.u-text-uppercase.c-sub-heading {
font-size: 1.65em;
margin-top: 1em;
margin-bottom: 1.7em;
}
@media screen and (max-width: 400px) {
span.prod-image-container {
/*height: 160px;*/
}
#js-CTGY .x-hero {
margin-bottom: .75em;
}
#js-CTGY .t-storefront-about.CtgyWTitleImage.u-shown--l.aos-init.aos-animate {
display: none;
}
}
@media screen and (max-width: 959px) {
.CtgyWTitleImage, .mobile-title {
margin-top: 1em;
}
#js-CTGY ul.x-collapsing-breadcrumbs__list {
text-align: center;
}
#js-CTGY .x-hero {
margin-bottom: 1em;
}
.x-product-list, .subCat-x-product-list {
justify-content: center;
}
}
@media screen and (min-width: 959px) AND (max-width: 959px) {
/*section.o-layout.u-grids-2.u-grids-3--l.subCat-x-product-list {
padding-left: .75em;
}*/
}
@media screen and (min-width: 700px) {
span.prod-image-container {
/*height: 300px;*/}
}
@media screen and (min-width: 960px) {
/*.alternateSubCatImageDisplay.subcatHoverImage {
display: block !important;
}
.alternateSubCatImageDisplay img {
opacity: 0;
transition: all 500ms ease-in-out;
transition-delay: 500ms;
}*/
section.o-layout.u-grids-2.u-grids-3--l.subCat-x-product-list {
padding-left: .75em;
}
.alternateSubCatImageDisplay:hover img {
opacity: 1;
}
.alternateSubCatImageDisplay {
position: absolute;
top: 40px;
width: 100%;
border: solid 4px #fff;
left: 0;
}
.alternateSubCatImageDisplay img{
opacity: 1 !important;
}
aside.o-layout__item.sidebarNav {
width: 100%;
max-width: 327px;
background: #e1e1e1;
margin: 0;
padding-left: 0;
display: block;
}
#js-CTGY .o-layout__item.mainContent, #js-SRCH .o-layout__item.mainContent, #js-CTGY2 .o-layout__item.mainContent {
max-width: calc(100% - 343px);
padding-left: 1em;
}
#js-CTGY .t-storefront-about, #js-CTGY2 .t-storefront-about {
padding: 0 1em;
}
#js-CTGY .t-storefront-about.CtgyWTitleImage, #js-CTGY2 .t-storefront-about.CtgyWTitleImage {
transform: translateY(-1.5em);
margin-bottom: -2em !important;
padding-bottom: 0;
}
#js-CTGY .t-storefront-about.TitleWSubANDImage, #js-CTGY2 .t-storefront-about.TitleWSubANDImage {
transform: translateY(-3em);
margin-bottom: -2em !important;
}
#js-CTGY .t-storefront-about.CtgyWTitleImage h1.c-heading-charlie, #js-CTGY .t-storefront-about.TitleWSubANDImage h1.c-heading-charlie {
background: white;
padding: .25em 1em;
}
#js-CTGY .desktop-filters, #js-SRCH .desktop-filters {
padding: 0 1em;
}
/* SIDEBAR MENU LINKS */
ul.x-category-tree__row {
padding-left: .5em;
}
.x-category-tree__link:not(.x-category-tree__link--current):hover {
text-decoration: none;
}
.x-category-tree__link {transition: all 200ms ease-in-out;}
.x-category-tree__link:not(.x-category-tree__link--current):hover {
transform: translateX(5px);
opacity: .7;
}
.x-category-tree__link.x-category-tree__link--current, .x-category-tree__list--level-2 .x-category-tree__link.x-category-tree__link--current {
color: #eb1d2a;
}
.x-category-tree__list--level-2 .x-category-tree__link {
color: #848484;
}
.x-category-tree__list--level-2:hover .x-category-tree__link {
opacity: 1;
color: #000000;
}
.o-layout__item.product-list-container {
padding-right: 0;
padding-left: 1em;
padding-bottom: 2em;
}
.ctgyAside {
background-color: #f7f7f7;
padding-bottom: 2em;
}
li.x-category-tree__list {
position: relative;
}
span.CatTreeNavImage {
position: absolute;
margin-left: 0px;
left: 100%;
top: calc(-100px + 10px);
width: 300px;
padding: 10px;
background: #eaeaea;
border-radius: 0 6px 6px 0;
box-shadow: 0 20px 5px -19px #9e9e9e;
}
span.CatTreeNavImage:after {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-right-color: #eaeaea;
border-width: 30px;
margin-top: -30px;
}
.product-list-container.sidebarActivated {
opacity: .3;
/*filter: blur(4px);*/
}
.x-category-tree__list.x-category-tree__list--level-1 .x-category-tree__link.test:after {
position: absolute;
left: 0;
/* right: 0;*/
content: "";
width: 0;
height: 2px;
background: #eb1d2a;
opacity: 0;
bottom: 0px;
margin: 0 auto;
transition: all 600ms ease-in-out;
}
.x-category-tree__list.x-category-tree__list--level-1 .x-category-tree__link.test:hover:after {
width: 100%;
opacity: 1;
}
/* Product List */
span.prod-image-container {
/*height: 275px;*/
}
/* Filters */
.t-faceting h3.x-category-tree__heading {
padding-left: .5em;
}
/* Other Menu Items */
img.catalog-preview, img.IV-preview {
box-shadow: 0 16px 8px -4px rgba(0, 0, 0, 0.6);
box-shadow: 0 15px 3px -10px rgba(0, 0, 0, 0.36);
}
}
@media screen and (min-width: 1300px) {
span.prod-image-container {/*height: 350px*/}
}
@media screen and (min-width: 1500px) {
span.prod-image-container {/*height: 400px*/}
}
@media screen and (min-width: 1600px) {
aside.o-layout__item.u-width-12.u-width-3--l.u-width-2point--xw.ctgyAside {
padding-left: 0;
max-width: calc(100% / 12 * 2.5 - 32px);
}
}
/* ctgy loader animation */
.loader-ellips {
font-size: 20px; /* change size here */
position: relative;
width: 4em;
height: 1em;
margin: 10px auto;
}
.loader-ellips__dot {
display: block;
width: 1em;
height: 1em;
border-radius: 0.5em;
background: #C1C1C1; /* change color here */
position: absolute;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
.loader-ellips__dot:nth-child(1), .loader-ellips__dot:nth-child(2) {
left: 0;
}
.loader-ellips__dot:nth-child(3) {
left: 1.5em;
}
.loader-ellips__dot:nth-child(4) {
left: 3em;
}
@keyframes reveal {
from {
transform: scale(0.001);
}
to {
transform: scale(1);
}
}
@keyframes slide {
to {
transform: translateX(1.5em)
}
}
.loader-ellips__dot:nth-child(1) {
animation-name: reveal;
}
.loader-ellips__dot:nth-child(2), .loader-ellips__dot:nth-child(3) {
animation-name: slide;
}
.loader-ellips__dot:nth-child(4) {
animation-name: reveal;
animation-direction: reverse;
}
/*::::::::: PROD :::::::::*/
#js-PROD .x-product-layout-purchase__options-quantity {margin: 0 auto; padding-left: 0;}
.x-product-layout-purchase__options {
justify-content: center;
align-items: center;
}
.x-product-layout-purchase__options-attribute .c-form-label {
font-size: 0.832em;
text-transform: uppercase;
}
@media screen and (min-width: 960px) {
.primary-product-container {
flex-direction: row-reverse;
}
#js-PROD .x-collapsing-breadcrumbs__list {max-width: 1600px;}
.x-product-layout-purchase__name {
margin-bottom: .5rem;
}
}
/*::::::::: WISH LIST / DESIGN BOARD :::::::::*/
/*::::::::: SRCH :::::::::*/
#js-SRCH ul.c-form-list.x-facets {
padding: 0 .5em;
}
h1.ptitle {
margin-top: 1em;
}
@media screen and (max-width: 959px) {
nav.x-category-tree.t-faceting {
padding: 0 1em;
}
}
/*::::::::: footer :::::::::*/
#goUpButton {
position: fixed;
display: block;
bottom: 2.5em;
right: -2.25rem;
z-index: 5;
background: #c10000;
color: white;
padding: 0.3em .6em .1em;
border-radius: 0;
cursor: pointer;
transition: .25s all ease-in-out;
}
#goUpButton.pullIn {
right: 2em;
}
.fullBreaker {
width: 100%;
height: .2em;
height: 3px;
background: #aa0301;
background: linear-gradient(to bottom, #a90b07 0%, #a90b07 59%, #880000 100%);
}
.footer-awards-container {
max-width: 1600px;
margin: 0 auto;
width: 100%;
padding: 1em .5em;
}
p.hp-l-title {
margin-top: .25em;
position: relative;
}
.locationM {
margin: 2em 0;
}
.locations {
/* margin: 3em .5em .75em;
border-top: solid 1px #ccc; */
text-align: center
}
.footer-locations-container {
margin-top: 1em;
}
.footer-locations-container img {width: 94%;}
.footer-location:hover img {
box-shadow: 0 23px 5px -20px #a9a9a9;
}
footer.o-wrapper.o-wrapper--full.t-site-footer {
z-index: 2;
padding: 0 !important;
}
.hp-featured-category {
position: relative;
}
.hp-featured-category p {
display: inline-block;
text-transform: uppercase;
margin-bottom: .5em;
font-size: 2em;
font-weight: 700;
}
.hp-featured-category img {width: 100%;}
.hp-featured-category a:hover img {
opacity: .9;
box-shadow: 0 23px 5px -20px #a9a9a9;
}
.o-layout.locations {
margin-left: 0px;
padding-right: 1em;
padding-top: 1.5em;
padding-bottom: 1.25em;
box-shadow: inset 0px 13px 17px -8px #0000001f;
}
.o-layout.locations a {
color: #aa0301;
}
.o-layout.locations img {
width: 100%;
margin-bottom: 6px;
}
.locations h2.c-heading-bravo {
text-transform: uppercase;
font-weight: 300;
font-size: 1.8em;
padding-bottom: .25em;
color: #aa0301;
padding-left: 16px;
}
img.footerimg {
margin: auto;
display: block;
}
.mc_signup {
position: relative;
margin: 0 auto;
max-width: 820px;
}
#mc_embed_signup_scroll {
min-height: 60px;
}
.mc_email {
position: absolute;
width: 100%;
height: 3.5em;
padding-left: 1em;
border-style: solid;
font-size: 1em!important;
font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;
display: block;
padding: 0 0.4em;
margin: 0 4% 10px 0;
min-height: 32px;
min-width: 130px;
text-indent: 1em;
}
.mc_subscribe {
position: absolute;
right: 0px;
height: 3.5em!important;
/* border-radius: 0 10px 10px 0!important;*/
font-size: 1em!important;
}
/* FOOTER GRAY / POSSIBLE TEMP */
.grey-spacer {
background-color: #dddddd;
display: block;
width: 100%;
overflow-y: hidden;
}
.newsletter .page-title {
margin-top: 0;
padding-top: 2em;
}
.newsletter {
padding-bottom: 2.75em;
}
#mc_embed_signup input {
background-color: #efefef;
}
.t-global-footer-social-links .c-menu__link {
padding: 1rem;
}
.o-list-inline__item:not(:last-child) {
margin: 0;
}
.m-social-links {
font-size: 2em;
}
/* ::: alternate footer layout ::: */
@media screen and (min-width: 960px) {
.t-site-footer__content.alternateFooter.text-center {
padding-top: 2em;
padding-bottom: 0;
}
section.connectLinksalternate {
font-size: 1.4em;
margin-bottom: 2em;
}
.connectLinksalternate h5.c-menu__title.u-text-uppercase {
font-size: 1em;
}
.alternateQL h5.c-menu__title.u-text-uppercase {
font-size: 1.25em;
}
.alternateQL .c-menu__list {
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
}
.alternateQL .c-menu__list li {
flex: 1 1 auto;
}
.connectLinksalternate .c-menu__list {
display: flex;
margin: 0 auto;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
max-width: 400px;
}
.connectLinksalternate li.o-list-inline__item {
flex: 1 1 auto;
}
}
@media screen and (max-width: 820px) {
#mc_embed_signup input {
border-left: none !important;
border-right: none !important;
}
}
@media screen and (max-width: 860px) {
.mc_email {
border-radius: 0;
border-left: none;
border-right: none;
}
.mc_subscribe {
border-radius: 0!important;
}
}
.newsletter .page-title {
font-size: 2em;
background: 0 0;
font-weight: 700;
margin: 0 auto;
text-align: center;
/*margin-top: 2em;*/
line-height: 1.25em;
text-transform: uppercase;
color: #4e4e4e;
}
p.text-center.newsletter-text {
margin-bottom: 0;
text-transform: uppercase;
margin: .25em.5em;
letter-spacing: .025em;
}
input#mc-embedded-subscribe {
text-transform: uppercase;
letter-spacing: 1px !important;
}
#mc_embed_signup .button {
clear: both;
background-color: #a30201 !important;
border-radius: 0 !important;
}
/*::::::::: product :::::::::*/
span.product-image-container {
display: block;
position: relative;
height: 225px;
}
span.product-image-container .x-product-list__image {
max-height: 100%;
display: block;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.t-featured-products .x-product-list__heading {
margin-bottom: 1.5em;
font-size: 1.5rem;
font-weight: 400;
}
.x-product-list__name, .x-product-list__price {
font-weight: 500;
text-transform: uppercase;
color: #5d5d5d;
}
@media screen and (min-width: 520px) {
span.product-image-container {
height: 290px;
}
}
/*::::::::: extras :::::::::*/
/*login container*/
#WL-login--container {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
overflow-x: hidden;
overflow-y: auto;
background: rgba(0, 0, 0, 0.8);
display: none;
text-align: center;
padding: 0 .5em;
}
.WL-close-button {
top: -36px;
right: -9px;
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
z-index: 1046;
box-shadow: none;
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: white;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace;
user-select: none;
}
.popup-wrapper::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.popup-wrapper {
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.WLContainerBG {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login-popup {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
width: 98%;
width: calc(100% - 6px);
max-width: 450px;
cursor: auto;
box-shadow: 0 16px 16px -10px #000;
background-color: white;
color: #000;
/* text-align: center; */
border-radius: 3px;
border-color: #000;
border-width: 2px;
}
label#l-register_password-error, label#l-register_email-error {
color: red;
font-size: 14px;
}
.error {
color: red;
}
/*search container*/
#WL-Search--container {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
overflow-x: hidden;
overflow-y: auto;
background: rgba(0, 0, 0, 0.8);
display: none;
text-align: center;
padding: 0 .5em;
}
.search-popup {
position: relative;
display: inline-block;
vertical-align: middle;
margin: -180px auto 0;
text-align: left;
z-index: 1045;
width: 98%;
width: calc(100% - 6px);
max-width: 550px;
cursor: auto;
box-shadow: 0 16px 16px -10px #000;
background-color: white;
color: #000;
/* text-align: center; */
border-radius: 3px;
border-color: #000;
border-width: 2px;
}
.search-popup li.c-form-list__item.c-form-list__item--full.c-control-group.u-flex {
height: 4.5em;
}
/* ::::: MEDIA MODAL ::::: */
.c-mini-modal__element--video {
max-width: calc(100vh * (16 / 9));
max-width: 1200px;
overflow: hidden;
}
/* ::::: SLICK SLIDER ::::: */
/* SFNT Slider */
.sfnt-gallery-container .x-carousel__button {
/*background-color: rgba(255, 255, 255, 0.85);*/
background-color: #fff;
padding: 8px 0;
cursor: pointer;
font-size: 2.25em;
color: #4a4a4a;
}
.sfnt-gallery-container:hover .x-carousel__button-right {
right: -5px;
opacity: 1;
border-radius: 2px 0 0 2px;
}
.sfnt-gallery-container .x-carousel__button-right {
right: -8px;
opacity: 0;
}
.sfnt-gallery-container:hover .x-carousel__button-left {
left: 12px;
border-radius: 0 2px 2px 0;
opacity: 1;
}
.sfnt-gallery-container .x-carousel__button-left {
left: 9px;
opacity: 0;
}
.sfnt-gallery-container .slick-dotted.slick-slider {
margin-bottom: 35px;
}
.sfnt-gallery-container .slick-dots li button::before {
content: " ";
}
.sfnt-gallery-container .slick-dots li button {
width: 12px;
height: 12px;
}
.sfnt-gallery-container .slick-dots li button {
background: #c1c1c1;
background-color: rgba(29,29,32,.3);
/*-ms-transform: rotate(45deg);
transform: rotate(45deg);*/
}
.sfnt-gallery-container li.slick-active button, .sfnt-gallery-container li.slick-active button:hover {
background: #eb1d2a;
/*-ms-transform: rotate(135deg);
transform: rotate(135deg);*/
-ms-transform: rotate(90deg);
transform: rotate(90deg);
transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.sfnt-gallery-container .slick-dots li {
margin: 9px 8px 0 8px;
}
.sfnt-gallery-container.slick-dotted.slick-slider {
margin-bottom: 1.6em;
}
.sfnt-gallery-container.slick-dotted.slick-slider .slick-dots {
display: none !important;
}
.sfnt-gallery-container .slick-track {
margin-bottom: 1.6em;
}
.sfnt-gallery-container .slick-slide {
box-shadow: 0 30px 3px -27px #ccc;
}
@media screen and (min-width: 768px) {
.sfnt-gallery-container .slick-dots li button:before {
font-size: 12px; }
}
@media screen and (min-width: 960px) {
.sfnt-gallery-container .slick-list {
/*border-radius: 30px 5px;*/
}
}
/* :::: product sliders :::: */
.slick-prev:before, .slick-next:before {
color: #18581d;
}
.newest .slick-slide, .related-prods .slick-slide, .recent-prods .slick-slide {
display: inline-block;
width: 24.5%;
padding: 5px;
}
.newest .slide-buffer, .related-prods .slide-buffer, .recent-prods .slide-buffer {
margin: 0 10px;
}
.newest .slick-slider, .related-prods .slick-slider, .recent-prods .slick-slider {
max-height: 405px;
}
.newest {overflow: hidden;
}
.newest .x-carousel__button-left {
left: 0px;
}
.newest .x-carousel__button-right {
right: 0px;
}
.related-content img[alt]:after {
text-indent: -99999px;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
content: attr(alt);
}
.x-carousel__button-left {
left: -30px;
}
.x-carousel__button-right {
right: -30px;
}
.x-carousel__button:focus {
outline: none;
cursor: pointer;
}
.related-prods img {
cursor: pointer !important;
}
.newest .slick-slide img, .related-prods .slick-slide img, .recent-prods .slick-slide img {
display: block;
max-height: 250px;
margin: 0 auto;
}
.newest-link {
max-height: 300px;
position: relative;
height: 350px;
display: block;
}
.newest-image {
max-height: 100%;
position: relative;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
/* Locations */
.location-information {
align-self: flex-start;
}
.responsive-map-container {
position: relative;
overflow: hidden;
/* padding-bottom: 56.25%;*/
height: 430px;
}
.responsive-map {
left: 0;
top: 0;
width: 100%;
position: absolute;
height: 430px;
}
.o-layout__item.staff-bio {
margin-bottom: 1em;
}
.title-position {
position: relative;
display: block;
}
span.biospacer {
padding: 5px;
}
.staff-bio.bio-link, .bio-contact {
cursor: pointer;
}
.staff-bio.bio-link:hover, .bio-contact:hover {
opacity: .8;
}
.location-about-image {padding-left: 1em; float: right;}
@media screen and (max-width: 764px) {
.mobile-padding {
padding: 0 1em;
}
.responsive-map-container {
margin-left: 1em;
}
.location-about-image {padding-left: 0em; width: 100%;}
}
/* ::::: STAFF BIO POPUPS :::::*/
.StaffInfoOuterContainer, .StaffContactOuterContainer {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
overflow-x: hidden;
overflow-y: auto;
background: rgba(0,0,0,0.8);
}
.StaffInfoShell {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.StaffInfoShell:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
#StaffInfoContainer, #StaffContactContainer {
position: relative;
padding: 1.5em 1.5em 2em;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
width: 98%;
width: calc(100% - 6px);
max-width: 820px;
overflow-y: auto;
max-height: 500px;
cursor: auto;
box-shadow: 0 16px 16px -10px #000;
background-color: #ffffff;
color: #3c3c3c;
}
div#StaffContactContainer {
max-width: 350px;
text-align: center;
}
#StaffInfoContainer h2, #StaffContactContainer h2 {
width: 100%;
display: block;
text-align: center;
font-size: 2em;
}
#StaffInfoContainer h2::after, #StaffContactContainer h2::after {
display: block;
width: 25%;
height: calc(16px / 8);
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0em);
-ms-transform: translate(-50%, 0em);
transform: translate(-50%, 0em);
background-color: #c0c0c0;
content: "";
}
.StaffInfoOuterContainer button.mfp-close {
top: 0;
right: 0;
position: absolute;
width: 44px;
height: 44px;
color: #7b7b7b !important;
font-size: 34px;
}
.StaffContactContainer button.mfp-close {
top: 0;
right: 0;
position: absolute;
width: 44px;
height: 44px;
color: #7b7b7b !important;
font-size: 34px;
}
button.mfp-close {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}
.closeContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.StaffInfoContainer p {
/*text-indent: 1.5em;*/
line-height: 1.75em;
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* SLIDER THEME */
.slick-loading .slick-list {
background: #fff url("/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
src: url("/fonts/slick.eot");
src: url("/fonts/slick.eot?#iefix") format("embedded-opentype"), url("/fonts/slick.woff") format("woff"), url("/fonts/slick.ttf") format("truetype"), url("/fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
.slick-prev, .slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
outline: none;
background: transparent;
color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before, .slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: white;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir="rtl"] .slick-prev {
left: auto;
right: -25px;
}
.slick-prev:before {
content: "←";
}
[dir="rtl"] .slick-prev:before {
content: "→";
}
.slick-next {
right: -25px;
}
[dir="rtl"] .slick-next {
left: -25px;
right: auto;
}
.slick-next:before {
content: "→";
}
[dir="rtl"] .slick-next:before {
content: "←";
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: black;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
color: black;
opacity: 0.75;
}
/* ::::: *BLOG :::::*/
.masonry-layout {
column-count: 3;
column-gap: 0;
}
.masonry-layout__panel {
break-inside: avoid;
padding: 5px;
}
.masonry-blog-content {
padding: 10px;
border-radius: 10px;
}
article.b-post-article h2 a, article.b-post-article img {
transition: all 500ms ease-in-out;
display: block;
}
article.b-post-article:hover h2 a {
transform: translateY(-5px);
}
article.b-post-article:hover img {opacity: .85}
/* CLS FIXES */
@media screen and (max-width: 640px) {
.t-site-header {
border-bottom: 1px solid #eaeaea;
min-height: 160px;
}
}