/* Theme Name: Midwest Instrument Author: IGNITE Media Group Author URI: http://chooseignite.com Template: storefront Description: Custom Child Theme for Midwest Instrument Version: 1.0.0 Text Domain: storefront */ @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,700,800,900'); body { font-family: 'Fira Sans', sans-serif; font-weight:400; } h1,h2,h3,h4 { font-weight:800; } .large-text { font-size:38px; font-weight:800; margin:0; line-height:1; } .btn { display:inline-block; background-color:#ddd; border-radius:20px; padding:10px 35px; color:black; font-weight:800; text-align: center;} .btn-gray { background-color:#5a5a5a; color:white; } hr {background-color: rgba(0,0,0,.05);} .image-bg hr {background-color: rgba(255,255,255, .4);} a[href^=tel] { color: inherit; text-decoration: none;} .arrow-cta {color: white; font-size: 14px; display: flex; display: inline-flex; flex-basis: flex-start; align-content: center; align-items: center;} .arrow-cta:before {content: "►"; padding-right: 6px;} .arrow-cta.grn:before {color: #49aa48; margin-top: 3px;} .btn.green {background: #49aa48; color: white; text-transform: uppercase; } .btn.grn-gradient {color: white; border-radius: 2px; font-size: 1.4em; box-shadow: 2px 2px 3px #b2b2b2; padding: 10px 16px; line-height: 1;} .btn.green a, .btn.grn-gradient a {color: white;} .main { margin-right: 20px; margin-left: 20px; } img {max-width: 100%; height: auto;} .img-scaled-down {max-width: 49%; height: auto; vertical-align: middle; display: inline-block;} .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grn-gradient, header > nav > ul > li { background: rgb(57,153,56); background: -moz-linear-gradient(top, rgba(57,153,56,1) 0%, rgba(120,192,66,1) 50%, rgba(57,153,56,1) 100%); background: -webkit-linear-gradient(top, rgba(57,153,56,1) 0%,rgba(120,192,66,1) 50%,rgba(57,153,56,1) 100%); background: linear-gradient(to bottom, rgba(57,153,56,1) 0%,rgba(120,192,66,1) 50%,rgba(57,153,56,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#399938', endColorstr='#399938',GradientType=0 ); } .gray-gradient, header > .top > .more, header > nav > ul > li:nth-child(1), header > nav > ul > li:hover, .btn.grn-gradient:hover { background: #5a5a5a; background: -moz-linear-gradient(top, #515151 0%, #6e6e6e 50%, #515151 100%); background: -webkit-linear-gradient(top, #515151 0%,#6e6e6e 50%,#515151 100%); background: linear-gradient(to bottom, #515151 0%,#6e6e6e 50%,#515151 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#515151',GradientType=0 ); } header > nav { display:block; } header > nav > ul { list-style:none; margin:0; padding:0; } header > nav > ul > li { display:flex; flex-direction: column; vertical-align:middle; flex: 1; align-items:center; justify-content: space-around; text-align:center; border-right: 1px solid #417e31; border-left: 1px solid #83c47a; padding: 0;} header > nav > ul > li {border-left: none;} header > nav > ul > li > a { display:block; text-transform:uppercase; line-height:1.2; font-weight:800; vertical-align: middle; padding:10px 10px; color:white!important; cursor: pointer; white-space: normal;} header > nav > ul > li > a > span { display:block; font-size:75%; font-weight:400; } header > nav > ul > li.menu-item-home {padding: 10px; flex: .5;} header > nav > ul > li.menu-item-home > a { background:url('images/home-icon.png') no-repeat center center / contain; text-indent:-9999px;} header > nav {} header > nav > ul > li {position: relative;} header > nav > ul > li > ul {height: 0; overflow-y: hidden; z-index: 99; background: #eaeaea; list-style: none; text-align: left; margin-left: 0; min-width: 100%;} header > nav > ul > li > ul.opennav {height: auto;} header > nav > ul > li > ul > li {padding: 8px 12px; border-bottom: 1px solid #b5b5b5; font-size: .9em;} header > nav > ul > li > ul > li:hover { background:#e1e1e1; } header > nav > ul > li > ul > li > a {color: #131313; font-weight: bold;} header > nav > ul > li > ul > li > ul {display: block; font-size: .9em; list-style: none;} header > nav > ul > li > ul > li > ul > li {display: inline-block; padding: 4px 16px 4px 0;} header > nav > ul > li > ul > li > ul > li:before {content: "■"; padding-right: 4px; color: #5a5a5a; position: relative; top: -2px; font-size: .8em;} header > nav > ul > li > ul > li > ul > li:hover:before {color: #49aa48;} header > nav > ul > li > ul > li > ul > li.menu-item-has-children {display: block; border-bottom: 1px solid #b5b5b5; padding: 4px 0;} header > nav > ul > li > ul > li > ul > li:last-of-type {border-bottom: 0; padding-bottom: 0;} header > nav > ul > li > ul > li > ul > li:hover {color: #49aa48;} header > nav > ul > li > ul > li > ul > li:hover a {color: black;} header > nav > ul > li > ul > li > ul > li > ul {display: block; white-space: normal;} header > nav > ul > li > ul > li > ul > li > ul > li {display: inline-block; display: flex; display: inline-flex; flex-basis: flex-start; align-content: center; align-items: center; padding-right: 16px;} header > nav > ul > li > ul > li > ul > li > ul > li:before {content: "►"; padding-right: 4px; color: #5a5a5a; margin-top: 2px; font-size: .8em;} header > nav > ul > li > ul > li > ul > li > ul > li:hover:before {color: #49aa48;} header > .top > .constant { position: relative; z-index: 100;} header > .top > .constant h1 {margin: 0;} header > .top > .more { display:flex; align-items:center; justify-content: center; flex-direction:row; position:relative; padding:10px 20px; color:white;} header > .top > .more .phone-search { margin-right:20px; } header > .top > .more .phone-search form {display: none; align-content: center; align-items: center;} header > .top > .more .phone-search form button {background: none; color: white; font-size: 32px; padding: 0 0 0 10px;} header > .top > .more .phone-search input {border-radius: 8px;} header > .top > .more a { color:white; } header > .top > .more a.phone-top { font-size:1.4em; font-weight:800; } header > .top .ad { text-align:center; justify-content: center; z-index: 2; position: relative;} header > .top .ad img { width:60%; margin:0 auto; height:auto;} header > .top .ad p {margin:0; font-weight:bold; } a.target-burger{margin:0 7px;width:3.25em;height:3.25em; position: relative; display:block;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}a.target-burger:hover{cursor:pointer;-webkit-opacity:.45;-moz-opacity:.45;opacity:.45}a.target-burger.toggled ul.buns li.bun{-webkit-transform:rotate(45deg) translateZ(0);transform:rotate(45deg) translateZ(0)}a.target-burger.toggled ul.buns li.bun:last-child{-webkit-transform:rotate(-45deg) translateZ(0);transform:rotate(-45deg) translateZ(0)}a.target-burger ul.buns{width:1.625em;height:1.625em;list-style:none;margin:-.8125em 0 0 -.8125em;padding:0;position:absolute;top:50%;left:50%;-webkit-transition:-webkit-transform 1s cubic-bezier(.23,1,.32,1),color 1s cubic-bezier(.23,1,.32,1);transition:transform 1s cubic-bezier(.23,1,.32,1),color 1s cubic-bezier(.23,1,.32,1);-webkit-transform:translateZ(0);transform:translateZ(0);color:#5a5a5a;}a.target-burger ul.buns li.bun{width:100%;height:2px;background-color:#5a5a5a;position:absolute;top:50%;margin-top:-.75px;-webkit-transform:translateY(-3.75px) translateZ(0);transform:translateY(-3.75px) translateZ(0);-webkit-transition:-webkit-transform 1s cubic-bezier(.23,1,.32,1),background-color 1s cubic-bezier(.23,1,.32,1);transition:transform 1s cubic-bezier(.23,1,.32,1),background-color 1s cubic-bezier(.23,1,.32,1)}a.target-burger ul.buns li.bun:last-child{-webkit-transform:translateY(3.75px) translateZ(0);transform:translateY(3.75px) translateZ(0)} /* Footer */ footer .footer {background: #fafafa; padding: 20px;} footer .footer .top {border-bottom: 1px solid #e3e3e3;} footer .footer .top .right {text-align: center;} footer .footer .top .right h1 {color: black; margin: 0; line-height: 1;} footer .footer ul.social {list-style: none; display: inline-block; margin: 0 0 0 12px; line-height: 1;} footer .footer ul.social li {display: inline-block; height: 30px; width: 30px; border-radius: 50%; background: #5a5a5a; text-align: center; position: relative;} footer .footer ul.social li a {color: white; font-size: 18px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);} footer .copyright {background: #49aa48; color: white; padding: 20px; text-align: center; display: block; font-size: 12px;} footer .contact {text-align: center; display: inline-block; width: 100%;} footer .contact img {margin: 0 auto;} footer .contact .btn {margin: 12px 0;} footer .contact p {margin-bottom: 6px; line-height: 1.2; font-weight: 500;} footer .footer .prop65 {font-weight: bold; text-align: center; margin-bottom: 0; margin-top: 2vw; line-height: 1.2;} footer .footer .prop65 span {font-size: 1.2em;} footer .footer .prop65 span:before {content: ""; display: inline-block; height: 1.4em; width: 1.4em; position: relative; top: .2em; margin-right: .2em; background: url(/wp-content/uploads/2019/05/prop-65.png) no-repeat center center / contain;} #catalog {position: fixed; z-index: 9; bottom: 0; right: 0; font-size: 12px; padding: 8px 8px; background: rgba(255,255,255,.8); border-radius: 6px 0 0 0; text-align: right; max-width: 200px; display: none;} .home #catalog {display: block;} #catalog a {display: block;} #catalog a span {text-align: center; display: block; line-height: 1.2; margin-bottom: 4px;} #catalog img {margin: 0 auto; } /* front page */ .fpfeatured { margin-top:5vw; margin-bottom:5vw; overflow: hidden; } .fpfeatured .cats .category-figure, .fpfeatured .cats .category-figure .category-tile { display:flex; flex-direction:column; align-content: center; align-items: center; padding: 10px 6px; text-align: center; flex: 1 0 50%; justify-content: space-between; background-color:#eeeeee; /*width: 100%;*/ transition: background 1s; max-width: 100%;} .fpfeatured .cats .category-figure .category-tile {padding: 0;} .fpfeatured .cats .row > div > .row > div .category-figure {height: 100%;} .fpfeatured .cats .category-figure img {display: block; margin: 10px 0; flex-shrink: 0; max-height: 170px; width: auto; transition: all .5s; max-width: 100%; height: auto;} .fpfeatured .cats .category-figure .types {flex: 2; align-content: center; align-items: center; display: flex; justify-content: center; max-width: 100%;} .fpfeatured .cats .category-figure .name {line-height: 1; max-width: 100%;} .fpfeatured .cats .category-figure:last-of-type { margin-right: 0;} .fpfeatured .cats .category-figure span {text-align: center; color: #49aa48; text-transform: uppercase; font-weight: bold; line-height: 1; width: 100%; transition: all 1s;} .fpfeatured .cats .category-figure .name span:last-of-type {position: absolute; right: 10px; opacity: 0; width: 0; text-align: right; } .fpfeatured .cats > h2, .fpfeatured .cats header { text-align:center; color:white; font-weight:700; margin-bottom: 0;} .fpfeatured .cats { } .fpfeatured .cats > .row {position: relative; z-index: 1;} .fpfeatured .cats > .row .row {display: flex; justify-content: space-between;} .fpfeatured .cats > .row {flex-grow: 1; width: 100%;} .fpfeatured .cats > .row > div {display: flex; flex-direction: column; flex: 1 0 100%; max-width: 100%; margin-top: 3px;} .fpfeatured .cats > .row > div:nth-of-type(2) {flex: 2 0 100%; max-width: 100%;} .fpfeatured .cats > .row > div:last-of-type {padding-right: 0;} .fpfeatured .cats > .row > div > div {flex: 1 0 auto;} .fpfeatured .cats > .row > div:nth-of-type(2) .row > div {max-width: 50%; max-width: calc(50% - 1.5px);} .fpfeatured .plus {background: #5a5a5a; display: block; height: 30px; width: 30px; border-radius: 50%; color: white; position: relative; margin: 0 auto; padding: 0; transition: all 1s;} .fpfeatured .plus:before {content: ""; display: block; height: 50%; width: 1px; background: white; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); transition: all 1s;} .fpfeatured .plus:after {content: ""; display: block; width: 50%; height: 1px; background: white; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);} .fpfeatured .category-figure > span:last-of-type {display: flex; align-content: flex-end; align-items: flex-end; flex:1;} .fpfeatured .name span:last-of-type {} .fpfeatured .category-panel .plus {background: white; display: block; height: 30px; width: 30px; border-radius: 50%; color: white; margin: 0 auto; padding: 0; position: absolute; bottom: 20px; right: 20px;} .fpfeatured .category-panel .plus:after {content: ""; display: block; width: 50%; height: 1px; background: #49aa48; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);} .fpfeatured .category-panel .plus:before {opacity: 1;} .fpfeatured .category-panel { position: absolute; opacity: 0; z-index: -1; height: 100%; width: 100%; max-height: 100%; top: 0; bottom: 0; padding: 25px 10px; max-width: 100%!important; left: 0; right: 0; transition: all 1s;} .fpfeatured .category-panel a {color: white;} .fpfeatured .category-panel.show {opacity: 1; z-index: 1;} .fpfeatured .category-panel .row {padding: 0 25px;} .fpfeatured .category-panel * {opacity: 1;} .fpfeatured .category-panel .name {padding-bottom: 12px; display: flex; width: 100%; flex-wrap: nowrap;} .fpfeatured .category-panel .name span {color: white; font-size: 1.1em; text-align: left; padding: 8px; width: auto; } .fpfeatured .cats .category-panel .name span:last-of-type {width: auto; opacity: 1;} .fpfeatured .category-panel img {display: block; } .fpfeatured .cats .category-panel .types {} .fpfeatured .cats .category-panel .types {position: relative; width: 100%; text-align: center; padding: 0 1vw; padding-bottom: 12px;} .fpfeatured .category-panel .types img {max-height: 90px; display: block; margin-right: 12px; transition: all 1s; max-width: 40%;} .fpfeatured .category-panel .types ul {margin: 0 6px; max-width: 100%; width: 100%; border-left: 1px solid white;} .fpfeatured .category-panel .types ul li {padding: 0 15px;} .fpfeatured .category-panel .types ul li:before {display: none; } .fpfeatured .category-panel .types ul li:hover:before {display: block;} .fpfeatured .category-panel .types ul li a {color: white;} .fpfeatured .backflow-test, .fpfeatured .productfinder { text-align:center; } .fpfeatured .productfinder h3 { display:block; font-weight:400; margin:20px 0; } .fpfeatured .productfinder p { margin:0; color:#5a5a5a; } .fpfeatured .productfinder h3, .fpfeatured .productfinder h3 a { color:black; } .fpfeatured .productfinder { padding: 3vw 4vw; background:url('images/texture-bg.jpg') no-repeat center center / cover; } .fpfeatured .backflow-test { padding: 2vw; background:url('images/metal-bg.jpg') no-repeat center center / cover; color:white; } .fpfeatured .backflow-test h2 { color:white; } .fpfeatured .backflow-test a { color:white; } .fpfeatured .backflow-test img {display: block; margin: 0 auto 20px;} .fpfeatured .backflow-test div {position: relative;} .fpfeatured .types ul {color: white; list-style: none; margin: 0 0 0 12px; width: 0;} .view-products {text-align: center; font-weight: bold; padding: 2vw; display: flex; justify-content: center; align-items: center; align-content: center; color: black;} .view-products i {color: #49aa48; font-size: 1.4em; margin-right: 5px; } .fp-featuredpages { position:relative; width: 100%;} .fp-featuredpages:before { position:absolute; content:""; display:block; left:-1020px; top: 0; height:calc(100% - 20px); width:1000px; background-color:#49aa48; z-index:-1; } .fp-featuredpages:after { position:absolute; content:""; display:block; right:-1020px; top: 0; height:calc(100% - 20px); width:1000px; background-color:#5a5a5a; z-index:-1; } .fp-featuredpages > div { padding: 2.5vw 3vw; color:white; } .fp-featuredpages > div > p { padding-right:5vw; } .fp-featuredpages > div h3 { font-size:20px; margin: 0 0 .24em;} .applications {display: flex; align-content: flex-start; align-items: flex-start;} .applications img {margin-left: 2vw; margin-right: 2vw; flex-shrink: 0; max-height: 300px; width: auto;} .fp-video {margin-top: 5vw; margin-bottom: 5vw;} .fp-video .video-text {padding: 3vw 0 0 0;} .fp-video .video-text img {margin: 0 0 24px;} .rev_slider_wrapper .rev_slider li.tp-revslider-slidesli * {font-family: "Fira Sans", sans-serif!important;} /* Product Page */ .heading {display: block; width: 100%; height: 9vw; background: url('/wp-content/uploads/2018/08/page-header.png') no-repeat center center / cover;} .scroll-box {max-width: 100%; overflow-x: auto;} ul.none {list-style: none; margin: 0;} ul.arrow, ul.gray, ul.green, .electrical-specs ul, ul.arrow ul, ul.gray ul, ul.green ul {list-style: none; margin-left: 0;} li >ul.arrow, li > ul.gray, li > ul.green, .electrical-specs li > ul {margin-left: 1.5em;} ul.arrow li, ul.gray li, ul.green li, .electrical-specs ul > li {padding-left: 30px; position: relative;} ul.gray li:before, .electrical-specs > ul li:before, .electrical-specs > ul > li > ul > li:before {content: "●"; color: #5a5a5a; padding-right: 8px; padding-left: 2px; position: absolute; top: 0px; left: 0;} ul.green li:before, .electrical-specs > ul > li:before, .electrical-specs > ul > li > ul > li:before {content: "●"; color: #50ac4e; padding-right: 8px; padding-left: 2px; position: absolute; top: 0px; left: 0;} .electrical-specs > ul:nth-of-type(even) > li:before, .electrical-specs > ul:nth-of-type(even) > li > ul > li:before {color: white;} ul.arrow li:before, ul.gray.arrow li:before, ul.green.arrow li:before, .electrical-specs > ul:nth-of-type(2) > li > ul > li:before {content: "►"; font-size: .8em; padding-top: 3px;} ul.gray li a, ul.green li a {color: black;} ul.gray-stripe {margin-left: 0; font-size: 14px; margin-bottom: 1.6vw;} ul.gray-stripe li {border-bottom: 1px solid white; background: #efefef; font-weight: 600; padding: 8px 16px 8px 52px; line-height: 1.1;} ul.gray-stripe > li:before {top: 8px; left: 8px; padding-right: 16px; padding-left: 16px;} ul.gray-stripe li:nth-of-type(even) {background: #fafafa;} ul.gray-stripe a {color: #49aa48;} .product-description {padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #ebebeb;} .product-description .text {margin-bottom: 20px;} .product-description h1 {margin-bottom: 0; font-size: calc(30px + 1.8vw); line-height: 1;} .product-description h2 {margin-top: 0; color: #5a5a5a; font-size: calc(20px + 1vw); } .product-description h2:not(:last-of-type) {margin-bottom: 0;} .product-description h2.subtitle {margin-bottom: 0; color: #49aa48;} .product-description p {font-size: 14px;} .product-description .images {display: inline-block; align-self: stretch; max-width: 100%; float: none;} .product-description .images .flex-viewport {height: 60%;} .product-description .images .woocommerce-product-gallery__image {text-align: center;} .product-description .images .woocommerce-product-gallery__image a {display: inline-block;} .product-description .images .flex-control-nav.flex-control-thumbs {display: flex; justify-content: space-around; flex-wrap: wrap;} .product-description .images .flex-control-nav.flex-control-thumbs li {margin: 0!important; padding: 15px; width: 25%; flex-basis: 25%;} /*.product-description .images > div {display: inline-block; text-align: center;} .product-description .images > div img {max-height: 240px; width: auto;} .product-description .images > div span {padding: 10px; font-weight: bold; display: block; font-size: 1.4em;}*/ /*.product-description .images > div:nth-of-type(3) {transform: translateX(80px); z-index: 98;} .product-description .images > div:nth-of-type(3) img {max-width: 160px; } .product-description .images > div:nth-of-type(2) {transform: translateX(140px); z-index: 99;} .product-description .images > div:nth-of-type(2) img {max-width: 120px; } .product-description .images > div:first-of-type {transform: translateX(180px); z-index: 100;} .product-description .images > div:first-of-type img {max-width: 80px; }*/ .storefront-full-width-content.single-product div.product .woocommerce-product-gallery, .single-product div.product .images {margin-right: 0; margin-bottom: 0;} .product-specs {padding-top: 30px; padding-bottom: 30px;} .product-specs h3, .dp-gauge-switch h3 {color: white; margin: 0; border-bottom: 2px solid white; padding: 0px 24px; font-size: calc(18px + .4vw);} .product-specs .features h3, .dp-gauge-switch h3 {background: #50ac4e; } .product-specs .specifications h3 {background: #5a5a5a;} .product-specs .common-app h3 {background: black;} .product-specs .electrical-specs {background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVQImWNgQAX/yeAAAIHCA/0RE2WAAAAAAElFTkSuQmCC') repeat 0 0, url('/wp-content/uploads/2018/08/Layer-18.png') no-repeat 25% center / cover; color: white; padding: 30px; margin-bottom: 10px; margin-top: 10px; } .product-specs .electrical-specs > ul.gray {margin-left: 0; margin-bottom: 2em;} .product-specs .electrical-specs > ul.gray > li {margin-bottom: 6px;} .product-specs .special-features {border: 1px solid #5a5a5a; padding: 2vw; position: relative;} .product-specs .special-features h3 {color: #5a5a5a;} .product-specs .special-features ul {margin-bottom: 8px;} .product-specs .special-features ul li {font-size: .9em; break-inside: avoid;} .product-specs .special-features ul.gray > li:before {padding: 3px 8px 0 2px;} .product-specs ul li a {color: #49aa48;} .models {text-align: center; margin-bottom: 35px; margin-top: 10px; clear:both;} .models .grid {display: flex; justify-content: center;} .models .grid > div {padding: 0 5px; display: flex; flex-direction: column; } .models .grid > div .img {flex-grow: 1; margin-bottom: 14px; max-width: 200px; height: auto;} .models .grid > div span {font-size: 26px; font-weight: bold;} .models .grid > div span sup {font-size: 60%;} .models > span {font-size: 18px; font-weight: bold;display: block;} .documents {background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVQImWNgQAX/yeAAAIHCA/0RE2WAAAAAAElFTkSuQmCC') repeat 0 0, url('/wp-content/uploads/2018/08/Layer-18.png') no-repeat center center / cover; position: relative; color: white; background-attachment: fixed;} .documents > div {padding:30px;} .documents > div .top {display: flex; justify-content: space-between; align-content: center; align-items: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid white;} .documents > div .top img {max-height: 60px; height: auto; width: auto;} .documents > div .lower {padding: 0 3vw;} .documents .advantage {border-bottom: 10px solid white;} .documents .advantage h3 {color: white; margin-bottom: 0; } .documents .documentation h3 {line-height: 1.1;} .documents .documentation h3 span {display: block; color: white;} .documents .documentation ul {list-style: none; margin: 0; } .documents .documentation ul li {display: flex; justify-content: flex-start; align-content: center; align-items: center; padding: 1vw; text-transform: uppercase; } .documents .documentation ul li:before {content: ""; display: block; height: 30px; width: 30px; background: url('/wp-content/uploads/2019/03/filegreen.png') no-repeat center center / contain; margin-right: 5px; flex-shrink: 0;} .documents .documentation ul li a {color: #49a847; word-wrap: break-word; overflow: hidden;} .documents ul {margin-bottom: 0;} .documents .advantage ul li a {color: white;} .documents .advantage ul li:before {color: #49aa48;} .contact-banner {text-align: center; padding: 30px; background: #fafafa; margin: 15px 0;} .product-table.literature {padding: 0 0 4vw;} .product-table {max-width: 100%; margin: 0; padding: 0 7vw 4vw; } .product-table table {font-size: 14px;} .product-table table th {background: #5a5a5a; color: white; text-align: center; vertical-align: middle; border-bottom: 3px solid white; font-size: calc(1em + .2vw); line-height: 1; padding: 1em; } .product-table table td {text-align: center; vertical-align: middle; padding: 1em; line-height: 1.1em;} .product-table table tr > td:first-of-type a {font-weight: bold; font-size: 1.2em; color: #49a847;} .product-table table tr > td:first-of-type span {font-size: 1em; font-weight: normal; display: block;} .product-table table tr td .opt:after {content: ", ";} .product-table table tr td .opt:last-of-type:after {content: "";} .product-table table tbody tr td {border-bottom: 3px solid white; background: #efefef; } .product-table table tbody tr:nth-of-type(odd) td {background: #fafafa;} .product-table table tbody td.file {padding: .6em 1em;} .product-table table tbody td.file a {display: block; width: 100%; height: 55px; background: url('/wp-content/uploads/2018/08/file-grey-green.png') no-repeat center center / contain;} /*.product-table .dp > span {display: table-cell; padding: 4px; text-align: center;} .product-table .dp span span {display: block; font-size: .8em;}*/ .standard-content + .custom-table, .standard-content + .product-table {margin-top: 5vw;} .custom-table {max-width: 100%; margin: 0; padding: 0 7vw 4vw; font-size: 14px; text-align: center;} .custom-table table th {background: #5a5a5a; color: white; vertical-align: middle; border-bottom: 3px solid white; font-size: calc(1em + .2vw); line-height: 1; padding: 1em; margin-top: 10px; text-align: center;} .custom-table table td {text-align: center; vertical-align: middle; padding: 1em; line-height: 1.1em;} .custom-table table tr > td:first-of-type a {font-weight: bold; font-size: 1.2em; color: black;} .custom-table table tbody tr td {border-bottom: 3px solid white; background: #efefef; } .custom-table table tbody tr:nth-of-type(odd) td {background: #fafafa;} .custom-table table tbody td.file {padding: .6em 1em;} .custom-table p {font-size: calc(1em + .2vw); padding: 1em; margin-bottom: 0;} .custom-table .img {padding-bottom: 20px; text-align: center;} .custom-table .img img {display: inline-block;} .single-product #secondary {display: none;} /* Product Archive */ .table {display: block;} .tr {display: block;} .td {display: block;} table th {background-color: #50ac4e; color: white;} table tr td {background: #efefef!important; color: #0e0e0e;} table tr:nth-of-type(odd) td {background: #fafafa!important;} .product-archive {padding: 4vw 8vw;} .product-archive {display: flex; flex-direction: column-reverse;} .storefront-full-width-content .woocommerce-products-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header {padding: 0 0 3em!important; text-align: left;} .woocommerce-products-header h1 {color: #5a5a5a; margin: 0;} .sort-controls {margin-bottom: 2vw;} .product-archive {padding-left: 15px; padding-right: 15px;} .product-archive #main > .facetwp-pager {margin-top: 2vw;} .product-archive .product-listings {padding-left: 4vw;} .product-overview {margin-bottom: 15px; padding: 15px;} .product-overview .image {text-align: center;} .product-overview .image img {display: inline-block; max-width: 200px; width: 100%;} .product-overview h3 {font-size: calc(1em + 1.4vw); font-weight: 900; margin-bottom: 0; line-height: 1;} .product-overview h3 a {font-weight: 900; color: #49aa48;} .product-overview h4 {color: #5a5a5a!important; line-height: 1; margin-bottom: 15px!important;} .product-overview .description > div .table {flex-grow: 2; display: block; position: relative;} .product-overview .description > div .table img {float: right; position: absolute; right: 0; bottom: 0; max-width: 26%; height: auto;} .product-overview .description > div .table {display: block; flex-grow: 1; margin-bottom: 0; font-size: calc(12px + .2vw);} .product-overview .description > div .table .tbody {width: 100%; } .product-overview .description > div .table .tr {width: 100%; background: #efefef; border-bottom: 3px solid white; padding: 16px 0;} .product-overview .description > div .table .tr:nth-of-type(odd) {background: #fafafa;} .product-overview .description > div .table .tr .td {background: none; padding: 0 12px; } .product-overview .description > div .table .tr .td:first-of-type {color: black; text-transform: uppercase; text-align: center; font-weight: bold;} .product-overview .description > div .table .tr .td:last-of-type {width: 100%; text-align: center;} .product-overview .description > div .table .tr .td .dp > span {display: table-cell; padding: 4px; text-align: center;} .product-overview .description > div .table .tr .td .dp span span {display: block; font-size: .8em;} .product-overview .description > div .table .tr .td .opt:after {content: ", ";} .product-overview .description > div .table .tr .td .opt:last-of-type:after {content: "";} .product-overview .description > div .buy {display: flex; flex-direction: column; justify-content: space-between; align-content: center; align-items: center; flex: 1 0 auto; padding-left: 30px;} .product-overview .description > div .buy a {display: block; margin-bottom: 8px;} .product-overview .description > div .buy .price > * {display: block; text-align: center; } .product-overview .description > div .buy .price ins {margin: 0;} .product-overview .description > div .buy .price ins .woocommerce-Price-amount {color: #5a5a5a; font-weight: bold; font-size: calc(1em + .8vw); line-height: 1;} .facetwp-pager .facetwp-pager-label { } .facetwp-pager .facetwp-page {background: #fbfbfb; display: inline-block; min-width: 30px; height: 30px; text-align: center; color: #5a5a5a;} .facetwp-pager .facetwp-page.active {background: #5a5a5a; color: white;} .left-sidebar .widget-area {width: 100%; float: none; margin: 0;} #primary {width: 100%;} #secondary {background: #eeeeee; padding: 28px 24px;} #secondary .smart-search { } #secondary .smart-search h2 {display: flex; justify-content: center; align-items: center; align-content: center; color: #5a5a5a; } #secondary .smart-search h2 i {color: #49aa48; margin-right: 12px;} #secondary .smart-search img {margin: 28px 0 0; padding: 4px;} #secondary .smart-search input {max-width: 100%;} #secondary .smart-search h2:after {content: ""; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 10px solid white; display: inline-block; margin: 0 0 0 10px; transition: .5s;} #secondary .smart-search h2.active:after {transform: rotate(-180deg);} #secondary .smart-search .search-fields { display: none;} #secondary .box {border: 1px solid white; margin-bottom: 8px; padding: 16px;} #secondary .box:last-of-type {margin-bottom: 0;} #secondary .facetwp-facet {margin-bottom: 10px;} #secondary .facetwp-facet + .facetwp-facet {margin-top: 20px;} #secondary .reset {text-align: center; font-size: 1.4em; display: block; background: #5a5a5a; border-radius: 0 0 20px 20px; width: 100%; color: white; margin-bottom: 10px;} .facetwp-facet-differential_pressure_range_h2o, .facetwp-facet-differential_pressure_range_h2o {display: none;} .facetwp-facet-differential_pressure_range_h2o .facet-label, .facetwp-facet-differential_pressure_range_h2o .facet-label, .facetwp-facet-differential_pressure_range_psid .facet-label, .facetwp-facet-differential_pressure_range_psid .facet-label, .facetwp-facet-differential_pressure_unit .facet-label {display: none;} .facetwp-type-dropdown {position: relative;} .per-page span {display: inline-block; color: #5a5a5a; font-weight: bold; margin-right: 10px;} .per-page .select-selected {background: #fbfbfb; border-bottom: none;} .per-page .select-form .select-items {} .per-page .select-form .select-items > div:first-of-type {border-top: 1px solid rgba(0,0,0,.1);} .facetwp-per-page {min-width: 200px; display: inline-block;} .facetwp-slider.noUi-target.noUi-horizontal {border: none; height: 6px; padding: 0; margin: 15px;} .facetwp-slider .noUi-connect {background: #49aa48;} .facetwp-slider.noUi-horizontal .noUi-handle {background: #5a5a5a; border-radius: 50%; box-shadow: none; border: 0; width: 16px; height: 16px;} html:not([dir="rtl"]) .facetwp-slider.noUi-horizontal .noUi-handle {right: -8px;} .facetwp-slider .noUi-handle:before, .facetwp-slider .noUi-handle:after {display: none;} .facetwp-slider-label {display: flex; justify-content: space-between;} .facetwp-slider-label > span {margin: 0 5px;} .facetwp-type-checkboxes .facet-wrap {display: flex; flex-wrap: wrap; position: relative;} .facetwp-type-checkboxes .facetwp-checkbox {text-transform: capitalize; color: #49aa48; font-weight: bold; padding-right: 8px; flex: 1 0 100%; background: none; padding-left: 2em; position: relative;} .facetwp-type-checkboxes .facetwp-checkbox.checked {background: none!important;} .facetwp-type-checkboxes .facetwp-checkbox:before {content: ""; display: inline-block; position: absolute; top: 0; left: 0; background: white; height: 1em; width: 1em; border: 4px solid white; } .facetwp-type-checkboxes .facetwp-checkbox.checked:before { background-color: #49aa48; } /*.facetwp-type-checkboxes .facetwp-checkbox .facetwp-counter {display: none;}*/ .facetwp-type-checkboxes .facetwp-toggle:not(.facetwp-hidden) {display: block; width: 100%; clear:} .facetwp-type-radio.facetwp-facet-model_types .facet-wrap, .dp-radio .dp-wrap {display: flex; flex-wrap: wrap;} .facetwp-type-radio .facet-wrap .facetwp-radio, .dp-radio .dp-btn {text-transform: capitalize; color: #49aa48; font-weight: bold; padding-right: 8px; flex: 1 0 100%; background: none; position: relative; padding-left: 2em; margin-top: 12px;} .facetwp-type-radio .facet-wrap .facetwp-radio:before, .dp-radio .dp-btn label:before {content: ""; display: inline-block; position: absolute; top: 0; left: 0; background: white; height: 1em; width: 1em; border: 4px solid white; border-radius: 50%;} .facetwp-type-radio .facet-wrap .facetwp-radio.checked:before, .dp-radio .dp-btn.checked label:before { background-color: #49aa48; } .facetwp-type-radio .facet-wrap .facetwp-radio .facetwp-counter {display: none;} .dp-radio p {margin-bottom: 0; font-size: .8em; text-transform: uppercase; font-weight: bold;} .dp-radio input {display: inline-block; opacity: 0; height: 0; width: 0; position: absolute; overflow: hidden;} .dp-radio label {font-weight: bold; cursor: pointer;} input.facetwp-number[type="text"] {background: white;} .facetwp-facet .facetwp-submit {color: white; font-weight: bold; Background: #5a5a5a; border-radius: 0 12px 12px 0;} .facetwp-facet .facetwp-submit:hover {background: #49aa48; color: white;} span.facet-label {display: block; font-weight: 900; font-size: 18px; transform: translate3d(0,0,0); margin-bottom: 8px;} .facetwp-type-dropdown {display: block; margin: 0 0 16px;} .facetwp-type-dropdown select {width: 100%; font-family: "proxima-nova", sans-serif;} input[type="button"].facetwp-slider-reset {background: none; color: #5a5a5a; padding: 0; box-shadow: none;} input[type="button"].facetwp-slider-reset:hover {text-decoration: underline;} .archive .product-overview {border: 1px solid #f4f4f4;} .archive .product-overview .image {text-align: center;} .archive .product-overview .image img {display: inline-block;} .archive .product-overview .description h3 {font-size: calc(16px + .4vw); font-family: "proxima-nova-extra-condensed", sans-serif; text-transform: uppercase; font-weight: 900;} .archive .product-overview .description h3 a {font-weight: 900;} .archive .product-overview .description > div .buy {padding-left: 30px;} .product-overview .description > div .buy .price {margin-bottom: 1em;} .select-form {position: relative; font-size: 16px;} .select-form select {display: none; } .select-selected {background-color: white; position: relative; min-height: 1em; line-height: 1;} .select-selected.default {color: transparent;} .select-selected:after { position: absolute; content: ""; top:9px; right: 10px; width: 0; height: 0; border: 8px solid transparent; border-color: #49aa48 transparent transparent transparent; transition: all .5s; transform-origin: 8px 4px;} .select-selected.select-arrow-active:after {transform: rotate(180deg);} .select-items div,.select-selected {color: black; padding: 4px 8px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer;} .select-items {position: absolute; background-color: white; top: 100%; left: 0; right: 0; z-index: 99; transition: .5s;} .select-items div:first-of-type {/*color: transparent;*/} .select-hide { height: 0; overflow: hidden;} .select-items div:hover, .same-as-selected {background-color: rgba(0, 0, 0, 0.1);} .gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li, .gform_wrapper li.gfield.gf_list_3col ul.gfield_radio li {font-size: 100%!important;} #wpsl-wrap .wpsl-dropdown span { position: static; padding-right: 35px !important; list-style: none; padding: 9px 12px !important; padding-right: 12px; margin: 0 !important; position: relative; display: block; line-height: normal; color: #000; overflow: hidden; } .wpsl-dropdown span::after { position: absolute; content: ""; right: 12px; top: 50%; margin-top: -4px; border: 6px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 6px; border-top: 8px solid #000; } #locations {/*position: absolute;*/ top: 10px; right: 10px; font-size: 102%;} #locations label {display: inline-block; padding-right: 10px;} #locations select { display: inline-block;} #locations > div {margin: 0 20px 20px 0;display: inline-block;} /* Interior Page */ .standard-page {margin-top: 5vw; margin-bottom: 5vw;} .standard-page .content {margin-bottom: 5vw;} .standard-page .text h4 {color: black; margin-bottom: 0; font-size: 1.65em; font-weight: bold;} .standard-page .text ul {padding-left: 1em;} .standard-page .standard-content {margin-bottom: 2vw;} .standard-page .standard-content .row {display: flex; flex-direction: column-reverse;} .standard-page .standard-content .text {flex: 1; } .standard-page .standard-content .img {text-align: center; padding-bottom: 4vw;} .standard-page .standard-content .img img {display: inline-block;} .page-gallery {padding-bottom: 4vw;} .standard-page .standard-content .text > p:last-of-type:not(:first-of-type) {margin-bottom: 0;} .standard-page .text h2, .standard-page .text h3, .standard-page .text h4 {color: #5a5a5a;} .standard-content + .standard-content {border-top: 1px solid rgba(0,0,0,.05); padding-top: 20px; padding-bottom: 20px;} .standard-page .image-bg {background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVQImWNgQAX/yeAAAIHCA/0RE2WAAAAAAElFTkSuQmCC') repeat 0 0, url('/wp-content/uploads/2018/08/background-long.jpg') no-repeat center center / cover; position: relative; color: white; padding:30px; margin-bottom: 4vw;} .standard-page .image-bg h2 {} .page-id-86 .standard-content .row.reverse {align-content: center; align-items: center;} .page-gallery {height: 400px;} .swiper-container { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; } .gallery-top { height: 75%; width: 100%; } .gallery-thumbs { height: 25%; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { height: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; } .distributor {margin-bottom: 20px; width: 50%;} .distributor h4 {margin-bottom: 0;} .distributor p {margin-bottom: 0;} .distributors {margin-bottom: 40px;} .distributors .facetwp-facet {margin-bottom: 16px;} .distributors .select-items {max-height: 300px; overflow: scroll; background: #fafafa;} .distributors .select-selected {background: #fafafa;} .distributors .btn {margin-top: 0px;} /* Blog Archive */ .blog-page .standard-content article .row {flex-direction: column;} .blog-page .standard-content article .row .post-image img {max-height: 400px; width: auto;} .blog-page article {border-bottom: 1px solid #e3e3e3; margin: 0; padding: 1.618em 1em; margin-bottom: 1em; border: 1px solid #f4f4f4;} .blog-page article header.entry-header {border-bottom: 0; margin-bottom: 1.617924em;} .blog-post article header.entry-header {padding-bottom: 1.617924em;} .blog-page article header.entry-header h2.entry-title, .blog-post article header.entry-header h2.entry-title {margin-bottom: 0;} .blog-page article header.entry-header h2.entry-title a, .blog-post article header.entry-header h2.entry-title a {font-weight: 900;} .blog-page article header.entry-header .posted-on, .blog-post article header.entry-header .posted-on {font-weight: bold;} .hentry .entry-content a.btn {text-decoration: none} .blog-post .navigation {text-align: center; margin-top: 1.618em;} .blog-post .navigation span + span:before {content: ""; border-left: 1px solid #e3e3e3; margin-right: 1em; margin-left: 1em;} /* Chemicals */ .facetwp-facet-chemical {display: inline-block;} .chemicals-sort {margin-bottom: 1em;} .chemicals-sort .material-select {} .chemicals-sort > div {margin-bottom: 0; margin-right: .5em; display: inline-block;} .chemicals-sort .rating {display: block;} .chemicals-sort .facetwp-type-checkboxes {margin-top: 12px;} .chemicals-sort .facetwp-type-checkboxes .facetwp-checkbox::before {border: 4px solid #ddd;} .chemicals-sort .facetwp-type-checkboxes .facetwp-checkbox {display: inline-block; padding-right: 2em;} .chemicals-sort .facetwp-type-checkboxes .facet-label {display: none;} .chemicals-sort .chemical-ratings {display: block;} .chemicals-sort .chemical-ratings fieldset {padding: 0; background-color: transparent; margin-top: 12px;} .chemicals-sort .chemical-ratings fieldset .rating-checkbox.hide {display: none;} .chemicals-sort .chemical-ratings fieldset .rating-checkbox.show {display: inline-block;} .chemicals-sort .chemical-ratings fieldset .rating-checkbox {text-transform: capitalize; color: #49aa48; font-weight: bold; flex: 1 0 100%; background: none; position: relative; display: inline-block;} .chemicals-sort .chemical-ratings fieldset .rating-checkbox label {font-weight: bold; padding-right: 2em; padding-left: 2em; } .chemicals-sort .chemical-ratings fieldset .rating-checkbox label:before {content: ""; display: inline-block; position: absolute; top: 0; left: 0; background: white; height: 1em; width: 1em; border: 4px solid #ddd;} .chemicals-sort .chemical-ratings fieldset .rating-checkbox.checked label:before {background-color: #49aa48;} .chemicals-sort .chemical-ratings fieldset .rating-checkbox input {appearance: none; -webkit-appearance: none;} .chemicals-sort button {padding: .5em; display: block;} #fwp-refresh.disabled, .chemical-ratings .disabled, .chemical-ratings .disabled-empty {pointer-events: none; opacity: .5;} .table.table-chemicals {margin-bottom: 1em; min-width: 50%;} .table.table-chemicals .tr .td {border-bottom: 3px solid white; background: #efefef; padding: .5em;} .table.table-chemicals .tr .td:first-of-type {font-weight: bold;} .chemicals .facetwp-pager {margin-bottom: 1em;} #by-material {display: none;} .chemical-or-material {margin-bottom: 30px; border-bottom: 1px solid #eeeeee;} .chemical-or-material .button.active {background: #d5d5d5;} .chemical-warnings {font-size: 14px;} /* Mobile Only */ @media (max-width: 400px) { header > .top > .more .phone-search {margin: 0; text-align: center;} header > .top > .more .badge {display: none;} header > .top > .more .phone-search form {margin-bottom: 10px;} } @media (max-width: 680px){ footer .top > h1 {text-align: center; margin-bottom: 12px;} footer .top > h1 a {display: inline-block; margin-bottom: 0px;} footer .footer .top .right {margin-bottom: 12px;} footer .footer .top .right h1 {margin-bottom: 12px;} #catalog img {display: none;} } @media (max-width: 566px){ } @media (max-width: 767px) { .sort-controls .facetwp-pager .facetwp-pager-label {display: block;} #secondary {margin-bottom: 3em;} #secondary .smart-search h2 {margin-bottom: 0;} #secondary .smart-search img {display: none;} #secondary .smart-search .search-fields {margin-top: 2em;} .hidden-sm {display: none;} #locations > div {width: 100%;} #locations select {width: 100%; display: block; } } @media (max-width: 920px) { .applications img {display: none;} footer .footer .top .right h1 {font-size: 1.8em;} footer .bottom {margin-top: 20px} footer .bottom ul {display: none; height: 0;} header > nav {display: none;} header > .top > .more .phone-search input {padding: 8px;} header > .top > .constant {padding: 15px; display: flex; justify-content: space-between; align-content: center; align-items: center; z-index: 35;} header > .top > h1 .custom-logo-link {margin: 0; display: block; text-align: center;} header > .top > h1 .custom-logo-link img {display: inline-block;} header > nav > ul > li, header > nav > ul > li:nth-child(1) {background: #2c2c2c; border-bottom: 1px solid #b5b5b5;} header > nav > ul > li:hover {background: #404040;} header > nav > ul > li > a {} header > nav > ul > li > ul {text-align: center;} header > nav > ul > li > ul > li > ul {margin: 0;} header > nav > ul > li > ul > li > ul > li {display: block; border-bottom: 0; padding: 0;} header > nav > ul > li > ul > li > ul > li > ul {display: none;} header > .top .ad img { max-width: 200px;} .fpfeatured > div { margin-bottom: 3vw; } .fp-featuredpages .featured-page {margin-bottom: 10px;} .alignright, .alignleft {float: none; display: inline-block; margin: 0;} .product-overview .information {text-align: center; margin-bottom: 20px;} .storefront-full-width-content.single-product div.product .woocommerce-product-gallery {width: 100%; float: none;} } @media (min-width: 480px) { .fpfeatured .category-panel .types img {max-height: 90px; max-height: 150px; display: inline-block; margin-right: 12px; transition: all 1s;} .fpfeatured .category-panel .types ul {margin: 0 6px; float: right; max-width: 75%; width: 75%; border-left: 1px solid white;} .fpfeatured .cats > .row {flex-grow: 1; display: flex;} .fpfeatured .cats > .row > div {padding-right: 3px;} .fpfeatured .category-panel .types ul {column-count: 3; column-rule: 1px solid white; } .fpfeatured .cats > .row > div {display: flex; flex-direction: column; flex: 1 0 25%; max-width: 25%; margin-top: 3px;} .fpfeatured .cats > .row > div:nth-of-type(2) {flex: 2 0 50%; max-width: 50%;} .fpfeatured .cats > .row > div:last-of-type {padding-right: 0;} .fpfeatured .cats > .row > div > div {flex: 1 0 auto;} .fpfeatured .cats > .row > div:nth-of-type(2) .row > div {max-width: 50%; max-width: calc(50% - 1.5px);} } @media (min-width: 600px) { } @media (min-width: 681px){ footer .footer .top {display: flex; justify-content: space-between;} footer .footer .top .right {display: flex; align-content: center; align-items: center; line-height: 1;} .documents .documentation ul {list-style: none; display: flex; flex-wrap: wrap; margin: 0; } .documents ul {margin-bottom: 0;} .product-specs .special-features ul {column-count: 2;} .product-archive {padding-right: 7vw; padding-left: 7vw;} } @media (min-width: 768px) { .sticky {position: fixed; width: 100%; z-index: 99; top: 0;} .sort-controls {display: flex; justify-content: space-between; } .product-archive {display: flex; flex-direction: row-reverse; align-content: flex-start; align-items: flex-start;} .product-archive #secondary {width: 33%; margin-right: 0;} .product-archive #primary {width: 64%; margin-left: 3%;} .table {display: table;} .tr {display: table-row;} .td {display: table-cell;} .product-overview .description > div .table {display: block; flex-grow: 1; margin-bottom: 0; font-size: calc(12px + .2vw);} .product-overview .description > div .table .tbody {width: 100%; display: block;} .product-overview .description > div .table .tr {width: 100%; display: table-row; background: #efefef; border-bottom: none;} .product-overview .description > div .table .tr:nth-of-type(odd) {background: #fafafa;} .product-overview .description > div .table .tr .td {background: none; padding: 6px 16px; border-bottom: 3px solid white;} .product-overview .description > div .table .tr .td:first-of-type {border-right: 3px solid white; color: black; text-transform: uppercase; text-align: right; font-weight: bold;} .product-overview .description > div .table .tr .td:last-of-type {width: 100%; text-align: left;} #secondary .smart-search h2 {justify-content: flex-start;} #secondary .smart-search h2:after {display: none;} #secondary .smart-search .search-fields {display: block!important;} .standard-page .standard-content .row {flex-direction: row;} .standard-page .standard-content .row.reverse {flex-direction: row-reverse;} .standard-page .standard-content .text {flex: 1;} .standard-page .standard-content .row.reverse .img {padding-right: 0; padding-right: 4vw;} .standard-page .standard-content .img {padding-bottom: 0; flex-basis: 50%; max-width: 50%; padding-left: 4vw;} .standard-page .standard-content .img.half {flex-basis: 50%; max-width: 50%;} .standard-page .standard-content .img.third {flex-basis: 33%; max-width: 33%;} .standard-page .standard-content .img.fourth {flex-basis: 25%; max-width: 25%;} .page-gallery {padding-bottom: 0; flex-basis: 50%; max-width: 50%; padding-left: 4vw;} .page-gallery.half {flex-basis: 50%; max-width: 50%;} .page-gallery.third {flex-basis: 33%; max-width: 33%;} .page-gallery.fourth {flex-basis: 25%; max-width: 25%;} .blog-page .post-grid {display: flex; flex-wrap: wrap; justify-content: space-between;} .blog-page .post-grid article {flex: 0 0 32%; margin-bottom: 2%;} .blog-page .standard-content article .img {padding-bottom: 0; flex-basis: 50%; max-width: 50%; padding-left: 0; margin-bottom: 1.618em; height: 300px; max-width: 100%; display: flex; justify-content: center; align-content: center; align-items: center;} .blog-page .standard-content article .img img {max-height: 100%; width: auto; margin-bottom: 0;} .blog-post img.wp-post-image {max-width: 50%; float: right; margin-left: 1.618em; margin-bottom: 1.618em;} .right-sidebar .blog-post .content-area#primary {width: 73.9130434783%; float: left; margin-right: 4.347826087%;} .standard-content .row .chemicals {width: 75%; padding-right: 4vw;} .standard-content .row .ratings {width: 25%;} .applications-grid .standard-content:nth-of-type(even) .row {flex-direction: row-reverse;} .applications-grid .standard-content:nth-of-type(even) .row .img {padding-left: 0; padding-right: 4vw;} .visible-sm {display: none;} #locations {} #locations > div {display: block; float: none;} #locations label {width: 20%; text-align: left; margin-right: 0!important;} #locations select {width: 80%;} } /* Medium devices */ @media (min-width: 921px) { h1 { font-size: calc(1em + 2vw); } h2 { font-size: calc(1em + .9vw); } h3 { font-size: calc(1em + .4vw); } .large-text { font-size:2.1vw; font-weight:800; } .flex-row {display: flex; justify-content: space-between; align-items: center; align-content: center;} .flex-row > * {flex: 1;} header > .top { display:flex; justify-content:space-between; align-items:center; } header > .top .constant {margin: 0 0 0 20px;} header > .top > .more { display:flex; align-items:center; flex-direction:row; position:relative; padding:10px 20px 10px 200px; color:white; text-align:right;} header > .top > .more:before {content: ""; height: 100%; left: -100px; bottom: 0; width: 200px; background: white; transform: skewX(-32deg); position: absolute;} header > .top > .more a.phone-top { font-size:2em; font-weight:800; } header > .top > .more .phone-search form {display: flex; } a.target-burger {display: none;} header > nav {display: block!important;} header > nav > ul { display:flex; } header > nav > ul > li {position: relative; white-space: nowrap;} header > nav > ul > li > ul {position: absolute; top: 100%; left: 0; z-index: 99; background: #eaeaea; list-style: none; text-align: left; margin: 0; transition: height 1s;} header > nav > ul > li:hover > ul {display: block; height: auto;} header > nav > ul > li:last-of-type > ul {right: 0; left: auto;} header > nav > ul > li > ul.opennav {display: none;} header > nav > ul > li:hover > ul.opennav {display: block;} footer .footer {padding: 2vw;} footer .footer ul.social li {height: 3vw; width: 3vw;} footer .footer ul.social li a {font-size: 1.6vw;} footer .footer .bottom { column-count: 3; -moz-column-count: 3; column-rule: 1px solid #666; -webkit-column-rule: 1px solid #666; margin-top: 2vw;} footer .footer .bottom > ul {list-style: none; margin: 0;} footer .footer .bottom > ul > li {overflow: hidden; display: inline-block; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; margin:10px; width: 100%;} footer .footer .bottom > ul > li:nth-of-type(odd){-webkit-column-break-after: column; -moz-column-break-after: column; column-break-after: always; break-after: column;} footer .footer .bottom > ul > li > a {text-transform: uppercase;color: black; font-weight: bold;} footer .footer .bottom > ul > li > ul {font-size: .8em;} footer .footer .bottom > ul > li > ul > li > ul {padding: .5em 0; list-style: square; color: #5a5a5a; line-height: 1.1;} footer .footer .bottom > ul > li > ul > li > ul > li > ul { padding: .5em 0; } footer .footer .bottom > ul > li > ul > li > ul > li > ul > li {display: flex; display: flex; flex-basis: flex-start; align-content: center; align-items: center; } footer .footer .bottom > ul > li > ul > li > ul > li > ul > li:before {content: "►"; padding-right: 6px; color: #5a5a5a; margin-top: 1px; font-size: .8em; line-height: 1;} footer .footer .bottom > ul > li > ul > li > ul > li a {color: #7c7c7c;} .main { margin-right: 7vw; margin-left: 7vw; } .row { display:flex; flex-direction:row; } .row > div { } .row > div.img {padding-left: 4vw;} .row > div.half {flex: 1 0 50%; max-width: 50%;} .row > div.third {flex: 1 0 33%; max-width: 33%;} .row > div.fourth {flex: 1 0 25%; max-width: 25%;} .standard-content + .standard-content {padding-top: 2vw; padding-bottom: 2vw;} .twocol { display:flex; flex-direction:row; } .twocol > div { flex:1 1 50%; max-width:50%;} .twocol > div:first-of-type {padding-right: 2vw;} .twocol > div:last-of-type {padding-left: 2vw;} .standard-page .twocol.standard-content img {max-width: 100%; margin-bottom: 3vw; margin-top: 1.5vw;} .fpfeatured { justify-content: space-between; flex-wrap: wrap;} .fpfeatured > div { display:flex; flex:1 0 50%; max-width:49%; flex-direction:column; align-content:center; } .fpfeatured .productfinder, .fpfeatured .backflow-test { justify-content:center; } .fpfeatured .cats {flex: 2 0 100%; max-width: 100%; margin-bottom: 2%;} .fpfeatured .plus {height: 2vw; width: 2vw;} .fpfeatured .category-panel .plus {height: 2vw; width: 2vw;} .fpfeatured .cats > .row > div {display: flex; flex-direction: column; flex: 1 0 25%; max-width: 25%; margin-top: 3px;} .fpfeatured .cats > .row > div:nth-of-type(2) {flex: 2 0 50%; max-width: 50%;} .fpfeatured .cats > .row > div:last-of-type {padding-right: 0;} .fpfeatured .cats > .row > div > div {flex: 1 0 auto;} .fpfeatured .cats > .row > div:nth-of-type(2) .row > div {max-width: 50%; max-width: calc(50% - 1.5px);} .view-products {font-size: 2vw;} .fp-featuredpages { display: flex; flex-wrap: wrap; flex-direction: row; } .fp-featuredpages > div { display: flex; margin: 0px 10px 20px 0; width: 48.5%; flex: 1 0 calc(50% - 10px); justify-content: center; flex-direction: column; } .fp-featuredpages > div:nth-child(even) { margin:0 0 20px 10px; } .fp-featuredpages > div h3 { font-size:1.6vw;} .fpfeatured .backflow-test .twocol {display: block;} .fpfeatured .backflow-test .twocol > div { max-width:100%; } .fpfeatured .backflow-test .twocol img {max-width: 60%;} .fp-video .video-text {padding: 0 0 0 3vw;} .fp-video .video {padding-right: 10px;} .product-specs {padding-top: 2vw; padding-bottom: 2vw;} .product-specs .electrical-specs {padding: 2vw; margin-bottom: 1.6vw; margin-top: 0; } .product-specs .electrical-specs h3 {padding-left: 0; padding-right: 0; border-bottom: none;} .product-specs > .row > div {flex: 1 0 50%; max-width: 50%;} .product-specs > .row > div:first-of-type {padding-right: 1vw;} .product-specs > .row > div:last-of-type {padding-left: 1vw;} .product-specs .special-features h3 {color: #5a5a5a; font-size: 1.4vw;} .product-specs .special-features ul {column-count: 1; font-size: .9em;} .product-specs .electrical-specs > ul.gray {margin-left: 3em; margin-bottom: 2em;} .product-specs .electrical-specs > ul.gray > li {margin-bottom: 2em;} .documents:before { position:absolute; content:""; display:block; left:-1020px; top: 0; height:100%; width:1000px; background-color:#49aa48; z-index:-1; } .documents:after { position:absolute; content:""; display:block; right:-1020px; top: 0; height:100%; width:1000px; background-color:#5a5a5a; z-index:-1; } .documents > div {flex: 1 0 50%; max-width: 50%; padding: 2vw;} .documents .advantage {border-right: 10px solid white; border-bottom: none;} .documents .documentation {border-left: 10px solid white; } .documents h3 {font-size: 1.5vw; margin-bottom: 0;} .documents .documentation ul li:before {content: ""; display: block; height: 50px; width: 50px; margin-right: 5px;} .product-overview { padding: 15px 2vw;} .product-overview .description {display: flex; align-content: flex-start; align-items: flex-start;} .product-overview .description .image {padding-right: 20px;} .product-overview .information {display: flex; justify-content: space-between; align-content: center; align-items: center; margin-bottom: 10px;} .product-overview .image {flex-basis: 30%; max-width: 30%; padding-right: 30px; text-align: center;} .product-overview .text {flex-basis: 70%; max-width: 70%;} .product-description {padding-top: 5vw; padding-bottom: 2vw; border-bottom: 1px solid #ebebeb;} .product-description .main .text {display: inline-block; max-width: 60%; margin-bottom: 0px; flex: 1 0 60%; align-self: flex-start;} .product-description .flex-row > .images {padding-left: 1em; flex: 1 0 40%; max-width: 40%;} .product-description .images {float: right; margin-left: -6vw;} /*.product-description .images > div img {max-height: 12vw; width: auto;} .product-description .images > div:nth-of-type(3) {transform: translateX(5vw); z-index: 98;} .product-description .images > div:nth-of-type(3) img {max-width: 10vw; } .product-description .images > div:nth-of-type(2) {transform: translateX(9vw); z-index: 99;} .product-description .images > div:nth-of-type(2) img {max-width: 8vw; } .product-description .images > div:first-of-type {transform: translateX(12vw); z-index: 100;} .product-description .images > div:first-of-type img {max-width: 6vw; }*/ .product-description .woocommerce-Price-amount { font-family: 'Fira Sans', sans-serif; font-weight: 800; margin-top: 0; color: #5a5a5a; font-size: calc(20px + 1vw); line-height: 1; } .product-description .quantity { display:inline-block; } .product-description .main .input-text { max-width:100%; } .standard-page .content { /*display: flex; justify-content: space-between; align-content: flex-start; align-items: flex-start; margin-bottom: 5vw;*/} .standard-page .content > .text {flex: 1 0 65%; padding-right: 20px;} .standard-page .content > img {flex: 1 0 35%; max-width: 35%; align-self: center;} .standard-page .standard-content .text > p .btn {margin-right: 8px;} .standard-page .standard-content > img {max-width: 33%;} .standard-page .image-bg {padding: 4vw 4vw;} .standard-page .image-bg:before { position:absolute; content:""; display:block; left:-1020px; top: 0; height:100%; width:1000px; background-color:#49aa48; z-index:-1; } .standard-page .image-bg:after { position:absolute; content:""; display:block; right:-1020px; top: 0; height:100%; width:1000px; background-color:#5a5a5a; z-index:-1; } .models {text-align: center; margin-bottom: 4vw; margin-top: 0;} .models .grid > div {padding: 0 15px;} .contact-banner {text-align: center; padding: 1.6vw; background: #fafafa; margin: 1.6vw 0;} .contact-banner + .product-table .before {padding-top: 2.4vw;} .fpfeatured .backflow-test p { font-size:.9vw; } .page-id-28 .text p {font-size: 1.2em;} .map-float > div {width: 30%; padding-right: 2vw; float: left;} .map-float iframe {width:70%;} .map-float h4 {margin-top: 1em;} .applications-grid h3 {font-size: calc(1em + .9vw);} .visible-md {display: none;} #secondary .facetwp-facet-differential_pressure_range_psid input, #secondary .facetwp-facet-differential_pressure_range_h2o input {max-width: 40%;} .product-template .main .text {width: 60%; max-width: 60%;} .product-template .main .page-gallery {width: 40%; max-width: 40%;} .page-gallery {align-self: flex-start;} .custom-table {display: flex; justify-content: space-between;} .custom-table .img {float:left; width: 40%; max-width: 40%; padding-right: 4vw; padding-bottom: 0; padding-top: 10%;} .custom-table .img + .table {width: 60%; max-width: 60%;} .distributors > div {width: 30%; float: left; padding-right: 10px;} .distributors .select-items {max-height: 300px; overflow: scroll; background: #fafafa;} .distributors .select-selected {background: #fafafa;} .distributors .btn {margin-top: 20px;} .distributors-loop .facetwp-template {display: flex; flex-wrap: wrap; width: 100%;} .distributors-loop .distributors {width: 50%; padding-right: 10px;} .distributors-loop .facetwp-template { display: none; } .facetwp-template.visible { display: block; } } @media (min-width: 1000px) { header > nav > ul > li > ul > li > ul {display: block; white-space: nowrap;} .product-archive #secondary {width: 33%; margin-right: 0;} .product-archive #primary {width: 64%; margin-left: 3%;} .product-overview .description > div .table img {display: none;} } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media (min-width: 1200px) { .fpfeatured .category-panel .types ul {column-count: 1; } .fpfeatured .backflow-test .twocol {display: flex;} .fpfeatured .backflow-test .twocol > div { max-width:50%; } .fpfeatured .backflow-test a { font-size:1vw; color:white; bottom: 0; right: 0; position: absolute;} .fpfeatured .backflow-test .twocol img {max-width: 100%;} .fpfeatured .cats > .row {flex-grow: 1; } .fp-featuredpages > div { width: 49%; } .product-specs .special-features ul {column-count: 2;} .fpfeatured { justify-content: space-between; } .fpfeatured > div { display:flex; flex:1 0 32%; max-width:32%; flex-direction:column; align-content:center; } .fpfeatured .productfinder, .fpfeatured .backflow-test { justify-content:center; } .fpfeatured .cats {flex: 1 0 32%; max-width: 32%; margin-bottom: 0;} .fpfeatured .cats header { font-size:1.1vw; } .fpfeatured .cats .category-figure span:first-of-type {font-size: 1vw;} .fpfeatured .plus {height: 2vw; width: 2vw;} .fpfeatured .category-panel .plus {height: 2vw; width: 2vw;} .facetwp-type-radio .facet-wrap .facetwp-radio, .dp-radio .dp-btn {flex: 1 0 50%;} .product-overview .description > div table tr td:first-of-type {white-space: nowrap;} .page-gallery {height: 570px;} } @media (min-width: 1320px){ #locations label {text-align: right;} } @media (min-width: 1405px) { .fpfeatured .category-panel .types ul {column-count: 3; column-rule: 1px solid white; } .fpfeatured .backflow-test p { font-size:.8; } .fpfeatured .backflow-test a { font-size:.8; color:white; bottom: 0; right: 0; position: absolute;} #locations {position: absolute; top: 10px; right: 10px;} } @media (min-width: 1485px) { footer .footer .bottom { column-count: 4; -moz-column-count: 4; column-rule: 1px solid #6666; margin-top: 2vw;} .fpfeatured .category-panel .types ul {column-count: 3; column-rule: 1px solid white; } } @media print { h1, h2, h3, h4 {color: black;} a {color: #5a5a5a!important;} ul li:before {color: #5a5a5a!important;} ul li {font-size: 12px!important;} ul.gray-stripe li {padding: 4px 16px 4px 52px!important;} img.alignright {max-width: 30%; float: right; margin-left: 20px; margin-bottom: 20px;} table {page-break-inside: avoid; border-bottom: 1px solid #c9c9c9;} table td, table th {border: 1px solid #c9c9c9; font-size: 12px;} .product-table, .product-table table th, .product-table table td, .product-table table tr > td:first-of-type a {font-size: 12px;} .product-table {padding-right: 0; padding-left: 0;} .product-table table tr td:nth-of-type(n+6), .product-table table tr th:nth-of-type(n+6) {display: none;} body {font-size: 12px;} header {display: none;} footer {display: none;} .btn {display: none;} .clearfix:before, .clearfix:after {display: none;} .standard-page .image-bg {border-top: 1px solid #c9c9c9; padding-top: 20px; padding-right: 0; padding-left: 0;} .image-bg hr {border-top: 1px solid #c9c9c9; background-color: #c9c9c9;} .embed-container {display: none} #catalog {display: none;} .woocommerce-product-gallery {display: none!important;} .documents .advantage .top {display: none;} .documents .documentation {display: none;} .documents > div .lower {padding: 0;} }