#footerwrap {text-align:;width:100%;}
body { font-family:default;} 
#footer { clear:both;} 
#Navigation-17474 ul li a.hover {cursor:pointer;}
a.email {letter-spacing: unset !important;}

/*------ Fonts ------

font-family: 'Open Sans', sans-serif; 400, 600
font-family: 'Oswald', sans-serif; 400, 600, 700 */

/*------- General universal ------*/

/* large gallery image border fix */

div#colorbox * {-webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important;}

/* Text field focus border reset */

*:focus {outline: unset; outline-color: unset; outline-style: unset; outline-width: unset;}

/* Fluid map */

@media only screen and (min-width: 801px) {
#map .responsive-iframe-container {position: relative; max-width: 100%; height: 0; padding-top: 56.25%; overflow: hidden;}
#map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
}

@media (min-width: 801px) {
#maincolumn {min-height: 550px;}
}

body {min-width: 306px; background: url('https://93bc24.claudeassets.com/20251015173813im_/https://spantecsystems.com/Images/120601/layout/web-body-bg.jpg'); font-family: 'Open Sans', sans-serif; font-size: 16px;}
img {max-width: 100%; height: auto;}
iframe {max-width: 100%; border: none;}
#columnsContainer {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; max-width: 1170px; margin: 18px auto; background: #fff;}
#leftcolumn {display: none;}
#maincolumn {width: 100%; max-width: 66.66%; padding: 12px 15px;}
#rightcolumn {width: 100%; max-width: 33.33%; padding: 12px 15px;}
h1, h2, h3 {font-family: 'Oswald', sans-serif; font-weight: 600; color: #00326b;}
/* h4, h5 {font-weight: normal} */
h1 {font-size: 2em;}
h2 {font-size: 1.75em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.167em;}
h5 {font-size: 1em;}
h1.pageName {width: 100%; margin: 12px 15px; border-bottom: 1px solid #e3e3e3;}
a, a:visited {text-decoration: none; color: unset;}
#maincolumn a, #maincolumn a:visited, #maincolumn i.fas {color: #00326b;}
span.breakpoint {display: inline-block;}
hr {width: 100%; max-width: 1410px; margin: 0 auto; border: none; border-top: 1px solid #222;}
.section-padding {padding-top: 48px !important; padding-bottom: 48px !important;}
.strip-main {background: #f3f3f3;}
#slide-overlay {display: none;}

@media (max-width: 800px) {
#columnsContainer {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#maincolumn, #rightcolumn {max-width: 100%;}
.Image-align-left, .Image-align-right {float: none; display: block; margin: 0 0 24px}
.Image-align-left img, .Image-align-right img {float: none !important; margin: 0 !important;}
h1, h2, h3, h4, h5 {text-align: center;}
/* h1 {font-size: 1.75em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.167em;}
h4 {font-size: 1em;}
h5 {font-size: .85em;} */
p {text-align: justify; text-align-last: center;}
}

@media (max-width: 480px) {
/* h1 {font-size: 1.5em;}
h2 {font-size: 1.167em;}
h3 {font-size: 1em;}
h4 {font-size: .85em;}
h5 {font-size: .75em;} */
}

/* Col count */

@media (min-width: 801px) {
.col-count-4 {-moz-column-count: 4; -moz-column-gap: 15px; -webkit-column-count: 4; -webkit-column-gap: 15px; column-count: 4; column-gap: 15px; list-style-position: inside;}
}

@media (min-width: 601px) {
.col-count-2 {-moz-column-count: 2; -moz-column-gap: 15px; -webkit-column-count: 2; -webkit-column-gap: 15px; column-count: 2; column-gap: 15px; list-style-position: inside;}
}

.col-count-4 li, .col-count-2 li {-webkit-column-break-inside: avoid; break-inside: avoid; padding-left: 1em; text-indent: -1.35em;}

@media (max-width: 800px) and (min-width: 480px) {
.col-count-4 {-moz-column-count: 2; -moz-column-gap: 15px; -webkit-column-count: 2; -webkit-column-gap: 15px; column-count: 2; column-gap: 15px; list-style-position: inside;}
}

/* Container system */

.container-1170 {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; max-width: 1170px; margin: auto;}
.sub-20, .sub-25, .sub-33, .sub-50, .sub-66, .sub-75, .sub-100 {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%;}
.sub-20, .sub-25, .sub-33, .sub-50, .sub-66, .sub-75 {margin: 12px 15px;}
.sub-20 {max-width: calc(20% - 30px);}
.sub-25 {max-width: calc(25% - 30px);}
.sub-33 {max-width: calc(33.33% - 30px);}
.sub-50 {max-width: calc(50% - 30px);}
.sub-66 {max-width: calc(66.66% - 30px);}
.sub-75 {max-width: calc(75% - 30px);}
.sub-100 {padding: 12px 15px;}

@media handheld, only screen and (max-width: 800px) {
.sub-25, .sub-75, .sub-33, .sub-66, .sub-50, .sub-75 {max-width: 100%; margin: 0; padding: 12px 15px; text-align: center;}
}

/* Transitions */

a, #newsletterCotntainer input.buttonSubmit, #contactForm input.buttonSubmit {webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out}

/* Buttons */

.btn-main, #newsletterContainer input.buttonSubmit, #contactForm input.buttonSubmit {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; width: 100%; max-width: 250px; height: unset; margin-top: 36px; padding: 12px 30px; font-size: 1em; text-transform: uppercase; background: #00326b; border: 2px solid #fff; font-family: 'Oswald', sans-serif; font-size: 1.25em; font-weight: 600; color: #ffcc34 !important;}
#newsletterContainer input.buttonSubmit {background: #ffcc34; color: #00326b !important; border: none;}

.btn-main:hover, #newsletterContainer input.buttonSubmit:hover, #contactForm input.buttonSubmit:hover {filter: saturate(150%);}
.btn-center {margin-left: auto; margin-right: auto;}


/* Mobile Phone Number Link */

a[href^=tel] {color: inherit; text-decoration: none;}

@media handheld, only screen and (min-width:801px) {
a.phone {pointer-events: none; cursor: default;}
}

@media handheld, only screen and (max-width:800px) {
a.phone {text-decoration: none; font-size: inherit !important;}
}

/*------ Contact form ------*/

#UpdatePanel1 div#contactForm {display: none;}
#contactForm {width: 100%;}
#contactForm .fRow {position: relative; margin: 8px 0;}
#contactForm span.cformlabel {font-size: .85em; width: 100%;}
#contactForm input, #contactForm textarea, #contactForm select, #contactForm .phoneField {width: 100%; height: 36px; margin: 4px 0; font-size: 1em;}
.fieldPhone span {width: 100% !important;}
.fieldPhone span, .fieldPhone input {font-family: lato; font-size: 18px;}
.fieldPhone input {border: 1px solid #cccccc !important;}
#contactForm textarea {height: auto !important;}
#contactForm .errorRequired {position: absolute; top: 0; right: 0;}

@media (max-width: 800px) {
#contactForm {max-width: 500px; margin: auto;}
#contactForm input.buttonSubmit {margin-left: auto; margin-right: auto;}
}

/*------ Header ------*/

#header {max-width: 100%; z-index: 99;}
#searchContainer {display: none;}

@media (max-width: 800px) {
#header {box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);}
}


/* Top strip */

@media (min-width: 601px) {
#header-top-strip .sub-100 {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
}

#header-top-strip {background: #00326b;}
#header-top-strip .sub-100 {-webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center;}
#header .social a {font-size: 1.25em; letter-spacing: 1em; color: #fff;}
#header .social a:hover {color: #ffcc34;}
.cartNav {color: #fff;}

@media (max-width: 800px) {
.cartNav {font-size: .85em;}
#header .social {text-align: center;}
a.email {display: block;}
}

@media (max-width: 600px) {
.cartNav {margin-top: 6px;}
}

@media (max-width: 480px) {
.cartNav {font-size: .65em;}
}

/* Main */

@media (min-width: 801px) {
#header .price-match {margin-right: 18px;}
}

@media (min-width: 501px) {
#header-main-strip .sub-100 {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between;}
#header .logo {-webkit-box-flex: 1; -ms-flex: 1 1 300px; flex: 1 1 300px; margin-right: 12px;}
#header .price-match {flex: 1 1 100px;}
}

#header-main-strip .sub-100 {padding: 24px 15px;}
#header .contact {-ms-flex-negative: 0; flex-shrink: 0; text-align: right;}
#header .price-match {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center;}
#header a.btn-main {margin-top: 12px;}

@media (max-width: 800px) {
#header-main-strip .sub-100 {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
#header .contact {width: 100%; margin-top: 12px;}
#header a.btn-main {margin: 12px auto 0;}
}

@media (max-width: 500px) {
#header-main-strip .sub-100 {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#header .price-match {display: none;}
}

/* Nav strip */

#header-nav-strip {background: #00326b;}
#header-nav-strip .container-1170 {max-width: 1140px;}

/* Nav */

#header .ddsmoothmenu-h {width: 100%;}
#header .ddsmoothmenu-h > ul {display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%;}
#header .ddsmoothmenu-h > ul > li {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center;}
#header .ddsmoothmenu-h > ul > li > a {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; width: 100%; height: 100%; padding: 12px 0; font-family: 'Oswald', sans-serif; font-size: 1em; font-weight: 600; text-transform: uppercase; color: #fff;}
#header .ddsmoothmenu-h > ul > li > a:hover {background: rgba(255, 255, 255, 0.1);}
.downarrowclass {position: unset; width: 16px; height: 10px;margin-left: 18px; background-image: url(https://a1656e.claudeassets.com/20251015173813im_/https://spantecsystems.com/customFonts/caret-down-white.svg); background-position: center; background-size: cover;}

/* Sub nav */

#header .ddsmoothmenu-h ul li ul {background: #011f41; width: 300px !important;}
#header .ddsmoothmenu-h ul li ul li a {padding: 12px 15px; font-size: .85em; color: #fff;}
#header .ddsmoothmenu-h ul li ul li a:hover {background: #ffcc34; color: #011f41;}

/* Mobile nav */

.mobileNav0 {background: black;}
.slicknav_nav ul li {border: none;}
.mobileNav0 .slicknav_nav a {color: #fff;}
.mobileNav0 .slicknav_nav a:hover {background: rgba(255, 255, 255, 0.2);}
.mobileNav0 .slicknav_btn {background: none;}

/* Request quote */

.request-quote h3 {width: 100%; padding: 12px 24px; background: #00326b; text-transform: uppercase; color: #fff;}
.request-quote .content {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; padding: 12px 15px;}

@media (max-width: 800px) {
.request-quote a.btn-main {align-self: -ms-flex-item-align: center; align-self: center;}
}

/*------ Footer ------*/

@media (min-width: 801px) {
#footer .sub-100 {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
.webDugoutLink:before {margin-right: 6px;}
}

#footerwrap {background: #fff;}
#footer {max-width: 1170px; margin: auto;}

@media (max-width: 800px) {
#footer {padding: 0;}
}

/* Newsletter strip */

@media (min-width: 801px) {
#newsletter-strip .sub-100 {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
}

#newsletter-strip {background: #00326b;}
#newsletter-strip .sub-100 {-webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between;-webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center;}

@media (max-width: 800px) {
#newsletter-strip .sub-100 img {margin-top: 12px;}
}

/* Newsletter */

@media (min-width: 801px) {
#newsletterContainer span.textJoin {display: block;}
}

#newsletterContainer {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#newsletterContainer span.textJoin {width: 100%; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; color: #fff;}
#newsletterContainer input.newsletterBox {-webkit-box-flex: 3; -ms-flex: 3; flex: 3; height: 36px;}
#newsletterContainer input.buttonSubmit {-webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 36px; margin-top: 0; padding: 0;}

@media (max-width: 800px) {
#newsletterContainer {max-width: 400px; margin: auto; padding: 0;}
}

/* Address strip */

#address-strip {background: #00326b; text-align: center;}
#address-strip * {color: #fff;}

/* Copyright */

.webDugoutLink {text-align: center;}
.webDugoutLink:before {content: "2019 Spantec Systems - All Rights Reserved"; display: inline-block;}

@media (max-width: 800px) {
.webDugoutLink:before {display: block;}
}

/*--- Product/cat cards ---*/

/* Product card container */

#categoryImages {width: 100%;}
#productImages ul, #categoryImages ul {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#productImages li, #categoryImages li {width: calc(33.33% - 30px); height: auto; margin: 12px 15px !important; border: none;}
#categoryImages li {padding: 0;}
#productImages li {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 0 12px;}

@media only screen and (max-width:800px) {
#productImages li, #categoryImages li {width: calc(50% - 30px) !important;}
}

@media only screen and (max-width:480px) {
#productImages ul, #categoryImages ul {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#productImages li, #categoryImages li {width: calc(100% - 30px) !important;}
}

/* Product/cat image */

#UpdatePanel1 #catImage {max-width: 400px;}
.productListImageContainer a, .catListImageContainer a {display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%;}
div#productImages li img, div#categoryImages li img {max-height: 100%; margin: auto; padding: 0;}

/* Product card content */

.productListNames, .catListNames {margin: 12px 0; font-family: 'Oswald', sans-serif; font-size: 1.75em; font-weight: 600; color: #00326b;}
.productListNames span {display: block; font-family: 'Open Sans', sans-serif; font-size: .75em; font-weight: normal; color: initial; text-transform: capitalize;}
.productListNames a, .productsBuy a {text-transform: uppercase; font-weight: 700;}
.productListPrices {margin-top: auto;}
.productListSku {display: none;}

/* Gallery Cards */

#UpdatePanel1 #galleryImages li {width: 139px !important;}
#UpdatePanel1 #galleryImages li img {position: unset; width: unset; height: auto !important;}
#galleryImages {width: 100%; max-width: 1440px;}
#galleryImages ul {display: -webkit-box; display: -ms-flexbox; display: flex;display: -ms-flex-wrap: wrap; flex-wrap: wrap;}
#galleryImages li {margin: 12px 15px; width: 100% !important; max-width: calc(25% - 30px); border-radius: 0;}
#galleryImages ul li a {height: 100%; padding: 4px;}
#galleryImages li img {width: auto; max-width: 100%; height: auto; max-height: 100px;}
.galleryCaption {font-size: 12px;}
.gallery-main-col {height: unset; padding-bottom: 0;}

@media only screen and (max-width:800px) {
#galleryImages li {max-width: calc(50% - 30px); margin: 12px 15px !important;}
}

@media only screen and (max-width:480px) {
#galleryImages li {max-width: 100%;}
#galleryImages li > div:first-child {max-height: unset;}
}

/*------ Product/cat cards ------*/

/* Product/cat card containers */
    
#categoryImages ul, #productImages ul {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -15px;}
#categoryImages li, #productImages li {width: 100%; max-width: 100%; height: auto; margin: 12px 15px !important; background: #fff; border: none;}
#categoryImages li {padding: 0;}
#productImages li {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0;}

@media (min-width: 480px) {
    #categoryImages li, #productImages li {max-width: calc(50% - 30px);}
}

@media (min-width: 800px) {
    #categoryImages li, #productImages li {max-width: calc(33.33% - 30px);}
}

/* Product image */
    
.productListImageContainer {-webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;}
.catListImageContainer a, .productListImageContainer a {position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; height: 190px; height: 0; padding-top: 100%;}
div#categoryImages img, div#productImages img {position: absolute; top: 0; width: 100%; height: 100%; padding: 0; -o-object-fit: cover; object-fit: cover;}
    
/* Product card content */
    
.catListNames, .productListNames {margin: 12px 0; text-align: center;}
.productListNames {-webkit-box-ordinal-group: 3; -ms-flex-order: 1; order: 2;}
.productListNames a, .productsBuy a {text-transform: uppercase; font-weight: 700;}
.productListNames a {color: #032F51}
.productsBuy a {color: #b10a1b}
.productListPrices {-webkit-box-ordinal-group: 4; -ms-flex-order: 1; order: 3;}
.productsBuy {-webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; margin-top: 12px;}
.productsBuy a {max-width: 200px; padding: 14px; margin: auto; font-size: 0.85em;}
.productListStock  {-webkit-box-ordinal-group: 5; -ms-flex-order: 1; order: 4;}
.stock1 {color: #032F51;}
.productListSku {display: none;}

/*------- Body fade in ------*/

body {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    0%{opacity:0}
    50%{opacity:0}
    100%{opacity:1}
}
@-moz-keyframes fadein { /* Firefox */
    0%{opacity:0}
    50%{opacity:0}
    100%{opacity:1}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    0%{opacity:0}
    50%{opacity:0}
    100%{opacity:1}
}
@-o-keyframes fadein { /* Opera */
    0%{opacity:0}
    50%{opacity:0}
    100%{opacity:1}
}

/* Gradients */

#header-main-strip {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffcc34+99 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,204,52,1) 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,204,52,1) 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,204,52,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffcc34',GradientType=0 ); /* IE6-9 */}

.request-quote, .form-container {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1e1e1+0,ffffff+100 */
background: rgb(225,225,225); /* Old browsers */
background: -moz-linear-gradient(top, rgba(225,225,225,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(225,225,225,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(225,225,225,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}



/*------ Leave this comment for space above ------*/

/*
     FILE ARCHIVED ON 07:17:16 Jun 22, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 13:44:16 Aug 26, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.43
  exclusion.robots: 0.06
  exclusion.robots.policy: 0.051
  esindex: 0.006
  cdx.remote: 5.162
  LoadShardBlock: 251.749 (3)
  PetaboxLoader3.datanode: 206.082 (4)
  PetaboxLoader3.resolve: 82.851 (2)
  load_resource: 39.498
*/