/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0; }
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block; }
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px; }
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */ }
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */ }
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit; }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic; }
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000; }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block; }
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none; }
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */ }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */ }
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block; }
/**
* Add the correct display in IE.
*/
template {
display: none; }
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none; }
/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
* {
box-sizing: border-box; }
*::before,
*::after {
box-sizing: border-box; }
html {
color: #222;
font-size: 1em;
line-height: 1.4; }
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none; }
::selection {
background: #b3d4fc;
text-shadow: none; }
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0; }
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle; }
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0; }
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical; }
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0; }
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important; }
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
/* 1 */ }
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
-webkit-clip-path: none;
clip-path: none;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit; }
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden; }
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */ }
.clearfix:after {
clear: both; }
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */ }
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */ }
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important; }
a,
a:visited {
text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""; }
pre {
white-space: pre-wrap !important; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group; }
tr,
img {
page-break-inside: avoid; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0; }
input.ng-invalid-max, input.ng-invalid-min {
border-color: red !important;
background: rgba(255, 0, 0, 0.2509803922) !important; }
*[type=disabled] {
cursor: default;
opacity: .5; }
*[type=disabled]:hover {
opacity: .5;
cursor: default; }
html,
body {
background-color: #2b3134;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
width: 100%;
position: relative;
overflow-x: hidden; }
/** MISC **/
.visibility-none {
display: none;
visibility: hidden; }
*::selection {
background: rgba(250, 168, 25, 0.3);
/* WebKit/Blink Browsers */ }
*::-moz-selection {
background: rgba(250, 168, 25, 0.3);
/* Gecko Browsers */ }
*::-webkit-selection {
background: rgba(250, 168, 25, 0.3); }
h2 {
color: #159fdb;
text-transform: uppercase;
letter-spacing: 10px;
font-size: 22px;
font-weight: 400;
text-align: center;
margin: 100px 0;
padding: 0 20px; }
/** CONTENT WRAPPER **/
.content-wrapper {
width: 100%;
height: auto;
display: block;
position: relative;
z-index: 100; }
/** FOOTER PRODUCTS LIST **/
.footer-products-list {
margin: 90px 0 100px 0;
padding: 0 40px; }
.footer-products-list .inner {
width: 100%;
height: auto;
display: flex;
align-items: flex-start;
justify-content: flex-start; }
.footer-products-list .inner .group {
width: calc(100% / 7);
height: auto;
position: relative; }
.footer-products-list .inner .group a {
display: block;
color: rgba(250, 168, 25, 0.9);
width: 100%;
text-decoration: none; }
.footer-products-list .inner .group a:hover {
color: #159fdb; }
.footer-products-list .inner .group > a {
position: relative; }
.footer-products-list .inner .group > a span {
padding: 0 30px 0 15px;
display: block;
width: 100%;
white-space: pre; }
.footer-products-list .inner .group > a::before {
content: "";
display: block;
width: 25px;
height: 25px;
border: 5px solid #faa819;
border-radius: 100%;
position: absolute;
bottom: -10px;
left: -23px;
background: #262c39; }
.footer-products-list .inner .group > a::after {
display: block;
content: "";
width: 100%;
background: rgba(250, 168, 25, 0.9);
height: 5px;
margin: 5px 0; }
.footer-products-list .inner .group .list {
position: relative; }
.footer-products-list .inner .group .list a {
position: relative;
color: #159fdb;
padding: 0 0 0 15px; }
.footer-products-list .inner .group .list a:hover {
color: rgba(250, 168, 25, 0.9); }
.footer-products-list .inner .group .list a::before {
content: "";
display: block;
width: 5px;
height: 1px;
background: #faa819;
position: absolute;
left: 0;
top: 11px; }
.footer-products-list .inner .group .list::before {
content: "";
display: block;
width: 1px;
height: 100%;
position: absolute;
left: 0;
background: rgba(250, 168, 25, 0.9);
top: -10px; }
@media (max-width: 1500px) {
.footer-products-list .inner {
flex-wrap: wrap; }
.footer-products-list .inner .group {
width: calc(100% / 4);
margin: 0 0 40px 0; } }
@media (max-width: 1100px) {
.footer-products-list .inner .group {
width: calc(100% / 2); } }
@media (max-width: 600px) {
.footer-products-list .inner .group {
width: calc(100% / 1);
margin: 0 0 20px 0; }
.footer-products-list .inner .group .list::before {
height: 300%; } }
/** MEDIA **/
@media (max-width: 450px) {
h2 {
padding: 0 10px; } }
header {
position: fixed;
top: 0;
left: 0;
padding: 0 40px;
height: 90px;
width: 100%;
transition: All 0.3s ease-in-out;
background: transparent;
z-index: 150;
/** MINI HEADER **/
/** OPEN HEADER **/
/** SEARCH **/
/** MEDIA **/ }
header .inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start; }
header .inner .microwell-logo {
width: auto;
display: flex;
flex-direction: column;
text-decoration: none; }
header .inner .microwell-logo span {
color: #fff;
font-size: 14px;
letter-spacing: .4px;
font-weight: 300;
transition: All 0.3s ease-in-out;
text-align: right;
visibility: visible;
opacity: .8;
max-height: 25px;
overflow: hidden; }
header .inner .microwell-logo img {
transition: All 0.3s ease-in-out; }
header .inner .microwell-logo img:not(.mobile) {
height: 30px;
width: auto;
object-fit: contain;
object-position: left center; }
header .inner .microwell-logo img.mobile {
width: 70px;
display: none; }
header .inner .actions {
margin-left: auto;
display: flex;
align-items: center;
justify-content: flex-end; }
header .inner .actions .support {
padding: 0 10px 0 0; }
header .inner .actions .support a {
display: block;
text-align: right;
color: rgba(250, 168, 25, 0.9);
text-decoration: none;
font-weight: 700;
font-size: 20px;
line-height: 1;
transition: All 0.3s ease-in-out;
opacity: 1;
visibility: visible; }
header .inner .actions .support a:hover {
color: #fff; }
header .inner .actions .nav-trigger,
header .inner .actions .language-trigger {
width: 80px;
height: 80px;
background: rgba(250, 168, 25, 0.9);
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
transition: All 0.3s ease-in-out;
cursor: pointer; }
header .inner .actions .nav-trigger span,
header .inner .actions .language-trigger span {
text-transform: uppercase;
color: #fff;
font-weight: 700;
text-align: center;
font-size: 12px;
display: block; }
header .inner .actions .nav-trigger span + span,
header .inner .actions .language-trigger span + span {
display: none; }
header .inner .actions .nav-trigger:hover, header .inner .actions .nav-trigger._open,
header .inner .actions .language-trigger:hover,
header .inner .actions .language-trigger._open {
background: rgba(219, 141, 5, 0.9); }
header .inner .actions .nav-trigger:last-child,
header .inner .actions .language-trigger:last-child {
margin: 0 0 0 5px; }
header .inner .actions .language-trigger {
width: 40px;
position: relative; }
header .inner .actions .language-trigger > a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
text-align: center;
font-size: 12px;
display: block; }
header .inner .actions .language-trigger > div {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
top: 100%;
visibility: hidden;
opacity: 0;
z-index: -1;
transition: 0.2s; }
header .inner .actions .language-trigger > div > a {
width: 100%;
height: 40px;
background: rgba(250, 168, 25, 0.9);
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
text-align: center;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center; }
header .inner .actions .language-trigger > div > a:hover {
background: rgba(219, 141, 5, 0.9); }
header .inner .actions .language-trigger > div > a:nth-child(1) {
background: rgba(244, 157, 5, 0.9); }
header .inner .actions .language-trigger > div > a:nth-child(1):hover {
background: rgba(194, 125, 4, 0.9); }
header .inner .actions .language-trigger > div > a:nth-child(2) {
background: rgba(219, 141, 5, 0.9); }
header .inner .actions .language-trigger > div > a:nth-child(2):hover {
background: rgba(169, 109, 4, 0.9); }
header .inner .actions .language-trigger > div > a:nth-child(3) {
background: rgba(194, 125, 4, 0.9); }
header .inner .actions .language-trigger > div > a:nth-child(3):hover {
background: rgba(144, 93, 3, 0.9); }
header .inner .actions .language-trigger._show > div {
visibility: visible;
opacity: 1;
z-index: 250; }
header._mini {
background: #2b3134;
height: 60px; }
header._mini .inner .microwell-logo span {
font-size: 14px; }
header._mini .inner .actions .support a {
font-size: 15px; }
header._mini .inner .actions .nav-trigger,
header._mini .inner .actions .language-trigger {
height: 40px; }
header._open {
background: rgba(250, 168, 25, 0.9); }
header._open .inner .actions .support a {
opacity: 0;
visibility: hidden; }
header .nav-search {
display: none; }
header .search-form {
margin: 0 20px 0 0;
position: relative; }
header .search-form input {
height: 32px;
padding: 0 10px;
line-height: 1;
border: 1px solid #000;
margin: 0;
box-sizing: border-box; }
header .search-form::after {
content: "";
display: block;
width: 26px;
height: 26px;
background: url(../images/svg/search.svg) no-repeat;
background-size: contain;
background-position: center;
position: absolute;
top: 3px;
right: 5px; }
@media (max-width: 1100px) {
header .search-form {
display: none; }
header .nav-search {
display: block; } }
@media (max-width: 900px) {
header .inner .actions .support a {
font-size: 18px; }
header .inner .actions .nav-trigger,
header .inner .actions .language-trigger {
width: 40px;
height: 40px; }
header .inner .actions .nav-trigger span:first-child,
header .inner .actions .language-trigger span:first-child {
display: none; }
header .inner .actions .nav-trigger span:first-child + span,
header .inner .actions .language-trigger span:first-child + span {
display: block; } }
@media (max-width: 768px) {
header .inner .actions .support {
padding: 0 5px 0 0;
display: flex;
align-items: center;
justify-content: flex-end; }
header .inner .actions .support a {
width: 40px;
height: 40px;
background: rgba(250, 168, 25, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 1 !important;
visibility: visible !important; }
header .inner .actions .support a span {
display: none; }
header .inner .actions .support a::after {
content: "";
display: block;
width: 25px;
height: 25px; }
header .inner .actions .support a.phone::after {
background: url(../images/svg/phone.svg) no-repeat;
background-size: contain;
background-position: center; }
header .inner .actions .support a.mail::after {
background: url(../images/svg/mail.svg) no-repeat;
background-size: contain;
background-position: center; }
header .inner .actions .support a:not(:first-child) {
margin: 0 0 0 10px; } }
@media (max-width: 650px) {
header {
padding: 0 20px; }
header .inner .microwell-logo img {
display: none; }
header .inner .microwell-logo img.mobile {
display: block; }
header .inner .microwell-logo span {
display: none; }
header._mini .inner .microwell-logo img.mobile {
width: 40px; } }
@media (max-width: 380px) {
header {
padding: 0 10px; } }
@media (max-width: 350px) {
header .inner .actions .support {
display: none; } }
nav {
width: 100%;
position: fixed;
top: 90px;
background: rgba(250, 168, 25, 0.9);
left: 0;
padding: 0 40px;
opacity: 0;
visibility: hidden;
transition: All 0.3s ease-in-out;
z-index: 170; }
nav .line {
display: flex;
align-items: center;
justify-content: flex-end; }
nav .line span {
display: block;
width: 0;
height: 1px;
background: #fff;
margin: 5px;
transition: All 0.3s ease-in-out;
transition-delay: 0.2s; }
nav .close-nav {
width: 100%;
display: block;
position: relative;
transform: translateX(40px);
opacity: 0;
transition: All 0.3s ease-in-out;
z-index: 25; }
nav .close-nav img {
display: block;
margin: 10px 0 10px auto;
width: 40px;
cursor: pointer; }
nav .inner {
display: block;
position: relative;
z-index: 50;
width: calc(100% - 40px);
margin: -40px 0 40px 0; }
nav .inner .nav-content {
width: 100%;
position: relative;
height: auto; }
nav .inner .nav-content > div {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
visibility: hidden;
opacity: 0;
transition: All 0.3s ease-in-out; }
nav .inner .nav-content > div.nav-container .data-group {
width: calc(100% / 8);
margin: 0 0 40px 0; }
nav .inner .nav-content > div.nav-container .data-group .group-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 10px;
color: #fff;
text-transform: uppercase;
display: block;
line-height: 1;
min-height: 40px; }
nav .inner .nav-content > div.nav-container .data-group .group-title:hover {
color: #159fdb; }
nav .inner .nav-content > div.nav-container.grouped {
justify-content: space-between; }
nav .inner .nav-content > div.nav-container:not(:first-child) {
position: absolute;
top: 0; }
nav .inner .nav-content > div a {
display: block;
color: #fff;
font-weight: 300;
text-decoration: none;
font-size: 16px;
line-height: 1.25; }
nav .inner .nav-content > div a:hover {
color: #159fdb;
font-weight: 700; }
nav .inner .nav-content > div > a {
font-size: 18px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
margin: 0 100px 20px 0; }
nav .inner .nav-content > div._show {
opacity: 1;
visibility: visible; }
/** HEADER STATE **/
header._mini + nav {
top: 60px; }
header._open + nav {
opacity: 1;
visibility: visible; }
header._open + nav .line span {
width: 100%; }
header._open + nav .close-nav {
opacity: 1;
transform: translateX(0); }
/** MEDIA **/
@media (max-width: 1280px) {
nav .inner .nav-content > div.nav-container .data-group {
width: calc(100% / 5);
margin: 0 0 50px 0; }
nav .inner .nav-content > div.nav-container.grouped {
justify-content: flex-start; } }
@media (max-width: 1024px) {
nav .inner .nav-content > div.nav-container .data-group {
width: calc(100% / 4); } }
@media (max-width: 900px) {
nav {
overflow: scroll;
height: calc(100vh - 90px); }
nav .inner .nav-content > div.nav-container .data-group {
margin: 0 0 25px 0;
width: calc(100% / 3); }
nav .inner .nav-content > div > a {
width: 100%; }
header._mini + nav {
height: calc(100vh - 60px); } }
@media (max-width: 650px) {
nav {
padding: 0 20px; } }
@media (max-width: 600px) {
nav .inner .nav-content > div.nav-container .data-group {
width: calc(100% / 2); } }
@media (max-width: 450px) {
nav .inner .nav-content > div.nav-container .data-group {
width: 100%; } }
@media (max-width: 380px) {
nav {
padding: 0 10px; } }
footer {
width: 100%;
height: 350px;
background: #23272a;
z-index: 150;
position: relative;
overflow: hidden; }
footer .inner {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start; }
footer .inner .footer-info {
width: 100%;
max-width: calc(100% - 730px);
padding: 50px;
height: 100%;
display: flex;
position: relative; }
footer .inner .footer-info .back-link {
position: absolute;
top: 0;
left: 0;
margin: 10px;
color: rgba(250, 168, 25, 0.9);
z-index: 200;
font-size: 15px;
padding: 10px 0 0 10px;
cursor: pointer;
display: none; }
footer .inner .footer-info .back-link::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url(../images/svg/arrow-back-yellow.svg) no-repeat;
background-size: contain;
background-position: center;
position: relative;
top: 3px; }
footer .inner .footer-info .back-link:hover {
opacity: .8; }
footer .inner .footer-info .back-link._show {
display: block; }
@media (max-width: 768px) {
footer .inner .footer-info .back-link {
left: inherit;
right: 0; } }
footer .inner .footer-info .links-container {
width: 250px;
border-right: 1px solid rgba(250, 168, 25, 0.9);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 32px 0 0;
height: 100%; }
footer .inner .footer-info .links-container .swiper-container {
margin: 0;
height: 100%; }
footer .inner .footer-info .links-container a {
display: block;
width: 100%;
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;
font-size: 18px;
padding: 0 0 20px;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-decoration: none;
line-height: 1; }
footer .inner .footer-info .links-container a img {
width: 11px;
display: inline-block;
top: -1px;
position: relative; }
footer .inner .footer-info .links-container a:hover {
color: rgba(250, 168, 25, 0.9); }
@media (max-width: 768px) {
footer .inner .footer-info .links-container {
padding: 0;
border: none;
border-bottom: 1px solid rgba(250, 168, 25, 0.9);
width: 100%;
height: auto; } }
footer .inner .footer-info .newsletter-and-socials {
width: 100%;
padding: 0 0 0 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
flex-wrap: wrap; }
footer .inner .footer-info .newsletter-and-socials .footer-slogan {
height: auto;
width: 100%;
color: #fff;
margin-top: -3px;
font-weight: 300;
font-style: normal;
padding: 0 0 20px; }
footer .inner .footer-info .newsletter-and-socials .newsletter-form {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 10px 0 0 0;
position: relative; }
footer .inner .footer-info .newsletter-and-socials .newsletter-form .message {
position: absolute;
top: 0;
z-index: 50;
background: #23272a;
width: 100%;
text-align: center;
color: #fff;
line-height: 1;
font-weight: 600;
border: 1px solid #fff;
height: 100%;
padding: 2px 0 0 0;
display: none; }
footer .inner .footer-info .newsletter-and-socials .newsletter-form .message p {
margin: 0 !important;
height: 100%; }
footer .inner .footer-info .newsletter-and-socials .newsletter-form input {
height: 32px;
padding: 10px;
border: 1px solid #117dac; }
@media (max-width: 768px) {
footer .inner .footer-info .newsletter-and-socials .newsletter-form input {
width: 100%; } }
footer .inner .footer-info .newsletter-and-socials .newsletter-form button {
display: block;
border: 1px solid #117dac;
background: #159fdb;
width: 32px;
height: 32px;
outline: none;
cursor: pointer; }
footer .inner .footer-info .newsletter-and-socials .newsletter-form button img {
display: block;
width: 100%;
height: 100%; }
footer .inner .footer-info .newsletter-and-socials .newsletter-form button svg {
display: none; }
footer .inner .footer-info .newsletter-and-socials .newsletter-form button:hover {
background: #117dac; }
footer .inner .footer-info .newsletter-and-socials > div {
height: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
padding: 0 100px 0 0; }
footer .inner .footer-info .newsletter-and-socials > div .newsletter {
width: 350px; }
@media (max-width: 768px) {
footer .inner .footer-info .newsletter-and-socials > div .newsletter {
width: 100%; } }
footer .inner .footer-info .newsletter-and-socials > div .address {
width: auto; }
footer .inner .footer-info .newsletter-and-socials > div .address address {
color: #fff;
font-style: initial;
font-size: 16px;
line-height: 25px;
margin: 0 0 20px 0; }
footer .inner .footer-info .newsletter-and-socials > div .address address p {
margin: 0; }
footer .inner .footer-info .newsletter-and-socials > div .address a {
display: block;
color: #fff;
text-decoration: none; }
footer .inner .footer-info .newsletter-and-socials > div .address a:hover {
color: rgba(250, 168, 25, 0.9); }
@media (max-width: 900px) {
footer .inner .footer-info .newsletter-and-socials > div .address {
display: none; } }
footer .inner .footer-info .newsletter-and-socials > div h3 {
text-transform: uppercase;
color: #fff;
font-size: 18px;
font-weight: 300;
font-style: initial;
margin: 0;
padding: 0; }
footer .inner .footer-info .newsletter-and-socials > div .nc p {
color: #fff;
font-size: 15px;
line-height: 18px;
padding: 5px 0 0;
font-style: initial;
margin: 5px 0 5px 0; }
footer .inner .footer-info .newsletter-and-socials > div .nc p a {
text-decoration: underline;
color: rgba(250, 168, 25, 0.9); }
footer .inner .footer-info .newsletter-and-socials > div .nc p a:hover {
color: rgba(219, 141, 5, 0.9); }
footer .inner .footer-info .newsletter-and-socials > div .sc {
margin: 20px 0 0 0; }
footer .inner .footer-info .newsletter-and-socials > div .sc > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
footer .inner .footer-info .newsletter-and-socials > div .sc > div a {
display: block;
width: 36px;
height: 36px;
margin: 0 10px 0 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
cursor: pointer; }
footer .inner .footer-info .newsletter-and-socials > div .sc > div a:last-child {
margin: 0; }
footer .inner .footer-info .newsletter-and-socials > div .sc > div a:hover {
opacity: .8; }
@media (max-width: 1800px) {
footer .inner .footer-info .newsletter-and-socials > div {
padding: 0; } }
@media (max-width: 768px) {
footer .inner .footer-info .newsletter-and-socials {
padding: 0;
margin: 40px 0 0 0; } }
@media (max-width: 1700px) {
footer .inner .footer-info {
max-width: calc(100% - 500px); } }
@media (max-width: 1450px) {
footer .inner .footer-info {
max-width: calc(100% - 400px); } }
@media (max-width: 1300px) {
footer .inner .footer-info {
max-width: 100%; } }
@media (max-width: 768px) {
footer .inner .footer-info {
flex-direction: column;
padding: 20px; } }
footer .inner .map-container {
width: 100%;
max-width: 730px;
overflow: hidden;
height: 100%;
position: relative;
display: block;
cursor: pointer; }
footer .inner .map-container svg {
display: block;
width: 100%;
position: relative;
top: -65%;
transition: all 500ms linear;
transform: scale(1) translate3d(0, 0, 0); }
footer .inner .map-container svg .st0 {
transition: all 300ms linear;
fill: #1D9FD9; }
footer .inner .map-container._zoom svg {
transform: scale(8) translate3d(0, -72px, 0); }
footer .inner .map-container._zoom svg .st0 {
fill: transparent; }
@media (max-width: 1700px) {
footer .inner .map-container {
max-width: 500px; }
footer .inner .map-container svg {
top: -25%; }
footer .inner .map-container._zoom svg {
transform: scale(8) translate3d(0, -52px, 0); } }
@media (max-width: 1450px) {
footer .inner .map-container {
max-width: 400px; }
footer .inner .map-container svg {
top: 0; }
footer .inner .map-container._zoom svg {
transform: scale(8) translate3d(0, -45px, 0); } }
@media (max-width: 1300px) {
footer .inner .map-container {
display: none; } }
@media (max-width: 900px) {
footer {
height: auto; } }
html:lang(de) footer .inner .footer-info {
padding: 20px; }
.primary,
.secondary {
height: 75px;
font-size: 13px;
letter-spacing: 1px;
padding: 0 0 0 2px;
color: #fff;
background: rgba(250, 168, 25, 0.9);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
min-width: 255px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
transition: All 0.3s ease-in-out;
border: 1px solid rgba(244, 157, 5, 0.9);
line-height: 1;
outline: none; }
.primary.blue,
.secondary.blue {
background: #159fdb;
border: 1px solid #138ec4; }
.primary.white,
.secondary.white {
background: #fff;
color: #159fdb;
border: 1px solid #f2f2f2; }
.primary:hover,
.secondary:hover {
background: rgba(219, 141, 5, 0.9); }
.primary:hover.blue,
.secondary:hover.blue {
background: #117dac; }
.primary:hover.white,
.secondary:hover.white {
background: #159fdb;
color: #fff; }
.secondary:hover.white {
background: #fff;
color: #159fdb;
opacity: .8; }
.intro {
width: 100%;
height: 100vh;
position: relative;
display: block; }
.intro .video-overlay {
position: absolute;
z-index: 30;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/backgrounds/index-slider.jpg) no-repeat;
background-position: center;
background-size: cover;
opacity: .25;
overflow: hidden; }
.intro video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 25; }
.intro .content-wrapper {
width: 100%;
height: 100%; }
.intro .content-wrapper .content {
width: 100%;
height: calc(100% - 150px);
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 0 40px 40px 40px; }
.intro .content-wrapper .content #intro-swiper {
width: calc(100% - 550px); }
.intro .content-wrapper .content #intro-swiper .swiper-slide {
color: #fff;
font-size: 24px;
line-height: 1; }
.intro .content-wrapper .content #intro-swiper .swiper-slide * {
color: #fff;
font-size: 24px;
line-height: 1; }
.intro .content-wrapper .content #intro-swiper .swiper-slide.slide-1 p {
width: 100%;
text-align: center;
font-size: 48px;
font-weight: 100;
line-height: 1;
letter-spacing: 1px; }
@media (max-width: 1280px) {
.intro .content-wrapper .content #intro-swiper .swiper-slide.slide-1 p {
font-size: 35px; } }
@media (max-width: 900px) {
.intro .content-wrapper .content #intro-swiper .swiper-slide.slide-1 p {
font-size: 25px; } }
.intro .content-wrapper .content #intro-swiper .swiper-pagination {
width: 100%;
height: 75px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start; }
.intro .content-wrapper .content #intro-swiper .swiper-pagination .swiper-pagination-bullet {
width: 15px;
height: 15px;
border-radius: 0;
opacity: 1;
background: rgba(250, 168, 25, 0.9);
margin: 0 0 0 10px; }
.intro .content-wrapper .content #intro-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #159fdb; }
@media (max-width: 800px) {
.intro .content-wrapper .content #intro-swiper {
display: none; } }
.intro .content-wrapper .content > .actions {
width: auto;
margin-left: auto;
position: relative; }
.intro .content-wrapper .content > .actions .action-banner-slider {
width: 100%;
height: 320px;
background: rgba(250, 168, 25, 0.9);
position: absolute;
bottom: 100px;
z-index: 25; }
.intro .content-wrapper .content > .actions .action-banner-slider .swiper-button-prev,
.intro .content-wrapper .content > .actions .action-banner-slider .swiper-button-next {
width: 26px;
height: 26px;
background: rgba(250, 168, 25, 0.9);
margin-top: -13px;
z-index: 10;
cursor: pointer;
background-size: 26px 26px;
border-radius: 26px; }
.intro .content-wrapper .content > .actions .action-banner-slider .swiper-button-prev::before,
.intro .content-wrapper .content > .actions .action-banner-slider .swiper-button-next::before {
content: "";
display: block;
width: 14px;
height: 14px;
left: 4px;
top: 5px;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") no-repeat;
position: absolute;
background-size: contain;
background-position: center; }
.intro .content-wrapper .content > .actions .action-banner-slider .swiper-button-next::before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") no-repeat;
left: 9px; }
.intro .content-wrapper .content > .actions .action-banner-slider .swiper-container {
width: 100%;
height: 100%; }
.intro .content-wrapper .content > .actions .action-banner-slider .banner-body {
width: 100%;
height: 100%;
display: block; }
.intro .content-wrapper .content > .actions .action-banner-slider .banner-body img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center; }
.intro .content-wrapper .content > .actions .request-form {
width: 100%;
margin: 0 0 20px 0;
padding: 10px;
background: #faa819;
opacity: 0;
visibility: hidden;
position: relative;
z-index: 50; }
.intro .content-wrapper .content > .actions .request-form > .message {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #159fdb;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
border: 1px solid #fff;
visibility: hidden;
opacity: 0; }
.intro .content-wrapper .content > .actions .request-form > .message p {
text-align: center;
padding: 0 40px; }
.intro .content-wrapper .content > .actions .request-form .field {
width: 100%; }
.intro .content-wrapper .content > .actions .request-form .field input,
.intro .content-wrapper .content > .actions .request-form .field textarea {
width: 100%;
height: 32px;
border: none;
color: #159fdb;
padding: 0 10px; }
.intro .content-wrapper .content > .actions .request-form .field textarea {
height: 200px;
padding: 10px; }
.intro .content-wrapper .content > .actions .request-form .field:not(:first-child) {
margin: 10px 0 0 0; }
.intro .content-wrapper .content > .actions .request-form .gdpr {
width: 100%;
position: relative;
margin: 10px 0 15px 0; }
.intro .content-wrapper .content > .actions .request-form .gdpr .tooltip {
position: absolute;
bottom: 40px;
background: #0a0d0f;
width: calc(100% - 10px);
left: 5px;
padding: 10px 20px;
visibility: hidden;
opacity: 0;
transition: All 0.3s ease-in-out; }
.intro .content-wrapper .content > .actions .request-form .gdpr .tooltip p {
color: #fff;
margin: 0 0 2px 0; }
.intro .content-wrapper .content > .actions .request-form .gdpr .accept-gdpr input {
width: 20px;
height: 20px;
background: #fff;
position: relative;
top: 5px;
margin: 0 10px 0 0; }
.intro .content-wrapper .content > .actions .request-form .gdpr .accept-gdpr label {
color: #fff; }
.intro .content-wrapper .content > .actions .request-form .gdpr .accept-gdpr label p,
.intro .content-wrapper .content > .actions .request-form .gdpr .accept-gdpr label a {
color: #fff; }
.intro .content-wrapper .content > .actions .request-form .gdpr .accept-gdpr label a {
text-decoration: none;
font-weight: 700; }
.intro .content-wrapper .content > .actions .request-form .gdpr .accept-gdpr label a:hover {
text-decoration: underline; }
.intro .content-wrapper .content > .actions .request-form .gdpr:hover .tooltip {
visibility: visible;
opacity: 1; }
.intro .content-wrapper .content > .actions .request-form .actions {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5px 0 0 0; }
.intro .content-wrapper .content > .actions .request-form .actions button {
height: 37.5px;
width: 245px;
min-width: 245px; }
.intro .content-wrapper .content > .actions .request-form._show {
opacity: 1;
visibility: visible; }
.intro .content-wrapper .content > .actions .buttons {
display: flex;
align-items: center;
justify-content: space-between; }
.intro .content-wrapper .content > .actions .buttons a {
width: 250px; }
.intro .content-wrapper .content > .actions .buttons a:first-child {
margin: 0 20px 0 0; }
@media (max-width: 800px) {
.intro .content-wrapper .content > .actions {
width: 100%; } }
.intro .content-wrapper .categories {
width: 100%;
height: 150px;
background: rgba(0, 0, 0, 0.5);
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-around; }
.intro .content-wrapper .categories a {
display: flex;
width: auto;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
color: rgba(250, 168, 25, 0.9);
font-size: 16px;
font-weight: 700;
text-decoration: none;
border: 1px solid rgba(250, 168, 25, 0.9);
border-top: none;
border-bottom: none;
padding: 0 25px; }
.intro .content-wrapper .categories a:hover {
color: rgba(219, 141, 5, 0.9); }
@media (max-width: 900px) {
.intro .content-wrapper .categories {
overflow-x: scroll; }
.intro .content-wrapper .categories a {
min-width: 250px; } }
.intro::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 50;
background: url(../images/backgrounds/header-waves.png) repeat-x;
background-position: left;
background-size: cover;
opacity: .5; }
.intro.no_before::before {
display :none;
}
.intro::after {
content: "";
display: block;
width: 100%;
height: 27px;
background: url(../images/backgrounds/index-video-after.png) repeat-x; }
.intro.special {
height: auto; }
.intro.special::before {
display: none; }
.index-full-banner {
display: block;
width: 100%;
height: auto;
position: relative; }
.index-full-banner > div {
width: 100%;
height: 100%; }
.index-full-banner > div .swiper-container {
width: 100%;
height: 100%; }
.index-full-banner > div .swiper-container .swiper-slide {
width: 100%;
height: 100%; }
.index-full-banner > div .swiper-container .swiper-slide a {
display: block;
width: 100%;
height: 100%; }
.index-full-banner > div .swiper-container .swiper-slide a img {
display: block;
width: 100%;
height: 100%;
object-position: center;
object-fit: cover; }
.index-full-banner .controls {
right: 0;
bottom: 0;
position: absolute;
background: #159fdb;
z-index: 150;
min-width: 130px;
margin: 0 20px 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 10px;
overflow: hidden; }
.index-full-banner .controls .swiper-button-prev,
.index-full-banner .controls .swiper-button-next {
position: relative;
top: 0;
margin-top: 0; }
.index-full-banner .controls .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }
.index-full-banner .controls .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }
.index-full-banner .controls .loader {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background: #117dac; }
.index-full-banner .controls .loader._animate {
height: 100%; }
/** PRODUCT RANGE **/
.product-range {
width: 100%;
padding: 0 40px; }
.product-range .list {
display: flex;
align-items: flex-start;
justify-content: space-around;
flex-wrap: wrap; }
.product-range .list a {
width: calc(100% / 4);
margin: 0 0 40px 0;
text-decoration: none; }
.product-range .list a:nth-child(1), .product-range .list a:nth-child(2), .product-range .list a:nth-child(3) {
width: calc(100% / 3); }
.product-range .list a img {
height: 250px;
object-fit: contain;
width: 100%;
display: block;
margin: 0 auto;
transform: scale(1);
transition: All 0.3s ease-in-out; }
@media (max-width: 800px) {
.product-range .list a img {
height: 200px; } }
.product-range .list a > div.prc {
margin: 40px 0 35px; }
.product-range .list a > div:not(.prc) {
max-width: 400px;
margin: 0 auto;
padding: 15px; }
.product-range .list a > div:not(.prc) h3 {
color: #fff;
font-size: 25px;
margin: 0 0 18px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
line-height: 1; }
.product-range .list a > div:not(.prc) p {
color: #fff;
font-size: 18px;
line-height: 21px;
max-height: 84px;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400; }
.product-range .list a:hover img {
transform: scale(1.1); }
/** CALCULATOR **/
.calculator {
width: 100%;
display: block; }
.calculator a {
display: block;
width: 40%;
margin: 0 auto; }
.calculator a img {
display: block;
width: 100%; }
@media (max-width: 450px) {
.calculator a img {
width: 50%;
margin: 0 auto; } }
.calculator a button {
border: none;
background: url(../images/backgrounds/button-background.jpg) no-repeat;
background-position: center;
background-size: cover;
margin: 30px 0 0;
padding: 20px;
cursor: pointer; }
.calculator a button span {
color: #faa819;
display: block;
text-transform: uppercase;
font-size: 22px;
font-weight: 700;
letter-spacing: 6px;
padding-left: 3px; }
.calculator a button span::after {
content: "";
display: block;
width: 100%;
height: 1px;
background: #8f433b;
border-bottom: 1px solid #62373d;
margin: 3px 0 0; }
.calculator a button p {
color: #fff;
font-size: 15px;
margin: 5px 0 0; }
html:lang(de) .calculator a button {
margin: 30px 0 0 -130px !important; }
/** TECHNOLOGICAL ADVANTAGE **/
.technological-advantage {
width: 100%; }
.technological-advantage .list {
padding: 0 40px;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px; }
.technological-advantage .list > div {
max-width: 300px;
margin: 0 auto; }
.technological-advantage .list > div .svg-percent-animation {
position: relative;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto; }
.technological-advantage .list > div .svg-percent-animation .pc {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
width: 260px;
height: 260px;
color: rgba(250, 168, 25, 0.9);
font-size: 50px;
font-weight: 700;
border: 1px solid transparent;
border-radius: 130px; }
.technological-advantage .list > div .svg-percent-animation .pc div {
width: 100%;
display: block;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center; }
.technological-advantage .list > div .svg-percent-animation .pc div span {
font-size: 25px;
top: -7px;
font-weight: 900;
left: 5px; }
.technological-advantage .list > div .svg-percent-animation .pc div .title {
font-size: 25px;
margin: 10px 0 0;
text-transform: uppercase;
font-weight: 300; }
.technological-advantage .list > div .svg-percent-animation .pc svg {
width: 170px;
left: initial;
top: 8px;
padding: 40px; }
.technological-advantage .list > div .svg-percent-animation .pc svg path,
.technological-advantage .list > div .svg-percent-animation .pc svg polyline,
.technological-advantage .list > div .svg-percent-animation .pc svg polygon {
fill: rgba(250, 168, 25, 0.9); }
.technological-advantage .list > div .svg-percent-animation .pc svg path.palette-1, .technological-advantage .list > div .svg-percent-animation .pc svg path.palette-2, .technological-advantage .list > div .svg-percent-animation .pc svg path.palette-3, .technological-advantage .list > div .svg-percent-animation .pc svg path.palette-4,
.technological-advantage .list > div .svg-percent-animation .pc svg polyline.palette-1,
.technological-advantage .list > div .svg-percent-animation .pc svg polyline.palette-2,
.technological-advantage .list > div .svg-percent-animation .pc svg polyline.palette-3,
.technological-advantage .list > div .svg-percent-animation .pc svg polyline.palette-4,
.technological-advantage .list > div .svg-percent-animation .pc svg polygon.palette-1,
.technological-advantage .list > div .svg-percent-animation .pc svg polygon.palette-2,
.technological-advantage .list > div .svg-percent-animation .pc svg polygon.palette-3,
.technological-advantage .list > div .svg-percent-animation .pc svg polygon.palette-4 {
fill: #2f3538; }
.technological-advantage .list > div .svg-percent-animation .pc svg.bulb {
width: 190px; }
.technological-advantage .list > div .svg-percent-animation .pc svg.palette {
width: 240px; }
.technological-advantage .list > div .svg-percent-animation .pc svg.range {
width: 200px;
padding: 20px; }
@media (max-width: 450px) {
.technological-advantage .list > div .svg-percent-animation {
transform: scale(0.7);
margin: 0 auto -60px auto; } }
.technological-advantage .list > div > div:last-child {
margin: 50px 0 0;
text-align: center; }
.technological-advantage .list > div > div:last-child .title {
color: rgba(250, 168, 25, 0.9);
font-size: 27px;
font-weight: 700;
margin: 0 0 20px; }
.technological-advantage .list > div > div:last-child p {
font-size: 18px;
color: #fff;
line-height: 22px; }
/** SLOGAN **/
.slogan {
width: 100%;
margin: 150px 0 150px; }
.slogan h2 {
color: rgba(250, 168, 25, 0.9);
font-size: 30px;
font-weight: 700;
line-height: 40px;
margin: 0 0 25px;
text-transform: none;
letter-spacing: 0; }
.slogan .name,
.slogan .pos {
width: 100%;
display: block;
text-align: center;
color: #fff;
font-weight: 300;
font-size: 22px; }
.slogan .pos {
text-transform: uppercase; }
/** DOWNLOADS **/
.download-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px; }
.download-list a {
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
border: 1px solid #e59d1c;
background: transparent;
text-transform: uppercase;
font-size: 22px;
text-align: center;
padding: 20px; }
.download-list a small {
display: block;
text-align: center;
font-size: 16px;
margin: 5px 0 0 0; }
.download-list a:hover {
background: #eab14a; }
.download-list a.file {
border-color: #159fdb; }
.download-list a.file:hover {
background: #37b5ec; }
.download-list.file-entry {
grid-template-columns: 1fr; }
.download-list.file-entry .download-file--container {
max-width: 700px;
margin: 0 auto; }
.download-list.file-entry .download-file--container img {
width: 100%;
display: block;
margin: 0 0 25px 0; }
.download-list.file-entry .download-file--container a {
flex-direction: column; }
.download-list.file-entry .download-file--container span {
display: block;
width: 100%;
text-align: center; }
.download-list.file-entry .download-file--container small {
display: block;
width: 100%;
text-align: center; }
/** AWARDS **/
.awards {
width: 100%;
padding: 0 40px; }
.awards .list {
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px;
max-width: 1280px;
margin: 0 auto; }
.awards .list a {
width: 180px;
text-decoration: none;
margin: 0 auto;
display: block; }
.awards .list a img {
margin: 0 auto;
width: 100%;
display: block;
height: 230px;
object-fit: contain;
object-position: bottom; }
.awards .list a .title {
margin: 20px 0 5px;
color: #fff;
text-align: center;
font-weight: 400;
font-size: 22px;
line-height: 1; }
.awards .list a .description {
color: #fff;
text-align: center;
font-weight: 400;
font-size: 22px; }
.awards .list a .description * {
margin: 0;
padding: 0; }
.awards .list a .description strong {
font-weight: 700; }
@media (max-width: 600px) {
.awards .list {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.awards .list a {
margin: 0 auto; } }
/** MEDIA **/
@media (max-width: 1460px) {
.product-range .list a {
width: calc(100% / 3); } }
@media (max-width: 1440px) {
.intro .content-wrapper .content {
padding: 0 20px 20px 20px; }
.intro .content-wrapper .content #intro-swiper .swiper-slide.slide-1 p {
font-size: 38px; }
.product-range .list a img {
height: 220px; }
.awards .list {
grid-row-gap: 80px; }
.awards .list a img {
height: 150px; }
footer .inner .footer-info .newsletter-and-socials {
padding: 0 0 0 20px; } }
@media (max-width: 1280px) {
.intro .content-wrapper .content #intro-swiper {
width: calc(100% - 360px); }
.intro .content-wrapper .content > .actions .request-form .actions button {
width: 155px;
min-width: 155px; }
.intro .content-wrapper .content > .actions .buttons a {
width: 160px;
min-width: 160px; } }
@media (max-width: 1100px) {
.product-range .list a {
width: calc(100% / 3.5); }
.product-range .list a > div:not(.prc) h3 {
overflow: visible;
white-space: pre-wrap; } }
@media (max-width: 1024px) {
.product-range {
padding: 0 20px; }
.product-range h2 {
margin: 100px 0 50px 0; }
.calculator a {
width: calc(100% - 20px); }
.download-list {
grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
.product-range .list a {
width: calc(100% / 2) !important; }
.product-range .list a > div:not(.prc) h3,
.product-range .list a > div:not(.prc) p {
text-align: center; } }
@media (max-width: 768px) {
footer .inner .footer-info .newsletter-and-socials {
padding: 0; } }
@media (max-width: 550px) {
.product-range .list a {
width: 100% !important; } }
@media (max-width: 450px) {
.intro .content-wrapper .content > .actions .action-banner-slider {
height: 250px;
bottom: 70px; }
.intro .content-wrapper .content > .actions .buttons a {
height: 45px; }
.intro .content-wrapper .content > .actions .request-form .gdpr {
margin: 1px 0 8px 0; }
.intro .content-wrapper .content > .actions .request-form .field textarea {
height: 90px; }
.intro .content-wrapper .categories {
padding: 10px 20px; }
.intro .content-wrapper .categories a {
padding: 0 50px; }
footer .inner .footer-info .newsletter-and-socials {
padding: 0;
margin: 20px 0 0 0; } }
@media (max-width: 600px) {
.download-list {
grid-template-columns: 1fr; } }
/** MEDIA HEIGHT */
@media (max-height: 820px) {
.intro .content-wrapper .content > .actions .request-form {
max-height: 50vh;
overflow: scroll; } }
@media (max-height: 670px) {
.intro .content-wrapper .content > .actions .request-form {
max-height: 45vh; } }
.header-decoration {
width: 100%;
height: 118px;
background: url(../images/backgrounds/global-header.png) center no-repeat;
background-size: cover;
margin: 0 0 80px; }
@media (max-width: 768px) {
.header-decoration {
margin: 0; } }
.header-video {
width: 100%;
height: 100vh;
position: relative;
display: block;
margin: 0 0 100px 0; }
.header-video .video-overlay {
position: relative;
z-index: 30;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/backgrounds/index-slider.jpg) no-repeat;
background-position: center;
background-size: cover;
opacity: .25;
overflow: hidden; }
.header-video .video-overlay video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 25; }
.header-video::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 50;
background: url(../images/backgrounds/header-waves.png) repeat-x;
background-position: left;
background-size: cover;
opacity: .5; }
.header-video::after {
content: "";
display: block;
width: 100%;
height: 27px;
background: url(../images/backgrounds/index-video-after.png) repeat-x; }
@media (max-width: 768px) {
.header-video {
height: 50vh; } }
.inline-navigation {
display: block;
width: 100%;
max-width: 1280px;
margin: 0 auto 100px auto; }
.inline-navigation .inner {
display: block;
width: 100%; }
.inline-navigation .inner .list {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around; }
.inline-navigation .inner .list a,
.inline-navigation .inner .list div {
color: #159fdb;
font-size: 16px;
text-decoration: none; }
.inline-navigation .inner .list a::after,
.inline-navigation .inner .list div::after {
content: "";
display: block;
width: 100%;
height: 1px;
background: transparent;
margin: 6px 0 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-align: center;
transform: translateY(10px);
opacity: 0;
visibility: hidden; }
.inline-navigation .inner .list a._active, .inline-navigation .inner .list a:hover,
.inline-navigation .inner .list div._active,
.inline-navigation .inner .list div:hover {
color: #fff; }
.inline-navigation .inner .list a._active::after, .inline-navigation .inner .list a:hover::after,
.inline-navigation .inner .list div._active::after,
.inline-navigation .inner .list div:hover::after {
opacity: 1;
visibility: visible;
background: #fff;
transform: translateY(0); }
.inline-navigation .inner .list a._active:hover,
.inline-navigation .inner .list div._active:hover {
cursor: default; }
@media (max-width: 1280px) {
.inline-navigation .inner .list a,
.inline-navigation .inner .list div {
padding: 10px 20px; } }
@media (max-width: 450px) {
.inline-navigation .inner .list a,
.inline-navigation .inner .list div {
width: calc(100% / 2); } }
@media (max-width: 1280px) {
.inline-navigation .inner .list {
flex-wrap: wrap; } }
@media (max-width: 1280px) {
.inline-navigation {
padding: 0 40px; } }
@media (max-width: 768px) {
.inline-navigation {
padding: 0 20px; } }
.inline-content {
width: 100%;
max-width: 1280px;
margin: 0 auto 100px auto; }
.inline-content.group {
max-width: calc(100% - 40px); }
.inline-content .inner h2 {
padding: 0; }
.inline-content .inner h2::after {
content: "";
display: block;
width: 100%;
height: 1px;
background: rgba(250, 168, 25, 0.9);
margin: 15px 0 0 0; }
.inline-content .content {
/** LIST **/
/** TEXT **/
/** VIDEOS + NEWS + EVENTS **/
/** BLOG **/
/** MILESTONES **/
/** AWARDS **/
/** CONTACT **/ }
.inline-content .content .notice,
.inline-content .content .filter {
display: block;
width: 100%;
height: auto;
background: #e59d1c;
padding: 10px 0;
text-align: center;
margin: 0 0 50px 0;
text-decoration: none;
color: #fff;
font-size: 20px; }
.inline-content .content .notice strong {
text-decoration: underline; }
.inline-content .content .filter {
margin: -95px 0 50px 0; }
.inline-content .content .filter .list {
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
position: relative; }
.inline-content .content .filter .list a {
color: #fff;
text-transform: uppercase;
text-decoration: none; }
.inline-content .content .filter .list a span {
color: #fff;
position: relative;
display: inline-block; }
.inline-content .content .filter .list a span::after {
content: "";
display: inline-block;
width: 100%;
background: transparent;
height: 1px;
position: absolute;
bottom: 0;
left: 0; }
.inline-content .content .filter .list a::after {
content: '';
display: inline-block;
margin: 0 15px;
top: -2px;
position: relative; }
.inline-content .content .filter .list a:last-child::after {
display: none; }
.inline-content .content .filter .list a:hover span, .inline-content .content .filter .list a._active span {
opacity: .8; }
.inline-content .content .filter .list a._active span::after {
background: #fff; }
.inline-content .content .filter .list.sub {
padding: 0; }
.inline-content .content .filter .list.sub .sub-list {
position: relative;
padding: 15px 20px;
left: 0;
bottom: 0;
width: 100%;
background: #159fdb;
display: none; }
.inline-content .content .filter .list.sub .sub-list .inner {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap; }
.inline-content .content .filter .list.sub .sub-list span {
font-weight: 700;
position: relative; }
.inline-content .content .filter .list.sub .sub-list span::after {
content: "";
display: inline-block;
width: 100%;
background: transparent;
height: 1px;
position: absolute;
bottom: 0;
left: 0; }
.inline-content .content .filter .list.sub .sub-list a:hover span {
opacity: .8; }
.inline-content .content .filter .list.sub .sub-list a._active span::after {
background: #fff; }
.inline-content .content .filter .list.sub .sub-list._show {
display: block; }
.inline-content .content .video-body {
width: 100%; }
.inline-content .content .video-body > iframe {
display: block;
margin: 0 auto; }
@media (max-width: 768px) {
.inline-content .content .video-body > iframe {
width: 100%;
height: 50vh; } }
@media (max-width: 400px) {
.inline-content .content .video-body > iframe {
height: 25vh; } }
.inline-content .content .video-body .text-intro {
font-size: 30px;
color: rgba(250, 168, 25, 0.9);
margin: 100px 0 50px 0;
font-weight: 500;
display: block;
width: 100%;
text-align: left; }
.inline-content .content .list.videos, .inline-content .content .list.news {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px; }
.inline-content .content ul {
list-style-position: outside;
list-style-type: square; }
.inline-content .content ul li {
color: #fff;
line-height: 2;
text-align: left; }
.inline-content .content .text-content {
width: 100%;
margin: 20px 0;
font-size: 18px;
line-height: 22px;
color: #fff; }
.inline-content .content .text-content p {
width: 100%;
margin: 20px 0;
font-size: 18px;
line-height: 22px; }
.inline-content .content .text-content h3 {
color: rgba(250, 168, 25, 0.9); }
.inline-content .content .text-content a {
font-weight: 700;
color: rgba(250, 168, 25, 0.9); }
.inline-content .content .text-content table {
width: 100%; }
.inline-content .content .text-content.location table {
width: 100%; }
.inline-content .content .text-content.location table tbody tr {
line-height: 30px; }
.inline-content .content .text-content.location table tbody tr:first-child {
height: 100px;
vertical-align: baseline; }
.inline-content .content .video-block,
.inline-content .content .news-block {
text-decoration: none; }
.inline-content .content .video-block .title,
.inline-content .content .news-block .title {
left: 0;
width: 100%;
color: rgba(250, 168, 25, 0.9);
font-size: 20px;
text-overflow: ellipsis;
white-space: normal;
letter-spacing: 1px;
text-align: center;
line-height: 1.2; }
.inline-content .content .video-block img,
.inline-content .content .news-block img {
display: block;
width: 100%;
height: 250px;
margin: 0 0 20px 0;
background: rgba(21, 159, 219, 0.2);
object-fit: cover;
object-position: center; }
.inline-content .content .video-block:hover .title {
color: rgba(219, 141, 5, 0.9); }
.inline-content .content .blog-block {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 50px;
text-decoration: none;
line-height: 1; }
.inline-content .content .blog-block img {
width: 280px;
height: 175px;
object-fit: cover; }
.inline-content .content .blog-block .info {
width: calc(100% - 280px);
padding: 0 0 0 50px; }
.inline-content .content .blog-block .info .title {
font-size: 28px;
font-weight: 700;
color: rgba(250, 168, 25, 0.9); }
.inline-content .content .blog-block .info .category {
font-size: 20px;
color: rgba(250, 168, 25, 0.9);
font-weight: 100;
margin: 2px 0 5px; }
.inline-content .content .blog-block .info .short-description {
margin: 10px 0;
font-size: 16px;
line-height: 18px;
color: #fff; }
.inline-content .content .blog-block .info .short-description p {
margin: 10px 0;
font-size: 16px;
line-height: 18px; }
.inline-content .content .blog-block .info .read-more {
color: #fff;
font-size: 16px;
font-weight: 100;
display: flex;
margin: 20px 0 0;
height: 30px;
align-items: center;
justify-content: flex-start; }
.inline-content .content .blog-block .info .read-more span {
background: rgba(250, 168, 25, 0.9);
display: flex;
height: 100%;
align-items: center;
justify-content: center;
padding: 5px 10px; }
.inline-content .content .blog-block:hover .read-more span {
background: #159fdb;
color: #fff; }
@media (max-width: 768px) {
.inline-content .content .blog-block {
flex-wrap: wrap; }
.inline-content .content .blog-block img {
width: 100%;
height: 300px; }
.inline-content .content .blog-block .info {
width: 100%;
padding: 20px 0 0 0; } }
.inline-content .content .blog-entry .entry-header {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: row;
margin: 0 0 20px; }
.inline-content .content .blog-entry .entry-header > div {
width: 50%; }
.inline-content .content .blog-entry .entry-header > div h1 {
color: rgba(250, 168, 25, 0.9);
font-size: 24px;
font-weight: 700;
margin: 0; }
.inline-content .content .blog-entry .entry-header > div h2 {
color: rgba(250, 168, 25, 0.9);
font-size: 20px;
font-weight: 400;
margin: 0;
line-height: 25px;
text-align: left;
letter-spacing: 1px;
text-transform: lowercase; }
.inline-content .content .blog-entry .entry-header > div h2::after {
display: none; }
.inline-content .content .blog-entry .entry-header > div .by,
.inline-content .content .blog-entry .entry-header > div .date {
color: rgba(250, 168, 25, 0.9);
font-size: 20px;
font-weight: 400;
margin: 0;
line-height: 25px; }
.inline-content .content .blog-entry .entry-header > div .by::before,
.inline-content .content .blog-entry .entry-header > div .date::before {
content: attr(title);
display: inline-block;
margin: 0 20px 0 0;
font-weight: 700; }
.inline-content .content .blog-entry .entry-header > div:first-child {
padding: 0 25px 0 0;
border-right: 1px solid rgba(250, 168, 25, 0.9); }
.inline-content .content .blog-entry .entry-header > div:last-child {
padding: 0 0 0 25px; }
@media (max-width: 768px) {
.inline-content .content .blog-entry .entry-header {
flex-wrap: wrap; }
.inline-content .content .blog-entry .entry-header > div {
width: 100%;
padding: 0 !important;
margin: 0 0 10px 0;
border: none !important; } }
.inline-content .content .blog-entry .blog-content {
width: 100%;
height: auto;
display: block; }
.inline-content .content .blog-entry .blog-content img {
display: block;
width: 100%;
height: auto; }
.inline-content .content .blog-entry > a {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
text-decoration: none;
margin: 100px 0 0 0; }
.inline-content .content .blog-entry > a span {
background: rgba(250, 168, 25, 0.9);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 100%;
min-width: 150px; }
.inline-content .content .blog-entry > a:hover span {
background: #159fdb; }
.inline-content .content .list.milestones {
max-width: 1280px;
width: 100%;
margin: 0 auto;
padding: 100px 0;
position: relative; }
.inline-content .content .list.milestones .timeline {
width: 1px;
height: 100%;
background: #faa819;
position: absolute;
left: 50%;
top: 0; }
@media (max-width: 768px) {
.inline-content .content .list.milestones .timeline {
display: none; } }
.inline-content .content .list.milestones .milestone-block {
width: 100%;
margin: 0 0 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.inline-content .content .list.milestones .milestone-block > div {
width: 50%; }
.inline-content .content .list.milestones .milestone-block > div .header {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: left;
position: relative; }
.inline-content .content .list.milestones .milestone-block > div .header .title {
width: 100px;
color: #faa819;
border-bottom: 1px solid #faa819;
font-size: 22px;
font-weight: 700;
padding: 0 0 10px; }
.inline-content .content .list.milestones .milestone-block > div .header::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #faa819;
background: #262c39;
right: -10px;
bottom: -10px;
border-radius: 50%; }
.inline-content .content .list.milestones .milestone-block > div .description {
padding: 10px 50px 10px 0; }
.inline-content .content .list.milestones .milestone-block > div .description * {
color: #fff;
text-align: right;
font-size: 18px;
line-height: 20px; }
@media (max-width: 768px) {
.inline-content .content .list.milestones .milestone-block > div {
width: 100%; }
.inline-content .content .list.milestones .milestone-block > div .header .title {
width: 100%; } }
.inline-content .content .list.milestones .milestone-block:nth-child(2n) > div {
margin-left: auto; }
.inline-content .content .list.milestones .milestone-block:nth-child(2n) > div .header {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: right; }
.inline-content .content .list.milestones .milestone-block:nth-child(2n) > div .header::after {
right: inherit;
left: -10px;
bottom: -10px; }
.inline-content .content .list.milestones .milestone-block:nth-child(2n) > div .description {
padding: 10px 0 10px 50px; }
.inline-content .content .list.milestones .milestone-block:nth-child(2n) > div .description * {
text-align: left; }
.inline-content .content .award-block {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: 0 0 130px 0; }
.inline-content .content .award-block:nth-child(2n) {
flex-direction: row-reverse; }
.inline-content .content .award-block > div {
width: 50%; }
.inline-content .content .award-block img {
height: 200px;
display: block;
width: 100%;
object-fit: contain; }
.inline-content .content .award-block .description h3 {
color: rgba(250, 168, 25, 0.9);
text-transform: uppercase;
font-size: 17px;
margin: 0 0 17px;
display: block; }
.inline-content .content .award-block .description *:not(h3) {
font-weight: 300;
font-size: 18px;
line-height: 24px;
color: #fff; }
.inline-content .content .award-block .description a {
background: rgba(250, 168, 25, 0.9);
color: #fff;
padding: 5px 30px;
text-decoration: none;
position: relative;
display: inline-block;
margin: 15px 0 10px 0; }
.inline-content .content .award-block .description a:hover {
background: #159fdb; }
.inline-content .content .award-block .description a::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url(../images/svg/new-window.svg) no-repeat;
background-position: center;
background-size: contain;
position: relative;
top: 2px;
margin: 0 0 0 10px; }
@media (max-width: 768px) {
.inline-content .content .award-block {
flex-wrap: wrap; }
.inline-content .content .award-block > div {
width: 100%; }
.inline-content .content .award-block .media {
margin: 0 0 50px 0; } }
.inline-content .content.contact-block {
width: 100%; }
.inline-content .content.contact-block address {
font-style: normal;
font-size: 20px;
color: #fff;
margin: 0 0 20px 0; }
.inline-content .content.contact-block address p {
margin: 0 auto; }
.inline-content .content.contact-block a {
font-size: 20px;
display: block;
color: #fff;
text-decoration: none; }
.inline-content .content.contact-block a:hover {
color: rgba(250, 168, 25, 0.9); }
.inline-content .content.contact-block form {
width: 100%;
display: block;
margin: 50px 0 0 0; }
.inline-content .content.contact-block form input,
.inline-content .content.contact-block form textarea {
display: block;
width: 100%;
border: 1px solid #fff;
margin: 0 0 25px 0;
height: 32px;
background: transparent;
color: #fff;
padding: 10px; }
.inline-content .content.contact-block form input::placeholder,
.inline-content .content.contact-block form textarea::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1;
/* Firefox */ }
.inline-content .content.contact-block form input:-ms-input-placeholder,
.inline-content .content.contact-block form textarea:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #fff; }
.inline-content .content.contact-block form input::-ms-input-placeholder,
.inline-content .content.contact-block form textarea::-ms-input-placeholder {
/* Microsoft Edge */
color: #fff; }
.inline-content .content.contact-block form textarea {
min-height: 250px; }
.inline-content .content.contact-block form .gdpr {
width: 100%;
position: relative;
margin: 10px 0 15px 0; }
.inline-content .content.contact-block form .gdpr .tooltip {
position: absolute;
bottom: 40px;
background: #0a0d0f;
width: calc(100% - 10px);
left: 5px;
padding: 10px 20px;
visibility: hidden;
opacity: 0;
transition: All 0.3s ease-in-out; }
.inline-content .content.contact-block form .gdpr .tooltip p {
color: #fff;
margin: 0 0 2px 0; }
.inline-content .content.contact-block form .gdpr .accept-gdpr input {
width: 20px;
height: 20px;
background: #fff;
position: relative;
top: 5px;
margin: 0 10px 0 0;
display: inline-block; }
.inline-content .content.contact-block form .gdpr .accept-gdpr label {
color: #fff; }
.inline-content .content.contact-block form .gdpr .accept-gdpr label p,
.inline-content .content.contact-block form .gdpr .accept-gdpr label a {
color: #fff; }
.inline-content .content.contact-block form .gdpr .accept-gdpr label a {
text-decoration: none;
font-weight: 700;
display: inline-block;
font-size: 18px; }
.inline-content .content.contact-block form .gdpr .accept-gdpr label a:hover {
text-decoration: underline; }
.inline-content .content.contact-block form .gdpr:hover .tooltip {
visibility: visible;
opacity: 1; }
.inline-content .content.contact-block form .footer {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end; }
@media (max-width: 450px) {
.inline-content .content.contact-block form .footer button {
width: 100%; } }
.inline-content .content.gdpr h3 {
text-align: left;
font-size: 24px;
margin: 25px 0 15px 0;
color: #fff; }
.inline-content .content.gdpr h4 {
text-align: left;
font-size: 16px;
margin: 25px 0 15px 0;
color: #fff;
font-weight: 700; }
.inline-content .content.gdpr p {
width: 100%;
color: #fff;
margin: 0 auto;
font-size: 18px;
line-height: 24px !important;
text-align: justify; }
@media (max-width: 450px) {
.inline-content .content.gdpr p {
font-size: 16px; } }
.inline-content .content.gdpr a {
text-decoration: none;
color: rgba(250, 168, 25, 0.9); }
.inline-content .content.gdpr a:hover {
color: rgba(219, 141, 5, 0.9); }
.inline-content .content.how-choose .list {
display: flex;
align-items: center;
justify-content: flex-start; }
.inline-content .content.how-choose .list a {
background: rgba(250, 168, 25, 0.9);
color: #fff;
padding: 5px 30px;
text-decoration: none;
position: relative;
display: inline-block;
margin: 15px 10px 10px 0; }
.inline-content .content.how-choose .list a span {
font-weight: 300;
font-size: 18px;
line-height: 24px;
color: #fff; }
.inline-content .content.how-choose .list a::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url(../images/svg/new-window.svg) no-repeat;
background-position: center;
background-size: contain;
position: relative;
top: 2px;
margin: 0 0 0 10px; }
.inline-content .content.how-choose .list a:hover {
background: #159fdb; }
.inline-content .content.how-choose .banner-footer-image {
display: block;
width: 100%;
margin: 50px 0 0 0;
background: #fff; }
.inline-content .content.how-choose .banner-footer-image img {
width: 100%;
display: block; }
.inline-content .content .file-downloader {
width: 100%;
max-width: 450px;
display: flex;
margin: 0 auto;
height: 65px;
background: rgba(250, 168, 25, 0.9);
color: #Fff;
text-transform: uppercase;
font-weight: 300;
align-items: center;
justify-content: center;
text-decoration: none;
line-height: 1; }
.inline-content .content .file-downloader span {
display: block;
width: 100%;
text-align: center;
font-size: 14px; }
.inline-content .content .file-downloader span:first-child {
font-weight: 700;
font-size: 20px; }
.inline-content .content .file-downloader:hover {
background: rgba(219, 141, 5, 0.9); }
.inline-content .content .file-downloader-empty {
width: 100%;
text-align: center;
display: block;
font-size: 20px;
color: #fff;
text-transform: uppercase; }
.inline-content .content .file-downloader-description {
color: #fff;
font-size: 16px;
margin: 0 0 125px 0; }
.inline-content .case-studies-files {
width: 100%; }
.inline-content .case-studies-files .filter {
width: 100%; }
.inline-content .case-studies-files .filter .list {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start; }
.inline-content .case-studies-files .filter .list .categories {
display: flex;
align-items: flex-start;
justify-content: flex-start; }
.inline-content .case-studies-files .filter .list .categories div {
color: #fff;
margin: 0 20px 0 0;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: flex-start; }
.inline-content .case-studies-files .filter .list .categories div span {
display: inline-block;
width: 150px; }
.inline-content .case-studies-files .filter .list .categories div::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #fff;
margin: 0 10px 0 0;
position: relative;
top: 5px; }
.inline-content .case-studies-files .filter .list .categories div:hover {
color: rgba(250, 168, 25, 0.9); }
.inline-content .case-studies-files .filter .list .categories div:hover::before {
border-color: rgba(250, 168, 25, 0.9); }
.inline-content .case-studies-files .filter .list .categories div._active {
color: rgba(250, 168, 25, 0.9); }
.inline-content .case-studies-files .filter .list .categories div._active::before {
border-color: rgba(250, 168, 25, 0.9);
font-size: 12px;
align-items: center;
justify-content: center;
display: flex;
background: #fff; }
.inline-content .case-studies-files .filter::before, .inline-content .case-studies-files .filter::after {
content: "";
display: block;
width: 100%;
height: 1px;
background: rgba(250, 168, 25, 0.9);
margin: 50px 0 10px 0; }
.inline-content .case-studies-files .filter::after {
margin: 10px 0 50px 0; }
.inline-content .case-studies-files > .list {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px; }
.inline-content .case-studies-files > .list .download-elem .title {
color: #fff;
font-weight: 300;
font-size: 22px;
line-height: 1;
margin: 0 0 20px;
min-height: 50px;
text-overflow: ellipsis; }
.inline-content .case-studies-files > .list .download-elem > div {
display: flex;
align-items: flex-end;
justify-content: flex-start; }
.inline-content .case-studies-files > .list .download-elem > div > img {
display: block;
width: 300px;
height: 250px;
background: rgba(21, 159, 219, 0.2);
object-fit: cover;
object-position: center; }
.inline-content .case-studies-files > .list .download-elem > div a {
display: block;
width: 50px;
height: 50px;
margin: 0 0 15px 30px;
transition: All 0.3s ease-in-out; }
.inline-content .case-studies-files > .list .download-elem > div a img {
display: block;
width: 100%;
object-fit: contain;
object-position: center; }
.inline-content .case-studies-files > .list .download-elem > div a:hover {
margin: 0 0 0 30px; }
@media (max-width: 450px) {
.inline-content .case-studies-files > .list .download-elem > div {
flex-wrap: wrap; }
.inline-content .case-studies-files > .list .download-elem > div img {
width: 100%; }
.inline-content .case-studies-files > .list .download-elem > div a {
margin: 10px 0 0 auto; } }
@media (max-width: 450px) {
.inline-content .case-studies-files > .list {
display: block; }
.inline-content .case-studies-files > .list .download-elem {
margin: 0 0 40px 0; } }
@media (max-width: 1280px) {
.inline-content {
padding: 0 40px; } }
@media (max-width: 768px) {
.inline-content {
padding: 0 20px; } }
.location-scroll-container {
width: 100%;
margin: 100px auto 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
padding: 0 0 0 100px; }
.location-scroll-container .scroll-content {
width: 320px;
height: 100%;
padding: 40px 0 0 0;
position: relative; }
.location-scroll-container .scroll-content .title {
color: #159fdb;
text-transform: uppercase;
letter-spacing: 10px;
width: 100%;
text-align: center;
font-size: 22px;
font-weight: 300;
margin: 0 0 50px; }
.location-scroll-container .scroll-content .title.selected.last {
color: rgba(250, 168, 25, 0.9); }
.location-scroll-container .scroll-content .region-list > div {
width: 100%;
border-bottom: 1px solid #fff;
margin: 0 230px 50px 0; }
.location-scroll-container .scroll-content .region-list > div * {
color: #fff;
font-size: 14px;
font-style: normal; }
.location-scroll-container .scroll-content .region-list > div a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 0 5px;
text-decoration: none; }
.location-scroll-container .scroll-content .region-list > div a::before {
content: "";
display: inline-block;
background-size: contain;
background-position: center;
width: 25px;
height: 25px;
margin: 0 10px 0 0; }
.location-scroll-container .scroll-content .region-list > div a.phone::before {
content: "";
background: url(../images/svg/icons/phone.svg) no-repeat; }
.location-scroll-container .scroll-content .region-list > div a.fax::before {
content: "";
background: url(../images/svg/icons/fax.svg) no-repeat; }
.location-scroll-container .scroll-content .region-list > div a.email::before {
content: "";
background: url(../images/svg/icons/email.svg) no-repeat; }
.location-scroll-container .scroll-content .region-list > div a.web::before {
content: "";
background: url(../images/svg/icons/web.svg) no-repeat; }
.location-scroll-container .scroll-content .region-list > div a.opentime::before {
content: "";
background: url(../images/svg/icons/opentime.svg) no-repeat; }
.location-scroll-container .scroll-content .region-list > div a:hover {
color: rgba(219, 141, 5, 0.9); }
.location-scroll-container .map-container {
width: calc(100% - 320px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
overflow: hidden;
z-index: 50;
position: relative; }
.location-scroll-container .map-container > div {
width: 100vh;
position: absolute;
top: 0;
right: 0; }
.location-scroll-container .map-container path.selected, .location-scroll-container .map-container path:hover {
cursor: pointer;
fill: rgba(250, 168, 25, 0.9); }
@media (max-width: 1024px) {
.location-scroll-container {
padding: 0; }
.location-scroll-container .scroll-content {
width: 100%;
padding: 0 20px; }
.location-scroll-container .scroll-content > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px;
max-width: 1280px; }
.location-scroll-container .map-container {
display: none; } }
.list-page-360 {
/** PRODUCT 360 V2 **/ }
.list-page-360 .product-360-images-v2 {
display: block;
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
overflow: hidden; }
.list-page-360 .product-360-images-v2 .spinner-images img {
position: absolute;
display: none;
width: 100%;
height: auto;
top: 0;
left: 0; }
.list-page-360 .product-360-images-v2 .spinner-touchscreen {
width: 100%;
height: 1000px;
position: absolute;
z-index: 10;
display: block;
left: 0;
top: 0; }
.list-page-360 .product-360-images-v2 .spinner-trureal {
overflow: visible;
display: block;
width: 20px;
height: 20px;
border-radius: 100px;
background-color: rgba(250, 168, 25, 0.9);
transform-origin: 50% 50%;
transition: all ease 150ms;
cursor: pointer;
z-index: 500;
position: absolute;
border: 1px solid #fff; }
.list-page-360 .product-360-images-v2 .spinner-content {
position: absolute;
background-color: white;
top: 0;
left: 2em;
padding: 5px 10px;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.44);
opacity: 1;
z-index: 3000;
transition: all ease 150ms; }
.list-page-360 .product-360-images-v2 .spinner-content-hidden {
opacity: 0;
transition: all ease 150ms; }
@media (max-width: 768px) {
.list-page-360 .product-360-images-v2 {
width: 100%;
height: 100vw; } }
.search-page-form input {
height: 40px;
padding: 0 20px; }
.product-group-container h1 {
color: #159fdb;
text-transform: uppercase;
letter-spacing: 10px;
font-size: 22px;
font-weight: 400;
text-align: center;
margin: 100px 0;
padding: 0 20px; }
.product-group-container h1::after {
content: "";
display: block;
width: 100%;
height: 1px;
background: rgba(250, 168, 25, 0.9);
margin: 15px 0 0 0; }
.product-group-container h2 {
font-size: 30px;
color: rgba(250, 168, 25, 0.9);
margin: 100px 0 50px 0;
font-weight: 500;
display: block;
width: 100%;
text-align: left; }
.product-group-container h2::after {
display: none !important; }
.product-group-container h3 {
color: rgba(250, 168, 25, 0.9);
text-transform: uppercase;
font-size: 17px;
margin: 30px 0 15px;
padding: 0; }
.product-group-container .product-text {
position: relative; }
.product-detail-page-container .inner .product-content-matrix table {
color: #fff;
}
.product-group-container .product-content-matrix {
/** LINE **/
/** ANCHOR **/
/** FEATURE SPINNER **/ }
.product-group-container .product-content-matrix .product-text {
display: flex;
flex-direction: row;
/** POSITIONING **/ }
.product-group-container .product-content-matrix .product-text .text-intro {
font-size: 30px;
color: rgba(250, 168, 25, 0.9);
margin: 100px 0 50px 0;
font-weight: 500;
display: block;
width: 100%;
text-align: left; }
.product-group-container .product-content-matrix .product-text .text-content a {
color: rgba(250, 168, 25, 0.9); }
.product-group-container .product-content-matrix .product-text .text-content p {
font-size: 18px;
font-weight: 300;
color: #fff;
margin: 0 0 40px;
line-height: 24px;
text-align: justify; }
.product-group-container .product-content-matrix .product-text .text-content ul li,
.product-group-container .product-content-matrix .product-text .text-content ol li {
color: #fff;
font-size: 18px;
font-weight: 200;
line-height: 21px; }
.product-group-container .product-content-matrix .product-text.center50 {
width: 50%;
margin: 0 auto; }
.product-group-container .product-content-matrix .product-text.left50 {
width: calc(50% - 20px);
float: left; }
.product-group-container .product-content-matrix .product-text.right50 {
width: calc(50% - 20px);
float: right; }
@media (max-width: 1180px) {
.product-group-container .product-content-matrix .product-text.center50, .product-group-container .product-content-matrix .product-text.left50, .product-group-container .product-content-matrix .product-text.right50 {
width: 100%;
float: none; } }
.product-group-container .product-content-matrix .line {
width: 100%;
height: 1px;
background: rgba(250, 168, 25, 0.9);
margin: 10px 0;
clear: both; }
.product-group-container .product-content-matrix ._clearfix {
clear: both; }
.product-group-container .product-content-matrix .matrix-anchor {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
margin: 20px 0; }
.product-group-container .product-content-matrix .matrix-anchor a {
flex: 1;
border: 1px solid #fff;
background: rgba(250, 168, 25, 0.9);
color: #fff;
padding: 10px 0;
text-align: center;
margin: 0 10px;
max-width: 120px;
text-transform: uppercase;
cursor: pointer;
text-decoration: none; }
.product-group-container .product-content-matrix .matrix-anchor a:hover {
background: rgba(219, 141, 5, 0.9); }
.product-group-container .product-content-matrix .feature-spinner-matrix {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.product-group-container .product-content-matrix .feature-spinner-matrix .svg-percent-animation {
-webkit-transform: scale(0.8);
transform: scale(0.8); }
.product-group-container .product-content-matrix .feature-spinner-matrix .svg-percent-animation .pc {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 260px;
color: #faa819;
font-size: 50px;
font-weight: 700;
border: 1px solid #faa819;
border-radius: 130px; }
.product-group-container .product-content-matrix .feature-spinner-matrix .svg-percent-animation .pc div {
font-size: 85px;
width: 100%;
display: block;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center; }
.product-group-container .product-content-matrix .feature-spinner-matrix .svg-percent-animation .pc span {
font-size: 25px;
top: -7px;
font-weight: 900;
left: 5px; }
.product-group-container .product-content-matrix .feature-spinner-matrix .svg-percent-animation .pc h4 {
font-size: 25px !important;
margin: -10px 0 0 !important;
text-transform: uppercase !important;
font-weight: 300 !important; }
.product-group-container .product-content-matrix .feature-spinner-matrix .svg-percent-animation .donut__svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
.product-group-container .product-content-matrix .feature-spinner-matrix .svg-percent-animation .donut__svg__circle--one {
stroke-dasharray: 817;
stroke-dashoffset: 817; }
.product-group-container .product-content-matrix .feature-spinner-matrix .svg-percent-animation svg {
top: -20px;
left: -20px;
position: relative; }
.product-group-container .product-content-matrix .feature-spinner-matrix.animate .donut__svg__circle--one-1 {
-webkit-animation: donut-show-one-1 1200ms cubic-bezier(0.99, 0.01, 0.62, 0.94) 0.5s forwards;
animation: donut-show-one-1 1200ms cubic-bezier(0.99, 0.01, 0.62, 0.94) 0.5s forwards;
-webkit-transition: stroke-dasharray 400ms ease-in-out;
transition: stroke-dasharray 400ms ease-in-out; }
.product-group-container .product-content-matrix::after {
content: "";
clear: both;
display: block; }
.product-group-container .products-list {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px;
margin: 0 0 100px 0; }
.product-group-container .products-list .data-group a {
text-decoration: none; }
.product-group-container .products-list .data-group a .title {
color: #159fdb;
font-weight: 600;
font-size: 27px;
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
text-align: center; }
.product-group-container .products-list .data-group a img {
width: 250px;
height: 250px;
background: rgba(22, 158, 217, 0.2);
display: block;
margin: 20px auto 0 auto;
object-fit: contain;
object-position: bottom; }
.product-group-container .products-list .data-group a img.not-empty {
background: transparent; }
.product-group-container .products-list .data-group a:hover .title {
color: rgba(250, 168, 25, 0.9); }
@media (max-width: 420px) {
.product-group-container .products-list {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
@media (max-width: 400px) {
.product-group-container .products-list {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.product-detail-page-container {
width: 100%;
padding: 0 40px; }
.product-detail-page-container .inner {
width: 100%;
height: auto; }
.product-detail-page-container .inner .product-floating-buttons {
width: 100%;
position: fixed;
height: 100px;
z-index: 150;
box-sizing: border-box;
left: 0;
bottom: 100px;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
visibility: visible;
opacity: 1;
transition: All 0.3s ease-in-out; }
.product-detail-page-container .inner .product-floating-buttons > :first-child {
transform: translateX(-120%); }
.product-detail-page-container .inner .product-floating-buttons > :last-child {
transform: translateX(120%); }
.product-detail-page-container .inner .product-floating-buttons._show > :first-child, .product-detail-page-container .inner .product-floating-buttons._show > :last-child {
transform: translateX(0); }
.product-detail-page-container .inner .product-floating-buttons a {
text-decoration: none;
color: #fff; }
.product-detail-page-container .inner .product-floating-buttons .select-the-right {
width: 320px;
position: relative; }
@media (max-width: 800px) {
.product-detail-page-container .inner .product-floating-buttons .select-the-right {
width: calc(50% - 10px); } }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote {
width: 400px;
position: relative; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form {
width: 100%;
margin: 0 0 20px 0;
padding: 10px;
background: #faa819;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: 50;
bottom: 60px; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form > .message {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #159fdb;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
border: 1px solid #fff;
visibility: hidden;
opacity: 0; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form > .message p {
text-align: center;
padding: 0 40px; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .field {
width: 100%; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .field input,
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .field textarea {
width: 100%;
height: 32px;
border: none;
color: #159fdb;
padding: 0 10px; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .field textarea {
height: 200px;
padding: 10px; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .field:not(:first-child) {
margin: 10px 0 0 0; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr {
width: 100%;
position: relative;
margin: 10px 0 15px 0; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr .tooltip {
position: absolute;
bottom: 40px;
background: #0a0d0f;
width: calc(100% - 10px);
left: 5px;
padding: 10px 20px;
visibility: hidden;
opacity: 0;
transition: All 0.3s ease-in-out; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr .tooltip p {
color: #fff;
margin: 0 0 2px 0; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr .accept-gdpr input {
width: 20px;
height: 20px;
background: #fff;
position: relative;
top: 5px;
margin: 0 10px 0 0; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr .accept-gdpr label {
color: #fff; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr .accept-gdpr label p,
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr .accept-gdpr label a {
color: #fff; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr .accept-gdpr label a {
text-decoration: none;
font-weight: 700; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr .accept-gdpr label a:hover {
text-decoration: underline; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .gdpr:hover .tooltip {
visibility: visible;
opacity: 1; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .actions {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5px 0 0 0; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form .actions button {
height: 37.5px;
width: 50%;
min-width: 50%; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form._show {
opacity: 1;
visibility: visible; }
@media (max-width: 800px) {
.product-detail-page-container .inner .product-floating-buttons .request-a-quote {
width: calc(50% - 10px); } }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote > a {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center; }
.product-detail-page-container .inner .product-floating-buttons .request-a-quote._blog {
width: 250px; }
.product-detail-page-container .inner .product-floating-buttons._resize .select-the-right,
.product-detail-page-container .inner .product-floating-buttons._resize .request-a-quote {
width: 200px; }
@media (max-width: 1370px) {
.product-detail-page-container .inner .product-floating-buttons {
bottom: 30px; } }
@media (max-width: 600px) {
.product-detail-page-container .inner .product-floating-buttons {
padding: 0 10px;
bottom: 0; } }
@media (max-width: 450px) {
.product-detail-page-container .inner .product-floating-buttons {
bottom: 10px;
flex-direction: column; }
.product-detail-page-container .inner .product-floating-buttons .primary {
width: 100%;
height: 45px; }
.product-detail-page-container .inner .product-floating-buttons._resize .primary {
width: 100% !important; } }
.product-detail-page-container .inner .product-floating-buttons._hide {
visibility: hidden;
opacity: 0; }
.product-detail-page-container .inner .product-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
z-index: 55; }
.product-detail-page-container .inner .product-header .product-nav,
.product-detail-page-container .inner .product-header .product-properties {
width: 400px; }
@media (max-width: 900px) {
.product-detail-page-container .inner .product-header .product-properties {
width: 100%; } }
.product-detail-page-container .inner .product-header .product-media {
width: calc(100% - (2 * 400px)); }
@media (max-width: 1500px) {
.product-detail-page-container .inner .product-header .product-media {
width: calc(100% - 400px); } }
@media (max-width: 1180px) {
.product-detail-page-container .inner .product-header .product-media {
width: 100%; } }
@media (max-width: 900px) {
.product-detail-page-container .inner .product-header .product-media {
width: 100%;
margin: 50px 0; } }
.product-detail-page-container .inner .product-header .navigation-trigger {
position: fixed;
left: -100px;
height: auto;
width: 50px;
padding: 0;
top: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
z-index: 250;
visibility: hidden;
opacity: 0; }
.product-detail-page-container .inner .product-header .navigation-trigger > div:first-child {
display: inline-block;
white-space: nowrap;
/* this is for shity "non IE" browsers
that dosn't support writing-mode */
-webkit-transform: translate(60px, 0) rotate(90deg);
-moz-transform: translate(60px, 0) rotate(90deg);
-o-transform: translate(60px, 0) rotate(90deg);
transform: translate(60px, 0) rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
/* IE9+ */
-ms-transform: none;
-ms-transform-origin: none;
/* IE8+ */
-ms-writing-mode: tb-rl;
/* IE7 and below */
*writing-mode: tb-rl;
padding: 10px 20px;
position: absolute;
top: 0;
background: #FAA819; }
.product-detail-page-container .inner .product-header .navigation-trigger div span {
margin: 0 0 0 10px;
font-weight: 700; }
.product-detail-page-container .inner .product-header .navigation-trigger:hover > div:first-child {
background: rgba(219, 141, 5, 0.9); }
.product-detail-page-container .inner .product-header .navigation-trigger._show {
transition: All 0.3s ease-in-out;
left: -15px;
visibility: visible;
opacity: 1; }
@media (min-width: 1441px) {
.product-detail-page-container .inner .product-header .navigation-trigger {
display: none; } }
.product-detail-page-container .inner .product-header .product-nav {
transition: All 0.3s ease-in-out;
transform: translateX(0); }
.product-detail-page-container .inner .product-header .product-nav .product-name h1 {
color: #fff;
font-size: 45px;
margin: 1px 0 20px;
line-height: 1; }
.product-detail-page-container .inner .product-header .product-nav .product-name h1 span {
display: block;
font-weight: 200; }
.product-detail-page-container .inner .product-header .product-nav .product-name h2 {
color: rgba(250, 168, 25, 0.9);
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
margin: 0;
padding: 0;
letter-spacing: 1px;
text-align: left; }
.product-detail-page-container .inner .product-header .product-nav .main {
display: flex;
align-items: flex-start;
justify-content: flex-start; }
.product-detail-page-container .inner .product-header .product-nav .main .main-categories {
min-width: 200px;
width: 200px;
border-right: 1px solid rgba(250, 168, 25, 0.9); }
.product-detail-page-container .inner .product-header .product-nav .main .main-categories > div {
display: block;
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 4px 0;
cursor: pointer;
color: #159fdb;
line-height: 1;
text-transform: uppercase; }
.product-detail-page-container .inner .product-header .product-nav .main .main-categories > div span {
display: inline-block;
margin: 0 5px; }
.product-detail-page-container .inner .product-header .product-nav .main .main-categories > div:hover, .product-detail-page-container .inner .product-header .product-nav .main .main-categories > div._active {
color: rgba(250, 168, 25, 0.9); }
.product-detail-page-container .inner .product-header .product-nav .main .sub-categories {
width: calc(100% - 200px); }
.product-detail-page-container .inner .product-header .product-nav .main .sub-categories .product-variations-group {
display: none;
padding: 0 10px; }
.product-detail-page-container .inner .product-header .product-nav .main .sub-categories .product-variations-group a {
color: #fff;
width: 100%;
display: block;
padding: 2px 0;
font-size: 15px;
text-decoration: none; }
.product-detail-page-container .inner .product-header .product-nav .main .sub-categories .product-variations-group a:hover, .product-detail-page-container .inner .product-header .product-nav .main .sub-categories .product-variations-group a._active {
color: rgba(250, 168, 25, 0.9); }
.product-detail-page-container .inner .product-header .product-nav .main .sub-categories .product-variations-group._show {
display: block; }
.product-detail-page-container .inner .product-header .product-nav .product-properties {
display: none;
margin: 40px 0 0 0; }
@media (max-width: 1500px) {
.product-detail-page-container .inner .product-header .product-nav .product-properties {
display: block; } }
@media (max-width: 900px) {
.product-detail-page-container .inner .product-header .product-nav .product-properties {
display: none; } }
.product-detail-page-container .inner .product-header .product-nav._show + .navigation-trigger {
left: 388px; }
.product-detail-page-container .inner .product-header .product-media {
padding: 0 20px; }
.product-detail-page-container .inner .product-header .product-media .product-images {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap; }
.product-detail-page-container .inner .product-header .product-media .product-images .product-images-nav {
width: 130px; }
.product-detail-page-container .inner .product-header .product-media .product-images .product-images-nav .product-thumb {
cursor: pointer;
margin: 0 0 20px 0; }
.product-detail-page-container .inner .product-header .product-media .product-images .product-images-nav .product-thumb img {
display: block;
width: 90px;
margin: 0 auto;
height: 60px;
object-fit: contain;
object-position: center; }
.product-detail-page-container .inner .product-header .product-media .product-images .product-images-nav .product-thumb:hover img, .product-detail-page-container .inner .product-header .product-media .product-images .product-images-nav .product-thumb._active img {
opacity: .8;
border: 1px solid rgba(250, 168, 25, 0.9); }
@media (max-width: 600px) {
.product-detail-page-container .inner .product-header .product-media .product-images .product-images-nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between; } }
@media (max-width: 450px) {
.product-detail-page-container .inner .product-header .product-media .product-images .product-images-nav {
justify-content: space-evenly; }
.product-detail-page-container .inner .product-header .product-media .product-images .product-images-nav .product-thumb {
margin: 10px; } }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper {
width: calc(100% - 130px);
position: relative; }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-button-prev,
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container-rtl .swiper-button-next,
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-button-next,
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container-rtl .swiper-button-prev {
background-image: none;
width: 50px;
height: 60px;
background-size: 50px 60px;
margin-top: -25px; }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-button-prev,
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container-rtl .swiper-button-next {
left: 10%; }
@media (max-width: 450px) {
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-button-prev,
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container-rtl .swiper-button-next {
left: 0; } }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-button-next,
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container-rtl .swiper-button-prev {
right: 10%; }
@media (max-width: 450px) {
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-button-next,
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container-rtl .swiper-button-prev {
right: 0; } }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container {
width: 100%; }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container .swiper-wrapper {
width: 100%; }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container .swiper-wrapper .swiper-slide {
width: 100%; }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container .swiper-wrapper .swiper-slide a {
display: block;
width: 100%;
max-width: 530px;
margin: 0 auto; }
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper .swiper-container .swiper-wrapper .swiper-slide a img {
display: block;
width: 100%; }
@media (max-width: 600px) {
.product-detail-page-container .inner .product-header .product-media .product-images #product-images-swiper {
width: 100%; } }
.product-detail-page-container .inner .product-header .product-media .product-icons {
width: 100%; }
.product-detail-page-container .inner .product-header .product-media .product-icons .list {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
justify-content: space-evenly;
margin: 50px 0;
flex-wrap: wrap; }
.product-detail-page-container .inner .product-header .product-media .product-icons .list .icon {
margin: 0 10px; }
.product-detail-page-container .inner .product-header .product-media .product-icons .list .icon img {
width: 90px;
height: 90px;
display: block;
object-fit: contain;
object-position: center;
margin: 0 auto; }
.product-detail-page-container .inner .product-header .product-media .product-icons .list .icon .title {
padding: 15px 0 0 0;
font-size: 20px;
text-transform: capitalize;
color: #fff;
text-align: center; }
.product-detail-page-container .inner .product-header .product-media .product-icons .list .icon .title::after {
content: "";
display: block;
width: 100%;
margin: 10px 0;
height: 1px;
background: #fff; }
.product-detail-page-container .inner .product-header .product-media .product-icons .list .icon .value {
color: rgba(250, 168, 25, 0.9);
padding: 0;
font-size: 24px;
font-weight: 600;
min-height: 35px;
text-align: center; }
@media (max-width: 1500px) {
.product-detail-page-container .inner .product-header .product-media .product-icons .list .icon {
margin: 0 0 40px 0; } }
@media (max-width: 768px) {
.product-detail-page-container .inner .product-header .product-media .product-icons .list {
justify-content: space-between; } }
@media (max-width: 1370px) {
.product-detail-page-container .inner .product-header .product-media {
padding: 0; } }
.product-detail-page-container .inner .product-header .product-properties .size-extraction {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start; }
.product-detail-page-container .inner .product-header .product-properties .size-extraction > div {
width: 50%;
position: relative; }
.product-detail-page-container .inner .product-header .product-properties .size-extraction > div > div.title {
color: rgba(250, 168, 25, 0.9);
font-size: 20px;
font-weight: 700; }
.product-detail-page-container .inner .product-header .product-properties .size-extraction > div > div:not(.title) {
padding: 10px 0 0;
font-size: 40px;
color: #fff; }
.product-detail-page-container .inner .product-header .product-properties .size-extraction > div:nth-child(2) > div {
text-align: right; }
.product-detail-page-container .inner .product-header .product-properties .size-extraction > div:nth-child(2)::before {
content: "";
display: block;
width: 3px;
background: rgba(250, 168, 25, 0.9);
height: 100%;
position: absolute;
left: 3px;
top: 0; }
.product-detail-page-container .inner .product-header .product-properties .colors-list {
width: 100%;
margin: 40px 0 0 0; }
.product-detail-page-container .inner .product-header .product-properties .colors-list .title {
color: rgba(250, 168, 25, 0.9);
font-size: 20px;
font-weight: 700; }
.product-detail-page-container .inner .product-header .product-properties .colors-list .list {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 15px 0; }
.product-detail-page-container .inner .product-header .product-properties .colors-list .list div {
width: 40px;
height: 40px;
border-radius: 40px;
cursor: pointer;
transition: All 0.3s ease-in-out;
transform: scale(1);
margin: 0 20px 0 0; }
.product-detail-page-container .inner .product-header .product-properties .colors-list .list div:hover {
transform: scale(1.1); }
.product-detail-page-container .inner .product-header .product-properties .description {
width: 100%;
margin: 40px 0 0 0; }
.product-detail-page-container .inner .product-header .product-properties .description strong {
color: rgba(250, 168, 25, 0.9); }
.product-detail-page-container .inner .product-header .product-properties .description ul {
color: #fff !important; }
.product-detail-page-container .inner .product-header .product-properties .description ul li {
color: #fff !important; }
.product-detail-page-container .inner .product-header .product-properties .description ul li span {
color: #fff !important; }
.product-detail-page-container .inner .product-header .product-properties .description p {
color: #fff;
margin: 0 0 10px;
font-size: 18px;
text-align: justify; }
.product-detail-page-container .inner .product-header .product-properties .description a {
text-decoration: none;
color: rgba(250, 168, 25, 0.9) !important; }
.product-detail-page-container .inner .product-header .product-properties .description a span {
text-decoration: none;
color: rgba(250, 168, 25, 0.9) !important; }
.product-detail-page-container .inner .product-header .product-properties .description a:hover {
color: rgba(219, 141, 5, 0.9) !important; }
.product-detail-page-container .inner .product-header .product-properties .description a:hover span {
color: rgba(219, 141, 5, 0.9) !important; }
@media (max-width: 1180px) {
.product-detail-page-container .inner .product-header .product-properties {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap; }
.product-detail-page-container .inner .product-header .product-properties .size-extraction,
.product-detail-page-container .inner .product-header .product-properties .colors-list {
width: 50%;
margin: 0; } }
@media (max-width: 768px) {
.product-detail-page-container .inner .product-header .product-properties .size-extraction,
.product-detail-page-container .inner .product-header .product-properties .colors-list {
width: 100%; }
.product-detail-page-container .inner .product-header .product-properties .colors-list {
margin: 40px 0 0 0; }
.product-detail-page-container .inner .product-header .product-properties .description {
margin: 40px 0 40px 0; } }
@media (max-width: 1440px) {
.product-detail-page-container .inner .product-header .product-nav {
position: fixed;
transform: translateX(-440px);
z-index: 250;
padding: 20px;
background: #FAA819; }
.product-detail-page-container .inner .product-header .product-nav .product-name h2 {
display: none; }
.product-detail-page-container .inner .product-header .product-nav .main .main-categories {
border-color: #159fdb; }
.product-detail-page-container .inner .product-header .product-nav .main .main-categories > div {
color: #fff; }
.product-detail-page-container .inner .product-header .product-nav .main .main-categories > div._active, .product-detail-page-container .inner .product-header .product-nav .main .main-categories > div:hover {
color: #159fdb; }
.product-detail-page-container .inner .product-header .product-nav .main .sub-categories .product-variations-group a._active, .product-detail-page-container .inner .product-header .product-nav .main .sub-categories .product-variations-group a:hover {
color: #159fdb; }
.product-detail-page-container .inner .product-header .product-nav._show {
transform: translateX(-40px); } }
@media (max-width: 1440px) and (max-width: 900px) {
.product-detail-page-container .inner .product-header .product-nav._show {
transform: translateX(-20px); } }
@media (max-width: 1180px) {
.product-detail-page-container .inner .product-header {
flex-wrap: wrap; } }
@media (max-width: 450px) {
.product-detail-page-container .inner .product-header .product-nav {
width: 100%;
transform: translateX(-100%);
left: 0;
padding: 10px; }
.product-detail-page-container .inner .product-header .product-nav._show {
transform: translateX(0); } }
.product-detail-page-container .inner .scroll-to-nav {
width: 100%;
margin: 0 0 50px 0;
height: 190px; }
.product-detail-page-container .inner .scroll-to-nav > div {
position: relative;
transition: All 0.3s ease-in-out;
top: 0;
left: 0;
width: 100%; }
.product-detail-page-container .inner .scroll-to-nav > div::before {
content: "";
display: block;
width: calc(100% - (2 * 400px));
height: 5px;
background: rgba(250, 168, 25, 0.9);
box-shadow: 1px 0 0 rgba(250, 168, 25, 0.66);
margin: 0 auto 30px auto; }
.product-detail-page-container .inner .scroll-to-nav .list {
width: calc(100% - (2 * 400px));
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: transparent; }
.product-detail-page-container .inner .scroll-to-nav .list > div {
flex: 1;
color: #fff;
padding: 10px 0;
text-align: center;
margin: 0 10px;
max-width: 120px;
cursor: pointer;
font-weight: 600;
font-size: 18px; }
.product-detail-page-container .inner .scroll-to-nav .list > div img {
display: block;
width: 40px;
object-fit: contain;
object-position: center;
margin: 0 auto 10px auto;
min-height: 50px;
max-height: 50px; }
.product-detail-page-container .inner .scroll-to-nav::after {
content: "";
display: block;
width: 100%;
height: 1px;
background: rgba(250, 168, 25, 0.9);
box-shadow: 1px 0 0 rgba(250, 168, 25, 0.66);
margin: 30px 0 0 0; }
.product-detail-page-container .inner .scroll-to-nav._fixed > div {
position: fixed;
top: 60px;
left: 0;
background: rgba(250, 168, 25, 0.9);
z-index: 170; }
.product-detail-page-container .inner .scroll-to-nav._fixed > div::before {
margin: 0; }
.product-detail-page-container .inner .scroll-to-nav._fixed .list > div {
padding: 5px 0; }
.product-detail-page-container .inner .scroll-to-nav._fixed .list > div img {
width: 20px;
margin: 0 auto 5px auto;
min-height: 20px;
max-height: 20px; }
@media (max-width: 1500px) {
.product-detail-page-container .inner .scroll-to-nav > div::before {
width: 100%; }
.product-detail-page-container .inner .scroll-to-nav .list {
width: 100%; } }
@media (max-width: 900px) {
.product-detail-page-container .inner .scroll-to-nav {
margin: 0; } }
@media (max-width: 768px) {
.product-detail-page-container .inner .scroll-to-nav .list > div img {
width: 30px;
min-height: 40px;
max-height: 40px; } }
@media (max-width: 450px) {
.product-detail-page-container .inner .scroll-to-nav {
height: auto; }
.product-detail-page-container .inner .scroll-to-nav .list {
flex-wrap: wrap; }
.product-detail-page-container .inner .scroll-to-nav._fixed > div {
position: relative;
top: 0;
background: transparent;
z-index: 150; }
.product-detail-page-container .inner .scroll-to-nav._fixed > div::before {
margin: 0 auto 30px auto; } }
.product-detail-page-container .inner .product-content-matrix {
width: 100%;
position: relative;
z-index: 40;
/** LINE **/
/** PRODUCT GALLERY **/
/** VIDEO **/
/** TEXT **/
/** TECH TABLE FOOTER **/
/** STANDARD EQUIPMENT **/
/** PRODUCT TRUREAL **/
/** PRODUCT 360 V2 **/
/** PRODUCT 360 **/
/** PRODUCT TABLE **/ }
.product-detail-page-container .inner .product-content-matrix > div > .title {
color: #159fdb;
text-transform: uppercase;
letter-spacing: 10px;
font-size: 22px;
font-weight: 400;
text-align: center;
margin: 50px 0;
padding: 0 20px; }
.product-detail-page-container .inner .product-content-matrix .line {
width: 100%;
height: 1px;
background: rgba(250, 168, 25, 0.9);
margin: 10px 0; }
.product-detail-page-container .inner .product-content-matrix .product-gallery {
width: 100%;
max-width: 1280px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-column-gap: 40px;
grid-row-gap: 40px;
margin: 40px auto; }
.product-detail-page-container .inner .product-content-matrix .product-gallery img {
width: 100%;
height: 270px;
object-fit: contain;
object-position: center;
cursor: pointer; }
.product-detail-page-container .inner .product-content-matrix .product-gallery img:hover {
opacity: .8; }
.product-detail-page-container .inner .product-content-matrix .product-video {
width: 100%; }
.product-detail-page-container .inner .product-content-matrix .product-video iframe {
display: block;
margin: 0 auto 50px auto; }
@media (max-width: 600px) {
.product-detail-page-container .inner .product-content-matrix .product-video iframe {
width: 100%;
height: 50vw; } }
.product-detail-page-container .inner .product-content-matrix .product-text {
width: 100%; }
.product-detail-page-container .inner .product-content-matrix .product-text .text {
width: 100%;
max-width: 1280px;
margin: 0 auto 50px auto; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-intro {
width: 100%;
margin: 0 auto;
font-style: italic;
letter-spacing: 2px;
color: rgba(250, 168, 25, 0.9);
font-size: 20px;
font-weight: 700;
line-height: 25px; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content {
color: #fff;
width: 100%;
font-size: 18px;
margin: 10px 0 20px;
font-weight: 400;
z-index: 50;
position: relative; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content strong {
font-weight: 700; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content a {
color: rgba(250, 168, 25, 0.9);
text-decoration: none; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content a:hover {
color: rgba(219, 141, 5, 0.9); }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expandable > * {
opacity: 0;
display: none; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expandable > *:nth-child(1), .product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expandable > *:nth-child(2), .product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expandable > *:nth-child(3), .product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expandable > *:nth-child(4) {
opacity: 1;
display: block; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expandable + .read-more {
display: block;
width: 100%;
cursor: pointer;
z-index: 70;
position: relative; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expandable + .read-more span {
display: block;
width: 150px;
margin: 0 auto;
color: #fff;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
background: #0e8ac5;
padding: 10px 0;
text-align: center; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expandable + .read-more:hover span {
background: #117dac; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expanded {
max-height: initial; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expanded > * {
opacity: 1;
display: block; }
.product-detail-page-container .inner .product-content-matrix .product-text .text .text-content._expanded + .read-more {
display: none; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads {
width: auto;
display: flex;
align-items: center;
justify-content: flex-start;
border: 1px solid rgba(250, 168, 25, 0.9);
padding: 20px; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download {
margin: 0 50px 0 0;
cursor: pointer; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download .title {
color: rgba(250, 168, 25, 0.9);
font-size: 20px;
font-weight: 600;
padding: 0 0 15px; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download .files {
display: flex;
align-items: center;
justify-content: flex-start; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download .files a {
display: block;
width: 40px;
height: 40px; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download .files a img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download .files a:hover {
opacity: .8; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download._disabled {
opacity: .5;
cursor: default; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download._disabled .files a {
cursor: default; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download._disabled .files a:hover {
opacity: 1; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download:last-child {
margin: 0; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .icons {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .icons img {
width: 60px;
height: 60px;
object-fit: contain;
object-position: center;
margin: 0 0 0 20px; }
@media (max-width: 1280px) {
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads,
.product-detail-page-container .inner .product-content-matrix .product-table-footer .icons {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
padding: 10px 0; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .icons {
margin: 50px 0 20px 0; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download {
margin: 0 25px 25px 25px; }
.product-detail-page-container .inner .product-content-matrix .product-table-footer .downloads .download:last-child {
margin: 0 25px 25px 25px; } }
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories {
margin: 0 0 40px 0; }
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list {
display: flex;
align-items: flex-start;
justify-content: space-around;
flex-wrap: wrap; }
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard table p {
margin: 0;
}
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard .sub-title,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .installation-options .sub-title,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .air-temperature-range .sub-title,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .accessories .sub-title {
color: #159fdb;
font-size: 20px;
text-transform: uppercase;
font-weight: 300;
padding: 0 0 5px; }
@media (max-width: 768px) {
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard .sub-title,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .installation-options .sub-title,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .air-temperature-range .sub-title,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .accessories .sub-title {
text-align: center; } }
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard ul li,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard ol li,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .installation-options ul li,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .installation-options ol li,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .air-temperature-range ul li,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .air-temperature-range ol li,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .accessories ul li,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .accessories ol li {
color: #fff;
font-size: 18px;
font-weight: 200;
line-height: 21px; }
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard p,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .installation-options p,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .air-temperature-range p,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .accessories p {
color: #fff;
font-size: 18px;
font-weight: 200;
line-height: 21px; }
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard a,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .installation-options a,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .air-temperature-range a,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .accessories a {
text-decoration: none;
color: rgba(250, 168, 25, 0.9); }
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard a:hover,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .installation-options a:hover,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .air-temperature-range a:hover,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .accessories a:hover {
color: rgba(219, 141, 5, 0.9); }
@media (max-width: 768px) {
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list {
flex-direction: column; }
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .standard,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .installation-options,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .air-temperature-range,
.product-detail-page-container .inner .product-content-matrix .product-equipment-and-accessories .list .accessories {
width: auto;
margin: 0 0 40px 0; } }
.product-detail-page-container .inner .product-content-matrix .product-trureal {
width: 100%;
display: block; }
.product-detail-page-container .inner .product-content-matrix .product-trureal img {
display: block;
margin: 60px auto 0 auto;
width: 600px; }
@media (max-width: 600px) {
.product-detail-page-container .inner .product-content-matrix .product-trureal img {
width: 100%; } }
.product-detail-page-container .inner .product-content-matrix .product-360-images-v2 {
display: block;
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
overflow: hidden; }
.product-detail-page-container .inner .product-content-matrix .product-360-images-v2 .spinner-images img {
position: absolute;
display: none;
width: 100%;
height: auto;
top: 0;
left: 0; }
.product-detail-page-container .inner .product-content-matrix .product-360-images-v2 .spinner-touchscreen {
width: 100%;
height: 1000px;
position: absolute;
z-index: 10;
display: block;
left: 0;
top: 0; }
.product-detail-page-container .inner .product-content-matrix .product-360-images-v2 .spinner-trureal {
overflow: visible;
display: block;
width: 20px;
height: 20px;
border-radius: 100px;
background-color: rgba(250, 168, 25, 0.9);
transform-origin: 50% 50%;
transition: all ease 150ms;
cursor: pointer;
z-index: 500;
position: absolute;
border: 1px solid #fff; }
.product-detail-page-container .inner .product-content-matrix .product-360-images-v2 .spinner-content {
position: absolute;
background-color: white;
top: 0;
left: 2em;
padding: 5px 10px;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.44);
opacity: 1;
z-index: 3000;
transition: all ease 150ms; }
.product-detail-page-container .inner .product-content-matrix .product-360-images-v2 .spinner-content-hidden {
opacity: 0;
transition: all ease 150ms; }
@media (max-width: 768px) {
.product-detail-page-container .inner .product-content-matrix .product-360-images-v2 {
width: 100%;
height: 100vw; } }
.product-detail-page-container .inner .product-content-matrix .product-360-images {
width: 100%;
display: block;
position: relative; }
.product-detail-page-container .inner .product-content-matrix .product-360-images .p360-container {
position: relative; }
.product-detail-page-container .inner .product-content-matrix .product-360-images .p360-container #threesixty {
max-width: 1280px;
width: 100%;
height: 720px;
position: relative;
margin: 0 auto; }
.product-detail-page-container .inner .product-content-matrix .product-360-images .p360-container #threesixty ol {
list-style: none;
width: 100%;
max-width: 1280px;
margin: 0 auto;
position: relative; }
.product-detail-page-container .inner .product-content-matrix .product-360-images .p360-container #threesixty ol li {
position: relative;
width: 100%; }
.product-detail-page-container .inner .product-content-matrix .product-360-images .p360-container #threesixty ol li img {
width: 100%;
height: 720px;
object-fit: contain;
object-position: center; }
@media (max-width: 450px) {
.product-detail-page-container .inner .product-content-matrix .product-360-images .p360-container #threesixty ol li img {
height: 420px; } }
@media (max-width: 450px) {
.product-detail-page-container .inner .product-content-matrix .product-360-images .p360-container #threesixty {
height: 420px; } }
.product-detail-page-container .inner .product-content-matrix .product-table {
width: 100%;
margin: 0 0 100px 0; }
.product-detail-page-container .inner .product-content-matrix .product-table .table {
width: 100%; }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-header {
background: #159fdb;
display: flex;
align-items: center;
justify-content: space-around;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
margin: 0 0 20px 0; }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-header div {
color: #fff;
min-height: 50px;
font-size: 16px;
padding: 0 25px 0 30px;
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1;
width: 100%; }
@media (max-width: 600px) {
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-header div {
min-width: 250px; } }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem {
width: 100%;
min-height: 50px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: space-around;
border-left: 1px solid #159fdb;
margin: 0 0 4px 0; }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem > div {
border-right: 1px solid #159fdb;
flex: 1;
width: 100%;
min-height: 50px; }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem > div > div {
width: auto; }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem > div:nth-child(2n) {
background: rgba(128, 128, 128, 0.11); }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem > div:not(.head) {
display: flex;
align-items: center;
justify-content: flex-start;
color: #fff; }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem > div:not(.head) span {
padding: 0 25px 0 30px; }
@media (max-width: 600px) {
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem > div:not(.head) {
min-width: 250px; } }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem .head {
color: #159fdb;
min-height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
font-size: 16px;
flex-grow: 1;
flex-basis: 0;
flex-wrap: wrap; }
.product-detail-page-container .inner .product-content-matrix .product-table .table .table-elem .head span {
display: block;
width: 100%;
line-height: 1;
padding: 0 25px 0 30px; }
@media (max-width: 600px) {
.product-detail-page-container .inner .product-content-matrix .product-table .table {
overflow-x: scroll; } }
.product-detail-page-container .inner .product-content-matrix .product-table p {
color: #fff;
font-size: 16px; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table {
width: 100%;
overflow: auto;
padding: 0 0 10px 0;
display: flex;
align-items: flex-start;
justify-content: space-evenly; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .row {
display: flex;
white-space: nowrap;
border-left: 1px solid #159fdb;
margin: 0 0 4px 0;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 100%; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .row .column {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-right: 1px solid #159fdb;
min-height: 50px;
font-size: 16px;
min-width: 160px;
color: #fff;
width: 100%; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .row .column:nth-child(1), .product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .row .column.heading {
background: #159fdb;
color: #fff;
justify-content: flex-start; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .row .column:nth-child(2n) {
background: rgba(128, 128, 128, 0.11); }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .row .column > div {
white-space: normal;
padding: 0 10px;
line-height: 1.4;
height: 80px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-around; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .row .column.heading {
background: #159fdb;
color: #fff;
justify-content: flex-start; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .row .column.heading > div {
text-align: left !important;
justify-content: flex-start; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .horizontal.simplebar-track .simplebar-scrollbar {
cursor: pointer; }
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table .horizontal.simplebar-track .simplebar-scrollbar::before {
background: rgba(250, 168, 25, 0.9); }
@media (max-width: 900px) {
.product-detail-page-container {
padding: 0 20px; } }
.product-alternative-entry {
width: 100%;
padding: 20px;
display: block;
color: #fff;
text-decoration: none; }
.product-alternative-entry img {
width: 50%;
display: block;
margin: 0 auto; }
.product-alternative-entry span {
font-size: 28px;
text-align: center;
display: block;
margin: 30px 0 0 0;
width: 100%; }
.product-alternative-entry small {
display: block;
width: 100%;
text-align: center; }
.product-detail-page-container .request-a-quote.primary {
background: rgba(0, 141, 210, 0.8);
border: 1px solid #008dd2; }
@media (max-width: 1440px) {
.product-detail-page-container .inner .product-content-matrix .product-table .product-tech-table {
padding: 0 0 10px 110px;
}
}
/** MEDIA HEIGHT **/
@media (max-height: 820px) {
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form {
max-height: 50vh;
overflow: scroll; } }
@media (max-height: 670px) {
.product-detail-page-container .inner .product-floating-buttons .request-a-quote .request-form {
max-height: 45vh; } }
.content.calculator .text-content > a {
display: flex;
width: 150px;
margin: 50px auto;
color: #fff;
text-decoration: none; }
.content.calculator .calculator-body {
width: 100%;
max-width: 1280px;
margin: 100px auto;
border: 1px solid #fff;
padding: 20px;
position: relative; }
.content.calculator .calculator-body .calculator-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 50;
background: #353b3e;
top: 0;
left: 0;
display: flex;
justify-content: center !important;
align-items: center; }
.content.calculator .calculator-body .calculator-overlay img {
display: block;
width: 50px; }
.content.calculator .calculator-body > div {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
overflow: hidden; }
.content.calculator .calculator-body > div .pool-data {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 400px;
border: 1px solid #fff;
padding: 10px 5px; }
.content.calculator .calculator-body > div .pool-data .title {
position: absolute;
top: -30px;
color: #faa819;
font-weight: 100;
width: 100%;
text-align: left;
left: 0;
display: none; }
.content.calculator .calculator-body > div .pool-data > div {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
position: relative; }
.content.calculator .calculator-body > div .pool-data > div > * {
margin: 0 0 0 15px; }
.content.calculator .calculator-body > div .pool-data > div h3 {
font-size: 16px;
width: 100%; }
.content.calculator .calculator-body > div .pool-data > div img,
.content.calculator .calculator-body > div .pool-data > div svg {
width: 40px;
height: 40px; }
.content.calculator .calculator-body > div .pool-data > div input {
width: 50px;
background: 0 0;
border: 1px solid #fff;
color: #fff;
padding: 2px 0 0 2px;
-moz-appearance: textfield;
margin: 0 0 0 -100px; }
.content.calculator .calculator-body > div .pool-data > div input::-webkit-outer-spin-button,
.content.calculator .calculator-body > div .pool-data > div input::-webkit-inner-spin-button {
-webkit-appearance: none; }
.content.calculator .calculator-body > div .pool-data > div span {
display: block;
width: 70px;
text-align: right;
padding: 0 10px 0 0; }
.content.calculator .calculator-body > div .pool-data .controls {
height: 24px;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
flex-direction: column;
position: absolute;
right: 44px; }
.content.calculator .calculator-body > div .pool-data .controls button {
height: 12px;
cursor: pointer;
position: relative;
background: #faa819;
border: none;
padding: 0 12px;
outline: none; }
.content.calculator .calculator-body > div .pool-data .controls button:focus, .content.calculator .calculator-body > div .pool-data .controls button:active {
background: #db8d05; }
.content.calculator .calculator-body > div .pool-data .controls button svg {
width: 16px;
height: 16px;
position: absolute;
top: 0px;
left: 5px; }
.content.calculator .calculator-body > div .drag-calculator {
width: calc(100% - 420px); }
@media (max-width: 768px) {
.content.calculator .calculator-body > div {
flex-direction: column; }
.content.calculator .calculator-body > div .pool-data {
width: 100%; }
.content.calculator .calculator-body > div .drag-calculator {
width: 100%;
margin: 20px 0 0 0; }
.content.calculator .calculator-body > div .drag-calculator a {
margin: 0 !important;
padding: 35px 10px !important; } }
.content.calculator .calculator-body h2 {
position: absolute;
top: -30px;
color: #faa819;
font-weight: 100;
width: 100%;
text-align: left;
left: 0;
display: none; }
.content.calculator .calculator-body .drag-calculator > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
height: 100%; }
.content.calculator .calculator-body .categories-tree {
flex-wrap: wrap;
margin: 0;
display: flex;
width: 100%; }
.content.calculator .calculator-body .categories-tree a {
width: calc(100% / 3);
max-width: 100%;
display: block;
color: #fff;
line-height: 20px;
text-align: center;
padding: 10px;
cursor: pointer; }
.content.calculator .calculator-body .categories-tree a.active, .content.calculator .calculator-body .categories-tree a:hover {
background: #faa819;
color: #fff; }
.content.calculator .calculator-body div.cf {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: #fff;
height: 100%;
margin: auto 0 0; }
.content.calculator .calculator-body div.cf > a, .content.calculator .calculator-body div.cf > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%; }
.content.calculator .calculator-body div.cf > div > * {
border: 1px solid #fff; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier,
.content.calculator .calculator-body div.cf > div .airflow {
width: 100%;
height: 100%; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier {
margin: 0 0 0 10px; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier {
padding: 35px 10px 0;
color: #fff;
max-width: inherit;
transition: All .3s ease-in-out;
background: #faa819;
position: relative; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier h3 {
font-size: 25px;
font-weight: 300;
color: #fff; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier h4 {
font-size: 17px;
font-weight: 300;
color: #fff;
margin: 7px 0; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier h4 span {
display: inline-block;
width: 170px;
color: #fff; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier h4.small span {
font-size: 13px;
margin-bottom: -14px;
position: relative;
top: -6px; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier > button {
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 50px;
background: #fff;
color: #000;
cursor: pointer;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
box-shadow: inset -1px -1px transparent;
transition: all .3s ease-in-out;
margin: 1px; }
.content.calculator .calculator-body div.cf > div .suggested-dehumidifier img {
position: absolute;
top: 20px;
right: 0px;
width: 240px; }
.content.calculator .calculator-body > div.cf {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: #fff;
height: 100%;
margin: auto 0 0; }
.content.calculator .calculator-body > div.cf > a, .content.calculator .calculator-body > div.cf > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%; }
.content.calculator .calculator-body > div.cf > div > * {
border: 1px solid #fff; }
.content.calculator .calculator-body > div.cf > div .suggested-dehumidifier,
.content.calculator .calculator-body > div.cf > div .airflow {
width: 100%;
height: 100%; }
.content.calculator .calculator-body > div.cf > div .suggested-dehumidifier {
padding: 35px 10px 0;
color: #fff;
max-width: inherit;
transition: All .3s ease-in-out;
background: #faa819;
position: relative; }
.content.calculator .calculator-body > div.cf > div .suggested-dehumidifier h3 {
font-size: 25px;
font-weight: 300;
color: #fff; }
.content.calculator .calculator-body > div.cf > div .suggested-dehumidifier h4 {
font-size: 17px;
font-weight: 300;
color: #fff;
margin: 7px 0; }
.content.calculator .calculator-body > div.cf > div .suggested-dehumidifier h4 span {
display: inline-block;
width: 170px;
color: #fff; }
.content.calculator .calculator-body > div.cf > div .suggested-dehumidifier h4.small span {
font-size: 13px;
margin-bottom: -14px;
position: relative;
top: -6px; }
.content.calculator .calculator-body > div.cf > div .suggested-dehumidifier > button {
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 50px;
background: #fff;
color: #000;
cursor: pointer;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
box-shadow: inset -1px -1px transparent;
transition: all .3s ease-in-out;
margin: 1px; }
.content.calculator .calculator-body > div.cf > div .suggested-dehumidifier img {
position: absolute;
top: -10px;
right: 30px;
width: 240px; }
.content.calculator a {
text-decoration: none; }
.content.calculator a img {
height: auto;
display: block;
margin: 0 auto; }
.content.calculator .over-300 {
width: 100% !important;
display: flex;
max-width: 100% !important;
color: #fff;
align-items: center;
justify-content: center;
background: rgba(232, 83, 83, 0.44);
text-align: center;
padding: 0 40px; }
.content.calculator .over-300 p {
color: #fff;
font-weight: 300; }
.hidden {
display: none !important; }
.product-counter--2 img {
width: 160px !important; }
.product-counter--3 h3 {
margin: 0; }
.product-counter--3 img {
position: relative !important;
height: 80px !important;
width: auto !important;
margin: 20px auto 100px auto; }
.calculator-request-form {
width: 100%;
margin: 0 0 50px 0;
padding: 10px;
background: #faa819;
opacity: 0;
visibility: hidden;
position: relative;
z-index: 50;
max-height: 0;
transition: All 0.3s ease-in-out; }
.calculator-request-form > .message {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #159fdb;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
border: 1px solid #fff;
visibility: hidden;
opacity: 0; }
.calculator-request-form > .message p {
text-align: center;
padding: 0 40px; }
.calculator-request-form .field {
width: 100%; }
.calculator-request-form .field input,
.calculator-request-form .field textarea {
width: 100%;
height: 32px;
border: none;
color: #159fdb;
padding: 0 10px; }
.calculator-request-form .field textarea {
height: 200px;
padding: 10px; }
.calculator-request-form .field:not(:first-child) {
margin: 10px 0 0 0; }
.calculator-request-form .gdpr {
width: 100%;
position: relative;
margin: 10px 0 15px 0; }
.calculator-request-form .gdpr .tooltip {
position: absolute;
bottom: 40px;
background: #0a0d0f;
width: calc(100% - 10px);
left: 5px;
padding: 10px 20px;
visibility: hidden;
opacity: 0;
transition: All 0.3s ease-in-out; }
.calculator-request-form .gdpr .tooltip p {
color: #fff;
margin: 0 0 2px 0; }
.calculator-request-form .gdpr .accept-gdpr input {
width: 20px;
height: 20px;
background: #fff;
position: relative;
top: 5px;
margin: 0 10px 0 0; }
.calculator-request-form .gdpr .accept-gdpr label {
color: #fff; }
.calculator-request-form .gdpr .accept-gdpr label p,
.calculator-request-form .gdpr .accept-gdpr label a {
color: #fff; }
.calculator-request-form .gdpr .accept-gdpr label a {
text-decoration: none;
font-weight: 700;
display: inline-block;
width: auto; }
.calculator-request-form .gdpr .accept-gdpr label a:hover {
text-decoration: underline; }
.calculator-request-form .gdpr:hover .tooltip {
visibility: visible;
opacity: 1; }
.calculator-request-form .actions {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5px 0 0 0; }
.calculator-request-form .actions button {
height: 37.5px;
width: 245px;
min-width: 245px; }
.calculator-request-form._show {
opacity: 1;
visibility: visible;
max-height: 550px; }
.content.calculator .calculator-body > div .pool-data > div input.ng-empty {
border-color: red; }
.menu-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 150;
background: rgba(0,0,0,.2);
display: none;
cursor: pointer;
}
.menu-overlay._show {
display: block;
}
/** MEDIA **/
@media (max-width: 550px) {
.calculator-request-form .actions {
flex-direction: column; }
.calculator-request-form .actions button {
width: 100%; }
.calculator-request-form .actions button:first-child {
margin: 0 0 10px 0; } }
/* update */
footer .inner .footer-info .newsletter-and-socials > div .sc > div a > img {
width: 100%;
}
.blog-content .text {
width: 100%;
max-width: 1280px;
margin: 0 auto 50px auto; }
.blog-content .text .text-intro {
width: 100%;
margin: 0 auto;
font-style: italic;
letter-spacing: 2px;
color: rgba(250, 168, 25, 0.9);
font-size: 20px;
font-weight: 700;
line-height: 25px; }
.blog-content .text .text-content {
color: #fff;
width: 100%;
font-size: 18px;
margin: 10px 0 20px;
font-weight: 400;
z-index: 50;
position: relative; }
.blog-content .text .text-content strong {
font-weight: 700; }
.blog-content .text .text-content a {
color: rgba(250, 168, 25, 0.9);
text-decoration: none; }
.blog-content .text .text-content a:hover {
color: rgba(219, 141, 5, 0.9); }
.blog-content .text .text-content._expandable > * {
opacity: 0;
display: none; }
.blog-content .text .text-content._expandable > *:nth-child(1), .blog-content .text .text-content._expandable > *:nth-child(2), .blog-content .text .text-content._expandable > *:nth-child(3), .blog-content .text .text-content._expandable > *:nth-child(4) {
opacity: 1;
display: block; }
.blog-content .text .text-content._expandable + .read-more {
display: block;
width: 100%;
cursor: pointer;
z-index: 70;
position: relative; }
.blog-content .text .text-content._expandable + .read-more span {
display: block;
width: 150px;
margin: 0 auto;
color: #fff;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
background: #0e8ac5;
padding: 10px 0;
text-align: center; }
.blog-content .text .text-content._expandable + .read-more:hover span {
background: #117dac; }
.blog-content .text .text-content._expanded {
max-height: initial; }
.blog-content .text .text-content._expanded > * {
opacity: 1;
display: block; }
.blog-content .text .text-content._expanded + .read-more {
display: none; }
/*# sourceMappingURL=main.css.map */