/* ------------------------------------------------------------------------------------------------------ CSS Reset - http://meyerweb.com/eric/tools/css/reset/ ------------------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ------------------------------------------------------------------------------------------------------ Fonts ------------------------------------------------------------------------------------------------------*/ @font-face { font-family: "Neo Sans W01 Light734947"; src: url("../fonts/681fbcbc-1907-441a-893a-fc00ecea0267.eot?#iefix"); src: url("../fonts/681fbcbc-1907-441a-893a-fc00ecea0267.eot?#iefix") format("eot"), url("../fonts/e0bd859d-12b1-41c1-9b67-003688d01609.woff2") format("woff2"), url("../fonts/a21a792c-051c-4059-8719-ecc8749c99a6.woff") format("woff"), url("../fonts/feee8e94-28a0-416a-88d3-db3912effbc4.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Neo Sans W01"; src: url("../fonts/2959d89a-a257-4ce7-9cda-63e00f275369.eot?#iefix"); src: url("../fonts/2959d89a-a257-4ce7-9cda-63e00f275369.eot?#iefix") format("eot"), url("../fonts/a53085dd-4493-4430-8349-fd63d6f3e5bc.woff2") format("woff2"), url("../fonts/a32c3a17-3242-461c-a048-ca8e775582b1.woff") format("woff"), url("../fonts/97316a7d-9db1-4dc1-bd87-e24103d88a81.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Neo Sans W01 Bold"; src: url("../fonts/a0b14394-4dd9-4421-98cf-dfe2f8dc6251.eot?#iefix"); src: url("../fonts/a0b14394-4dd9-4421-98cf-dfe2f8dc6251.eot?#iefix") format("eot"), url("../fonts/82a34ab2-92d9-48c4-989d-50d5bd54fdd1.woff2") format("woff2"), url("../fonts/ecedcc38-3aec-48a5-a693-fbfac59dd0ed.woff") format("woff"), url("../fonts/2974017c-634d-4238-9381-e3f0b95a150c.ttf") format("truetype"); font-display: swap; } /* ------------------------------------------------------------------------------------------------------ colours ------------------------------------------------------------------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------ Mixins ------------------------------------------------------------------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------ Functions ------------------------------------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------- Font sizes are to be in REM unites Target Size / Base Size = Value ----------------------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; font-size: 16px; } body { font-family: "Neo Sans W01", sans-serif; line-height: 1.45; color: #555555; } h1 { font-family: "Neo Sans W01 Bold", sans-serif; font-size: 2.25rem; line-height: 1.2; margin-bottom: 15px; } h2 { font-family: "Neo Sans W01 Bold", sans-serif; font-size: 1.5rem; line-height: 1.2; margin-bottom: 15px; } h3 { font-family: "Neo Sans W01 Bold", sans-serif; font-size: 1.125rem; line-height: 1.2; margin-bottom: 15px; } h4 { font-family: "Neo Sans W01 Bold", sans-serif; font-size: 0.9375rem; line-height: 1.2; margin-bottom: 15px; } h5 { font-family: "Neo Sans W01 Bold", sans-serif; font-size: 0.75rem; margin-bottom: 15px; } p { font-size: 1rem; margin-bottom: 15px; } li { font-size: 1rem; margin-bottom: 5px; } ul, ol { margin-left: 30px; } ul { list-style-type: disc; list-style-position: outside; margin-bottom: 15px; } ol { list-style-type: decimal; list-style-position: outside; margin-bottom: 15px; } abbr, acronym { border-bottom-width: 0; } strong { font-weight: bold; } em { font-style: italic; } /* ------------------------------------------------------------------------------------------------------ Links styling ------------------------------------------------------------------------------------------------------*/ /* General link styling */ a { color: #555555; text-decoration: underline; -webkit-transition: all 250ms; transition: all 250ms; } a:link, a:active, a:visited { color: #555555; } a:hover, a:focus { color: #7b7b7b; } .rte b { font-family: "Neo Sans W01 Bold", sans-serif; } /* ------------------------------------------------------------------------------------------------------ General Styles ------------------------------------------------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } article, aside, details, figure, footer, header, hgroup, nav, section { display: block; } img { max-width: 100%; } /* main content header and section over hidden to stop floats breaking out */ #main-content header, #main-content section { overflow: hidden; } /* Gravity forms spinner styling (Uncomment if needed */ .gform_ajax_spinner { margin-left: 20px; /* give it some space from the Submit button */ border: 4px solid rgba(255, 255, 255, 0.3); /* match with border-left */ border-left: 4px solid #3CA542; -webkit-animation: spinner 1.1s infinite linear; animation: spinner 1.1s infinite linear; border-radius: 50%; width: 30px; /* match with height for a circle */ height: 30px; } @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #mibew-agent-button { display: none !important; } @media screen and (min-width: 1141px) { #mibew-agent-button { position: fixed; top: 120px; right: 0; display: block !important; width: 50px; height: 55px; box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3); z-index: 5; } } div.mibew-chat-wrapper { z-index: 5 !important; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* ------------------------------------------------------------------------------------------------------ Form styling ------------------------------------------------------------------------------------------------------*/ /* Search Form Styling */ .searchform label, .searchform input[type="text"] { display: block; font-size: 16px; margin-bottom: 5px; } .searchform input[type="submit"] { display: inline-block; border: none; color: #ffffff; background-color: #000000; border-radius: 5px; padding: 10px; } .searchform input[type="submit"]:hover { color: #ffffff; background-color: #b1b1b1; } /* Gravity forms */ /* subscribe form */ body #gform_wrapper_1 div.validation_error { display: none; } body #gform_wrapper_1 .gfield_required { display: none; } body #gform_wrapper_1 .gform_body .gform_fields .gfield_error { background: transparent; border: none; background: transparent; padding-top: 0; padding-bottom: 0; } body #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required div.gfield_description { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } body #gform_wrapper_1 form { position: relative; margin: 20px 0; } body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email], body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea, body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel] { background: #ffffff; box-shadow: none; border: 1px solid #ffffff; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 15px 20px; font-family: "Neo Sans W01 Light734947", sans-serif; font-size: 18px; font-size: 1.125rem; margin: 0; } body #gform_wrapper_1 input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { background: #ffffff; box-shadow: none; border: 1px solid #ffffff; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 15px 20px; font-family: "Neo Sans W01 Light734947", sans-serif; font-size: 18px; font-size: 1.125rem; } body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type="checkbox"] { position: absolute; opacity: 0; } body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type="checkbox"] + label { display: block; position: relative; cursor: pointer; padding: 0; padding-left: 50px; } body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type="checkbox"] + label:before { content: ''; position: absolute; top: 2px; left: 0; display: block; width: 27px; height: 27px; background: #ffffff; border: 1px solid #ffffff; } body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type="checkbox"]:focus + label:before { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); } body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type="checkbox"]:disabled + label { color: #b1b1b1; cursor: auto; } body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type="checkbox"]:disabled + label:before { box-shadow: none; background: #e4e4e4; } body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type="checkbox"]:checked + label:after { content: ''; position: absolute; left: 0; top: 2px; width: 27px; height: 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27'%3E%3Cpath fill='%23555' d='M10.6 21l-6.8-6.5 2.1-2.1 4.6 4.4L21 6l2.2 2.1z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } body #gform_wrapper_1 .top_label .gfield_label, body #gform_wrapper_1 legend.gfield_label { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } body #gform_wrapper_1 .gform_footer { padding: 0; } @media only screen and (min-width: 1700px) { body #gform_wrapper_1 .gform_footer { width: auto; left: 100%; } } @media only screen and (min-width: 641px) { body #gform_wrapper_1 .top_label li.gfield.gf_left_half, body #gform_wrapper_1 .top_label li.gfield.gf_right_half { display: block; width: 100%; max-width: 100%; } } @media only screen and (min-width: 1440px) { body #gform_wrapper_1 .top_label li.gfield.gf_left_half, body #gform_wrapper_1 .top_label li.gfield.gf_right_half { display: inline-block; vertical-align: top; width: 50%; padding-right: 30px; float: none; } } body #gform_wrapper_1 .top_label li.gfield.gf_left_half .ginput_container:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm):not(.ginput_container_date):not(.ginput_quantity):not(.datepicker), body #gform_wrapper_1 .top_label li.gfield.gf_right_half .ginput_container:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm):not(.ginput_container_date):not(.ginput_quantity):not(.datepicker) { margin: 0; } body #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required div.ginput_container, body #gform_wrapper_1 li.gfield.gfield_error.gfield_contains_required label.gfield_label { margin: 0; } body #gform_wrapper_1 .gform_footer input[type=submit] { padding: 15px 20px; background: #3CA542; border: none; color: #ffffff; font-family: "Neo Sans W01", sans-serif; font-size: 20px; font-size: 1.25rem; -webkit-transition: all 250ms ease; transition: all 250ms ease; cursor: pointer; } body #gform_wrapper_1 .gform_footer input[type=submit]:hover, body #gform_wrapper_1 .gform_footer input[type=submit]:focus { background: #35923b; } body #gform_wrapper_1 li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), body #gform_wrapper_1 li.gfield_error textarea { border-color: #DD1840; background: #fbdae1; } body #gform_wrapper_1 .gform_fields .gfield_error input[type="checkbox"] + label:before { border-color: #DD1840 !important; background: #fbdae1 !important; } @media only screen and (min-width: 641px) { body #gform_wrapper_1 .top_label li.gfield.gfield_error.gf_left_half { margin-right: 0; } } body #gform_wrapper_1 ul li.gfield, body #gform_wrapper_1 .gform_footer { margin-top: 30px; } body #gform_wrapper_1 .gform_ajax_spinner { display: block; margin: 0 auto; } @media only screen and (min-width: 641px) { body #gform_wrapper_1 .gform_ajax_spinner { display: inline-block; vertical-align: middle; position: relative; top: -2px; } } @media only screen and (min-width: 1700px) { body #gform_wrapper_1 .gform_ajax_spinner { position: absolute; top: 50%; left: calc(100% + 12px); margin-top: -15px; } } /* ------------------------------------------------------------------------------------------------------ Button styles ------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------- Custom Numbered Pagination --------------------------------------------------------------------*/ .custom-pagination { display: block; margin: 0 0 0 0; padding: 15px 15px 15px 15px; text-align: center; } .custom-pagination ul { display: block; margin: 0 0 0 0; } .custom-pagination ul li { display: inline-block; } .custom-pagination ul li a { display: block; color: #fff; text-decoration: none; background: #0060A9; cursor: pointer; padding: 15px 20px; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .custom-pagination ul li a span { -webkit-transition: all 250ms ease; transition: all 250ms ease; } .custom-pagination ul li a span:not(.next):not(.prev) { font-size: 20px; line-height: 1; } .custom-pagination ul li a:hover { background: #005290; } .custom-pagination ul li a:hover .prev span { margin: 0 8px 0 0px; } .custom-pagination ul li a:hover .next span { margin: 0 0 0 8px; } .custom-pagination ul li a .prev span { margin: 0 0 0 8px; } .custom-pagination ul li a .next span { margin: 0 8px 0 0; } .custom-pagination ul li.active a { background: #005290; } .custom-pagination ul li.active a:hover { background: #005290; } /* ------------------------------------------------------------------------------------------------------ Tables styles ------------------------------------------------------------------------------------------------------*/ /* Table Styling */ table { width: 100%; margin-bottom: 15px; } table thead { color: #ffffff; } table tbody tr:nth-child(odd) { background-color: #f6f6f6; } table tbody tr:nth-child(even) { background-color: #ffffff; } table th, table td { padding: 10px; } table th { background-color: #b1b1b1; font-weight: bold; } @media screen and (max-width: 830px) { table { /* Force table to not be like tables anymore */ /* Hide table headers (but not display: none;, for accessibility) */ /* Label the data - This is needed, you will need to add your own labels for each table. This section of code will need to be moved the styling for that page or post */ } table table, table thead, table tbody, table th, table td, table tr { display: block; } table thead tr { position: absolute; top: -9999px; left: -9999px; } table td { /* Behave like a "row" */ border: none; position: relative; padding-left: 50%; } table td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 10px; width: 45%; padding-right: 10px; white-space: nowrap; } } /* ------------------------------------------------------------------------------------------------------ Animations ------------------------------------------------------------------------------------------------------*/ @-webkit-keyframes down { 0% { -webkit-transform: translateY(0); } 55% { -webkit-transform: translateY(9px); } 65% { -webkit-transform: translateY(9px); } 100% { -webkit-transform: rotate(45deg); } } @-webkit-keyframes downrev { 0% { -webkit-transform: rotate(45deg); } 35% { -webkit-transform: rotate(0deg); } 45% { -webkit-transform: translateY(0px); } 100% { -webkit-transform: translateY(0px); } } @-webkit-keyframes fade { 0% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes faderev { 0% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes up { 0% { -webkit-transform: translateY(0); } 55% { -webkit-transform: translateY(-9px); } 65% { -webkit-transform: translateY(-9px); } 100% { -webkit-transform: rotate(-45deg); } } @-webkit-keyframes uprev { 0% { -webkit-transform: rotate(-45deg); } 35% { -webkit-transform: rotate(0deg); } 45% { -webkit-transform: translateY(0px); } 100% { -webkit-transform: translateY(0px); } } .down { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); -webkit-animation: downrev 0.9s ease forwards; animation: downrev 0.9s ease forwards; } .downstart { -webkit-animation: down 0.7s ease forwards; animation: down 0.7s ease forwards; } .fade { -webkit-animation: faderev 0.9s ease forwards; animation: faderev 0.9s ease forwards; } .fadestart { -webkit-animation: fade 0.7s ease forwards; animation: fade 0.7s ease forwards; } .up { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); -webkit-animation: uprev 0.9s ease forwards; animation: uprev 0.9s ease forwards; } .upstart { -webkit-animation: up 0.7s ease forwards; animation: up 0.7s ease forwards; } .loading-animation { background-image: url("/wp-content/themes/electrolube/assets/images/spinner.svg"); width: 200px; height: 200px; background-position: center; background-size: cover; background-repeat: no-repeat; display: none; position: absolute; top: 50px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (min-width: 768px) { .loading-animation { top: 33%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } /* ========================================================= Comments list styling ========================================================= */ #comments { /* ========================================================= Comments list ========================================================= */ /* ========================================================= Comments form ========================================================= */ } #comments ol.comment-list { list-style: none; margin: 0 0 10px 0; padding: 0; text-indent: 0; } #comments ol.comment-list li.comment { border-bottom: 1px solid #e4e4e4; padding: 15px; } #comments ol.comment-list li.comment .comment-body { overflow: hidden; } #comments ol.comment-list li.comment div.vcard { font-weight: bold; } #comments ol.comment-list li.comment div.vcard img.avatar { border: 5px solid #b1b1b1; float: right; margin: 0 0 20px 20px; } #comments ol.comment-list li.comment div.comment-meta { font-size: 11px; } #comments ol.comment-list li.comment div.comment-meta a { color: #b1b1b1; } #comments ol.comment-list li.comment p { font-size: 1rem; } #comments ol.comment-list li.comment ul { font-size: 1rem; list-style: none; margin: 0 0 0 20px; } #comments ol.comment-list li.comment div.reply { font-size: 1rem; } #comments ol.comment-list li.comment div.reply a { font-weight: bold; } #comments ol.comment-list li.comment ol.children { list-style: none; margin: 12px; text-indent: 0; } #comments ol.comment-list li.comment ol.children li.depth-2 { border-left: 5px solid #e4e4e4; margin: 0 0 10px 10px; } #comments ol.comment-list li.comment ol.children li.depth-3 { border-left: 5px solid #e4e4e4; margin: 0 0 10px 10px; } #comments ol.comment-list li.comment ol.children li.depth-4 { border-left: 5px solid #e4e4e4; margin: 0 0 10px 10px; } #comments ol.comment-list li.even { background: #ffffff; } #comments ol.comment-list li.odd { background: #f6f6f6; } #comments ol.comment-list li.parent { border-left: 5px solid #e4e4e4; } #comments #respond { background: #e4e4e4; padding: 10px; box-sizing: border-box; /* Highlight active form field */ } #comments #respond input[type=text], #comments #respond textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: none; } #comments #respond input[type=text]:focus, #comments #respond textarea:focus { box-shadow: 0 0 5px #51cbee; margin: 5px 1px 3px 0px; border: 1px solid #51cbee; } #comments #commentform input, #comments #commentform label, #comments #commentform textarea { display: block; width: 100%; box-sizing: border-box; resize: none; } #comments #commentform .form-submit { display: inline-block; } #comments #commentform #submit { display: inline-block; border: none; color: #ffffff; background-color: #000000; border-radius: 5px; padding: 10px; } #comments #commentform #submit:hover { color: #ffffff; background-color: #b1b1b1; } .social-media__list { list-style: none; margin: 0; padding: 0; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .social-media__item { display: block; margin-right: 15px; } .social-media__link { display: block; } .social-media__link:hover svg, .social-media__link:hover img, .social-media__link:hover .social-media__icon, .social-media__link:focus svg, .social-media__link:focus img, .social-media__link:focus .social-media__icon { -webkit-transform: scale(0.9); transform: scale(0.9); } .social-media svg, .social-media img, .social-media__icon { display: block; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .icon-button { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 10px 15px; -webkit-transition: background-color 250ms ease; transition: background-color 250ms ease; text-decoration: none; cursor: pointer; } .ie .icon-button { height: 60px; } .icon-button:link, .icon-button:active, .icon-button:visited { color: inherit; text-decoration: none; } .icon-button:hover, .icon-button:focus { color: inherit; text-decoration: none; } .icon-button--light { color: #555555; background-color: #ffffff; } .icon-button--light:link, .icon-button--light:active, .icon-button--light:visited { color: #555555; } .icon-button--light .icon-button__label { color: #555555; } .icon-button--light:hover, .icon-button--light:focus { background-color: #3CA542; color: #ffffff; } .icon-button--light:hover .icon-button__label, .icon-button--light:focus .icon-button__label { color: #ffffff; } .icon-button--light:hover .icon-button__img, .icon-button--light:focus .icon-button__img { fill: #ffffff; } .icon-button--orange { color: #555555; background-color: #F6A900; } .icon-button--orange:link, .icon-button--orange:active, .icon-button--orange:visited { color: #555555; } .icon-button--orange:hover, .icon-button--orange:focus { background-color: #ffb411; } .icon-button__img { position: relative; width: 40px; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .icon-button__img--arrow { width: 19px; } .icon-button__label { font-size: 18px; font-size: 1.125rem; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .icon-button > :first-child { margin-right: 15px; } .icon-button:hover > :last-child, .icon-button:focus > :last-child { -webkit-transform: translateX(-3px); transform: translateX(-3px); } .category-list { list-style: none; margin: 0; padding: 0; } @media screen and (min-width: 480px) { .category-list { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } } @media screen and (min-width: 640px) { .category-list { margin-left: 5px; margin-right: 0; } } .category-list__item { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 10px 0; width: 100%; } @media screen and (min-width: 480px) { .category-list__item { width: calc(50% - 30px); margin-left: 15px; margin-right: 15px; } } @media screen and (min-width: 640px) { .category-list__item { width: auto; margin-left: 0; } } @media screen and (min-width: 640px) { .category-list__item { margin-bottom: 40px; } } @media screen and (min-width: 768px) { .category-list__item { margin-right: 30px; } } .category-list__link { display: block; padding-left: 25px; padding-right: 30px; font-family: "Neo Sans W01 Bold", sans-serif; font-size: 15px; font-size: 0.9375rem; text-decoration: none; } @media screen and (min-width: 375px) { .category-list__link { font-size: 18px; font-size: 1.125rem; } } .category-list__link:link, .category-list__link:active, .category-list__link:visited { color: #ffffff; text-decoration: none; } .category-list__link:hover .category-list__indicator, .category-list__link:focus .category-list__indicator { -webkit-transform: translateX(-2px); transform: translateX(-2px); } .category-list__link:hover .category-list__arrow, .category-list__link:focus .category-list__arrow { right: 0; opacity: 1; } @media screen and (min-width: 768px) { .category-list__link { font-size: 18px; font-size: 1.125rem; } } .category-list__link--blue .category-list__indicator { background-color: #0060A9; } .category-list__link--yellow .category-list__indicator { background-color: #F9E700; } .category-list__link--orange .category-list__indicator { background-color: #F6A900; } .category-list__link--red .category-list__indicator { background-color: #DD1840; } .category-list__link--green .category-list__indicator { background-color: #3CA542; } .category-list__link--purple .category-list__indicator { background-color: #A5137F; } .category-list__link--white .category-list__indicator { background-color: #ffffff; } .category-list__label { display: inline-block; -webkit-transition: color 250ms ease; transition: color 250ms ease; } @media screen and (min-width: 480px) { .category-list__label { max-width: 150px; } } .category-list__indicator { position: absolute; top: 0; left: 0; display: block; width: 8px; height: 100%; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .category-list__arrow { position: absolute; top: calc(50% + 1px); right: -11px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 15px; height: 15px; -webkit-transition: all 250ms ease; transition: all 250ms ease; opacity: 0; } @media screen and (min-width: 480px) { .category-list__arrow { width: 23px; height: 24px; } } .sector-list { list-style: none; margin: 0; padding: 0; } .sector-list__item { position: relative; margin: 10px 0; } .sector-list__item:before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: #555555; } .sector-list__link { display: inline-block; position: relative; padding-right: 30px; padding-left: 22px; font-family: "Neo Sans W01 Bold", sans-serif; font-size: 18px; font-size: 1.125rem; text-decoration: none; } .sector-list__link:link, .sector-list__link:active, .sector-list__link:visited { text-decoration: none; } .sector-list__link:hover .sector-list__arrow, .sector-list__link:focus .sector-list__arrow { right: 0; opacity: 1; } .sector-list__arrow { position: absolute; top: calc(50% + 1px); right: -11px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 23px; height: 24px; -webkit-transition: all 250ms ease; transition: all 250ms ease; opacity: 0; } /*-------------------------------------------------------------------- Carousel sectors - Home page --------------------------------------------------------------------*/ .sectors-carousel { margin-right: -20px; } @media screen and (min-width: 1720px) { .sectors-carousel { margin-right: 0; } } .sectors-carousel .slick-slide { margin: 0 5px; } .sectors-carousel .slick-slide .sectors-carousel__label { opacity: 0; } .sectors-carousel .slick-list { margin: 0 -5px; } .sectors-carousel .slick-slider { overflow: hidden; } .sectors-carousel .slick-active .sectors-carousel__label { opacity: 1; } @media screen and (min-width: 1600px) { .sectors-carousel .slick-active .sectors-carousel__label { opacity: 0; } } .sectors-carousel__item { position: relative; overflow: hidden; } .sectors-carousel__inner { display: block; position: relative; } .sectors-carousel__inner:before { display: block; content: ''; width: 100%; padding-top: 67.5471698113%; } .sectors-carousel__img-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-size: cover; background-repeat: no-repeat; background-position: center; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .sectors-carousel__img-wrapper { background-image: unset !important; } } .sectors-carousel__img { display: none; width: 100%; max-width: none; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 250ms ease; transition: all 250ms ease; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .sectors-carousel__img { display: block; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } } /*-------------------------------------------------------------------- Carousel Section - found at the bottom of product / article pages --------------------------------------------------------------------*/ .page-carousel-section { position: relative; display: block; margin: 0 0 0 0; padding: 20px 0 60px 0; } @media screen and (max-width: 580px) { .page-carousel-section { padding: 20px 0 30px 0; } } @media screen and (max-width: 480px) { .page-carousel-section { padding: 20px 0 20px 0; } } .page-carousel-section__wrapper { position: relative; margin: 0 auto 0 auto; width: 100%; max-width: 1700px; } @media screen and (max-width: 1700px) { .page-carousel-section__wrapper { padding: 0 2.5% 0 2.5%; } } .page-carousel-section__carousel-header { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 26px 0; } .page-carousel-section__carousel-header .page-carousel-section__carousel-header-icon { display: inline-block; margin: 0 15px 0 0; vertical-align: middle; width: 42px; height: 31px; } @media screen and (max-width: 420px) { .page-carousel-section__carousel-header .page-carousel-section__carousel-header-icon { margin: 0 0 0 0; } } .page-carousel-section__carousel-header h3 { display: inline-block; vertical-align: middle; margin: 0 0 0 0; padding: 0 28px 0 0; font-size: 18px; border-right: 8px solid #979797; } @media (min-width: 320px) { .page-carousel-section__carousel-header h3 { font-size: calc(18px + 6 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-carousel-section__carousel-header h3 { font-size: 24px; } } .page-carousel-section__carousel-header h3.blue { border-right: 8px solid #0060A9; } .page-carousel-section__carousel-header h3.green { border-right: 8px solid #3CA542; } .page-carousel-section__carousel-header h3.yellow { border-right: 8px solid #F9E700; } .page-carousel-section__carousel-header h3.orange { border-right: 8px solid #F6A900; } .page-carousel-section__carousel-header h3.red { border-right: 8px solid #DD1840; } .page-carousel-section__carousel-header h3.purple { border-right: 8px solid #A5137F; } .page-carousel-section__carousel-header h3.grey { border-right: 8px solid #979797; } @media screen and (max-width: 420px) { .page-carousel-section__carousel-header h3 { display: none; } } .page-carousel-section__carousel-header p { display: inline-block; font-family: "Neo Sans W01 Light734947", sans-serif; margin: 4px 0 0 0; padding: 0 25px 0 17px; vertical-align: middle; font-size: 16px; -webkit-transition: padding 0.25s ease; transition: padding 0.25s ease; } @media (min-width: 320px) { .page-carousel-section__carousel-header p { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-carousel-section__carousel-header p { font-size: 20px; } } @media screen and (max-width: 420px) { .page-carousel-section__carousel-header p { padding: 0 15px 0 7px; } } .page-carousel-section__carousel-header .page-carousel-section__carousel-header-arrow { display: inline-block; vertical-align: middle; margin: 0 0 0 0; padding: 0 0 0 0; width: 27px; height: 26px; } .page-carousel-section__carousel-header a { display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; text-decoration: none; } .page-carousel-section__carousel-header a:hover { text-decoration: none; } .page-carousel-section__carousel-header a:hover h3.blue { color: #0060A9; } .page-carousel-section__carousel-header a:hover h3.green { color: #3CA542; } .page-carousel-section__carousel-header a:hover h3.yellow { color: #F9E700; } .page-carousel-section__carousel-header a:hover h3.orange { color: #F6A900; } .page-carousel-section__carousel-header a:hover h3.red { color: #DD1840; } .page-carousel-section__carousel-header a:hover h3.purple { color: #A5137F; } .page-carousel-section__carousel-header a:hover h3.grey { color: #979797; } .page-carousel-section__carousel-header a:hover p { padding: 0 35px 0 17px; } @media screen and (max-width: 420px) { .page-carousel-section__carousel-header a:hover p { padding: 0 25px 0 7px; } } .page-carousel-section__carousel { position: relative; margin: 0 0 0 0; padding: 0 0 0 0; display: block; } .page-carousel-section__carousel .slick-track { margin-left: 0; margin-right: 0; } .page-carousel-section__slide { width: 33.3333%; max-width: 570px; padding: 5px 5px 5px 5px; margin: 0 0 0 0; cursor: pointer; overflow: hidden; display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; height: 270px; } .page-carousel-section__slide-wrapper { position: relative; display: block; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; overflow: hidden; } .page-carousel-section__slide-wrapper img.page-carousel-section__featured-image { position: relative; display: block; margin: 0 0 0 0; width: 100%; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; height: 100%; -o-object-fit: cover; object-fit: cover; } .page-carousel-section__slide-wrapper h4 { display: block; position: absolute; margin: 0 0 0 0; color: #ffffff; font-size: 16px; padding: 20px 20px 20px 20px; top: 0; left: 0; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } @media (min-width: 320px) { .page-carousel-section__slide-wrapper h4 { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-carousel-section__slide-wrapper h4 { font-size: 20px; } } .page-carousel-section__slide-wrapper:hover { text-decoration: none; } .page-carousel-section__slide-wrapper:hover img.page-carousel-section__featured-image { -webkit-transform: scale(1.1); transform: scale(1.1); } .page-carousel-section__slide-wrapper:hover h4.blue { color: #0060A9; } .page-carousel-section__slide-wrapper:hover h4.green { color: #3CA542; } .page-carousel-section__slide-wrapper:hover h4.yellow { color: #F9E700; } .page-carousel-section__slide-wrapper:hover h4.orange { color: #F6A900; } .page-carousel-section__slide-wrapper:hover h4.red { color: #DD1840; } .page-carousel-section__slide-wrapper:hover h4.purple { color: #A5137F; } .page-carousel-section__slide-wrapper:hover h4.grey { color: #979797; } .page-carousel-section__slide-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.8; } .page-carousel-section__event-details { position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; justify-items: flex-start; -webkit-align-content: flex-start; align-content: flex-start; top: 0; left: 0; width: 100%; height: 100%; padding: 20px 20px 20px 20px; } .page-carousel-section__event-details h4 { position: relative; padding: 0 0 0 0; margin: 0 0 3px 0; width: 100%; } .page-carousel-section__event-details p { color: #ffffff; margin: 0 0 5px 0; width: 100%; } @media screen and (max-width: 370px) { .page-carousel-section__event-details p.event-stand { display: none; } } .page-carousel-section__event-details img { display: block; width: 100%; max-width: 205px; margin: auto 0 0 0; } @media screen and (max-width: 920px) { .page-carousel-section__event-details img { display: none; } } .page-carousel-section__play-button { position: absolute; width: 92px; height: 66px; margin: 0 0 0 0; padding: 0 0 0 0; top: 50%; right: 50%; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } @media screen and (max-width: 980px) { .page-carousel-section__play-button { width: 82px; height: 76px; } } @media screen and (max-width: 830px) { .page-carousel-section__play-button { width: 62px; height: 56px; } } @media screen and (max-width: 430px) { .page-carousel-section__play-button { top: 70%; } } @media screen and (max-width: 360px) { .page-carousel-section__play-button { width: 42px; height: 36px; } } .electrolube-colours { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; } .electrolube-colours__colour { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 0 0 0; padding: 0 0 0 0; height: 10px; } .electrolube-colours__colour--blue { background-color: #0060A9; } .electrolube-colours__colour--green { background-color: #3CA542; } .electrolube-colours__colour--yellow { background-color: #F9E700; } .electrolube-colours__colour--orange { background-color: #F6A900; } .electrolube-colours__colour--red { background-color: #DD1840; } .electrolube-colours__colour--purple { background-color: #A5137F; } /* ------------------------------------------------ Top Panel for Contacts and Distributors ---------------------------------------------------*/ .error404 .top-panel, .post-type-archive-distributor .top-panel, .post-type-archive-contact .top-panel, .page-template-page-contact .top-panel { position: relative; display: block; margin: 0 0 30px 0; padding: 0 0 0 0; background-color: #E8E8E9; width: 100%; } .error404 .top-panel__wrapper, .post-type-archive-distributor .top-panel__wrapper, .post-type-archive-contact .top-panel__wrapper, .page-template-page-contact .top-panel__wrapper { display: block; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 100%; max-width: 1700px; padding-top: 30px; padding-bottom: 30px; } @media (min-width: 320px) { .error404 .top-panel__wrapper, .post-type-archive-distributor .top-panel__wrapper, .post-type-archive-contact .top-panel__wrapper, .page-template-page-contact .top-panel__wrapper { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .error404 .top-panel__wrapper, .post-type-archive-distributor .top-panel__wrapper, .post-type-archive-contact .top-panel__wrapper, .page-template-page-contact .top-panel__wrapper { padding-top: 100px; padding-bottom: 100px; } } @media screen and (max-width: 1700px) { .error404 .top-panel__wrapper, .post-type-archive-distributor .top-panel__wrapper, .post-type-archive-contact .top-panel__wrapper, .page-template-page-contact .top-panel__wrapper { padding-left: 15px; padding-right: 15px; } } @media screen and (max-width: 1700px) and (min-width: 320px) { .error404 .top-panel__wrapper, .post-type-archive-distributor .top-panel__wrapper, .post-type-archive-contact .top-panel__wrapper, .page-template-page-contact .top-panel__wrapper { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media screen and (max-width: 1700px) and (min-width: 1700px) { .error404 .top-panel__wrapper, .post-type-archive-distributor .top-panel__wrapper, .post-type-archive-contact .top-panel__wrapper, .page-template-page-contact .top-panel__wrapper { padding-left: 50px; padding-right: 50px; } } .error404 .top-panel h1, .post-type-archive-distributor .top-panel h1, .post-type-archive-contact .top-panel h1, .page-template-page-contact .top-panel h1 { font-size: 22px; margin: 0 0 0 0; font-family: "Neo Sans W01 Bold", sans-serif; } @media (min-width: 320px) { .error404 .top-panel h1, .post-type-archive-distributor .top-panel h1, .post-type-archive-contact .top-panel h1, .page-template-page-contact .top-panel h1 { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .error404 .top-panel h1, .post-type-archive-distributor .top-panel h1, .post-type-archive-contact .top-panel h1, .page-template-page-contact .top-panel h1 { font-size: 40px; } } /* ------------------------------------------------ Country AJAX Select Dropdown Menu. ---------------------------------------------------*/ .countries, .countries-no-ajax { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 0 auto; padding: 0 15px; padding-left: 15px; padding-right: 15px; margin-bottom: 1.25rem; max-width: 1700px; } @media (min-width: 320px) { .countries, .countries-no-ajax { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .countries, .countries-no-ajax { padding-left: 50px; padding-right: 50px; } } @media (min-width: 1730px) { .countries, .countries-no-ajax { padding-left: 0; padding-right: 0; } } .countries .is-active, .countries-no-ajax .is-active { display: none; } .countries__arrow, .countries-no-ajax__arrow { margin: 0 25px 0 0; width: 27px; height: 26px; } @media screen and (max-width: 420px) { .countries__arrow, .countries-no-ajax__arrow { display: none; } } .countries__dropdown, .countries-no-ajax__dropdown { position: relative; display: inline-block; } @media screen and (max-width: 420px) { .countries__dropdown, .countries-no-ajax__dropdown { display: block; width: 100%; } } .countries__dropdown-label, .countries-no-ajax__dropdown-label { display: inline-block; font-size: 16px; } @media (min-width: 320px) { .countries__dropdown-label, .countries-no-ajax__dropdown-label { font-size: calc(16px + 6 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .countries__dropdown-label, .countries-no-ajax__dropdown-label { font-size: 22px; } } @media screen and (max-width: 420px) { .countries__dropdown-label, .countries-no-ajax__dropdown-label { display: none; } } .countries__selector, .countries-no-ajax__selector { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; position: relative; width: 200px; line-height: 25px; margin-right: 30px; padding: 12px 40px 12px 44px; cursor: pointer; border: none; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; border-radius: 0; text-transform: uppercase; background-color: transparent; font-family: "Neo Sans W01", sans-serif; outline: none; color: #555555; font-size: 0.875rem; } @media screen and (max-width: 420px) { .countries__selector, .countries-no-ajax__selector { display: -webkit-box; display: -webkit-flex; display: flex; width: 100%; text-align: left; margin-right: 0; } } .countries__selector:after, .countries-no-ajax__selector:after { content: ''; position: absolute; top: 50%; right: 15px; display: block; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 450ms ease; transition: all 450ms ease; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #555555; } @media (min-width: 1351px) { .countries__selector:after, .countries-no-ajax__selector:after { right: 20px; } } .countries__selector.open:after, .countries-no-ajax__selector.open:after { -webkit-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } .countries__select, .countries-no-ajax__select { display: none; position: absolute; margin: 0; padding: 0; z-index: 5; outline: none; width: 200px; list-style: none; text-align: left; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #CCCCCC; border-top: none; overflow-x: hidden; overflow-y: scroll; max-height: 225px; } @media screen and (max-width: 420px) { .countries__select, .countries-no-ajax__select { width: 100%; margin-right: 0; } } .countries__option, .countries-no-ajax__option { width: 200px; background: #ffffff; line-height: 25px; font-size: 0.875rem; cursor: pointer; margin: 0; border-top: 1px solid #CCCCCC; } @media screen and (max-width: 420px) { .countries__option, .countries-no-ajax__option { width: 100%; } } .countries__option:hover, .countries-no-ajax__option:hover { background: #e6e5e5; } .countries__option a, .countries-no-ajax__option a { display: inline-block; width: 100%; position: relative; text-decoration: none; padding: 12px 11px 12px 44px; } .countries__option a:hover, .countries-no-ajax__option a:hover { text-decoration: none; } .countries__flag, .countries-no-ajax__flag { display: block; position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 10px; } .image-gallery { margin-bottom: 1rem; } .image-gallery__list { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .image-gallery__item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding-right: 10px; width: 100%; max-width: 100%; cursor: pointer; } @media (min-width: 550px) { .image-gallery__item { width: 50%; max-width: 50%; } } @media (min-width: 769px) { .image-gallery__item { width: 33.3333%; max-width: 33.3333%; } } .image-gallery__item.is-active { display: block; position: fixed; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.95); z-index: 3; padding: 0; -webkit-box-orient: initial; -webkit-box-direction: initial; -webkit-flex-direction: initial; flex-direction: initial; cursor: initial; } .image-gallery__figure, .image-gallery__image { width: 100%; height: 100%; } .image-gallery__figure { position: relative; z-index: 0; margin: 0; padding: 0; } .is-active .image-gallery__figure { width: 90vw; max-width: 750px; height: auto; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 4; } .image-gallery__image { -o-object-fit: cover; object-fit: cover; } .image-gallery__caption { position: absolute; z-index: 1; bottom: 0; left: 0; color: #ffffff; background: rgba(0, 0, 0, 0.2); padding: 5px 10px; } .image-gallery__caption:first-letter { text-transform: capitalize; } .is-active .image-gallery__caption { bottom: 5px; background: rgba(0, 0, 0, 0.4); } .image-gallery__exit { display: none; z-index: 5; position: fixed; top: 70px; right: 0px; width: 70px; height: 70px; background: #555555; color: #ffffff; cursor: pointer; outline: none; text-align: center; border: 1px solid #000000; box-shadow: none; font-size: 1rem; } .image-gallery__exit:active { outline: none; } /* ------------------------------------------------------------------------------------------------------ PDF Gateway Styles ------------------------------------------------------------------------------------------------------*/ .pdf-gate.is-visible { display: block; position: fixed; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.9); z-index: 3; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pdf-gate.is-hidden { display: none; } .is-visible .pdf-gate__inner { position: absolute; width: 90vw; height: auto; max-width: 600px; z-index: 4; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 0 20px; } @media (max-width: 600px) { .is-visible .pdf-gate__inner { top: auto; bottom: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .pdf-gate__inner p { color: #ffffff; } .pdf-gate__form { text-align: center; } .pdf-gate__form form li { padding: 0 10px !important; } .pdf-gate__form form label { color: #ffffff; display: none !important; } .pdf-gate__form form input { width: 100% !important; } .pdf-gate__form form input::-webkit-input-placeholder { color: #555555; } .pdf-gate__form form input:-ms-input-placeholder { color: #555555; } .pdf-gate__form form input::-ms-input-placeholder { color: #555555; } .pdf-gate__form form input::placeholder { color: #555555; } .pdf-gate__form form .gform_footer { text-align: center; } @media (max-width: 600px) { .pdf-gate__form form { position: relative; bottom: 0; } } .pdf-gate__form form .gform_footer { margin-top: 0 !important; } .pdf-gate__form.blue button { background: #0060A9; } .pdf-gate__form.blue button:hover { background: #004376; } .pdf-gate__form.green button { background: #F6A900; } .pdf-gate__form.green button:hover { background: #c38600; } .pdf-gate__form.yellow button { background: #F9E700; } .pdf-gate__form.yellow button:hover { background: #c6b800; } .pdf-gate__form.red button { background: #DD1840; } .pdf-gate__form.red button:hover { background: #af1333; } .pdf-gate__form.purple button { background: #A5137F; } .pdf-gate__form.purple button:hover { background: #770e5c; } .pdf-gate__form.orange button { background: #F6A900; } .pdf-gate__form.orange button:hover { background: #c38600; } .pdf-gate__form.grey button { background: #f6f6f6; } .pdf-gate__form.grey button:hover { background: #dddcdc; } .pdf-gate button { margin: 0em; padding: 15px 20px; background: #0060A9 !important; color: #ffffff; font-family: "Neo Sans W01", sans-serif; font-size: 1.15rem; cursor: pointer; outline: none; -webkit-appearance: button; -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; box-sizing: border-box; border-style: none; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .pdf-gate button:hover { background-color: #004376 !important; } .pdf-gate button:hover img { margin: 0 10px 0 8px; } .pdf-gate button:active, .pdf-gate button:focus { outline: none; } .pdf-gate button img { margin-right: 18px; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .pdf-gate__exit { display: none; z-index: 9999; position: fixed; top: 70px; right: 0px; width: 70px; height: 70px; background: #555555; color: #ffffff; cursor: pointer; outline: none; text-align: center; border: 1px solid #000000; box-shadow: none; font-size: 1rem; background: #0060A9; } .pdf-gate__exit:active { outline: none; } .pdf-gate [id*="gform_confirmation_message"] { color: #ffffff; text-align: center; } /* ------------------------------------------------------------------------------------------------------ Product Form styles - Request a Sample && Ask a Question Modals ------------------------------------------------------------------------------------------------------*/ .aaq-form.is-visible, .ras-form.is-visible { display: block; position: fixed; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.9); z-index: 3; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .aaq-form.is-hidden, .ras-form.is-hidden { display: none !important; } .aaq-form__inner, .ras-form__inner { position: relative; height: 100%; overflow-y: scroll; overflow-x: hidden; padding: 100px 0; } @media (max-width: 768px) { .aaq-form__inner, .ras-form__inner { padding: 200px 0 100px; } } .is-visible .aaq-form__inner, .is-visible .ras-form__inner { width: 90vw; max-width: 600px; z-index: 4; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 600px) { .is-visible .aaq-form__inner, .is-visible .ras-form__inner { top: auto; bottom: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .aaq-form__inner p, .ras-form__inner p { color: #ffffff; } .aaq-form__form, .ras-form__form { text-align: center; } .aaq-form__form form li, .ras-form__form form li { padding: 0 10px !important; } .aaq-form__form form label, .ras-form__form form label { color: #ffffff; } .aaq-form__form form input, .ras-form__form form input { width: 100% !important; } .aaq-form__form form input::-webkit-input-placeholder, .ras-form__form form input::-webkit-input-placeholder { color: #555555; } .aaq-form__form form input:-ms-input-placeholder, .ras-form__form form input:-ms-input-placeholder { color: #555555; } .aaq-form__form form input::-ms-input-placeholder, .ras-form__form form input::-ms-input-placeholder { color: #555555; } .aaq-form__form form input::placeholder, .ras-form__form form input::placeholder { color: #555555; } .aaq-form__form form .gform_footer, .ras-form__form form .gform_footer { text-align: center; } @media (max-width: 600px) { .aaq-form__form form, .ras-form__form form { position: relative; bottom: 0; } } .aaq-form__form form .gform_footer, .ras-form__form form .gform_footer { margin-top: 0 !important; } .aaq-form__form form input[type="checkbox"], .ras-form__form form input[type="checkbox"] { width: 1rem !important; height: 1rem !important; } .aaq-form__form form button, .ras-form__form form button { margin: 0em; padding: 15px 20px; color: #000000; font-family: "Neo Sans W01", sans-serif; font-size: 1.15rem; cursor: pointer; outline: none; -webkit-appearance: button; -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; box-sizing: border-box; border-style: none; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .aaq-form__form form button:hover img, .ras-form__form form button:hover img { margin: 0 10px 0 8px; } .aaq-form__form form button:active, .aaq-form__form form button:focus, .ras-form__form form button:active, .ras-form__form form button:focus { outline: none; } .aaq-form__form form button img, .ras-form__form form button img { margin-right: 18px; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .aaq-form__form.blue button, .ras-form__form.blue button { background: #0060A9; } .aaq-form__form.blue button:hover, .ras-form__form.blue button:hover { background: #004376; } .aaq-form__form.green button, .ras-form__form.green button { background: #3CA542; } .aaq-form__form.green button:hover, .ras-form__form.green button:hover { background: #2e8033; } .aaq-form__form.yellow button, .ras-form__form.yellow button { background: #F9E700; } .aaq-form__form.yellow button:hover, .ras-form__form.yellow button:hover { background: #c6b800; } .aaq-form__form.red button, .ras-form__form.red button { background: #DD1840; } .aaq-form__form.red button:hover, .ras-form__form.red button:hover { background: #af1333; } .aaq-form__form.purple button, .ras-form__form.purple button { background: #A5137F; } .aaq-form__form.purple button:hover, .ras-form__form.purple button:hover { background: #770e5c; } .aaq-form__form.orange button, .ras-form__form.orange button { background: #F6A900; } .aaq-form__form.orange button:hover, .ras-form__form.orange button:hover { background: #c38600; } .aaq-form__form.grey button, .ras-form__form.grey button { background: #f6f6f6; } .aaq-form__form.grey button:hover, .ras-form__form.grey button:hover { background: #dddcdc; } .aaq-form__exit, .ras-form__exit { display: none; z-index: 9999; position: fixed; top: 70px; right: 0px; width: 70px; height: 70px; background: #555555; color: #000000; cursor: pointer; outline: none; text-align: center; border: 1px solid #000000; box-shadow: none; font-size: 1rem; -webkit-transition: all 250ms; transition: all 250ms; } @media (max-width: 768px) { .aaq-form__exit, .ras-form__exit { top: 90px; } } .aaq-form__exit:active, .ras-form__exit:active { outline: none; } .aaq-form__exit.blue, .ras-form__exit.blue { background: #0060A9; } .aaq-form__exit.blue:hover, .ras-form__exit.blue:hover { background: #004376; } .aaq-form__exit.green, .ras-form__exit.green { background: #3CA542; } .aaq-form__exit.green:hover, .ras-form__exit.green:hover { background: #2e8033; } .aaq-form__exit.red, .ras-form__exit.red { background: #DD1840; } .aaq-form__exit.red:hover, .ras-form__exit.red:hover { background: #af1333; } .aaq-form__exit.yellow, .ras-form__exit.yellow { background: #F9E700; } .aaq-form__exit.yellow:hover, .ras-form__exit.yellow:hover { background: #c6b800; } .aaq-form__exit.purple, .ras-form__exit.purple { background: #A5137F; } .aaq-form__exit.purple:hover, .ras-form__exit.purple:hover { background: #770e5c; } .aaq-form__exit.orange, .ras-form__exit.orange { background: #F6A900; } .aaq-form__exit.orange:hover, .ras-form__exit.orange:hover { background: #c38600; } .aaq-form__exit.grey, .ras-form__exit.grey { background: #f6f6f6; } .aaq-form__exit.grey:hover, .ras-form__exit.grey:hover { background: #dddcdc; } .aaq-form [id*="gform_confirmation_message"], .ras-form [id*="gform_confirmation_message"] { color: #ffffff; text-align: center; } /* ------------------------------------------------------------------------------------------------------ Language Selector in Header ------------------------------------------------------------------------------------------------------*/ .lang-select .icl_lang_sel_current { display: none; } .lang-select__dropdown { position: relative; display: inline-block; } .lang-select__selector { width: 68px; cursor: pointer; border: none; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; border-radius: 0; text-transform: uppercase; background-color: transparent; font-family: "Neo Sans W01", sans-serif; outline: none; color: #555555; font-size: 0.875rem; text-align: left; padding: 0; } @media (min-width: 640px) and (max-width: 1024px) { .lang-select__selector { width: 165px; } } @media (min-width: 1351px) and (max-width: 1448px) { .lang-select__selector { width: 100px; } } @media (min-width: 1449px) { .lang-select__selector { width: 185px; } } .lang-select__selector a { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; text-decoration: none; padding: 12px 11px; } @media (min-width: 1351px) { .lang-select__selector a { padding: 12px 20px; } } @media (max-width: 1439px) { .lang-select__selector img { text-align: center; } } .lang-select__selector:after { content: ''; position: absolute; top: 50%; right: 12px; display: block; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 450ms ease; transition: all 450ms ease; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #555555; } @media (min-width: 1351px) { .lang-select__selector:after { right: 20px; } } .lang-select__selector .lang-select__short-label, .lang-select__selector .lang-select__full-label { display: none; } .lang-select__selector.open:after { -webkit-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } .lang-select__selector .lang-select__full-label { display: none; } @media (min-width: 640px) and (max-width: 1024px), (min-width: 1449px) { .lang-select__selector .lang-select__full-label { display: inline-block; } } .lang-select__select { display: none; position: absolute; margin: 0; padding: 0; z-index: 5; outline: none; width: 140px; list-style: none; text-align: left; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #CCCCCC; background: #ffffff; } @media (min-width: 640px) and (max-width: 1024px) { .lang-select__select { width: 200px; } } @media (min-width: 1351px) and (max-width: 1448px) { .lang-select__select { width: 180px; } } @media (min-width: 1449px) { .lang-select__select { width: 220px; } } .lang-select__bar { display: block; position: absolute; bottom: 0; left: 1px; width: 66px; height: 2px; -webkit-transform: translateY(1px); transform: translateY(1px); z-index: 6; pointer-events: none; background-color: #ffffff; } @media (min-width: 640px) and (max-width: 1024px) { .lang-select__bar { width: 163px; } } @media (min-width: 1351px) and (max-width: 1448px) { .lang-select__bar { width: 98px; } } @media (min-width: 1449px) { .lang-select__bar { width: 183px; } } .lang-select__option { position: relative; width: 100%; background: #ffffff; cursor: pointer; margin: 0; padding: 0; border-bottom: 1px solid #CCCCCC; } .lang-select__option:last-child { border-bottom: none; } .lang-select__option:hover { background: #e6e5e5; } .lang-select__option a { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; position: relative; padding: 12px 11px; text-decoration: none; font-size: 12px; } .lang-select__option a:hover { text-decoration: none; } @media (min-width: 1351px) { .lang-select__option a { padding: 12px 20px; } } @media (min-width: 1449px) { .lang-select__option a { font-size: 14px; } } .lang-select__flag { display: block; width: 16px; height: 10px; margin-right: 10px; } .lang-select__full-label { display: inline-block; color: #555555; } .lang-select__short-label { display: none; color: #555555; text-transform: uppercase; } @media (min-width: 1439px) { .lang-select__short-label { display: none; } } .page-wrapper { position: relative; display: block; margin: 0 0 0 0; padding: 70px 0 0 0; width: 100%; } /* ------------------------------------------------------------------------------------------------------ General styling section for main content area on pages and posts ------------------------------------------------------------------------------------------------------*/ .main-content { /* Block Quotes */ /* Definition Lists */ } .main-content blockquote { display: block; background: #ffffff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; font-size: 16px; line-height: 1.2; color: #555555; text-align: justify; /*Borders - (Optional)*/ border-left: 15px solid #F6A900; border-right: 2px solid #F6A900; /*Box Shadow - (Optional)*/ box-shadow: 2px 2px 15px #e4e4e4; } .main-content blockquote::before { content: "\201C"; /*Unicode for Left Double Quote*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #b1b1b1; position: absolute; left: 10px; top: 5px; } .main-content blockquote::after { /*Reset to make sure*/ content: ""; } .main-content dt { font-weight: bold; text-decoration: underline; margin-bottom: 5px; } .main-content dd { margin: 0; padding: 0 0 10px 15px; } /* ------------------------------------------------------------------------------------------------------ Wordpress image alignment styling ------------------------------------------------------------------------------------------------------*/ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .freeze-body { overflow: hidden; height: 100%; position: fixed; } /* ------------------------------------------------------------------------------------------------------ Header section styling ------------------------------------------------------------------------------------------------------*/ .site-header { position: fixed; top: 0; left: 0; width: 100%; display: block; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #ffffff; z-index: 8888; /*---------------------------- Header - Logo Styling ------------------------------*/ /*---------------------------- Header - Main Navigation ------------------------------*/ /*-------------------------------------- Sub Navigation - Ul General Styling ---------------------------------------*/ /*---------------------------- Mobile Menu ------------------------------*/ /*---------------------------- Mega Menu ------------------------------*/ /*---------------------------- Mega Menu - Search Section ------------------------------*/ /*---------------------------- Mega Menu - Products Sub Menu Section ------------------------------*/ /*---------------------------- Mega Menu - Product Text Area Styling ------------------------------*/ } .site-header__wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; width: 100%; max-width: 1720px; margin: 0 auto 0 auto; padding: 15px; height: 70px; } .site-header__logo { display: block; margin: 0 30px 0 0; width: 138px; } @media screen and (max-width: 1350px) { .site-header__logo { margin: 0 12px 0 0; } } @media screen and (max-width: 420px) { .site-header__logo { width: 105px; min-width: 105px; } } .site-header__logo a { display: block; margin: 0 0 0 0; opacity: 1; -webkit-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; } .site-header__logo a:hover { opacity: 0.6; } .site-header__logo img { display: block; } .site-header__lang-select { margin-right: 12px; } .site-header__navigation { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-align-self: stretch; align-self: stretch; margin: 0 0 0 0; padding: 0 0 0 0; } @media screen and (max-width: 1140px) { .site-header__navigation { display: none; } } .site-header__navigation .menu-main-nav-container { height: 100%; } .site-header__navigation ul { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; list-style: none; margin: 0 0 0 0; padding: 0 0 0 0; height: 100%; } .site-header__navigation ul li { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: center; align-content: center; margin: 0 0 0 0; padding: 0 0 0 0; height: 100%; -webkit-transition: border-bottom 0.15s linear; transition: border-bottom 0.15s linear; } .site-header__navigation ul li:last-child a { border-right: 1px solid #CCCCCC; } .site-header__navigation ul li a { display: block; margin: 0 0 0 0; padding: 0px 30px 0px 30px; min-height: 33px; line-height: 33px; border-left: 1px solid #CCCCCC; text-decoration: none; -webkit-transition: padding 0.25s ease-in-out; transition: padding 0.25s ease-in-out; } @media screen and (max-width: 1350px) { .site-header__navigation ul li a { padding: 0px 12px 0 12px; } } .site-header__navigation ul li a:after { content: ''; display: block; position: absolute; top: 100%; left: -1px; width: calc(100% + 2px); height: 10px; background: #555555; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 350ms ease; transition: all 350ms ease; opacity: 0; pointer-events: none; } .site-header__navigation ul li a:hover { text-decoration: none; color: #555555; } .site-header__navigation ul li a:hover:after { -webkit-transform: translateY(5px); transform: translateY(5px); opacity: 1; } .site-header__navigation ul li.current-menu-item a:after { -webkit-transform: translateY(5px); transform: translateY(5px); opacity: 1; } .site-header__navigation ul li.mega-menu-open a:after { -webkit-transform: translateY(5px); transform: translateY(5px); opacity: 1; } .site-header__mobile-navigation ul, .site-header__mega-menu-wrapper ul { position: relative; display: block; width: 100%; margin: 0 0 0 0; padding: 0 30px 0 0; list-style-type: none; background-color: #555555; height: 100%; } .site-header__mobile-navigation ul li, .site-header__mega-menu-wrapper ul li { display: block; margin: 5px 0 5px 0; padding: 5px 0 7px 0; cursor: pointer; border-bottom: 1px solid #555555; -webkit-transition: border-bottom 0.20s linear; transition: border-bottom 0.20s linear; } .site-header__mobile-navigation ul li:hover, .site-header__mega-menu-wrapper ul li:hover { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .site-header__mobile-navigation ul li:hover a, .site-header__mega-menu-wrapper ul li:hover a { border-left: 8px solid rgba(255, 255, 255, 0.5); } .site-header__mobile-navigation ul li:hover a:hover, .site-header__mega-menu-wrapper ul li:hover a:hover { border-left: 8px solid rgba(255, 255, 255, 0.5); } .site-header__mobile-navigation ul li a, .site-header__mega-menu-wrapper ul li a { display: block; margin: 0 0 0 0; padding: 0 0 0 20px; line-height: 38px; color: #ffffff; font-family: "Neo Sans W01 Light734947", sans-serif; font-size: 1.25rem; font-weight: 300; border-left: 8px solid rgba(255, 255, 255, 0.5); -webkit-transition: padding 0.20s ease-in-out; transition: padding 0.20s ease-in-out; text-decoration: none; } .site-header__mobile-navigation ul li a:hover, .site-header__mega-menu-wrapper ul li a:hover { text-decoration: none; padding: 0 0 0 30px; } .site-header__mobile-navigation ul li.blue a, .site-header__mega-menu-wrapper ul li.blue a { border-left: 8px solid #0060a9; } .site-header__mobile-navigation ul li.blue a:hover, .site-header__mega-menu-wrapper ul li.blue a:hover { border-left: 8px solid #0060a9; } .site-header__mobile-navigation ul li.yellow a, .site-header__mega-menu-wrapper ul li.yellow a { border-left: 8px solid #f9e700; } .site-header__mobile-navigation ul li.yellow a:hover, .site-header__mega-menu-wrapper ul li.yellow a:hover { border-left: 8px solid #f9e700; } .site-header__mobile-navigation ul li.orange a, .site-header__mega-menu-wrapper ul li.orange a { border-left: 8px solid #f6a900; } .site-header__mobile-navigation ul li.orange a:hover, .site-header__mega-menu-wrapper ul li.orange a:hover { border-left: 8px solid #f6a900; } .site-header__mobile-navigation ul li.red a, .site-header__mega-menu-wrapper ul li.red a { border-left: 8px solid #dd1840; } .site-header__mobile-navigation ul li.red a:hover, .site-header__mega-menu-wrapper ul li.red a:hover { border-left: 8px solid #dd1840; } .site-header__mobile-navigation ul li.green a, .site-header__mega-menu-wrapper ul li.green a { border-left: 8px solid #3ca542; } .site-header__mobile-navigation ul li.green a:hover, .site-header__mega-menu-wrapper ul li.green a:hover { border-left: 8px solid #3ca542; } .site-header__mobile-navigation ul li.purple a, .site-header__mega-menu-wrapper ul li.purple a { border-left: 8px solid #a5137f; } .site-header__mobile-navigation ul li.purple a:hover, .site-header__mega-menu-wrapper ul li.purple a:hover { border-left: 8px solid #a5137f; } .site-header__mobile-navigation ul li.menu-item-has-children a, .site-header__mega-menu-wrapper ul li.menu-item-has-children a { background-color: transparent; background-image: url("../images/arrow-right.svg"); background-repeat: no-repeat; background-size: 27px auto; background-position: right 20px center; -webkit-transition: all 0.20s ease-in-out; transition: all 0.20s ease-in-out; } .site-header__mobile-navigation ul li.menu-item-has-children a:hover, .site-header__mega-menu-wrapper ul li.menu-item-has-children a:hover { background-position: right 10px center; } .site-header__mobile-navigation ul { height: auto; } .site-header__navigation_mobile_button { position: relative; display: none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-align-self: stretch; align-self: stretch; margin: 0 0 0 0; padding: 0 0 0 0; } @media screen and (max-width: 1140px) { .site-header__navigation_mobile_button { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; } } .site-header__navigation_mobile_button button { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; margin: 0 0 0 0; padding: 0 12px 0 12px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; min-height: 33px; background: transparent; font-size: 1.125rem; color: #555555; line-height: 33px; width: 107px; cursor: pointer; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; outline: none; } @media screen and (max-width: 500px) { .site-header__navigation_mobile_button button { border-left: none; padding-left: 0; width: 95px; } } @media screen and (max-width: 420px) { .site-header__navigation_mobile_button button { font-size: 1rem; } } .site-header__navigation_mobile_button button > span { margin-right: 13px; font-family: "Neo Sans W01", sans-serif; font-size: 18px; } .site-header__navigation_mobile_button button .hamburger { position: relative; width: 22px; height: 16px; display: inline-block; } .site-header__navigation_mobile_button button .hamburger span { display: block; position: absolute; height: 3px; width: 100%; background: #555555; border-radius: 3px; opacity: 1; left: 0; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .site-header__navigation_mobile_button button .hamburger.close span:nth-child(1) { top: 0px; } .site-header__navigation_mobile_button button .hamburger.close span:nth-child(2), .site-header__navigation_mobile_button button .hamburger.close span:nth-child(3) { top: 7px; } .site-header__navigation_mobile_button button .hamburger.close span:nth-child(4) { top: 14px; } .site-header__navigation_mobile_button button .hamburger.open span:nth-child(1) { top: 16px; width: 0%; left: 50%; } .site-header__navigation_mobile_button button .hamburger.open span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .site-header__navigation_mobile_button button .hamburger.open span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 7px; } .site-header__navigation_mobile_button button .hamburger.open span:nth-child(4) { top: 16px; width: 0%; left: 50%; } .site-header__mobile-navigation { position: relative; display: none; width: 100%; margin: 0 0 0 0; padding: 0px 0px 0px 0px; background-color: #555555; } .site-header__mobile-navigation.open { display: block; } .site-header__mobile-navigation .menu-mobile-menu-container { position: relative; display: block; margin: 0 0 0 0; width: 100%; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu { padding: 10px 15px 10px 15px; left: 0; -webkit-transition: left 0.25s ease-in-out; transition: left 0.25s ease-in-out; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu li.menu-item-has-children a { background-position: right 0px center; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu li.menu-item-has-children a:hover, .site-header__mobile-navigation .menu-mobile-menu-container ul.menu li.menu-item-has-children a:focus { background-position: right 10px center; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu li .sub-menu { position: absolute; display: block; top: 0; left: 200%; width: 100%; -webkit-transition: left 0.25s ease-in-out; transition: left 0.25s ease-in-out; padding: 10px 15px 10px 15px; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu li .sub-menu li a { background-image: none; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu li .sub-menu li.back { margin-top: 0px; background-image: url("../images/back-arrow.svg"); background-position: left center; background-repeat: no-repeat; background-size: 11px 17px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu li .sub-menu li.back a { display: inline-block; border-left: none; padding: 0 20px 0 20px; border-right: 1px solid rgba(255, 255, 255, 0.5); width: 89px; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu li .sub-menu li.back a:hover { padding: 0 20px 0 30px; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu.open { left: -100%; -webkit-transition: left 0.25s ease-in-out; transition: left 0.25s ease-in-out; } .site-header__mobile-navigation .menu-mobile-menu-container ul.menu.open li.open .sub-menu { left: 100%; -webkit-transition: left 0.25s ease-in-out; transition: left 0.25s ease-in-out; } .site-header__mega-menu { position: relative; display: none; width: 100%; margin: 0 0 0 0; padding: 55px 15px 55px 15px; background-color: #555555; } .site-header__mega-menu a { color: #ffffff !important; } .site-header__mega-menu-wrapper { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-align-content: flex-start; align-content: flex-start; position: relative; margin: 0 auto 0 auto; padding: 0 0 0 0; max-width: calc(1720px - 20px); } .site-header__mega-menu-wrapper nav { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; height: 100%; } .site-header__mega-menu-wrapper h2 { width: 100%; font-size: 1.125rem; margin: 0 0 30px 0; color: #ffffff; } .site-header__mega-menu-wrapper.industry nav { position: relative; display: block; width: 100%; } .site-header__mega-menu-wrapper.industry nav ul { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-align-content: flex-start; align-content: flex-start; padding: 0 0 0 0; } .site-header__mega-menu-wrapper.industry nav ul li { width: 30%; } .site-header__search-section { position: relative; width: 100%; margin: 0 0 0 0; padding: 0 0 60px 0; } @media screen and (max-width: 1140px) { .site-header__search-section { padding: 0px 15px 10px 15px; } } .site-header__search-section form { position: relative; display: block; width: 483px; margin: 0 0 0 0; padding: 0 0 0 0; background-color: rgba(232, 232, 233, 0.1); } @media screen and (max-width: 1140px) { .site-header__search-section form { width: 100%; } } .site-header__search-section form fieldset { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; border: 1px solid #979797; } .site-header__search-section form input[type="text"] { padding: 10px 10px 10px 10px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; background-color: transparent; border: none; font-family: "Neo Sans W01 Light734947", sans-serif; color: #ffffff; font-style: italic; font-size: 1.25rem; font-weight: 300; width: calc(100% - 53px); } .site-header__search-section form input[type="submit"] { width: 53px; height: 46px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; background-image: url("../images/arrow-right.svg"); background-repeat: no-repeat; background-size: 27px auto; background-position: left 10px center; font-size: 0; cursor: pointer; -webkit-transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out; position: absolute; top: 0; right: 0; } .site-header__search-section form input[type="submit"]:hover { background-position: left 20px center; } .site-header__search-section.knowledge { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; } .site-header__search-section.knowledge p { width: 300px; color: #ffffff; margin: 0 0 0 5%; font-size: 1.25rem; font-family: "Neo Sans W01 Light734947", sans-serif; font-weight: 300; background-image: url("../images/multicolour-squares.svg"); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; } .site-header__search-section.knowledge p a { display: block; line-height: 42px; margin: 0 0 0 0; padding: 0 65px 0 25px; color: #ffffff; background-image: url("../images/arrow-right.svg"); background-repeat: no-repeat; background-size: 27px auto; background-position: right 20px center; cursor: pointer; -webkit-transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out; } .site-header__search-section.knowledge p a:link, .site-header__search-section.knowledge p a:active, .site-header__search-section.knowledge p a:visited { text-decoration: none; } .site-header__search-section.knowledge p a:hover { background-position: right 10px center; text-decoration: none; } .site-header__mega-menu-sub-menu.product { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; position: relative; padding: 0 0 0 0; } .site-header__mega-menu-sub-menu.product .menu-products-mega-menu-container { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-align-content: flex-start; align-content: flex-start; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; height: 100%; } .site-header__mega-menu-sub-menu.product ul { width: 50%; margin: 0 0 0 0; padding: 0 30px 0 0; } .site-header__mega-menu-sub-menu.product ul li.menu-item-has-children .sub-menu { position: absolute; display: block; top: 0; left: 100%; width: 100%; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; z-index: -1; opacity: 0; } .site-header__mega-menu-sub-menu.product ul li.menu-item-has-children .sub-menu li a { background-image: none; } .site-header__mega-menu-sub-menu.product ul li.menu-item-has-children.open .sub-menu { z-index: 1; opacity: 1; } .site-header__mega-menu-sub-menu.knowledge { position: relative; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; align-content: flex-start; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; } .site-header__mega-menu-sub-menu.knowledge nav { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; height: auto; margin: 0 0 0 0; padding: 0 0 0 0; } .site-header__mega-menu-text-area { position: relative; width: 500px; margin: 0 0 0 0; padding: 0 0 0 50px; } .site-header__mega-menu-text-section { position: relative; display: block; margin: 0 0 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .site-header__mega-menu-text-section:nth-child(1) { margin: 0 0 50px 0; } .site-header__mega-menu-text-section h2 { display: block; color: #ffffff; font-size: 1.875rem; margin: 0 0 20px 0; font-family: "Neo Sans W01 Light734947", sans-serif; font-weight: 300; } .site-header__mega-menu-text-section p { display: block; color: #ffffff; font-size: 1.125rem; margin: 0 0 20px 0; font-family: "Neo Sans W01 Light734947", sans-serif; font-weight: 300; } .site-header__mega-menu-text-section p.section-link { display: inline-block; color: #ffffff; margin: 0 0 15px 0; font-size: 1.25rem; font-family: "Neo Sans W01 Light734947", sans-serif; font-weight: 300; background-image: url("../images/multicolour-squares.svg"); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; } .site-header__mega-menu-text-section p.section-link a { display: block; line-height: 42px; margin: 0 0 0 0; padding: 0 65px 0 25px; color: #ffffff; background-image: url("../images/arrow-right.svg"); background-repeat: no-repeat; background-size: 27px auto; background-position: right 20px center; cursor: pointer; -webkit-transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out; } .site-header__mega-menu-text-section p.section-link a:hover { background-position: right 10px center; text-decoration: none; } .events-news { /*------------------------------------ News & Events - Header (Single & Listing Pages) -------------------------------------*/ } .events-news__header { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #E8E8E9; width: 100%; } .events-news__header-wrapper { display: block; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 100%; max-width: 1700px; padding-left: 15px; padding-right: 15px; padding-top: 30px; padding-bottom: 30px; } @media (min-width: 320px) { .events-news__header-wrapper { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .events-news__header-wrapper { padding-left: 50px; padding-right: 50px; } } @media (min-width: 320px) { .events-news__header-wrapper { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .events-news__header-wrapper { padding-top: 100px; padding-bottom: 100px; } } @media (min-width: 1730px) { .events-news__header-wrapper { padding-left: 0; padding-right: 0; } } .events-news__header-wrapper h2 { font-size: 22px; margin: 0 0 30px 0; } @media (min-width: 320px) { .events-news__header-wrapper h2 { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .events-news__header-wrapper h2 { font-size: 40px; } } .events-news__header-wrapper form { position: relative; display: block; width: 50%; margin: 0 0 0 0; padding: 0 0 0 0; background-color: rgba(232, 232, 233, 0.1); } @media screen and (max-width: 620px) { .events-news__header-wrapper form { width: 100%; } } .events-news__header-wrapper form fieldset { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; border: 1px solid #979797; } .events-news__header-wrapper form input[type="text"] { padding: 10px 10px 10px 10px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; background-color: #ffffff; border: none; font-family: "Neo Sans W01 Light734947", sans-serif; color: #555555; font-style: italic; font-size: 1.25rem; font-weight: 300; width: calc(100% - 53px); } .safari .events-news__header-wrapper form input[type="text"] { margin: 0; } .events-news__header-wrapper form input[type="submit"] { width: 53px; height: 44px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; background-image: url("../images/arrow-right-dark.svg"); background-repeat: no-repeat; background-size: 27px auto; background-position: left 10px center; font-size: 0; cursor: pointer; -webkit-transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out; position: absolute; right: 0; top: 0; } .safari .events-news__header-wrapper form input[type="submit"] { margin-top: 2px; height: 42px; } .events-news__header-wrapper form input[type="submit"]:hover { background-position: left 20px center; } .knowlege-base { /*------------------------------------ Knowlege Base - Header (Single & Listing Pages) -------------------------------------*/ } .knowlege-base__header { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #E8E8E9; width: 100%; } .knowlege-base__header-wrapper { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 100%; max-width: 1700px; padding-left: 5px; padding-right: 5px; padding-top: 20px; padding-bottom: 20px; } @media (min-width: 320px) { .knowlege-base__header-wrapper { padding-left: calc(5px + 45 * (100vw - 320px) / 1380); padding-right: calc(5px + 45 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .knowlege-base__header-wrapper { padding-left: 50px; padding-right: 50px; } } @media (min-width: 320px) { .knowlege-base__header-wrapper { padding-top: calc(20px + 80 * (100vw - 320px) / 1380); padding-bottom: calc(20px + 80 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .knowlege-base__header-wrapper { padding-top: 100px; padding-bottom: 100px; } } @media (min-width: 1730px) { .knowlege-base__header-wrapper { padding-left: 0; padding-right: 0; } } @media screen and (max-width: 940px) { .knowlege-base__header-wrapper { -webkit-flex-wrap: wrap; flex-wrap: wrap; } } .knowlege-base__header-wrapper h2 { font-size: 22px; margin: 0 0 30px 0; } @media (min-width: 320px) { .knowlege-base__header-wrapper h2 { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .knowlege-base__header-wrapper h2 { font-size: 40px; } } .knowlege-base__header-wrapper form { position: relative; display: block; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; background-color: rgba(232, 232, 233, 0.1); } .knowlege-base__header-wrapper form fieldset { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; border: 1px solid #979797; } .knowlege-base__header-wrapper form input[type="text"] { padding: 10px 10px 10px 10px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; background-color: #ffffff; border: none; font-family: "Neo Sans W01 Light734947", sans-serif; color: #555555; font-style: italic; font-size: 1.25rem; font-weight: 300; width: calc(100% - 53px); } .safari .knowlege-base__header-wrapper form input[type="text"] { margin: 0; } .knowlege-base__header-wrapper form input[type="submit"] { width: 53px; height: 44px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; background-image: url("../images/arrow-right-dark.svg"); background-repeat: no-repeat; background-size: 27px auto; background-position: left 10px center; font-size: 0; cursor: pointer; -webkit-transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out; position: absolute; right: 0; top: 0; } .safari .knowlege-base__header-wrapper form input[type="submit"] { margin-top: 2px; height: 42px; } .knowlege-base__header-wrapper form input[type="submit"]:hover { background-position: left 20px center; } .knowlege-base__header-wrapper-col { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 0 0 0; } @media screen and (max-width: 940px) { .knowlege-base__header-wrapper-col { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; } } .knowlege-base__header-wrapper-col:nth-of-type(1) { padding: 10px 20px 10px 10px; } @media screen and (max-width: 940px) { .knowlege-base__header-wrapper-col:nth-of-type(1) { padding: 10px 10px 10px 10px; } } .knowlege-base__header-wrapper-col:nth-of-type(2) { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; padding: 10px 10px 10px 20px; } @media screen and (max-width: 940px) { .knowlege-base__header-wrapper-col:nth-of-type(2) { padding: 10px 10px 10px 10px; } } .knowlege-base__header-button { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .knowlege-base__header-button a { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; text-decoration: none; padding: 10px 10px 10px 10px; } @media screen and (max-width: 940px) { .knowlege-base__header-button a { -webkit-box-align: center; -webkit-align-items: center; align-items: center; } } @media screen and (max-width: 580px) { .knowlege-base__header-button a { -webkit-flex-wrap: wrap; flex-wrap: wrap; } } .knowlege-base__header-button a figure { width: 109px; } @media screen and (max-width: 1090px) { .knowlege-base__header-button a figure { width: 70px; } } .knowlege-base__header-button a figure img { display: block; margin: 0 0 0 0; width: 100%; } .knowlege-base__header-button a .knowlege-base__header-button-text { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 5px 0 0 20px; } @media screen and (max-width: 580px) { .knowlege-base__header-button a .knowlege-base__header-button-text { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 5px 0 0 0; } } .knowlege-base__header-button a .knowlege-base__header-button-text p { margin: 0 0 5px 0; font-size: 16px; } @media (min-width: 320px) { .knowlege-base__header-button a .knowlege-base__header-button-text p { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .knowlege-base__header-button a .knowlege-base__header-button-text p { font-size: 20px; } } .knowlege-base__header-button a .knowlege-base__header-button-text img { display: block; margin: 0 0 0 0; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); width: 27px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } @media screen and (max-width: 1090px) { .knowlege-base__header-button a .knowlege-base__header-button-text img { width: 18px; } } .knowlege-base__header-button a:hover .knowlege-base__header-button-text img { left: 100%; margin: 0 0 0 0; -webkit-transform: translate3d(100%, 0px, 0px); transform: translate3d(100%, 0px, 0px); } .knowlege-base .electrolube-colours { width: 100%; } /* ------------------------------------------------------------------------------------------------------ Footer styling section ------------------------------------------------------------------------------------------------------*/ .footer { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; background: #ffffff; } .footer__wrapper { display: block; position: relative; max-width: 1720px; margin-left: auto; margin-right: auto; padding-top: 30px; padding-left: 15px; padding-right: 15px; } @media screen and (min-width: 768px) { .footer__wrapper { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } } @media screen and (min-width: 1024px) { .footer__wrapper { -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } } @media (min-width: 320px) { .footer__wrapper { padding-top: calc(30px + 45 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .footer__wrapper { padding-top: 75px; } } .footer__creds { padding-bottom: 30px; text-align: center; } @media (min-width: 320px) { .footer__creds { padding-bottom: calc(30px + 45 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .footer__creds { padding-bottom: 75px; } } @media screen and (min-width: 768px) { .footer__creds { text-align: left; } } .footer__creds-wrapper { position: relative; max-width: 1720px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .footer__part-of { position: relative; display: block; width: 100%; } @media screen and (min-width: 1024px) { .footer__part-of { margin-left: 45%; width: 45%; } } @media screen and (min-width: 1265px) { .footer__part-of { margin-left: 550px; max-width: 760px; } } .footer__part-of p { margin-bottom: 30px; } @media (min-width: 320px) { .footer__part-of p { margin-bottom: calc(30px + 10 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .footer__part-of p { margin-bottom: 40px; } } @media screen and (min-width: 1024px) { .footer__copyright { margin-left: 45%; width: 45%; } } @media screen and (min-width: 1265px) { .footer__copyright { margin-left: 550px; max-width: 760px; width: auto; } } .footer-navigation { width: 100%; padding: 0; margin-bottom: 30px; } @media (min-width: 320px) { .footer-navigation { margin-bottom: calc(30px + 10 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .footer-navigation { margin-bottom: 40px; } } @media screen and (min-width: 768px) { .footer-navigation { width: 45%; } } @media screen and (min-width: 1024px) { .footer-navigation { max-width: 550px; padding-right: 50px; } } .footer-navigation__list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } @media screen and (min-width: 768px) { .footer-navigation__list { -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } } .footer-navigation li { border-left: 1px solid #979797; padding: 0 15px; margin-bottom: 15px; } .footer-navigation li:last-child { border-right: 1px solid #979797; } .footer-navigation a { position: relative; font-size: 14px; font-size: 0.875rem; text-decoration: none; } @media screen and (min-width: 1265px) { .footer-navigation a { font-size: 16px; font-size: 1rem; } } .footer-navigation a:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: #555555; opacity: 0; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .footer-navigation a:link, .footer-navigation a:active, .footer-navigation a:visited { color: #555555; text-decoration: none; } .footer-navigation a:hover, .footer-navigation a:focus { color: #555555; text-decoration: none; } .footer-navigation a:hover:after, .footer-navigation a:focus:after { -webkit-transform: translateY(5px); transform: translateY(5px); opacity: 1; } .footer-information-section { width: 100%; } @media screen and (min-width: 768px) { .footer-information-section { width: 45%; } } @media screen and (min-width: 1024px) { .footer-information-section { max-width: 760px; } } .footer-logos__list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin: 0 auto 40px auto; width: 100%; max-width: 400px; } @media screen and (min-width: 768px) { .footer-logos__list { -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; } } @media screen and (min-width: 1024px) { .footer-logos__list { margin-left: 0; margin-right: 0; } } .footer-logos__item { margin-right: 20px; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; flex: 0 1 auto; } .footer-logos__item:last-child { margin-right: 0; } .footer-logos__item img { max-height: 45px; } .footer-logos__link { display: block; width: 100%; height: 100%; } .footer-logos__link img { display: block; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 250ms; transition: all 250ms; } .footer-logos__link:hover img { -webkit-transform: scale(0.9); transform: scale(0.9); } /*------------------------------------ Single Page - Contact Sidebar -------------------------------------*/ .contact-sidebar { position: relative; width: 355px; margin: 0 0 0 0; padding: 0 0 0 0; } .contact-sidebar img { display: block; width: 100%; margin: 0 0 20px 0; } .contact-sidebar section { display: block; margin: 0 0 0 0; padding: 0 0 0 20px; border-left: 5px solid #E8E8E9; } .contact-sidebar__phonenumber { font-size: 16px; } @media (min-width: 320px) { .contact-sidebar__phonenumber { font-size: calc(16px + 8 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .contact-sidebar__phonenumber { font-size: 24px; } } .contact-sidebar__phonenumber a { display: block; text-decoration: none; } .contact-sidebar__phonenumber a:hover { text-decoration: none; } .contact-sidebar__contact-button { position: relative; } .contact-sidebar__contact-button a { display: inline-block; margin: 0 0 0 0; padding: 15px 15px 15px 15px; background-color: #555555; color: #ffffff; text-decoration: none; } .contact-sidebar__contact-button a svg { width: 39px; vertical-align: middle; margin: 0 18px 0 0; -webkit-transition: margin 0.25s ease; transition: margin 0.25s ease; } .contact-sidebar__contact-button a svg path { fill: #ffffff; } .contact-sidebar__contact-button a:hover { text-decoration: none; background-color: #3c3b3b; } .contact-sidebar__contact-button a:hover svg { margin: 0 10px 0 8px; } .contact-sidebar__contact-button a svg { margin-right: 18px; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .subscribe-panel { position: relative; padding: 100px 15px; background-color: #555555; color: #ffffff; } .subscribe-panel a { color: #ffffff; } .subscribe-panel a:hover { color: #cccccc; } .subscribe-panel__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .subscribe-panel__bg:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.65; } .subscribe-panel__cta a { color: #ffffff; } @media screen and (max-width: 1023px) { .subscribe-panel { padding-top: 50px; padding-bottom: 50px; } } @media screen and (max-width: 639px) { .subscribe-panel { padding-top: 30px; padding-bottom: 30px; } } .subscribe-panel__wrapper { max-width: calc(1720px - 30px); margin-left: auto; margin-right: auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } @media screen and (max-width: 1023px) { .subscribe-panel__wrapper { display: block; } } .subscribe-panel__action { position: relative; z-index: 1; -webkit-box-flex: 1; -webkit-flex: 1 1 70%; flex: 1 1 70%; padding-right: 100px; padding-left: 100px; border-right: 1px solid rgba(255, 255, 255, 0.5); } .subscribe-panel__action:after { content: ''; display: table; clear: both; } @media screen and (max-width: 1439px) { .subscribe-panel__action { padding-left: 50px; padding-right: 50px; max-width: none; -webkit-box-flex: 1; -webkit-flex: 1 1 50%; flex: 1 1 50%; } } @media screen and (max-width: 1023px) { .subscribe-panel__action { padding-left: 0; padding-right: 0; padding-bottom: 30px; border-right: none; -webkit-box-flex: 1; -webkit-flex: 1 1 100%; flex: 1 1 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.5); } } .subscribe-panel__connect { position: relative; z-index: 1; -webkit-box-flex: 1; -webkit-flex: 1 1 30%; flex: 1 1 30%; padding-left: 100px; padding-right: 100px; } @media screen and (max-width: 1439px) { .subscribe-panel__connect { padding-left: 50px; padding-right: 50px; max-width: none; -webkit-box-flex: 1; -webkit-flex: 1 1 50%; flex: 1 1 50%; } } @media screen and (max-width: 1023px) { .subscribe-panel__connect { padding-top: 30px; padding-left: 0; padding-right: 0; border-left: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 100%; flex: 1 1 100%; } } .subscribe-panel__heading { display: block; margin: 0 0 30px 0; font-size: 30px; font-size: 1.875rem; line-height: 1.5; } @media screen and (max-width: 639px) { .subscribe-panel__heading { margin-bottom: 15px; font-size: 18px; font-size: 1.125rem; } } .subscribe-panel__social-media { margin-top: 50px; } @media screen and (max-width: 639px) { .subscribe-panel__social-media { margin-top: 30px; } } .subscribe-panel__content ul { list-style: none; margin: 0; padding: 0; margin-top: 25px; margin-bottom: 25px; } .subscribe-panel__content ul li { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding-left: 50px; margin: 10px 0; min-height: 40px; font-size: 16px; font-size: 1rem; line-height: 1.5; } .subscribe-panel__content ul li:before { content: ''; position: absolute; top: 0; left: 0; width: 35px; height: 35px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.7 35.7'%3E%3Cpath fill='%23FFFFFF' d='M17.2 23.8c-.1 0-.3-.1-.4-.1L10 16.9c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0l6.4 6.4L24.9 12c.2-.2.5-.3.7-.1.2.2.3.5.1.7l-8.2 11c0 .2-.1.2-.3.2z'/%3E%3Cpath fill='%23FFFFFF' d='M17.8 35.7C8 35.7 0 27.7 0 17.8 0 8 8 0 17.8 0s17.9 8 17.9 17.8c0 9.9-8 17.9-17.9 17.9zm0-34.7C8.6 1 1 8.6 1 17.8c0 9.3 7.6 16.8 16.8 16.8 9.3 0 16.9-7.6 16.9-16.8C34.7 8.6 27.1 1 17.8 1z'/%3E%3Cpath fill='%23FFFFFF' d='M17.8 31.4c-7.4 0-13.5-6.1-13.5-13.5 0-4.2 1.9-8.1 5.2-10.6.2-.2.5-.1.7.1.2.2.1.5-.1.7-3.1 2.4-4.8 6-4.8 9.9 0 6.9 5.6 12.5 12.5 12.5S30.3 24.9 30.3 18 24.7 5.5 17.8 5.5c-.3 0-.5-.2-.5-.5s.2-.5.5-.5c7.5 0 13.5 6.1 13.5 13.5s-6 13.4-13.5 13.4z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .subscribe-panel__content p { font-size: 18px; font-size: 1.125rem; line-height: 1.5; } @media screen and (max-width: 639px) { .subscribe-panel__content p { font-size: 16px; font-size: 1rem; } } .subscribe-panel__tel { display: inline-block; margin: 20px 0; font-size: 20px; font-size: 1.25rem; -webkit-transition: color 250ms ease; transition: color 250ms ease; text-decoration: none; } .subscribe-panel__tel:link, .subscribe-panel__tel:active, .subscribe-panel__tel:visited { color: #ffffff; text-decoration: none; } .subscribe-panel__tel:hover, .subscribe-panel__tel:focus { color: #3CA542; text-decoration: none; } .subscribe-panel form button { margin: 0em; padding: 15px 20px; background-color: #3CA542; color: #ffffff; font-family: "Neo Sans W01", sans-serif; font-size: 1.15rem; cursor: pointer; outline: none; -webkit-appearance: button; -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; box-sizing: border-box; border-style: none; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .subscribe-panel form button:hover { background-color: #2e8033; } .subscribe-panel form button:hover svg { margin: 0 10px 0 8px; } .subscribe-panel form button:active, .subscribe-panel form buttonfocus { outline: none; } .subscribe-panel form button svg { margin-right: 18px; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } /* ------------------------------------------------------------------------------------------------------ Home page styling ------------------------------------------------------------------------------------------------------*/ .top-panel { position: relative; display: block; width: 100%; overflow: hidden; } .top-panel a { text-decoration: none; } .top-panel a:hover, .top-panel a:active, .top-panel a:link, .top-panel a:visited, .top-panel a:focus { color: #555555; } .top-panel video { position: fixed; top: 0; left: 0; -o-object-fit: cover; object-fit: cover; z-index: -1; font-family: 'object-fit: cover;'; background: #ffffff; } .ie .top-panel video, .edge .top-panel video, .unknown.windows .top-panel video { position: absolute; } .ie .top-panel video { top: -175px; width: auto; height: 100vh; } .top-panel__wrapper { position: relative; display: block; margin: 0 auto 0 auto; padding: 95px 0 95px 0; width: 100%; max-width: 1700px; } @media screen and (max-width: 1700px) { .top-panel__wrapper { padding: 95px 20px 95px 20px; } } @media screen and (max-width: 1260px) { .top-panel__wrapper { padding: 50px 20px 50px 20px; } } .top-panel h1 { font-family: "Neo Sans W01", sans-serif; font-weight: normal; margin: 0 0 50px 0; font-size: 60px; display: inline-block; overflow: hidden; vertical-align: middle; } @media (min-width: 320px) { .top-panel h1 { font-size: calc(60px + 40 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .top-panel h1 { font-size: 100px; } } .home .top-panel h1 { min-height: 234px; height: 250px; min-height: 250px; } @media (min-width: 768px) { .home .top-panel h1 { min-height: 330px; height: 330px; } } .top-panel h1 .small { display: block; font-family: "Neo Sans W01 Bold", sans-serif; } @media (min-width: 600px) { .top-panel h1 .small { display: none; } } .top-panel h1 div, .top-panel h1 span { display: inline-block; } .top-panel h1 span { font-family: "Neo Sans W01 Bold", sans-serif; } @media (max-width: 600px) { .top-panel h1 span { display: none; } } .top-panel h1 .cursor { position: relative; left: -1rem; } @media screen and (max-width: 790px) { .top-panel h1 { margin: 0 0 20px 0; } } .top-panel__cards { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-align-content: flex-start; align-content: flex-start; margin: 0 0 0 0; padding: 0 0 0 0; } @media screen and (max-width: 860px) { .top-panel__cards { display: block; } } .top-panel__card { width: 33.3333%; max-width: 33.3333%; padding: 0 10px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; } @media screen and (max-width: 860px) { .top-panel__card { width: auto !important; max-width: none; display: block; -webkit-box-orient: initial; -webkit-box-direction: initial; -webkit-flex-direction: initial; flex-direction: initial; } } .top-panel__card-top-link { position: relative; display: block; margin: 0 0 15px 0; padding: 0 0 0 20px; font-family: "Neo Sans W01", sans-serif; font-size: 1.25rem; text-decoration: none; border-left: 8px solid #555555; line-height: 40px; -webkit-transition: padding 0.25s ease-in-out; transition: padding 0.25s ease-in-out; } .ie .top-panel__card-top-link { height: 70px; } @media (max-width: 860px) { .top-panel__card-top-link { font-size: 1rem; } } .top-panel__card-top-link svg { width: 27px; vertical-align: middle; margin: 0 0 0 10px; } .top-panel__card-top-link:hover { text-decoration: none; padding: 0 0 0 30px; } .top-panel__card-article-link { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; } @media (max-width: 860px) { .top-panel__card-article-link { margin-bottom: 20px; } } .top-panel__card-article-link a { position: relative; display: block; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } .top-panel__card-article-link a .top-panel__card-article-image { display: block; position: relative; margin: 0 0 0 0; padding: 0 0 0 0; overflow: hidden; width: 100%; height: 240px; } .top-panel__card-article-link a .top-panel__card-article-image img { display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; height: 100%; -webkit-transition: all 350ms ease; transition: all 350ms ease; -webkit-transform: scale(1); transform: scale(1); -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;'; } .top-panel__card-article-link a .top-panel__card-article-title { position: absolute; top: 0; left: 0; width: 100%; padding: 17px 17px 17px 17px; margin: 0 0 0 0; color: #ffffff; background: -webkit-linear-gradient(top, #000000, transparent); background: linear-gradient(to bottom, #000000, transparent); } .top-panel__card-article-link a .top-panel__card-article-title p { margin: 0 0 0 0; font-size: 1.4rem; } @media (max-width: 950px) { .top-panel__card-article-link a .top-panel__card-article-title p { font-size: 1rem; } } .top-panel__card-article-link a:hover { text-decoration: none; } .top-panel__card-article-link a:hover .top-panel__card-article-image img { -webkit-transform: scale(1.1); transform: scale(1.1); } .video-panel { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #000000; } .video-panel video { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; -o-object-fit: cover; object-fit: cover; } .video-panel__play-button { position: absolute; display: block; top: 50%; right: 50%; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); width: 180px; height: 177px; border: none; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 0 0 0; padding: 0 0 0 0; cursor: pointer; } @media screen and (max-width: 470px) { .video-panel__play-button { width: 90px; height: 88.5px; } } .video-panel__play-button svg { width: 100%; height: 100%; } .video-panel__play-button svg ellipse { opacity: 0.5; -webkit-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; } .video-panel__play-button:hover svg ellipse { opacity: 1; } .promotion-panel { position: relative; overflow: hidden; padding-left: 15px; padding-right: 15px; background: #eee; padding-bottom: 30px; padding-top: 30px; } @media (min-width: 320px) { .promotion-panel { padding-bottom: calc(30px + 85 * (100vw - 320px) / 1380); padding-top: calc(30px + 85 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .promotion-panel { padding-bottom: 115px; padding-top: 115px; } } .promotion-panel--blue li:before { background-color: #0060A9; } .promotion-panel--blue .icon-button { background-color: #0060A9; color: #ffffff; } .promotion-panel--blue .icon-button svg path { fill: #ffffff; } .promotion-panel--green li:before { background-color: #3CA542; } .promotion-panel--green .icon-button { background-color: #3CA542; color: #ffffff; } .promotion-panel--green .icon-button svg path { fill: #ffffff; } .promotion-panel--yellow li:before { background-color: #F9E700; } .promotion-panel--yellow .icon-button { background-color: #F9E700; } .promotion-panel--orange li:before { background-color: #F6A900; } .promotion-panel--orange .icon-button { background-color: #F6A900; } .promotion-panel--red li:before { background-color: #DD1840; } .promotion-panel--red .icon-button { background-color: #DD1840; color: #ffffff; } .promotion-panel--red .icon-button svg path { fill: #ffffff; } .promotion-panel--purple li:before { background-color: #A5137F; } .promotion-panel--purple .icon-button { background-color: #A5137F; color: #ffffff; } .promotion-panel--purple .icon-button svg path { fill: #ffffff; } .promotion-panel__wrapper { position: relative; max-width: calc(1720px - 30px); margin-left: auto; margin-right: auto; } @media screen and (min-width: 1024px) { .promotion-panel__wrapper { display: -webkit-box; display: -webkit-flex; display: flex; } } @media screen and (min-width: 1024px) { .promotion-panel__overview { width: 50%; padding-left: 30px; } } @media screen and (min-width: 1024px) and (min-width: 320px) { .promotion-panel__overview { padding-left: calc(30px + 70 * (100vw - 320px) / 1380); } } @media screen and (min-width: 1024px) and (min-width: 1700px) { .promotion-panel__overview { padding-left: 100px; } } .promotion-panel__media { text-align: center; } @media screen and (min-width: 1024px) { .promotion-panel__media { width: 50%; } } .promotion-panel__rte { display: none; margin-bottom: 45px; } @media screen and (min-width: 640px) { .promotion-panel__rte { display: block; } } .promotion-panel__rte p { margin-bottom: 35px; } .promotion-panel__rte ul { position: relative; list-style-position: inside; list-style: none; margin-left: 0; padding-left: 0; } .promotion-panel__rte ul li { position: relative; margin-bottom: 12px; padding-left: 22px; font-family: "Neo Sans W01 Bold", sans-serif; } .promotion-panel__rte ul li:before { content: ''; position: absolute; top: 4px; left: 0; width: 8px; height: 14px; } .promotion-panel h2.promotion-panel__heading, .promotion-panel__product-heading { display: block; margin-bottom: 30px; font-family: "Neo Sans W01", sans-serif; font-size: 24px; text-align: left; } @media (min-width: 320px) { .promotion-panel h2.promotion-panel__heading, .promotion-panel__product-heading { font-size: calc(24px + 26 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .promotion-panel h2.promotion-panel__heading, .promotion-panel__product-heading { font-size: 50px; } } .promotion-panel__heading { font-size: 24px; } @media (min-width: 320px) { .promotion-panel__heading { font-size: calc(24px + 8 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .promotion-panel__heading { font-size: 32px; } } .promotion-panel__sub-heading { font-size: 18px; } @media (min-width: 320px) { .promotion-panel__sub-heading { font-size: calc(18px + 6 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .promotion-panel__sub-heading { font-size: 24px; } } .promotion-panel__product-logo { display: block; width: 100%; max-width: 328px; margin-bottom: 30px; } .promotion-panel__product-img { display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 454px; margin-bottom: 30px; } .promotion-panel__product-link { display: inline-block; } .our-expertise-panel { position: relative; overflow: hidden; background: #ffffff; padding-left: 15px; padding-right: 15px; padding-bottom: 40px; padding-top: 40px; } @media (min-width: 320px) { .our-expertise-panel { padding-bottom: calc(40px + 75 * (100vw - 320px) / 1380); padding-top: calc(40px + 75 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-expertise-panel { padding-bottom: 115px; padding-top: 115px; } } .our-expertise-panel__wrapper { position: relative; z-index: 1; max-width: calc(1720px - 30px); margin-left: auto; margin-right: auto; } @media screen and (min-width: 1024px) { .our-expertise-panel__inner { display: -webkit-box; display: -webkit-flex; display: flex; } } .our-expertise-panel__heading { font-size: 24px; margin-bottom: 30px; font-family: "Neo Sans W01", sans-serif; } @media (min-width: 320px) { .our-expertise-panel__heading { font-size: calc(24px + 56 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-expertise-panel__heading { font-size: 80px; } } @media (min-width: 320px) { .our-expertise-panel__heading { margin-bottom: calc(30px + 57 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-expertise-panel__heading { margin-bottom: 87px; } } .our-expertise-panel__heading span { font-family: "Neo Sans W01 Bold", sans-serif; } .our-expertise-panel__rte { margin-bottom: 30px; padding-left: 0px; } @media screen and (min-width: 1024px) { .our-expertise-panel__rte { width: 50%; padding-right: 30px; } } @media screen and (min-width: 1024px) and (min-width: 320px) { .our-expertise-panel__rte { padding-right: calc(30px + 70 * (100vw - 320px) / 1380); } } @media screen and (min-width: 1024px) and (min-width: 1700px) { .our-expertise-panel__rte { padding-right: 100px; } } @media screen and (min-width: 1440px) { .our-expertise-panel__rte { width: 60%; } } .our-expertise-panel__rte p { margin-bottom: 30px; font-size: 16px; font-size: 1rem; } @media screen and (min-width: 768px) { .our-expertise-panel__rte p { font-size: 18px; font-size: 1.125rem; } } .our-expertise-panel__rte p:first-child { font-size: 20px; line-height: 1.5; } @media (min-width: 320px) { .our-expertise-panel__rte p:first-child { font-size: calc(20px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-expertise-panel__rte p:first-child { font-size: 24px; } } .our-expertise-panel__rte p:last-child { margin-bottom: 0; } @media (min-width: 1024px) { .our-expertise-panel__rte { padding-left: calc(0px + 150 * (100vw - 1024px) / 676); } } @media (min-width: 1700px) { .our-expertise-panel__rte { padding-left: 150px; } } @media screen and (max-width: 639px) { .our-expertise-panel__sectors { display: none; } } @media screen and (min-width: 1024px) { .our-expertise-panel__sectors { width: 50%; } } @media screen and (min-width: 1440px) { .our-expertise-panel__sectors { width: 40%; } } .our-expertise-panel__sectors p { font-size: 20px; line-height: 1.5; } @media (min-width: 320px) { .our-expertise-panel__sectors p { font-size: calc(20px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-expertise-panel__sectors p { font-size: 24px; } } .our-expertise-panel__sectors-list { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .our-expertise-panel__sectors-list .sector-list__item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; width: 50%; } .our-expertise-panel__sectors-list .sector-list__item:nth-child(even) { padding-left: 15px; } .our-expertise-panel__sectors-list .sector-list__item:nth-child(odd) { padding-right: 15px; } .our-expertise-panel__sectors-carousel { margin-top: 35px; } @media (min-width: 320px) { .our-expertise-panel__sectors-carousel { margin-top: calc(35px + 65 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-expertise-panel__sectors-carousel { margin-top: 100px; } } .our-problem-panel { position: relative; padding-left: 15px; padding-right: 15px; padding-bottom: 40px; padding-top: 40px; color: #ffffff; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 320px) { .our-problem-panel { padding-bottom: calc(40px + 75 * (100vw - 320px) / 1380); padding-top: calc(40px + 75 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-problem-panel { padding-bottom: 115px; padding-top: 115px; } } .our-problem-panel:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #000000, transparent); background: linear-gradient(90deg, #000000, transparent); } .our-problem-panel__wrapper { position: relative; z-index: 1; max-width: calc(1720px - 30px); margin-left: auto; margin-right: auto; } .our-problem-panel__content { width: 100%; max-width: 957px; margin-bottom: 30px; } @media (min-width: 320px) { .our-problem-panel__content { margin-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-problem-panel__content { margin-bottom: 100px; } } .our-problem-panel__rte { padding-left: 0px; } @media (min-width: 1024px) { .our-problem-panel__rte { padding-left: calc(0px + 150 * (100vw - 1024px) / 676); } } @media (min-width: 1700px) { .our-problem-panel__rte { padding-left: 150px; } } .our-problem-panel__rte p { margin-bottom: 30px; font-size: 16px; font-size: 1rem; } @media screen and (min-width: 768px) { .our-problem-panel__rte p { font-size: 18px; font-size: 1.125rem; } } .our-problem-panel__rte p:last-child { margin-bottom: 0; } .our-problem-panel__list { width: 100%; max-width: 1000px; } .our-problem-panel__heading { font-size: 24px; margin-bottom: 30px; font-family: "Neo Sans W01", sans-serif; } @media (min-width: 320px) { .our-problem-panel__heading { font-size: calc(24px + 56 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-problem-panel__heading { font-size: 80px; } } @media (min-width: 320px) { .our-problem-panel__heading { margin-bottom: calc(30px + 57 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .our-problem-panel__heading { margin-bottom: 87px; } } .our-problem-panel__heading span { font-family: "Neo Sans W01 Bold", sans-serif; } /* ------------------------------------------------ Single Distributor Post-Type && Archive Page ---------------------------------------------------*/ .distributors { margin: 0 auto 0px auto; max-width: 1700px; position: relative; } .distributors:last-of-type { margin-bottom: 4rem; } .distributors__country { position: relative; display: block; max-width: 1700px; margin: 1rem auto; padding-top: 2vh; padding-left: 15px; padding-right: 15px; } @media (min-width: 320px) { .distributors__country { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .distributors__country { padding-left: 50px; padding-right: 50px; } } .distributors__country img { display: none; } @media (min-width: 1730px) { .distributors__country { padding-left: 0; padding-right: 0; } } .distributors__country h2 { margin-bottom: 30px; } .distributors__inner { margin: 0; padding: 20px; margin-left: 15px; margin-right: 15px; background-color: #E8E8E9; } @media (min-width: 320px) { .distributors__inner { padding: calc(20px + 30 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .distributors__inner { padding: 50px; } } @media (min-width: 320px) { .distributors__inner { margin-left: calc(15px + 35 * (100vw - 320px) / 1380); margin-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .distributors__inner { margin-left: 50px; margin-right: 50px; } } @media (min-width: 1730px) { .distributors__inner { margin-left: 0; margin-right: 0; } } .distributors__content { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; width: 100%; max-width: 100%; } @media (max-width: 1023px) { .distributors__content { -webkit-flex-wrap: wrap; flex-wrap: wrap; } } .distributors__heading { width: 100%; } .distributors__heading h3 { margin-bottom: 1.5rem; } .distributors__heading h3:after { content: ''; display: block; margin-top: 1.75rem; border-bottom: 2px solid #CCCCCC; } .distributors__heading img { display: none; } .distributors__intro { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; width: 25%; max-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; flex: 0 0 25%; padding: 0 2vw 0 0; margin-bottom: 30px; padding-right: 30px; } @media (min-width: 320px) { .distributors__intro { margin-bottom: calc(30px + 30 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .distributors__intro { margin-bottom: 60px; } } @media (min-width: 1024px) { .distributors__intro { padding-right: calc(30px + 70 * (100vw - 1024px) / 676); } } @media (min-width: 1700px) { .distributors__intro { padding-right: 100px; } } .distributors__intro p:last-of-type { margin-bottom: 0; } @media (max-width: 1023px) { .distributors__intro { width: 100%; max-width: 100%; padding: 0; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; flex: 0 0 100%; } } .distributors__locations { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; max-width: 100%; } .distributors__locations-location { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; width: 33%; max-width: 33%; -webkit-box-flex: 0; -webkit-flex: 0 0 33%; flex: 0 0 33%; margin-bottom: 30px; padding: 0 2vw; } @media (min-width: 320px) { .distributors__locations-location { margin-bottom: calc(30px + 30 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .distributors__locations-location { margin-bottom: 60px; } } .distributors__locations-location p { margin-bottom: 20px; } .distributors__locations-location p:last-child { margin-bottom: 0; } .distributors__locations-location-logo-wrapper { display: inline-block; padding: 10px 10px 10px 10px; background-color: #ffffff; margin: 0 auto 20px 0; } .distributors__locations-location-logo { width: auto; max-width: 100%; display: block; margin: 0 auto 0 0; } @media (max-width: 1200px) { .distributors__locations-location { width: 50%; max-width: 50%; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; flex: 0 0 50%; padding: 0; } .distributors__locations-location:nth-child(even) { padding-left: 30px; } .distributors__locations-location:nth-child(odd) { padding-right: 30px; } } @media (max-width: 640px) { .distributors__locations-location { width: 100%; max-width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; flex: 0 0 100%; padding: 0; } .distributors__locations-location:nth-child(even) { padding: 0; } .distributors__locations-location:nth-child(odd) { padding: 0; } } .distributors__locations-location-button { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 5px 0; text-decoration: none; } .distributors__locations-location-button svg { display: block; margin-right: 10px; width: 30px; height: 24px; fill: #555555; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .distributors__locations-location-button:hover svg, .distributors__locations-location-button:focus svg { fill: #7b7b7b; -webkit-transform: scale(0.9); transform: scale(0.9); margin-right: 7px; } .distributors__locations-location-buynow { margin: 0em; padding: 10px 15px; background-color: #ffffff; color: #ffffff; font-family: "Neo Sans W01", sans-serif; font-size: 1.15rem; cursor: pointer; display: inline-block; text-align: center; box-sizing: border-box; text-decoration: none; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .distributors__locations-location-buynow:hover { background-color: #f2f2f2; } .distributors__locations-location-buynow:hover img { margin-left: 16px; margin-right: 10px; } .distributors__locations-location-buynow:active, .distributors__locations-location-buynowfocus { outline: none; } .distributors__locations-location-buynow img { width: 20px; margin-left: 8px; margin-right: 18px; vertical-align: middle; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .distributors__locations-location-email { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 5px 0; text-decoration: none; } .distributors__locations-location-email svg { display: block; margin-right: 10px; width: 30px; height: 16px; stroke: #555555; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .distributors__locations-location-email:hover svg, .distributors__locations-location-email:focus svg { stroke: #7b7b7b; -webkit-transform: scale(0.9); transform: scale(0.9); margin-right: 7px; } /* ------------------------------------------------ Product Category Listing Page ---------------------------------------------------*/ .product-listing { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; /*--------------------------------- Product Listing Header ---------------------------------*/ /*--------------------------------- Product Listing Main Listing Area Layout ---------------------------------*/ /*--------------------------------- Product Listing Search Form Section ---------------------------------*/ /*--------------------------------- Product Filter Section ---------------------------------*/ /*--------------------------------- Product Filter Section - Header ---------------------------------*/ /*----------------------------------------- Product Filter Section - form section -----------------------------------------*/ /*--------------------------------- Product Listing Article List ---------------------------------*/ /*--------------------------------- Product Listing Sidebar ---------------------------------*/ } .product-listing__header { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; max-width: 1900px; margin: 0 auto 0 auto; padding: 0 0 0 0; background-size: cover; background-position: center center; background-repeat: no-repeat; } .product-listing__header.blue { background-color: #0060A9; background-image: url("../images/wave-bg-blue.jpg"); } .product-listing__header.green { background-color: #3CA542; background-image: url("../images/wave-bg-green.jpg"); } .product-listing__header.yellow { background-color: #F9E700; background-image: url("../images/wave-bg-yellow.jpg"); } .product-listing__header.yellow h2 { color: #555555; } .product-listing__header.yellow p { color: #555555; } .product-listing__header.orange { background-color: #F6A900; background-image: url("../images/wave-bg-orange.jpg"); } .product-listing__header.red { background-color: #DD1840; background-image: url("../images/wave-bg-red.jpg"); } .product-listing__header.purple { background-color: #A5137F; background-image: url("../images/wave-bg-purple.jpg"); } .product-listing__header.grey { background-color: #979797; background-image: url("../images/wave-bg-grey.jpg"); } .product-listing__header-image { position: relative; width: 40%; max-width: 607px; margin: 0 0 0 0; padding: 0 0 0 0; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } @media screen and (max-width: 580px) { .product-listing__header-image { width: 100%; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } } .product-listing__header-image img { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; } @media screen and (min-width: 581px) { .product-listing__header-image img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } } .product-listing__header-text { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 0 0 0; padding: 15px; color: #ffffff; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } @media (min-width: 320px) { .product-listing__header-text { padding: calc(15px + 85 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__header-text { padding: 100px; } } @media screen and (max-width: 580px) { .product-listing__header-text { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } } .product-listing__header-text h2 { color: #ffffff; margin: 0 0 40px 0; font-size: 30px; } @media (min-width: 320px) { .product-listing__header-text h2 { font-size: calc(30px + 10 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__header-text h2 { font-size: 40px; } } @media screen and (max-width: 580px) { .product-listing__header-text h2 { margin: 0 0 20px 0; } } .product-listing__header-text p { font-size: 16px; } @media (min-width: 320px) { .product-listing__header-text p { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__header-text p { font-size: 20px; } } .product-listing__header-text p:last-of-type { margin: 0 0 0 0; } .product-listing__main-content { position: relative; display: block; margin: 0 auto 0 auto; padding-top: 30px; padding-left: 15px; padding-right: 15px; width: 100%; max-width: 1700px; } @media (min-width: 320px) { .product-listing__main-content { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__main-content { padding-top: 100px; } } @media (min-width: 320px) { .product-listing__main-content { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__main-content { padding-left: 50px; padding-right: 50px; } } @media screen and (max-width: 1700px) { .product-listing__main-content { padding-bottom: 0; } } @media screen and (max-width: 960px) { .product-listing__main-content { padding-bottom: 15px; } } @media (min-width: 1730px) { .product-listing__main-content { padding-left: 5px; padding-right: 5px; } } .product-listing__search-form-section { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin: 0 0 40px 0; padding: 0 0 0 0; } .product-listing__search-form { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 0 0 0; padding-right: 30px; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } @media (min-width: 961px) { .product-listing__search-form { padding-right: calc(30px + 70 * (100vw - 961px) / 739); } } @media (min-width: 1700px) { .product-listing__search-form { padding-right: 100px; } } @media screen and (max-width: 960px) { .product-listing__search-form { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; padding-right: 0; } } .product-listing__search-form h1 { font-size: 22px; margin: 0 0 37px 0; } @media (min-width: 320px) { .product-listing__search-form h1 { font-size: calc(22px + 8 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__search-form h1 { font-size: 30px; } } @media screen and (max-width: 960px) { .product-listing__search-form h1 { margin: 0 0 15px 0; } } .product-listing__search-form form { position: relative; display: block; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; background-color: rgba(232, 232, 233, 0.1); } .product-listing__search-form form fieldset { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; border: 1px solid #979797; } .product-listing__search-form form input[type="text"] { padding: 10px 55px 10px 10px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; background-color: transparent; border: none; font-family: "Neo Sans W01 Light734947", sans-serif; font-style: italic; font-size: 1.25rem; font-weight: 300; width: calc(100% - 53px); } .product-listing__search-form form textarea { padding: 10px 55px 10px 10px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; background-color: transparent; border: none; font-family: "Neo Sans W01 Light734947", sans-serif; font-style: italic; font-size: 1.25rem; font-weight: 300; width: calc(100% - 53px); resize: none; } .product-listing__search-form form input[type="submit"] { width: 53px; height: 46px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; background-image: url("../images/arrow-right-dark.svg"); background-repeat: no-repeat; background-size: 27px auto; background-position: left 10px center; font-size: 0; cursor: pointer; -webkit-transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out; position: absolute; right: 0; top: 0; } .safari .product-listing__search-form form input[type="submit"] { margin-top: 2px; } .product-listing__search-form form input[type="submit"]:hover { background-position: left 20px center; } .product-listing__search-form-sidebar { position: relative; margin: 0 0 0 0; padding: 0 0 0 0; width: 505px; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } @media screen and (max-width: 1300px) { .product-listing__search-form-sidebar { width: 350px; } } @media screen and (max-width: 960px) { .product-listing__search-form-sidebar { width: 100%; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; padding: 0 0 20px 0; } } .product-listing__search-form-sidebar h3 { font-family: "Neo Sans W01", sans-serif; font-size: 16px; margin: 0 0 15px 0; } @media (min-width: 320px) { .product-listing__search-form-sidebar h3 { font-size: calc(16px + 8 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__search-form-sidebar h3 { font-size: 24px; } } .product-listing__search-form-sidebar p { display: block; font-family: "Neo Sans W01 Light734947", sans-serif; margin: 0 0 0 0; border-left: 8px solid #555555; font-size: 16px; } @media (min-width: 320px) { .product-listing__search-form-sidebar p { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__search-form-sidebar p { font-size: 20px; } } .product-listing__search-form-sidebar p a { text-decoration: none; display: block; margin: 0 0 0 0; padding: 5px 45px 5px 17px; background-image: url("../images/arrow-right-dark.svg"); background-position: center right 15px; background-size: 27px auto; background-repeat: no-repeat; -webkit-transition: background-position 0.25s ease-in-out; transition: background-position 0.25s ease-in-out; } .product-listing__search-form-sidebar p a:hover { text-decoration: none; background-position: center right 5px; } .product-listing__product-filter { position: relative; display: block; margin: 0 0 42px 0; width: 100%; max-width: 1095px; padding: 0 0 0 0; } .product-listing__product-filter-header { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -webkit-align-items: center; align-items: center; justify-items: flex-start; margin: 0 0 0 0; padding: 0 0 0 0; } @media screen and (max-width: 830px) { .product-listing__product-filter-header { display: none; } } .product-listing__product-filter-button { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: center; align-content: center; width: 150px; background-color: #E8E8E9; margin: 0 0 0 0; padding: 15px 15px 15px 15px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #555555; cursor: pointer; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease; } .product-listing__product-filter-button:hover { background-color: whitesmoke; } .product-listing__product-filter-button .product-listing__product-filter-button-icon { width: 30px; height: 30px; background-repeat: no-repeat; background-position: center center; } .product-listing__product-filter-button span { font-size: 18px; padding: 0 0 0 20px; } @media (min-width: 320px) { .product-listing__product-filter-button span { font-size: calc(18px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__product-filter-button span { font-size: 22px; } } .product-listing__product-filter-button.close .product-listing__product-filter-button-icon { background-size: 30px auto; background-image: url("../images/filter-icon.svg"); } .product-listing__product-filter-button.open .product-listing__product-filter-button-icon { background-size: 17px auto; background-image: url("../images/cross.svg"); } .product-listing__product-filter-header-text { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 0 0 0 30px; margin: 0 0 0 0; } .product-listing__product-filter-header-text img { display: block; margin: 0 0 0 0; width: 27px; } .product-listing__product-filter-header-text h4 { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 0 0 0; padding: 0 0 0 20px; font-family: "Neo Sans W01", sans-serif; font-weight: normal; font-size: 18px; } @media (min-width: 320px) { .product-listing__product-filter-header-text h4 { font-size: calc(18px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__product-filter-header-text h4 { font-size: 22px; } } .product-listing__product-filter-form { position: relative; display: none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; justify-items: flex-start; margin: 0 0 0 0; padding: 70px 30px 70px 30px; background-color: #E8E8E9; } .product-listing__product-filter-form.show { display: -webkit-box; display: -webkit-flex; display: flex; } .product-listing__product-filter-form-col { border: none; } .product-listing__product-filter-form-col:nth-of-type(1) { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 0 0 0; padding: 0 50px 0 0; } .product-listing__product-filter-form-col:nth-of-type(1) .loading-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(232, 232, 233, 0.5); z-index: 8888; display: none; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset { padding: 25px 5px 10px 5px; border-bottom: 2px solid #CCCCCC; /*--------------------------------------------------------------- Radio Button & Span Styling ---------------------------------------------------------------*/ /*--------------------------------------------------------------- Checkbox & Span Styling ---------------------------------------------------------------*/ /*--------------------------------------------------------------- Select Dropdown & Span Styling ---------------------------------------------------------------*/ /*--------------------------------------------------------------- Jquery UI Slider Styling - CLASS NAMES ARE SET BY JQUERY UI ---------------------------------------------------------------*/ /*--------------------------------------------------------------- Encapulated Resin - Hardness two styling ---------------------------------------------------------------*/ } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-input-wrapper { position: relative; display: inline-block; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-input-wrapper--range-slider { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; justify-items: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-input-wrapper--range-slider input[type=text] { width: 65px; border: 1px solid #CCCCCC; font-size: 1rem; padding: 3px 3px 3px 3px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-fieldset-label { display: block; width: 100%; margin: 0 0 7px 0; font-family: "Neo Sans W01 Bold", sans-serif; font-size: 16px; } @media (min-width: 320px) { .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-fieldset-label { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-fieldset-label { font-size: 18px; } } .product-listing__product-filter-form-col:nth-of-type(1) fieldset input[type=radio] { display: none; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset input[type=radio]:checked + .product-listing__product-filter-form-radio-label::before { border: 5px solid #ffffff; background-color: #555555; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-radio-label { display: block; padding: 5px 20px 5px 35px; font-size: 16px; } @media (min-width: 320px) { .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-radio-label { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-radio-label { font-size: 18px; } } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-radio-label:hover { cursor: pointer; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-radio-label::before { content: ''; position: absolute; top: 0; bottom: 0; margin: auto; left: 0; width: 23px; height: 23px; border: 5px solid #ffffff; background-color: #ffffff; border-radius: 50px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset input[type=checkbox] { display: none; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset input[type=checkbox]:checked + .product-listing__product-filter-form-checkbox-label::before { border: 5px solid #ffffff; background-color: #555555; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-checkbox-label { display: block; padding: 5px 20px 5px 35px; font-size: 16px; } @media (min-width: 320px) { .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-checkbox-label { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-checkbox-label { font-size: 18px; } } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-checkbox-label:hover { cursor: pointer; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-form-checkbox-label::before { content: ''; position: absolute; top: 0; bottom: 0; margin: auto; left: 0; width: 23px; height: 23px; border: 5px solid #ffffff; background-color: #ffffff; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-select-wrapper { display: block; margin: 0 0 0 0; background-color: #ffffff; background-image: url("../images/cheveron-down.svg"); background-position: center right 10px; background-size: 21px auto; background-repeat: no-repeat; border: 1px solid #CCCCCC; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .product-listing__product-filter-select-wrapper select { padding: 10px 50px 10px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background-color: transparent; font-size: 1rem; color: #63666A; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .ui-slider { width: 260px; margin: 0 15px 0 15px; border-radius: 3.5px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .ui-slider-handle { top: -0.2em; height: 17px; width: 17px; background-color: #555555; border: none; border-radius: 50%; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .ui-slider-range { background-color: #979797; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset.hardness_two_fieldset .product-listing__product-filter-form-input-wrapper:nth-of-type(1) { display: inline-block; vertical-align: top; margin: 0 0 0 55px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset.hardness_two_fieldset .product-listing__product-filter-form-input-wrapper--range-slider { display: block; margin: 10px 0 0 0; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset.hardness_two_fieldset input[type=text] { display: none; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset.hardness_two_fieldset .ui-slider { width: 600px; margin: 0 15px 15px 57px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_two_diagram { position: relative; margin: 0 auto 10px 55px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: 600px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_two_diagram__section { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border: 1px solid #CCCCCC; background-color: #979797; padding: 2px 2px 2px 2px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_two_diagram__section p { font-size: 12px; font-size: 0.75rem; margin: 0 0 0 0; text-align: center; color: #000000; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_two_diagram__section--very_soft { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 41px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_two_diagram__section--soft { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 105px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_two_diagram__section--medium_soft { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_two_diagram__section--medium_hard { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 83px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_two_diagram__section--hard { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 86px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p { font-size: 12px; font-size: 0.75rem; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(1) { margin: 0 0 0 8px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(2) { margin: 0px 3px 0 30px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(3) { margin: 0px 10px 0 26px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(4) { margin: 0px 10px 0 15px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(5) { margin: 0 10px 0 17px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(6) { margin: 0 10px 0 16px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(7) { margin: 0 10px 0 18px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(8) { margin: 0 10px 0 17px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(9) { margin: 0 10px 0 17px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_a p span:nth-child(10) { margin: 0 10px 0 15px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_b p { font-size: 12px; font-size: 0.75rem; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_b p span:nth-child(1) { margin: 6px 0 0 376px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_b p span:nth-child(2) { margin: 0px 3px 0 28px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_b p span:nth-child(3) { margin: 0 10px 0 23px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_b p span:nth-child(4) { margin: 0 10px 0 13px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_b p span:nth-child(5) { margin: 0 10px 0 20px; } .product-listing__product-filter-form-col:nth-of-type(1) fieldset .hardness_shore_b p span:nth-child(6) { margin: 0 10px 0 22px; } .product-listing__product-filter-form-col:nth-of-type(2) { width: 251px; } .product-listing__product-filter-results { display: block; width: 100%; margin: 0 0 20px 0; padding: 20px 20px 20px 20px; background-color: #ffffff; } .product-listing__product-filter-results h4 { font-family: "Neo Sans W01", sans-serif; font-weight: normal; font-size: 1rem; margin: 0 0 28px 0; padding: 0 0 0 0; } .product-listing__product-filter-results p { margin: 0 0 0 0; font-size: 18px; font-weight: bold; } @media (min-width: 320px) { .product-listing__product-filter-results p { font-size: calc(18px + 32 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__product-filter-results p { font-size: 50px; } } .product-listing__product-filter-reset-button { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; justify-items: flex-start; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: "Neo Sans W01", sans-serif; color: #555555; background-color: #ffffff; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease; font-size: 1rem; padding: 10px 10px 10px 10px; margin: 0 0 20px 0; cursor: pointer; } .product-listing__product-filter-reset-button:hover { background-color: #CCCCCC; } .product-listing__product-filter-reset-button img { width: 20px; } .product-listing__product-filter-reset-button span { padding: 0 0 0 20px; } .product-listing__product-filter-show-results-button { display: inline-block; padding: 10px 10px 10px 10px; margin: 0 0 0 0; color: #ffffff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: #555555; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease; font-family: "Neo Sans W01", sans-serif; font-size: 1rem; cursor: pointer; } .product-listing__product-filter-show-results-button:hover { background-color: #979797; } .product-listing__article-list { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin: 0 0 0 0; padding: 0 0 0 0; } .product-listing__articles { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin: 0 0 0 0; padding: 0 2.5% 60px 0; padding-right: 30px; } @media (min-width: 961px) { .product-listing__articles { padding-right: calc(30px + 70 * (100vw - 961px) / 739); } } @media (min-width: 1700px) { .product-listing__articles { padding-right: 100px; } } @media screen and (max-width: 960px) { .product-listing__articles { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 0 0 30px 0; } } .product-listing__article { display: block; position: relative; width: 33.3%; height: 371px; margin: 0 0 0 0; padding: 0 0 0 0; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @media screen and (max-width: 1399px) { .product-listing__article { width: 50%; } } @media screen and (max-width: 460px) { .product-listing__article { width: 100%; } } .product-listing__article:hover .product-listing__article-face--front { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .product-listing__article:hover .product-listing__article-face--back { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .product-listing__article-anchor { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-listing__article-wrapper { display: block; width: 100%; height: 100%; position: relative; -webkit-transition: 1s; transition: 1s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .product-listing__article-face { display: block; position: absolute; height: 100%; width: 100%; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; transition: 1s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .product-listing__article-face--front { background-image: url("../images/background-product-image.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 5% 5% 5% 5%; text-align: center; z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .product-listing__article-face--front p { margin: 0 0 5px 0; text-align: center; } .product-listing__article-face--front p:first-of-type { display: inline-block; font-family: "Neo Sans W01 Bold", sans-serif; color: #ffffff; padding: 5px 10px 5px 10px; } .product-listing__article-face--front p.blue { background-color: #0060A9; } .product-listing__article-face--front p.green { background-color: #3CA542; } .product-listing__article-face--front p.yellow { background-color: #F9E700; color: #555555; } .product-listing__article-face--front p.orange { background-color: #F6A900; } .product-listing__article-face--front p.red { background-color: #DD1840; } .product-listing__article-face--front p.purple { background-color: #A5137F; } .product-listing__article-face--front p.grey { background-color: #979797; } .product-listing__article-face--front img { position: relative; width: 55%; margin: 0 auto 0 auto; } .search .product-listing__article-face--front img { width: 33%; } .product-listing__article-face--back { padding: 5% 5% 5% 5%; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .product-listing__article-face--back .product-listing__article-face-inner-wrapper { -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .product-listing__article-face--back .product-listing__article-face-inner-wrapper div { width: 100%; } .product-listing__article-face--back p { color: #ffffff; text-align: center; margin: 0 0 5px 0; width: 100%; } .product-listing__article-face--back p:nth-of-type(2) { margin: 0 0 30px 0; } .product-listing__article-face--back p:last-of-type { display: inline-block; margin: 15px auto 0 auto; padding: 0 0 0 0; max-height: 165px; overflow: hidden; } @media screen and (max-width: 768px) { .product-listing__article-face--back p:last-of-type { font-size: 0.9rem; } } @media screen and (max-width: 600px) { .product-listing__article-face--back p:last-of-type { font-size: 0.8rem; } } .product-listing__article-face--back p:last-of-type a:not(.product-listing__article-anchor) { display: inline-block; margin: 0 0 0 0; padding: 5px 45px 5px 12px; color: #ffffff; background-image: url("../images/arrow-right.svg"); background-repeat: no-repeat; background-position: center right 10px; background-size: 24px auto; -webkit-transition: background-position 0.25s ease; transition: background-position 0.25s ease; border-left: 8px solid #ffffff; text-decoration: none; } .product-listing__article-face--back p:last-of-type a:not(.product-listing__article-anchor):hover { text-decoration: none; background-position: center right 5px; } .product-listing__article-face--back.blue { background-color: #0060A9; } .product-listing__article-face--back.green { background-color: #3CA542; } .product-listing__article-face--back.yellow { background-color: #F9E700; } .product-listing__article-face--back.yellow p { color: #555555; } .product-listing__article-face--back.yellow p:last-of-type a { border-left: 8px solid #555555; color: #555555; background-image: url("../images/arrow-right-dark.svg"); } .product-listing__article-face--back.yellow p:last-of-type a:hover { text-decoration: none; background-position: center right 5px; } .product-listing__article-face--back.orange { background-color: #F6A900; } .product-listing__article-face--back.red { background-color: #DD1840; } .product-listing__article-face--back.purple { background-color: #A5137F; } .product-listing__article-face--back.grey { background-color: #979797; } .product-listing__article-face-inner-wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; justify-items: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; height: 100%; text-align: center; } .product-listing__article-face-inner-wrapper img { position: relative; display: block; margin: 0 0 0 0; -webkit-flex-basis: auto; flex-basis: auto; -webkit-box-flex: 0; -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 1; flex-shrink: 1; min-height: 1px; } .product-listing__article-face-headings { position: relative; display: block; margin: 0 0 20px 0; padding: 0 0 0 0; width: 100%; } .product-listing__article-excerpt { width: 100%; } .product-listing__article-sidebar { position: relative; margin: 0 0 0 0; padding: 0 0 0 0; width: 505px; } @media screen and (max-width: 1300px) { .product-listing__article-sidebar { width: 350px; } } @media screen and (max-width: 960px) { .product-listing__article-sidebar { width: 100%; padding: 0 0 20px 0; } } .product-listing__article-sidebar section { display: block; width: 100%; } .product-listing__article-sidebar-text-area { margin: 0 0 35px 0; } .product-listing__article-sidebar-video { margin: 0 0 70px 0; } .product-listing__article-sidebar-brochure-list { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin: 0 0 70px 0; padding: 0 0 0 0; list-style: none; } .product-listing__article-sidebar-brochure-list li { position: relative; width: 50%; max-width: 177px; margin: 0 0 0 0; padding: 0 20px 0 0; } .product-listing__article-sidebar-brochure-list li a { display: block; } .product-listing__article-sidebar-brochure-list li a:link, .product-listing__article-sidebar-brochure-list li a:active, .product-listing__article-sidebar-brochure-list li a:visited { text-decoration: none; } .product-listing__article-sidebar-brochure-list li a img { display: block; margin: 0 0 17px 0; padding: 0 0 0 0; width: 100%; max-width: 157px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .product-listing__article-sidebar-brochure-list li a h4 { font-family: "Neo Sans W01", sans-serif; font-size: 1rem; margin: 0 0 0 0; } .product-listing__article-sidebar-brochure-list li a:hover { text-decoration: none; } .product-listing__article-sidebar-brochure-list li a:hover img { -webkit-transform: scale(0.9); transform: scale(0.9); } .product-listing__article-sidebar-brochure-list li a:hover h4.blue { color: #0060A9; } .product-listing__article-sidebar-brochure-list li a:hover h4.green { color: #3CA542; } .product-listing__article-sidebar-brochure-list li a:hover h4.yellow { color: #F9E700; } .product-listing__article-sidebar-brochure-list li a:hover h4.orange { color: #F6A900; } .product-listing__article-sidebar-brochure-list li a:hover h4.red { color: #DD1840; } .product-listing__article-sidebar-brochure-list li a:hover h4.purple { color: #A5137F; } .product-listing__article-sidebar-brochure-list li a:hover h4.grey { color: #979797; } .product-listing__article-sidebar-article-list { margin: 0 0 70px 0; } .product-listing__article-sidebar-article-list h4 { font-family: "Neo Sans W01 Light734947", sans-serif; font-size: 18px; margin: 0 0 25px 0; } @media (min-width: 320px) { .product-listing__article-sidebar-article-list h4 { font-size: calc(18px + 6 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-listing__article-sidebar-article-list h4 { font-size: 24px; } } .product-listing__article-sidebar-article-list ul { display: block; list-style: none; margin: 0 0 10px 0; padding: 0 0 0 0; } .product-listing__article-sidebar-article-list ul li { display: block; margin: 0 0 0 0; padding: 0px 0 0 0; } .product-listing__article-sidebar-article-list ul li a { display: block; padding: 0px 5px 10px 30px; background-size: 13px auto; background-position: top 5px left; background-repeat: no-repeat; background-image: url("../images/arrow-right-dark.svg"); color: #555555; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; text-decoration: none; } .product-listing__article-sidebar-article-list ul li a:hover { text-decoration: none; background-position: top 5px left 5px; } .product-listing__article-sidebar-article-list ul li a:hover.blue { color: #0060A9; } .product-listing__article-sidebar-article-list ul li a:hover.green { color: #3CA542; } .product-listing__article-sidebar-article-list ul li a:hover.yellow { color: #F9E700; } .product-listing__article-sidebar-article-list ul li a:hover.orange { color: #F6A900; } .product-listing__article-sidebar-article-list ul li a:hover.red { color: #DD1840; } .product-listing__article-sidebar-article-list ul li a:hover.purple { color: #A5137F; } .product-listing__article-sidebar-article-list ul li a:hover.grey { color: #979797; } /*------------------------------------ Product page Full List - Main Section -------------------------------------*/ .page-template-page-product-full-list { /*------------------------------------ Search Page - Main Section -------------------------------------*/ } .page-template-page-product-full-list main { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 80px 0 0 0; } @media screen and (max-width: 1700px) { .page-template-page-product-full-list main { padding: 50px 15px 0 15px; } } @media screen and (max-width: 720px) { .page-template-page-product-full-list main { padding: 20px 15px 0 15px; } } .page-template-page-product-full-list .product-listing__article-face--front img { width: 33%; } /* ------------------------------------------------ Product Compare Page ---------------------------------------------------*/ .product-compare { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; /*-------------------------------------------- Product Compare Main Area ----------------------------------------------*/ /*-------------------------------------------- Product Compare Main Area ----------------------------------------------*/ } .product-compare__main-content { position: relative; display: block; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 100%; max-width: 1700px; } @media screen and (max-width: 1700px) { .product-compare__main-content { padding: 0 2.5% 0 2.5%; } } @media screen and (max-width: 830px) { .product-compare__main-content { padding: 0 20px 15px 20px; } } .product-compare__main-content h1 { font-size: 26px; } @media (min-width: 320px) { .product-compare__main-content h1 { font-size: calc(26px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-compare__main-content h1 { font-size: 30px; } } .product-compare__compare-table { border-collapse: separate; } @media screen and (max-width: 860px) { .product-compare__compare-table thead { display: table-row-group; } .product-compare__compare-table thead tr { position: relative; top: 0; left: 0; display: table-row; } .product-compare__compare-table thead tr th { display: table-cell; } } .product-compare__compare-table th { background-color: #ffffff; border: 1px solid #E8E8E9; text-align: left; } .product-compare__compare-table th:nth-child(2), .product-compare__compare-table th:nth-child(3), .product-compare__compare-table th:nth-child(4), .product-compare__compare-table th:nth-child(5) { width: 330px; } @media screen and (max-width: 1650px) { .product-compare__compare-table th:nth-child(2), .product-compare__compare-table th:nth-child(3), .product-compare__compare-table th:nth-child(4), .product-compare__compare-table th:nth-child(5) { width: 270px; } } @media screen and (max-width: 1590px) { .product-compare__compare-table th:nth-child(2), .product-compare__compare-table th:nth-child(3), .product-compare__compare-table th:nth-child(4), .product-compare__compare-table th:nth-child(5) { width: 200px; } } @media screen and (max-width: 1070px) { .product-compare__compare-table th:nth-child(2), .product-compare__compare-table th:nth-child(3), .product-compare__compare-table th:nth-child(4), .product-compare__compare-table th:nth-child(5) { width: 96px; } } @media screen and (max-width: 860px) { .product-compare__compare-table th { display: table-cell; padding: 3px 3px 3px 3px; } } .product-compare__compare-table th button { margin: 0 0 10px 0; padding: 5px 10px 5px 10px; font-size: 1rem; background-color: #E8E8E9; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease; } @media (max-width: 768px) { .product-compare__compare-table th button { max-width: 96px; } } .product-compare__compare-table th button img { display: inline-block; margin: 0 5px 0 0; width: 17px; vertical-align: middle; } .product-compare__compare-table th button:hover { background-color: #b1b1b1; } .product-compare__compare-table th:nth-child(2) .product-compare__post-selector { display: none; } .product-compare__compare-table th .product-compare__product-image-title { display: block; background-image: url("../images/background-product-image.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 15px 15px 15px 15px; text-align: center; width: 100%; min-height: 315px; position: relative; } .product-compare__compare-table th .product-compare__product-image-title p { margin: 0 0 5px 0; text-align: center; color: #555555; } .product-compare__compare-table th .product-compare__product-image-title p.product_code { display: inline-block; font-family: "Neo Sans W01 Bold", sans-serif; color: #ffffff; padding: 5px 10px 5px 10px; } .product-compare__compare-table th .product-compare__product-image-title p:not(.product_code) { min-height: 140px; } @media (max-width: 768px) { .product-compare__compare-table th .product-compare__product-image-title p:not(.product_code) { word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; font-size: 0.875rem; } } .product-compare__compare-table th .product-compare__product-image-title p.blue { background-color: #0060A9; color: #ffffff; } .product-compare__compare-table th .product-compare__product-image-title p.green { background-color: #3CA542; color: #ffffff; } .product-compare__compare-table th .product-compare__product-image-title p.yellow { background-color: #F9E700; color: #555555; } .product-compare__compare-table th .product-compare__product-image-title p.orange { background-color: #F6A900; color: #ffffff; } .product-compare__compare-table th .product-compare__product-image-title p.red { background-color: #DD1840; color: #ffffff; } .product-compare__compare-table th .product-compare__product-image-title p.purple { background-color: #A5137F; color: #ffffff; } .product-compare__compare-table th .product-compare__product-image-title p.grey { background-color: #979797; color: #ffffff; } .product-compare__compare-table th .product-compare__product-image-title img { position: relative; width: auto; max-height: 160px; margin: 0 auto 0 auto; position: absolute; bottom: 0; left: 0; right: 0; } .product-compare__compare-table th .product-compare__product-link { display: block; font-family: "Neo Sans W01 Bold", sans-serif; color: #ffffff; padding: 10px 0 10px 0; margin: 0 0 0 0; } .product-compare__compare-table th .product-compare__product-link a { display: inline-block; margin: 0 0 0 0; padding: 15px 15px 15px 15px; color: #ffffff; text-decoration: none; cursor: pointer; font-size: 16px; } @media (min-width: 320px) { .product-compare__compare-table th .product-compare__product-link a { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-compare__compare-table th .product-compare__product-link a { font-size: 18px; } } @media screen and (max-width: 1660px) { .product-compare__compare-table th .product-compare__product-link a { padding: 7px 7px 7px 7px; } } .product-compare__compare-table th .product-compare__product-link a:hover { background-color: #3c3b3b; text-decoration: none; } .product-compare__compare-table th .product-compare__product-link a.blue { background-color: #0060A9; } .product-compare__compare-table th .product-compare__product-link a.blue:hover { background-color: #004376; } .product-compare__compare-table th .product-compare__product-link a.green { background-color: #3CA542; } .product-compare__compare-table th .product-compare__product-link a.green:hover { background-color: #2e8033; } .product-compare__compare-table th .product-compare__product-link a.yellow { background-color: #F9E700; color: #555555; } .product-compare__compare-table th .product-compare__product-link a.yellow:hover { background-color: #c6b800; } .product-compare__compare-table th .product-compare__product-link a.orange { background-color: #F6A900; } .product-compare__compare-table th .product-compare__product-link a.orange:hover { background-color: #c38600; } .product-compare__compare-table th .product-compare__product-link a.red { background-color: #DD1840; } .product-compare__compare-table th .product-compare__product-link a.red:hover { background-color: #af1333; } .product-compare__compare-table th .product-compare__product-link a.purple { background-color: #A5137F; } .product-compare__compare-table th .product-compare__product-link a.purple:hover { background-color: #770e5c; } .product-compare__compare-table th .product-compare__product-link a.grey { background-color: #979797; } .product-compare__compare-table th .product-compare__product-link a.grey:hover { background-color: #7e7d7d; } .product-compare__compare-table th:nth-child(3) .product-compare__product-image-title, .product-compare__compare-table th:nth-child(4) .product-compare__product-image-title, .product-compare__compare-table th:nth-child(5) .product-compare__product-image-title { display: none; } .product-compare__compare-table th:nth-child(3) .product-compare__product-link, .product-compare__compare-table th:nth-child(4) .product-compare__product-link, .product-compare__compare-table th:nth-child(5) .product-compare__product-link { display: none; } @media screen and (max-width: 830px) { .product-compare__compare-table tbody { display: table-row-group; width: 100%; } .product-compare__compare-table tbody tr { display: table-row; } } .product-compare__compare-table tbody tr:nth-child(2n+1) { background-color: #ffffff; } .product-compare__compare-table td { border: 1px solid #E8E8E9; vertical-align: middle; text-align: center; } .product-compare__compare-table td:first-child { text-align: left; } @media screen and (max-width: 860px) { .product-compare__compare-table td { display: table-cell; padding: 3px 3px 3px 3px; max-width: 96px; } } .product-compare__compare-table td img { position: relative; display: block; width: 35px; margin: 0 auto 0 auto; } @media screen and (max-width: 830px) { .product-compare__compare-table tfoot { display: table-row-group; width: 100%; } .product-compare__compare-table tfoot tr { display: table-row; } } .product-compare__compare-table tfoot tr:nth-child(2n+1) { background-color: #ffffff; } .product-compare__section-header td { position: relative; font-family: "Neo Sans W01 Bold", sans-serif; color: #555555; background-color: #f6f6f6; } .product-compare__section-header td img { position: absolute; right: 10px; top: 0; bottom: 0; width: 30px; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } @media (min-width: 768px) { .product-compare__section-header td img { top: 8px; } } .product-compare__section-header.close td img { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .product-compare__post-selector { display: block; margin: 0 0 10px 0; padding: 0 0 0 0; height: 30px; overflow: hidden; border: 1px solid #979797; width: 100%; max-width: 310px; background-image: url("../images/down-arrow.png"); background-repeat: no-repeat; background-position: center right 7px; background-size: 15px auto; } .product-compare__post-selector select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; height: 30px; border: none; font-size: 1rem; color: #555555; width: 100%; max-width: 100%; padding: 0 30px 0 5px; outline: none; } .product-compare__spinner { display: none; margin: 0 auto 10px auto; width: 50px; } .product-compare__table-footer td { text-align: left; } .product-compare__table-footer a { display: inline-block; margin: 0 0 0 0; padding: 15px 15px 15px 15px; color: #ffffff; text-decoration: none; cursor: pointer; font-size: 16px; } @media (min-width: 320px) { .product-compare__table-footer a { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-compare__table-footer a { font-size: 18px; } } @media screen and (max-width: 1660px) { .product-compare__table-footer a { padding: 7px 7px 7px 7px; } } .product-compare__table-footer a img { display: inline-block; width: 32px; vertical-align: middle; margin: 0 18px 2px 0; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } @media screen and (max-width: 1660px) { .product-compare__table-footer a img { display: none; } } .product-compare__table-footer a:hover { background-color: #3c3b3b; text-decoration: none; } .product-compare__table-footer a:hover img { margin: 0 10px 2px 8px; } .product-compare__table-footer a.blue { background-color: #0060A9; } .product-compare__table-footer a.blue:hover { background-color: #004376; } .product-compare__table-footer a.green { background-color: #3CA542; } .product-compare__table-footer a.green:hover { background-color: #2e8033; } .product-compare__table-footer a.yellow { background-color: #F9E700; color: #555555; } .product-compare__table-footer a.yellow:hover { background-color: #c6b800; } .product-compare__table-footer a.orange { background-color: #F6A900; } .product-compare__table-footer a.orange:hover { background-color: #c38600; } .product-compare__table-footer a.red { background-color: #DD1840; } .product-compare__table-footer a.red:hover { background-color: #af1333; } .product-compare__table-footer a.purple { background-color: #A5137F; } .product-compare__table-footer a.purple:hover { background-color: #770e5c; } .product-compare__table-footer a.grey { background-color: #979797; } .product-compare__table-footer a.grey:hover { background-color: #7e7d7d; } .page-template-page-news-events { /*------------------------------------ Listing Page - Main Section -------------------------------------*/ /*------------------------------------ Carousel Section Overrides -------------------------------------*/ } .page-template-page-news-events main { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 80px 0 0 0; } @media screen and (max-width: 1700px) { .page-template-page-news-events main { padding: 50px 2.5% 0 2.5%; } } @media screen and (max-width: 720px) { .page-template-page-news-events main { padding: 20px 15px 0 15px; } } .page-template-page-news-events .page-carousel-section__wrapper { padding: 0 0 0 0; } /* ------------------------------------------------ Single Product Page - General ---------------------------------------------------*/ .single-product { /* ------------------------------------------------ Single Product Page - Header ---------------------------------------------------*/ /* ------------------------------------------------ Single Product Page - Content Section ---------------------------------------------------*/ } .single-product .page-wrapper { position: relative; display: block; margin: 0 0 0 0; width: 100%; } .single-product .main-content { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; } .single-product__header { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; background-color: #E8E8E9; } .single-product__header-wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-align-content: flex-start; align-content: flex-start; margin: 0 auto 0 auto; padding: 86px 0px 86px 0px; width: 100%; max-width: 1700px; } @media screen and (max-width: 1700px) { .single-product__header-wrapper { padding: 40px 2.5% 40px 2.5%; } } @media screen and (max-width: 1330px) { .single-product__header-wrapper { padding: 20px 2.5% 20px 2.5%; } } .single-product__header-col-image { width: 100%; max-width: 355px; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; background-image: url("../images/background-product-image.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 3% 3% 3% 3%; } @media screen and (max-width: 1330px) { .single-product__header-col-image { max-width: 260px; } } @media screen and (max-width: 980px) { .single-product__header-col-image { max-width: 355px; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } } @media screen and (max-width: 720px) { .single-product__header-col-image { max-width: 260px; } } @media screen and (max-width: 560px) { .single-product__header-col-image { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; } } .single-product__header-col-image img { position: relative; display: block; width: 68%; margin: 0 auto 0 auto; padding: 0 0 0 0; } .single-product__header-col-details { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 0 6% 0 6%; margin: 0 0 0 0; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } @media screen and (max-width: 1330px) { .single-product__header-col-details { padding: 0 3% 0 3%; } } @media screen and (max-width: 980px) { .single-product__header-col-details { padding: 0 20px 20px 0; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } } @media screen and (max-width: 560px) { .single-product__header-col-details { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; } } .single-product__header-col-details h2 { display: inline-block; color: #ffffff; margin: 0 0 27px 0; padding: 5px 14px 5px 14px; font-size: 18px; } @media (min-width: 320px) { .single-product__header-col-details h2 { font-size: calc(18px + 6 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-product__header-col-details h2 { font-size: 24px; } } @media screen and (max-width: 1330px) { .single-product__header-col-details h2 { margin: 0 0 14px 0; } } .single-product__header-col-details h2.blue { background-color: #0060A9; } .single-product__header-col-details h2.green { background-color: #3CA542; } .single-product__header-col-details h2.yellow { background-color: #F9E700; color: #555555; } .single-product__header-col-details h2.orange { background-color: #F6A900; } .single-product__header-col-details h2.red { background-color: #DD1840; } .single-product__header-col-details h2.purple { background-color: #A5137F; } .single-product__header-col-details h2.grey { background-color: #979797; } .single-product__header-col-details-excerpt { font-size: 18px; margin-bottom: 10%; } @media (min-width: 320px) { .single-product__header-col-details-excerpt { font-size: calc(18px + 6 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-product__header-col-details-excerpt { font-size: 24px; } } @media screen and (max-width: 980px) { .single-product__header-col-details-excerpt { margin-bottom: 5%; } } .single-product__header-col-details-notes h3 { font-family: "Neo Sans W01", sans-serif; font-size: 15px; } @media (min-width: 320px) { .single-product__header-col-details-notes h3 { font-size: calc(15px + 3 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-product__header-col-details-notes h3 { font-size: 18px; } } .single-product__header-col-details-notes p { font-size: 15px; } @media (min-width: 320px) { .single-product__header-col-details-notes p { font-size: calc(15px + 3 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-product__header-col-details-notes p { font-size: 18px; } } .single-product__header-col-details-notes p:last-of-type { margin: 0 0 0 0; } .single-product__header-col-cta { width: 455px; -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; } @media screen and (max-width: 1330px) { .single-product__header-col-cta { width: 330px; } } @media screen and (max-width: 980px) { .single-product__header-col-cta { width: 100%; -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; } } @media screen and (max-width: 560px) { .single-product__header-col-cta { -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } } .single-product__header-col-cta a { display: inline-block; margin: 0 0 0 0; padding: 15px 15px 15px 15px; color: #ffffff; text-decoration: none; cursor: pointer; font-size: 16px; } @media (min-width: 320px) { .single-product__header-col-cta a { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-product__header-col-cta a { font-size: 18px; } } @media screen and (max-width: 1330px) { .single-product__header-col-cta a { padding: 7px 7px 7px 7px; } } .single-product__header-col-cta a img { width: 32px; vertical-align: middle; margin: 0 18px 2px 0; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } @media screen and (max-width: 1330px) { .single-product__header-col-cta a img { width: 25px; } } @media screen and (max-width: 340px) { .single-product__header-col-cta a img { width: 17px; } } .single-product__header-col-cta a:hover { background-color: #3c3b3b; text-decoration: none; } .single-product__header-col-cta a:hover img { margin: 0 10px 2px 8px; } .single-product__header-col-cta a.blue { background-color: #0060A9; } .single-product__header-col-cta a.blue:hover { background-color: #004376; } .single-product__header-col-cta a.green { background-color: #3CA542; } .single-product__header-col-cta a.green:hover { background-color: #2e8033; } .single-product__header-col-cta a.yellow { background-color: #F9E700; color: #555555; } .single-product__header-col-cta a.yellow:hover { background-color: #c6b800; } .single-product__header-col-cta a.orange { background-color: #F6A900; } .single-product__header-col-cta a.orange:hover { background-color: #c38600; } .single-product__header-col-cta a.red { background-color: #DD1840; } .single-product__header-col-cta a.red:hover { background-color: #af1333; } .single-product__header-col-cta a.purple { background-color: #A5137F; } .single-product__header-col-cta a.purple:hover { background-color: #770e5c; } .single-product__header-col-cta a.grey { background-color: #979797; } .single-product__header-col-cta a.grey:hover { background-color: #7e7d7d; } .single-product__color-bar { position: relative; display: block; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 100%; max-width: 1700px; height: 10px; } .single-product__color-bar.blue { background-color: #0060A9; } .single-product__color-bar.green { background-color: #3CA542; } .single-product__color-bar.yellow { background-color: #F9E700; } .single-product__color-bar.orange { background-color: #F6A900; } .single-product__color-bar.red { background-color: #DD1840; } .single-product__color-bar.purple { background-color: #A5137F; } .single-product__color-bar.grey { background-color: #979797; } .single-product__details-section { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; } .single-product__details-section-wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; flex-flow: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin: 0 auto 0 auto; padding: 90px 0 90px 0; width: 100%; max-width: 1700px; } @media screen and (max-width: 1700px) { .single-product__details-section-wrapper { padding: 90px 2.5% 90px 2.5%; } } @media screen and (max-width: 970px) { .single-product__details-section-wrapper { padding: 40px 20px 40px 20px; } } @media screen and (max-width: 580px) { .single-product__details-section-wrapper { padding: 20px 20px 20px 20px; } } .single-product__details-col-heading { position: relative; margin: 0 0 40px 0; font-size: 16px; } @media (min-width: 320px) { .single-product__details-col-heading { font-size: calc(16px + 8 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-product__details-col-heading { font-size: 24px; } } @media screen and (max-width: 970px) { .single-product__details-col-heading { margin: 0 0 20px 0; } } @media screen and (max-width: 580px) { .single-product__details-col-heading { margin: 0 0 15px 0; background-color: #E8E8E9; padding: 15px 15px 15px 15px; background-image: url("../images/cheveron-down.svg"); background-size: 25px auto; background-repeat: no-repeat; background-position: center right 20px; cursor: pointer; } .single-product__details-col-heading.open { background-image: url("../images/cheveron-up.svg"); } } .single-product__details-section-rte { position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 0 0 0; } .single-product__details-section-rte .rte { display: block; margin: 0 0 0 0; padding: 0 0 0 0; } @media screen and (max-width: 580px) { .single-product__details-section-rte .rte { display: none; } } .single-product__details-section-properties { position: relative; width: 595px; padding: 0 40px 0 40px; margin: 0 0 0 0; } @media screen and (max-width: 1290px) { .single-product__details-section-properties { width: 450px; padding: 0 30px 0 30px; } } @media screen and (max-width: 830px) { .single-product__details-section-properties { width: 320px; } } @media screen and (max-width: 580px) { .single-product__details-section-properties { width: 100%; padding: 0 0 0px 0; } } .single-product__details-section-properties ul { list-style: none; margin-left: 0; } @media screen and (max-width: 580px) { .single-product__details-section-properties ul { display: none; } } .single-product__details-section-properties ul li { background-image: url("../images/custom-bullet-small.svg"); background-repeat: no-repeat; background-position: top left; background-size: 5px auto; padding: 0 0 0 25px; margin: 0 0 30px 0; } @media screen and (max-width: 980px) { .single-product__details-section-properties ul li { margin: 0 0 20px 0; } } .single-product__details-section-download { position: relative; width: 303px; margin: 0 0 0 0; } @media screen and (max-width: 1090px) { .single-product__details-section-download { width: 245px; } } @media screen and (max-width: 980px) { .single-product__details-section-download { width: 100%; } } .single-product__download-item-wrapper { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; } @media screen and (max-width: 580px) { .single-product__download-item-wrapper { display: none; } } .single-product__download-item { display: block; width: 100%; margin: 0 0 30px 0; } .single-product__download-item a { display: block; margin: 0 0 0 0; padding: 0 0 0 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; cursor: pointer; } .single-product__download-item a figure { width: 72px; margin: 0 0 0 0; } @media screen and (max-width: 1090px) { .single-product__download-item a figure { width: 50px; } } .single-product__download-item a figure img { display: block; width: 100%; margin: 0 0 0 0; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .single-product__download-item a .download-details { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 0 0 0 15px; } .single-product__download-item a .download-details--no-image { padding: 0 0 0 0; } .single-product__download-item a .download-details h3 { display: block; margin: 0 0 5px 0; font-size: 16px; } @media (min-width: 320px) { .single-product__download-item a .download-details h3 { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-product__download-item a .download-details h3 { font-size: 18px; } } .single-product__download-item a .download-details img { display: block; width: 32px; margin: 0 0 0 0; } @media screen and (max-width: 1090px) { .single-product__download-item a .download-details img { width: 25px; } } .single-product__download-item a:hover { text-decoration: none; } .single-product__download-item a:hover figure img { display: block; width: 100%; margin: 0 0 0 0; -webkit-transform: scale(0.9); transform: scale(0.9); } .single-product__download-item.blue a { color: #555555; } .single-product__download-item.blue a:hover { color: #0060A9; } .single-product__download-item.green a { color: #555555; } .single-product__download-item.green a:hover { color: #3CA542; } .single-product__download-item.yellow a { color: #555555; } .single-product__download-item.yellow a:hover { color: #F9E700; } .single-product__download-item.orange a { color: #555555; } .single-product__download-item.orange a:hover { color: #F6A900; } .single-product__download-item.red a { color: #555555; } .single-product__download-item.red a:hover { color: #DD1840; } .single-product__download-item.purple a { color: #555555; } .single-product__download-item.purple a:hover { color: #A5137F; } .single-product__download-item.grey a { color: #555555; } .single-product__download-item.grey a:hover { color: #979797; } .single-post { /*------------------------------------ Single Page - Main Section -------------------------------------*/ /*------------------------------------ Single Page - Sidebar Author -------------------------------------*/ /*------------------------------------ Single Page - Contact Sidebar -------------------------------------*/ /*------------------------------------ Single Page - Article Section -------------------------------------*/ /*------------------------------------ Single Page - Event Information Section -------------------------------------*/ /*------------------------------------ Single Page - Article Image Block -------------------------------------*/ /*------------------------------------ Single Page - Text Image Block -------------------------------------*/ /*------------------------------------ Single Page - Video Block -------------------------------------*/ } .single-post main { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 80px 0 40px 0; } @media screen and (max-width: 1700px) { .single-post main { padding: 50px 2.5% 0 2.5%; } } @media screen and (max-width: 720px) { .single-post main { padding: 20px 15px 0 15px; } } .single-post__sidebar-author { position: relative; width: 185px; margin: 0 0 0 0; padding: 0 0 0 20px; border-left: 5px solid #E8E8E9; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } @media screen and (max-width: 1120px) { .single-post__sidebar-author { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; width: 100%; margin: 0 0 20px 0; } } @media screen and (max-width: 720px) { .single-post__sidebar-author { -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; width: 50%; } } @media screen and (max-width: 540px) { .single-post__sidebar-author { width: 100%; } } .single-post__sidebar-author img { display: block; width: 90px; margin: 0 0 40px 0; } .single-post__sidebar-author h5 { margin: 0 0 5px 0; } .single-post__sidebar-author ul { position: relative; list-style: none; margin: 0 0 0 0; padding: 0 0 0 0; } .single-post__sidebar-author ul li { display: block; margin: 0 0 5px 0; text-transform: uppercase; font-size: 0.875rem; } .single-post__sidebar-author ul li a { display: inline-block; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #E8E8E9; padding: 5px 5px 5px 5px; color: #555555; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .single-post__sidebar-author ul li a:link, .single-post__sidebar-author ul li a:active, .single-post__sidebar-author ul li a:visited { text-decoration: none; } .single-post__sidebar-author ul li a:hover { text-decoration: none; color: #ffffff; } .single-post__post-date { margin: 0 0 25px 0; } .single-post .contact-sidebar { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; } @media screen and (max-width: 1440px) { .single-post .contact-sidebar { width: 280px; } } @media screen and (max-width: 1120px) { .single-post .contact-sidebar { -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } } @media screen and (max-width: 720px) { .single-post .contact-sidebar { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; width: 50%; margin: 0 0 20px 0; } } @media screen and (max-width: 540px) { .single-post .contact-sidebar { width: 100%; } } .single-post__article { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 0 6% 0 6%; margin: 0 0 0 0; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } @media screen and (max-width: 1440px) { .single-post__article { padding: 0 4% 0 4%; } } @media screen and (max-width: 1120px) { .single-post__article { -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; padding: 0 2% 0 0px; } } @media screen and (max-width: 720px) { .single-post__article { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 0 0 20px 0; } } .single-post__article-header { position: relative; display: block; margin: 0 0 35px 0; padding: 0 0 0 0; } .single-post__article-header figure { display: block; position: relative; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; max-width: 961px; } .single-post__article-header figure img { width: 100%; } .single-post__article-header figure figcaption { position: absolute; top: 0; left: 0; margin: 0 0 0 0; padding: 3% 3% 3% 3%; font-size: 22px; color: #ffffff; } @media (min-width: 320px) { .single-post__article-header figure figcaption { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-post__article-header figure figcaption { font-size: 40px; } } .single-post__article-header figure .featured-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.8; } .single-post__event-information { position: relative; display: block; margin: 0 0 30px 0; padding: 0 0 0 0; } .single-post__event-information img { position: relative; display: block; margin: 0 0 15px 0; width: 100%; max-width: 360px; } .single-post__article-image-block { display: block; position: relative; margin: 0 0 20px 0; } .single-post__article-image-block img { display: block; margin: 0 0 0 0; max-width: 100%; } .single-post__article-text-block { display: block; margin: 0 0 20px 0; } .single-post__article-text-block blockquote { display: block; border-left: 10px solid #E8E8E9; margin: 0 0 25px 0; padding: 20px 0 20px 4%; } .single-post__article-text-block blockquote p { font-size: 22px; } @media (min-width: 320px) { .single-post__article-text-block blockquote p { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-post__article-text-block blockquote p { font-size: 40px; } } .single-post__article-text-block ul { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; list-style-image: url("../images/custom-bullet-small.svg"); width: 100%; max-width: 560px; margin: 0 0 25px 15px; } .single-post__article-text-block ul li { width: 50%; margin: 0 0 15px 0; } .single-post__article-text-block h2, .single-post__article-text-block h3, .single-post__article-text-block h4, .single-post__article-text-block h5 { margin-top: 30px; } @media (min-width: 320px) { .single-post__article-text-block h2, .single-post__article-text-block h3, .single-post__article-text-block h4, .single-post__article-text-block h5 { margin-top: calc(30px + 30 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-post__article-text-block h2, .single-post__article-text-block h3, .single-post__article-text-block h4, .single-post__article-text-block h5 { margin-top: 60px; } } .single-post__article-video-block { position: relative; display: block; margin: 0 0 30px 0; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: 100%; } .single-post__article-video-block iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .single-industry { /*------------------------------------ Industry Single Page - Header -------------------------------------*/ /*-------------------------------------------------------- Industry Single Page - Main Section & Section General Styling ---------------------------------------------------------*/ /*------------------------------------------------ Industry Single Page - Section Title Styling -------------------------------------------------*/ /*-------------------------------------------------------------------- Industry Single Page - Section Problem and Solution List Styling --------------------------------------------------------------------*/ /*---------------------------------------------- Industry Single Page - Section One Styling -----------------------------------------------*/ /*---------------------------------------------- Industry Single Page - Section Two Styling -----------------------------------------------*/ /*---------------------------------------------- Industry Single Page - Section Three Styling -----------------------------------------------*/ /*---------------------------------------------- Industry Single Page - Section Four Styling -----------------------------------------------*/ } .single-industry__header { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 20px 0; background-repeat: no-repeat; background-size: cover; background-position: center center; } .single-industry__header-gradient { position: absolute; width: 100%; height: 100%; background: transparent; background: -webkit-linear-gradient(left, black 0%, rgba(255, 255, 255, 0) 53%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, black 0%, rgba(255, 255, 255, 0) 53%, rgba(255, 255, 255, 0) 100%); } @media screen and (max-width: 480px) { .single-industry__header-gradient { background: rgba(0, 0, 0, 0.3); } } .single-industry__header-wrapper { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding-top: 20px; padding-left: 15px; padding-right: 15px; } @media (min-width: 320px) { .single-industry__header-wrapper { padding-top: calc(20px + 100 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__header-wrapper { padding-top: 120px; } } @media (min-width: 320px) { .single-industry__header-wrapper { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__header-wrapper { padding-left: 50px; padding-right: 50px; } } @media (min-width: 1730px) { .single-industry__header-wrapper { padding-left: 0; padding-right: 0; } } .single-industry__header-wrapper h2 { width: 50%; color: #ffffff; font-family: "Neo Sans W01", sans-serif; font-weight: normal; font-size: 28px; margin: 0 0 38px 0; } @media (min-width: 320px) { .single-industry__header-wrapper h2 { font-size: calc(28px + 52 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__header-wrapper h2 { font-size: 80px; } } .single-industry__header-wrapper h2 strong { font-family: "Neo Sans W01 Bold", sans-serif; } @media screen and (max-width: 980px) { .single-industry__header-wrapper h2 { width: 70%; } } @media screen and (max-width: 480px) { .single-industry__header-wrapper h2 { width: 90%; } } .single-industry__header-text { display: block; margin: 0 0 30px 0; padding: 0 0 0 0; width: 35%; margin-bottom: 30px; } @media (min-width: 320px) { .single-industry__header-text { margin-bottom: calc(30px + 60 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__header-text { margin-bottom: 90px; } } @media screen and (max-width: 980px) { .single-industry__header-text { width: 60%; } } @media screen and (max-width: 480px) { .single-industry__header-text { width: 90%; } } .single-industry__header-text p { color: #ffffff; font-size: 16px; } @media (min-width: 320px) { .single-industry__header-text p { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__header-text p { font-size: 20px; } } .single-industry__header-down-arrow { position: relative; display: block; width: 87px; margin: 0 0 40px 0; } @media screen and (max-width: 480px) { .single-industry__header-down-arrow { width: 50px; } } .single-industry__header-anchor-links-wrapper { display: block; width: 100; margin: 0 0 0 0; -webkit-transition: background-color 250ms; transition: background-color 250ms; } .single-industry__header-anchor-links-wrapper.scrollTop { background-color: #000000; position: fixed; top: 0; left: 0; right: 0; z-index: 8889; } @media screen and (max-width: 767px) { .single-industry__header-anchor-links-wrapper.scrollTop { display: none; } } .single-industry__header-anchor-links-wrapper.scrollTop .single-industry__header-anchor-links { padding-top: 0; padding-bottom: 0; padding-left: 15px; padding-right: 15px; } .single-industry__header-anchor-links-wrapper.scrollTop .single-industry__header-anchor-links li { margin-top: 15px; margin-bottom: 15px; } @media (min-width: 1730px) { .single-industry__header-anchor-links-wrapper.scrollTop .single-industry__header-anchor-links { padding-left: 0; padding-right: 0; } } .single-industry__header-anchor-links { display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; list-style: none; padding: 10px 0 10px 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; justify-items: stretch; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; } @media screen and (max-width: 1700px) { .single-industry__header-anchor-links { padding: 10px 0 10px 0; } } @media screen and (max-width: 590px) { .single-industry__header-anchor-links { -webkit-flex-wrap: wrap; flex-wrap: wrap; } } .single-industry__header-anchor-links li { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; width: auto; margin: 0 0 0 0; padding: 0 0 0 0; text-align: center; border-right: 2px solid #ffffff; font-size: 16px; } @media (min-width: 320px) { .single-industry__header-anchor-links li { font-size: calc(16px + 8 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__header-anchor-links li { font-size: 24px; } } .single-industry__header-anchor-links li:nth-child(1) { border-left: 2px solid #ffffff; } @media screen and (max-width: 590px) { .single-industry__header-anchor-links li { width: 50%; margin: 0 0 15px 0; } .single-industry__header-anchor-links li:nth-child(3) { border-left: 2px solid #ffffff; } } .single-industry__header-anchor-links li a { display: block; padding: 10px 30px 10px 30px; text-decoration: none; color: #ffffff !important; } @media screen and (max-width: 590px) { .single-industry__header-anchor-links li a { padding: 10px 5px 10px 5px; } } .single-industry__header-anchor-links li a .single-industry__header-anchor-links-underline { position: relative; display: block; width: 100%; height: 5px; background-color: transparent; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease; } .single-industry__header-anchor-links li a:hover .single-industry__header-anchor-links-underline { background-color: #ffffff; } .single-industry .electrolube-colours { position: absolute; bottom: 0; left: 0; right: 0; top: auto; } .single-industry main { display: block; position: relative; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } .single-industry__section { display: block; width: 100%; margin: 0 0 0 0; padding: 108px 0 120px 0; padding-top: 30px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; } @media (min-width: 320px) { .single-industry__section { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section { padding-top: 100px; padding-bottom: 100px; } } @media (min-width: 320px) { .single-industry__section { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section { padding-left: 50px; padding-right: 50px; } } @media (min-width: 1730px) { .single-industry__section { padding-left: 5px; padding-right: 5px; } } .single-industry__section-text-wrapper { display: block; position: relative; width: 100%; max-width: 800px; } .single-industry__section-text-wrapper--white { color: #ffffff; } .single-industry__section-title { font-size: 22px; margin-bottom: 20px; margin-top: 0; font-family: "Neo Sans W01", sans-serif; font-weight: normal; } @media (min-width: 320px) { .single-industry__section-title { font-size: calc(22px + 38 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-title { font-size: 60px; } } @media (min-width: 320px) { .single-industry__section-title { margin-bottom: calc(20px + 20 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-title { margin-bottom: 40px; } } .single-industry__section-title strong { font-family: "Neo Sans W01 Bold", sans-serif; } .single-industry__section-title--white { color: #ffffff; } .single-industry__section-problem-solution-list { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; justify-items: stretch; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin: 0 0 0 0; padding-top: 20px; } @media (min-width: 320px) { .single-industry__section-problem-solution-list { padding-top: calc(20px + 60 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-problem-solution-list { padding-top: 80px; } } .single-industry__section-problem-solution-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; justify-items: stretch; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; width: calc(50% - 50px); margin: 0 0 30px 0; border-left: 10px solid #979797; } @media screen and (max-width: 1330px) { .single-industry__section-problem-solution-item { width: calc(50% - 15px); } } @media screen and (max-width: 560px) { .single-industry__section-problem-solution-item { width: 100%; } } .single-industry__section-problem-solution-item--conformal_coatings { border-left: 10px solid #0060A9; } .single-industry__section-problem-solution-item--conformal_coatings h4 { background-color: #0060A9; color: #ffffff; } .single-industry__section-problem-solution-item--contact_lubricants { border-left: 10px solid #DD1840; } .single-industry__section-problem-solution-item--contact_lubricants h4 { background-color: #DD1840; color: #ffffff; } .single-industry__section-problem-solution-item--encapsulation_resins { border-left: 10px solid #F9E700; } .single-industry__section-problem-solution-item--encapsulation_resins h4 { background-color: #F9E700; color: #555555; } .single-industry__section-problem-solution-item--electronic_and_general_cleaning { border-left: 10px solid #3CA542; } .single-industry__section-problem-solution-item--electronic_and_general_cleaning h4 { background-color: #3CA542; color: #ffffff; } .single-industry__section-problem-solution-item--thermal_management { border-left: 10px solid #F6A900; } .single-industry__section-problem-solution-item--thermal_management h4 { background-color: #F6A900; color: #555555; } .single-industry__section-problem-solution-item--maintenance_and_service_aids { border-left: 10px solid #A5137F; } .single-industry__section-problem-solution-item--maintenance_and_service_aids h4 { background-color: #A5137F; } .single-industry__section-problem-solution-text { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 15px 15px 15px 15px; padding: 15px; } @media (min-width: 320px) { .single-industry__section-problem-solution-text { padding: calc(15px + 15 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-problem-solution-text { padding: 30px; } } @media screen and (max-width: 1330px) { .single-industry__section-problem-solution-text { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; } } .single-industry__section-problem-solution-text--white { background-color: #ffffff; color: #555555; } .single-industry__section-problem-solution-text--dark { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } .single-industry__section-problem-solution-text h3 { font-size: 18px; margin: 0 0 15px 0; } @media (min-width: 320px) { .single-industry__section-problem-solution-text h3 { font-size: calc(18px + 6 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-problem-solution-text h3 { font-size: 24px; } } .single-industry__section-problem-solution-product { width: 303px; margin: 0 0 0 0; text-align: center; background-image: url("../images/background-product-image.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 15px 15px 15px 15px; } @media screen and (max-width: 1330px) { .single-industry__section-problem-solution-product { width: 100%; } } .single-industry__section-problem-solution-product h4 { display: inline-block; font-size: 16px; margin: 0 auto 15 auto; padding: 5px 10px 5px 10px; } @media (min-width: 320px) { .single-industry__section-problem-solution-product h4 { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-problem-solution-product h4 { font-size: 18px; } } .single-industry__section-problem-solution-product p { font-size: 16px; } @media (min-width: 320px) { .single-industry__section-problem-solution-product p { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-problem-solution-product p { font-size: 20px; } } .single-industry__section-problem-solution-product img { max-width: 100%; margin: 0 auto 0 auto; } .single-industry__section-one-wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; justify-items: flex-start; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 0 0 0 0; } .single-industry__section-one-wrapper-col { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } @media screen and (max-width: 800px) { .single-industry__section-one-wrapper-col { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; } } .single-industry__section-one-wrapper-col--one { padding: 0 30px 0 0; } @media screen and (max-width: 800px) { .single-industry__section-one-wrapper-col--one { padding: 0 0 0 0; } } .single-industry__section-one-wrapper-col--two { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; justify-items: flex-start; padding: 0 0 0 30px; } @media screen and (max-width: 1200px) { .single-industry__section-one-wrapper-col--two { -webkit-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 800px) { .single-industry__section-one-wrapper-col--two { padding: 0 0 0 0; } } .single-industry__section-product-type { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; justify-items: flex-start; margin: 0 0 30px 0; padding: 30px 0 0 0; list-style: none; } .single-industry__section-product-type li { width: 33.3333%; font-size: 16px; margin: 0 0 30px 0; border-left: 5px solid #979797; padding: 0 10px 0 15px; font-family: "Neo Sans W01 Bold", sans-serif; } @media (min-width: 1400px) { .single-industry__section-product-type li { font-size: calc(16px + 2 * (100vw - 1400px) / 300); } } @media (min-width: 1700px) { .single-industry__section-product-type li { font-size: 18px; } } .single-industry__section-product-type li:last-child { margin-bottom: 0; } @media screen and (max-width: 1220px) { .single-industry__section-product-type li { width: 50%; } } @media screen and (min-width: 600px) and (max-width: 800px) { .single-industry__section-product-type li { width: 33.3333%; } } @media screen and (max-width: 960px) { .single-industry__section-product-type li { font-size: 15px; } } @media screen and (max-width: 390px) { .single-industry__section-product-type li { width: 100%; } } .single-industry__section-product-type li.green { border-left: 8px solid #3CA542; } .single-industry__section-product-type li.blue { border-left: 8px solid #0060A9; } .single-industry__section-product-type li.yellow { border-left: 8px solid #F9E700; } .single-industry__section-product-type li.orange { border-left: 8px solid #F6A900; } .single-industry__section-product-type li.red { border-left: 8px solid #DD1840; } .single-industry__section-product-type li.purple { border-left: 8px solid #A5137F; } .single-industry__section-one-sub-col { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0 0 0 0; } @media screen and (max-width: 1200px) { .single-industry__section-one-sub-col { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; } } @media screen and (max-width: 800px) { .single-industry__section-one-sub-col { width: auto; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } } @media screen and (max-width: 590px) { .single-industry__section-one-sub-col { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; } } .single-industry__section-one-sub-col--one { padding: 0 35px 0 0; } .single-industry__section-one-sub-col--one ul { list-style: none; margin-left: 0; margin-bottom: 30px; } @media (min-width: 320px) { .single-industry__section-one-sub-col--one ul { margin-bottom: calc(30px + 30 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-one-sub-col--one ul { margin-bottom: 60px; } } .single-industry__section-one-sub-col--one ul li { position: relative; margin: 0 0 15px 0; padding-left: 20px; font-size: 16px; font-family: "Neo Sans W01 Bold", sans-serif; } @media (min-width: 320px) { .single-industry__section-one-sub-col--one ul li { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-one-sub-col--one ul li { font-size: 18px; } } .single-industry__section-one-sub-col--one ul li:last-child { margin-bottom: 0; } .single-industry__section-one-sub-col--one ul li:before { content: ''; position: absolute; top: 3px; left: 0; width: 8px; height: 20px; background-color: #555555; } .single-industry__section-one-sub-col--two { padding: 0 0 0 35px; } @media screen and (max-width: 1390px) { .single-industry__section-one-sub-col--two { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; max-width: 320px; } } @media screen and (max-width: 1200px) { .single-industry__section-one-sub-col--two { padding: 0 0 0 0; } } .single-industry__section-one-sub-col--two img { position: relative; display: block; width: 100%; margin: 0 0 30px 0; } .single-industry__section-one-sub-col--two section { padding: 0 0 0 30px; border-left: 5px solid #E8E8E9; } .single-industry__section-one-brochure-download { position: relative; display: block; margin: 0 0 30px 0; } .single-industry__section-one-brochure-download a { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; justify-items: flex-start; text-decoration: none; } @media screen and (max-width: 1390px) { .single-industry__section-one-brochure-download a { -webkit-flex-wrap: wrap; flex-wrap: wrap; } } .single-industry__section-one-brochure-download a figure { width: 138px; } .single-industry__section-one-brochure-download a figure img { display: block; margin: 0 0 0 0; width: 100%; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .single-industry__section-one-brochure-download a:hover figure img { -webkit-transform: scale(0.9); transform: scale(0.9); } .single-industry__section-one-brochure-text { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 0 0 0 30px; } @media screen and (max-width: 1390px) { .single-industry__section-one-brochure-text { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 15px 0 0 0; } } @media screen and (max-width: 800px) { .single-industry__section-one-brochure-text { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: auto; padding: 0 0 0 30px; } } @media screen and (max-width: 680px) { .single-industry__section-one-brochure-text { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 15px 0 0 0; } } @media screen and (max-width: 590px) { .single-industry__section-one-brochure-text { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: auto; padding: 0 0 0 30px; } } @media screen and (max-width: 360px) { .single-industry__section-one-brochure-text { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 15px 0 0 0; } } .single-industry__section-one-brochure-text p:nth-of-type(1) { font-size: 16px; } @media (min-width: 320px) { .single-industry__section-one-brochure-text p:nth-of-type(1) { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-one-brochure-text p:nth-of-type(1) { font-size: 18px; } } .single-industry__section-one-brochure-text p:nth-of-type(2) img { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; } .single-industry__section-two { background-color: #555555; } .single-industry__section-two-wrapper { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 0 0 0 0; } .single-industry__section-three { background-color: #E8E8E9; } .single-industry__section-three-wrapper { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 0 0 0 0; } .single-industry__section-four { background-color: #ffffff; } .single-industry__section-four .page-carousel-section { padding: 108px 0 80px 0; padding-top: 30px; padding-bottom: 30px; } @media (min-width: 320px) { .single-industry__section-four .page-carousel-section { padding-top: calc(30px + 90 * (100vw - 320px) / 1380); padding-bottom: calc(30px + 90 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-industry__section-four .page-carousel-section { padding-top: 120px; padding-bottom: 120px; } } .single-industry__section-four .page-carousel-section .page-carousel-section__wrapper { padding: 0; } .single-industry__section-four .electrolube-colours { position: relative; } .single-industry__section-four-wrapper { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 0 0 0 0; } .single-industry__section-four-logo-slider { display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; } .single-industry__section-four-logo-slide { display: inline-block; margin: 0 0 0 0; padding: 10px 10px 10px 10px; text-align: center; width: 100%; height: 270px; } .single-industry__section-four-logo-slide img { display: block; margin: 0 auto 0 auto; max-width: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .single-industry__section-four-logo-slide a { display: block; margin: 0 0 0 0; } .single-industry__section-four-logo-slide a img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .single-industry__section-four-logo-slide a:hover img { -webkit-transform: scale(0.9); transform: scale(0.9); } .single-knowledge_base { /*------------------------------------ Single Knowlege Base - Main Section -------------------------------------*/ /*------------------------------------ Single Knowlege Base - Sidebar Author -------------------------------------*/ /*------------------------------------ Single Knowlege Base - Contact Sidebar -------------------------------------*/ /*------------------------------------ Single Knowlege Base - Article Section -------------------------------------*/ /*------------------------------------ Single Knowlege Base - Event Information Section -------------------------------------*/ /*------------------------------------ Single Knowlege Base - Article Image Block -------------------------------------*/ /*------------------------------------ Single Knowlege Base - Text Image Block -------------------------------------*/ /*------------------------------------ Single Knowlege Base - Video Block -------------------------------------*/ } .single-knowledge_base main { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding-top: 30px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; } @media (min-width: 320px) { .single-knowledge_base main { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-knowledge_base main { padding-top: 100px; padding-bottom: 100px; } } @media (min-width: 320px) { .single-knowledge_base main { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-knowledge_base main { padding-left: 50px; padding-right: 50px; } } @media (min-width: 1730px) { .single-knowledge_base main { padding-left: 0; padding-right: 0; } } .single-knowledge_base .electrolube-colours { margin-bottom: 30px; } .single-knowledge_base__sidebar-author { position: relative; width: 185px; margin: 0 0 20px 0; padding: 0 0 0 20px; border-left: 5px solid #E8E8E9; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } @media screen and (max-width: 1120px) { .single-knowledge_base__sidebar-author { -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; width: 50%; } } @media screen and (max-width: 540px) { .single-knowledge_base__sidebar-author { width: 100%; } } .single-knowledge_base__sidebar-author img { display: block; width: 90px; margin: 0 0 40px 0; } .single-knowledge_base__sidebar-author h5 { margin: 0 0 5px 0; } .single-knowledge_base__sidebar-author ul { position: relative; list-style: none; margin: 0 0 15px 0; padding: 0 0 0 0; } .single-knowledge_base__sidebar-author ul li { display: block; margin: 0 0 5px 0; text-transform: uppercase; font-size: 0.875rem; } .single-knowledge_base__sidebar-author ul li a { display: inline-block; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #E8E8E9; padding: 5px 5px 5px 5px; color: #555555; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .single-knowledge_base__sidebar-author ul li a:link, .single-knowledge_base__sidebar-author ul li a:active, .single-knowledge_base__sidebar-author ul li a:visited { text-decoration: none; } .single-knowledge_base__sidebar-author ul li a:hover { text-decoration: none; color: #ffffff; } .single-knowledge_base__post-date { margin: 0 0 25px 0; } .single-knowledge_base__post-date strong { font-size: 0.9rem; } .single-knowledge_base .contact-sidebar { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; } @media screen and (max-width: 1440px) { .single-knowledge_base .contact-sidebar { width: 280px; } } @media screen and (max-width: 1120px) { .single-knowledge_base .contact-sidebar { -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } } @media screen and (max-width: 1120px) { .single-knowledge_base .contact-sidebar { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; width: 50%; margin: 0 0 20px 0; } } @media screen and (max-width: 540px) { .single-knowledge_base .contact-sidebar { width: 100%; } } .single-knowledge_base__article { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding-left: 30px; padding-right: 30px; margin: 0 0 0 0; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } @media (min-width: 1121px) { .single-knowledge_base__article { padding-left: calc(30px + 70 * (100vw - 1121px) / 579); padding-right: calc(30px + 70 * (100vw - 1121px) / 579); } } @media (min-width: 1700px) { .single-knowledge_base__article { padding-left: 100px; padding-right: 100px; } } @media screen and (max-width: 1120px) { .single-knowledge_base__article { -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 0 0 20px 0; } } .single-knowledge_base__article-header { position: relative; display: block; margin: 0 0 35px 0; padding: 0 0 0 0; } .single-knowledge_base__article-header figure { display: block; position: relative; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; } .single-knowledge_base__article-header figure img { width: 100%; } .single-knowledge_base__article-header figure figcaption { position: absolute; top: 0; left: 0; margin: 0 0 0 0; padding: 3% 3% 3% 3%; font-size: 22px; color: #ffffff; } @media (min-width: 320px) { .single-knowledge_base__article-header figure figcaption { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-knowledge_base__article-header figure figcaption { font-size: 40px; } } .single-knowledge_base__article-header figure .featured-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.8; } .single-knowledge_base__event-information { position: relative; display: block; margin: 0 0 30px 0; padding: 0 0 0 0; } .single-knowledge_base__event-information img { position: relative; display: block; margin: 0 0 15px 0; width: 100%; max-width: 360px; } .single-knowledge_base__article-image-block { display: block; position: relative; margin: 0 0 20px 0; } .single-knowledge_base__article-image-block img { display: block; margin: 0 0 0 0; max-width: 100%; } .single-knowledge_base__article-text-block { display: block; margin: 0 0 20px 0; word-break: break-word; } .single-knowledge_base__article-text-block blockquote { display: block; border-left: 10px solid #E8E8E9; margin: 0 0 25px 0; padding: 20px 0 20px 4%; } .single-knowledge_base__article-text-block blockquote p { font-size: 22px; } @media (min-width: 320px) { .single-knowledge_base__article-text-block blockquote p { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-knowledge_base__article-text-block blockquote p { font-size: 40px; } } .single-knowledge_base__article-text-block ul { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; list-style-image: url("../images/custom-bullet-small.svg"); width: 100%; max-width: 560px; margin: 0 0 25px 15px; } .single-knowledge_base__article-text-block ul li { width: 50%; margin: 0 0 15px 0; padding: 0 15px 0 0; } .single-knowledge_base__article-text-block h2, .single-knowledge_base__article-text-block h3, .single-knowledge_base__article-text-block h4, .single-knowledge_base__article-text-block h5 { margin-top: 30px; } @media (min-width: 320px) { .single-knowledge_base__article-text-block h2, .single-knowledge_base__article-text-block h3, .single-knowledge_base__article-text-block h4, .single-knowledge_base__article-text-block h5 { margin-top: calc(30px + 30 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .single-knowledge_base__article-text-block h2, .single-knowledge_base__article-text-block h3, .single-knowledge_base__article-text-block h4, .single-knowledge_base__article-text-block h5 { margin-top: 60px; } } .single-knowledge_base__article-video-block { position: relative; display: block; margin: 0 0 30px 0; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: 100%; } .single-knowledge_base__article-video-block iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .category { /*------------------------------------ Listing Page - Main Section -------------------------------------*/ /*------------------------------------ Article List -------------------------------------*/ } .category main { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 80px 0 0 0; } @media screen and (max-width: 1700px) { .category main { padding: 50px 15px 0 15px; } } @media screen and (max-width: 720px) { .category main { padding: 20px 15px 0 15px; } } .category__article-list { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 0 0; padding: 0 0 20px 0; } /*------------------------------------ Article Styling -------------------------------------*/ .category-article { position: relative; width: 33.3333%; max-width: 570px; height: 270px; padding: 5px 5px 5px 5px; margin: 0 0 0 0; cursor: pointer; overflow: hidden; } @media screen and (max-width: 1070px) { .category-article { width: calc(50% - 10px); } } @media screen and (max-width: 600px) { .category-article { width: 100%; } } .category-article a { position: relative; display: block; width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; overflow: hidden; } .category-article a .category-article__featured-image { position: relative; display: block; margin: 0 0 0 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .category-article a h4 { display: block; position: absolute; margin: 0 0 0 0; color: #ffffff; font-size: 16px; padding: 20px 20px 20px 20px; top: 0; left: 0; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } @media (min-width: 320px) { .category-article a h4 { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .category-article a h4 { font-size: 20px; } } .category-article a .category-article__event-details { position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; justify-items: flex-start; -webkit-align-content: flex-start; align-content: flex-start; top: 0; left: 0; width: 100%; height: 100%; padding: 20px 20px 20px 20px; } .category-article a .category-article__event-details h4 { position: relative; padding: 0 0 0 0; margin: 0 0 3px 0; width: 100%; } .category-article a .category-article__event-details p { color: #ffffff; margin: 0 0 5px 0; width: 100%; } @media screen and (max-width: 370px) { .category-article a .category-article__event-details p.event-stand { display: none; } } .category-article a .category-article__event-details img { display: block; width: 100%; max-width: 205px; margin: auto 0 0 0; } @media screen and (max-width: 1500px) { .category-article a .category-article__event-details img { display: none; } } @media screen and (max-width: 1070px) { .category-article a .category-article__event-details img { display: block; } } @media screen and (max-width: 960px) { .category-article a .category-article__event-details img { display: none; } } @media screen and (max-width: 600px) { .category-article a .category-article__event-details img { display: block; } } @media screen and (max-width: 480px) { .category-article a .category-article__event-details img { display: none; } } .category-article a:hover { text-decoration: none; } .category-article a:hover img.category-article__featured-image { -webkit-transform: scale(1.1); transform: scale(1.1); } .category-article__gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.8; } .taxonomy { /*------------------------------------ Listing Page - Main Section -------------------------------------*/ /*------------------------------------ Article List -------------------------------------*/ } .taxonomy main { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding-left: 15px; padding-right: 15px; padding-top: 30px; padding-bottom: 30px; } @media (min-width: 320px) { .taxonomy main { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .taxonomy main { padding-left: 50px; padding-right: 50px; } } @media (min-width: 320px) { .taxonomy main { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .taxonomy main { padding-top: 100px; } } @media (min-width: 320px) { .taxonomy main { padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .taxonomy main { padding-bottom: 100px; } } @media (min-width: 1730px) { .taxonomy main { padding-left: 0; padding-right: 0; } } .taxonomy__article-list { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 0 0; padding: 0 0 20px 0; } /*------------------------------------ Article Styling -------------------------------------*/ .category-article { position: relative; width: 33.3333%; max-width: 570px; max-height: 340px; padding: 5px 5px 5px 5px; margin: 0 0 0 0; cursor: pointer; overflow: hidden; } @media screen and (max-width: 1070px) { .category-article { width: calc(50% - 10px); } } @media screen and (max-width: 600px) { .category-article { width: 100%; } } .category-article a { position: relative; display: block; width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; overflow: hidden; } .category-article a .category-article__featured-image { position: relative; display: block; margin: 0 0 0 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .category-article a h4 { display: block; position: absolute; margin: 0 0 0 0; color: #ffffff; font-size: 16px; padding: 20px 20px 20px 20px; top: 0; left: 0; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } @media (min-width: 320px) { .category-article a h4 { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .category-article a h4 { font-size: 20px; } } .category-article a .category-article__event-details { position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; justify-items: flex-start; -webkit-align-content: flex-start; align-content: flex-start; top: 0; left: 0; width: 100%; height: 100%; padding: 20px 20px 20px 20px; } .category-article a .category-article__event-details h4 { position: relative; padding: 0 0 0 0; margin: 0 0 3px 0; width: 100%; } .category-article a .category-article__event-details p { color: #ffffff; margin: 0 0 5px 0; width: 100%; } @media screen and (max-width: 370px) { .category-article a .category-article__event-details p.event-stand { display: none; } } .category-article a .category-article__event-details img { display: block; width: 100%; max-width: 205px; margin: auto 0 0 0; } @media screen and (max-width: 1500px) { .category-article a .category-article__event-details img { display: none; } } @media screen and (max-width: 1070px) { .category-article a .category-article__event-details img { display: block; } } @media screen and (max-width: 960px) { .category-article a .category-article__event-details img { display: none; } } @media screen and (max-width: 600px) { .category-article a .category-article__event-details img { display: block; } } @media screen and (max-width: 480px) { .category-article a .category-article__event-details img { display: none; } } .category-article a:hover { text-decoration: none; } .category-article a:hover img.category-article__featured-image { -webkit-transform: scale(1.1); transform: scale(1.1); } .category-article__gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.8; } /*------------------------------------ Taxonmoy Product Category -------------------------------------*/ .tax-product_category .product-listing__main-content { padding-top: 10px; } .taxonomy-knowledge-product-type { /*------------------------------------------------------- Knowledge Base - Set Header Colours add needed ---------------------------------------------------------*/ /*------------------------------------------------------- Knowledge Base - Product Type Taxonomy - Main Section ---------------------------------------------------------*/ } .taxonomy-knowledge-product-type.blue .knowlege-base__header .electrolube-colours .electrolube-colours__colour { background-color: #0060A9; } .taxonomy-knowledge-product-type.red .knowlege-base__header .electrolube-colours .electrolube-colours__colour { background-color: #DD1840; } .taxonomy-knowledge-product-type.green .knowlege-base__header .electrolube-colours .electrolube-colours__colour { background-color: #3CA542; } .taxonomy-knowledge-product-type.yellow .knowlege-base__header .electrolube-colours .electrolube-colours__colour { background-color: #F9E700; } .taxonomy-knowledge-product-type.purple .knowlege-base__header .electrolube-colours .electrolube-colours__colour { background-color: #A5137F; } .taxonomy-knowledge-product-type.orange .knowlege-base__header .electrolube-colours .electrolube-colours__colour { background-color: #F6A900; } .taxonomy-knowledge-product-type main { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 20px auto; padding: 80px 0 80px 0; border-bottom: 2px solid #E8E8E9; } @media screen and (max-width: 1700px) { .taxonomy-knowledge-product-type main { padding: 50px 15px 0 15px; } } @media screen and (max-width: 720px) { .taxonomy-knowledge-product-type main { padding: 20px 15px 0 15px; } } /*--------------------------------------------------- Product Type Taxonomy - Product Type Information ---------------------------------------------------*/ .product-type-information { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin: 0 0 0 0; /*----------------------------------- Product Type Taxonomy - article ------------------------------------*/ /*----------------------------------- Product Type Taxonomy - description ------------------------------------*/ /*----------------------------------- Product Type Taxonomy - Link list ------------------------------------*/ /*----------------------------------- Product Type Taxonomy - sidebar (video) ------------------------------------*/ /*----------------------------------- Product Type Taxonomy - video Styling ------------------------------------*/ } .product-type-information__article { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 0 5% 0 0; } @media screen and (max-width: 1024px) { .product-type-information__article { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 0 0 20px 0; } } .product-type-information__article h1 { width: 100%; font-size: 18px; margin: 0 0 35px 0; } @media (min-width: 320px) { .product-type-information__article h1 { font-size: calc(18px + 12 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-type-information__article h1 { font-size: 30px; } } .product-type-information__description { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 0 14% 20px 0; padding-right: 5%; } @media (min-width: 320px) { .product-type-information__description { padding-right: calc(5% + 9 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .product-type-information__description { padding-right: 14%; } } @media screen and (max-width: 1440px) { .product-type-information__description { width: 50%; padding: 0 4% 20px 0; } } @media screen and (max-width: 640px) { .product-type-information__description { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 0 0 20px 0; } } .product-type-information__links { position: relative; width: 300px; padding: 0 2% 0 4%; } @media screen and (max-width: 1440px) { .product-type-information__links { width: 50%; padding: 0 0 20px 4%; } } @media screen and (max-width: 640px) { .product-type-information__links { width: 100%; padding: 0 0 20px 0; } } .product-type-information__links ul { list-style: none; display: block; margin: 0 0 20px 0; } .product-type-information__links ul li { display: block; margin: 0 0 20px 0; } .product-type-information__links ul li a { display: block; margin: 0 0 0 0; padding: 0 0 0 30px; background-repeat: no-repeat; background-image: url("../images/arrow-right-dark.svg"); background-size: 13px auto; background-position: center left 0; -webkit-transition: background-position 0.25s ease; transition: background-position 0.25s ease; } .product-type-information__links ul li a:link, .product-type-information__links ul li a:active, .product-type-information__links ul li a:visited { text-decoration: none; } .product-type-information__links ul li a:hover { background-position: center left 5px; } .product-type-information__sidebar { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin-bottom: 30px; } @media screen and (max-width: 1270px) { .product-type-information__sidebar { -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 40%; } } @media screen and (max-width: 1024px) { .product-type-information__sidebar { width: 100%; } } .product-type-information__video { position: relative; overflow: hidden; padding-top: 56.25%; } .product-type-information__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .tag { /*------------------------------------ Listing Page - Main Section -------------------------------------*/ /*------------------------------------ Article List -------------------------------------*/ } .tag main { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 80px 0 0 0; } @media screen and (max-width: 1700px) { .tag main { padding: 50px 15px 0 15px; } } @media screen and (max-width: 720px) { .tag main { padding: 20px 15px 0 15px; } } .tag__article-list { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 0 0; padding: 0 0 20px 0; } /*------------------------------------ Article Styling -------------------------------------*/ .category-article { position: relative; width: 33.3333%; max-width: 570px; padding: 5px 5px 5px 5px; margin: 0 0 0 0; cursor: pointer; overflow: hidden; height: 270px; } @media screen and (max-width: 1070px) { .category-article { width: calc(50% - 10px); } } @media screen and (max-width: 600px) { .category-article { width: 100%; } } .category-article a { position: relative; display: block; width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; overflow: hidden; } .category-article a .category-article__featured-image { position: relative; display: block; margin: 0 0 0 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .category-article a h4 { display: block; position: absolute; margin: 0 0 0 0; color: #ffffff; font-size: 16px; padding: 20px 20px 20px 20px; top: 0; left: 0; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } @media (min-width: 320px) { .category-article a h4 { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .category-article a h4 { font-size: 20px; } } .category-article a .category-article__event-details { position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; justify-items: flex-start; -webkit-align-content: flex-start; align-content: flex-start; top: 0; left: 0; width: 100%; height: 100%; padding: 20px 20px 20px 20px; } .category-article a .category-article__event-details h4 { position: relative; padding: 0 0 0 0; margin: 0 0 3px 0; width: 100%; } .category-article a .category-article__event-details p { color: #ffffff; margin: 0 0 5px 0; width: 100%; } @media screen and (max-width: 370px) { .category-article a .category-article__event-details p.event-stand { display: none; } } .category-article a .category-article__event-details img { display: block; margin: auto 0 0 0; } @media screen and (max-width: 1500px) { .category-article a .category-article__event-details img { display: none; } } @media screen and (max-width: 1070px) { .category-article a .category-article__event-details img { display: block; } } @media screen and (max-width: 960px) { .category-article a .category-article__event-details img { display: none; } } @media screen and (max-width: 600px) { .category-article a .category-article__event-details img { display: block; } } @media screen and (max-width: 480px) { .category-article a .category-article__event-details img { display: none; } } .category-article a:hover { text-decoration: none; } .category-article a:hover img.category-article__featured-image { -webkit-transform: scale(1.1); transform: scale(1.1); } .category-article__gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.8; } .page-template-page { /*------------------------------------ Single Page - Main Section -------------------------------------*/ /*------------------------------------ Page - Header -------------------------------------*/ /*------------------------------------ Page - Sub Navigation -------------------------------------*/ /*------------------------------------ Page - Article Section -------------------------------------*/ /*------------------------------------ Page - Event Information Section -------------------------------------*/ /*------------------------------------ Page - Article Image Block -------------------------------------*/ /*------------------------------------ Page - Text Image Block -------------------------------------*/ /*------------------------------------ Page - Video Block -------------------------------------*/ /*------------------------------------ Page - Contact Sidebar -------------------------------------*/ } .page-template-page main { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding-top: 30px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; } @media (min-width: 320px) { .page-template-page main { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page main { padding-top: 100px; padding-bottom: 100px; } } @media (min-width: 320px) { .page-template-page main { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page main { padding-left: 50px; padding-right: 50px; } } @media (min-width: 1730px) { .page-template-page main { padding-left: 0; padding-right: 0; } } .page-template-page__header { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 20px 0; background-repeat: no-repeat; background-size: cover; background-position: center center; } .page-template-page__header.grey { background: #555555; } .page-template-page__header-gradient { position: absolute; width: 100%; height: 100%; background: transparent; background: -webkit-linear-gradient(left, black 0%, rgba(255, 255, 255, 0) 53%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, black 0%, rgba(255, 255, 255, 0) 53%, rgba(255, 255, 255, 0) 100%); } @media screen and (max-width: 480px) { .page-template-page__header-gradient { background: rgba(0, 0, 0, 0.3); } } .page-template-page__header-wrapper { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding-top: 20px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; } @media (min-width: 320px) { .page-template-page__header-wrapper { padding-top: calc(20px + 100 * (100vw - 320px) / 1380); padding-bottom: calc(20px + 100 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__header-wrapper { padding-top: 120px; padding-bottom: 120px; } } @media (min-width: 320px) { .page-template-page__header-wrapper { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__header-wrapper { padding-left: 50px; padding-right: 50px; } } @media (min-width: 1730px) { .page-template-page__header-wrapper { padding-left: 0; padding-right: 0; } } .page-template-page__header-wrapper h2 { width: 50%; color: #ffffff; font-family: "Neo Sans W01", sans-serif; font-weight: normal; font-size: 28px; margin: 0 0 38px 0; } @media (min-width: 320px) { .page-template-page__header-wrapper h2 { font-size: calc(28px + 52 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__header-wrapper h2 { font-size: 80px; } } .grey .page-template-page__header-wrapper h2 { widtH: 100%; } .page-template-page__header-wrapper h2 strong { font-family: "Neo Sans W01 Bold", sans-serif; } @media screen and (max-width: 980px) { .page-template-page__header-wrapper h2 { width: 70%; } } @media screen and (max-width: 480px) { .page-template-page__header-wrapper h2 { width: 90%; } } .page-template-page__header-text { display: block; margin: 0 0 30px 0; padding: 0 0 0 0; width: 35%; } .grey .page-template-page__header-text { width: 100%; } @media screen and (max-width: 980px) { .page-template-page__header-text { width: 60%; } } @media screen and (max-width: 480px) { .page-template-page__header-text { width: 90%; } } .page-template-page__header-text p { color: #ffffff; font-size: 16px; } @media (min-width: 320px) { .page-template-page__header-text p { font-size: calc(16px + 4 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__header-text p { font-size: 20px; } } .page-template-page__header-down-arrow { position: relative; display: block; width: 154px; margin: 0 0 0 0; } @media screen and (max-width: 980px) { .page-template-page__header-down-arrow { width: 100px; } } @media screen and (max-width: 480px) { .page-template-page__header-down-arrow { width: 50px; } } .page-template-page .electrolube-colours { position: absolute; bottom: 0; left: 0; right: 0; top: auto; } .page-template-page__sidebar-subpages { position: relative; width: 320px; margin: 0 0 0 0; padding: 0 0 0 0; -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; } @media screen and (max-width: 1120px) { .page-template-page__sidebar-subpages { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; width: 100%; margin: 0 0 20px 0; } } @media screen and (max-width: 720px) { .page-template-page__sidebar-subpages { -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; width: 50%; } } @media screen and (max-width: 540px) { .page-template-page__sidebar-subpages { width: 100%; } } .page-template-page__sidebar-subpages h1 { font-size: 16px; margin-bottom: 20px; } @media (min-width: 320px) { .page-template-page__sidebar-subpages h1 { font-size: calc(16px + 5 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__sidebar-subpages h1 { font-size: 21px; } } @media (min-width: 320px) { .page-template-page__sidebar-subpages h1 { margin-bottom: calc(20px + 15 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__sidebar-subpages h1 { margin-bottom: 35px; } } .page-template-page__sidebar-subpages ul.children { padding-top: 16px; } .page-template-page__sidebar-subpages ul { position: relative; display: block; margin: 0; padding: 0; list-style: none; } .page-template-page__sidebar-subpages ul li { position: relative; margin: 0 0 12px 0; padding-left: 22px; } .page-template-page__sidebar-subpages ul li:before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 100%; background-color: #555555; } .page-template-page__sidebar-subpages ul li a { position: relative; display: inline-block; margin: 0 0 0 0; padding: 0px 30px 0px 0px; text-decoration: none; font-size: 16px; } @media (min-width: 320px) { .page-template-page__sidebar-subpages ul li a { font-size: calc(16px + 2 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__sidebar-subpages ul li a { font-size: 18px; } } .page-template-page__sidebar-subpages ul li a:before { content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 10px; width: 21px; height: 20px; background-image: url("../images/arrow-right-dark.svg"); background-position: center center; background-repeat: no-repeat; background-size: 21px 20px; opacity: 0; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .page-template-page__sidebar-subpages ul li a:hover:before { right: 0px; opacity: 1; } .page-template-page__sidebar-subpages ul li.current_page_item a { font-family: "Neo Sans W01 Bold", sans-serif; } .page-template-page__sidebar-subpages ul li.current_page_item a:before { content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0px; width: 21px; height: 20px; background-image: url("../images/arrow-right-dark.svg"); background-position: center center; background-repeat: no-repeat; background-size: 21px 20px; opacity: 1; } .page-template-page__sidebar-subpages ul li.current_page_item a:hover:before { right: 5px; opacity: 1; } .page-template-page__sidebar-return-link { display: block; position: relative; margin-top: 30px; } @media (min-width: 320px) { .page-template-page__sidebar-return-link { margin-top: calc(30px + 10 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__sidebar-return-link { margin-top: 40px; } } .page-template-page__sidebar-return-link a { position: relative; display: block; margin: 0 0 0 0; text-decoration: none; padding: 0 0 0 25px; } .page-template-page__sidebar-return-link a:before { content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 16px; height: 15px; background-image: url("../images/arrow-left-dark.svg"); background-position: center center; background-repeat: no-repeat; background-size: 16px 15px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .page-template-page__sidebar-return-link a:hover { padding-left: 22px; } .page-template-page__sidebar-return-link a:hover:before { -webkit-transform: translateY(-50%) scale(0.9); transform: translateY(-50%) scale(0.9); } .page-template-page__article { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding-left: 30px; padding-right: 30px; margin: 0 0 0 0; -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } @media (min-width: 1121px) { .page-template-page__article { padding-left: calc(30px + 70 * (100vw - 1121px) / 579); padding-right: calc(30px + 70 * (100vw - 1121px) / 579); } } @media (min-width: 1700px) { .page-template-page__article { padding-left: 100px; padding-right: 100px; } } @media screen and (max-width: 1120px) { .page-template-page__article { -webkit-box-ordinal-group: 2; -webkit-order: 1; order: 1; -webkit-box-flex: 0; -webkit-flex: none; flex: none; width: 100%; padding: 0 0 20px 0; } } .page-template-page__article-header { position: relative; display: block; margin: 0 0 35px 0; padding: 0 0 0 0; } .page-template-page__article-header figure { display: block; position: relative; margin: 0 0 0 0; padding: 0 0 0 0; width: 100%; max-width: 961px; } .page-template-page__article-header figure img { width: 100%; } .page-template-page__article-header figure figcaption { position: absolute; top: 0; left: 0; margin: 0 0 0 0; padding: 3% 3% 3% 3%; font-size: 22px; color: #ffffff; } @media (min-width: 320px) { .page-template-page__article-header figure figcaption { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__article-header figure figcaption { font-size: 40px; } } .page-template-page__article-header figure .featured-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.8; } .page-template-page__event-information { position: relative; display: block; margin: 0 0 30px 0; padding: 0 0 0 0; } .page-template-page__event-information img { position: relative; display: block; margin: 0 0 15px 0; width: 100%; max-width: 360px; } .page-template-page__article-image-block { display: block; position: relative; margin: 0 0 20px 0; } .page-template-page__article-image-block img { display: block; margin: 0 0 0 0; max-width: 100%; } .page-template-page__article-text-block { display: block; margin: 0 0 50px 0; } .page-template-page__article-text-block blockquote { display: block; border-left: 10px solid #E8E8E9; margin: 0 0 25px 0; padding: 20px 0 20px 4%; } .page-template-page__article-text-block blockquote p { font-size: 22px; } @media (min-width: 320px) { .page-template-page__article-text-block blockquote p { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__article-text-block blockquote p { font-size: 40px; } } .page-template-page__article-text-block ul { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; list-style-image: url("../images/custom-bullet-small.svg"); width: 100%; max-width: 560px; margin: 0 0 25px 15px; } .page-template-page__article-text-block ul li { width: 100%; margin: 0 0 15px 0; padding-right: 30px; } @media screen and (min-width: 640px) { .page-template-page__article-text-block ul li { width: 50%; } } .page-template-page__article-text-block h2, .page-template-page__article-text-block h3, .page-template-page__article-text-block h4, .page-template-page__article-text-block h5 { margin-top: 30px; } @media (min-width: 320px) { .page-template-page__article-text-block h2, .page-template-page__article-text-block h3, .page-template-page__article-text-block h4, .page-template-page__article-text-block h5 { margin-top: calc(30px + 30 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page__article-text-block h2, .page-template-page__article-text-block h3, .page-template-page__article-text-block h4, .page-template-page__article-text-block h5 { margin-top: 60px; } } @media screen and (max-width: 1250px) and (min-width: 1150px) { .page-template-page__article-text-block img { display: block; float: none !important; margin: 0 auto 0 auto; padding: 20px 0 20px 0 !important; } } @media screen and (max-width: 520px) { .page-template-page__article-text-block img { display: block; float: none !important; margin: 0 auto 0 0; padding: 10px 0 0px 0 !important; } } .page-template-page__article-video-block { position: relative; display: block; margin: 0 0 30px 0; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: 100%; } .page-template-page__article-video-block iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .page-template-page .contact-sidebar { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; } @media screen and (max-width: 1440px) { .page-template-page .contact-sidebar { width: 280px; } } @media screen and (max-width: 1120px) { .page-template-page .contact-sidebar { -webkit-box-ordinal-group: 3; -webkit-order: 2; order: 2; } } @media screen and (max-width: 720px) { .page-template-page .contact-sidebar { -webkit-box-ordinal-group: 4; -webkit-order: 3; order: 3; width: 50%; margin: 0 0 20px 0; } } @media screen and (max-width: 540px) { .page-template-page .contact-sidebar { width: 100%; } } .page-template-page .page-carousel-section { padding-bottom: 30px; } @media (min-width: 320px) { .page-template-page .page-carousel-section { padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .page-template-page .page-carousel-section { padding-bottom: 100px; } } /* ------------------------------------------------ Single Contact Post-Type && Archive Page ---------------------------------------------------*/ .contact { margin: 0 auto 2rem; max-width: 1700px; position: relative; } .contact__inner { margin: 2vh 15px; padding: 30px; padding-left: 15px; padding-right: 15px; margin-left: 15px; margin-right: 15px; background-color: #E8E8E9; } @media (min-width: 320px) { .contact__inner { padding-left: calc(15px + 15 * (100vw - 320px) / 1380); padding-right: calc(15px + 15 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .contact__inner { padding-left: 30px; padding-right: 30px; } } @media (min-width: 320px) { .contact__inner { margin-left: calc(15px + 35 * (100vw - 320px) / 1380); margin-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .contact__inner { margin-left: 50px; margin-right: 50px; } } @media (min-width: 1730px) { .contact__inner { margin-left: 0; margin-right: 0; } } .contact__location-group { margin-bottom: 1.5rem; } @media screen and (max-width: 400px) { .contact__location-group a { display: block; } .contact__location-group span { display: block; } } .contact__row { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .contact__col { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 1; flex-shrink: 1; -webkit-flex-basis: 100%; flex-basis: 100%; width: 100%; max-width: 100%; height: 100%; min-height: 100%; padding: 0 10px 1rem; } @media (min-width: 1024px) { .contact__col--67 { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 1; flex-shrink: 1; -webkit-flex-basis: 67%; flex-basis: 67%; width: 67%; max-width: 67%; } } @media (min-width: 768px) { .contact__col--50 { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 1; flex-shrink: 1; -webkit-flex-basis: 50%; flex-basis: 50%; width: 50%; max-width: 50%; } } @media (min-width: 1024px) { .contact__col--33 { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 1; flex-shrink: 1; -webkit-flex-basis: 33%; flex-basis: 33%; width: 33%; max-width: 33%; } } .contact__heading { width: 100%; padding: 0 10px; } .contact__heading.des { display: none; } @media (min-width: 1024px) { .contact__heading.des { display: block; } } .contact__heading.mob { display: none; } @media (max-width: 1024px) { .contact__heading.mob { display: block; } } .contact__heading h2 { width: 100%; margin-bottom: 1.5rem; } .contact__heading h2::after { content: ''; width: 100%; display: block; margin-top: 1.75rem; border-bottom: 2px solid #CCCCCC; } .contact__heading img { display: none; } .contact__form { padding: 0 10px; } .contact__form input, .contact__form textarea { width: 100% !important; border: 1px solid #CCCCCC; } .contact__form .gform_wrapper { margin-top: 0 !important; } .contact__form .gfield:first-of-type { margin-top: 0 !important; } .contact__form button { margin: 0em; padding: 15px 20px; background-color: #555555; color: #ffffff; font-family: "Neo Sans W01", sans-serif; font-size: 1.15rem; cursor: pointer; outline: none; -webkit-appearance: button; -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; box-sizing: border-box; border-style: none; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .contact__form button:hover { background-color: #3c3b3b; } .contact__form button:hover svg { margin: 0 10px 0 8px; } .contact__form button svg { margin-right: 18px; -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; } .search { /*------------------------------------ Search Page - Main Section -------------------------------------*/ } .search main { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding: 80px 0 0 0; } @media screen and (max-width: 1700px) { .search main { padding: 50px 15px 0 15px; } } @media screen and (max-width: 720px) { .search main { padding: 20px 15px 0 15px; } } /* Styles for the Knowldge Base PDFs */ .term-technical-data-sheets .electrolube-colours__colour--green, .term-technical-data-sheets .electrolube-colours__colour--yellow, .term-technical-data-sheets .electrolube-colours__colour--orange, .term-technical-data-sheets .electrolube-colours__colour--red, .term-technical-data-sheets .electrolube-colours__colour--purple, .term-safety-data-sheets .electrolube-colours__colour--green, .term-safety-data-sheets .electrolube-colours__colour--yellow, .term-safety-data-sheets .electrolube-colours__colour--orange, .term-safety-data-sheets .electrolube-colours__colour--red, .term-safety-data-sheets .electrolube-colours__colour--purple, .term-brochures .electrolube-colours__colour--green, .term-brochures .electrolube-colours__colour--yellow, .term-brochures .electrolube-colours__colour--orange, .term-brochures .electrolube-colours__colour--red, .term-brochures .electrolube-colours__colour--purple, .page-template-page-sds-download .electrolube-colours__colour--green, .page-template-page-sds-download .electrolube-colours__colour--yellow, .page-template-page-sds-download .electrolube-colours__colour--orange, .page-template-page-sds-download .electrolube-colours__colour--red, .page-template-page-sds-download .electrolube-colours__colour--purple { background: #0060A9; } .term-technical-data-sheets .category__article-list-content, .term-safety-data-sheets .category__article-list-content, .term-brochures .category__article-list-content, .page-template-page-sds-download .category__article-list-content { padding: 0 15px; width: 100%; } .term-technical-data-sheets .category__article-list-content h2, .term-safety-data-sheets .category__article-list-content h2, .term-brochures .category__article-list-content h2, .page-template-page-sds-download .category__article-list-content h2 { margin-bottom: 30px; } .term-technical-data-sheets .category__article-list-content p, .term-safety-data-sheets .category__article-list-content p, .term-brochures .category__article-list-content p, .page-template-page-sds-download .category__article-list-content p { max-width: 75%; margin-bottom: 60px; } @media (max-width: 768px) { .term-technical-data-sheets .category__article-list-content p, .term-safety-data-sheets .category__article-list-content p, .term-brochures .category__article-list-content p, .page-template-page-sds-download .category__article-list-content p { max-width: 100%; } } .term-technical-data-sheets .category__article-list-content:after, .term-safety-data-sheets .category__article-list-content:after, .term-brochures .category__article-list-content:after, .page-template-page-sds-download .category__article-list-content:after { content: ''; margin-bottom: 50px; display: block; width: 100%; height: 1px; background: rgba(177, 177, 177, 0.5); } .term-technical-data-sheets .category__article-list img, .term-safety-data-sheets .category__article-list img, .term-brochures .category__article-list img, .page-template-page-sds-download .category__article-list img { display: inline-block; margin: 0 15px 24px 0; vertical-align: middle; width: 42px; height: 31px; } .term-technical-data-sheets .category__article-list h3, .term-safety-data-sheets .category__article-list h3, .term-brochures .category__article-list h3, .page-template-page-sds-download .category__article-list h3 { display: inline-block; vertical-align: middle; margin: 0 0 24px 0; padding: 0 28px 0 0; font-size: 18px; border-right: 8px solid #b1b1b1; } .term-technical-data-sheets .category__article-list h3.blue, .term-safety-data-sheets .category__article-list h3.blue, .term-brochures .category__article-list h3.blue, .page-template-page-sds-download .category__article-list h3.blue { border-color: #0060A9; } .term-technical-data-sheets .category__article-list h3.green, .term-safety-data-sheets .category__article-list h3.green, .term-brochures .category__article-list h3.green, .page-template-page-sds-download .category__article-list h3.green { border-color: #3CA542; } .term-technical-data-sheets .category__article-list h3.yellow, .term-safety-data-sheets .category__article-list h3.yellow, .term-brochures .category__article-list h3.yellow, .page-template-page-sds-download .category__article-list h3.yellow { border-color: #F9E700; } .term-technical-data-sheets .category__article-list h3.purple, .term-safety-data-sheets .category__article-list h3.purple, .term-brochures .category__article-list h3.purple, .page-template-page-sds-download .category__article-list h3.purple { border-color: #A5137F; } .term-technical-data-sheets .category__article-list h3.orange, .term-safety-data-sheets .category__article-list h3.orange, .term-brochures .category__article-list h3.orange, .page-template-page-sds-download .category__article-list h3.orange { border-color: #F6A900; } .term-technical-data-sheets .category__article-list h3.red, .term-safety-data-sheets .category__article-list h3.red, .term-brochures .category__article-list h3.red, .page-template-page-sds-download .category__article-list h3.red { border-color: #DD1840; } .term-technical-data-sheets .category__article-list h3.grey, .term-safety-data-sheets .category__article-list h3.grey, .term-brochures .category__article-list h3.grey, .page-template-page-sds-download .category__article-list h3.grey { border-color: #f6f6f6; } .term-technical-data-sheets .category__article-list h3.electrolube_grey, .term-safety-data-sheets .category__article-list h3.electrolube_grey, .term-brochures .category__article-list h3.electrolube_grey, .page-template-page-sds-download .category__article-list h3.electrolube_grey { border-color: #CCCCCC; } .term-technical-data-sheets .category__article-list h3.light_black, .term-safety-data-sheets .category__article-list h3.light_black, .term-brochures .category__article-list h3.light_black, .page-template-page-sds-download .category__article-list h3.light_black { border-color: #979797; } .term-technical-data-sheets .category__article-list-grid, .term-safety-data-sheets .category__article-list-grid, .term-brochures .category__article-list-grid, .page-template-page-sds-download .category__article-list-grid { margin-bottom: 30px; width: 100%; } .term-technical-data-sheets .category__article-list-grid-inner, .term-safety-data-sheets .category__article-list-grid-inner, .term-brochures .category__article-list-grid-inner, .page-template-page-sds-download .category__article-list-grid-inner { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; justify-items: stretch; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; width: 100%; max-width: 1700px; margin: 0 0 30px; } .term-technical-data-sheets .category__article-list-grid-item, .term-safety-data-sheets .category__article-list-grid-item, .term-brochures .category__article-list-grid-item, .page-template-page-sds-download .category__article-list-grid-item { margin: 0 15px 15px 15px; padding: 5px 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; width: calc(16.6667% - 30px); border-bottom: 1px solid rgba(177, 177, 177, 0.5); } @media (max-width: 1085px) { .term-technical-data-sheets .category__article-list-grid-item, .term-safety-data-sheets .category__article-list-grid-item, .term-brochures .category__article-list-grid-item, .page-template-page-sds-download .category__article-list-grid-item { width: calc(25% - 30px); } } @media (max-width: 768px) { .term-technical-data-sheets .category__article-list-grid-item, .term-safety-data-sheets .category__article-list-grid-item, .term-brochures .category__article-list-grid-item, .page-template-page-sds-download .category__article-list-grid-item { width: calc(33.3333% - 30px); } } @media (max-width: 600px) { .term-technical-data-sheets .category__article-list-grid-item, .term-safety-data-sheets .category__article-list-grid-item, .term-brochures .category__article-list-grid-item, .page-template-page-sds-download .category__article-list-grid-item { width: calc(50% - 30px); } } @media (max-width: 380px) { .term-technical-data-sheets .category__article-list-grid-item, .term-safety-data-sheets .category__article-list-grid-item, .term-brochures .category__article-list-grid-item, .page-template-page-sds-download .category__article-list-grid-item { width: calc(100% - 30px); } } .term-technical-data-sheets .category__article-list-grid-item a, .term-safety-data-sheets .category__article-list-grid-item a, .term-brochures .category__article-list-grid-item a, .page-template-page-sds-download .category__article-list-grid-item a { padding-right: 35px; text-decoration: none; display: block; width: 100%; position: relative; font-size: 1rem; } .term-technical-data-sheets .category__article-list-grid-item .download-icon, .term-safety-data-sheets .category__article-list-grid-item .download-icon, .term-brochures .category__article-list-grid-item .download-icon, .page-template-page-sds-download .category__article-list-grid-item .download-icon { width: 1rem; height: auto; position: absolute; top: 4px; right: 0; } /* Safety Data Sheets Only Styling */ .term-safety-data-sheets .category__article-list-content p { margin-bottom: 20px; } .term-safety-data-sheets .category__article-list-content::after { margin-bottom: 20px; } .term-safety-data-sheets .countries-no-ajax { padding: 20px 15px 0 15px; margin-bottom: 30px; } .error404 { /*------------------------------------ 404 Page - Main Section -------------------------------------*/ /*------------------------------------ 404 Page - Header Section -------------------------------------*/ } .error404 main { position: relative; display: block; width: 100%; max-width: 1700px; margin: 0 auto 0 auto; padding-left: 15px; padding-right: 15px; padding-top: 30px; padding-bottom: 30px; } @media (min-width: 320px) { .error404 main { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .error404 main { padding-left: 50px; padding-right: 50px; } } @media (min-width: 320px) { .error404 main { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .error404 main { padding-top: 100px; } } @media (min-width: 320px) { .error404 main { padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .error404 main { padding-bottom: 100px; } } @media (min-width: 1730px) { .error404 main { padding-left: 0; padding-right: 0; } } .error404 .error-header { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #E8E8E9; width: 100%; } .error404 .error-header__wrapper { display: block; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 100%; max-width: 1700px; padding-left: 15px; padding-right: 15px; padding-top: 30px; padding-bottom: 30px; } @media (min-width: 320px) { .error404 .error-header__wrapper { padding-left: calc(15px + 35 * (100vw - 320px) / 1380); padding-right: calc(15px + 35 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .error404 .error-header__wrapper { padding-left: 50px; padding-right: 50px; } } @media (min-width: 320px) { .error404 .error-header__wrapper { padding-top: calc(30px + 70 * (100vw - 320px) / 1380); padding-bottom: calc(30px + 70 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .error404 .error-header__wrapper { padding-top: 100px; padding-bottom: 100px; } } @media (min-width: 1730px) { .error404 .error-header__wrapper { padding-left: 0; padding-right: 0; } } .error404 .error-header__wrapper h1 { font-size: 22px; margin: 0 0 30px 0; } @media (min-width: 320px) { .error404 .error-header__wrapper h1 { font-size: calc(22px + 18 * (100vw - 320px) / 1380); } } @media (min-width: 1700px) { .error404 .error-header__wrapper h1 { font-size: 40px; } } .error404 .error-header__wrapper form { position: relative; display: block; width: 50%; margin: 0 0 0 0; padding: 0 0 0 0; background-color: rgba(232, 232, 233, 0.1); } @media screen and (max-width: 620px) { .error404 .error-header__wrapper form { width: 100%; } } .error404 .error-header__wrapper form fieldset { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-align-content: flex-start; align-content: flex-start; border: 1px solid #979797; } .error404 .error-header__wrapper form input[type="text"] { padding: 10px 10px 10px 10px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; background-color: #ffffff; border: none; font-family: "Neo Sans W01 Light734947", sans-serif; color: #555555; font-style: italic; font-size: 1.25rem; font-weight: 300; width: calc(100% - 53px); } .safari .error404 .error-header__wrapper form input[type="text"] { margin: 0; } .error404 .error-header__wrapper form input[type="submit"] { width: 53px; height: 44px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; background-image: url("../images/arrow-right-dark.svg"); background-repeat: no-repeat; background-size: 27px auto; background-position: left 10px center; font-size: 0; cursor: pointer; -webkit-transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out; position: absolute; right: 0; top: 0; } .safari .error404 .error-header__wrapper form input[type="submit"] { margin-top: 2px; height: 42px; } .error404 .error-header__wrapper form input[type="submit"]:hover { background-position: left 20px center; } /*# sourceMappingURL=main.css.map */