/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html {
color: #222;
font-size: 1em;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
padding:0;
margin:0;
}
.contentwrap {
position:relative;
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}
.contentwrap::after {
content:"";
display: table;
width: 100%;
height: 0;
clear: both;
}
header .contentwrap,
footer .contentwrap {
padding: 20px;
}
.js .no-js {
display: none;
}
.no-js {
color: red;
}
/** nav **/
nav ul {
display: block;
padding: 0;
margin:0;
}
nav li {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
nav li.depth-0 {
vertical-align: middle;
}
nav a {
display: block;
text-decoration: none;
padding: 10px 20px;
}
header nav .subtitle,
footer nav .subtitle {
display: none;
}
footer nav a[href="/#"] {
cursor: default;
}
/** layout **/
.table {
display: table;
width: 100%;
}
.col {
display: table-cell;
vertical-align: middle;
}
/** social **/
.site-links {
text-align: right;
}
.site-link {
display: inline-block;
width: 25px;
height: 25px;
margin: 5px 10px;
}
a.site-link:last-of-type {
margin-right: 0px;
}
/** forms **/
form {
width: 600px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
form p,
.form p{
position: relative;
margin: 5px 0;
}
input,
textarea,
select {
display: block;
width: 100%;
height: 40px;
line-height: 30px;
font-family: "proxima-nova", sans-serif;
font-size: 16px;
text-align: left;
padding-left: 20px;
padding-top: 10px;
color: #000;
background-color: transparent;
box-sizing: border-box;
border: 0;
}
input#search-location {
padding-top: 0;
}
select {
padding-top: 0;
padding-left: 15px;
line-height: 40px;
}
input[type="checkbox"]{
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
margin-left: 0;
}
textarea {
min-height: 80px;
}
label.error,
.grey label.error {
font-size: 12px;
color: red;
}
label.float {
position: absolute;
left:0;
color: #606060;
padding-left: 20px;
line-height: 40px;
max-width: 100%;
box-sizing: border-box;
transition: all 1s ease;
}
.slide-menu label.float {
line-height: 50px;
}
.js-float-wrap.focused label,
.js-float-wrap.populated label,
.pump-finder .js-float-wrap.focused label.float,
.pump-finder .js-float-wrap.populated label.float {
color: #0FA6E0;
left: 5px;
padding-left: 0;
margin-left: 0;
transform: translateX(0);
line-height: 1.4;
font-size: 0.75em;
}
.inline {
display: inline-block;
vertical-align: middle;
width: 50%;
box-sizing: border-box;
}
span.inline {
text-align: right;
}
button {
display: inline-block;
text-decoration: none;
padding: 20px 40px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 18px;
text-transform: uppercase;
color: #FFF;
background-color: #10a6e1;
border: 2px solid #1993E0;
max-width: 100%
box-sizing: border-box;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
button.yellow {
color: #262526;
font-size: 16px;
padding: 15px 40px;
padding-right: 30px;
border: 0;
background-color: #FED500;
border-radius: 40px;
}
button.yellow::after {
content:"";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/right-arrow-w.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin-left: 10px;
}
/** share **/
.share {
position: relative;
display: inline-block;
background-color: #0FA6E0;
padding: 5px 10px;
font-size: 17px;
font-weight: normal;
padding-right: 40px;
color: #FFF;
text-decoration: none;
cursor: default;
z-index: 5;
}
h1 .share {
font-family: "proxima-nova", sans-serif;
font-size: 17px;
font-weight: normal;
}
.share:before {
content:"";
position: absolute;
top: 5px;
right: 10px;
width: 20px;
height: 20px;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/share-icon.svg');
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
}
.share .links {
display: none;
position: absolute;
top:100%;
left: 0;
right:0;
width: 100%;
background-color: #FFF;
font-size: 16px;
text-align:center;
padding: 5px 0;
box-sizing: border-box;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
}
.share .links:before {
content:"";
position: absolute;
top: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 10px 5px;
border-color: transparent transparent #FFF transparent;
}
.share:hover .links {
display: block;
}
.share img {
width: 20px;
height: 20px;
margin:2px;
}
h1.wrap:after {
content:"";
display: table;
width: 100%;
height: 1px;
clear: both;
}
h1.wrap .share {
float: right;
}
div.right {
text-align: right;
}
/** kms gallery **/
.kmsgallery.display-default {
text-align: center;
}
.kmsgallery.display-default .kmsgallery-thumbnail-image {
width: 31%;
height: 0;
padding-top: 31%;
margin: 0.5%;
}
/*============ header ============*/
header.top {
position: relative;
width: 100%;
padding: 0px 40px;
color: #262526;
background-color: #FFF;
box-sizing: border-box;
transition: background-color 0.3s ease-in-out;
z-index: 100;
}
header .contentwrap {
max-width: 100%;
padding: 20px 280px;
padding-left: 210px;
min-height: 100px;
box-sizing: border-box;
}
header .logo {
position: absolute;
top: 20px;
left:0;
width: 200px;
height: auto;
}
svg {
width: 100%;
height: 50px;
}
.logo .st0 {
fill: #147EC2;
transition: fill 0.3s ease-in-out;
}
.logo h1 {
margin: 0;
}
/** nav **/
.header-menu > ul {
position: relative;
}
.header-menu li > ul,
header .menu-icon {
display: none;
}
nav.header-menu li.depth-0 {
vertical-align: text-top;
}
.header-menu li.depth-0 > a .title {
font-weight: 500;
}
li.depth-0.dealers > a span {
color: #FECB00;
}
.header-menu li.depth-0 > a {
padding: 12px 15px;
}
/** expanders **/
.header-menu li.depth-0.has-sub {
font-size: 0; /* remove inline-block gap */
}
.header-menu li.depth-0.has-sub > a {
display: inline-block;
font-size: 16px;
padding-right: 5px;
}
.header-menu .expand {
position: static;
display: inline-block;
line-height: 0;
vertical-align: middle;
height: 40px;
width: 30px;
cursor: pointer;
}
.header-menu .expand i {
content:"";
display: block;
height: 100%;
width: 100%;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/menu-drop.svg');
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
-webkit-transition: -webkit-transform 500ms ease;
transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
transition: transform 500ms ease, -webkit-transform 500ms ease;
}
.header-menu li.expand-active > .expand i {
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/menu-drop-w.svg');
}
/** level 2 **/
.sub-menu-title {
width: 100%;
text-transform: capitalize;
font-family: "proxima-nova", sans-serif;
font-weight: 300;
padding-left: 20px;
margin-top:0;
margin-bottom: 60px;
}
.close-sub {
position: absolute;
top: 10px;
right: 0;
width: 40px;
height: 40px;
padding: 5px;
box-sizing: border-box;
}
.close-sub > span {
display: block;
height: 2px;
background-color: #272626;
}
.close-sub span.one {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
transform: rotate(-45deg) translate(-10px, 10px);
}
.close-sub span.two {
-webkit-transform: rotate(45deg) translate(9px, 9px);
transform: rotate(45deg) translate(9px, 9px);
}
.header-menu li.depth-0 > ul {
visibility: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 60px 0;
padding-bottom: 100px;
min-height: 200px;
background-color: #117EC1;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 1000;
}
.header-menu li.depth-0 > ul::before,
.header-menu li.depth-0 > ul::after {
content:"";
position: absolute;
display: block;
top:0;
width: 100%;
height: 100%;
background-color: #117EC1;
z-index: 900;
}
.header-menu li.depth-0 > ul::before {
right:100%;
}
.header-menu li.depth-0 > ul::after {
left:100%;
}
.header-menu li.expand-active > ul {
visibility: visible;
opacity: 1;
}
/** level 2 items **/
.header-menu li.depth-1 {
width: 33%;
font-size: 16px;
max-width: 100%;
box-sizing: border-box;
}
.header-menu li.depth-1 > a {
position: relative;
padding-top: 120px; /* icon */
}
header li.depth-1 > a > .menu-icon,
header li.depth-1 > a > .menu-icon.hover {
position: absolute;
top:0;
left: 20px;
display: block;
width: 100px;
padding-top: 100px;
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
}
header li.depth-1 > a > .menu-icon.hover {
opacity: 0;
z-index: 2;
transition: opacity 0.3s ease-in-out;
}
.header-menu li.depth-1 > a:hover > .menu-icon.hover {
opacity: 1;
}
/* larger icons for categories */
.header-menu > ul > li:first-of-type > ul > li > a {
padding-top: 70%;
}
.header-menu > ul > li:first-of-type > ul > li .menu-icon,
.header-menu > ul > li:first-of-type > ul > li .menu-icon.hover {
right: 20px;
width: auto;
padding-top: 70%;
background-size: cover;
background-position: center;
}
.header-menu li.depth-1 > a > .title {
display: block;
font-size: 18px;
text-transform: uppercase;
padding: 8px 0;
border-bottom: 1px solid #FFF;
}
.header-menu li.depth-1 > ul {
display: block;
}
/* hover for categories */
.header-menu > ul > li:first-of-type > ul > li > a > .title {
text-align: center;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.header-menu > ul > li:first-of-type > ul > li > a:hover > .title {
background-color: #005884;
border-bottom: 0;
}
/** level 3 **/
.header-menu li.depth-2 {
display: block;
width: 100%;
}
.header-menu li.depth-2 > a {
padding: 5px 20px;
}
/** right **/
header .right {
position: absolute;
top:0;
right: 0;
display: inline-block;
vertical-align: middle;
max-width: 280px;
padding-top: 20px;
}
/** find dealer button **/
.button.dealer {
position: relative;
font-size: 15px;
color: #0FA6E0;
background-color: transparent;
padding: 10px;
border-radius: 0;
transition: color 0.3s ease-in-out,
background-image 0.3s ease-in-out,
background-color 0.3s ease-in-out;
}
.button.dealer:before,
.button.dealer::after {
content:"";
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/pin.svg');
background-size: contain;
background-repeat: no-repeat;
margin-left: 10px;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.button.dealer:before {
position: absolute;
top: 10px;
right: 10px;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/pin-w.svg');
z-index: 0;
}
.button.dealer:after {
position: relative;
z-index: 1;
}
.button.dealer:hover::after {
opacity: 0;
}
.button.dealer:hover,
header.expand .button.dealer.active {
color: #FFF;
border-color: #FECB00;
background-color: #FECB00;
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
/** login button **/
#login {
position: relative;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
padding: 0;
background-color: transparent;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/login.svg');
background-size: 22px 22px;
background-repeat: no-repeat;
background-position: center;
border:0;
border-radius: 0;
transition: background-color 0.3s ease-in-out, background-image 0.3s ease-in-out;
margin-right: 2px;
}
#login:hover,
#login.active {
background-color: #FECB00;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/login-w.svg');
}
header.expand #login,
header.fallback #login {
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/login-w.svg');
}
/** default **/
#login > a {
position: absolute;
top:0;
left:0;
display: block;
width:100%;
height:100%;
}
/** logged in **/
#login ul {
display: none;
position: absolute;
top:100%;
right:0;
display: none;
color: #10a6e1;
background-color: #f6f6f6;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.4);
box-shadow: 0px 2px 2px rgba(0,0,0,0.4);
list-style-type: none;
padding: 0;
margin: 0;
z-index: 1001;
}
#login:hover ul {
display: block;
min-width: 100px;
}
#login li {
display: block;
text-align: center;
}
#login li a {
display: block;
text-decoration: none;
padding: 5px;
transition: background-color 0.3s ease-in-out;
}
#login li a:hover {
background-color: #FECB00;
}
/** search form **/
form#search {
position: relative;
display: inline-block;
vertical-align: middle;
width: 42px;
margin-left: 2px;
}
form#search p {
margin: 0;
}
form#search input {
background-color: transparent;
}
.search-slide-out {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
left: auto;
background-color: #e0e1e5;
transition: all 0.5s ease;
overflow:hidden;
z-index:1;
}
#search:hover .search-slide-out {
display: block;
width: 250px;
z-index: 100;
}
.search-opener,
#hsearch-submit{
position: relative;
display: block;
background-color: #FFF;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/search.svg');
background-size: 22px 22px;
background-repeat: no-repeat;
background-position: center;
width: 42px;
height: 42px;
line-height: 42px;
border: 0;
transition: background-color 0.3s ease-in-out,
background-image 0.3s ease-in-out;
}
button#hsearch-submit {
position: absolute;
top: 0;
right: 0;
padding: 0;
z-index: 1000;
}
#search:hover .search-opener,
#search:hover #hsearch-submit {
background-color: #10a6e1;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/search-w.svg');
}
/** header blue mode: expanded OR fallback **/
header.expand,
header.fallback,
.t-home header.expand {
color: #FFF;
background-color: #117EC1;
}
header.fallback .search-opener,
header.fallback #hsearch-submit {
background-color: #117EC1;
}
header.fallback .logo .st0,
header.expand .logo .st0 {
fill: #FFFFFF;
}
/* reverse buttons */
header.fallback .button.dealer,
header.expand .button.dealer {
color: #FFF;
border: 2px solid #FFF;
}
header.fallback .button.dealer::after,
header.expand .button.dealer::after {
opacity: 0;
}
header.fallback .search-opener,
header.fallback #hsearch-submit,
header.expand .search-opener,
header.expand #hsearch-submit {
background-color: #117EC1;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/search-w.svg');
}
header.fallback #search:hover .search-opener,
header.fallback #search:hover #hsearch-submit,
header.expand #search:hover .search-opener,
header.expand #search:hover #hsearch-submit {
background-color: #FFF;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/search.svg');
}
/** blocks **/
header h2, header h3 {
color: #FFF;
}
header h2 {
font-size: 50px;
}
header h3 {
text-transform: uppercase;
font-size: 20px;
}
div#find-dealer {
display: none;
color: #FFF;
padding-left: 20px;
padding-bottom: 60px;
}
div#find-dealer.active {
display: block;
}
header .table {
table-layout: fixed;
}
header .col {
vertical-align: top;
padding: 20px;
}
header .table > div:first-of-type {
padding-left: 0;
padding-right: 40px;
}
header .table > div:last-of-type {
padding-right: 0;
padding-left: 40px;
}
/*** mobile **/
#mobile-menu {
display: none;
position: absolute;
top: 16px;
right: 20px;
width: 30px;
height: 30px;
margin: 2px;
cursor: pointer;
z-index:100;
}
#mobile-menu > div {
display: block;
height: 3px;
border-radius: 3px;
background-color: #0FA6E0;
margin: 5px 0;
opacity: 1;
transition: all 0.3s linear;
}
header.fallback #mobile-menu > div {
background-color: #FFF;
}
.slide-menu-active #mobile-menu > div.two{
opacity: 0;
}
.slide-menu-active #mobile-menu > div.one {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
.slide-menu-active #mobile-menu > div.three {
-webkit-transform: rotate(45deg) translate(-6px, -6px) ;
transform: rotate(45deg) translate(-6px, -6px) ;
}
/***** Slide menu ****/
.slide-menu {
display:none;
}
.slide-menu {
background: #e0e1e5;
width:240px;
z-index:1000;
position: fixed;
height: 100%;
top: 0;
right: -241px;
border-left: 1px solid #333;
overflow-y:scroll;
}
.slide-menu-active .slide-menu {
right: 0px;
}
.site-content-menu-slide {
overflow-x:hidden;
position:relative;
right:0;
}
/* transition for menu slide */
.slide-menu,
.site-content-menu-slide,
#mobile-menu {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.slide-menu h3 {
padding: 1em;
color:#fff;
background-color: #117EC1;
border-bottom: 1px solid #333;
min-height: 70px;
box-sizing: border-box;
margin:0;
}
.slide-menu ul {
padding:0;
margin:0;
list-style:none;
}
.slide-menu ul ul {
background: #ccc;
}
.slide-menu ul ul ul{
background: #B0B0B0;
}
nav.slide-menu li {
position:relative;
display: block;
}
.slide-menu li > ul {
display:none;
}
.slide-menu li.expand-active > ul {
display:block;
}
.slide-menu a {
display: block;
color: #000;
font-size: 16px;
font-weight: 300;
border-bottom: 1px solid #333;
padding: 18px;
text-decoration:none;
}
.slide-menu li.has-sub {
position: relative;
display: block;
}
.slide-menu li.has-sub > a {
position: relative;
border-right: 1px solid #333;
margin-right: 50px; /* space for drop */
}
.slide-menu a:hover {
color: #FFF;
background: #258ecd;
}
.slide-menu a[href="/#"]:hover {
color: #000;
background: transparent;
}
.slide-menu li.has-sub > a:after {
position: absolute;
content: "";
display: block;
left: 100%;
bottom: -1px;
background-color: #333;
width: 50px;
height: 1px; /* border bottom */
z-index: 100;
}
.slide-menu ul .expand {
position: absolute;
top: 0;
right: 0;
border-left: 1px solid #030b16;
height: 54px;
width: 50px;
cursor: pointer;
}
.slide-menu ul .expand i {
content:"";
display: block;
height: 100%;
width: 100%;
background: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/menu-drop.svg') no-repeat center center;
background-size: 30%;
-webkit-transition: -webkit-transform 500ms ease;
transition: -webkit-transform 500ms ease;
transition: transform 500ms ease;
transition: transform 500ms ease, -webkit-transform 500ms ease;
}
.expand-active > .expand i {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*** extras **/
.slide-menu .extras {
display: none;
}
/** mob search **/
.slide-menu .search form {
position: relative;
padding-right: 50px;
}
.slide-menu .search p {
margin: 0;
}
.slide-menu .search input {
height: 50px;
line-height: 50px;
background-color: #FFF;
}
.slide-menu .search label.infield {
line-height: 50px;
}
.slide-menu .search button {
position: absolute;
top:0;
right:0;
width: 50px;
height: 100%;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/search-w.svg');
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: center;
padding: 0;
border: 0;
}
/** mob find dealer **/
.slide-menu .find-dealer > a {
position: relative;
display: block;
text-transform: uppercase;
font-weight: 500;
padding-right: 50px;
color: #FFF;
background-color: #117EC1;
box-sizing: border-box;
border-top: 1px solid #333;
transition: background-color 0.3s ease-in-out;
}
.slide-menu .find-dealer > a:after {
content:"";
position: absolute;
top:0;
right:0;
display: inline-block;
width: 50px;
height: 100%;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/pin-w.svg');
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: center;
}
.slide-menu .find-dealer > a:hover {
background-color: #FECB00;
}
/** mobile member **/
.slide-menu .login {
font-weight: 500;
background-color: #999;
}
.slide-menu .login a.icon {
position: relative;
padding-right: 50px;
box-sizing: border-box;
}
.slide-menu .login a.icon:after {
content:"";
position: absolute;
top:0;
right:0;
display: inline-block;
width: 50px;
height: 100%;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/login-w.svg');
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: center;
border-left: 1px solid #030b16;
}
.slide-menu .login a {
transition: background-color 0.3s ease-in-out;
}
.slide-menu .login.active a.icon,
.slide-menu .login a:hover {
color: #000;
background-color: #FECB00;
}
.slide-menu .login.active a.icon:hover {
color: #FFF;
background-color: #258ecd;
}
/*============ footer ============*/
.to-top {
background-color: #e0e1e5;
}
.to-top .contentwrap {
padding: 20px;
}
.to-top .table > div:nth-of-type(even){
text-align: right;
}
/* left */
#enews h3,
#enews h4 {
display: inline-block;
vertical-align: middle;
height: 40px;
line-height: 40px;
margin: 0;
}
#enews h3 {
text-transform: uppercase;
margin-right: 10px;
}
.enews-container {
position: relative;
display: inline-block;
vertical-align: middle;
}
#show-subscribe {
position: relative;
cursor: default;
z-index: 2;
}
.enews-wrap.grey {
height:0;
position: absolute;
top: 1px;
left: 0;
width: auto;
padding: 20px;
padding-top: 35px;
background-color: #f6f6f6;
border-radius: 10px;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
box-sizing: border-box;
max-width: 100%;
opacity: 0;
transition: opacity 0.3s linear;
}
.enews-wrap.active {
height: auto;
opacity: 1;
z-index: 10;
}
.close {
position: absolute;
top: 5px;
right: 5px;
display: block;
width: 30px;
height: 30px;
margin-left: auto;
z-index: 3;
}
.site-body .close span {
display: block;
width: 100%;
height: 3px;
background-color: #909090;
border-radius: 3px;
}
.site-body .close span.one {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
transform: rotate(-45deg) translate(-10px, 10px);
}
.site-body .close span.two {
-webkit-transform: rotate(45deg) translate(8px, 8px);
transform: rotate(45deg) translate(8px, 8px);
}
.enews-wrap.grey form {
width: 600px;
max-width: 100%;
margin: 0 auto;
}
.enews-wrap.grey form h2 {
margin-top: 0;
}
/* right */
.to-top a[href="#top"] {
color: #272626;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
padding: 20px 0;
padding-left: 20px;
}
.to-top [href="#top"]::after {
content:"";
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/top-arrow.svg');
background-size: contain;
background-repeat: no-repeat;
margin-left: 15px;
}
/** dark block **/
footer {
background:#262526;
color:#fff;
}
footer a {
text-decoration: none;
}
footer .table.top .col {
vertical-align: top;
}
footer h3.tel.highlight {
color: #1aa6df;
margin: 0px;
margin-bottom: 20px;
}
/** navs **/
footer nav li a {
transition: color 0.3s ease-in-out;
}
footer nav li a:hover {
color: #1aa6df;
}
footer nav li a[href="/#"]:hover {
color: #FFF;
}
.footer > ul {
display: table;
width: 100%;
table-layout: fixed;
}
.footer li a {
padding: 10px 5px;
}
.footer li.depth-0 {
border-top: 2px solid #333;
}
.footer li.depth-0 > a > .title {
font-size: 18px;
text-transform: uppercase;
}
.footer > ul > li {
display: table-cell;
vertical-align: top;
padding: 20px 5px;
}
.footer li li {
display:block;
font-size: 15px;
margin:10px 0;
border-bottom: 1px solid #333;
}
.footer li li:last-of-type {
border-bottom: 0px;
}
/** app link **/
#app-link {
text-align: left;
font-size: 17px;
max-width: 400px;
margin-left: auto;
}
#app-link a {
text-decoration: none;
text-align: left;
}
#app-link .display-right {
margin: 0;
margin-left: 10px;
}
/** bottom **/
footer .table li,
footer .table p {
font-size: 14px;
}
footer h3 {
margin-bottom: 0;
}
footer .table > div:first-of-type {
text-align: left;
}
.terms li::after {
content:"|";
}
nav.terms li a {
display: inline-block;
}
nav.terms > ul > li:first-of-type > a {
padding-left: 0;
}
.terms li:last-of-type::after {
content:"";
}
footer .table > div:last-of-type {
text-align: center;
}
/** bykeo ***/
.bykeo {
display: block;
text-align: center;
font-size: 12px;
padding-top: 20px;
width: 100%;
box-sizing: border-box;
}
.bykeo a {
color: grey;
text-decoration:none;
}
.bykeo img {
vertical-align: middle;
display: inline-block;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.bykeo a:hover img{
transform-origin: center;
transform: translateX(-200%) rotate(-360deg);
}
/*============ splash ============*/
/* banner generic */
.banners .banner-stage {
position: relative;
background-color: grey;
}
a.banner {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
display: block;
text-decoration: none;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.3 ease-in-out;
z-index: 0;
}
a.banner.active {
opacity: 1;
z-index: 1;
}
a.banner:before { /* darken
content:"";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: rgba(38,37,38, 0.3);
z-index: 0; */
}
.banner-content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
max-width: 1280px;
padding: 40px 20px;
padding-top: 5%;
color: #FFF;
box-sizing: border-box;
margin: 0 auto;
z-index: 1;
}
.banner-content > span {
display: block;
font-size: 18px;
padding: 20px 0;
}
a.banner:not([href]) .banner-caption {
display: none;
}
.banner-caption > span {
display: inline-block;
text-transform: uppercase;
padding: 10px 40px;
border-radius: 40px;
max-width: 100%;
background-color: #e0ded2;
background-color: rgba(38,37,38,0.2);
border: 2px solid #0FA6E0;
box-sizing: border-box;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.banner-caption > span:hover {
background-color: #10a6e1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
.banner-navigation,
.banner-nav-item {
display: none;
}
/** banner home **/
.banners-home {
position: relative;
}
.banners-home .banner-stage {
padding-top: 50%;
padding-top: 90vh;
}
.banners-home a.banner {
padding-top: 100px;
}
.banners-home a.banner::before { /*
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(38,37,38,0.20) 40%, rgba(38,37,38,0.6) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(38,37,38,0.20) 40%,rgba(38,37,38,0.6) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(38,37,38,0.20) 40%,rgba(38,37,38,0.6) 100%); */
}
.banners-home .banner-content {
max-width: 100%;
padding: 40px;
padding-top: 120px;
}
.banners-home .banner-content > .banner-name {
font-family: 'Montserrat', sans-serif;
font-size: 100px;
}
.banners-home .banner-title {
font-size: 30px;
}
.banners-home .banner-caption > span {
padding: 20px 40px;
}
/** promo banner styles **/
.banners-home a.banner:not([data-promo_image=""]) .banner-content {
padding-top: 320px;
line-height: 1;
}
.banners .promo-block {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.banners .promo-block .img {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
max-width: 300px;
margin: 20px auto;
/* margin: 0 auto; */
z-index: 1;
}
.banners .promo-block .img:before { /* square */
content:"";
display: block;
padding-top: 100%;
}
.banners-home a.banner:not([data-promo_image=""]) .banner-caption {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
}
.banners-home a.banner:not([data-promo_image=""]) .banner-caption > span {
padding: 10px 40px;
}
/* next clicker */
.banners-home .banner-navigation {
display: none;
position: absolute;
text-align: center;
top: 50%;
margin-top: -5%;
right: 0;
color: #FFF;
width: 10%;
padding: 1%;
margin-right: 40px;
box-sizing: border-box;
cursor: pointer;
z-index: 3;
}
.banners-home .banner-navigation:before {
content:"";
font-size: 30px;
line-height: 1;
display: inline-block;
width: 60px;
height: 80px;
background-color: #262526;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/right-arrow-w.svg');
background-repeat: no-repeat;
background-size: 20px 30px;
background-position: center;
border-radius: 40px;
box-sizing: border-box;
}
/** products scroller **/
.featured-products {
text-align: center;
}
.featured-products h2 {
font-size: 40px;
}
/** outer **/
.scroll-wrap {
position: relative;
width: 100%;
height: 700px;
padding: 0 60px;
box-sizing: border-box;
margin-top: 40px;
overflow: hidden;
}
.scroll-wrap .prev,
.scroll-wrap .next {
display: none;
position: absolute;
top:0;
bottom: 0;
width: 60px;
height: 100%;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/right-arrow.svg');
background-size: 60px 60px;
background-position: 25% center;
background-repeat: no-repeat;
z-index: 10;
cursor: pointer;
}
.scroll-wrap .prev {
left:0;
transform: rotate(180deg);
}
.scroll-wrap .next {
right:0;
}
/** inner **/
.featured-products .scroller {
height: 720px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/** item **/
.scroller .product,
.frame .product {
position: relative;
display: inline-block;
vertical-align: middle;
white-space: normal;
padding-top: 0;
background-color: #FFF;
box-sizing: border-box;
}
.featured-products .product {
width: 100%;
height: 650px;
padding: 0 5%;
box-sizing: border-box;
}
.scroller .product > div {
border: none;
}
.scroller .graphic {
padding-top: 50%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.scroller .product a,
.frame .product a {
text-decoration: none;
}
.scroller .teaser {
position: relative;
display: block;
text-align: left;
padding: 4%;
-webkit-box-shadow: 0px 1px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 8px rgba(0,0,0,0.3);
box-shadow: 0px 1px 8px rgba(0,0,0,0.3);
box-sizing: border-box;
margin: 0 auto;
}
.featured-products .teaser .dealer {
position: absolute;
top: 0;
right:0;
margin:0;
}
.featured-products .teaser .dealer a.yellow {
border-radius: 0;
}
.featured-products .scroller h3 {
font-size: 30px;
margin: 0;
}
.featured-products h4 {
margin: 0;
margin-top: 5px;
}
.featured-products p {
margin: 10px 0;
}
/** nav **/
.scroll-nav {
padding: 30px 0px 40px 0px;
}
.scroll-nav .item {
display: inline-block;
width: 10%;
height: 4px;
background-color: #ADADAD;
transition: background-color 0.3s ease-in-out;
}
.scroll-nav .item.active {
background-color: #0FA6E0;
}
/** content **/
.t-home .dark-block {
padding:0;
}
.t-home .dark-block .contentwrap {
padding: 20px;
}
/** home menu **/
.home-menu a {
text-decoration: none;
}
.home-menu section {
text-align: center;
}
section.block .contentwrap {
max-width: 760px;
padding: 0 20px;
padding-bottom: 20px;
}
section.block {
position: relative;
width: 100%;
padding: 60px 0;
box-sizing: border-box;
}
section.block p.highlight {
text-transform: uppercase;
}
section.block h2 {
font-size: 40px;
margin: 20px 0;
}
/* yellow */
.home-menu > section:nth-of-type(odd){
background-color: #FECB00;
z-index: 1;
}
.home-menu > section:nth-of-type(odd)::before,
.home-menu > section:nth-of-type(odd)::after {
content:"";
position: absolute;
top:0;
bottom:0;
width: 100%;
height: 100%;
background-color: #FECB00;
z-index:0;
}
.home-menu > section:nth-of-type(odd)::before {
right: 100%;
}
.home-menu > section:nth-of-type(odd)::after {
left: 100%;
}
/* img sections */
.home-menu .home-graphic {
position: relative;
padding-top: 35%;
background-color: grey;
background-size: cover;
background-position: center;
}
/* clicker */
.clicker {
position: relative;
background-position: center;
padding-top: 40%;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/diagram.jpg');
background-size: cover;
background-color: grey;
}
.clicker img {
display: block;
margin: 0 auto;
}
.clicker .popup {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
}
.clicker .expand {
position: absolute;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 1;
}
.clicker .expand > div {
width: 100%;
height: 100%;
background-color: #FFF;
border-radius: 50%;
transition: all 0.5s ease;
animation: pulse 4s ease infinite;
}
@keyframes pulse {
0% {transform: scale(1);}
25% {transform: scale(1.5);}
50% {transform: scale(1);}
75% {transform: scale(1.5);}
100% {transform: scale(1);}
}
.clicker .expand:before,
.clicker .expand:after {
content:"";
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -1px;
display: inline-block;
width: 20px;
height: 2px;
background-color: #606060;
border-radius: 2px;
z-index: 1;
transition: all 0.3s ease-in-out;
}
.clicker .expand:after {
margin-top: -10px;
margin-left: -1px;
width: 2px;
height: 20px;
}
.clicker .expand:hover:before,
.clicker .expand:hover:after,
.pop .close:hover:before,
.pop .close:hover:after {
background-color: #10a6e1;
}
.clicker .popup.active .expand:after {
opacity: 0;
}
.clicker .popup.active .expand:before {
left:auto;
right: 5px;
}
.clicker .popup .pop {
position: relative;
display: block;
max-width: 1200px;
padding: 5%;
border-radius: 20px;
background-color: #FFF;
box-sizing: border-box;
margin: 2% auto;
opacity: 0;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
transition: all 0.5s ease;
}
.pop .close {
position: absolute;
top: 5px;
right: 5px;
width: 40px;
height: 40px;
cursor: pointer;
}
.pop .close:before,
.pop .close:after {
content:"";
position: absolute;
top:0;
left:0;
display: inline-block;
width: 30px;
height: 2px;
background-color: #606060;
border-radius: 2px;
margin: 20px 5px;
}
.pop .close:before {
transform: rotate(45deg);
}
.pop .close:after {
transform: rotate(-45deg);
}
.clicker .col {
padding-left: 5%;
}
.col.img {
vertical-align: middle;
width: 25%;
padding-left: 0;
}
.popup h2 {
color: #10a6e1;
margin:0;
}
.popup p.highlight {
margin-top: 0;
}
.popup.active .pop {
opacity: 1;
z-index: 2;
}
#sensor .expand {
top: 11%;
left: 37%;
}
#pv .expand {
top: 25%;
left: 20%;
}
#racking .expand {
top: 15%;
left: 64%;
}
#disconnect .expand {
top: 35%;
left: 55%;
}
#controller .expand {
top: 50%;
left: 55%;
}
#gate .expand {
top: 50%;
left: 70%;
}
#pressure .expand {
bottom: 35%;
left: 75%;
}
#foot .expand {
bottom: 8%;
left: 34%;
}
/** page featured **/
nav.features {
display: table;
width: 100%;
table-layout: fixed;
}
.features .row {
display: table-row;
height: 500px;
}
.features .col {
display: table-cell;
text-align: center;
color: #FFF;
background-color: #262526;
background-size: cover;
background-position: center;
}
.features .col.has-icon {
position: relative;
}
.features .col.has-icon::before { /* darken */
content:"";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(38,37,38, 0.5);
transition: background-color 0.3s ease-in-out;
z-index: 1;
}
.features .col.has-icon:hover::before {
background-color: rgba(38,37,38, 0.8);
}
.features a {
position: relative;
display: table;
width: 100%;
box-sizing: border-box;
}
.features a > .wrap {
position: relative;
display: table-cell;
vertical-align: middle;
z-index: 2;
}
.features h2 {
text-transform: uppercase;
font-weight: normal;
color: #FFF;
}
.features h2,
.features p {
width: 50%;
margin: 20px auto;
}
.features .button {
padding: 20px 40px;
}
/** blue **/
.features > div:nth-of-type(odd) > section:nth-of-type(even),
.features > div:nth-of-type(even) > section:nth-of-type(odd) {
background-color: #0086CD;
}
.features > div:nth-of-type(odd) > section:nth-of-type(even) .button,
.features > div:nth-of-type(even) > section:nth-of-type(odd) .button {
border: 2px solid #FECB00;
}
.features > div:nth-of-type(odd) > section:nth-of-type(even) .button:hover,
.features > div:nth-of-type(even) > section:nth-of-type(odd) .button:hover {
background-color: #FECB00;
}
/* hide image on 3rd item */
nav.features > div.row:nth-of-type(2) > div.col:first-of-type {
background-image: none;
}
/** page-bottom banner **/
.banners-page-bottom .banner {
position: relative;
display: table;
width: 100%;
height: 500px;
}
.banners-page-bottom .banner-content {
display: table-cell;
width: 100%;
vertical-align: middle;
text-align: center;
padding: 0 14%;
box-sizing: border-box;
}
.banners-page-bottom .banner-name {
font-size: 60px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: #262526;
}
.banners-page-bottom .banner-caption > span {
background-color: #10a6e1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
.banners-page-bottom .banner-caption > span:hover {
border-color: #117EC1;
background-color: #117EC1;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*============ pumps landing page ============*/
.banners-pumps .banner-stage {
padding-top: 65vh;
}
.banners-home .banners-pumps a.banner {
padding-top: 0px;
}
.banners-pumps .banner-content {
padding-top: 40px;
}
.banners-pumps .banner-content > .banner-name {
font-size: 90px;
}
.pumps-landing.contentwrap {
text-align: center;
padding-top: 40px;
}
.features.pumps {
color: #FFF;
}
.pumps form,
.pumps-landing form {
text-align: center;
margin: 0 auto;
}
.pumps-landing form p:last-of-type {
margin-top: 10px;
}
.pumps form {
width: 100%;
max-width: 600px;
}
.pumps form input,
.pumps-landing form input {
border: 1px solid #909090;
}
.pumps-landing form {
max-width: 250px;
}
.pumps input#search-location {
color: #FFF;
text-align: center;
padding-left: 0px;
}
.pumps .menu-icon {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin: 0px auto;
}
.pumps h2.pump-finder:before {
content: "The Lorentz";
display: block;
font-size: 18px;
text-transform: capitalize;
}
.features.pumps > div:nth-of-type(odd) > section:nth-of-type(odd) h2,
.features.pumps > div:nth-of-type(even) > section:nth-of-type(even) h2 {
color: #FFD500;
}
.features.pumps > div:nth-of-type(odd) > section:nth-of-type(even):after,
.features.pumps > div:nth-of-type(even) > section:nth-of-type(odd):after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #0086CD;
opacity: 71%;
z-index: 0;
}
/** overridden images for case-studies in the menu **/
.col.national {
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/nationally.jpg') !important;
background-position: left;
}
.col.national .menu-icon {
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/nationally.svg') !important;
}
/*============ page ============*/
.page-banner {
position: relative;
background-size:cover;
background-position:center;
background-color: lightgrey;
}
.page-banner::after { /* lighten */
content:"";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: #147EC2;
mix-blend-mode: multiply;
opacity: 0.7;
z-index: 0;
}
.page-banner .contentwrap {
display: table;
width: 1200px;
height: 400px;
text-align: center;
box-sizing: border-box;
z-index: 2;
}
.page-banner .col .page-title {
font-size: 80px;
color: #FFF;
margin-top: -80px;
}
.page-banner .subtitle {
color: #FFF;
}
.page-title {
margin: 0;
}
/* no graphic */
.title.contentwrap {
text-align: center;
padding-bottom: 0;
}
.title .page-title {
font-size: 50px;
}
/** body **/
.page-body.contentwrap {
padding-bottom: 60px;
}
.page-body.contentwrap:blank {
padding: 20px;
}
/** promo bar **/
.promo-bar {
background-color: #ffd500;
}
.promo-bar .close span { /*override other close span style */
display: inline;
background-color: transparent;
border-radius: none;
}
.promo-bar a {
text-decoration: none;
}
.promo-bar .contentwrap {
padding: 0 40px;
box-sizing: border-box;
}
.no-js .promo-bar .close {
display: none;
}
.promo-bar .close {
position: absolute;
display: block;
top: 0;
right: 20px;
width: 100%;
text-align: right;
color: #FFF;
font-size: 11px;
line-height: 30px;
padding-right: 40px;
box-sizing: border-box;
margin-top: 20px;
z-index: 10;
}
.promo-bar .close:before,
.promo-bar .close:after {
content:"";
position: absolute;
top: 0;
right: 10px;
display: block;
vertical-align: middle;
width: 2px;
border-radius: 2px;
height: 30px;
background-color: #FFF;
}
.promo-bar .close:before {
transform: rotate(45deg);
}
.promo-bar .close:after {
transform: rotate(-45deg);
}
.promo-bar .col {
padding: 20px 0;
padding-top: 30px;
width: auto;
color: #262526;
background-color: #ffd500;
}
.no-js .promo-bar .col {
padding-top: 20px;
}
.promo-bar .col.dark {
position: relative;
width: 60%;
background-color: #262526;
color: #FFF;
z-index: 1;
}
.promo-bar .col.dark:after { /* extend bg */
content: "";
display: block;
width: 1000px;
height: 100%;
position: absolute;
top:0;
left: 100%;
background-color: #262526;
z-index:0;
}
.promo-bar .table > div:first-of-type {
padding-right: 2%;
}
.promo-bar .table > div:last-of-type {
padding-left: 4%;
}
.promo-bar .icon,
.promo-bar .wrap,
.pump-finder .pf-icon,
.pump-finder .wrap{
display: inline-block;
vertical-align: top;
}
.promo-bar .icon,
.pump-finder .pf-icon {
width: 100px;
height: 100px;
box-sizing: border-box;
border-radius: 12px;
margin-right: 20px;
}
.promo-bar .wrap {
width: 300px;
text-align: left;
max-width: 100%;
}
.promo-bar h3,
.promo-bar h2,
.promo-bar p {
margin: 0;
}
.promo-bar h2 {
color: #FFF;
font-size: 40px;
line-height: 1;
}
.promo-bar h3 {
font-size: 22px;
font-weight: 600;
}
.promo-bar p {
font-size: 18px;
}
.promo-bar .highlight,
.pump-finder .wrap .highlight {
font-family: 'Montserrat', sans-serif;
color: #ffd500;
}
/** submenu **/
.submenu,
.sub-cats {
padding: 0 8%;
}
.sub,
.sub-cat {
display: table;
width: 100%;
padding: 10px 0;
box-sizing: border-box;
}
nav.submenu a {
display: inline-block;
text-align: left;
padding: 0;
}
.sub div,
.sub-cat > div {
display: table-cell;
vertical-align: middle;
}
.sub .menu-icon,
.sub-cat .image {
width: 400px;
background-color: grey;
background-size: cover;
background-position: center;
}
.sub .menu-icon > a { /* square */
display: block;
padding-top: 100%;
}
.sub .wrap,
.sub-cat .wrap {
text-align: left;
padding-right: 10%;
}
.sub .wrap a {
max-width: 500px;
}
.sub h3,
.sub-cat h3 {
font-size: 30px;
margin-top: 0;
}
.sub h4 {
color: #606060;
font-size: 18px;
font-weight: bold;
margin:0;
}
.sub .button.blue {
padding: 20px 30px;
margin-top: 10px;
}
.sub .button.blue::after {
display: none;
}
/** alternate */
.submenu section:nth-of-type(even) .wrap,
.sub-cats section:nth-of-type(even) .wrap {
text-align: right;
padding-right: 0;
padding-left: 10%;
}
/*============ search ============*/
.t-search .page-title {
color: #117EC1;
}
.result a {
text-decoration: none;
padding-left: 20px;
padding-bottom: 10px;
}
.result h2 {
margin-left: -20px;
margin-bottom: 0px;
}
.result p {
margin-top: 10px;
}
/*============ find dealers ============*/
/** dealers + contact form styles **/
html.js p.no-js {
display: none;
}
.grey {
background-color: #f6f6f6;
padding-bottom: 40px;
}
.grey form {
color: #909090;
width: 100%;
}
.grey label,
.grey select {
color: #909090;
}
.grey .table {
table-layout: fixed;
}
.grey input,
.grey select,
.grey textarea,
.demo input {
border: 1px solid #909090;
}
input.error,
select.error,
textarea.error,
.grey input.error,
.grey select.error,
.grey textarea.error,
p.input input.error,
input#quantity.error {
border: 1px solid red;
}
div.half p,
div.half > div {
display: inline-block;
vertical-align: top;
width: 49%;
box-sizing: border-box;
margin: 5px 1%;
}
div.col.half p {
vertical-align: top;
}
div.half > p:nth-of-type(odd),
div.half > div:nth-of-type(odd) {
margin-left:0;
}
div.half > p:nth-of-type(even),
div.half > div:nth-of-type(even){
margin-right:0;
}
.grey button {
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}
#contact button {
margin-top: 5px;
}
.grey button:hover {
#-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* dealers only */
.dealers .page-title {
font-family: "proxima-nova", sans-serif;
font-weight: 300;
font-size: 50px;
text-align: center;
margin: 40px 0;
}
.dealers .page-body {
position: relative;
text-align: center;
}
.dealers .page-body::after {
content:"";
display: table;
width: 100%;
height: 1px;
clear: both;
}
#dealers .col {
vertical-align: top;
}
#dealers p {
margin: 0;
}
#dealers .table > div:first-of-type {
padding-right: 4%;
}
#dealers div.half p:last-of-type {
text-align: right;
padding-left: 4%;
}
label.inline {
text-align: center;
padding-right: 5px;
}
p.all-d {
position: relative;
padding-left: 140px;
text-align: center;
min-height: 1px;
margin-bottom: 0;
box-sizing: border-box;
}
a#all {
display: none;
position: absolute;
left:0;
font-size: 18px;
color: #1993E0;
letter-spacing: 1px;
background-color: transparent;
text-decoration: underline;
cursor: pointer;
}
a#all.active {
display: block;
}
span.no-dealers {
display: none;
color: red;
margin-left: -140px;
}
/* map */
.map-wrap {
position: relative;
width: 100%;
padding-top: 40%;
background-color: grey;
border: 1px solid #e0e1e5;
margin-top: 20px;
}
.kms-loader {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
#map {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
/*** dealer results table ***/
#results {
padding: 40px 0;
}
#results table {
width: 100%;
font-size: 18px;
border-collapse: collapse;
}
#results table tr.load {
min-height: 100px;
}
#results .kms-loader {
display: block;
}
#results table,
#results th,
#results td {
border: 1px solid #606060;
}
#results .no.dealer {
text-align: center;
}
#results th {
color: #1993E0;
font-family: "PFDinTextPro", sans-serif;
font-weight: 500;
text-transform: uppercase;
text-align: left;
padding: 2%;
}
#results td {
vertical-align: top;
padding: 1% 2%;
}
#results td p,
div.info p {
margin: 5px 0;
}
#results td.name,
div.info p.name {
font-weight: bold;
color: #1993E0;
}
#results table a,
div.info a {
color: #1993E0;
transition: color 0.3s ease-in-out;
}
#results table a:hover,
div.info a:hover {
color: #117EC1;
}
#results table a.tel,
div.info a.tel {
text-decoration: none;
}
div.info p.name {
font-size: 15px;
}
div.info p.dis,
div.info p.dir {
margin-top: 10px;
}
/*============ contact ============*/
#contact .col {
vertical-align: top;
}
#contact .table > div:last-of-type {
text-align: right;
}
#contact .col .wrap {
display: inline-block;
text-align: left;
width: auto;
}
.office h4 {
margin-bottom:0;
}
.office p {
margin: 5px 0;
}
p.item.highlight > a {
text-decoration: none;
font-size: 20px;
line-height: 1;
}
/*============ Demo ============*/
.table.demo {
table-layout: fixed;
}
.demo .col {
width: 70%;
vertical-align: top;
}
.demo .col.img {
width: 30%;
background-repeat: no-repeat;
background-size: contain;
background-position: right;
}
.demo .content {
position: relative;
padding-bottom: 40px;
}
.demo img.icon {
display: none;
}
.demo form {
padding-bottom: 20px;
}
.demo label.time {
padding-left: 20px;
line-height: 40px;
box-sizing: border-box;
}
.demo input {
background-color: #f6f6f6;
}
input.time {
padding-top: 0;
}
/*============ Blog/Case Studies ============*/
/* list */
.list .contentwrap{
padding-top: 0;
}
.none {
text-align: center;
}
article {
position: relative;
display: inline-table;
vertical-align: middle;
width: 48%;
background-color: #f2f2f2;
box-sizing: border-box;
border: 2px solid #FFF;
box-sizing: border-box;
height: 380px;
margin: 1%;
}
article.has-icon,
article.has-icon {
color: #FFF;
background-size: cover;
background-position: center;
}
article.has-icon h2,
article.has-icon h3 {
color: #FFF;
}
article a.wrap {
position: relative;
display: table-cell;
vertical-align: top;
text-decoration: none;
padding: 50px 20px;
}
article a.wrap::before {
content:"";
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background: rgba(38,37,38, 0.3);
transition: background 0.3s ease-in-out;
z-index: 0;
}
article a[href]:hover::before {
background: rgba(25,58,99, 0.4);
}
article a .button {
position: absolute;
bottom: 50px;
background-color: rgba(38,37,38,0.3);
}
article a:hover .button {
background-color: #10a6e1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
article a > div {
position: relative;
z-index:1;
}
article .share {
position: absolute;
top: 20px;
right: 20px;
}
/* pager */
.pager {
text-align: center;
padding-top: 20px;
}
.pager .button {
text-align: center;
min-width: 50px;
padding: 10px 5px;
box-sizing: border-box;
margin: 5px;
}
.pager .button.active {
color: #FFF;
background-color: #117EC1;
border-color: #117EC1;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/***** item *****/
.item .page-body.contentwrap {
padding-bottom: 0;
}
.back.contentwrap {
padding-bottom: 80px;
}
/*============ Products ============*/
/** categories **/
.category .contentwrap {
padding-bottom: 0;
}
.cat.yellow-block {
text-align: center;
}
.category .links {
margin-left: -20px;
}
.links .icon {
margin: 0;
}
.links .icon a {
display: block;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.links .icon a:hover {
color: #1aa6df;
}
.links .icon a::before {
content:"";
display: block;
width: 100%;
padding-top: 60%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin-bottom: 20px;
}
.model.icon a::before {
background-image:url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/model-imgs.svg');
}
.brochure.icon a::before {
background-image:url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/brochure.svg');
}
.calc.icon a::before {
background-image:url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/calc.svg');
}
/** gallery block **/
#model-images {
height:0;
opacity:0;
overflow: hidden;
transition: opacity 1s linear 0.01s;
}
#model-images.active {
height: auto;
padding: 20px 0;
opacity: 1;
}
/** bottom image **/
.bottom-img {
background-color: lightgrey;
background-size: cover;
background-position: center;
}
.bottom-img.no-items {
padding-top: 30%;
}
.bottom-img .product > div {
background-color: #FFF;
}
/** benefits **/
.benefits {
padding: 20px 0;
text-align: center;
}
/** sub-categories **/
.all.title.contentwrap {
padding-bottom: 40px;
}
.t-products section {
padding: 20px 0;
}
.t-products section:after {
content:"";
display: table;
width:100%;
height:1px;
clear: both;
}
.sub-cat {
height: 300px;
}
.sub-cat .image {
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
}
.sub-cat .image.empty {
display: none;
}
.sub-cat h3 {
margin-top:0;
}
.sub-cat div.icon {
width: auto;
padding: 0px;
margin: 0;
}
.sub-cat .brochure.icon a::before {
content:"";
display: inline-block;
vertical-align: middle;
width: 40px;
height: 30px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin-right: 20px;
}
.sub-cat .brochure.icon a p {
display: inline-block;
vertical-align: middle;
margin: 0;
}
/** products **/
.t-products .all .sub-heading {
color: #262526;
}
.list.contentwrap {
text-align: center;
}
.list > div.wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product {
position: relative;
display: inline-block;
vertical-align: top;
width: 33.33%;
padding: 1%;
box-sizing: border-box;
}
.list .product > div {
position: relative;
height: 100%;
text-align: center;
padding: 20px;
border: 1px solid #e0ded2;
box-sizing: border-box;
}
.product div > a {
display: block;
text-decoration: none;
}
.product .icon {
display: block;
width: 100%;
padding-top: 70%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;
margin-bottom: 20px;
}
.product h3 {
font-size: 30px;
margin: 0;
}
.product p {
margin: 10px 0;
}
.product div > a:hover > .button,
.product div > a:hover > .yellow {
color: #FFF;
background-color: #10a6e1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
/*============ Pump Finder ============*/
.js p.js {
display: none;
}
section.pump-finder {
position: relative;
text-align: center;
background-color: grey;
background-size: cover;
background-position: center;
}
section.pump-finder:after { /* darken */
content:"";
display: block;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0, 0.5);
z-index: 0;
}
.pump-finder .contentwrap {
padding: 0 20px;
max-width: 1200px;
}
form#pump-finder {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
height: calc(100vh - 100px);
z-index: 2;
}
.pump-finder-wrap {
display: table-cell;
vertical-align: middle;
width: 100%;
}
.frame {
display:block;
}
.frame.disabled {
display: none;
}
/* first */
.pump-finder .pf-icon {
width: 140px;
height: 140px;
}
.pump-finder .wrap {
width: 350px;
text-align: left;
padding-bottom: 100px;
}
.pump-finder .wrap .highlight{
font-size: 25px;
}
.pump-finder .page-title {
font-weight: bold;
font-size: 50px;
line-height: 1;
margin: 0;
}
.frame .wrap .page-title {
}
div.buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 4%;
width: 500px;
max-width: 100%;
margin: 0 auto;
}
.buttons h2 {
display: inline-block;
vertical-align: middle;
}
.frame > h1,
.frame > h2,
.frame > h3,
.frame > h4,
.frame > p,
.frame span,
.pump-finder .wrap p,
.pump-finder .wrap h1,
.pump-finder .buttons h2 {
color: #FFF;
}
.pump-finder label .highlight {
color: #FECB00;
}
.frame > h2 {
width: 600px;
margin: 20px auto;
max-width: 100%;
}
.frame.results .page-title {
margin-top: 0;
}
.highlight.y {
color: #FECB00;
}
/** inputs **/
/** slidebar **/
.quantity {
position: relative;
width: 1000px;
padding: 20px;
padding-top: 30px;
border: 1px solid #FFF;
box-sizing: border-box;
max-width: 100%;
margin: 20px auto;
}
.quantity:before { /* min label */
content:"1,000L";
color: #FFF;
display: inline-block;
position: absolute;
top: 100%;
left: 0;
padding-top: 10px;
}
.quantity:after { /* max label */
content:"5,000,000L+";
color: #FFF;
display: inline-block;
position: absolute;
top: 100%;
right: 0;
padding-top: 10px;
}
input#quantity { /* actual value */
position: absolute;
top: 100%;
left: 50%;
display: inline-block;
font-size: 20px;
text-align: center;
padding-top: 10px;
padding-left: 0;
width: 200px;
margin-left: -100px;
color: #FFF;
letter-spacing: 1px;
background-color: #1993E0;
border: 1px solid #FFF;
max-width: 100%;
z-index: 2;
}
.pump-finder .quantity label.error {
position: absolute;
top:0;
left:0;
font-size: 18px;
line-height: 1.4;
/* center */
margin-left: 50%;
transform: translateX(-50%);
}
.screen { /* hides gauge */
width: 2%; /* reset in js */
overflow: hidden;
}
.gauge { /* gauge image */
width: 960px; /* reset in js */
height: 100px;
background-image: url('https://keo-cms.appspot.com.storage.googleapis.com/sites/lorentz/app_files/img/water-gauge.svg');
background-size: cover;
background-repeat: no-repeat;
}
input.slidebar {
-webkit-appearance: none;
appearance: none;
width: 100%;
padding-top: 0;
padding-left: 0;
height: 2px;
background: #fff;
outline: none;
opacity: 0.8;
-webkit-transition: .2s;
transition: opacity .2s;
margin-top: 10px;
}
.slidebar:hover {
opacity: 1;
}
.slidebar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #FECB00;
cursor: pointer;
}
.slidebar::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #0FA6E0;
cursor: pointer;
}
div#TDH {
display: none;
}
#TDH .table {
width: auto;
margin: auto;
margin-top: 20px;
}
#TDH .diagram {
max-width: 300px;
margin-right: 40px;
}
p.input.sml {
padding-right: 30px
margin: 5px auto;
}
#TDH span.q {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 40px;
display: inline-block;
font-size: 30px;
line-height: 40px;
background-color: #FFF;
color: #000;
cursor: pointer;
}
span.a {
display: none;
}
span.a.active {
display: block;
}
/** text **/
p.input {
text-align: center;
width: 300px;
max-width: 100%;
margin: 20px auto;
margin-top: 40px;
}
p.input.sml {
margin: 5px auto;
}
.pump-finder label.float {
text-align: left;
white-space: nowrap;
width: auto;
max-width: 100%;
height: 60px;
font-size: 30px;
line-height: 60px;
color: #FFF;
/* center */
padding-left: 0;
margin-left: 50%;
transform: translateX(-50%);
transition: all 0.5s ease;
}
.pump-finder label.error {
display: relative;
color: red;
margin-left: 0;
transform: translateX(0);
}
p.input input {
color: #FFF;
text-align: center;
padding-left: 0;
height: 60px;
font-size: 30px;
line-height: 60px;
border: 1px solid #FFF;
}
p.sml input,
p.sml label.float {
height: 40px;
line-height: 40px;
font-size: 18px;
}
/** buttons **/
p.buttons {
margin-top: 40px;
}
.pump-finder .button {
padding: 20px 40px;
margin: 10px 0;
cursor: pointer;
}
.pump-finder .back,
.pump-finder .next,
.pump-finder #find-matches {
color: #000;
margin: 10px;
cursor: pointer;
}
.pump-finder .back:hover,
.pump-finder .next:hover,
.pump-finder #find-matches:hover {
background-color: #FFF;
}
/* results */
.frame .container {
position: relative;
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.frame .scroller {
height: auto;
padding: 20px 0;
box-sizing: border-box;
}
.frame .scroller.on {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.frame .product {
display: none;
width: 300px;
min-height: 430px;
padding: 0;
margin: 0 20px;
}
.frame .product {
padding-bottom: 60px;
}
div.quote {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0;
transition: all 0.3s ease-in-out;
}
.frame .product.match .quote button {
background-color: #FECB00;
}
div.quote button:hover,
.frame .product.match button:hover {
color: #FFF;
background-color: #10a6e1;
}
.frame .product button {
display: block;
width: 100%;
font-size: 16px;
line-height: 1;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
text-transform: uppercase;
padding: 20px 0;
background-color: #ccc;
border: none;
cursor:pointer;
}
.frame .product.active {
display: inline-block;
}
.frame .product.active.match {
width: 340px;
min-height: 480px;
border: 4px solid #FECB00;
}
.frame .product p {
margin: 5px 0;
}
.frame .product h3.highlight {
font-size: 25px;
letter-spacing: 1px;
color: #1993E0;
margin: 10px 0;
}
.frame .product.match h3.highlight {
font-size: 30px;
}
/*============ Pump Finder Enquiry ============*/
.t-pump-enquiry .title.contentwrap {
padding-bottom: 40px;
}
.t-pump-enquiry .grey form {
max-width: 600px;
margin: 0 auto;
}
.t-pump-enquiry form h3 {
margin-bottom: 0;
}
#product-enquiry label.float {
position: absolute;
top:0;
left:0;
padding-left: 20px;
line-height: 40px;
max-width: 100%;
box-sizing: border-box;
transition: all 0.5s ease;
}
.js-float-wrap input {
padding-top: 10px;
line-height: 30px;
}
#product-enquiry textarea {
padding: 0px;
padding-left: 20px;
min-height: 50px;
}
#product-enquiry .js-float-wrap.focused label.float,
#product-enquiry .js-float-wrap.populated label.float {
left: 5px;
padding-left: 0;
line-height: 1.4;
}
/*============ Member ============*/
.middle {
text-align: center;
padding-bottom: 40px;
}
.t-member form.member,
.t-member #form-result {
text-align: left;
padding: 20px;
color: #909090;
background-color: #f6f6f6;
border: 1px solid #ccc;
border-radius: 10px;
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form.member input, textarea, select {
padding-top: 0px;
padding-bottom: 0px;
border: 1px solid #909090;
}
form.member div.half > div {
vertical-align: top;
}
form.member div.half > div.bottom {
vertical-align: bottom;
}
form.member div.half.m > div {
vertical-align: middle;
}
form.member label.control-label {
display: none;
}
form.member input[type="submit"]{
border: 0;
}
.btn {
display: inline-block;
text-align: center;
text-transform: uppercase;
color: #FFF;
font-size: 18px;
width: 100%;
padding: 10px 0;
background-color: #10a6e1;
text-decoration: none;
line-height: 1;
border: 0;
}
a#reset:hover,
.btn:hover {
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
form.member .button {
text-align: center;
color: #FFF;
width: 100%;
padding: 10px 0;
background-color: #10a6e1;
border: 0;
border-radius: 0;
}
form.member button[type="submit"]{
margin-top:5px;
}
/** login **/
#pswd {
position: relative;
}
a#reset {
position: absolute;
top: 0;
right: 0;
display: inline-block;
text-align: center;
text-decoration: none;
color: #FFF !important;
font-size: 18px;
text-transform: uppercase;
background-color: #10a6e1;
width: 40px;
height: 40px;
padding: 0;
line-height: 40px;
transition: background-color 0.4s ease-in-out;
}
/** profile **/
form.member .button.logout {
background-color: #FECB00;
}
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (min-width: 2000px) {
/* home clicker */
#sensor .expand {
top: 13%;
left: 38%;
}
#controller .expand,
#disconnect .expand {
left: 56%;
}
#foot .expand {
bottom: 10%;
}
#pressure .expand {
left: 76%;
}
}
@media only screen and (max-width: 1400px) {
/** header menu **/
.header-menu li.depth-1 > a > .title {
font-size: 16px;
}
}
@media only screen and (max-height: 700px) and (min-width: 1300px) {
/** home **/
.banners-home .banner-stage,
.banners-pumps .banner-stage {
padding-top: 40%;
}
}
@media only screen and (max-width: 1300px) {
/* home */
.banners-home .banner-stage {
padding-top: 60%;
}
.banners-home .banners-pumps .banner-stage {
padding-top: 40%;
}
.banners-home .banner-content > .banner-name {
font-size: 50px;
}
.banner-caption > span {
padding: 20px 30px;
}
/* promo banner */
.banners-home a.banner:not([data-promo_image=""]) .banner-content > span {
padding: 5px 0px;
}
/* clicker */
#sensor .expand {
left: 36%;
}
/** page-bottom-banner **/
.banners-page-bottom .banner-content {
padding: 0 20px;
}
/** page **/
.page-banner .contentwrap {
width: 100%;
}
}
@media only screen and (max-width: 1200px) {
/** home **/
/* promo banner */
.banners-home a.banner:not([data-promo_image=""]) .banner-content {
padding-top: 24%;
}
.banners .promo-block .img {
max-width: 20%;
min-width: 100px;
}
/* scroller */
.scroller .graphic {
padding-top: 400px;
}
.scroll-wrap {
height: 620px;
}
}
@media only screen and (max-width: 1150px){
/** header **/
header .contentwrap {
padding: 0;
padding-top: 60px;
}
.header-menu {
text-align: center;
}
.header-menu li.depth-0 > a {
padding-top: 10px;
padding-bottom: 10px;
}
/** dealer finder **/
.dealers .page-title {
line-height: 1;
margin: 20px 0;
}
.grey .table {
table-layout: auto;
}
#dealers div.half p:last-of-type {
padding-left: 10px;
}
/* map */
.map-wrap {
padding-top: 500px;
}
}
@media only screen and (max-width: 960px) {
/* mob */
#mobile-menu {
display:block;
}
.header-menu {
display:none;
}
.slide-menu {
display:block;
}
.slide-menu-active .site-content-menu-slide {
right: 240px;
}
/* header */
header.top {
padding: 0;
}
header .contentwrap {
padding: 10px 20px;
padding-right: 60px;
min-height: 0;
}
header .logo,
header .right {
position: static;
}
header .logo h1 {
display: inline-block;
width: 200px;
max-width: 100%;
}
header .right {
padding-top: 0;
float: right;
}
/** footer **/
footer .contentwrap {
padding-bottom: 10px;
}
.footer {
display: none;
}
footer .table.bottom,
footer .table.bottom .col {
display: block;
}
footer .table.bottom > div:first-of-type {
text-align: center;
padding-bottom: 10px;
}
#app-link {
margin: 0 auto;
}
.bykeo {
padding-top: 10px;
}
/** home **/
.banners-home .banner-content {
padding: 20px;
}
.banners-home .banner-caption > span {
padding: 10px 20px;
}
/* promo banner */
.banners-home a.banner:not([data-promo_image=""]) {
padding-top: 20px;
}
.banners-home a.banner:not([data-promo_image=""]) .banner-title {
font-size: 18px;
}
.banners-home a.banner:not([data-promo_image=""]) .banner-caption {
font-size: 18px;
}
/* scroller */
.scroll-wrap,
.featured-products .scroller,
.featured-products .product {
height: auto;
}
.scroll-wrap {
padding: 0 40px;
}
.scroll-wrap .prev,
.scroll-wrap .next {
width: 40px;
background-size: 40px 40px;
}
.featured-products .scroller {
overflow-x: hidden;
}
.featured-products .product {
padding-bottom: 10px;
}
.scroller .graphic {
padding-top: 300px;
}
/* clicker */
#sensor .expand {
top: 9%;
left: 35%;
}
#disconnect .expand,
#controller .expand {
left: 57%;
}
/* features */
.features h2,
.features p {
width: 100%;
}
/** bottom banner **/
.banners-page-bottom .banner {
height: auto;
}
.banners-page-bottom .banner-content {
padding: 60px 20px;
}
/** page **/
.page-banner .contentwrap {
height: 200px;
}
.page-banner .col .page-title,
.page-title {
font-size: 50px;
margin-top: 0;
}
/* subs */
.submenu,
.sub-cats {
padding: 0;
}
.sub .menu-icon {
width: 40%;
}
.sub .wrap {
padding-right: 40px;
}
.submenu section:nth-of-type(even) .wrap {
padding-left: 40px;
}
.sub .button.blue {
padding: 15px 20px;
}
/* promo-bar */
.promo-bar .contentwrap {
padding: 0;
padding-top: 15px;
}
.promo-bar .close {
position: relative;
right: 20px;
color: #262526;
margin-top:0;
}
.promo-bar .close:before,
.promo-bar .close:after {
background-color: #262526;
}
.promo-bar .table,
.promo-bar .col,
.promo-bar .col.dark {
display: block;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.promo-bar .col,
.promo-bar .table > div:first-of-type,
.promo-bar .table > div:last-of-type {
padding: 20px;
}
.promo-bar .table > div:first-of-type {
padding-top: 0;
}
/** contact **/
#contact .table,
#contact .col {
display: block;
}
#contact .table > div:last-of-type {
padding-top: 20px;
text-align: center;
}
/** products **/
.product h3 {
font-size: 20px;
}
/* sub-cats */
.sub-cat .image {
width: 50%;
padding-top: 40%;
}
}
@media only screen and (max-width: 760px) {
/* reduce scroll */
.frame .page-title,
.title .page-title,
.page-title,
.page-banner .col .page-title,
.dealers .page-title {
font-size: 40px;
}
.featured-products h2 {
font-size: 30px;
}
.contentwrap {
padding: 20px;
}
.all.title.contentwrap {
padding-bottom: 20px;
}
/** home **/
.t-home header.top {
position: static;
}
/* banner */
.banners-home .banner-stage,
.banners-home .banners-pumps .banner-stage {
padding-top: 350px;
}
.banners-home a.banner {
padding-top: 0;
}
.banners-home a.banner::before {
background: rgba(38,37,38, 0.6);
}
.banners-home .banner-content {
padding: 40px 20px;
padding-top: 10%;
}
.banners-home .banner-content > span {
padding: 0;
}
.banners-home .banner-content > .banner-name {
font-size: 40px;
}
.banners-home .banner-content > .banner-caption {
padding-top: 20px;
}
.banners-home .banner-navigation {
top: auto;
bottom: 0;
width: 50px;
padding: 0;
margin-top:0;
margin-right:0;
}
.banners-home .banner-navigation:before {
width: 40px;
height: 40px;
}
/* blocks */
section.block {
padding: 40px 0;
}
/* home graphic */
.home-menu .home-graphic {
padding-top: 250px;
}
/** cta */
nav.features,
.features .row,
.features .col {
display: block;
width: 100%;
height: auto;
}
.features a {
padding: 40px 20px;
}
.features h2 {
font-size: 20px;
margin-top:0;
}
.features .button {
padding: 15px 20px;
}
/* clicker */
.clicker {
display: none;
}
/** page bottom banner **/
.banners-page-bottom .banner-content {
padding: 40px 20px;
}
.banners-page-bottom .banner-name {
font-size: 40px;
}
.banners-page-bottom .banner-caption > span {
padding: 10px 20px;
}
/* page */
/* subs */
.sub,
.sub div {
display: block;
}
.sub {
position: relative;
margin-bottom: 20px;
}
.sub.has-img {
padding-top: 400px; /* icon */
}
.sub .menu-icon {
position: absolute;
top:0;
left: 50%;
width: 400px;
max-width: 100%;
margin: 0;
margin-left: -200px;
}
.sub .wrap,
.submenu section:nth-of-type(even) .wrap {
padding: 0;
padding-top: 20px;
}
.sub .wrap a {
text-align: center;
width: 100%;
max-width: 100%;
}
.sub h3,
.sub-cat h3 {
margin-bottom: 20px;
}
/** demo **/
.demo.table,
.demo .col,
.demo .col.img {
display: block;
width: 100%;
}
.demo form {
padding-bottom: 0;
margin: 0 auto;
}
.demo .col.img {
display: none;
}
.demo img.icon {
display: block;
width: 20%;
margin-left: 20px;
float: right;
}
.demo.table:after {
content:"";
clear: both;
display: table;
width: 100%;
height: 1px;
}
/** articles **/
article {
display: table;
width: 550px;
margin: 1% auto;
}
/** products **/
.product {
width: 50%;
}
/** pump finder **/
form#pump-finder {
height: auto;
padding: 10% 0;
}
.frame .page-title {
margin-top: 40px;
}
.quantity {
text-align: center;
border: none;
}
.quantity:before,
.quantity:after,
.quantity > div,
input#slidebar {
display: none;
}
input#quantity {
position: static;
height: 60px;
font-size: 30px;
line-height: 60px;
width: 300px;
max-width: 100%;
margin-left: 0;
}
#TDH .table,
#TDH .col {
display: block;
}
#TDH .diagram {
margin: 0 auto;
margin-bottom: 20px;
}
/* matches */
.frame .scroller {
height: auto;
white-space: normal;
overflow-x: auto;
overflow-y: auto;
}
.frame .product {
margin: 10px;
}
.frame .product.active {
display: none;
}
.frame .product.active.match {
display: block;
margin: 10px auto;
}
/** dealer finder **/
.grey {
padding-bottom: 20px;
}
/* map */
#dealers .table > div:first-of-type {
padding-right: 10px;
}
button#search-dealers {
padding-left: 20px;
padding-right: 15px;
}
button.yellow::after {
width: 15px;
margin-left: 5px;
}
p.all-d {
padding-left: 0;
text-align: left;
}
a#all {
position: static;
margin-right: 10px;
}
span.no-dealers {
margin-left: 0;
}
/* table */
#results {
padding: 20px 0;
}
#results tbody {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
#results table tr:first-of-type {
display: none;
}
#results table tr.no.dealer {
display: block;
width: 100%;
}
#results tr.dealer {
display: inline-block;
vertical-align: top;
width: 48%;
padding: 1% 2%;
border: 1px solid #ccc;
box-sizing: border-box;
margin: 0.5%;
}
#results th {
display: none;
}
#results td {
display: block;
padding: 0;
}
#results table,
#results th,
#results td {
border: none;
}
/** footer **/
#app-link {
text-align: center;
}
#app-link .display-right {
margin: 0 auto;
margin-bottom: 5px;
}
}
@media only screen and (max-width: 650px) {
/** reduce vertical **/
.page-body.contentwrap {
padding-bottom: 20px;
}
/** articles **/
article {
width: 100%;
height: auto;
margin: 10px 0;
}
article a.wrap {
padding: 20px;
padding-top: 40px;
}
article a .button {
position: relative;
bottom:0;
z-index:1;
}
/** footer **/
footer .table,
footer .col,
.to-top .table,
.to-top .col,
.to-top a[href="#top"] {
display: block;
text-align: center;
}
.to-top .table > div:nth-of-type(even),
footer .table > div:first-of-type,
.site-links {
text-align: center;
}
#enews {
padding-top: 10px;
}
.enews-wrap.grey {
z-index: 1;
}
.enews-wrap.active {
z-index: 3;
}
.to-top a[href="#top"] {
position: relative;
padding-left: 0;
z-index: 2;
}
/** products **/
/* category */
.category .links {
text-align: center;
margin-left:0;
}
.bottom-img.no-items {
padding-top: 200px;
}
/* sub-cats */
.sub-cat .image,
div.sub-cats > section:nth-of-type(even) .image {
display: block;
margin: 0;
margin-bottom: 20px;
float: none;
}
/** dealer finder */
#dealers .table,
#dealers .col {
display: block;
width: 100%;
}
label.inline {
text-align: left;
padding-left: 20px;
}
.map-wrap {
padding-top: 400px;
}
}
@media only screen and (max-width: 550px) {
/** gallery **/
.kmsgallery.display-default .kmsgallery-thumbnail-image {
width: 48%;
padding-top: 48%;
}
/** header **/
header .logo {
margin: 1px 0;
}
header .right {
display: none;
}
#mobile-menu {
top: 13px;
}
/** footer **/
#app-link a {
text-align: center;
}
#app-link .display-right,
#app-link .display-left {
display: block;
float: none;
margin: 5px auto;
}
.slide-menu .extras {
display: block;
}
/** home **/
/* promo banner */
.banners-home a.banner:not([data-promo_image=""]) .banner-content {
padding-top: 120px;
}
.banners .promo-block .img {
margin: 0 auto;
}
.banners-home a.banner:not([data-promo_image=""]) .banner-name {
font-size: 20px;
}
.banners-home a.banner:not([data-promo_image=""]) .banner-caption {
font-size: 16px;
}
.banners-home a.banner:not([data-promo_image=""]) .banner-caption > span {
padding: 10px;
}
/* features */
.features h2, .features p {
width: 100%;
}
/* scroller */
.scroller .graphic {
padding-top: 200px;
}
.scroller .teaser {
padding-top: 40px;
}
/** forms **/
div.half p,
div.half > div {
width: 100%;
margin: 5px 0;
}
#dealers div.half p {
width: 49%;
}
div.half.not-full > div {
width: 50%;
}
.demo label.time {
line-height: 1;
}
/** products **/
.sub-cat .image {
width: 100%;
padding-top: 50%;
}
.product {
width: 90%;
padding: 10px 0;
}
.product .no-icon {
display: none;
}
.product h3 {
font-size: 30px;
}
/** pump finder **/
.frame .product.active.match {
max-width: 100%;
min-height: 0;
margin: 10px auto;
}
.pump-finder .pf-icon {
width: 50px;
height: 50px;
}
.frame .wrap .page-title {
font-size: 2em;
}
div.buttons {
display: block;
padding-top: 20px;
}
.buttons h2 {
display: block;
margin-bottom: 0;
}
/** dealer finder **/
.inline {
width: 100%;
}
/** promo **/
.promo-bar {
background-color: #262526;
}
.promo-bar .close {
color: #FFF;
}
.promo-bar .close:before,
.promo-bar .close:after {
background-color: #FFF;
}
.promo-bar .table > div:first-of-type {
display: none; /* yellow part gone */
}
.promo-bar .table > div:last-of-type {
padding-top: 0; /* main bit full width */
padding-bottom: 20px;
}
.promo-bar .icon {
width: 60px;
height: 60px;
margin-right: 2%;
margin-bottom: 5px;
}
.promo-bar .wrap {
width: auto;
}
.promo-bar .highlight {
margin-bottom: 5px;
}
.promo-bar h2 {
font-size: 20px;
}
}
@media only screen and (max-width: 450px){
/** reduce text again **/
.frame .page-title,
.title .page-title,
.page-title,
.featured-products h2,
.promo-bar h2,
.page-banner .col .page-title,
.dealers .page-title,
.banners-home .banner-content > .banner-name {
font-size: 2em;
}
.banners-home .banner-title {
font-size: 18px;
}
/** home **/
.featured-products .contentwrap {
padding: 20px 0px;
}
.featured-products h2 {
padding: 0px 20px;
box-sizing: border-box;
}
/** dealer finder **/
.map-wrap {
padding-top: 250px;
}
/* form */
#dealers div.half p {
width: 100%;
margin: 5px 0;
}
#dealers div.half p:last-of-type {
text-align: center;
padding-left: 0;
}
button#search-dealers {
width: 100%;
padding: 15px 0;
}
/* table */
#results tr.dealer {
display: block;
width: 100%;
margin: 5px 0;
}
/** page **/
.sub.has-img {
padding-top: 200px;
}
.sub .menu-icon {a
left:0;
width: 100%;
margin-left: 0;
}
.sub .menu-icon > a {
padding-top: 200px;
}
}
@media only screen and (max-width: 350px){
a {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.slide-menu li a {
overflow-wrap: normal;
word-wrap: normal;
-ms-word-break: normal;
word-break: normal;
word-break: normal;
}
/** home **/
.featured-products .teaser .dealer {
position: relative;
}
.scroller .teaser {
padding-top: 4%;
}
/** buttons **/
.sub .button.blue,
.grey button,
button.yellow {
width: 100%;
}
.grey button,
button.yellow {
padding: 15px 3%;
}
/** demo **/
.demo img.icon {
width: 70px;
margin: 0 auto;
float: none;
}
/** promo **/
.promo-bar .close span {
display: none;
}
.promo-bar .wrap {
text-align: center;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}