/* 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; } .bg-primary .bx-wrapper .bx-pager.bx-default-pager a {background: #840020;} .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; } .bg-primary .bx-wrapper .bx-pager.bx-default-pager a:hover, .bg-primary .bx-wrapper .bx-pager.bx-default-pager a.active, .bg-primary .bx-wrapper .bx-pager.bx-default-pager a:focus { background: #fff; } .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%; background: #000700; font-family: "urw-din", sans-serif; font-size: 19px; line-height: 1.7em; font-weight: 400; color: #000700; } #container { position: relative; z-index: 1; width: 100%; background: #fff; } .display-none {display: none;} /* --------------------------------------------------------------------------------------- */ /* HEADER ---------------------------------------------- */ /* --------------------------------------------------------------------------------------- */ #announcement-banner { position: relative; display: block; padding: 8px 5%; font-size: 0.85em; line-height: 1.25em; } /* --------------------------------------------------------------------------------------- */ /* HEADER ---------------------------------------------- */ /* --------------------------------------------------------------------------------------- */ header { position: fixed; top: 0; left: 0; z-index: 100; display: block; width: 100%; height: auto; box-shadow: 0 8px 0 rgba(0,7,0,0.35); } #header-spacer { position: relative; display: block; width: 100%; height: 108.45px; } .header-wrapper { position: relative; z-index: 101; display: block; width: 100%; background: #000700; } /* Header - branding ---------------------------------------------- */ .nav-branding {width: 200px; margin: 0 auto;} .header-logo { position: relative; top: 0; overflow: hidden; z-index: 50; display: block; height: 67.45px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .small-header .header-logo {height: 48px;} .header-logo svg { overflow: initial; display: block; width: 200px; height: 67.45px; 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-logo svg .logo-ag, .header-logo svg .logo-equipment { opacity: 1; -webkit-transition: opacity 0.25s ease; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .small-header .header-logo svg .logo-ag, .small-header .header-logo svg .logo-equipment {opacity: 0;} .header-logo svg .logo-color-one { fill: #c10230; -webkit-transition: fill 1s ease; -moz-transition: fill 1s ease; -o-transition: fill 1s ease; transition: fill 1s ease; } /* .header-logo:hover svg .logo-color-one {fill: #840020;} */ .header-logo svg .logo-color-two { fill: #fff; -webkit-transition: fill 1s ease; -moz-transition: fill 1s ease; -o-transition: fill 1s ease; transition: fill 1s ease; } /* .header-logo:hover svg .logo-color-two {fill: #ccc;} #lightning-logo {mix-blend-mode: hard-light;} */ .lightning-strikes g {filter: url(#glow); opacity: 0;} .header-logo:hover .lightning-strikes g {animation: linear infinite forwards flash;} .header-logo:hover .lightning-strikes g:nth-child(1) {animation-duration: 5s; animation-delay: 0s;} .header-logo:hover .lightning-strikes g:nth-child(2) {animation-duration: 3s; animation-delay: 1.25s; animation-name: doubleflash;} .header-logo:hover .lightning-strikes g:nth-child(3) {animation-duration: 4s; animation-delay: 3.5s;} .header-logo:hover .lightning-strikes g:nth-child(4) {animation-duration: 5.5s; animation-delay: 4s;} .header-logo:hover .lightning-strikes g:nth-child(5) {animation-duration: 4.5s; animation-delay: 5.25s; animation-name: doubleflash;} .header-logo:hover .lightning-strikes g:nth-child(6) {animation-duration: 3.5s; animation-delay: 7s;} @keyframes flash { 0% {opacity: 0%;} 1% {opacity: 100%;} 30% {opacity: 0%;} 100% {opacity: 0%;} } @keyframes doubleflash { 0% {opacity: 0%;} 1% {opacity: 100%;} 4% {opacity: 0%;} 5% {opacity: 100%;} 35% {opacity: 0%;} 100% {opacity: 0%;} } .lightning-strikes g path { stroke: #fff; stroke-width: 1px; fill: none; } /* --------------------------------------------------------------------------------------- */ /* Header - Action Items ---------------------------------------------- */ /* --------------------------------------------------------------------------------------- */ .nav-action-items { flex-grow: 1; position: relative; display: none; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } /* Primary Items ---------------------------------------------- */ ul#action-nav { position: relative; overflow-x: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: flex-end; height: 100%; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } ul#action-nav li { position: relative; display: block; height: 100%; } ul#action-nav li a { position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; height: 100%; margin: 0; padding: 8px; font-family: "urw-din-condensed", sans-serif; font-size: 18px; font-weight: 500; line-height: 1em; color: #fff; text-transform: uppercase; text-align: center; } ul#action-nav li a:hover {} ul#action-nav li a:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 100%; height: 8px; border: 3px solid #c10230; border-top: none; transform: translate3d(-50%,1em,0); opacity: 0; pointer-events: none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } ul#action-nav li a:hover:after { transform: translate3d(-50%,0.5em,0); opacity: 1; } /* --------------------------------------------------------------------------------------- */ /* Header - Supplementary Items ---------------------------------------------- */ /* --------------------------------------------------------------------------------------- */ .nav-secondary-items { position: relative; display: block; align-self: center; width: auto; border-top: 1px solid #999; text-align: left; } #supplementary-nav { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; padding: 0; } .secondary-nav-icon { position: relative; display: block; width: 28px; height: 28px; margin: 6px; background: none; border: 0; outline: 0; box-shadow: 0; transform: scale(0.9); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .secondary-nav-icon.hamburger {margin-left: 10px;} @media screen and (min-width: 450px) { .header-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: stretch; } #header-spacer {height: 67.45px;} .nav-branding {margin: 0;} .nav-secondary-items {padding: 0 16px 0 0; border-top: none;} #supplementary-nav {justify-content: flex-end;} .secondary-nav-icon {margin: 0 0 0 10px;} .secondary-nav-icon.hamburger {margin-left: 17px;} } @media screen and (min-width: 500px) { #header-spacer {height: 86.35px;} .nav-branding {width: 256px;} .header-logo {height: 86.35px;} .small-header .header-logo {height: 50px;} .header-logo svg {width: 256px; height: 86.35px;} .small-header .header-logo svg {transform: translate3d(0,-6px,0);} } @media screen and (min-width: 950px) { .nav-action-items {display: block;} } @media screen and (min-width: 1000px) { ul#action-nav li a {font-size: 21px;} } @media screen and (min-width: 1080px) { ul#action-nav li a {font-size: 24px;} } @media screen and (min-width: 1200px) { ul#action-nav {justify-content: center;} } @media screen and (min-width: 900px) { .secondary-nav-icon {margin-left: 16px; transform: scale(1);} .secondary-nav-icon.hamburger {margin-left: 21px;} } @media screen and (min-width: 1080px) { .nav-branding {width: 280px;} .nav-secondary-items {width: 280px;} } /* Supplemental nav - HarveyAI ---------------------------------------------- */ .secondary-nav-icon.harvey {width: auto; height: 16px;} .secondary-nav-icon.harvey svg { fill: #999; position: relative; display: block; height: 100%; width: auto; aspect-ratio: 642/98; transition: fill 0.25s ease; } .secondary-nav-icon.harvey:hover svg {fill: #fff;} /* Supplemental nav - Search ---------------------------------------------- */ .secondary-nav-icon.search {} .search .search-glass { position: relative; display: block; width: 100%; height: 100%; } a.search:hover .search-glass {animation: ease-in-out 8s infinite 0s forwards searching;} @keyframes searching { 0% {transform: translate3d(0,0,0);} 5% {transform: translate3d(-8px,0,0);} 20% {transform: translate3d(-8px,0,0);} 25% {transform: translate3d(-2px,-6px,0);} 40% {transform: translate3d(-2px,-6px,0);} 45% {transform: translate3d(6px,6px,0);} 60% {transform: translate3d(6px,6px,0);} 65% {transform: translate3d(-6px,8px,0);} 80% {transform: translate3d(-6px,8px,0);} 85% {transform: translate3d(0,0,0);} 100% {transform: translate3d(0,0,0);} } .search .search-glass .glass { position: absolute; top: 50%; left: 50%; display: block; width: 18px; height: 18px; border: 1px solid #999; border-radius: 50%; transform: translate3d(-40%,-60%,0); -webkit-transition: border-color 0.25s ease; -moz-transition: border-color 0.25s ease; -o-transition: border-color 0.25s ease; transition: border-color 0.25s ease; } a.search:hover .search-glass .glass {border-color: #fff;} .search .search-glass .handle { position: absolute; top: 50%; left: 50%; display: block; height: 8px; transform-origin: 50% 100%; background: #999; -webkit-transition: background 0.25s ease; -moz-transition: background 0.25s ease; -o-transition: background 0.25s ease; transition: background 0.25s ease; } a.search:hover .search-glass .handle {background: #fff;} .search .search-glass .handle.handle-thin {width: 1px; transform: translate3d(-9px,2px,0) rotate(45deg);} .search .search-glass .handle.handle-thick {width: 3px; transform: translate3d(-10px,2px,0) rotate(45deg) scaleY(0.7);} .search-subnav { position: absolute; top: 100%; right: 0; z-index: 100; display: block; padding: 0 8px 8px; background: #000700; border-radius: 0 0 0 8px; box-shadow: 0 8px 0 rgba(0,7,0,0.35); opacity: 0; transform: translate3d(0,-24px,0); pointer-events: none; -webkit-transition: opacity 0.5s ease, transform 0.5s ease; -moz-transition: opacity 0.5s ease, transform 0.5s ease; -o-transition: opacity 0.5s ease, transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease; } .search-subnav.show-searchbar { opacity: 1; transform: translate3d(0,0,0); pointer-events: initial; } .search-subnav form { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .search-subnav label { position: relative; display: block; } .search-subnav input { position: relative; display: block; width: 100%; margin: 0; padding: 8px 12px; border: 1px solid transparent; background: #fff; outline: none; color: #000700; font-size: 16px; line-height: 1.25em; -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; } .search-subnav input[type="submit"] { display: block; width: 40px; background: #c10230; text-indent: 1000px; } .search-subnav input[type="submit"]:hover {background: #840020;} .search-subnav form:before, .search-subnav form:after { content: ''; position: absolute; right: 16px; top: 50%; z-index: 2; display: block; width: 12px; height: 3px; background: #fff; transform-origin: 100% 50%; pointer-events: none; } .search-subnav form:before {transform: translate3d(1px,1px,0) rotate(45deg);} .search-subnav form:after {transform: translate3d(1px,-1px,0) rotate(-45deg);} /* Supplemental nav - Account ---------------------------------------------- */ .secondary-nav-icon .account-profile {} #account-icon {} #account-icon path { fill: #999; -webkit-transition: fill 0.25s ease; -moz-transition: fill 0.25s ease; -o-transition: fill 0.25s ease; transition: fill 0.25s ease; } .account-profile:hover #account-icon path {fill: #fff;} #account-icon circle {fill: transparent; stroke: #999; storke-width: 2px;} #account-icon circle:last-child { stroke: #fff; stroke-dasharray: 72; stroke-dashoffset: 72; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .account-profile:hover #account-icon circle:last-child {stroke-dashoffset: 0;} /* Supplemental nav - Cart ---------------------------------------------- */ .secondary-nav-icon .nav-cart {} #shopping-cart {position: relative; overflow: auto;} #shopping-cart .package {position: relative; display: block;} #shopping-cart .package rect {fill: #fff;} .nav-cart:hover #shopping-cart .package-move { transform-origin: 50% 50%; animation: ease-in-out 1.35s infinite 0s forwards packageMove; } .nav-cart:hover #shopping-cart .package-rotate { transform-origin: 50% 50%; animation: linear 1.35s infinite 0s forwards packageRotate; } @keyframes packageRotate { 10% {transform: rotate(0deg);} 90% {transform: rotate(360deg);} 90.0001% {transform: rotate(0deg);} } @keyframes packageMove { 5% {transform: translate3d(0,0,0) scale(0.9);} 47.5% {transform: translate3d(0,-10px,0) scale(0.9);} 95% {transform: translate3d(0,0,0) scale(0.9);} } #shopping-cart .basket-mask {fill: #000700;} .nav-cart:hover #shopping-cart .basket-mask {animation: ease-in-out 1.35s infinite 0s forwards basketBump;} #shopping-cart .frame polyline { fill: transparent; stroke: #999; stroke-width: 2px; -webkit-transition: stroke 0.25s ease; -moz-transition: stroke 0.25s ease; -o-transition: stroke 0.25s ease; transition: stroke 0.25s ease; } .nav-cart:hover #shopping-cart .frame polyline {stroke: #fff;} #shopping-cart .frame circle { fill: #999; -webkit-transition: fill 0.25s ease; -moz-transition: fill 0.25s ease; -o-transition: fill 0.25s ease; transition: fill 0.25s ease; } .nav-cart:hover #shopping-cart .frame circle {fill: #fff;} #shopping-cart .basket {position: relative; display: block;} .nav-cart:hover #shopping-cart .basket {animation: ease-in-out 1.35s infinite 0s forwards basketBump;} @keyframes basketBump { 0% {transform: translate3d(0,0,0);} 10% {transform: translate3d(0,-1px,0);} 90% {transform: translate3d(0,-1px,0);} 100% {transform: translate3d(0,0,0);} } #shopping-cart .basket polyline, #shopping-cart .basket line { fill: transparent; stroke: #999; stroke-width: 1px; -webkit-transition: stroke 0.25s ease; -moz-transition: stroke 0.25s ease; -o-transition: stroke 0.25s ease; transition: stroke 0.25s ease; } .nav-cart:hover #shopping-cart .basket polyline, .nav-cart:hover #shopping-cart .basket line {stroke: #fff;} .cart_display_qty { position: absolute; top: 0; right: 0; display: inline-block; } .cart_display_qty span { position: relative; z-index: 2; display: block; font-size: 12px; line-height: 1em; color: #fff; } .cart_display_qty:after { content: ''; position: absolute; top: 50%; left: 50%; z-index: 1; display: block; width: 16px; height: 16px; background: #c10230; border-radius: 50%; transform: translate3d(-50%,-50%,0); } /* Supplemental nav - Hamburger ---------------------------------------------- */ .secondary-nav-icon .hamburger {} .hamburger .hamburger-stack { position: relative; display: block; width: 100%; height: 100%; } .hamburger .hamburger-stack div { position: absolute; left: 50%; display: block; width: 100%; height: 1px; background: #999; } .hamburger .hamburger-stack div:nth-child(1) {top: 20%; transform: translate3d(-50%,-50%,0);} .hamburger .hamburger-stack div:nth-child(2) {top: 50%; transform: translate3d(-50%,-50%,0);} .hamburger .hamburger-stack div:nth-child(3) {top: 80%; transform: translate3d(-50%,-50%,0);} .hamburger .hamburger-stack div:after { content: ''; position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 100%; height: 100%; background: #fff; transform-origin: 100% 50%; transform: scaleX(0); -webkit-transition: transform 0.25s ease; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; transition: transform 0.25s ease; } .hamburger:hover .hamburger-stack div:nth-child(1):after { transform: scaleX(1); -webkit-transition: transform 0.25s ease; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; transition: transform 0.25s ease; } .hamburger:hover .hamburger-stack div:nth-child(2):after { transform: scaleX(1); -webkit-transition: transform 0.25s ease 0.15s; -moz-transition: transform 0.25s ease 0.15s; -o-transition: transform 0.25s ease 0.15s; transition: transform 0.25s ease 0.15s; } .hamburger:hover .hamburger-stack div:nth-child(3):after { transform: scaleX(1); -webkit-transition: transform 0.25s ease 0.3s; -moz-transition: transform 0.25s ease 0.3s; -o-transition: transform 0.25s ease 0.3s; transition: transform 0.25s ease 0.3s; } /* --------------------------------------------------------------------------------------- */ /* Products drop down nav ---------------------------------------------- */ /* --------------------------------------------------------------------------------------- */ .products-subnav { position: absolute; top: 100%; left: 0; z-index: 100; display: block; background: #fff; box-shadow: 0 8px 0 rgba(0,7,0,0.35); opacity: 0; transform: translate3d(0,-24px,0); pointer-events: none; -webkit-transition: opacity 0.5s ease, transform 0.5s ease; -moz-transition: opacity 0.5s ease, transform 0.5s ease; -o-transition: opacity 0.5s ease, transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease; } .products-subnav.show-products { opacity: 1; transform: translate3d(0,0,0); pointer-events: initial; } #product-subnav { position: relative; display: block; width: 100%; background: #e4e4e4; } #product-subnav li { position: relative; display: block; width: 100%; border-bottom: 1px solid #ccc; } #product-subnav li:last-child {border-bottom: none;} #product-subnav li a { position: relative; display: block; background: #fff; } #product-subnav li a span { position: relative; z-index: 2; display: block; width: 90%; margin: 0 auto; padding: 12px 0; font-family: "urw-din-condensed", sans-serif; font-style: italic; font-weight: 600; font-size: 18px; line-height: 1em; color: #000700; text-align: center; text-transform: uppercase; } #product-subnav li a img { position: relative; display: none; width: 100%; height: 100%; object-fit: contain; opacity: 0.35; transform: scale(0.8); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #product-subnav li a:hover img { opacity: 1; transform: scale(0.9); } .product-subnav-mfgs { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; width: 100%; background: #e4e4e4; border-top: 1px solid #ccc; } .product-subnav-mfgs a { position: relative; display: block; width: 20%; aspect-ratio: 1/1; background: #fff; border-right: 1px solid #ccc; } .product-subnav-mfgs a:last-child {border-right: 0;} .product-subnav-mfgs a:hover {background: #f2f2f2;} .product-subnav-mfgs a img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; transform: scale(0.75); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .product-subnav-mfgs a:hover img {transform: scale(0.85);} @media screen and (min-width: 500px) { .product-subnav-mfgs a {width: 12.5%;} } @media screen and (min-width: 640px) { #product-subnav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #product-subnav li { aspect-ratio: 1/1; border-bottom: none; border-right: 1px solid #ccc; } #product-subnav li:last-child {border-right: none;} #product-subnav li a span { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); color: #fff; font-size: 2.5vw; line-height: 1em; text-shadow: 0 0 5px rgba(0,7,0,1); } #product-subnav li a img {display: block; height: 100%;} #product-subnav li a:hover img {transform: scale(0.9);} } @media screen and (min-width: 767px) { .product-subnav-mfgs {flex-wrap: nowrap;} .product-subnav-mfgs a {width: 100%;} } /* --------------------------------------------------------------------------------------- */ /* Hamburger Menu ---------------------------------------------- */ /* --------------------------------------------------------------------------------------- */ .mobile-menu {position: absolute; z-index: 10000000000;} /* mobile menu active ------------------------- */ .mobile-menu-overlay { position: fixed; display: none; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 7, 0, 0.85); z-index: 101; } .mobile-nav { position: fixed; top: 0; right: 0; z-index: 102; overflow: hidden; width: 100%; height: 100%; pointer-events: none; -webkit-transition: transform 0.325s ease; -moz-transition: transform 0.325s ease; -o-transition: transform 0.325s ease; transition: transform 0.325s ease; } .mobile-nav.mobile-nav-show {overflow-y: scroll; pointer-events: initial;} .mobile-nav-holder { position: relative; display: block; width: calc(100% - 7px); margin: 0 0 0 auto; padding-bottom: 100px; } @media screen and (min-width: 400px) { .mobile-nav-holder {width: 320px;} } /* close button ------------------------- */ .close-nav-icon { position: absolute; left: 0; display: block; width: 40px; height: 40px; border: 1px solid #fff; cursor: pointer; -webkit-transition: border 0.25s ease 0s; -moz-transition: border 0.25s ease 0s; -o-transition: border 0.25s ease 0s; transition: border 0.25s ease 0s; } .close-nav-icon:hover { border-color: #c10230; -webkit-transition: border 0.25s ease 0.2s; -moz-transition: border 0.25s ease 0.2s; -o-transition: border 0.25s ease 0.2s; transition: border 0.25s ease 0.2s; } .close-nav-icon div { position: absolute; top: 50%; margin-top: -1px; left: 0; width: 100%; height: 1px; background: #fff; -webkit-transition: transform 0.25s ease 0.125s; -moz-transition: transform 0.25s ease 0.125s; -o-transition: transform 0.25s ease 0.125s; transition: transform 0.25s ease 0.125s; } .close-nav-icon:hover div { -webkit-transition: transform 0.25s ease; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; transition: transform 0.25s ease; } .close-nav-icon div:first-child {transform: rotate(45deg) scale(1);} .close-nav-icon div:last-child {transform: rotate(-45deg) scale(1);} .close-nav-icon:hover div:first-child {transform: rotate(45deg) scale(1.4);} .close-nav-icon:hover div:last-child {transform: rotate(-45deg) scale(1.4);} .close-nav-icon div:after { content: ''; position: absolute; left: 0; top: 0; z-index: 2; display: block; width: 100%; height: 100%; background: #c10230; transform-origin: 50% 50%; transform: scaleX(0); -webkit-transition: transform 0.25s ease 0.125s; -moz-transition: transform 0.25s ease 0.125s; -o-transition: transform 0.25s ease 0.125s; transition: transform 0.25s ease 0.125s; } .close-nav-icon:hover div:after {transform: scaleX(1);} /* mobile nav header button ------------------------- */ .mobile-nav-header-item { position: relative; display: block; width: calc(100% - 48px); margin: 24px 0 0 auto; border: 1px solid #fff; border-right: none; } .mobile-nav-header-item a { position: relative; display: block; padding: 9px 15px; color: #fff !important; font-size: 20px; line-height: 1em; } /* mobile menu list stying ------------------------- */ #mobile-menu {position: relative; display: block;} #mobile-menu li {position: relative; display: block; width: 100%;} #mobile-menu li.menu-item-has-children {margin-top: 24px;} .mobile-nav #mobile-menu li a { position: relative; display: block; padding: 12px 15px; font-size: 16px; line-height: 1em; 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 {} .mobile-nav #mobile-menu li.menu-item-has-children > a { position: absolute; top: 0; right: 100%; background: #fff; transform-origin: 100% 0; transform: rotate(-90deg); color: #000700; font-family: "urw-din-condensed", sans-serif; font-weight: 600; text-transform: uppercase; } .mobile-nav #mobile-menu li.menu-item-has-children > a:hover {color: #fff;} .mobile-nav #mobile-menu li.menu-item-has-children > a:before, .mobile-nav #mobile-menu li.menu-item-has-children > a:after { content: ''; position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; transform-origin: 0 50%; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .mobile-nav #mobile-menu li.menu-item-has-children > a:before {z-index: -2; background: #fff;} .mobile-nav #mobile-menu li.menu-item-has-children > a:after {z-index: -1; background: #c10230; transform: scaleX(0);} .mobile-nav #mobile-menu li.menu-item-has-children > a:hover:after {transform: scaleX(1)} #mobile-menu .sub-menu { position: relative; display: block; width: calc(100% - 48px); margin: 0 0 0 auto; border-top: 1px solid #fff; border-left: 1px solid #fff; } .mobile-nav #mobile-menu li .sub-menu li a { border-bottom: 1px solid #fff; font-size: 12px; text-transform: uppercase; } .mobile-nav #mobile-menu li .sub-menu li a:after, .mobile-nav-header-item a:after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; display: block; width: 100%; height: 100%; background: #c10230; transform-origin: 0 50%; transform: scaleX(0); -webkit-transition: transform 0.375s ease; -moz-transition: transform 0.375s ease; -o-transition: transform 0.375s ease; transition: transform 0.375s ease; } .mobile-nav #mobile-menu li .sub-menu li a:hover:after, .mobile-nav-header-item a:hover:after {transform: scaleX(1);} /* mobile menu socials ------------------------- */ .mobile-nav-social { position: relative; display: block; width: calc(100% - 48px); margin: 24px 0 0 auto; } .mobile-nav-social .footer-social {text-align: left;} .mobile-nav-social .footer-social a { overflow: hidden; height: auto; margin-right: 3px; padding: 4px 4px 3px; border: 1px solid #fff; line-height: 1em; } .mobile-nav-social .footer-social a:hover {border-color: #c10230;} .mobile-nav-social .footer-social a:before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; background: #c12030; transform-origin: 50% 50%; transform: translate3d(-100%,100%,0) rotate(45deg) scale(1.4); -webkit-transition: transform 0.375s ease; -moz-transition: transform 0.375s ease; -o-transition: transform 0.375s ease; transition: transform 0.375s ease; } .mobile-nav-social .footer-social a:hover:before {transform: translate3d(0,0,0) rotate(45deg) scale(1.4);} .mobile-nav-social .footer-social a svg {position: relative; width: 21px; height: 21px;} .mobile-nav-social .footer-social a:hover svg {fill: #fff; z-index: 2;} /* animate mobile menu ------------------------- */ .mobile-nav-header, #mobile-menu > .menu-item, .mobile-nav-social { transform: translateX(100%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .mobile-nav-header.mobile-item-slide, #mobile-menu .menu-item.mobile-item-slide, .mobile-nav-social.mobile-item-slide { transform: translateX(0); } /* --------------------------------------------------------------------------------------- */ /* 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:hover:before, button.button:hover:before, input.button:hover:before { width: 0; } 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%;} /* Loading Spinners ---------------------------------------------- */ #wheel-spinner { position: absolute; top: 50%; left: 50%; z-index: 11; display: block; width: 128px; height: 128px; transform: translate3d(-50%,-50%,0) rotate(0deg); animation: linear infinite forwards spinner; animation-duration: 8s; animation-delay: 0s; pointer-events: none; opacity: 0; -webkit-transition: opacity .25s ease; -moz-transition: opacity .25s ease; -o-transition: opacity .25s ease; transition: opacity .25s ease; } #wheel-spinner.show-spinner {opacity: 1;} @keyframes spinner { 0% {transform: translate3d(-50%,-50%,0) rotate(0deg);} 100% {transform: translate3d(-50%,-50%,0) rotate(359deg);} } #wheel-spinner .spinner-primary {fill: #c10230;} #wheel-spinner .spinner-black {fill: #000700;} #wheel-spinner .spinner-white {fill: #fff;} #wheel-spinner .spinner.spinner-stroke {stroke-width: 1px;} #wheel-spinner .spinner-primary.spinner-stroke {stroke: #c10230;} #wheel-spinner .spinner-black.spinner-stroke {stroke: #000700;} #wheel-spinner .spinner-white.spinner-stroke {stroke: #fff;} #wheel-spinner .spinner-shadow {filter: drop-shadow(0 0 3px rgba(0,7,0,1));} /* --------------------------------------------------------------------------------------- */ /* 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;} .heading-hero h1 span.title-br {display: block;} .heading-hero h1 span.title-small { font-size: 0.35em; line-height: 1em; font-weight: 400; } 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, .heading-hero h1 { 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, .heading-hero h1 {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: block; margin-top: 8px; font-size: 0.45em; line-height: 1.125em; 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;} .medium-wrapper {max-width: 1000px;} .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, .tag-box { position: relative; background: #fff; border: 2px solid #000700; box-shadow: 8px 8px 0 rgba(0,7,0,0.25); } .boxed-content {padding: 24px;} .bg-beige .boxed-content, .bg-beige .tag-box {background: #f4f3ee;} .bg-black .boxed-content, .bg-black .tag-box { background: #000700; border-color: #fff; box-shadow: 8px 8px 0 rgba(255,255,255,0.25); } .box-after-note {margin-top: 12px;} .tag-box-header { position: relative; display: block; padding: 8px; background: #000700; color: #fff; } .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;} .font-weight-normal {font-weight: 400;} .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; } .hero-brush-black { background: url(../images/footer-brush.png) repeat-x center bottom; } /* -------------------------------------------------------------------------------------------- */ /* Manually set breadcrumbs ---------------------------------------------- */ /* -------------------------------------------------------------------------------------------- */ p.breadcrumbs { display: inline-block; padding: 5px 0 0 0; line-height: 1.5em !important; } .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; } /* --------------------------------------------------------------------------------------- */ /* Notice banner - used for trade show notifications ---------------------------------------------- */ /* --------------------------------------------------------------------------------------- */ #tradeshow-notices { position: fixed; bottom: 50px; left: 0; z-index: 10; pointer-events: none; -webkit-transition: top 0.25s ease; -moz-transition: top 0.25s ease; -o-transition: top 0.25s ease; transition: top 0.25s ease; } a.tradeshow-notice { position: relative; display: block; margin-bottom: 24px; transform: translate3d(-100%,0,0); pointer-events: initial; } .notice-reveal a.tradeshow-notice {transform: translate3d(0,0,0);} a.tradeshow-notice:first-child { -webkit-transition: transform 0.25s ease; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; transition: transform 0.25s ease; } a.tradeshow-notice:nth-child(2) { -webkit-transition: transform 0.25s ease 0.125s; -moz-transition: transform 0.25s ease 0.125s; -o-transition: transform 0.25s ease 0.125s; transition: transform 0.25s ease 0.125s; } a.tradeshow-notice:nth-child(3) { -webkit-transition: transform 0.25s ease 0.25s; -moz-transition: transform 0.25s ease 0.25s; -o-transition: transform 0.25s ease 0.25s; transition: transform 0.25s ease 0.25s; } .tradeshow-alert { position: absolute; z-index: 2; display: block; padding: 4px 16px 5px; background: #c10230; transform: translate3d(0,-50%,0); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); color: #fff; font-size: 0.8em; font-family: "urw-din-condensed", sans-serif; line-height: 1em; font-style: italic; font-weight: 600; text-transform: uppercase; } .tradeshow-notice .tradwshow-alert-info { position: relative; z-index: 1; display: inline-block; margin: 0; height: auto; filter: drop-shadow(0 8px 0 rgba(0,7,0,0.25)); } .tradeshow-notice .tradwshow-alert-info div { position: relative; display: block; width: 180px; background: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); color: #000700; font-size: 0.7em; line-height: 1.5em; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } a.tradeshow-notice:hover .tradwshow-alert-info div {background: #f4f3ee;} .tradeshow-notice .tradwshow-alert-info span { position: relative; display: block; font-family: "urw-din-condensed", sans-serif; font-size: 2em; line-height: 1em; font-style: italic; font-weight: 600; text-transform: uppercase; } .tradeshow-notice .tradwshow-alert-info div img { position: relative; display: block; width: 100%; height: auto; padding: 18px 32px 10px 16px; } @media screen and (min-width: 580px) { #tradeshow-notices {bottom: initial; top: 164px;} #tradeshow-notices.scrolled-notices {top: 100px;} } /* -------------------------------------------------------------------------------------------- */ /* 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; } .single-video.portrait-video {max-width: 540px; aspect-ratio: 540/960;} .video-wrapper { position: relative; height: 0; padding-bottom: 56.25%; } .single-video.portrait-video .video-wrapper { position: relative; overflow: hidden; height: 0; padding-bottom: 177.7778%; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Chrome seems to automatically add these RLL fields */ .rll-youtube-player {position: initial;} .rll-youtube-player img { left: 50%; right: initial; height: 100%; width: auto; max-width: initial; transform: translate3d(-50%,0,0); } .hai-video .rll-youtube-player img {transform: translate3d(0,0,0);} /* -------------------------------------------------------------- */ /* 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%; height: auto; margin: 16px 16px 0 0; aspect-ratio: 16/9; } .text-image-columns .video-link {margin-top: 0;} .video-link img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; -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;} .mfg-container .section-title {padding: 10px 8px 8px;} .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;} } /* -------------------------------------------------------------------------------------------- */ /* Products by Crop Listings ---------------------------------------------- */ /* -------------------------------------------------------------------------------------------- */ .crop-listing { position: relative; display: flex; flex-wrap: wrap; gap: 12px; } .crop-type { position: relative; display: block; width: calc(50% - 6px); cursor: pointer; } .crop-type img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1/1; transform: scale(0.95); -webkit-transition: transform .25s ease; -moz-transition: transform .25s ease; -o-transition: transform .25s ease; transition: transform .25s ease; } .crop-type:hover img {transform: scale(1.05);} .crop-type .crop-name { position: absolute; top: 50%; left: 50%; z-index: 2; display: inline-block; margin: 0; padding: 8px 12px 11px; background: #c10230; transform: translate3d(-50%,-50%,0); text-align: center; color: #fff; font-size: 1.5em; line-height: 0.85em; -webkit-transition: transform .25s ease; -moz-transition: transform .25s ease; -o-transition: transform .25s ease; transition: transform .25s ease; } .archive-hero {z-index: 1;} .archive-hero .archive-breadcrumbs {position: relative; z-index: 4;} .heading-hero.archive-hero h1 {position: relative; z-index: 3;} .crop-hero-img { position: absolute; bottom: 0; left: 50%; z-index: 2; display: block; width: 120%; max-width: 540px; height: auto; transform: translate3d(-50%,8%,0); opacity: 0.5; } .archive-body {z-index: 2;} @media screen and (min-width: 500px) { .crop-type .crop-name {font-size: 2em; line-height: 0.85em;} } @media screen and (min-width: 640px) { .crop-type {width: calc(33.3333% - 12px);} } @media screen and (min-width: 900px) { .crop-type {width: calc(25% - 9px);} } /* --------------------------------------------------------------------------------------- */ /* 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: #f4f3ee; -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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; height: 100%; } .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 { flex-grow: 1; 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; } .trade-show-sales-team { position: relative; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: center; min-height: 68px; height: 8vw; max-height: 112px; width: 100%; } .trade-show-sales-team.big-team {justify-content: space-around;} .trade-show-sales-team.huge-team { min-height: 52px; height: 6vw; max-height: 90px; } .trade-show-sales-member { position: relative; display: block; aspect-ratio: 0.675 / 1; height: 100%; width: auto; } .big-team .trade-show-sales-member {flex-grow: 1; aspect-ratio: auto;} .trade-show-sales-member img { position: absolute; left: 50%; z-index: 1; display: block; width: auto; height: 100%; transform: translate3d(-50%,0,0); } .trade-show-sales-member .trade-show-member-popup { position: absolute; bottom: 100%; left: 50%; z-index: 2; display: inline-block; padding: 4px 8px 6px; background: #000700; box-shadow: 4px 4px 0 rgba(0,7,0,0.25); opacity: 0; transform: translate3d(-50%,8px,0); color: #fff; font-weight: 600; font-size: 0.6em; line-height: 1em; text-transform: uppercase; text-align: center; pointer-events: none; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .trade-show-sales-member:hover .trade-show-member-popup { opacity: 1; transform: translate3d(-50%,-2px,0); } .trade-show-sales-member .trade-show-member-popup:after { content: ''; position: absolute; bottom: -4px; left: 50%; display: block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 5px solid #000700; transform: translate3d(-50%,0,0); } @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 {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);} } /* Search page results ---------------------------------------------- */ #search-results-none {} .line-illustration-gauge-wheel { position: relative; display: block; width: 256px; height: 256px; margin: 0 auto; opacity: 0.1; } .line-illustration-gauge-wheel .guage-wheel-rotate { transform-origin: 50% 50%; transform: rotate(0deg); animation: linear 45s infinite 0s forwards wheelRotate; } @keyframes wheelRotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(359deg);} } .search-fail-message { position: absolute; top: 50%; left: 0; z-index: 2; display: block; width: 100%; transform: translate3d(0,-55%,0); text-align: center; } .search-fail-message form { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .search-fail-message label { position: relative; display: block; width: 100%; } .search-fail-message input { position: relative; display: block; width: 100%; margin: 0; padding: 16px 18px; border: 1px solid #c10230; background: rgba(255,255,255,0.8); outline: none; color: #000700; font-size: 16px; font-weight: 600; line-height: 1.25em; -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; } .search-fail-message input[type="text"] { border-right: none; } .search-fail-message input[type="submit"] { display: block; width: 40px; background: #c10230; border-left: none; text-indent: 1000px; } .search-fail-message input[type="submit"]:hover {background: #840020;} .search-fail-message form:before, .search-fail-message form:after { content: ''; position: absolute; right: 16px; top: 50%; z-index: 2; display: block; width: 12px; height: 3px; background: #fff; transform-origin: 100% 50%; pointer-events: none; } .search-fail-message form:before {transform: translate3d(1px,0,0) rotate(45deg);} .search-fail-message form:after {transform: translate3d(1px,-2px,0) rotate(-45deg);} @media screen and (min-width: 400px) { .line-illustration-gauge-wheel { width: 384px; height: 384px; } } @media screen and (min-width: 767px) { .line-illustration-gauge-wheel { width: 512px; height: 512px; } } /* Drawers ---------------------------------------------- */ .drawer-group { position: relative; display: block; margin-top: 12px; } .drawer { position: relative; display: block; margin: 0; border: 1px solid #000700; border-bottom: none; } .drawer:last-child {border-bottom: 1px solid #000700;} .drawer .drawer-heading { display: block; margin: 0; padding: 12px 55px 12px 16px; cursor: pointer; font-weight: 600; font-size: 0.85em; line-height: 1.7em; } .bg-beige .drawer .drawer-heading.drawer-open {background: #fff;} .drawer .drawer-heading.drawer-open {background: #f4f3ee; color: #c10230;} .drawer .drawer-heading:before, .drawer .drawer-heading:after { content: ''; position: absolute; top: 50%; right: 14px; width: 8px; height: 1px; background: #000700; transform-origin: left center; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .drawer .drawer-heading:before {transform: translate3d(0,calc(-50% + 3px),0) rotate(225deg);} .drawer .drawer-heading:after {transform: translate3d(0,calc(-50% + 3px),0) rotate(-45deg);} .drawer .drawer-heading.drawer-open:before, .drawer .drawer-heading.drawer-open:after {background: #c10230;} .drawer .drawer-heading.drawer-open:before {transform: translate3d(0,calc(-50% - 3px),0) rotate(135deg);} .drawer .drawer-heading.drawer-open:after {transform: translate3d(0,calc(-50% - 3px),0) rotate(45deg);} .drawer .drawer-content { display: none; background: #fff; font-size: 0.85em; line-height: 1.7em; } .bg-beige .drawer .drawer-content {background: #f4f3ee;} .drawer-content-wrap {padding: 12px 16px;} /* -------------------------------------------------------------------------------------------- */ /* 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; } /* -------------------------------------------------------------------------------------------- */ /* Harvey AI ---------------------------------------------- */ /* -------------------------------------------------------------------------------------------- */ #harvey-hero { position: relative; display: block; background: #c12030; } #harvey-hero .wrapper {z-index: 3;} .harvey-hero-bg { position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; display: block; width: 100%; height: 100%; } .harvey-bg-splash { position: absolute; display: block; width: 400px; height: 3040px; } .harvey-bg-splash.left { top: 0; left: 0; background: url('../images/harvey-splash-left.svg') repeat-y left top; animation: harveybgleft 120s linear 0s infinite normal; } @keyframes harveybgleft { 0% {transform: translate3d(0,0,0);} 100% {transform: translate3d(0,-50%,0);} } .harvey-bg-splash.right { display: none; bottom: 0; right: 0; background: url('../images/harvey-splash-right.svg') repeat-y right top; animation: harveybgright 120s linear 0s infinite normal; } @keyframes harveybgright { 0% {transform: translate3d(0,0,0);} 100% {transform: translate3d(0,50%,0);} } .hai-title {padding: 64px 0;} .hai-text-banner { position: relative; display: inline-block; } .hai-text-banner h1 { position: relative; overflow: hidden; margin: 0; padding: 8px 16px; background: #000700; color: #fff; font-family: "urw-din", sans-serif; font-size: 1.15em; font-style: normal; font-weight: 600; line-height: 1em; text-transform: uppercase; } .hai-text-banner h1 span.title-move {display: inline-block; text-indent: -3000px;} .hai-text-banner svg { fill: #000700; position: absolute; top: 0; display: block; width: auto; height: 100%; aspect-ratio: 100/42; } .hai-text-banner svg.hai-text-banner-left {right: calc(100% - 1px); transform: scaleX(-1);} .hai-text-banner svg.hai-text-banner-right {left: calc(100% - 1px);} svg.harvey-logo { position: relative; z-index: 2; display: block; width: 90%; max-width: 512px; height: auto; aspect-ratio: 642/98; margin: 0.8em auto; } svg.harvey-logo .harvey {fill: #fff;} svg.harvey-logo .ai {fill: #000700;} svg.combine-whisperer { fill: #a3a0a0; position: relative; display: block; width: 82%; max-width: 480px; height: auto; aspect-ratio: 502/24; margin: 0 auto; } .go-to-harvey { position: relative; top: 0; right: 0; z-index: 49; display: block; height: 60px; margin: 0 0 62px; text-align: center; } .go-to-harvey.go-now {} .go-to-harvey a { position: relative; top: 0; right: 0; z-index: 12; display: inline-block; padding: 16px 32px; margin: 0; background: #c10230; border: 2px solid #fff; border-radius: 4px; box-shadow: 8px 8px 0 rgba(0,7,0,0.15); color: #fff; font-weight: 600; font-size: 1.2em; line-height: 1em; text-transform: uppercase; transform: translate3d(0,0,0); transition: background 0.25s ease; } .go-to-harvey a:hover {background: #840020;} .go-to-harvey.go-now a { position: fixed; right: 0; border-width: 0; border-radius: 0; transform: translate3d(0,87px,0); transition: background 0.25s ease, transform 0.25s ease; } .hai-video { position: relative; z-index: 3; display: block; } .hai-video .video-container { position: relative; overflow: hidden; display: block; width: 100%; height: auto; aspect-ratio: 1920/1080; background: #000800; } .hai-hero-bg-cover { position: absolute; bottom: 0; left: 0; z-index: 1; display: none; width: 100%; height: 50%; background: #fff; } .hai-hero-bg-cover:after { content: ''; position: absolute; bottom: calc(100% - 1px); left: 0; z-index: 2; display: block; width: 100%; height: 230px; background: url('../images/harvey-bottom-border-01.svg') repeat-x; } #hai-points {padding: 64px 0 100px;} #hai-points ul { position: relative; flex-direction: column; display: flex; flex-wrap: wrap; gap: 24px; text-align: center; } #hai-points ul li { position: relative; display: block; padding: 0 16px 16px; } #hai-points ul li:before { content: ''; position: absolute; bottom: 0; left: 0; z-index: 1; display: block; width: 100%; height: calc(100% - 0.8em); border: 2px solid #000700; border-radius: 12px; pointer-events: none; } #hai-points ul li h2 { position: relative; z-index: 2; background: #fff; text-align: center; } #hai-points svg.re-logo { fill: #000700; position: relative; display: block; width: 96%; max-width: 312px; height: auto; aspect-ratio: 364/172; margin: 0 auto 12px; } #hai-points svg.re-logo .color-two {fill: #c12030;} .point-details .point { position: relative; display: inline-block; padding: 8px 16px; margin: 0 0 8px; background: #000700; border-radius: 32px; color: #fff; font-weight: 600; line-height: 1em; text-transform: uppercase; } #hai-footer .wrapper {max-width: 1200px;} .hai-pocket-info { position: relative; z-index: 3; display: block; width: 100%; padding: 100px 0 0; margin: 0 auto -80px; text-align: center; } .hai-pocket-info h2 { font-style: normal; font-size: clamp(2em,6.5vw,4em); line-height: 0.9em; } .hai-pocket-info p {font-size: 1.25em; line-height: 1.5em;} .no-fluff { position: relative; display: inline-block; margin: 12px 0 0; transform: translate3d(-20px,0,0); } .no-fluff span { position: relative; overflow: hidden; display: block; margin: 0; padding: 6px 12px 7px; background: #c10230; color: #fff; font-family: "urw-din-condensed", sans-serif; font-size: 1.75em; font-style: italic; font-weight: 600; line-height: 0.85em; text-transform: uppercase; } .no-fluff svg { fill: #c10230; position: absolute; top: 0; display: block; width: auto; height: 100%; } .no-fluff svg.nf-start {right: calc(100% - 1px); aspect-ratio: 40/42;} .no-fluff svg.nf-end {left: calc(100% - 1px); aspect-ratio: 100/42;} .hai-pocket-hand { position: relative; left: 50%; z-index: 2; display: block; width: 350px; height: 541px; transform: translate3d(-50%,0,0); } svg.hai-hand { fill: #000700; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: auto; aspect-ratio: 4023/5998; transform: translate3d(-14%,100%,0); } .hai-pocket-hand.show svg.hai-hand {animation: handraise 1.25s cubic-bezier(.2,.55,.45,1) 0s 1 forwards normal;} @keyframes handraise { 0% {transform: translate3d(-14%,100%,0) rotate(30deg);} 70% {transform: translate3d(-0.5%,0,0) rotate(0deg);} 100% {transform: translate3d(0,3%,0) rotate(0deg);} } .hai-pocket-hand.hide svg.hai-hand {transform: translate3d(0,3%,0); animation: handlower 1.25s cubic-bezier(.2,.55,.45,1) 0s 1 forwards normal;} @keyframes handlower { 0% {transform: translate3d(0,3%,0) rotate(0deg);} 30% {transform: translate3d(-0.5%,0,0) rotate(0deg);} 100% {transform: translate3d(-14%,100%,0) rotate(30deg);} } svg.hai-hand .outline {fill: #4d4d4d;} svg.hai-hand .shading {fill: #333333;} svg.hai-hand .screen {fill: #333333;} svg.hai-hand .base {fill: #000700;} .hai-footer-bg { position: absolute; bottom: 0; left: 0; z-index: 1; overflow: hidden; display: block; width: 100%; height: 100%; } .hai-footer-bg img { position: absolute; bottom: -50px; left: 50%; display: block; width: 1195.544px; height: auto; transform: translate3d(-50%,0,0); } svg.hai-footer-border {position: absolute;} svg.hai-footer-border.hai-footer-top-right { fill: #000700; bottom: calc(100% - 1px); right: 0; } svg.hai-footer-border.hai-footer-bottom-left { fill: #fff; top: calc(0% - 1px); left: 0; display: none; } span.hai-footer-blob { position: absolute; top: 21px; left: 10%; display: block; height: 21px; width: 128px; border-radius: 12px; background: #fff; } #hai-border {position: relative; z-index: 2; border-top: 1px solid #606060;} .page-template-page-harvey footer {z-index: 3;} @media screen and (min-width: 450px) { .go-to-harvey.go-now a { right: 16px; border-width: 2px; border-radius: 4px; transform: translate3d(0,64px,0); } } @media screen and (min-width: 560px) { #hai-points ul {flex-direction: row;} #hai-points ul li:nth-child(1) {order: 2; width: calc(50% - 12px);} #hai-points ul li:nth-child(2) {order: 1; width: 100%;} #hai-points ul li:nth-child(3) {order: 3; width: calc(50% - 12px);} } @media screen and (min-width: 767px) { .hai-pocket-info { width: calc(100% - 340px); max-width: 700px; padding: 100px 0; margin: 0 0 0 auto; text-align: left; } .no-fluff {transform: translate3d(0,0,0);} .hai-pocket-hand { position: absolute; left: 0; bottom: 0; z-index: 2; width: 350px; height: 541px; transform: translate3d(0,0,0); } } @media screen and (min-width: 940px) { .harvey-bg-splash.right {display: block;} svg.hai-footer-border.hai-footer-bottom-left {display: block;} span.hai-footer-blob {left: initial; right: 25%;} } @media screen and (min-width: 1080px) { .hai-pocket-info { width: calc(100% - 440px); max-width: 700px; } .hai-pocket-hand {width: 402px; height: 600px;} } @media screen and (min-width: 1180px) { #hai-points ul {flex-wrap: nowrap;} #hai-points ul li:nth-child(1) {order: 1; width: auto;} #hai-points ul li:nth-child(2) {order: 2; width: auto;} #hai-points ul li:nth-child(3) {order: 3; width: auto;} } @media screen and (min-width: 1200px) { .hai-hero-bg-cover {display: block;} .hai-video .video-container {border: 4px solid #c10230; border-radius: 12px;} #hai-points {padding: 64px 0 100px;} } /* -------------------------------------------------------------------------------------------- */ /* Contact page ---------------------------------------------- */ /* -------------------------------------------------------------------------------------------- */ #contact-cta h1 { font-style: normal; font-size: clamp(3em, 14vw, 8em); text-transform: uppercase; } #contact-cta h1 span { display: block; margin: 0 0 12px; font-family: "urw-din", sans-serif; font-weight: 800; font-size: clamp(14px, 0.2em, 18px); line-height: 1em; } #contact-cta h1 a { display: inline-block; padding: 0.75vw 2vw 1.75vw; border: 3px solid #000700; transform: skew(-10deg,0); color: #000700; text-shadow: 0.05em 0.05em 0 rgba(0,7,0,0.15); } #contact-cta h1 a:hover { color: #c10230; border-color: #c10230; } @media screen and (min-width: 767px) { #contact-cta h1 a:hover { cursor: default; color: #000700; border-color: #000700; } } .location-container { position: relative; display: flex; flex-direction: column; } .location-column {width: 100%;} .contact-content-container { width: 100%; max-width: 512px; margin: 0 auto; } .location-column.contact-map { position: relative; overflow: hidden; height: 512px; background: #000700; } .location-column.contact-map img { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .location-column.contact-map img.zoomed-out {z-index: 2; opacity: 1; transform: scale(1);} .location-column.contact-map:hover img.zoomed-out {opacity: 0; transform: scale(1.25);} .location-column.contact-map img.zoomed-in {z-index: 1; opacity: 1; transform: scale(1);} .location-column.contact-map:hover img.zoomed-in {opacity: 1; transform: scale(1.15);} .contact-content-container .addresses { position: relative; display: flex; justify-content: center; gap: 40px; width: 100%; margin: 48px 0; } @media screen and (min-width: 900px) { .contact-content-container {margin: 0;} .location-container { flex-direction: row; align-items: center; } .location-column.contact-map { height: 40vw; max-height: 512px; width: 55%; clip-path: polygon(0 0, 100% 0, 45vw 100%, 0 100%); } .location-column.contact-content {width: 45%;} .contact-content-container .addresses {gap: 4vw;} } /* -------------------------------------------------------------------------------------------- */ /* 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.gravity-theme .gsection {border-bottom: 0; margin-top: 48px;} .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(100); } .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, .gravity-form .gform_wrapper .gfield:not(.star-rating) .gfield_radio { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; gap: 6px; } .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: block; margin: 0; width: calc(33.3333% - 4px); } .gravity-form .gform_wrapper .gfield.full-width-checkboxes .gfield_checkbox .gchoice, .gravity-form .gform_wrapper .gfield.full-width-checkboxes .gfield_radio .gchoice, .gravity-form .gform_wrapper .gfield.full-width-checkboxes .gfield_checkbox li, .gravity-form .gform_wrapper .gfield.full-width-checkboxes .gfield_radio li { display: block; margin: 0; width: 100%; } .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;} /* Checkboxes and Radio buttons - Image selections ---------------------------------------------- */ .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_checkbox, .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_radio { gap: 8px; } .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_checkbox .gchoice, .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_radio .gchoice { align-self: stretch; width: calc(50% - 4px); border: 1px solid #000700; max-inline-size: 100%; min-inline-size: 64px; } .gravity-form .gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice .gfield-image-choice-wrapper-outer { display: flex; flex-direction: column; height: 100%; } .gravity-form .gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice .gfield-image-choice-wrapper-inner { margin: auto 0 0; } .gravity-form .gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice .gfield-image-choice-wrapper-outer .gfield-choice-image-wrapper { padding: 8px; margin: 0; } .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_checkbox .gchoice label, .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_radio .gchoice label { padding: 8px; border: 0; } .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_checkbox .gchoice input[type="checkbox"]:checked + label, .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_radio .gchoice input[type="radio"]:checked + label { padding-right: 8px; border: 0; } .gravity-form .gfield.gfield--type-image_choice [type="checkbox"]:checked + label:after, .gravity-form .gfield.gfield--type-image_choice [type="checkbox"]:not(:checked) + label:after, .gravity-form .gfield.gfield--type-image_choice [type="radio"]:checked + label:after, .gravity-form .gfield.gfield--type-image_choice [type="radio"]:not(:checked) + label:after { display: none; } .gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice:where(:has(input:checked)):after {display: none !important;} @media screen and (min-width: 560px) { .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_checkbox .gchoice, .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_radio .gchoice { width: calc(33.3333% - 5.3333px); } } @media screen and (min-width: 767px) { .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_checkbox .gchoice, .gravity-form .gform_wrapper .gfield.gfield--type-image_choice .gfield_radio .gchoice { width: calc(25% - 6px); } } /* 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; } .image-map img { position: absolute; display: block; width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover; transform: scale(1); -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; transition: transform 0.5s ease; } .find-a-dealer a.find-dealer-button-title:hover + .image-map img { transform: scale(1.25); } @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;} } .bg-black h1.thank-you-page-title { color: #c10230; text-shadow: 4px 4px 0 rgba(193,32,50,0.75), 7px 7px 0 rgba(0,7,0,1), 8px 8px 0 rgba(193,32,50,2); animation: thankyoutextinverse 4s linear normal; } @keyframes thankyoutextinverse { 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;} } /* 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; } .bg-black .thank-you-message-box {background: #000700; border: 2px solid #c10230 !important;} .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-brush.footer-brush-white {background: url(../images/footer-brush-white.png) repeat-x center bottom;} .footer-brush.footer-brush-grass-white {background: url(../images/border-brush-grass-white.png) repeat-x center bottom;} .footer-brush.footer-brush-grass-black {background: url(../images/border-brush-grass.png) repeat-x center bottom;} footer { position: relative; overflow: hidden; width: 100%; padding: 100px 0; 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.footer-logo-link { position: relative; display: block; width: 256px; height: 86.35px; margin: 48px auto; } .footer-branding-logo a svg.nav-logo-lightning { position: absolute; top: 50%; left: 50%; overflow: auto; display: block; width: 256px; /* height: 86.35px; */ height: 160px; transform: translate3d(-50%,-50%,0); } .footer-branding-logo a svg.nav-logo-lightning .logo-color-one {fill: #c10230;} .footer-branding-logo a svg.nav-logo-lightning .logo-color-two {fill: #fff;} .footer-branding-logo:hover .lightning-strikes g {animation: linear infinite forwards flash;} .footer-branding-logo:hover .lightning-strikes g:nth-child(1) {animation-duration: 5s; animation-delay: 0s;} .footer-branding-logo:hover .lightning-strikes g:nth-child(2) {animation-duration: 3s; animation-delay: 1.25s; animation-name: doubleflash;} .footer-branding-logo:hover .lightning-strikes g:nth-child(3) {animation-duration: 4s; animation-delay: 3.5s;} .footer-branding-logo:hover .lightning-strikes g:nth-child(4) {animation-duration: 5.5s; animation-delay: 4s;} .footer-branding-logo:hover .lightning-strikes g:nth-child(5) {animation-duration: 4.5s; animation-delay: 5.25s; animation-name: doubleflash;} .footer-branding-logo:hover .lightning-strikes g:nth-child(6) {animation-duration: 3.5s; animation-delay: 7s;} #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-top: 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-call { position: fixed; left: 0; bottom: 24px; z-index: 999; display: inline-block; padding: 8px 16px; background: #c10230; border: 1px solid #c10230; border-left: none; transform: translate3d(-100%,0,0); font-family: "urw-din-condensed", sans-serif; font-size: 24px; line-height: 1em; color: #fff; text-transform: uppercase; -webkit-transition: background 0.25s ease, transform 0.25s ease 2s; -moz-transition: background 0.25s ease, transform 0.25s ease 2s; -o-transition: background 0.25s ease, transform 0.25s ease 2s; transition: background 0.25s ease, transform 0.25s ease 2s; } .footer-call:hover {background: #840020; color: #fff;} .footer-call.footer-call-reveal {transform: translate3d(0,0,0);} .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;} /* 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: 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 a.footer-logo-link { margin: 0; transform: translate3d(0,-15px,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;} } @media screen and (min-width: 767px) { .footer-call { position: relative; bottom: initial; left: initial; transform: translate3d(0,0,0); } footer p.copyright {text-align: left;} } @media screen and (min-width: 900px) { .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; top: 90%; 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, .address-field-container textarea { 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; } input.disabled {pointer-events: none;} .small-note {font-size: 12px; text-transform: uppercase;} .promo-notes { position: relative; display: block; padding: 2px 10px; margin-top: -4px; background: #c10230; font-size: 0.65em; line-height: 1.5em; color: #fff; } #remove-promo { padding: 0; background: none !important; border: none; outline: none; box-shadow: none; text-decoration: underline; line-height: 1em; color: #000700; } .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) - OLD --------------------------------------------------------------*/ .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:not(:first-child) {margin-top: 16px;} .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 { position: relative; 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 { position: relative; display: block; font-size: 0.65em; line-height: 1em; } .make-changes a { display: inline-block; padding: 4px 4px 6px; border: 1px solid #c10230; } .shipping-button-toggle { position: relative; display: block; width: 100%; height: auto; padding: 8px; outline: none; background: #f4f3ee; border: none; color: #c10230; font-size: 0.7em; line-height: 1em; text-transform: uppercase; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } .shipping-button-toggle:hover {background: #c10230; color: #fff;} @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;} } /*-------------------------------------------------------------- # Account page - Dealer portal --------------------------------------------------------------*/ .account-hero {padding: 0;} .account-hero h1 {padding: 32px 0;} .account-hero h1 span { position: relative; display: block; font-family: "urw-din", sans-serif; font-style: initial; font-size: 0.2em; line-height: 1em; text-shadow: none; } ul.account-tabs { display: flex; justify-content: center; border-bottom: 1px solid #d8d5ca; } ul.account-tabs li {border-top: 1px solid #d8d5ca; transform: translate3d(0,1.5px,0);} ul.account-tabs li:first-child {border-left: 1px solid #d8d5ca;} ul.account-tabs li:last-child {border-right: 1px solid #d8d5ca;} ul.account-tabs li button { margin: 0; padding: 12px 24px; background: #f4f3ee; border: 0; font-weight: 600; font-size: 0.85em; line-height: 1em; text-transform: uppercase; } ul.account-tabs li button.active {background: #fff;} .account-pages {} .account-page {position: absolute; display: none;} .account-page.active {position: relative; display: block;} .account-resources-mfgs {position: relative; display: block;} .account-resources-mfgs ul { position: relative; display: flex; flex-wrap: wrap; gap: 8px; } .account-resources-mfgs ul li { position: relative; display: block; width: calc(50% - 4px); height: auto; aspect-ratio: 2/1; } .account-resources-mfgs ul li button { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 1vw 2vw; background: none; border: 1px solid; border-radius: 2px; } .account-resources-mfgs ul li button:after { content: ''; position: absolute; top: 50%; left: 50%; z-index: 2; display: block; width: 100%; height: 100%; border: 0px solid #c10230; transform: translate3d(-50%,-50%,0); transition: all 0.25s ease; pointer-events: none; } .account-resources-mfgs ul li button.active:after { width: calc(100% + 6px); height: calc(100% + 6px); border-width: 6px; } .account-resources-mfgs ul li img { position: relative; display: block; width: 100%; height: 100%; object-position: 50% 50%; object-fit: contain; filter: grayscale(1); opacity: 0.5; transition: all 0.25s ease; } .account-resources-mfgs ul li button:hover img, .account-resources-mfgs ul li button.active img {filter: grayscale(0); opacity: 1;} .account-resource-columns { position: relative; display: none; justify-content: space-between; align-items: stretch; gap: 48px; } .account-resource-columns.active {display: flex;} .account-resources-sidebar {position: relative; display: none;} .account-resources-sidebar ul {position: relative; display: block;} .account-resources-sidebar ul.top-level { position: sticky; top: 64px; margin-top: 100px; border: 1px solid #000700; box-shadow: 8px 8px 0 rgba(0,7,0,0.15); } .account-resources-sidebar ul li {position: relative; display: block;} .account-resources-sidebar ul.top-level > li:nth-last-child(1n + 2) {border-bottom: 1px solid #d8d5ca;} .sidebar-dropdown {position: relative; display: flex;} .account-resources-sidebar ul li a { flex-grow: 1; position: relative; z-index: 1; display: block; padding: 12px 16px; color: #000700; font-weight: 600; font-size: 0.85em; line-height: 1em; text-transform: uppercase; } .account-resources-sidebar ul li a:hover {color: #c10230;} .sidebar-dropdown button { position: relative; z-index: 2; display: block; width: auto; height: 40.15px; aspect-ratio: 1/1; margin: 0; padding: 0; background: none; border: none; } .sidebar-dropdown button span { position: absolute; left: 50%; top: 50%; display: block; width: 8px; height: 1px; background: #000700; transform-origin: left center; } .sidebar-dropdown button span:first-child {transform: translate3d(0,calc(-50% + 3px),0) rotate(225deg);} .sidebar-dropdown button.active span:first-child {transform: translate3d(0,calc(-50% - 3px),0) rotate(135deg);} .sidebar-dropdown button span:last-child {transform: translate3d(0,calc(-50% + 3px),0) rotate(-45deg);} .sidebar-dropdown button.active span:last-child {transform: translate3d(0,calc(-50% - 3px),0) rotate(45deg);} .account-resources-sidebar ul li ul {padding: 4px 0; background: #f4f3ee;} .account-resources-sidebar ul li ul li {} .account-resources-sidebar ul li ul li a { padding: 8px 16px; font-weight: 400; font-size: 0.7em; line-height: 1em; text-transform: initial; } .account-resources-content {flex-grow: 1;} .resource-group {position: relative; display: block; padding-top: 100px;} .account-info-block {position: relative; display: block; margin: 0 0 60px;} .account-info-block h2 { position: relative; display: inline-block; padding: 8px 24px; margin: 0 0 8px; background: #000700; color: #fff; font-family: "urw-din", sans-serif; font-weight: 600; font-style: normal; font-size: 1em; line-height: 1em; } .account-section { position: relative; display: flex; flex-direction: column; gap: 18px; } .account-subsection { position: relative; display: block; background: #f4f3ee; } .account .account-subhead { position: relative; z-index: 1; display: block; padding: 18px; cursor: pointer; } .account .account-subhead h3 { display: block; padding: 0 32px 0 0; font-size: 1.25em; text-transform: uppercase; } .account .account-subhead:hover h3 {color: #c10230;} .account .account-subhead h3:after { content: '+'; position: absolute; right: 0; top: 50%; transform: translate3d(0,-50%,0); font-weight: 600; font-size: 1.15em; } .account .account-subsection.active .account-subhead h3:after {content: '-';} .account-sub-drawer { position: relative; display: none; padding: 0 18px 18px; } .account-info-block ul {} .account-info-block ul li { position: relative; display: flex; flex-direction: column; align-items: first baseline; padding: 16px 0; border-bottom: 1px solid #d8d5ca; } .account-info-block ul li:last-child {border: none;} .account-info-block ul li span:first-child { position: relative; display: block; width: 100%; font-weight: 600; font-size: 0.7em; line-height: 1.5em; text-transform: uppercase; } .account-info-block ul li span:last-child { position: relative; display: block; width: 100%; font-size: 0.85em; line-height: 1.5em; } a.profile-update, button.profile-update { position: relative; padding: 4px 8px; background: none; border: 1px solid #c10230; color: #c10230; font-weight: 600; font-size: 0.7em; line-height: 1em; text-transform: uppercase; transition: all 0.25s ease; } a.profile-update.profile-logout { position: absolute; top: 12px; right: 12px; } a.profile-update:hover, button.profile-update:hover { background: #c12030; color: #fff; } @media screen and (min-width: 400px) { .account-resources-mfgs ul li {width: calc(33.3333% - 5.3333px);} } @media screen and (min-width: 500px) { .account-resources-mfgs ul li {width: calc(25% - 6px);} .account-info-block ul li {flex-direction: row;} .account-info-block ul li span:first-child {width: 200px;} .account-info-block ul li span:last-child {width: auto;} } @media screen and (min-width: 640px) { .account-resources-mfgs ul li {width: calc(20% - 6.4px);} } @media screen and (min-width: 767px) { .account-resources-sidebar {display: block;} } @media screen and (min-width: 800px) { .account-resources-mfgs ul li {width: calc(16.6667% - 6.6667px);} } /*-------------------------------------------------------------- # 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 a:hover h4 {background: #840020;} 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 .cart-item-header a:hover h5 {background: #444;} 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; /* width: calc(100% - 128px); */ 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; font-size: 0.85em; line-height: 1.7em; } body .cartSection.cartTotalBox .totalRow { background: #c12030; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; font-size: 1.25em; line-height: 1.7em; } body .wrapBox { position: relative; border: 2px solid #000700; box-shadow: 8px 8px 0 rgba(0,7,0,0.15); } .cart-promo-notification { position: relative; display: block; width: 100%; max-width: 320px; padding: 8px 16px; margin: 0 0 16px auto; border: 2px solid #c10230; color: #c10230; font-size: 0.85em; line-height: 1.7em; text-align: center; } .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: block;} @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: 128px; 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;} } /*-------------------------------------------------------------- # 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 { position: relative; display: none; margin: 0 0 20px; padding: 8px 20px; background: #c10230; border: none; color: #fff; font-size: 0.7em; line-height: 1.5em; } .notice p {margin-bottom: 4px;} .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;} .account-invoice-cell 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; } .popupOverlay { display: none; background: rgba(0, 7, 0, 0.75); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; } .popup { position: absolute; top: 50px; left: 50%; z-index: 10000; display: none; width: 600px; height: auto; margin-bottom: 100px; background: #fff; transform: translate3d(-50%,0,0); box-shadow: 8px 8px 0 rgba(0,7,0,0.35); } .popup.accEditPopup { position: fixed; left: 50%; top: 50%; overflow: scroll; width: 90%; max-width: 600px; max-height: calc(100vh - 128px); margin: 0; transform: translate3d(-50%,-50%,0); } .popup-header { position: relative; display: block; width: 100%; padding: 12px 16px; background: #000700; color: #fff !important; } .popup .account-grid-row {border-bottom: none;} .popup-footer, .popup .acf-form-submit { position: relative; display: block; width: 100%; } .popup-footer input, .popup-footer button, .popup .acf-form-submit input { position: relative; display: block; width: 100%; padding: 12px 16px; background: #c10230; border: none; outline: none; color: #fff; line-height: 1em; -webkit-transition: background 0.25s ease; -moz-transition: background 0.25s ease; -o-transition: background 0.25s ease; transition: background 0.25s ease; } .popup-footer input:hover, .popup-footer button:hover, .popup .acf-form-submit input:hover {background: #840020;} form.acf-form .acf-fields {display: block;} form.acf-form .acf-fields > .acf-field { display: block; padding: 9px 16px 12px; border-top-color: #ccc; } form.acf-form .acf-field[data-width] + .acf-field[data-width] {border-top: none;} .acf-fields .acf-field.acf-field-text {} .acf-fields .acf-field.acf-field-group {background: #f2f2f2;} .acf-fields .acf-field .acf-label {display: block; margin-bottom: 6px;} .acf-fields .acf-field .acf-label label { position: relative; display: block; font-size: 0.6em; line-height: 1em; padding: 0; margin: 0; } .acf-fields .acf-field .acf-input, .acf-fields .acf-field .acf-input .acf-input-wrap {position: relative; display: block;} .acf-fields .acf-field .acf-input input[type="text"], .acf-fields .acf-field .acf-input select { position: relative; display: block; height: auto; padding: 6px 8px; background: #fff; border: 1px solid #000700; border-radius: 0; font-size: 16px; line-height: 1em; } .acf-fields .acf-field .acf-input input[type="text"]:focus, .acf-fields .acf-field .acf-input select:focus { border-color: #c10230; } .updated { position: relative; padding: 5px 20px; background: #66BB6A; border: 1px solid #4CAF50; } .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; min-width: 100px; margin: 0; border-radius: 3px; text-align: center; color: #fff; } .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;} /* ---------------------------------------------------------------------- */ /* Account - Logged In page ----------------------------------- */ /* ---------------------------------------------------------------------- */ .wpuf-user-loggedin {text-align: center;} .wpuf-user-loggedin h3 {display: block;} /* ---------------------------------------------------------------------- */ /* Account - Other WPUF stuff? ----------------------------------- */ /* ---------------------------------------------------------------------- */ 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; } .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, .acf-field-68112db897e0e, .acf-field-681a2d519a99a { 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: 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.arrow-button, button.button.arrow-button, input.button.arrow-button {padding: 8px 50px 8px 15px;} a.button, button.button, input.button {padding: 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;} /* 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;} } @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: calc(50% -3px); } } @media screen and (max-width: 580px) { #hero {padding: 100px 0;} .individual-button-wrap { display: block; margin: 5px auto 10px; width: 300px; } } /* ------------------------------------------------------------------------------- */ /* 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;} }