Typography
h1
<>
h1 {
background-color: none;
border-color: none;
border-radius: none;
border-style: none;
border-width: none;
box-shadow: none;
box-sizing: border-box;
color: #333;
cursor: auto;
display: block;
font-family: Montserrat,Arial,Helvetica,sans-serif;
font-size: 28px;
font-weight: 400;
letter-spacing: 0.25px;
line-height: 1.5;
margin: 2.28571rem 0 .78571rem;
outline: none;
overflow: visible;
padding: 0;
position: static;
text-align: left;
text-decoration-color: none;
text-decoration-line: none;
text-decoration-style: none;
text-transform: none;
transition: none;
vertical-align: baseline;
@include breakpoint("medium") {// 801px and up
font-size: 32px;
}
This is the default h1. Strong Text Small text
Category h1. Strong Text Small text
Product h1. Strong Text Small text
Page h1. Strong Text Small text
h2
<>
h2 {
background-color: none;
border-color: none;
border-radius: none;
border-style: none;
border-width: none;
box-shadow: none;
box-sizing: border-box;
color: #333;
cursor: auto;
display: block;
font-family: Montserrat,Arial,Helvetica,sans-serif;
font-size: 21;
font-weight: 400;
letter-spacing: 0.25px;
line-height: 1.5;
margin: 2.28571rem 0 .78571rem;
outline: none;
overflow: visible;
padding: 0;
position: static;
text-align: left;
text-decoration-color: none;
text-decoration-line: none;
text-decoration-style: none;
text-transform: none;
transition: none;
vertical-align: baseline;
@include breakpoint("medium") { // 801px and up
font-size: 24px;
}
}
This is the default h2.Strong textSmall text.
Category h2.Strong textSmall text.
Product h2.Strong textSmall text.
Webpage h2.Strong textSmall text.
h3
<>
h3 {
background-color: none;
border-color: none;
border-radius: none;
border-style: none;
border-width: none;
box-shadow: none;
box-sizing: border-box;
color: #333;
cursor: auto;
display: block;
font-family: Montserrat,Arial,Helvetica,sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.25px;
line-height: 1.5;
margin: 2.28571rem 0 .78571rem;
outline: none;
overflow: visible;
padding: 0;
position: static;
text-align: left;
text-decoration-color: none;
text-decoration-line: none;
text-decoration-style: none;
text-transform: none;
transition: none;
vertical-align: baseline;
}
This is an h3.Strong textSmall text.
Category h3.Strong textSmall text.
Product h3.Strong textSmall text.
Webpage h3.Strong textSmall text.
h4
<>
h4 {
background-color: none;
border-color: none;
border-radius: none;
border-style: none;
border-width: none;
box-shadow: none;
box-sizing: border-box;
color: #444;
cursor: auto;
display: block;
font-family: Montserrat,Arial,Helvetica,sans-serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 0.25px;
line-height: 1.5;
margin: 2.28571rem 0 .78571rem;
outline: none;
overflow: visible;
padding: 0;
position: static;
text-align: left;
text-decoration-color: none;
text-decoration-line: none;
text-decoration-style: none;
text-transform: none;
transition: none;
vertical-align: baseline;
}
This is an h4.Strong textSmall text.
Category h4.Strong textSmall text.
Product h4.Strong textSmall text.
Webpage h4.Strong textSmall text.
h5
<>
h5 {
background-color: none;
border-color: none;
border-radius: none;
border-style: none;
border-width: none;
box-shadow: none;
box-sizing: border-box;
color: #444;
cursor: auto;
display: block;
font-family: Montserrat,Arial,Helvetica,sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.25px;
line-height: 1.5;
margin: 2.28571rem 0 .78571rem;
outline: none;
overflow: visible;
padding: 0;
position: static;
text-align: left;
text-decoration-color: none;
text-decoration-line: none;
text-decoration-style: none;
text-transform: uppercase;
transition: none;
vertical-align: baseline;
}
This is an h5.Strong textSmall text.
Category h5.Strong textSmall text.
Product h5.Strong textSmall text.
Webpage h5.Strong textSmall text.
h6
This is an h6.Strong textSmall text.
Category h6.Strong textSmall text.
Product h6.Strong textSmall text.
Webpage h6.Strong textSmall text.
p
<>
p {
background-color: none;
border-color: none;
border-radius: none;
border-style: none;
border-width: none;
box-shadow: none;
box-sizing: border-box;
color: #333;
cursor: default;
display: block;
font-family: "Karla", Arial, Helvetica, sans-serif;;
font-size: 18px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
margin: 0 0 1.5rem 0;
outline: outline;
overflow: visible;
padding: 0;
position: relative;
text-align: left;
text-decoration-color: none;
text-decoration-line: none;
text-decoration-style: none;
text-transform: none;
transition: none;
vertical-align: baseline;
}
This is a p.Strong textSmall text.
This is a p.Strong textSmall text.
This is a p.Strong textSmall text.
This is a p.Strong textSmall text.
a
<>
a {
background-color: none;
border-color: none;
border-radius: none;
border-style: none;
border-width: none;
box-shadow: none;
box-sizing: border-box;
color: #333;
cursor: pointer;
display: inline;
font-family: "Karla", Arial, Helvetica, sans-serif;;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
line-height: 21;
margin: 0;
outline: none;
overflow: visible;
padding: 0;
position: relative;
text-align: left;
text-decoration-color: #333;
text-decoration-line: underline;
text-decoration-style: solid;
text-transform: none;
transition: none;
vertical-align: baseline;
}
Color Palette
$color-primary
$color-primary--hover
$color-primary--sub
$color-secondary
$color-secondary--hover
$color-secondary--sub
$color-alt
$color-alt--hover
$color-alt--sub
Header
Colors
NagBar
Top Bar
Main Background
Mobile Menu Background
Search
<>
.header__main-search {
display: none;
width: 100%;
position: absolute;
top: 100%;
left: 0;
background: #e5e5e5;
padding: 0.75rem;
font-size: 1rem;
vertical-align: middle;
@include breakpoint("medium") {// 801px and up
display: inline-block;
position: initial;
width: 41.66667%;
padding: 0 0.75rem;
background: #fff;
}
}
#quickSearch {
position: relative;
}
.form-input {
-webkit-appearance: none;
background-color: white;
border-color: #cccccc;
border-style: solid;
border-width: 1px;
border-radius: 4px;
color: #666666;
display: block;
font-family: inherit;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
height: 3rem;
margin: 0;
padding: 0.75rem 1rem;
transition: border-color 100ms ease-out;
width: 100%;
}
.quickSearchResults {
border: 1px solid #cccccc;
border-top: 0;
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
max-height: 450px;
overflow-y: auto;
z-index: 25;
margin-top: 1.5rem;
@include breakpoint("medium") {// 801px and up
margin-top: 0;
}
}
Search: Regular
Search: Focused
Inputs
Checkboxes
Radio Buttons
Facets
Forms & Form Fields
Contact Us Form
<>
.form {
margin: 0 0 1.5rem;
padding: 0;
box-sizing: border-box;
}
.form-row {
margin: 0 -0.75rem;
max-width: none;
width: auto;
}
.form-row .form-field {
padding-left: 0.75rem;
padding-right: 0.75rem;
width: 100%;
float: left;
max-width: none;
}
.form-field {
display: block;
margin: 0 0 2rem;
}
.form-field:before {
content: " ";
display: table;
}
.form-label {
color: #666666;
cursor: pointer;
display: block;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 0.5rem;
}
.form-input {
-webkit-appearance: none;
background-color: white;
border-color: #cccccc;
border-style: solid;
border-width: 1px;
border-radius: 4px;
color: #666666;
display: block;
font-family: inherit;
font-size: 1rem;
height: 3rem;
margin: 0;
padding: 0.75rem 1rem;
transition: border-color 100ms ease-out;
width: 100%;
}
.form-field:after {
clear: both;
}
.form-input[rows] {
height: auto;
}
.form-label small {
float: right;
margin-top: 0.35714rem;
color: #757575;
font-size: 0.71429rem;
text-transform: uppercase;
vertical-align: bottom;
}
textarea {
min-height: 50px;
overflow: auto;
}
.form-actions {
margin: 0 auto;
max-width: 85.71429rem;
width: 100%;
display: block;
text-align: center;
background: none;
border: 0;
@media only screen and (min-width: 551px) {
margin-top: 1.5rem;
}
}
.form-actions:before {
content: " ";
display: table;
}
.form-actions:after {
clear: both;
}
Quantity and Options
Maximum file size is 256kb, file types are pdf
Pricing
MSRP:
$25.99
Was:
$25.99
Now:
$25.99
On Sale!
On Sale!
On Sale!