/* Import Fonts from Adobe Typekit ===================================*/
/*======================================================================*/
@import url("https://use.typekit.net/bfx5jok.css");
/* Reset / Normalize ===================================*/
/*======================================================================*/
h1,h4,html{line-height:1.5em}.col-1-1,.grid,table{width:100%}html{font-size:100%;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}blockquote,figure{margin:1.5em 40px}dfn{font-style:italic}h1{font-size:2em;margin-top:.75em;margin-bottom:.75em}h2{font-size:1.5em;line-height:2em;margin-top:1em;margin-bottom:1em}h3{font-size:1.17em;line-height:1.28205em;margin-top:1.28205em;margin-bottom:1.28205em}h4{font-size:1em;margin-top:1.5em;margin-bottom:1.5em}h5{font-size:.83em;line-height:1.80723em;margin-top:1.80723em;margin-bottom:1.80723em}h6{font-size:.67em;line-height:2.23881em;margin-top:2.23881em;margin-bottom:2.23881em}mark{background:#ff0;color:#000}dl,menu,ol,p,pre,ul{margin:1.5em 0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ol,nav ul{list-style:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}body,form{margin:0}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;border-color:silver;border-width:.0625em;border-style:solid;padding:.4625em .875em .9125em}legend{border:0;padding:0}table{border-collapse:collapse;border-spacing:0;max-width:100%;margin-bottom:21px}td,th{line-height:1.35em;padding:10px 0}tr{border-bottom:1px solid #a4a7a9}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}[class*=col-]{float:left;padding-right:20px;position:relative}.grid{max-width:1420px;min-width:755px;margin:0 auto}.grid.extend{max-width:1600px}.grid:after{content:"";display:table;clear:both}.grid-pad{padding-left:20px;padding-right:20px}.push-right{float:right}.col-2-3,.col-8-12{width:66.66%}.col-1-2,.col-6-12{width:50%}.col-1-3,.col-4-12{width:33.33%}.col-1-4,.col-3-12{width:25%}.col-1-5{width:20%}.col-1-6,.col-2-12{width:16.667%}.col-1-7{width:14.28%}.col-1-8{width:12.5%}.col-1-9{width:11.1%}.col-1-10{width:10%}.col-1-11{width:9.09%}.col-1-12{width:8.33%}.col-11-12{width:91.66%}.col-10-12{width:83.333%}.col-9-12{width:75%}.col-5-12{width:41.66%}.col-7-12{width:58.33%}.push-2-3,.push-8-12{margin-left:66.66%}.push-1-2,.push-6-12{margin-left:50%}.push-1-3,.push-4-12{margin-left:33.33%}.push-1-4,.push-3-12{margin-left:25%}.push-1-5{margin-left:20%}.push-1-6,.push-2-12{margin-left:16.667%}.push-1-7{margin-left:14.28%}.push-1-8{margin-left:12.5%}.push-1-9{margin-left:11.1%}.push-1-10{margin-left:10%}.push-1-11{margin-left:9.09%}.push-1-12{margin-left:8.33%}@media handheld,only screen and (max-width:767px){.grid{width:100%;min-width:0;padding-left:20px;padding-right:20px}[class*=col-]{width:auto;float:none;margin:10px 0;padding-left:0;padding-right:10px}[class*=mobile-col-]{float:left;margin:0 0 10px;padding-left:0;padding-right:10px;padding-bottom:0}.mobile-col-1-1{width:100%}.mobile-col-2-3,.mobile-col-8-12{width:66.66%}.mobile-col-1-2,.mobile-col-6-12{width:50%}.mobile-col-1-3,.mobile-col-4-12{width:33.33%}.mobile-col-1-4,.mobile-col-3-12{width:25%}.mobile-col-1-5{width:20%}.mobile-col-1-6,.mobile-col-2-12{width:16.667%}.mobile-col-1-7{width:14.28%}.mobile-col-1-8{width:12.5%}.mobile-col-1-9{width:11.1%}.mobile-col-1-10{width:10%}.mobile-col-1-11{width:9.09%}.mobile-col-1-12{width:8.33%}.mobile-col-11-12{width:91.66%}.mobile-col-10-12{width:83.333%}.mobile-col-9-12{width:75%}.mobile-col-5-12{width:41.66%}.mobile-col-7-12{width:58.33%}.hide-on-mobile{display:none!important;width:0;height:0}}
/* BX Slider ===================================*/
/*======================================================================*/
.bx-wrapper {
position: relative;
margin: 0 auto 20px;
padding: 0;
*zoom: 1;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.product-gallery .bx-wrapper {overflow: hidden;}
.bx-wrapper img {max-width: 100%; display: block;}
.bxslider {margin: 0; padding: 0;}
ul.bxslider {list-style: none;}
.bx-viewport {-webkit-transform: translatez(0);}
.product-gallery .bx-wrapper {border: 1px solid #a4a7a9; background: #fff;}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url("../images/bx_loader.gif") center center no-repeat #ffffff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #a4a7a9;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
background: #c10230;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager-item {font-size: 0; line-height: 0;}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
width: 13px;
height: 10px;
background: url("../images/arrow-left-red.png") no-repeat center center;
}
.bx-wrapper .bx-next {
right: 10px;
width: 13px;
height: 10px;
background: url("../images/arrow-right-red.png") no-repeat center center;
}
.bx-wrapper .bx-prev:after,
.bx-wrapper .bx-next:after {
display: none;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -6.5px;
outline: 0;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {display: none;}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {text-align: center;}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url("../images/controls.png") -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url("../images/controls.png") -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {text-align: left; width: 80%;}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {right: 0; width: 35px;}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
/*======================================================================*/
/* START MAIN CSS ===================================*/
/*=====================================================================*/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*::selection {
background-color: rgba(193, 2, 48, 0.7);
color: #fff;
}
html {
overflow-y: scroll;
overflow-x: hidden;
margin: 0;
padding: 0;
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-family: "urw-din", sans-serif;
font-size: 19px;
line-height: 1.7em;
font-weight: 400;
color: #000700;
}
#container {
position: relative;
width: 100%;
z-index: 1;
}
.display-none {display: none;}
/* --------------------------------------------------------------------------------------- */
/* HEADER ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: block;
width: 100%;
height: auto;
}
.header-shadow {box-shadow: 0 8px 0 rgba(0,7,0,0.5);}
#header-spacer {
position: relative;
display: block;
width: 100%;
height: 118px;
}
.header-wrapper {
position: relative;
z-index: 101;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 16px;
}
.header-logo {
position: relative;
top: 0;
z-index: 50;
display: block;
padding: 21px 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.header-logo svg {
display: block;
width: 308px;
height: 76.41px;
}
.header-logo svg .logo-color-one {fill: #c10230;}
.header-logo svg .logo-color-two {fill: #000700;}
.bg-dark .header-logo svg .logo-color-one {fill: #c10230;}
.bg-dark .header-logo svg .logo-color-two {fill: #fff;}
.header-icon {
position: fixed;
top: -100px;
left: 0;
z-index: 50;
height: 55px;
width: 62px;
padding: 12px;
/* background: $primary; */
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
text-align: center;
}
.header-icon svg.header-tsm-badge {
position: absolute;
left: 50%;
top: 50%;
overflow: initial;
width: 37.8px;
height: 31px;
transform: translate3d(-50%,-50%,0);
}
.header-icon svg.header-tsm-badge .badge-bolt {fill: #000700;}
.header-icon svg.header-tsm-badge .badge-uprights {
fill: #c10230;
transform: translate3d(0,0,0);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.header-icon:hover svg.header-tsm-badge .badge-upright-left {transform: translate3d(-6px,0,0);}
.header-icon:hover svg.header-tsm-badge .badge-upright-right {transform: translate3d(6px,0,0);}
@media screen and (min-width: 580px) {
.header-icon svg.header-tsm-badge .badge-bolt {fill: #fff;}
}
/* --------------------------------------------------------------------------------------- */
/* Menus ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
nav {
position: relative;
display: block;
padding: 10px 0;
text-align: right;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
/* Primary Navigation ---------------------------------------------- */
nav .main-nav {
display: inline-block;
border: 2px solid #fff;
background: #000700;
overflow-x: hidden;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
nav #main-menu {display: inline-block; text-align: right;}
nav .main-nav ul.sub-menu {
opacity: 0;
transform: translateY(5%);
transition: all 150ms ease;
pointer-events: none;
/*display: none;*/
position: absolute;
text-align: left;
margin: 0 0 0 0;
transition: all 150ms ease;
z-index: 999999 !important;
}
nav .main-nav li:hover>ul.sub-menu {
/*display: block;*/
opacity: 1;
transform: translateY(0%);
pointer-events: auto;
transition: all 150ms ease;
z-index: 99999;
}
nav .main-nav ul.sub-menu {
width: 300px;
z-index: 999999 !important;
background: #fff;
margin-top: 0;
display: block;
padding: 0 0;
border-radius: 0;
-webkit-box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.3);
}
nav .main-nav #main-menu ul.sub-menu li {display: block; width: 100%; border-right: none;}
nav .main-nav #main-menu ul.sub-menu a {
display: block !important;
font-size: 20px;
padding: 15px 20px !important;
border-right: none;
font-size: 14px;
color: #000700;
text-align: left !important;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
border-bottom: 2px solid #f4f3ee !important;
}
nav .main-nav #main-menu ul.sub-menu li:last-child a {border-bottom: none !important;}
nav .main-nav #main-menu ul.sub-menu a:hover {
display: block;
color: #fff;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
border-bottom: 2px solid #f4f3ee !important;
}
nav #main-menu li {
display: inline-block;
border-right: 1px solid #fff;
}
nav #main-menu li a,
nav a.nav-cart,
nav a.hamburger,
nav a.mobile-nav-phone {
position: relative;
z-index: 1;
display: block;
padding: 12px 18px;
font-weight: 500;
color: #fff;
line-height: 1em;
}
nav a.mobile-nav-phone {display: none;}
nav a.nav-cart {
display: inline-block;
padding-left: 50px;
background: #c10230;
color: #fff;
}
nav a.hamburger {display: none;}
nav #main-menu li a:hover,
nav a.hamburger:hover {
color: #fff;
}
nav #main-menu li a:after,
nav a.nav-cart:after,
nav a.hamburger:after,
nav a.mobile-nav-phone:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 0;
background: #c10230;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
nav a.nav-cart:after,
nav a.mobile-nav-phone:after {background: #840020;}
nav #main-menu li a:hover:after,
nav a.nav-cart:hover:after,
nav a.hamburger:hover:after,
nav a.mobile-nav-phone:hover:after {
height: 100%;
}
nav a.nav-cart:before {
content: url(../images/cart.svg);
position: absolute;
left: 20px;
width: 26px;
height: 19px;
}
.hamburger p,
.mobile-nav-phone p {
position: relative;
top: -1px;
display: inline-block;
margin: 0;
font-weight: 400;
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 0.05em;
line-height: 1em;
}
.hamburger-stack {
position: relative;
top: 1px;
display: inline-block;
width: 24px;
height: 16px;
margin: 0 8px 0 2px;
}
.hamburger .hamburger-top,
.hamburger .hamburger-middle,
.hamburger .hamburger-bottom {
position: absolute;
right: 0;
width: 100%;
height: 2px;
background: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hamburger .hamburger-top {
top: 0;
width: 50%;
}
.hamburger .hamburger-middle {
top: 50%;
margin-top: -1px;
}
.hamburger .hamburger-bottom {bottom: 0;}
.hamburger:hover .hamburger-top,
.hamburger:hover .hamburger-middle,
.hamburger:hover .hamburger-bottom {
background: #fff;
}
.hamburger:hover .hamburger-top {width: 100%;}
/* Secondary Navigation ---------------------------------------------- */
nav #secondary-menu {text-align: right;}
nav #secondary-menu li {display: inline-block;}
nav #secondary-menu li a {
display: block;
padding: 5px 0;
margin: 0 0 0 12px;
font-size: 0.85em;
text-transform: uppercase;
font-weight: 700;
line-height: 1em;
color: #fff;
}
nav #secondary-menu li a:hover {color: #c10230;}
.mobile-header nav #secondary-menu li.menu-item {display: none;}
/* --------------------------------------------------------------------------------------- */
/* Mobile/Small Nav ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
.mobile-menu {
position: relative;
z-index: 1000;
}
/* Mobile Nav - Modify main nav ------------------------- */
.mobile-header #main-menu {display: none;}
.mobile-header a.hamburger {display: inline-block;}
/* Small Nav - Modify main nav ------------------------- */
.small-header {height: 55px;}
.small-header .wrapper {height: 55px;}
.small-header #main-menu {display: none;}
.small-header nav {
position: absolute;
right: 0;
top: -1px;
padding: 0;
}
.small-header nav .main-nav {margin: 4px; background: none;}
.small-header a.hamburger {display: inline-block; color: #fff;}
.small-header .hamburger .hamburger-top,
.small-header .hamburger .hamburger-middle,
.small-header .hamburger .hamburger-bottom {background: #fff;}
.small-header .header-logo {top: -120px;}
.small-header .header-icon {top: 0; text-align: center;}
.small-header .header-icon img {margin: 12px 0 0 0; width: 35px;}
.small-header .header-icon svg {fill: #fff;}
@media screen and (min-width: 580px) {
.small-header .header-icon {background: none;}
}
/* mobile menu active ------------------------- */
.mobile-menu-overlay {
position: fixed;
display: none;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 7, 0, 0.75);
z-index: 101;
}
.mobile-nav {
position: fixed;
top: 0;
right: -350px;
overflow-y: scroll;
width: 320px;
padding-left: 30px;
height: 100%;
z-index: 102;
-webkit-transition: all 0.325s ease;
-moz-transition: all 0.325s ease;
-o-transition: all 0.325s ease;
transition: all 0.325s ease;
}
.mobile-nav.mobile-nav-show {transform: translateX(-350px);}
.close-nav {
position: fixed;
top: 0;
left: -100px;
z-index: 102;
width: 60px;
height: auto;
cursor: pointer;
-webkit-transition: all 0.325s ease;
-moz-transition: all 0.325s ease;
-o-transition: all 0.325s ease;
transition: all 0.325s ease;
}
.close-nav-active {transform: translateX(100px);}
.close-nav-icon {
position: relative;
display: block;
width: 40px;
height: 40px;
margin: 20px auto 70px;
-webkit-transition: all 0.325s ease;
-moz-transition: all 0.325s ease;
-o-transition: all 0.325s ease;
transition: all 0.325s ease;
}
.close-nav:hover .close-nav-icon {transform: rotate(90deg);}
.close-nav-icon div {
position: absolute;
top: 50%;
margin-top: -1px;
left: 0;
width: 100%;
height: 2px;
background: #fff;
}
.close-nav-icon div:first-child {transform: rotate(45deg);}
.close-nav-icon div:last-child {transform: rotate(-45deg);}
.close-nav p {
position: relative;
left: -50px;
width: 140px;
margin: 0 10px;
text-transform: uppercase;
font-weight: 500;
color: #fff;
line-height: 1em;
text-align: right;
transform: rotate(-90deg);
}
/* mobile menu list stying ------------------------- */
#mobile-menu {
position: relative;
display: block;
padding-bottom: 100px;
min-height: 100%;
background: #fff;
}
#mobile-menu li {
position: relative;
display: block;
width: 100%;
background: #c10230;
}
.mobile-nav #mobile-menu li a {
position: relative;
display: block;
width: 100%;
padding: 12px 15px;
transform: translateX(-20px);
background: #c10230;
font-size: 1.15em;
line-height: 1.35em;
color: #fff;
-webkit-transition: all 0.325s ease;
-moz-transition: all 0.325s ease;
-o-transition: all 0.325s ease;
transition: all 0.325s ease;
}
.mobile-nav #mobile-menu li a:hover {padding-left: 24px;}
.mobile-nav #mobile-menu li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-top: 20px solid #840020;
border-left: 20px solid transparent;
}
#mobile-menu .sub-menu {
position: relative;
display: block;
}
.mobile-nav #mobile-menu li .sub-menu li a {
transform: translateX(0);
border-bottom: 1px solid #f4f3ee;
background: #fff;
color: #000700;
/* text-transform: uppercase; */
font-size: 0.85em;
font-weight: 500;
}
.mobile-nav #mobile-menu li .sub-menu li a:hover {background: #f4f3ee;}
.mobile-nav #mobile-menu li .sub-menu li a:before {display: none;}
/* --------------------------------------------------------------------------------------- */
/* Links ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
a {
position: relative;
text-decoration: none;
cursor: pointer;
color: #c10230;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
a:hover {
color: #840020;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
/* Links in long form text ------------------------- */
.long-text a:not(.button) {
position: relative;
top: 0;
border-bottom: 1px solid #c10230;
background-image: linear-gradient(#c10230,#c10230);
background-size: 100% 0;
background-repeat: no-repeat;
background-position: left calc(100% + 1px);
color: #000700;
}
.long-text a:not(.button):hover {
top: -3px;
padding-bottom: 3px;
background-size: 100% 3px;
}
.bg-black .long-text a:not(.button),
.long-text .bg-black a:not(.button),
.bg-black.long-text a:not(.button),
.bg-primary .long-text a:not(.button),
.long-text .bg-primary a:not(.button),
.bg-primary.long-text a:not(.button),
.bg-secondary .long-text a:not(.button),
.long-text .bg-secondary a:not(.button),
.bg-secondary.long-text a:not(.button) {
border-bottom: 1px solid #fff;
background-image: linear-gradient(#fff,#fff);
color: #fff;
}
/* Buttons ------------------------- */
.center-buttons {width: 100%; text-align: center;}
a.button,
button.button,
input.button {
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
vertical-align: top;
padding: 12px 20px;
margin-right: 6px;
border: 2px solid #c10230;
background: #840020;
color: #fff;
font-weight: 400;
text-transform: uppercase;
line-height: 1em;
}
.bg-primary a.button,
.bg-primary button.button,
.bg-primary input.button {border-color: #fff;}
a.button.arrow-button,
button.button.arrow-button,
input.button.arrow-button {padding-right: 60px;}
a.button.outline-button {
background: none;
border-width: 1px;
color: #c10230;
text-transform: initial;
}
a.button.outline-button:hover {
background: #c10230;
color: #fff;
}
a.button:last-child,
button.button:last-child,
input.button:last-child {margin-right: 0;}
a.button:before,
button.button:before,
input.button:before {
content: '';
position: absolute;
right: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background: #c10230;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
a.button.outline-button:before {display: none;}
a.button:after,
button.button:after,
input.button:after {
position: absolute;
right: 20px;
left: initial;
top: 50%;
bottom: initial;
z-index: 2;
background: none !important;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
a.button:hover:after,
button.button:hover:after,
input.button:hover:after {
right: 15px;
}
a.button.arrow-button:hover:before,
button.button.arrow-button:hover:before,
input.button.arrow-button:hover:before {
width: 21px;
}
a.button.arrow-button:after,
button.button.arrow-button:after,
input.button.arrow-button:after {
content: url('data:image/svg+xml; utf8, ');
width: 12px;
height: 16.5px;
margin-top: -8.25px;
}
.button.small {padding: 5px 10px; font-size: 12px !important;}
.button.giant {
padding: 16px 18px 18px;
font-size: 32px;
font-family: "urw-din-condensed", sans-serif;
font-style: italic;
font-weight: 600;
}
a.button.arrow-button.giant:after,
button.button.arrow-button.giant:after,
input.button.arrow-button.giant:after {
margin-top: -20px;
}
.buttons-wrapper {position: relative; margin: 24px 0;}
.buttons-wrapper:first-child {margin-top: 0;}
.buttons-wrapper:last-child {margin-bottom: 0;}
.buttons-wrapper.center-buttons {text-align: center;}
.buttons-wrapper.right-buttons {text-align: right;}
.buttons-wrapper .button {margin: 4px 6px 4px 0;}
.buttons-wrapper.center-buttons .button {margin: 4px 3px;}
.buttons-wrapper.right-buttons .button {margin: 4px 0 4px 6px;}
.individual-button-wrap {
display: inline-block;
margin: 5px;
text-align: left;
}
.individual-button-wrap p {
text-transform: uppercase;
color: #a4a7a9;
}
.individual-button-wrap a {display: block;}
.button-wrap-align-right {
display: block;
text-align: right;
}
.full {width: 100%;}
/* --------------------------------------------------------------------------------------- */
/* Text Styles ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
p {margin: 0 0 10px;}
p:last-child {margin-bottom: 0;}
em {color: #aaa;}
h1 {
display: block;
margin: 0 auto;
padding: 0;
font-family: "urw-din-condensed", sans-serif;
font-style: italic;
text-align: center;
font-weight: 700;
font-size: 3em;
line-height: 0.85em;
}
h1.small-heading {
font-size: 2.125em;
text-align: left;
margin-bottom: 32px;
max-width: 100%;
}
.heading-hero h1 {margin-top: 0;}
section h1 {margin-bottom: 80px;}
section h1:last-child {margin-bottom: 0;}
h2, h3, h4, h5, h6 {
position: relative;
margin: 0;
padding: 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
h2 {
display: block;
padding: 0;
margin-bottom: 20px;
font-family: "urw-din-condensed", sans-serif;
font-weight: 600;
font-size: 2em;
line-height: 0.85em;
font-style: italic;
text-transform: uppercase;
}
.overlapping-title h2 {top: -0.5em;}
h1.outline-title,
h2.outline-title {
line-height: 0.85em;
font-size: 3em;
text-transform: uppercase;
color: #fff;
-webkit-text-stroke-width: 0.02em;
-webkit-text-stroke-color: #000700;
text-shadow: 4px 4px 0 rgba(0,7,0,0.2);
}
.bg-beige h1.outline-title,
.bg-beige h2.outline-title {color: #f4f3ee;}
.bg-primary h1.outline-title,
.bg-primary h2.outline-title {color: #c10230;}
.bg-black h1.outline-title,
.bg-black h2.outline-title {color: #000700;}
.bg-primary h1.outline-title,
.bg-primary h2.outline-title,
.bg-black h1.outline-title,
.bg-black h2.outline-title {
-webkit-text-stroke-color: #fff;
text-shadow: 4px 4px 0 rgba(255,255,255,0.3);
}
.bg-beige .bg-black h1.outline-title,
.bg-beige .bg-black h2.outline-title {
-webkit-text-stroke-color: #f4f3ee;
}
h1.shadow-title,
h2.shadow-title {
line-height: 0.85em;
font-size: 3em;
text-transform: uppercase;
text-shadow: 4px 4px 0 rgba(0,7,0,0.2);
}
@media screen and (min-width: 480px) {
h1.outline-title,
h2.outline-title,
h1.shadow-title,
h2.shadow-title {font-size: 4em;}
}
h3 {
z-index: 2;
display: inline-block;
padding: 0;
font-size: 1.5em;
font-weight: 600;
line-height: 1.15em;
text-transform: uppercase;
}
h4 {
display: block;
font-weight: 700;
line-height: 1.15em;
}
h5 {
display: block;
color: #a4a7a9;
font-weight: 600;
text-transform: uppercase;
}
h5 span {text-transform: initial;}
.red-line {
position: absolute;
width: 100%;
height: 1px;
background: #c10230;
transform: translateY(-28px);
}
h1, h2, h3 {margin-top: 36px;}
h4, h5, h6 {margin-top: 24px;}
h1, h2 {margin-bottom: 24px;}
h3 {margin-bottom: 18px;}
h4 {margin-bottom: 12px;}
h5, h6 {margin-bottom: 0;}
h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
h2 + h3, h2 + h4, h2 + h5, h2 + h6,
h3 + h2, h3 + h4, h3 + h5, h3 + h6,
h4 + h2, h2 + h3, h4 + h5, h4 + h6,
h5 + h2, h5 + h3, h5 + h4, h5 + h6,
h6 + h2, h6 + h3, h6 + h4, h6 + h5 {
margin-top: 0;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {margin-top: 0;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {margin-bottom: 0;}
blockquote {
position: relative;
margin: 20px 0 20px 28px;
padding-left: 40px;
border-left: 1px solid #000700;
font-style: italic;
}
blockquote:before {
content: url(../images/quotations-beige.png);
position: absolute;
top: 0;
left: -28px;
background: #fff;
}
.bg-beige blockquote:before {content: ''; background: #f4f3ee;}
.product-name-parenthesis {
display: block;
margin-top: 4px;
font-weight: 400;
font-size: 0.65em;
line-height: 1.25em;
text-transform: initial;
}
h1.product-name .product-name-parenthesis {
display: inline;
margin-top: 0;
font-size: 0.45em;
color: initial;
-webkit-text-stroke-width: 0;
text-shadow: none;
}
/* --------------------------------------------------------------------------------------- */
/* Lists ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul,
h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol {margin-top: 0 !important;}
ul, ol {margin: 0; padding: 0;}
ol {counter-reset: item; list-style: none;}
.long-text ul + p,
.long-text ul + p {
margin-top: 10px;
}
.long-text ul li {list-style: none;}
.long-text ul li,
.long-text ol li {
display: block;
margin-bottom: 5px;
margin-left: 25px;
}
.long-text ol li {counter-increment: item;}
.long-text ul li:before,
.long-text ol li:before {
position: relative;
float: left;
margin-left: -25px;
color: #c10230;
}
.long-text ul li:before,
.long-text ol ul li:before {
content: '\2022';
font-size: 0.85em;
}
.long-text ol li:before {
content: counter(item);
font-size: 0.85em;
font-weight: 700;
}
/* Sub lists --------------------------------------------- */
.long-text ul ul,
.long-text ol ul,
.long-text ul ol,
.long-text ol ol {margin: 0 0 10px 28px;}
.long-text ol ul li {counter-increment: none;}
/* checkmark list - arrows and checkmarks --------------------------------------------- */
.long-text .checkmark-list li,
.long-text .arrow-list li {
line-height: 1.35em;
padding: 10px 0;
border-bottom: 1px solid #a4a7a9;
}
.long-text .checkmark-list li:before {
content: url('data:image/svg+xml; utf8, ');
width: 15px;
height: 13.1687px;
}
.long-text .arrow-list li:before {
content: url(../images/arrow-right-red.png);
top: 1px;
}
.long-text .checkmark-list li:last-child,
.long-text .arrow-list li:last-child {
border-bottom: none;
}
/* --------------------------------------------------------------------------------------- */
/* Main Content ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
main {
display: block;
position: relative;
/* z-index: 2; */
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
section {
position: relative;
padding: 90px 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
/* -------------------------------------------------------------------------------------------- */
/* Modifiers ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.wrapper {
position: relative;
width: 90%;
max-width: 1200px;
margin: 0px auto;
}
.wrapper-overflow {overflow: auto;}
.inner-wrapper {width: 100%;}
.xlarge-wrapper {max-width: 1920px;}
.large-wrapper {max-width: 1640px;}
.medium-wrapper {max-width: 1200px;}
.small-wrapper {max-width: 800px;}
.xs-wrapper {max-width: 640px;}
.wrapper-full {width: 100%;}
.mobile-full-wrapper {width: 100%;}
.bg-white {background: #fff;}
.bg-lightgrey {background: #e4e4e4;}
.bg-grey {background: #a4a7a9;}
.bg-darkgrey {background: #606060; color: #fff;}
.bg-beige .bg-darkgrey {color: #f4f3ee;}
.bg-black {background: #000700; color: #fff;}
.bg-beige .bg-black {color: #f4f3ee;}
.bg-primary, .bg-red {background: #c10230 !important; color: #fff;}
.bg-secondary {background: #840020 !important; color: #fff;}
.bg-tertiary, .bg-beige {background: #f4f3ee;}
.bg-df {background: #ffdc4f;}
.xs-padding {padding-top: 2vw; padding-bottom: 2vw;}
.xs-padding-top {padding-top: 2vw;}
.xs-padding-bottom {padding-bottom: 2vw;}
.small-padding {padding-top: 4vw; padding-bottom: 4vw;}
.small-padding-top {padding-top: 4vw;}
.small-padding-bottom {padding-bottom: 4vw;}
.medium-padding {padding-top: 6vw; padding-bottom: 6vw;}
.medium-padding-top {padding-top: 6vw;}
.medium-padding-bottom {padding-bottom: 6vw;}
.large-padding {padding-top: 8vw; padding-bottom: 8vw;}
.large-padding-top {padding-top: 8vw;}
.large-padding-bottom {padding-bottom: 8vw;}
.xl-padding {padding-top: 10vw; padding-bottom: 10vw;}
.xl-padding-top {padding-top: 10vw;}
.xl-padding-bottom {padding-bottom: 10vw;}
.no-padding {padding: 0;}
.no-padding-bottom {padding-bottom: 0;}
.no-padding-top {padding-top: 0;}
.side-padding {padding-left: 5%; padding-right: 5%;}
.padding-small {padding-top: 40px; padding-bottom: 40px;}
.small-padding-bottom {padding-bottom: 40px;}
.small-padding-top {padding-top: 40px;}
.no-margin {margin: 0;}
.no-margin-top {margin-top: 0;}
.no-margin-bottom {margin-bottom: 0;}
.border {border: 2px solid #000700;}
.border-x {border-left: 2px solid #000700; border-right: 2px solid #000700;}
.border-y {border-top: 2px solid #000700; border-bottom: 2px solid #000700;}
.border-top {border-top: 2px solid #000700;}
.border-right {border-right: 2px solid #000700;}
.border-bottom {border-bottom: 2px solid #000700;}
.border-left {border-left: 2px solid #000700;}
.boxed-content {
position: relative;
padding: 24px;
background: #fff;
border: 2px solid #000700;
box-shadow: 8px 8px 0 rgba(0,7,0,0.25);
}
.bg-beige .boxed-content {background: #f4f3ee;}
.bg-black .boxed-content {
background: #000700;
border-color: #fff;
box-shadow: 8px 8px 0 rgba(255,255,255,0.25);
}
.box-after-note {margin-top: 12px;}
.left-align {text-align: left;}
.center-align {text-align: center;}
.right-align {text-align: right;}
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: initial;}
.large-text {font-size: 1.25em; line-height: 1.7em;}
.small-text {font-size: 0.85em; line-height: 1.7em;}
.xsmall-text {font-size: 0.65em; line-height: 1.7em;}
.white-text {color: #fff;}
.black-text {color: #000700;}
.red-text {color: #c10230;}
.highlight {color: #c10230 !important;}
.shadow-container {box-shadow: 8px 8px 0 rgba(0,7,0,0.25);}
/* -------------------------------------------------------------------------------------------- */
/* Columns ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.columns {position: relative; display: block;}
.half-column {
display: block;
width: 100%;
margin-top: 32px;
}
.half-column:first-child {margin-top: 0;}
@media screen and (min-width: 900px) {
.columns {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 48px;
}
.half-column {
flex-grow: 1;
width: calc(50% - 24px);
margin: 0;
}
}
/* -------------------------------------------------------------------------------------------- */
/* Heroes ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
#hero {
position: relative;
display: block;
width: 100%;
padding: 80px 0;
}
#hero h1 {
color: #fff;
text-shadow: 0 0 16px rgba(0, 7, 0, 0.4);
}
.heading-hero {z-index: 1 !important; padding: 32px 0;}
.heading-hero h1 {margin-bottom: 0; text-transform: uppercase;}
.banner-description {position: realtive; margin-top: 16px;}
.hero-brush {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 40px;
background: url(../images/hero-brush.png) repeat-x center bottom;
}
/* -------------------------------------------------------------------------------------------- */
/* YouTube Video Embed ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.video {
overflow: hidden;
position: relative;
margin: 20px auto !important;
max-width: 800px !important;
}
.videoIframe {height: 675px; width: 100%;}
.single-video {
position: relative;
display: block;
width: 100%;
max-width: 1200px;
height: auto;
margin: 0 auto;
background: #000700;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* -------------------------------------------------------------- */
/* Homepage and Single products - YouTube video section --------- */
/* -------------------------------------------------------------- */
/* For video galleries of 1 or 2 videos, consult product.css ------------------------------- */
#youtube-gallery {position: relative;}
.videos-scroll {
position: relative;
overflow-x: scroll;
display: block;
padding: 0 16px 16px;
}
.videos-scroll::-webkit-scrollbar {width: 1em;}
.videos-scroll::-webkit-scrollbar-track {background-color: transparent;}
.videos-scroll::-webkit-scrollbar-thumb {
background-color: #c10230;
border-radius: 8px;
border: 4px solid #fff;
}
.bg-beige .videos-scroll::-webkit-scrollbar-thumb {border-color: #f4f3ee;}
.bg-black .videos-scroll::-webkit-scrollbar-thumb {border-color: #000700;}
.videos-wrapper {
position: relative;
display: block;
width: 100%;
}
.videos-nowrap {white-space: nowrap;}
.video-link {
display: inline-block;
width: 39.5%;
margin: 16px 16px 0 0;
}
.text-image-columns .video-link {margin-top: 0;}
.video-link img {
position: relative;
z-index: 2;
display: block;
width: 100%;
height: auto;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.video-link:hover img {opacity: 1;}
.bg-black .video-link:before,
.bg-black .video-link:after {
content: '';
position: absolute;
z-index: 1;
display: block;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: #c10230;
transform: scale(0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.bg-black .video-link:before {top: -2px; left: -2px; transform-origin: left top;}
.bg-black .video-link:hover:before {transform: scale(1);}
.bg-black .video-link:after {bottom: -2px; right: -2px; transform-origin: right bottom;}
.bg-black .video-link:hover:after {transform: scale(1);}
a.video-link svg {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
display: block;
transform: translate3d(-50%,-50%,0);
}
a.video-link svg circle {
fill: transparent;
stroke: #c10230;
stroke-width: 2;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a.video-link:hover svg circle {stroke-dashoffset: 693;}
a.video-link svg polygon {
fill: rgba(255,255,255,0.75);
transform-origin: center center;
transform: translate3d(5px,0,0) scale(0.4);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a.video-link:hover svg polygon {fill: rgba(193,2,48,1); transform: translate3d(5px,0,0) scale(0.475);}
.fancybox-content {
position: relative;
padding-bottom: 56.25% !important; /* 16:9 */
height: 0 !important;
}
.fancybox-content iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 767px) {
.video-link {width: 67%;}
}
/* -------------------------------------------------------------------------------------------- */
/* Manufacturer list ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.mfg-container {margin-top: 48px;}
.home-mfgs {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
border: 4px solid #000700;
}
.home-mfgs a {
position: relative;
z-index: 1;
display: block;
width: 50%;
height: 42vw;
border: 1px solid #e4e4e4;
background: #fff;
transform: translate3d(0,0,0);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.home-mfgs a:hover {
z-index: 2;
transform: translate3d(10px,-10px,0);
border-color: #c10230;
}
.home-mfgs a img {
position: relative;
display: block;
width: 85%;
height: 85%;
margin: 7.5% auto 0;
object-position: center center;
object-fit: contain;
}
@media screen and (min-width: 400px) {
.home-mfgs a {width: 33.3333%; height: 28vw;}
}
@media screen and (min-width: 640px) {
.home-mfgs a {width: 25%; height: 20vw;}
}
@media screen and (min-width: 900px) {
.home-mfgs a {width: 20%; height: 18vw;}
}
@media screen and (min-width: 1200px) {
.home-mfgs a {width: 16.6667%; height: 14vw; max-height: 180px;}
}
/* -------------------------------------------------------------------------------------------- */
/* Manually set breadcrumbs ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
p.breadcrumbs {
display: inline-block;
padding: 5px 0 0 0;
line-height: 1.5em !important;
}
span.archive-breadcrumbs {
position: relative;
display: block;
width: 90%;
margin: 0 auto;
text-align: center;
line-height: 1em;
}
.archive-breadcrumbs span.breadcrumb-link:before {
content: url(../images/arrow-right-red.png);
display: inline-block;
margin: 0 2px;
transform: scale(0.65) translate3d(0,1px,0);
}
.archive-breadcrumbs span.breadcrumb-link:first-child:before {display: none;}
.archive-breadcrumbs .breadcrumb-link {
text-transform: uppercase;
font-size: 0.75em;
line-height: 1em;
}
h1 span.breadcrumb-location {text-shadow: 4px 4px 0 rgba(0,7,0,0.2);}
.archive-product-list-item {
display: inline-block;
vertical-align: bottom;
width: 33.3333%;
}
.archive-title-logo {
position: relative;
display: block;
height: auto;
width: 70%;
max-width: 360px;
margin: 16px auto 0;
}
.archive-breadcrumbs h1.breadcrumb-title {
display: block;
}
/* --------------------------------------------------------------------------------------- */
/* Sections ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* Tradeshow banner ---------------------------------------------- */
.trade-shows .page-hero {background-position: 50% 30% !important;}
/* Display Grid for trade shows ---------------------------------------------- */
.tradeshow-listing {
position: relative;
overflow: hidden;
display: block;
margin: 24px auto;
border: 2px solid #000700;
background: #fff;
-webkit-box-shadow: 8px 8px 0 rgb(0,7,0, 0.15);
-moz-box-shadow: 8px 8px 0 rgb(0,7,0, 0.15);
box-shadow: 8px 8px 0 rgb(0,7,0, 0.15);
color: #000700;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.tradeshow-listing:hover {
border-color: #c10230;
transform: scale(1.05);
-webkit-box-shadow: 4px 4px 10px rgb(0,7,0,0.1);
-moz-box-shadow: 4px 4px 10px rgb(0,7,0,0.1);
box-shadow: 4px 4px 10px rgb(0,7,0,0.1);
color: #000700;
}
.tradeshow-listing.active-show {border-color: #c10230;}
.tradeshow-listing.active-show:after {
content: 'On Now';
position: absolute;
top: 0;
left: 5%;
z-index: 3;
display: inline-block;
padding: 6px 16px;
background: #c10230;
font-family: "urw-din-condensed", sans-serif;
font-weight: 600;
font-style: italic;
line-height: 1em;
text-transform: uppercase;
color: #fff;
}
.tradeshow-grid a.tradeshow-link {
position: relative;
display: block;
background: #f4f3ee;
}
.tradeshow-listing .tradeshow-branding {
position: relative;
z-index: 1;
overflow: hidden;
background: #fff;
}
.tradeshow-listing .tradeshow-branding img {
position: relative;
z-index: 2;
display: block;
width: 90%;
height: auto;
margin: 5vw auto;
transform: scale(0.85);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.tradeshow-listing a svg {
position: absolute;
top: 0;
left: 50%;
z-index: 1;
width: 203.3333px;
height: 466.6667px;
fill: #f4f3ee;
transform-origin: center top;
transform: translate(-50%, -100%) scale(0.6);
opacity: 0;
-webkit-transition: transform 2s ease, opacity 0.5s ease;
-moz-transition: transform 2s ease, opacity 0.5s ease;
-o-transition: transform 2s ease, opacity 0.5s ease;
transition: transform 2s ease, opacity 0.5s ease;
}
.tradeshow-listing a:hover svg {
opacity: 1;
transform: translate(-50%, 0) scale(0.6);
-webkit-transition: all 0.075s ease, opacity 0s ease;
-moz-transition: all 0.075s ease, opacity 0s ease;
-o-transition: all 0.075s ease, opacity 0s ease;
transition: all 0.075s ease, opacity 0s ease;
}
.tradeshow-listing .tradeshow-details {
position: relative;
z-index: 2;
padding: 20px 12px;
background: #f4f3ee;
text-align: center;
color: #000700;
}
.tradeshow-listing:hover .tradeshow-details {color: #000700;}
.tradeshow-listing h3,
.tradeshow-listing h4 {
margin: 4px 0;
transform: translateX(0);
background: none;
font-family: "urw-din", sans-serif !important;
}
.tradeshow-listing .tradeshow-booth {
position: relative;
z-index: 2;
padding: 8px;
border-top: 1px dashed #a4a7a9;
font-size: 0.7em;
font-weight: 700;
line-height: 1.6em;
color: #000700;
text-align: center;
text-transform: uppercase;
}
@media screen and (min-width: 360px) {
/* -------------------------------------------------------------------------------------------- */
/* Display Grid - for trade shows ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.tradeshow-grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 4vw 4%;
}
.tradeshow-listing {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
width: 48%;
margin: 0;
}
.tradeshow-listing.active-show {width: 100%;}
.home .tradeshow-listing.active-show {width: 48%;}
.tradeshow-listing .tradeshow-branding {height: 40vw; width: 100%;}
.tradeshow-listing.active-show .tradeshow-branding {height: 75vw; max-height: 600px;}
.home .tradeshow-listing.active-show .tradeshow-branding {height: 40vw; max-height: 100%;}
.tradeshow-listing .tradeshow-branding img {
width: 100%;
height: 100%;
margin: 0;
object-fit: contain;
}
}
@media screen and (min-width: 640px) {
.tradeshow-listing a svg {transform: translate(-50%,-100%) scale(0.85);}
.tradeshow-listing a:hover svg {transform: translate(-50%,0%) scale(0.85);}
}
@media screen and (min-width: 860px) {
/* -------------------------------------------------------------------------------------------- */
/* Display Grid - for products/brands/trade shows ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.tradeshow-grid {gap: 32px 3%;}
.tradeshow-listing,
.tradeshow-listing.active-show,
.home .tradeshow-listing.active-show {width: 31.3333%;}
.tradeshow-listing .tradeshow-branding,
.tradeshow-listing.active-show .tradeshow-branding,
.home .tradeshow-listing.active-show .tradeshow-branding {height: 26vw; max-height: 360px;}
.home .tradeshow-listing:nth-child(4) {display: none;}
}
@media screen and (min-width: 1280px) {
/* -------------------------------------------------------------------------------------------- */
/* Display Grid - for products/brands/trade shows ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.tradeshow-grid {gap: 36px 2.6667%;}
.tradeshow-listing,
.tradeshow-listing.active-show,
.home .tradeshow-listing.active-show {width: 23%;}
.tradeshow-listing .tradeshow-branding,
.tradeshow-listing.active-show .tradeshow-branding,
.home .tradeshow-listing.active-show .tradeshow-branding {height: 20.7vw;}
.home .tradeshow-listing:nth-child(4) {display: block;}
}
@media screen and (min-width: 1500px) {
.tradeshow-listing a svg {transform: translate(-50%,-100%) scale(1);}
.tradeshow-listing a:hover svg {transform: translate(-50%,0%) scale(1);}
}
/* Drawers ---------------------------------------------- */
.drawer {position: relative; margin: 12px 0;}
.drawer h4.drawer-heading {
margin: 0;
padding: 10px 55px 10px 0;
border-bottom: 1px solid #000700;
cursor: pointer;
font-weight: 400;
font-size: 1.125em;
}
.drawer h4.drawer-heading.drawer-open {
border-bottom: 1px solid #c10230;
color: #c10230;
}
.drawer h4.drawer-heading:after,
.drawer h4.drawer-heading.drawer-open:after {
content: url(../images/arrow-down-black.png);
position: absolute;
right: 14px;
width: 13px;
height: 10px;
-webkit-transition: filter 0.25s ease;
-moz-transition: filter 0.25s ease;
-o-transition: filter 0.25s ease;
transition: filter 0.25s ease;
}
.drawer h4.drawer-heading.drawer-open:after {content: url(../images/arrow-up-red.png);}
.drawer h4.drawer-heading:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 40px;
height: 36px;
border: 1px solid #fff;
border-bottom: none;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.bg-beige .drawer h4.drawer-heading:before {border-color: #f4f3ee;}
.drawer h4.drawer-heading.drawer-open:before {
border: 1px solid #c10230;
border-bottom: none;
}
.drawer .drawer-content {
display: none;
border: 1px solid #c10230;
border-top: none;
}
.drawer .faq-text-answer {padding: 8px 16px 12px;}
/* -------------------------------------------------------------------------------------------- */
/* FAQ page ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.faq-group figure figcaption {
position: relative;
display: block;
width: 100%;
height: auto;
padding: 4px 8px;
background: #fff;
font-size: 0.85em;
font-style: italic;
line-height: 1.3em;
}
/* -------------------------------------------------------------------------------------------- */
/* Contact page ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.contact-hero #map-canvas {height: 475px; width: 100%;}
@media screen and (max-width: 900px) { .contact-hero #map-canvas {height: 400px;} }
@media screen and (max-width: 580px) { .contact-hero #map-canvas {height: 340px;} }
/* -------------------------------------------------------------------------------------------- */
/* Form Styles - Gravity Forms ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.gform_wrapper .gform_heading {display: none;}
/* Form Container Styles ---------------------------------------------- */
.gravity-form .gform_wrapper {margin-bottom: 0;}
.form-section {padding: 0 0 25px;}
.gravity-form .gform_wrapper h3 {
display: inline-block;
margin: 24px 0 0;
padding: 4px 8px 6px;
background: #000700;
transform: skewX(-10deg);
color: #fff;
font-size: 1.9em;
line-height: 1em;
}
.gravity-form.bg-beige .gform_wrapper h3 {color: #f4f3ee;}
.gravity-form.bg-black .gform_wrapper h3 {background: #fff; color: #000700;}
.gravity-form .boxed-content .gform_wrapper h3 {margin-left: -24px; padding-left: 24px; transform: skewX(0deg);}
.gravity-form .gform_wrapper h4,
.gravity-form .gform_wrapper h5 {
display: inline-block;
margin-bottom: 0;
padding: 4px 8px 6px;
border: 1px solid;
font-size: 1em;
font-weight: 400;
line-height: 1em;
}
/* Form Labels ---------------------------------------------- */
.gravity-form .gform_wrapper .top_label .gfield_label,
.gravity-form .gform_wrapper legend.gfield_label {
position: relative;
display: block;
padding: 0;
margin: 0;
color: #000700;
font-weight: 600;
text-transform: uppercase;
}
.bg-black .gravity-form .gform_wrapper .top_label .gfield_label,
.bg-black .gravity-form .gform_wrapper legend.gfield_label {
color: #fff;
}
/* Basic Form Fields ---------------------------------------------- */
.gravity-form .gform_wrapper ul li:before {display: none !important;}
.gravity-form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gravity-form .gform_wrapper textarea,
.gravity-form .gform_wrapper select {
position: relative;
display: block;
margin: 0;
padding: 14px !important;
background: none;
border: 1px solid #000700;
outline: none;
line-height: 1.4em;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.bg-black .gravity-form .gform_wrapper ul li:before {display: none !important;}
.bg-black .gravity-form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.bg-black .gravity-form .gform_wrapper textarea,
.bg-black .gravity-form .gform_wrapper select {
border-color: #fff;
}
.gravity-form textarea {resize: vertical;}
.gravity-form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus,
.gravity-form textarea:focus,
.gravity-form select:focus {
border: 1px solid #c10230;
}
.gravity-form .gform_wrapper .ginput_container_select {position: relative;}
.gravity-form .gform_wrapper .ginput_container_select:after {
content: url(../images/arrow-down-black.png);
position: absolute;
right: 16px;
top: 8px;
width: 13px;
height: 10px;
pointer-events: none;
}
.bg-black .gravity-form .gform_wrapper .ginput_container_select:after {
content: url(../images/arrow-down.png);
filter: brightness(10);
}
.gravity-form .gform_wrapper .gform_fileupload_multifile .gform_drop_area {margin-bottom: 0;}
body .gravity-form .gform_wrapper ul li.gfield {margin-top: 5px;}
/* Half width fields ---------------------------------------------- */
.gravity-form .gform_wrapper .top_label li.gfield.gf_left_half {padding-right: 16px;}
.gravity-form .gform_wrapper .top_label li.gfield.gf_right_half {padding-right: 0; padding-left: 16px;}
.gravity-form .gform_wrapper .top_label li.gfield.gf_left_half textarea,
.gravity-form .gform_wrapper .top_label li.gfield.gf_right_half textarea {
width: 100%;
}
/* Custom Checkboxes - Custom Radio Buttons ---------------------------------------------- */
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox .gchoice,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio .gchoice,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox li,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio li {
display: inline-block;
margin: 0 1% 6px 0;
width: 32.6667%;
}
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox .gchoice:nth-child(3n+3),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio .gchoice:nth-child(3n+3),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox li:nth-child(3n+3),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio li:nth-child(3n+3) {
margin-right: 0;
}
.gravity-form .gform_wrapper .gfield_checkbox .gchoice input,
.gravity-form .gform_wrapper .gfield_checkbox .gchoice input[type=checkbox],
.gravity-form .gform_wrapper .gfield_radio .gchoice input[type=radio],
.gravity-form .gform_wrapper .gfield_checkbox li input,
.gravity-form .gform_wrapper .gfield_checkbox li input[type=checkbox],
.gravity-form .gform_wrapper .gfield_radio li input[type=radio] {
display: none;
}
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox .gchoice label,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio .gchoice label,
.gravity-form .gform_wrapper .gfield:not(.star-rating) ul.gfield_checkbox li label,
.gravity-form .gform_wrapper .gfield:not(.star-rating) ul.gfield_radio li label {
position: relative;
overflow: hidden;
display: block;
padding: 12px 8px;
margin: 0;
width: 100%;
max-width: 100%;
border: 1px solid #000700;
text-align: center;
font-weight: 600;
line-height: 1em;
cursor: pointer;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.gravity-form .gchoice_select_all,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox .gchoice input[type=checkbox]:checked+label,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio .gchoice input[type=radio]:checked+label,
.gravity-form .gform_wrapper .gfield:not(.star-rating) ul.gfield_checkbox li input[type=checkbox]:checked+label,
.gravity-form .gform_wrapper .gfield:not(.star-rating) ul.gfield_radio li input[type=radio]:checked+label {
color: #fff;
background: #c10230;
border: 1px solid #c10230;
padding-right: 25px;
}
.gravity-form .gfield:not(.star-rating) [type="checkbox"]:checked+label:after,
.gravity-form .gfield:not(.star-rating) [type="checkbox"]:not(:checked)+label:after,
.gravity-form .gfield:not(.star-rating) [type="radio"]:checked+label:after,
.gravity-form .gfield:not(.star-rating) [type="radio"]:not(:checked)+label:after {
content: url('data:image/svg+xml; utf8, ');
position: absolute;
top: 50%;
display: inline-block;
width: 20px;
height: 17.6px;
margin: 0 0 0 10px;
transform: translate3d(0,-50px,0);
filter: brightness(1000);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.gravity-form .gfield:not(.star-rating) [type="checkbox"]:checked+label:after,
.gravity-form .gfield:not(.star-rating) [type="radio"]:checked+label:after {
transform: translate3d(0,-50%,0);
}
/* Custom radio/checkboxes for ratings ---------------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_checkbox,
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_radio {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border: 1px solid #000700;
border-right: none;
}
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_checkbox .gchoice,
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_radio .gchoice {
flex-grow: 1;
display: block;
padding: 0;
width: auto !important;
margin: 0 !important;
cursor: pointer;
}
.gravity-form .gform_wrapper .rating.star-rating .gfield_checkbox .gchoice,
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice {
display: inline-block;
padding-right: 12px;
width: auto;
margin: 0;
cursor: pointer;
}
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_checkbox .gchoice label,
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_radio .gchoice label {
padding: 10px 3px;
width: 100%;
border: none;
border-right: 1px solid #000;
text-align: center;
line-height: 1em;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
cursor: pointer;
}
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_checkbox .gchoice input[type=checkbox]:checked + label,
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_radio .gchoice input[type=radio]:checked + label {
padding: 10px 3px;
background: #C12032;
border: none;
border-right: 1px solid #000700;
color: #fff;
}
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_checkbox .gchoice input[type=checkbox] + label:after,
.gravity-form .gform_wrapper .rating:not(.star-rating) .gfield_radio .gchoice input[type=radio] + label:after {
display: none;
}
/* Custom radio/checkboxes for Star ratings ---------------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio {display: block; width: 100%;}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice {padding-right: 12px !important;}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice label {
position: relative;
display: block;
margin: 10px 0;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 14px solid #C7C9C9;
border-left: 20px solid transparent;
transform: rotate(35deg);
color: transparent;
line-height: 1em;
cursor: pointer;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice label:before {
content: '';
position: absolute;
top: -9px;
left: -13px;
display: block;
height: 0;
width: 0;
border-bottom: 16px solid #C7C9C9;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
transform: rotate(-35deg);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice label:after {
content: '';
position: absolute;
top: .6px;
left: -21px;
display: block;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 14px solid #C7C9C9;
border-left: 20px solid transparent;
transform: rotate(-70deg);
color: #C7C9C9;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice.rate-hover label {border-bottom: 14px solid #000700 !important;}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice.rate-hover label:before {border-bottom: 16px solid #000700 !important;}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice.rate-hover label:after {border-bottom: 14px solid #000700 !important; color: #000700 !important;}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice.rated label {border-bottom: 14px solid #C12032;}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice.rated label:before {border-bottom: 16px solid #C12032;}
.gravity-form .gform_wrapper .rating.star-rating .gfield_radio .gchoice.rated label:after {border-bottom: 14px solid #C12032; color: #C12032;}
/* Star Ratings - Thunderbolts ---------------------------------------- */
.gravity-form .gform_wrapper .rating.star-rating.thunder-rating .gfield_radio .gchoice label {
width: 25px;
max-width: initial;
height: 47px;
background: #c7c9c9;
border: none;
transform: rotate(0);
clip-path: polygon(2.4px 0, 0.7px 8.1px, 8.1px 8.1px, 1.3px 24.4px, 9.3px 24.4px, 0 47px, 20.4px 16.3px, 12.7px 16.3px, 16.1px 8.1px, 23.3px 8.1px, 25px 0, 2.4px 0);
}
.gravity-form .gform_wrapper .rating.star-rating.thunder-rating .gfield_radio .gchoice.rate-hover label,
.gravity-form .gform_wrapper .rating.star-rating.thunder-rating .gfield_radio .gchoice.rated.rate-hover label {border-bottom: none !important; background: #000700;}
.gravity-form .gform_wrapper .rating.star-rating.thunder-rating .gfield_radio .gchoice.rated label {border-bottom: none !important; background: #c10230;}
.gravity-form .gform_wrapper .rating.star-rating.thunder-rating .gfield_radio .gchoice label:before {display: none;}
.gravity-form .gform_wrapper .rating.star-rating.thunder-rating .gfield_radio .gchoice label:after {display: none;}
/* File Upload button ---------------------------------------------- */
.gravity-form .gform_wrapper .ginput_container_fileupload {position: relative;}
.gravity-form .gform_wrapper.gravity-theme .gfield input.medium,
.gravity-form .gform_wrapper.gravity-theme .gfield select.medium,
.gravity-form .gform_wrapper .ginput_container_fileupload input.medium {
position: relative;
display: block;
width: 100%;
padding: 12px !important;
background: none;
border: 1px solid #000700;
outline: none;
line-height: 1.3em;
-webkit-appearance: none;
-webkit-border-radius: 0;
cursor: pointer;
}
/* Other Form Styles ---------------------------------------------- */
.gravity-form .gform_wrapper ul.gform_fields li.gfield {padding-right: 0;}
.gravity-form .gform_wrapper .field_description_below .gfield_description {margin: 0; padding: 0; font-size: 12px;}
.gravity-form .gform_wrapper .gfield_required {color: #cc523e;}
/* Submit Button ---------------------------------------------- */
.gravity-form .gform_wrapper .gform_footer {text-align: center;}
.gravity-form .gform_wrapper .gform_footer input.button,
.gravity-form .gform_wrapper .gform_footer input[type=submit],
.gravity-form .gform_wrapper .gform_page_footer input.button,
.gravity-form .gform_wrapper .gform_page_footer input[type=submit] {
display: inline-block;
width: fit-content;
padding: 16px 32px;
margin: 0;
border: 2px solid #c10230;
background: #c10230;
color: #fff;
font-weight: 400;
text-transform: uppercase;
line-height: 1em;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.gravity-form .gform_wrapper .gform_footer input.button:hover,
.gravity-form .gform_wrapper .gform_footer input[type=submit]:hover,
.gravity-form .gform_wrapper .gform_page_footer input.button:hover,
.gravity-form .gform_wrapper .gform_page_footer input[type=submit]:hover {
background: #840020;
}
.gravity-form .gform_confirmation_message {padding: 16px;}
/* Form Errors ---------------------------------------------- */
.gravity-form .gform_wrapper div.validation_error {
background: none;
border: none;
padding: 10px 15px;
color: #c10230;
font-weight: 400;
font-size: 0.85em;
line-height: 1.45em;
}
.gravity-form .gform_wrapper.gform_validation_error .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) {
max-width: 100% !important;
}
.gravity-form .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description {
padding-bottom: 0;
}
.form-popup .gform_wrapper div.validation_error {
display: none;
}
.gravity-form .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container,
.gravity-form .gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label {
margin-top: 0;
}
.gravity-form .gform_wrapper li.gfield.gfield_error,
.gravity-form .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
padding: 0;
border: none;
background: none;
}
.gravity-form .gform_wrapper .gfield_error .gfield_label {
color: #c10230;
}
.gravity-form .gform_wrapper .validation_message {
color: #c10230;
font-weight: 400;
}
.gravity-form .gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gravity-form .gform_wrapper li.gfield_error textarea {
border: 1px solid #c10230;
}
.gravity-form .gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus,
.gravity-form .gform_wrapper li.gfield_error textarea:focus {
border: 1px solid #c10230;
}
/* -------------------------------------------------------------------------------------------- */
/* Find a Dealer banner link ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.find-a-dealer {
position: relative;
overflow: hidden;
}
.find-a-dealer a.find-dealer-button-title {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: block;
margin: 0;
transform: translate3d(-50%,-50%,0);
}
.find-a-dealer a.find-dealer-button-title h2 {
margin: 0;
transform: skew(0,-10deg) scale(0.75);
font-size: 6em;
line-height: 0.8em;
font-style: italic;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}
.find-a-dealer a.find-dealer-button-title:hover h2 {color: #c10230;}
.find-a-dealer a.find-dealer-button-title h2 span {
position: relative;
display: block;
padding-left: 60px;
-webkit-transition: padding 0.25s ease;
-moz-transition: padding 0.25s ease;
-o-transition: padding 0.25s ease;
transition: padding 0.25s ease;
}
.find-a-dealer a.find-dealer-button-title:hover h2 span {padding-left: 100px;}
#map-canvas div {position: initial;}
#map-canvas {
position: relative;
display: block;
width: 100%;
height: 512px;
}
.find-a-dealer div div a {
position: initial;
top: initial;
left: initial;
}
@media screen and (min-width: 640px) {
.find-a-dealer a.find-dealer-button-title h2 {
transform: skew(0,-10deg) scale(1);
}
}
/* Thank You title ---------------------------------------------- */
/* ------------------------------------------------------------------------------- */
section.thank-you-container {padding: 0;}
.thank-you-title-container {height: 87vw;}
h1.thank-you-page-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) skew(0deg, -6deg);
opacity: 1;
max-width: initial;
font-size: 42vw;
text-align: center;
text-indent: -4vw;
line-height: 0.8em;
color: #000700;
text-transform: uppercase;
text-shadow: 8px 8px rgba(0,7,0,0.25);
-webkit-text-stroke: 1px #000700;
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: thankyoutext 4s linear normal;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
@keyframes thankyoutext {
0% {line-height: 1.8em; opacity: 0; pointer-events: none;}
14% {line-height: 1.8em; opacity: 0;}
17% {line-height: 0.7em;}
19% {line-height: 0.9em;}
21% {line-height: 0.8em; opacity: 1;}
40% {color: #000700;}
70% {color: #c10230;}
75% {color: #c10230;}
100% {line-height: 0.8em; opacity: 1; color: #000700;}
}
/* Thank You custom message box ---------------------------------------------- */
/* ------------------------------------------------------------------------------- */
.thank-you-message-container {margin: 0; padding: 0 0 24px;}
.thank-you-message-box {
position: relative;
z-index: 2;
display: block;
width: 640px;
max-width: 90%;
margin: 0 auto;
padding: 12px 18px 16px;
background: #fff;
border: 1px solid #000700 !important;
border-radius: 0.25rem;
box-shadow: 8px 8px rgba(0,7,0,0.25) !important;
transform: translate3d(0,-24px,0);
line-height: 1.25em;
}
.additional-message {
display: none;
padding: 24px 32px;
margin-top: 32px;
}
.additional-message .button-wrap {margin-top: 18px;}
@media screen and (min-width: 640px) {
.thank-you-title-container {height: 528px;}
h1.thank-you-page-title {
-webkit-text-stroke: 2px #000700;
font-size: 269px;
text-indent: initial;
}
.thank-you-message-box {
transform: translate3d(0,-48px,0);
}
}
/* -------------------------------------------------------------------------------------------- */
/* Footer ---------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.footer-brush,
.promotion-footer-brush {
position: absolute;
bottom: 0;
left: 0;
z-index: 15;
display: block;
width: 100%;
height: 40px;
background: url(../images/footer-brush.png) repeat-x center bottom;
pointer-events: none;
}
footer {
position: relative;
overflow: hidden;
width: 100%;
padding: 50px 0 55px;
color: #fff;
background: #000700;
}
footer .wrapper {z-index: 2;}
.footer-branding {position: relative;}
.footer-branding-slogan {position: relative;}
.footer-branding-logo {position: relative; margin-bottom: 48px;}
.footer-branding-slogan img {position: relative; width: 100%; height: auto;}
img.footer-slogan-one-line {display: none;}
img.footer-slogan-two-lines {display: none;}
img.footer-slogan-three-lines {display: block; width: 200px; margin: 0 auto;}
.footer-branding-logo a svg.full-logo {
display: block;
width: 260px;
height: 64.5px;
margin: 48px auto 12px;
fill: #c10230;
}
.footer-branding-logo a svg.full-logo .logo-color-two {fill: #fff;}
#footer-menu {margin-bottom: 60px; text-align: center;}
#footer-menu li {display: block; margin: 0 10px;}
#footer-menu li a {
color: #a4a7a9;
font-family: "urw-din", sans-serif;
font-weight: 600;
text-transform: uppercase;
}
#footer-menu li a:hover {color: #fff;}
#footer-menu ul {margin-bottom: 20px;}
#footer-menu li ul li {display: block;}
#footer-menu li ul li a {
font-family: "urw-din", sans-serif;
font-weight: 400;
font-size: 0.85em;
text-transform: initial;
}
#footer-menu .phone-link {display: none;}
footer p.copyright {
position: relative;
display: block;
margin-bottom: 28px;
color: #666666;
font-size: 0.65em;
font-weight: 500;
line-height: 1.35em;
text-align: center;
}
footer p.copyright a {color: #666666;}
footer p.copyright a:hover {color: #a4a7a9;}
.footer-buttons {
display: block;
padding: 0 0 5vw;
margin-right: 100px;
}
.footer-buttons-wrap,
.footer-social {
display: block;
width: 100%;
}
.footer-social {text-align: center;}
.footer-social a {
display: inline-block;
height: 47px;
padding: 8.5px 3px;
}
.footer-social a svg {
fill: #fff;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.footer-social a:hover svg {fill: #c10230;}
footer .tire-tracks {
position: absolute;
top: 36px;
left: 0;
z-index: 1;
display: block;
width: calc(100% + 131px);
height: 121px;
background: url(../images/tire-pattern-footer.svg) repeat-x top center;
animation: trackmove 12s infinite forwards linear;
}
@keyframes trackmove {
0% {transform: translateX(0);}
100% {transform: translateX(-131px);}
}
/* Landing page badge icon footer ------------------------------------------- */
.promotion-footer-icon .tsm-badge {overflow: initial;}
.badge-uprights {
fill: #c10230;
-webkit-transition: fill 1s ease 0s;
-moz-transition: fill 1s ease 0s;
-o-transition: fill 1s ease 0s;
transition: fill 1s ease 0s;
}
.promotion-footer-icon.footer-badge-leave .badge-uprights {
fill: #fff;
-webkit-transition: fill 0.1s ease 0.05s;
-moz-transition: fill 0.1s ease 0.05s;
-o-transition: fill 0.1s ease 0.05s;
transition: fill 0.1s ease 0.05s;
}
.bolt-container {
-webkit-transition: transform 0.05s ease 0s;
-moz-transition: transform 0.05s ease 0s;
-o-transition: transform 0.05s ease 0s;
transition: transform 0.05s ease 0s;
}
.promotion-footer-icon:hover .bolt-container {
transform: translate3d(4px,-20px,0);
-webkit-transition: transform 1s ease 0s;
-moz-transition: transform 1s ease 0s;
-o-transition: transform 1s ease 0s;
transition: transform 1s ease 0s;
}
.badge-bolt {fill: #fff;}
.promotion-footer-icon:hover .badge-bolt {animation: boltshake .125s infinite forwards ease-in;}
@keyframes boltshake {
0% {transform: translateX(0);}
25% {transform: translateX(-1px);}
50% {transform: translateX(0);}
75% {transform: translateX(1px);}
100% {transform: translateX(0);}
}
.promotion-footer-main-content h2 {margin: 12px 0 18px;}
#promotion-footer p.copyright {
margin: 12px 0 18px;
font-size: 0.65em;
line-height: 1.65em;
}
/* footer queries ------------------------------------------- */
@media screen and (min-width: 580px) {
footer {padding-bottom: 0;}
}
@media screen and (min-width: 600px) {
.footer-branding {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
align-items: flex-start;
column-gap: 32px;
margin-bottom: 32px;
}
img.footer-slogan-two-lines {display: block; max-width: 340px;}
img.footer-slogan-three-lines {display: none;}
.footer-branding-logo {margin: 0;}
.footer-branding-logo a svg.full-logo {margin: 0 0 12px;}
#footer-menu {text-align: left;}
#footer-menu li {display: inline-block; vertical-align: top; margin: 0 20px 0 0;}
.footer-buttons {padding: 10px 0;}
footer .tire-tracks {top: initial; bottom: 0;}
}
@media screen and (min-width: 900px) {
footer p.copyright {
position: absolute;
right: 0;
bottom: 0;
text-align: right;
}
.footer-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32px 0;
}
.footer-buttons-wrap, .footer-social {width: auto;}
}
@media screen and (min-width: 1000px) {
.footer-branding {margin-bottom: 0;}
.footer-branding-slogan {width: 580px;}
img.footer-slogan-one-line {display: block;}
img.footer-slogan-two-lines {display: none;}
.footer-branding .footer-social {
position: absolute;
bottom: -60px;
left: 0;
width: 100%;
}
}
/* --------------------------------------------------------------------
// Country Specific
-------------------------------------------------------------------- */
.canada-block {
display: block;
padding: 24px 30px;
background: #c10230;
color: #fff;
}
.canada-block img {
position: absolute;
top: 50%;
left: 30px;
display: block;
margin-top: -35px;
}
.canada-block div {
display: block;
padding-left: 110px;
}
/* --------------------------------------------------------------------
// Fade in on scroll
-------------------------------------------------------------------- */
.fadeIn {
position: relative;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 0.7s;
animation-fill-mode: forwards;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
/* --------------------------------------------------------------------------------------- */
/* Cart Styles ---------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
.removeItem {
position: absolute;
top: -15px;
right: -15px;
width: 25px;
height: 25px;
background: #c10230;
color: #fff;
text-align: center;
font-size: 25px;
cursor: pointer;
z-index: 100;
}
.removeItem:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
color: #FFF;
line-height: 25px;
text-align: center;
z-index: 100;
}
.removeItem:hover {background: #000;}
.cartFtNote {padding: 60px 0 40px 0; text-align: center;}
.col.form-field {
position: relative;
display: block;
margin: 8px 0;
}
.textarea {
border: 1px solid #000700;
width: 100%;
min-height: 150px;
padding: 10px 15px;
line-height: 1.2em;
outline: none;
}
.input-field {
border: 1px solid #000700;
width: 100%;
padding: 10px 15px;
line-height: 1.2em;
outline: none;
}
.bttnspacingthin {margin: 20px 0;}
.bttnspacingthin button {
max-width: 300px;
width: 100%;
text-align: left;
}
.bttnspacinglong {margin: 20px 0;}
.bttnspacinglong button {
max-width: 350px;
width: 100%;
text-align: left;
}
.bottomAlign .row .col {height: 100%;}
.address-field-container input {
display: block;
padding: 8px;
margin: 4px 0;
width: 100%;
max-width: 100%;
border: 1px solid #000700;
font-weight: 600;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
background: none;
}
.address-field-container select {
border: 1px solid #000700;
background: url(../images/arrow-down.png) center right 20px no-repeat;
background-size: 15px;
padding: 8px;
margin: 4px 0;
display: inline-block;
width: 100%;
color: #000700;
font-weight: 600;
border-radius: 0;
position: relative;
font-size: 16px;
}
.small-note {font-size: 12px; text-transform: uppercase;}
.viewOnly .removeItem {display: none !important;}
.viewOnly .qtyInput {
border: none !important;
padding: 0;
background: none;
pointer-events: none !important;
font-weight: 400;
font-size: 1em !important;
text-align: left;
}
.basic_list {
margin: 0;
padding: 0;
font-size: 15px;
line-height: 1.2em;
}
.basic_list li {margin: 0 !important; padding: 0 !important;}
.basic_list li:before,
.basic_list li:after {
display: none !important;
}
.colList {
display: grid;
grid-template-columns: calc(33.3333333% - 10px) calc(33.3333333% - 10px) calc(33.3333333% - 10px);
grid-gap: 45px 15px;
}
.account h3 {text-transform: inherit;}
.brands-list figure {margin-left: 0.7%; margin-right: 0.7%;}
.brands-list figure .featImg img {max-width: 85%;}
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline: none;
}
form {display: inline-block; width: 100%;}
.loaderOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(255, 255, 255, 0.7);
z-index: 100;
display: none;
}
.loaderPopup {
display: none;
width: 74px;
background: #fff;
height: 74px;
position: fixed;
z-index: 101;
text-align: center;
left: calc(50% - 37px);
top: calc(50% - 37px);
padding: 10px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 45px -12px rgba(0, 0, 0, 0.75);
}
.loaderPopup img {width: 54px; height: 54px;}
/*--------------------------------------------------------------
# Updated Account info (invoice pages)
--------------------------------------------------------------*/
.account-header-info {
position: relative;
display: block;
margin: 12px 0 8px !important;
font-size: 0.85em;
line-height: 1.35em;
}
.account-header-info li {display: inline-block;}
.account-header-info li:after {content: ' | ';}
.account-header-info li:last-child:after {display: none;}
.account-grid {
position: relative;
display: block;
border: 2px solid #000700;
box-shadow: 8px 8px 0 rgba(0,7,0,0.15);
}
.account-grid-row {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-evenly;
align-content: stretch;
margin: 0;
padding: 0;
border-bottom: 1px solid #000700;
}
.account-grid-row.account-grid-customer-details {flex-wrap: wrap; flex-grow: 1;}
.account-grid-row:last-child {border-bottom: 0;}
.account-grid-row.orderHeading {border-bottom: 0;}
.account-grid-cell {
flex-grow: 1;
padding: 6px 16px;
border-right: 1px solid #000700;
line-height: 1.25em;
}
.account-grid-cell:last-child {border-right: none;}
.account-grid-date-created .account-grid-cell {width: 50%;}
.account-grid-cell.account-grid-status {flex-grow: initial; padding: 0;}
.account-grid-cell.account-grid-status div {
display: block;
height: 100%;
margin: 0;
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
.account-grid-cell.account-grid-title {
background: #000700;
color: #fff;
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
section .account-grid-cell h1 {
display: inline-block;
vertical-align: bottom;
margin-bottom: 3px;
font-size: 2.5em;
line-height: 1em;
text-align: left;
}
section .account-grid-cell a.invoice-button {
position: relative;
display: inline-block;
vertical-align: bottom;
margin: 4px;
padding: 4px;
background: #c10230;
color: #fff;
line-height: 1em;
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
}
.account-grid-row.account-grid-dates .account-grid-cell {width: 50%;}
.account-grid-row.account-grid-customer-details .account-grid-cell:not(.account-grid-address) {width: 100%; padding: 0;}
.account-grid-row.account-grid-customer-details .account-grid-cell.account-grid-address {width: 50%; padding: 0;}
.account-grid-row.account-grid-customer-details .account-grid-cell .account-grid-cell-subhead {
margin: 0;
padding: 8px 16px;
background: #000700;
color: #fff;
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
.account-grid-row.account-grid-customer-details .account-grid-cell ul li,
.account-grid-row.account-grid-customer-details .account-grid-cell.account-grid-address p,
.account-grid-row .address-field-container {
margin: 0;
padding: 6px 16px;
border-bottom: 1px solid #ccc;
}
.account-grid-row.account-grid-customer-details .account-grid-cell ul li:last-child,
.account-grid-row.account-grid-customer-details .account-grid-cell.account-grid-address p:last-child {border-bottom: 0;}
.account-grid-row.account-grid-customer-details .account-grid-cell ul li:before {display: none;}
.account-grid-row.account-grid-dates .account-grid-cell label,
.account-grid-row.account-grid-customer-details .account-grid-cell ul li label,
.account-grid-row .address-field-container label {
display: block;
margin-top: 2px;
font-size: 0.7em;
line-height: 1em;
text-transform: uppercase;
}
.form-label-note {
font-size: 0.85em;
font-style: italic;
text-transform: initial;
}
.make-changes {font-size: 0.65em; line-height: 1em;}
.make-changes a {padding: 2px 4px; border: 1px solid #c10230;}
@media screen and (min-width: 768px) {
.account-grid-row.account-grid-customer-details .account-grid-cell {width: 25% !important;}
.address-field-container-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.address-field-container-row .address-half-field {width: 50%;}
.address-field-container-row .address-half-field:first-child {border-right: 1px solid #ccc;}
.account-grid-row.account-grid-customer-details {flex-grow: initial;}
}
@media print {
.account-grid {margin-bottom: 32px;}
.account-grid-row.account-grid-customer-details .account-grid-cell {width: 25% !important;}
}
/*--------------------------------------------------------------
# Account page invoices
--------------------------------------------------------------*/
.account-invoices {
position: relative;
display: block;
margin: 12px 0 0;
border: 2px solid #000700;
box-shadow: 8px 8px 0 rgba(0,7,0,0.15);
}
.account-invoice {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
width: 100%;
border-bottom: 2px solid #000700;
}
.account-invoice:last-child {border-bottom: none;}
.account-invoice-cell {
flex-grow: 1;
width: 50%;
margin: 0;
padding: 8px 16px;
line-height: 1em;
}
.account-invoice-cell.account-invoice-mfgs {width: 100%; border-top: 1px solid #ccc;}
body .cartSection .account-invoice-cell.totalRow {background: #f4f3ee; color: #000700;}
.account-invoice-cell.buttonFull {padding: 0; background: #c10230;}
.account-invoice-cell.buttonFull a.button {
width: 100%;
height: 100%;
padding: 20px 0;
border: none;
font-size: 0.65em;
line-height: 1em;
text-align: center;
}
.account-invoice-cell label {
display: block;
margin-top: 2px;
font-size: 0.65em;
line-height: 1em;
text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.account-invoice {border-bottom: 1px solid #000700;}
.account-invoice-cell,
.account-invoice-cell.account-invoice-mfgs {width: 20%; border-top: none;}
.account-invoice-cell.buttonFull {width: 128px;}
}
/*--------------------------------------------------------------
# Updated Cart listing styles
--------------------------------------------------------------*/
.cart-form-note {font-size: 0.85em; line-height: 1.65em; margin: 0 0 32px;}
body .cartItem {
position: relative;
display: block;
margin-bottom: 32px;
}
body .cartSection .cart-item-header {
position: relative;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: flex-end;
}
body .cartSection .cart-item-header h4,
body .cartSection .cart-item-header h5 {
position: relative;
top: initial;
left: initial;
display: block;
font-family: "urw-din-condensed", sans-serif;
line-height: 1em;
color: #fff;
}
body .cartSection .cart-item-header h4 {
margin: 0;
padding: 4px 16px 6px;
background: #c10230;
font-size: 1.5em;
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
body .cartSection .cart-item-header h5 {
padding: 8px;
margin: 0 32px 0 0;
background: #000700;
text-transform: uppercase;
font-size: 0.85em;
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
body .cartSection .removeItem {
top: initial;
bottom: 0;
right: 0;
box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
body .cartSection .cart-item-content-box {
float: none;
position: relative;
z-index: 2;
display: block;
background: #f4f3ee;
box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
}
body .cartSection .cart-item-column {
flex-grow: 1;
position: relative;
display: block;
padding: 0;
background: #fff;
font-size: 0.85em;
}
body .cartSection .cart-item-prices {
float: none;
width: 100%;
background: #f4f3ee;
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
body .cartSection .cart-total-row,
body .cartSection .cart-total-box-row {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
padding: 8px 16px;
border-bottom: 1px solid #ccc;
}
body .cartSection .cart-total-row div {line-height: 1.3em;}
body .cartSection .cart-total-row .cart-total-value,
body .cartSection .cart-total-box-row .cart-total-box-value {text-align: right;}
body .cartSection .totalRow {
background: #000700;
border-bottom: none;
color: #fff;
font-weight: 600;
text-transform: uppercase;
}
body .cartSection .cart-item-option-row {
position: relative;
display: block;
margin: 0;
border-bottom: 1px solid #ccc;
}
body .cartSection .cart-item-option-row:last-child {border-bottom: none;}
body .cartSection .cart-item-option-row div {padding: 8px 16px;}
body .cartSection .cart-item-option-row div.cart-item-option-selection:has(.qtyInput) {padding-top: 5px; padding-bottom: 5px;}
body .cartSection .cart-item-option-row div.cart-item-option-label {background: #f4f3ee; font-weight: 600;}
body .cartSection .cart-item-option-row div.cart-item-option-selection,
body .cartSection .cart-item-option-row div.cart-item-option-label label {display: block; font-size: 1em; line-height: 1.3em;}
body .cartSection .cart-item-option-row div.cart-item-option-selection .partDisplay {font-size: 0.65em;}
body .viewOnly .qtyInput {text-align: left !important; font-size: 1em !important; font-weight: 400 !important;}
body .cartTotalBox {
max-width: 320px;
margin: 0 0 16px auto;
}
body .cartSection.cartTotalBox .totalRow {
background: #c12030;
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
body .wrapBox {
position: relative;
border: 2px solid #000700;
box-shadow: 8px 8px 0 rgba(0,7,0,0.15);
}
.cart-checkout-button {
position: relative;
display: block;
max-width: 320px;
width: 100%;
margin: 0 0 0 auto;
}
.cart-checkout-button a.button {width: 100%;}
body.page-template-quote .cartSection .cart-item-prices,
body.page-template-quote .cartSection.cartTotalBox .wrapBox,
body.page-template-page-finalize-order .cartSection .cart-item-prices,
body.page-template-page-finalize-order .cartSection.cartTotalBox .wrapBox {display: none;}
@media screen and (min-width: 580px) {
body .cartSection .cart-item-option-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: stretch;
}
body .cartSection .cart-item-option-row div,
body .cartSection .cart-total-row {padding: 12px 16px;}
body .cartSection .cart-item-option-row div.cart-item-option-label {width: 200px; background: none; border-right: 1px solid #ccc;}
}
@media screen and (min-width: 768px) {
body .cartSection .cart-item-content-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
}
body .cartSection .cart-item-option-row:nth-child(-n+2) {border-bottom: 1px solid #ccc;}
body .cartSection .cart-item-column {width: calc(100% - 256px);}
body .cartSection .cart-item-prices {width: 256px; margin-top: auto;}
}
@media print {
body .cartSection .cart-item-option-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: stretch;
}
body .cartSection .cart-item-option-row:nth-child(-n+2) {border-bottom: 1px solid #ccc;}
body .cartSection .cart-item-option-row div.cart-item-option-label {width: 200px; background: none; border-right: 1px solid #ccc;}
body .cartSection .cart-item-content-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
}
body .cartSection .cart-item-column {width: calc(100% - 256px);}
body .cartSection .cart-item-prices {width: 256px; margin-top: auto;}
#invoice-comments h3 {margin: 0 0 8px; font-size: 16px;}
#invoice-comments, #invoice-comments p {font-size: 12px !important; line-height: 1.35em !important;}
}
/*--------------------------------------------------------------
# Quick Order
--------------------------------------------------------------*/
.quickOrder .head {
width: 100%;
border: 1px solid #a6acb6;
display: inline-block;
float: left;
max-height: 54px;
margin: 5px 0;
}
.quickOrder .head .brand {
width: 65px;
height: 44px;
float: left;
}
.quickOrder .head h2 {
font-size: 18px;
line-height: 44px;
font-weight: 500;
padding: 0 0 0 10px;
margin: 0;
float: left;
}
.quickOrder .opener {
display: inline-block;
width: 100%;
padding: 5px;
cursor: pointer;
}
.quickOrder .head .plus {
float: right;
width: 45px;
height: 44px;
color: #a6acb6;
opacity: 0.2;
text-align: center;
line-height: 44px;
font-size: 44px;
font-weight: 200;
transition: all 0.3s ease 0s;
cursor: pointer;
}
.quickOrder .head .plus:hover {opacity: 1;}
.quickOrder .prodItem .wrap {
width: calc(100% - 20px);
border: 1px solid #e8ecef;
padding: 15px 15px 0 15px;
display: inline-block;
margin: 1px 10px;
}
.quickOrder .top .titles {float: left;}
.quickOrder .top .info {
max-height: 27px;
opacity: 0.6;
transition: all 0.3s ease 0s;
cursor: pointer;
float: right;
}
.quickOrder .top .info:hover {opacity: 1; transition: all 0.3s ease 0s;}
.quickOrder .items {
width: 100%;
display: inline-block;
margin: 5px 0 0 0;
}
.quickOrder .items,
.quickOrder .body {
display: none;
}
.quickOrder .body {
border-top: 1px solid #e8ecef;
margin-top: 0;
padding-top: 15px;
}
.quickOrder .prodItem h2 {
display: block;
width: 100%;
font-size: 16px;
line-height: 16px;
text-transform: uppercase;
font-weight: 500;
padding: 0 0 5px 0;
}
.quickOrder .prodItem span {
display: block;
text-transform: uppercase;
color: #a5adb7;
font-size: 10px;
line-height: 10px;
font-weight: 500;
padding: 0 10px 15px 10px;
letter-spacing: 0.5px;
}
.quickOrder .productSingle .options {margin: 0 0 15px 0;}
.quickOrder .productSingle .optionsWrap {
padding: 6px 10px;
border: 1px solid #E0E6EA;
}
.quickOrder .productSingle .options .line label,
.quickOrder .productSingle .options .line select {
font-size: 13px;
line-height: 13px;
}
.quickOrder .productSingle .options .line label {padding: 5px 8px;}
.quickOrder .productSingle .options .line select {padding: 7px 8px;}
.quickOrder .productSingle .submitNote p {font-size: 8px; line-height: 10px;}
.quickOrder .productSingle .submitWrap {width: 65%;}
.quickOrder .productSingle .qty {
font-size: 13px;
line-height: 20px;
width: 25%;
height: 30px;
}
.quickOrder .productSingle button {
width: 100px;
padding: 4px 2px 5px 2px;
font-size: 13px;
line-height: 13px;
width: 75%;
height: 30px;
}
.quickOrder ul.compatibility li {
font-size: 10px !important;
line-height: 10px !important;
padding: 2px 6px !important;
margin: 2.5px 2.5px !important;
float: left;
}
.quickOrder .mainImage .cell {
width: 100%;
height: 300px;
text-align: center;
}
.quickOrder .mainImage .cell img {max-height: 100%; max-width: 100%;}
.quickOrder .thumbs {
margin-bottom: 0px !important;
-webkit-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 0.55) !important;
-moz-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 0.55) !important;
box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 0.55) !important;
display: inline-block;
padding-bottom: 15px;
}
.quickOrder .thumbs .cell {height: 50px !important;}
.quickOrder .thumbs img {max-height: 40px !important;}
.productSingle .options {margin: 0;}
.productSingle .optionsWrap {display: inline-block; width: 100%;}
.productSingle .options .line {
position: relative;
display: inline-block;
width: 100%;
}
.productSingle .options .productOptions .line {margin-bottom: 8px;}
.productSingle .options .line label {
display: inline-block;
width: 100%;
padding: 5px 20px 5px 0;
font-weight: 600;
font-size: 16px;
line-height: 1.125em;
}
.productSingle .options .line select {
border: 1px solid #000700;
background: url(../images/arrow-down.png) center right 20px no-repeat;
background-size: 15px;
padding: 5px 5px 5px 20px;
display: inline-block;
width: 100%;
line-height: 30px;
color: #52595B;
height: 49px;
border-radius: 0;
position: relative;
}
.productSingle .options .optionsCheckboxes {
position: relative;
display: block;
}
.productSingle .options .optionsCheckboxes .product-option-checkbox {
position: relative;
display: inline-block;
margin: 0 4px 4px 0;
}
.productSingle .options .optionsCheckboxes .product-option-checkbox input[type=checkbox] {display: none;}
.productSingle .options .optionsCheckboxes .product-option-checkbox label {
position: relative;
overflow: hidden;
display: block;
padding: 8px 12px;
margin: 0;
width: 100%;
max-width: 100%;
border: 1px solid #000700;
font-weight: 400;
line-height: 1em;
cursor: pointer;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.productSingle .options .optionsCheckboxes .product-option-checkbox input[type=checkbox]:checked+label {
background: #c10230;
border-color: #c10230;
color: #fff;
}
.productSingle .options .line input[type="text"] {
background-size: 15px;
border: 1px solid #000700;
background: none;
padding: 5px 5px 5px 20px;
display: inline-block;
width: 100%;
float: right;
line-height: 30px;
color: #52595B;
}
.productSingle .submitNote {
display: inline-block;
width: 100%;
padding: 8px 12px;
background: #f4f3ee;
text-align: left;
}
.productSingle .submitNote p {
text-transform: initial;
font-size: 0.7em;
line-height: 1.5em;
margin: 0;
}
.productSingle .submitWrap {
display: inline-block;
width: 100%;
padding: 0;
}
.productSingle .submitWrap .col_qty {width: 180px;}
.productSingle .submitWrap .col_add .button {
height: 49px;
width: calc(100% - 150px);
text-align: left;
padding-left: 20px;
}
.productSingle .submitWrap .col_add .button.full {width: 100%;}
.productSingle .submitWrap label {
display: inline-block;
width: 100%;
font-weight: 600;
font-size: 16px;
line-height: 1.125em;
}
.productSingle .submitWrap .priceBox {
color: #c10230;
float: left;
width: 150px;
border: 1px solid #c10230;
line-height: 49px;
padding: 0 10px;
height: 49px;
position: relative;
text-align: center;
}
.productSingle .submitWrap .priceBox span {
display: inline-block;
position: relative;
top: -15px;
display: inline-block;
font-weight: 600;
font-size: 1.5vh;
}
.productSingle .submitWrap .priceBox h2 {
display: inline-block;
font-style: normal;
line-height: 46px;
font-size: 3vh;
}
.productSingle .submitWrap.full {max-width: 100%; width: 100%;}
.productSingle .qty {
float: left;
width: 85px;
border: 1px solid #000700;
text-align: center;
line-height: 36px;
height: 49px;
}
.productSingle .image {
text-align: center;
padding: 60px 0 30px 0;
position: relative;
}
.productSingle .image img {
max-height: 490px;
max-width: 100%;
height: auto;
width: auto;
}
.productSingle .image .cell {height: 500px;}
.productSingle .thumbs {
padding: 0;
margin: 0 20px 40px 20px;
-webkit-box-shadow: 0px 0px 30px -6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 30px -6px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 30px -6px rgba(0, 0, 0, 0.75);
display: inline-block;
width: calc(100% - 40px);
background: #fff;
}
.productSingle .thumbs .col {
float: left;
width: 25%;
border-right: 1px solid #e8ecef;
border-bottom: 1px solid #e8ecef;
text-align: center;
padding: 5px 5px 0 5px;
cursor: pointer;
}
.productSingle .thumbs .cell {height: 100px;}
.productSingle .thumbs img {max-height: 75px; max-width: 85%;}
.productSingle .tabContent {padding: 20px 0;}
.productSingle .tabContent p,
.productSingle .tabContent ul li {
font-size: 24px;
line-height: 30px;
}
.productSingle .tabContent ul {padding: 15px 0;}
/*--------------------------------------------------------------
# Cart
--------------------------------------------------------------*/
.cart .heading {
text-transform: uppercase;
color: #a5adb7;
font-size: 10px;
line-height: 10px;
font-weight: 500;
letter-spacing: 0.5px;
padding: 0 15px;
background: none;
}
.cart .item {
border: 1px solid #e8ecef;
padding: 5px 15px;
margin: 0 0 10px 0;
}
.cart .item.active {border: 1px solid #B91D30;}
.productBackground {
display: inline-block;
width: 100%;
float: left;
background-size: 430px !important;
}
.cart .lst {
margin: 0;
padding: 0 10px;
display: inline-block;
width: 100%;
float: left;
}
.cart .lst li {
list-style: none;
font-size: 10px;
line-height: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-block;
float: left;
margin: 2px;
padding: 0;
}
.cart .lst li:before,
.cart .lst li:after {
display: none;
}
.cart .lst li.label {width: 80px;}
.cart .lst li.value {width: calc(100% - 88px);}
.partDisplay {
display: inline-block !important;
padding: 0 !important;
color: #9e6a6a !important;
}
.tsm-order-table li {line-height: 1.2em;}
.tsm-order-table li:after,
.tsm-order-table li:before {
display: none;
}
.tsm-order-table .partDisplay {
padding-right: 10px;
font-size: 11px;
font-weight: 400;
line-height: 23px;
color: #5f5f5f;
letter-spacing: 1px;
}
.quickOrder .srch {
width: 100%;
max-width: 100%;
border: 1px solid #a6acb6;
border-radius: 20px;
display: block;
padding: 7px 20px 5px 35px;
font-size: 16px;
background: url("./images/search-icon.png") 10px 7px no-repeat;
}
#cart {
max-width: 980px;
margin: 0 auto;
position: relative;
background: #fff;
}
.loader {
background: url(./images/loader.gif) center no-repeat;
width: 100px;
height: 100px;
margin: 0 auto;
position: absolute;
left: calc(50% - 50px);
}
.basketWrap.fixed {
position: fixed;
top: 0;
max-width: 450px;
}
.tags a {text-decoration: none;}
.notice {display: none;}
.notice p {
margin: 0 0 20px 0;
padding: 4px 20px;
background: #c10230;
border: none;
color: #fff;
font-size: 14px;
}
.cartNotice {display: none; width: 100%;}
.cartNotice p {
padding: 8px 15px;
margin: 5px 0;
background: #fff;
border: 1px solid #1B5E20;
display: inline-block;
width: 100%;
font-size: 18px;
color: #1B5E20;
}
.cartNotice a {color: #1B5E20; font-weight: 600;}
.relative {position: relative !important;}
.note {
width: 100%;
display: none;
top: 0;
left: 0;
}
.note .content {
display: block;
background: #C8E6C9;
border: 2px solid #66BB6A;
padding: 10px;
margin: 20px auto 0 auto;
text-align: center;
}
.note.red .content {border: 2px solid #bb6666; background: #e6c8c8;}
.note.red span,
.note.red p {
color: #5e1b1b;
}
.note span,
.note p {
padding: 0;
margin: 0;
color: #1B5E20;
}
.note span {font-size: 20px;}
.note p {font-size: 13px;}
span.field_required {display: inline-block; padding: 0;}
/* ---------------------------------------------------------------------- */
/* Dealer Portal ----------------------------------- */
/* ---------------------------------------------------------------------- */
.basketWrap h3 {margin: 0;}
.basketWrap sup {display: inline-block; font-size: 10px;}
.basketWrap .item {position: relative;}
.basketWrap .close {
width: 15px;
height: 15px;
border-radius: 50%;
background: #D41638;
color: #fff;
font-size: 10px;
line-height: 15px;
position: absolute;
right: -5px;
top: -5px;
text-align: center;
cursor: pointer;
}
.basketWrap .close:hover {background: #000;}
.basketWrap .col.three {width: 80px;}
.basketWrap .orderDetails {display: inline-block; width: 100%;}
.basketWrap .orderDetails .wrap {max-width: 350px; float: right;}
.basketWrap .orderDetails .row {
border-bottom: 1px solid #E5E5E5;
}
.basketWrap .orderDetails span {
font-size: 11px;
display: block;
text-transform: capitalize;
}
.basketWrap .buttonWrap {display: inline-block; width: 100%;}
.basketWrap .bttnWrap .button {width: 100%; margin-top: 10px;}
/* -------------------------------------------------------------- */
/* Dealer Finalize Order ------------------------------- */
/* -------------------------------------------------------------- */
.select-container select {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 12px !important;
background: none;
border: 1px solid #000;
outline: none;
line-height: 1.3em;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.select-container select:focus {
border: 1px solid #c10230;
}
.select-container {position: relative; margin-bottom: 20px;}
.select-container:after {
content: url(../images/arrow-down-black.png);
position: absolute;
right: 16px;
top: 50%;
margin-top: -17px;
width: 13px;
height: 10px;
}
.tsmHeading {
width: 100%;
display: inline-block;
padding: 0 0 10px 0;
}
.tsmHeading .pageTitle {
float: left;
margin: 0;
padding: 0;
font-size: 25px;
}
.tsmHeading .pageTitle.sub {padding-top: 20px;}
.tsmHeading .bt {
float: right;
font-size: 15px;
line-height: 15px;
padding: 7px 15px;
margin: 5px 0;
border: 1px solid #c4cacf;
color: #c5cacf;
text-decoration: none;
margin-left: 10px;
}
.tsmHeading .bt:hover {background: #c4cacf; color: #fff;}
.tsmHeading .highlight {border: 1px solid #B91D30; color: #B91D30;}
.tsmHeading .highlight:hover {background: #B91D30; color: #fff;}
.grey_sections {
background: #E4E5E6;
position: relative;
display: inline-block;
width: 100%;
padding: 15px 15px;
position: relative;
}
.grey_sections h3 {
font-size: 15px;
color: #000;
text-transform: capitalize;
font-weight: 500;
display: inline-block;
width: 100%;
background: none;
margin: 0;
}
.vTop .col {vertical-align: top;}
ul.finalizeAddress {
margin: 8px 0;
padding: 0;
width: 100%;
display: inline-block;
}
ul.finalizeAddress li {
list-style: none;
width: calc(50% - 2px);
margin: 1px;
float: left;
}
ul.finalizeAddress li:before,
ul.finalizeAddress li:after {
display: none;
}
ul.finalizeAddress input,
ul.finalizeAddress select {
width: 100%;
border: none;
background: none;
border-bottom: 1px solid #bbb;
border-radius: 0;
font-size: 15px;
padding: 3px 0 2px 0;
}
ul.finalizeAddress input:focus,
ul.finalizeAddress select:focus {
background: #fff;
}
ul.finalizeAddress label {font-size: 15px;}
.nameInfo h3,
.address h3 {
font-size: 30px;
line-height: 30px;
padding: 0;
margin: 0;
text-transform: inherit;
font-weight: normal;
color: #000;
}
.address.down .section {padding: 20px 30px; min-height: 160px;}
.address.down h3 {font-size: 15px;}
.address.down p {font-size: 15px; line-height: 22px;}
.address h3 {font-size: 22px;}
.nopad {padding-right: 0;}
.account .content,
.account h3 {
background: none;
margin-top: 0;
}
.cart_display_qty {display: inline-block; width: auto;}
.account span {
font-size: 15px;
padding: 1px 0;
font-weight: 200;
min-width: 60px;
line-height: 1.2em;
display: inline-block;
text-transform: inherit;
color: #000;
letter-spacing: inherit;
}
.address .button {margin-top: 15px;}
.address .section {
min-height: 200px;
padding: 30px 40px;
margin: 10px 0 0 0;
}
.address .num {
background: #B6222E;
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 17px;
position: absolute;
width: 17px;
height: 17px;
display: inline-block;
overflow: hidden;
text-align: center;
border-radius: 50%;
margin: 17px 0 0 0;
padding: 0;
font-style: normal;
}
.address p {
font-size: 20px;
font-weight: 300;
line-height: 30px;
padding: 0 0 0 20px;
margin: 0;
display: block;
}
.address .col .content {margin: 0;}
.address .col:nth-child(1) .content {margin-right: 8px;}
.address .col:nth-child(2) .content {margin-left: 8px;}
.address .section {background: #E4E5E6;}
.popupOverlay {
display: none;
background: rgba(0, 7, 0, 0.75);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.popup {
display: none;
width: 600px;
height: auto;
position: absolute;
top: 50px;
margin-bottom: 100px;
left: calc(50% - 300px);
background: #fff;
padding: 20px;
z-index: 10000;
border-radius: 3px;
}
.acf-form input[type="text"],
.acf-form select {
border: 1px solid #d9d9d9 !important;
background: #fff !important;
padding: 5px 10px !important;
border-radius: 3px !important;
font-size: 16px !important;
line-height: 16px !important;
height: 28px !important;
}
.acf-label label {
font-size: 15px;
line-height: 15px;
padding: 0;
margin: 0;
}
.updated {
background: #66BB6A;
border: 1px solid #4CAF50;
padding: 5px 20px;
border-radius: 20px;
}
.updated p {
margin: 0;
padding: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
}
span.acf-spinner {display: none;}
/* ---------------------------------------------------------------------- */
/* Account - Invoices ----------------------------------- */
/* ---------------------------------------------------------------------- */
.invoices .section {
background: #E4E5E6;
padding: 10px 0;
display: inline-block;
width: 100%;
}
.invoices .col-1-1 {margin-bottom: 15px; text-align: center;}
.invoices.home .col-1-1 {margin-bottom: 0;}
.invoices .content {border-right: #9D9D9D 1px solid;}
.invoices label {
font-weight: 300;
padding: 0 0 5px 0;
font-size: 16px;
display: block;
}
.invoices span {
font-weight: 500;
font-size: 18px;
display: block;
}
.invoices .small-logo {
max-width: 60px;
max-height: 30px;
width: auto;
height: auto;
padding: 5px;
}
.slim {margin: 0 !important;}
.noBorder {border: none !important;}
.invoices .button.grey {margin-top: 10px;}
.button.grey {
background: #9D9D9D;
border-radius: 0;
font-size: 18px;
padding: 10px 20px;
color: #000;
text-transform: capitalize;
font-weight: 200;
}
.button.grey:hover {background: #000; color: #fff;}
.small.blank {
background: #fff;
color: #404040;
padding: 0;
margin: 0;
font-size: 15px;
padding: 7px 12px;
cursor: pointer;
}
.thide {display: none;}
.invoices .tsm_pricetag {
display: inline-block;
padding: 3px 15px;
border-radius: 5px;
margin: 0 2px;
color: #000;
}
.account ul {margin: 0; padding: 0;}
.account li {list-style: none;}
.tsm_status {
display: inline-block;
padding: 2px 10px;
border-radius: 3px;
color: #fff;
min-width: 100px;
text-align: center;
margin: 0 0 0 0;
}
.tsm_status.green {background: #66BB6A;}
.tsm_status.light-green {background: #9CCC65;}
.tsm_status.orange {background: #FFA726;}
table.tsm-order-table {
border-radius: 3px;
border: 1px solid #E0E0E0;
font-weight: 400;
font-size: 15px;
border-right: none;
}
table.tsm-order-table .thead {
background: #fff;
font-weight: 400;
border-bottom: none;
border-right: 1px solid #E0E0E0;
}
table.tsm-order-table th {
background: #ececec;
font-weight: 400;
border-right: 1px solid #E0E0E0;
border-top: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
}
table.tsm-order-table td {
border-right: 1px solid #E0E0E0;
border-bottom: none;
}
table.tsm-order-table ul li {
list-style: none;
font-size: 12px;
}
table.tsm-order-table span {
margin: 0;
padding: 0;
color: #000;
font-size: 15px;
display: inline-block;
}
.half {width: 50%; float: left;}
.tablenav {
clear: both;
height: 30px;
margin: 6px 0 4px;
vertical-align: middle;
}
.tablenav .tablenav-pages a,
.tablenav-pages span.current {
text-decoration: none;
padding: 3px 6px;
display: inline-block;
min-width: auto;
}
.tablenav .tablenav-pages a,
.tablenav-pages-navspan {
display: inline-block;
min-width: 17px;
border: 1px solid #ccc;
padding: 5px 7px;
background: #e5e5e5;
font-size: 16px;
line-height: 1;
font-weight: 400;
text-align: center;
}
.filloutSection {width: 100%; display: inline-block;}
.filloutSection .col {padding: 0 10px 0 0;}
.filloutSection li {padding: 0 !important; margin: 0 !important;}
.filloutSection li:before,
.filloutSection li:after {
display: none;
}
.filloutSection label {
display: block;
width: 100%;
position: relative;
}
.filloutSection input,
.filloutSection select {
width: 100%;
padding: 5px 10px;
border-radius: 0;
background: #fff;
height: 40px;
}
.bttnspacing {margin: 60px 0 0 0;}
.required_asterix {
color: #c10230;
font-size: 11px;
position: absolute;
top: -4px;
margin: 0 0 0 1px;
}
/* ---------------------------------------------------------------------- */
/* Account - Login page ----------------------------------- */
/* ---------------------------------------------------------------------- */
.login .wpuf-login-form input[type="text"],
.login .wpuf-login-form input[type="password"],
#wpuf-user_login {
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 12px !important;
background: none;
border: 1px solid #000700;
outline: none;
line-height: 1.3em;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.login input[type="checkbox"] {
width: 14px;
height: 14px;
border: 1px solid #d9d9d9 !important;
border-radius: 2px;
float: left;
margin: 4px 10px 0 0;
}
.login input[type="checkbox"]:checked {
border: 1px solid rgba(0, 0, 0, 0.5) !important;
background: rgba(0, 0, 0, 0.1);
}
.login label {padding: 0 0 5px 0;}
.wpuf-login-form a {display: none !important;}
.addCartNote {
display: inline-block;
width: 100%;
text-align: center;
}
.addCartNote h3 {
font-size: 23px;
line-height: 30px;
text-transform: inherit;
font-weight: 200;
color: #4E4E4E;
padding: 10px 0 0 0;
max-width: 350px;
margin: 0 auto;
}
#wp-submit {
display: inline-block;
width: fit-content;
padding: 16px 32px;
margin: 0;
border: 2px solid #c10230;
background: #c10230;
color: #fff;
font-weight: 400;
text-transform: uppercase;
line-height: 1em;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
font-size: 20px;
}
#wp-submit:hover {background: #840020;}
span.red {
color: #B3282D;
text-transform: uppercase;
font-weight: 700;
}
span.blue {
color: #4956A5;
text-transform: uppercase;
font-weight: 700;
}
.frontHero {
display: inline-block;
width: 100%;
float: left;
margin: 0;
padding: 0;
}
.frontHero .frontOne {
display: inline-block;
width: 63%;
float: right;
margin: 0;
padding: 0;
}
.frontHero .frontTwo {
display: inline-block;
width: 37%;
float: left;
margin: 0;
padding: 0;
}
.order .orderSpecs {
margin: 0;
padding: 0;
}
.order .orderSpecs li {
margin: 0;
padding: 0;
line-height: 1.3em;
}
.order .orderSpecs li:before,
.order .orderSpecs li:after {
display: none;
}
.order .address h3 {
background: none;
font-weight: 500;
}
/* ---------------------------------------------------------------------- */
/* Dealer Pricing ----------------------------------- */
/* ---------------------------------------------------------------------- */
.dealer_pricing .content {padding: 10px 0;}
.dealer_pricing h1 {padding-bottom: 40px;}
.dealer_pricing .desc {
font-weight: 300;
font-size: 16px;
line-height: 28px;
}
.dealer_pricing table {
width: 100%;
text-align: center;
border: none;
font-weight: 300;
font-size: 16px;
line-height: 16px;
border-collapse: collapse;
margin: 20px 0;
}
.dealer_pricing tr th {padding: 10px 20px;}
.dealer_pricing tr td {
background: #fff;
border: none;
margin: 0;
padding: 8px 20px;
border-bottom: 2px solid #E4E5E6;
border-right: 2px solid #E4E5E6;
}
.dealer_pricing tr td:last-child {border-right: none;}
.dealer_pricing .blank {background: none;}
.dealer_pricing .blank th {
font-weight: 300;
border-right: none;
border-bottom: none;
background: none;
}
.dealer_pricing .head {
background: #fff;
height: 60px;
border-bottom: 4px solid #E4E5E6;
}
.dealer_pricing h1 {
font-size: 30px;
line-height: 30px;
font-weight: 400;
padding: 0 0 20px 0;
margin: 0;
text-transform: inherit;
letter-spacing: inherit;
}
.dealer_pricing .head h2 {
font-size: 24px;
font-weight: 500;
text-transform: inherit;
padding: 0 0 0 20px;
}
.dealer_pricing .head th {
margin: 0;
padding: 0;
border-right: none;
border-bottom: none;
background: #fff;
}
/* ---------------------------------------------------------------------- */
/* Single - GST ----------------------------------- */
/* ---------------------------------------------------------------------- */
.postWrap {display: inline-block; width: 100%;}
.postWrap.shorten {
display: inline-block;
width: calc(100% - 320px);
float: right;
}
.orderForms .content,
.orderCol .content {
margin: 5px 5px;
}
.orderCol .content {padding: 10px 20px;}
.orderCol .col {background: #E4E5E6; vertical-align: top;}
/* ---------------------------------------------------------------------- */
/* WordPress backend - orders and quote request tool -------------------- */
/* ---------------------------------------------------------------------- */
.orderForms input,
.orderForms select {
font-size: 18px;
border: 1px solid #a5adb7;
background: none;
width: 100%;
padding: 5px 10px;
line-height: 30px;
color: #a5adb7;
border-radius: 0;
}
.orderForms textarea {
font-size: 18px;
border: 1px solid #a5adb7;
background: none;
width: 100%;
padding: 5px 10px;
line-height: 30px;
color: #a5adb7;
border-radius: 0;
}
.orderForms .col {vertical-align: top;}
.orderForms select {
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #e0e6ea 50%), linear-gradient(135deg, #e0e6ea 50%, rgba(0, 0, 0, 0) 50%);
background-position: calc(100% - 20px), calc(100% - 13px), calc(100% - 2.5em) 0.5em;
background-size: 7px 7px, 7px 7px, 1px 1.5em;
background-repeat: no-repeat;
}
.orderForms button.btn {
background: #fff;
padding: 0;
width: 100%;
color: #a5adb7;
font-size: 18px;
font-weight: normal;
text-transform: capitalize;
border: 1px solid #a5adb7;
line-height: 30px;
padding: 5px 10px;
}
.orderForms button.btn:hover {background: #a5adb7; color: #fff;}
.relative {position: relative;}
.popupDialog:before {
content: '';
position: absolute;
top: -10px;
left: calc(50% - 5px);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #a5adb6;
}
.popupDialog {
display: none;
width: 100%;
background: #fff;
position: absolute;
top: 45px;
left: 0;
border: 1px solid #a5adb6;
border-radius: 4px;
padding: 5px 10px;
-webkit-box-shadow: 0px 0px 13px -6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 13px -6px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 13px -6px rgba(0, 0, 0, 0.75);
z-index: 100;
}
.popupDialog label {font-size: 15px;}
.row_dyn [class*="col-"] {
padding-right: 1.5px;
position: relative;
}
.disabled {pointer-events: none; opacity: 0.5;}
.orderForms h6 {padding: 10px 5px; float: left;}
.add_form_field {
border: none;
text-transform: uppercase;
display: inline-block;
background: #f3f3f3;
width: auto;
padding: 5px 20px;
border-radius: 5px;
color: #969a9e;
margin: 0 0 0 0;
float: right;
}
.del {
width: 20px;
text-align: center;
margin: 8px 5px 0 0;
border-radius: 50%;
padding: 0;
float: right;
font-size: 12px;
line-height: 20px;
height: 20px;
background: #e42b2b;
color: #fff;
font-weight: 700;
text-decoration: none;
border: none;
cursor: pointer;
position: absolute;
top: 8px;
right: -30px;
}
.ifield {
font-size: 18px;
border: 1px solid #a5adb7;
background: none;
width: 100%;
padding: 5px 10px;
line-height: 30px;
color: #a5adb7;
border-radius: 0;
}
.thead label {
font-size: 13px;
text-transform: uppercase;
margin: 0;
padding: 0;
line-height: 13px;
color: #a5adb6;
}
.thead .content,
.thead [class*="col-"] {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
padding-right: 1.5px;
}
.orderForms .small {
padding: 2px;
font-size: 15px;
line-height: 20px;
margin: 2px;
width: calc(100% - 4px);
border: 1px solid #e5e5e5;
}
.currency_display {
position: absolute;
bottom: 0;
right: 10px;
text-transform: uppercase;
font-size: 10px;
}
.orderForms .totalsForm {
display: inline-block;
width: 100%;
padding: 10px 10px;
}
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {box-shadow: 0 1px 3px 0 #cfd7df;}
.StripeElement--invalid {border-color: #fa755a;}
.StripeElement--webkit-autofill {background-color: #fefde5 !important;}
.mapWrap {
position: relative;
width: 100%;
height: 680px;
border: 1px solid #d6dde2;
}
.customContent {border-bottom: 10px solid #f5f5f5;}
.customContent p {font-size: 30px; line-height: 40px;}
.customContent .button {font-size: 25px; padding: 2px 30px;}
.acf-field-5cf68dec562b2,
.acf-field-5cc751608616c,
.acf-field-5d84d57847d59 {
display: none !important;
}
span.page-numbers.dots {
display: inline-block;
width: auto;
margin: 0;
min-width: auto;
padding: 0;
}
.site-content {
overflow: hidden;
width: 100%;
height: 100%;
}
/* --------------------------------------------------------------------------------- */
/* Media Queries ------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
@media screen and (max-width: 1300px) {
/* Products ---------------------------------------------- */
.productSingle .submitWrap .qty {width: 100%;}
.productSingle .submitWrap .col {
display: inline-block;
width: 100%;
}
.productSingle .submitWrap .col_qty {width: 100%;}
.productSingle .submitWrap .col_add .button {width: 100%;}
.productSingle .submitWrap label {
width: 100%;
display: inline-block;
}
.productSingle .submitWrap .priceBox {width: 100%;}
.search-section {top: 15px;}
}
@media screen and (max-width: 1200px) {
section {position: relative; padding: 40px 0;}
}
@media screen and (max-width: 900px) {
.desktop_image {display: none !important;}
.mobile_image {display: block !important;}
.form-section {padding: 0;}
.featured-banner-info h2,
.post-section-title h2 {
font-size: 25px;
line-height: 1em;
}
a.button, button.button, input.button {padding: 8px 50px 8px 15px;}
.post-section-title {padding: 0 10px;}
h1 {font-size: 30px;}
}
@media screen and (max-width: 767px) {
.hero-header {
background-size: cover!important;
height: 400px;
width: 100%;
display: block;
margin: auto;
}
}
@media screen and (max-width: 750px) {
body {font-size: 16px;}
header {font-size: 19px;}
#header-spacer {height: 89px;}
/* Modifiers ---------------------------------------------- */
.xs-padding {padding-top: 15px; padding-bottom: 15px;}
.xs-padding-top {padding-top: 15px;}
.xs-padding-bottom {padding-bottom: 15px;}
.small-padding {padding-top: 25px; padding-bottom: 25px;}
.small-padding-top {padding-top: 25px;}
.small-padding-bottom {padding-bottom: 25px;}
.medium-padding {padding-top: 35px; padding-bottom: 35px;}
.medium-padding-top {padding-top: 35px;}
.medium-padding-bottom {padding-bottom: 35px;}
.large-padding {padding-top: 45px; padding-bottom: 45px;}
.large-padding-top {padding-top: 45px;}
.large-padding-bottom {padding-bottom: 45px;}
.xl-padding {padding-top: 60px; padding-bottom: 60px;}
.xl-padding-top {padding-top: 60px;}
.xl-padding-bottom {padding-bottom: 60px;}
/* Nav ---------------------------------------------- */
.header-logo {padding: 13px 0;}
.header-logo svg {width: 256px; height: 63.52px;}
nav {width: 100%; line-height: 1em;}
nav #secondary-menu {
display: none;
background: #fff;
text-align: center;
}
.small-header nav {
top: 0;
transform: translateY(0);
}
}
@media screen and (max-width: 640px) {
/* Gravity Forms ---------------------------------------------- */
.gravity-form .gform_wrapper .top_label li.gfield.gf_left_half {padding-right: 0;}
.gravity-form .gform_wrapper .top_label li.gfield.gf_right_half {padding-left: 0;}
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox .gchoice,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio .gchoice,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox li,
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio li {
width: 49%;
margin-right: 2%;
}
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox .gchoice:nth-child(3n+3),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio .gchoice:nth-child(3n+3),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox li:nth-child(3n+3),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio li:nth-child(3n+3) {
margin-right: 2%;
}
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox .gchoice:nth-child(even),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio .gchoice:nth-child(even),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_checkbox li:nth-child(even),
.gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio li:nth-child(even) {
margin-right: 0;
}
}
@media screen and (max-width: 580px) {
.header-icon img {padding-top: 14px; height: auto;}
.small-header .header-icon img {margin: 0;}
/* Nav ---------------------------------------------- */
header {position: absolute; overflow: inherit;}
.header-wrapper {display: block;}
.header-logo {
display: block;
position: relative;
left: initial;
top: initial;
}
.header-logo svg {margin: 0 auto;}
nav {
position: fixed;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 55px;
padding: 0 0 0 60px;
background: #c10230;
box-shadow: 0 0 8px 0 rgba(0, 7, 0, 0.4);
text-align: left;
}
.small-header nav {padding-left: 60px;}
nav .main-nav {margin: 0; background: none; border: none;}
nav a.mobile-nav-phone,
nav a.nav-cart,
nav a.hamburger {
padding: 18px;
border-left: 1px solid #000700;
}
nav a.hamburger:after {background: #840020}
nav a.nav-cart {padding-left: 50px;}
nav a.mobile-nav-phone {
position: relative;
display: inline-block;
padding-left: 45px;
color: #fff;
}
nav a.mobile-nav-phone svg {
fill: #fff;
position: absolute;
left: 12px;
top: 50%;
transform: translate3d(0,-50%,0) scale(1.25);
}
nav a.mobile-nav-phone p {display: inline-block;}
.header-icon,
.small-header .header-icon {
top: initial;
bottom: 0;
background: #fff;
border-right: 1px solid #c10230;
}
.header-icon svg,
.small-header .header-icon svg {fill: #c10230 !important;}
.small-header nav {
position: fixed;
top: initial;
transform: translateX(0);
}
.small-header nav .main-nav {margin: 0;}
.mobile-nav {width: 256px; right: -300px;}
.mobile-nav.mobile-nav-show {transform: translateX(-300px);}
#hero {padding: 100px 0;}
.individual-button-wrap {
display: block;
margin: 5px auto 10px;
width: 300px;
}
}
@media screen and (max-width: 480px) {
nav a.mobile-nav-phone {padding: 12px 10px 10px;}
nav a.hamburger {padding: 18px 14px;}
nav a.nav-cart, nav a.hamburger, nav a.mobile-nav-phone {vertical-align: middle;}
nav a.mobile-nav-phone p,
nav a.hamburger p {display: none;}
.hamburger-stack {margin: 0;}
nav a.mobile-nav-phone svg {
position: relative;
top: initial;
left: initial;
transform: translate3d(0,0,0) scale(1.25);
}
}
/* ------------------------------------------------------------------------------- */
/* Form font size ---------------------------------------- */
/* ------------------------------------------------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* To keep from zooming into active form fields on devices */
select, textarea, input {font-size: 16px;}
select:focus, textarea:focus, input:focus {font-size: 16px;}
}
/* ------------------------------------------------------------------------------- */
/* Print Stylesheet ---------------------------------------- */
/* ------------------------------------------------------------------------------- */
@media print {
body {transform: scale(.99);}
@page {size: letter; margin: 0mm;}
body {font-size: 16px;}
header {
position: relative;
top: 0;
left: 0;
z-index: 100;
display: block;
width: 100%;
height: auto;
}
#header-spacer {display: none !important;}
.bg-dark .header-logo svg .logo-color-two {fill: #000700;}
.header-shadow {box-shadow: none !important;}
a.header-icon {display: none;}
section {padding: 0 !important;}
.topBar, .header, .tsmHeading .bt, .footer, #uakUyof-1552406334884, #tawkchat-chat-bubble-graphics-container {display: none !important;}
.bt.highlight,
.invoice-button {display: none !important;}
.address.down .section {padding: 0; min-height: auto;}
.grey_sections {padding: 0;}
.tsm_status {
padding: 2px 0;
color: #000700;
min-width: auto;
}
.tsmHeading .pageTitle,
.orderSpecs label,
.orderSpecs strong,
.account span,
.address.down h3,
.address.down p,
table.tsm-order-table th,
table.tsm-order-table,
.tsm-order-table span,
.tsm_status {
font-family: Arial !important;
letter-spacing: 0px !important;
}
span.orderNte {line-height: 15px;font-size: 10px;}
.cartSection .rowOptions {margin: 0;}
.page-header .nav,
#small_menu_wrap,
.secondary-nav,
#secondary-menu,
.header-wrapper nav,
.footer-brush,
footer {display: none !important;}
.header-logo svg {width: 150px;}
.header-logo {padding: 0;}
h1 {font-size: 30px; line-height: 1em;}
h4 {font-size: 15px; margin: 5px 0;}
.orderHeading .product-tag {margin: 0 0 0 20px;}
b, strong, p {font-size: 15px; line-height: 1.5em;}
.product-tag.sale-tag {background: none; color: #000;}
}