@charset "UTF-8";
/* Web Solutions 4.0 Compatible */


h1, .home h2 {font-size:1.75em; line-height: 1em}
h2{font-size:1.65em}
h3{font-size:1.55em}
h4, th{font-size:1.4em}
.styled-heading-1,
#content > .styled-heading-1 {font-size: 1.5em}
        h1+.styled-heading-1 {margin-top: -0.5em}
hr {margin: 1em 0}



/* HEADER */
body{overflow-x:hidden;}
body>header {background: #fff; position: relative; z-index: 9}
#brand {display: block; padding: 0.5em 1em; width: 7em; overflow: auto}
#brand img {max-width: 100%; height: auto; float: left}

header .tel {position: absolute; font-weight: 800; top: 1.5em; right: 4.38em}

/* NAV ------------------------------ */
.slideNav{overflow: hidden;}
body>header:before{content: "";opacity: 0; z-index: 3;background-color: #fff;display: block;position: fixed;left:100vw;top:0;width:100vw;height:100vh;transition:left 0ms ease 200ms, opacity 200ms ease}
body.slideNav>header:before{left:0;opacity: .75;transition:left 0ms ease 0ms, opacity 200ms ease}
#navContainer{position: fixed;left: 100%;top:0;bottom:0;width: 85%;max-height: 100vh;background-color:#3399CC;z-index:10;-webkit-transition: left 200ms ease;transition: left 200ms ease;overflow:auto;-webkit-overflow-scrolling: touch;}
body.slideNav {overflow: hidden;}
.slideNav #navContainer{left: 15%;}
#navContainer nav{display: inline}
#navContainer ul{display: block;float: left;width: 100%;margin: 0;padding-left: 0}
#navContainer li{display:block;float: left;width: 100%; position: relative}
#navContainer nav>ul>li{border-top: 1px solid rgba(0,0,0,0.125)}
#navContainer a, #navContainer .menu{color:#fff; font-weight: 500; line-height:2.5em;padding:0 1rem;display:block;float: left;width: 100%}
#navContainer li.on a{background-color:rgba(0,0,0,0.25);color: #fff}
#navContainer li.open{background-color: rgba(0,0,0,0.125)}
#navContainer li>span{color: #000;opacity: .5; border-radius: 50%; display: block;position: absolute;right: 0;top: 0;line-height: 2.5em;width:2.5em;height: 2.5em;}
#navContainer li>a+span{display: none}
#navContainer li.on>span{opacity: .3}
#navContainer li>span:before{content: ""; display: block; width: 50%; height: 2px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center;}
#navContainer li>span:after{content: ""; display: block; width: 50%; height: 2px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center;}
#navContainer li.open > span:before { transform: translate(-50%, -50%)rotate(0deg);}
#navContainer li > span::before { -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease;}
/*#navContainer li.open>span{-webkit-transform: rotate(90deg);transform: rotate(90deg)}*/
#navContainer #ancillary>ul>li:nth-child(2){display: none}
#navContainer ul ul {font-size: .8em;display: none}
#navContainer ul ul a {padding-left: 2rem}
#navContainer ul ul li.on a {background-color: darkred}
#navContainer .search {clear: both; padding: 1em; overflow: auto; position: relative}
#navContainer .search input {border: 0; float: left; width: 100%; height: 2.5rem; font-size: 0.875em; padding: 0 3rem 0 0.5rem}
#navContainer .search input[type="submit"] {position: absolute; width:2.5rem; padding:0; background: url(/images/search.svg) no-repeat center #000; top: 1rem; right: 1rem}
#mobilenav{background-color: #333;float: left;width: 100%;text-align: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center;}
#mobilenav a, #mobilenav span{color: #ccc;line-height: 2em; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;}
.hamburger{height: 1.5em;width: 1.5em;display: block;position: fixed;right: 1.44em;top:1.38em;z-index:2;}
.hamburger path {fill:#2C2C2C;font-size: 1.75em;}
.hamburger svg {pointer-events: none;}
.hamburger.on{top: 3px; right: 8px}

body>header.hide-small-cart .small-cart {display: none}
body>header .small-cart .quote {display: block; border:1px solid rgba(0,0,0,0.25); font-weight:600; position: fixed; right: 1.1875rem; top: 5.875rem; z-index: 2; color: #fff; background: #CD3737; padding: 0 0.75em; border-radius: 3px; line-height: 2em; box-shadow: 0 0 17px 6px #fff;}
body>header .small-cart.on .quote {top: 2.5rem; right: 0.5rem; box-shadow: 0 0 27px 0 rgba(0,0,0,0.5)}
body>header .small-cart .added {position: fixed; pointer-events: none;  transition: ease all 200ms; top: 8.6875rem; right: 1.25rem; opacity: 0;}
        body>header .small-cart.highlighted .added {opacity: 1;}
        body>header .small-cart.on .added {top:5.5rem; right:0.5rem}
        .slideNav body>header .small-cart .added {top: 43px; right: 0.25em}
body>header .small-cart .added span {font-weight: 700; transition: ease all 200ms; transform: translateY(-10px); display: block; background: #fff; white-space: nowrap; padding: 0.5em 1.5em; position: relative; z-index: 1; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); font-size: 0.85em; border-radius: 5px;}
body>header .small-cart .added span:before {content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; position: absolute; top:0; right: 2.125rem; transform: translateY(-100%)}
        .slideNav body>header .small-cart .added span:before {right: 0.4em}
body>header .small-cart.highlighted .added span {transform: none}
body>header .small-cart .added div {position: fixed; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.5)}


main > .wrap {padding-top: 0}
main > .wrap #content {padding: 2em 1em}
#content+aside {padding: 0 1em}
#content+aside ul {margin: 0}
#content .uses {margin-bottom: 1em}

.content ul li::before {left: 0}
.callout {padding: 1em 2em 1em 3em}
.callout h2 {font-size: 1.25em; margin-bottom: 0.25em}
.callout p {font-size: 1em; line-height: 1.25em}
.callout::before {width: 2em;background: #3399CC url(/images/large-check.svg) no-repeat center 1.25em;background-size: 60% auto;}

.centered-header img {max-width: 8.75em}
#cad-filters .filter-buttons,
#cad-filters .filter-buttons button {display: block; width: 100%;}
#cad-filters .filter-buttons button {margin: 3px 0 0}


/* MAIN ------------------------------ */

.twoCol, .threeCol, .resCol{
-webkit-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
-webkit-columns: auto;
        columns: auto;
-webkit-column-width: 13em;
        column-width: 13em;}

.content ul li {padding-left: 1.5em;}

.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea{margin-bottom:1em}
.formTable table td + td {padding-left: 0 !important;}
main > .wrap #content {overflow: auto}
#printOrder {display: none}
.photoright{margin:0 0 .75em 1em;}
.photoleft{margin:0 1em .75em 0;}

.videoContainer {width: 100%;height:0;line-height:0;position: relative;padding-top:56.25%; /* 16:9 */}
.videoContainer.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */}
.videoContainer iframe {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:0}

.button {font-size: 1rem}

.product-list a {max-width: 20em; margin: 0 auto 2em}

.home > * {float: left; width: 100%; clear: both}
#hero {height: 75vh;margin: 0 0 11.5rem;min-height: 18.75rem;overflow: visible;position: relative;text-align: left;}
#hero .hero-wrap { height: 100%; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; }
#hero .wrap {position: absolute;max-width: 100%;top: 0;left:0;right:0;bottom: 0;width:100%;height: 100%;z-index: 3;}
#hero:before {height: 75%}
#hero .wrap > * {position: absolute;padding:0 1em;max-width:75rem;width:100%;z-index:2;overflow: visible;bottom: 1rem;left: 50%;transform: translateX(-50%);}
#hero .wrap h1,
#hero .wrap .title {display: block; font-size: 2em; color:#fff; text-transform: uppercase; font-weight:800; margin-bottom: 0.5rem}
#hero p {margin: 0; font-size: 1em; line-height: 1.25em}

#hero-callouts {
  border-left: 0;
  border-top: 1px solid #FFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 30%;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 6;
}

#hero-callouts section { height: 100%; position: relative; width: 50%; }
#hero-callouts section:first-of-type { border: 0;border-right: 1px solid #FFF; }
#hero-callouts section .textbox { padding: .75rem 1rem; }
#hero-callouts h2 { font-size: 1.25rem; margin: 0 0 .125rem; }

.home #products {padding: 2.75em 1em}
.home #products .product-list a+a {margin-top: 2em}
#support {padding: 2.75em 1em; text-align: center}
#support select {width: 100%; margin-bottom: 0.5em}
#support button {width: 100%;}
#CAD360 {position: relative; line-height:1.25rem; padding:3rem 1rem 3.5rem}
#CAD360 .flex {}
#CAD360 .flex > * {}
#CAD360 .flex .controls {display: none}
#CAD360 .flex .model {height: 15rem; margin-bottom: 2em; background: url(/images/home/cad-360-image.jpg) no-repeat center / contain}
#CAD360 .wrap {text-align:center}
#CAD360 .text-wrapper {display: inline-block; text-align:center; max-width: 31.25rem}
.bg-ribbon {padding: 5em 1em; text-align: center; position: relative;}
        #versaflex.bg-ribbon {background: url(/images/home/versaflex-mobile-bg.jpg) no-repeat center / cover}
        #engineered-solutions.bg-ribbon {background: url(/images/home/engineered-solutions-mobile-bg.jpg) no-repeat center / cover}
.bg-ribbon h2 {text-transform: uppercase; font-weight:800}
.bg-ribbon p {line-height: 1.25em}
.bg-ribbon:before {content: ""; z-index: 1; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top:0; left:0}
.bg-ribbon .wrap {z-index: 2}
.bg-ribbon .wrap p:last-child {margin-bottom: 0}
#featured-video h2,
#featured-video .button {margin-top: 1em}
#featured-video p {font-size: 1em; line-height: 1.25em}
#welcome {padding: 3em 1em 2em}
#welcome h2 {text-transform: lowercase}
#welcome p {font-size: 1em; line-height: 1.25em}
#welcome .message {margin-bottom: 3em}
#welcome .button {width: 100%; text-align: center}
#welcome .blog .button {margin-top: 1em}

#content > .image-links li + li {margin: 1em 0 0}

.pageHeader {height:auto; padding-bottom: 20%; background-size: cover; background-position: center right}
        .landing .pageHeader {padding: 2.5em 1em; height:auto}
        header:not(.hide-small-cart) + .landing .pageHeader {padding-top: 5em}
.landing .pageHeader p {margin: 0; line-height: 1.25em}
.blogPost img {max-width: 100%; height: auto}
.product-list a {max-width: 100%}
.product-list a .product-image img {width:100%}

#cad-filters .filter-buttons button + button {margin-left: 0}
#cad-filters .filter-buttons button.on::after {display: none}
#cad-filters .filters {margin-top: 2em}
#CAD-drawings li.no-models {display: block}

#content .search input,
#content .search .toggleButtons button {padding: 0 1em; height: 2.81em; font-size: 1rem}

.cleanMove-table thead {display: none}
.cleanMove-table tr {display: block; width: 100%; float: left;margin-bottom: 1em; border: 1px solid #ccc;}
.cleanMove-table td {display: block; width: 100%; float: left; padding: 0.75rem;}
.cleanMove-table td:before {content: attr(data-attribute); font-weight:700; display: block;}
.cleanMove-table td:nth-child(2):before {color: #4B5257;}
.cleanMove-table td:nth-child(3):before {color: #74ad00;}
.cleanMove-table td:nth-child(4):before {color: #39c;}
.cleanMove-table td {border-top: 1px solid #ccc; line-height: 1.25em}
.cleanMove-table td:first-child {background: #efefef; border: 0; font-weight:600}

.cleanMoveIndustries-table tbody > tr > th {font-size: 1.125em}
.cleanMoveIndustries-table tbody > tr > td {font-size: 0.875em}
.cleanMoveIndustries-table tbody > tr > td.background {display: none}

.palletConveyor-table td {font-size: 0.75em; line-height: 1.25em}
.landing .pageHeader .intro-text h1 {margin-bottom: 0;}
.landing .pageHeader .intro-text .subheading {display: block; text-transform: none; font-size: 1.5rem; font-weight: 700; line-height: 1em; margin: 0.125em 0 0.75em;}

.pageHeader {height:4.625rem; padding-bottom: 0}
.landing.type-2 .pageHeader {height:auto; padding:2em 1em}
.landing.type-2 .pageHeader .intro-text p {margin-bottom: 1.5em;}
.landing.type-2 .pageHeader .product {max-width:20em; width:100%; box-shadow: 0 5px 30px rgba(0,0,0,0.5); margin:0 auto; text-align: left;}
.landing.type-2 .pageHeader .product .product-image {padding-bottom: 100%;}
.landing.type-2 .pageHeader .product .product-image img {width:auto}
.landing .featured-product {padding:1.5em; background:#efefef; margin: 1em 0 2em;}
.landing .featured-product .product-list .product img {width:auto}

#content .floated-video {max-width:100%; width:100%; margin: 0 0 2em}
#content .floated-video .videoContainer {max-width: 100%; width:100%}
#content .floated-video figcaption {text-align:center; font-size: 0.87rem; line-height: 1.25em; margin-top: 0.5em}


/* FOOTER ------------------------------ */
body>footer {text-align: center}
body>footer .wrap{display: -ms-flexbox;    display: -webkit-box;    display: flex;    -ms-flex-direction: column;    -webkit-box-orient: vertical;    -webkit-box-direction: normal;    flex-direction: column;    -ms-flex-wrap: nowrap;    flex-wrap: nowrap;    -ms-flex-pack: start;    -webkit-box-pack: start;    justify-content: flex-start;    -ms-flex-line-pack: stretch;    align-content: stretch;    -ms-flex-align: stretch;    -webkit-box-align: stretch;    align-items: stretch;}
body>footer .logos {margin-bottom: 3em}
body > footer .email-form {margin: 0 auto}
#web-solutions{
 -ms-flex-order: 1;
 -webkit-box-ordinal-group: 2;
         order: 1;
}
body>footer .wrap nav a+span:before {content: "|"; margin: 0 0.5em}


@media (max-width: 550px) {
  #hero { margin-bottom: 20rem;}
  #hero-callouts { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 20rem;}
  #hero-callouts section { height: 50%; width: 100%; }
  #hero-callouts section:first-of-type {border:  0; }
  #hero-callouts p { display: inline-block; margin: 0 .5rem 0 0; }
}