/* ex-definitions */
/**
* Definitions
* Breakpoints: 1440, 1280, 1024, 768, 360
*/
/**
* Content
* - Colors
* - Body
* - Headings
* - Paragraphs
* - List
* - Subcripts / Supercripts
* - Margins
* - Buttons
*/
:root {
--Black: #101008;
--Neutrals-Black: #282819;
--Neutrals-Dark-Grey: #4E4E3E;
--Neutrals-Grey: #70705F;
--Neutrals-Medium-Grey: #8A8A7E;
--Neutrals-Light-Grey: #929283;
--Neutrals-Dark-Sand: #B4B4A2;
--Neutrals-Sand: #C6C6B3;
--Neutrals-Medium-Sand: #DADAC8;
--Neutrals-Light-Sand: #E6E6D7;
--Neutrals-White-Sand: #F7F6F2;
--Neutrals-White: #FFFFFF;
--Primary-Dark-Green: #003C19;
--Primary-Green: #006432;
--Primary-Green-40: rgba(0, 100, 50, 0.4);
--Primary-Middle-Green: #0F9129;
--Primary-Light-Green: #19AF23;
--Primary-Soft-Green: #9ADF9F;
--Primary-White-Green: #D1EFD3;
--Secondary-Dark-Electro: #00413C;
--Secondary-Middle-Electro: #00544D;
--Secondary-Electro: #00786E;
--Secondary-Light-Electro: #BFDDDB;
--Primary-Gradient: linear-gradient(290deg, #006432 0%, #267D9E 100%);
--Gradient-Sand: linear-gradient(135deg, #F7F6F2 5%, #E6E6D7 100%);
--Gradient-Green: linear-gradient(139deg, #19AF23 0%, #006432 130%);
--Gradient-Electro: linear-gradient(320deg, #006432 0%, #3882A6 100%);
--Gradient-Black: linear-gradient(123deg, #4E4E3E 0%, #282819 100%);
--Gradient-Product-Real: linear-gradient(90deg, #F7F6F2 0%, #E6E6D7 100%);
--Gradient-Product: linear-gradient(180deg, #F7F6F2 0%, #E6E6D7 100%);
--Shadow-White: box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
--Shadow-Dark: box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.15);
--Shadow-Up: box-shadow: 0px -15px 30px 0px rgba(0, 0, 0, 0.05);
--Secondary-Dark-Blue: #206985;
--Secondary-Blue: #267D9E;
--Secondary-Light-Blue: #3882A6;
--Secondary-Red: #B90523;
--Hover-on-Green: #5AD062;
}
/* Colors */
.color--black { color: var(--Neutrals-Black) }
.color--dark-grey { color: var(--Neutrals-Dark-Grey) }
.color--grey { color: var(--Neutrals-Grey) }
.color--light-grey { color: var(--Neutrals-Light-Grey) }
.color--dark-sand { color: var(--Neutrals-Dark-Sand) }
.color--sand { color: var(--Neutrals-Sand) }
.color--light-sand { color: var(--Neutrals-Light-Sand) }
.color--white-sand { color: var(--Neutrals-White-Sand) }
.color--white { color: var(--Neutrals-White) }
.color--green { color: var(--Primary-Green) }
.color--light-green { color: var(--Primary-Light-Green) }
.color--electronics { color: var(--Secondary-Electronics) }
/* Body styles */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
html {
min-height: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
min-width: 360px;
min-height: 100vh;
padding: 64px 0 0 0;
margin: 0;
background-color: var(--Neutrals-White);
font-family: "open-sans", "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--Neutrals-Dark-Grey);
overflow-anchor: none;
overflow-y: scroll;
overflow-x: clip;
}
body.no_scroll {
position: fixed;
left: 0;
right: 0;
width: 100%;
}
/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-style: normal;
font-weight: 300;
color: var(--Neutrals-Black);
}
h1 {
font-size: 56px;
line-height: 1.15;
letter-spacing: -0.05em;
}
h2 {
font-size: 48px;
line-height: 1.17;
letter-spacing: -0.04em;
}
h3 {
font-size: 32px;
line-height: 1.25;
letter-spacing: -0.03em;
}
h4 {
font-size: 24px;
line-height: 1.33;
letter-spacing: -0.02em;
}
h5 {
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.01em;
}
h6 {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0;
}
.h1 {
font-size: 56px;
line-height: 1.15;
letter-spacing: -0.05em;
}
.h2 {
font-size: 48px;
line-height: 1.17;
letter-spacing: -0.04em;
}
.h3 {
font-size: 32px;
line-height: 1.25;
letter-spacing: -0.03em;
}
.h4 {
font-size: 24px;
line-height: 1.33;
letter-spacing: -0.02em;
}
.h5 {
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.01em;
}
.h6 {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0;
}
@media (max-width: 768px) {
h1 { font-size: 52px; }
h2 { font-size: 44px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
.h1 { font-size: 52px; }
.h2 { font-size: 44px; }
.h3 { font-size: 32px; }
.h4 { font-size: 24px; }
.h5 { font-size: 20px; }
.h6 { font-size: 16px; }
}
@media (max-width: 450px) {
h1 { font-size: 48px; }
h2 { font-size: 40px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
.h1 { font-size: 48px; }
.h2 { font-size: 40px; }
.h3 { font-size: 32px; }
.h4 { font-size: 24px; }
.h5 { font-size: 20px; }
.h6 { font-size: 16px; }
}
/* Paragraphs */
p {
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.5em;
color: var(--Neutrals-Dark-Grey);
}
p.large, p.has-medium-font-size {
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 1.5em;
letter-spacing: -0.01em;
color: var(--Neutrals-Dark-Grey);
}
p.small, p.has-small-font-size {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.5em;
/* color: var(--Neutrals-Grey); */
color: var(--Neutrals-Dark-Grey);
}
p.indent {
padding-left: 36px;
}
/** List/Unordered */
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
position: relative;
padding-left: 24px;
margin-bottom: 0.25em;
}
ul li::before {
content: "";
height: 7px;
width: 7px;
position: absolute;
left: 0;
top: 0.6em;
border-radius: 4px;
background-color: var(--Neutrals-Light-Grey);
}
/* Link/Regular */
a {
outline: none;
text-decoration: none;
font-weight: 600;
color: inherit;
transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
a:hover {
text-decoration: none;
color: var(--Primary-Light-Green);
}
}
a:focus {
outline: none !important;
box-shadow: none !important;
}
body.touch_device {
-webkit-tap-highlight-color: rgba(25, 175, 35, 0.4);
}
/* Subcripts / Supercripts */
sup {
vertical-align: baseline;
position: relative;
font-size: 0.7em;
font-weight: 600;
top: -0.4em;
}
sub {
vertical-align: baseline;
position: relative;
font-size: 0.7em;
font-weight: 600;
bottom: -0.3em;
}
strong sup, strong sub, sup strong, sub strong {
font-weight: 700;
}
p.large sup, p.has-medium-font-size sup {
font-weight: 300;
}
:is(h1, h2, h3, .h1, .h2, .h3) sup,
:is(h1, h2, h3, .h1, .h2, .h3) sub {
font-weight: 300;
}
:is(h4, h5, h6, .h4, .h5, .h6) sup,
:is(h4, h5, h6, .h4, .h5, .h6) sub {
font-weight: 400;
}
/* Layout helpers */
.clear--float::after {
content: "";
clear: both;
display: table;
}
.flex--fit {
display: block;
flex: 10 0 auto;
}
.text--no_break {
white-space: nowrap;
}
/** Margins */
.bottom--0em {
margin-bottom: 0 !important;
}
.bottom--0p5em {
margin-bottom: 0.5em !important;
}
.bottom--1em {
margin-bottom: 1em !important;
}
.bottom--1p5em {
margin-bottom: 1.5em !important;
}
.bottom--2em {
margin-bottom: 2em !important;
}
.bottom--2p5em {
margin-bottom: 2.5em !important;
}
.bottom--3em {
margin-bottom: 3em !important;
}
.bottom--4em {
margin-bottom: 4em !important;
}
.bottom--5em {
margin-bottom: 5em !important;
}
.top--0em {
margin-top: 1em !important;
}
.top--0p5em {
margin-top: 0 !important;
}
.top--1em {
margin-top: 1em !important;
}
.top--1p5em {
margin-top: 1.5em !important;
}
.top--2em {
margin-top: 2em !important;
}
.top--2p5em {
margin-top: 2.5em !important;
}
.top--3em {
margin-top: 3em !important;
}
.top--4em {
margin-top: 4em !important;
}
.top--5em {
margin-top: 5em !important;
}
/** Buttons */
.button--text {
display: inline-block;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 22px;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s ease;
}
.button--text.button--white {
color: var(--Neutrals-White);
}
@media (hover: hover) and (pointer: fine) {
.button--text.button--white:hover {
color: var(--Hover-on-Green);
}
}
/** Button Round. Default color: --Neutrals-White
* button--round button--green button--arrow button--arrow_down
*/
.button--round {
display: inline-block;
height: 40px;
width: 40px;
border: none;
border-radius: 20px;
cursor: pointer;
outline: none;
background-color: var(--Neutrals-White);
background-position: center;
background-repeat: no-repeat;
}
.button--small {
height: 32px;
width: 32px;
border-radius: 16px;
}
.button--round.button--arrow,
.button--round.button--arrow_down,
.button--round.button--arrow_up {
/*
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--round.button--arrow_down {
transform: rotate(90deg);
}
.button--round.button--arrow_up {
transform: rotate(-90deg);
}
.button--round.button--arrow_left {
transform: rotate(180deg);
}
.button--round.button--close {
/*
*/
background-size: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}
.button--round.button--green {
background-color: var(--Primary-Light-Green);
}
.button--round.button--green.button--arrow,
.button--round.button--green.button--arrow_down,
.button--round.button--green.button--arrow_up {
/*
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--round.button--green.button--close {
/*
*/
background-size: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}
/** Buttons. Default color: --Primary-Light-Green
* button--item button--white button--arrow button--arrow_down button--arrow_up
*/
.buttons--container .button--item:not(:last-child) {
margin-right: 16px;
}
.button--item {
display: inline-block;
position: relative;
height: 48px;
padding: 18px 32px 18px 32px;
font-family: "open-sans", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
border: none;
border-radius: 24px;
cursor: pointer;
outline: none;
background: var(--Primary-Light-Green);
}
.button--item span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
color: var(--Neutrals-White);
}
.button--item.button--icon {
padding-right: 58px;
}
.button--item.button--icon::after {
position: absolute;
content: "";
top: 9px;
right: 9px;
width: 30px;
height: 30px;
border: none;
border-radius: 15px;
background-color: var(--Primary-Green-40);
background-position: center;
background-repeat: no-repeat;
}
.button--item.button_icon--arrow::after {
/*
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--item.button_icon--arrow_down::after {
transform: rotate(90deg);
}
.button--item.button_icon--arrow_up::after {
transform: rotate(-90deg);
}
.button--item.button_icon--close::after {
/*
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}
.button--item.button_icon--load_more::after {
transform: rotate(45deg);
}
.button--item.button--white {
background: var(--Neutrals-White);
}
.button--item.button--white span {
color: var(--Neutrals-Black);
}
.button--item.button--white.button--icon::after {
background-color: var(--Neutrals-White-Sand);
}
.button--item.button--white.button_icon--arrow::after {
/*
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--item.button--white.button_icon--close::after {
/*
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23282819;stroke-width:1.2;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}
.button--item.button--grey {
background: var(--Neutrals-Light-Sand);
}
.button--item.button--grey span {
color: var(--Neutrals-Light-Grey);
}
.button--item.button--grey.button--icon::after {
background-color: var(--Neutrals-Dark-Sand);
}
.button--send_request {
padding-right: 58px;
}
.button--send_request::after {
position: absolute;
content: "";
top: 9px;
right: 9px;
width: 30px;
height: 30px;
border: none;
border-radius: 15px;
background-color: var(--Primary-Green-40);
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--send_request.button--action_button {
position: fixed;
display: none;
right: 50px;
bottom: 24px;
z-index: 500;
transition: top 1s, bottom 1s;
}
.button--send_request.button--action_button.button--show_action {
display: block;
z-index: 1500;
}
.button--send_request.button--action_button.button--footer_fix {
position: absolute;
top: -72px;
bottom: unset;
z-index: 500;
}
@media (max-width: 1024px) {
.button--send_request.button--action_button {
right: 34px;
}
}
@media (max-width: 768px) {
.button--send_request.button--action_button {
right: 18px;
}
}
@media (max-width: 450px) {
.button--send_request.button--action_button {
right: 10px;
bottom: 16px;
}
}
@media (hover: hover) and (pointer: fine) {
.button--item.button--icon:hover::after,
.button--send_request:hover::after {
background-color: var(--Primary-Green);
}
.button--item.button--white.button--icon:hover::after {
background-color: var(--Neutrals-Medium-Sand);
}
.button--item.button--grey:hover span {
color: var(--Neutrals-Black);
}
.button--item.button--grey.button--icon:hover::after {
background-color: var(--Neutrals-Light-Grey);
}
}
/* ex-layout */
/* 1512 1280 1024 768 450 */
/* 1150 630 */
:root {
--Mobile-Padding: 24px;
}
/** Section */
.section--viewport {
width: 1290px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
.section--small,
.section--viewport_small {
width: 850px;
max-width: 100%;
}
.section--screen,
.section--full_width {
width: 100%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.section--viewport_fixed {
width: 1072px;
max-width: 100%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
.section--viewport .section--screen,
.section--viewport .section--full_width {
width: calc(100vw - var(--Scroll-Width));
margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2);
margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2);
}
.section--window_height {
min-height: 100vh;
}
@media (max-width: 1512px) {
.section--viewport {
width: calc(100% - 128px);
}
.section--viewport_fixed {
width: 1072px;
}
.section--viewport .section--screen {
width: calc(100vw - var(--Scroll-Width));
}
}
@media (max-width: 1200px) {
.section--viewport_fixed {
width: calc(100% - 128px);
}
}
@media (max-width: 1024px) {
.section--viewport, .section--viewport_fixed {
width: calc(100% - 96px);
}
}
@media (max-width: 768px) {
.section--viewport, .section--viewport_fixed {
width: calc(100% - 64px);
}
}
@media (max-width: 450px) {
.section--viewport, .section--viewport_fixed {
width: calc(100% - 48px);
}
}
/** Header block */
.header {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
}
.header--dropped .header {
z-index: 1600;
}
.header--menu_container {
background: var(--Neutrals-White);
position: relative;
z-index: 10;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
/* */
--SVG-Black-Arrow: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 9L7.5 6L4.5 3' stroke='%23282819' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* */
--SVG-Light-Green-Arrow: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 9L7.5 6L4.5 3' stroke='%2319AF23' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.compensate-for-scrollbar .header--menu_container {
margin-right: var(--Scroll-Width);
}
.header--menu_wrap {
display: flex;
flex-wrap: nowrap;
}
/** Header Logo */
.header--logo {
display: block;
flex: 0 0 auto;
margin-right: 100px;
padding: 16px 0;
}
.header--logo img {
display: block;
height: 32px;
width: auto;
}
@media (max-width: 768px) {
.header--logo {
margin-right: 70px;
}
}
@media (max-width: 450px) {
.header--logo {
margin-right: 40px;
}
}
/** Header Top Menu */
.header--top_menu {
flex: 1 0 auto;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.menu--item_lvl0 .menu--top_handler {
display: block;
padding: 26px 12px;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--Neutrals-Black);
}
.menu--item_lvl0.menu--has_children .menu--top_handler {
padding-right: 29px;
}
.menu--item_lvl0 .menu--top_handler span {
display: block;
position: relative;
transition: color .1s ease;
}
.menu--item_lvl0.menu--has_children .menu--top_handler span::after {
position: absolute;
content: "";
top: 0;
right: -17px;
width: 12px;
height: 12px;
background-position: center;
background-repeat: no-repeat;
background-image: var(--SVG-Black-Arrow);
transform: rotate(90deg);
transition: transform .3s ease-in-out 0s, top 0.3s ease-in-out 0s;
}
@media (hover: hover) and (pointer: fine) {
.menu--item_lvl0 .menu--top_handler:hover span {
color: var(--Primary-Light-Green);
}
.menu--item_lvl0.menu--has_children .menu--top_handler:hover span::after {
background-image: var(--SVG-Light-Green-Arrow);
}
}
.menu--item_lvl0.menu--has_children.menu--item_dropped .menu--top_handler span::after {
top: -1px;
transform: rotate(-90deg);
}
.menu--item_lvl0.menu--current_item .menu--top_handler,
.menu--item_lvl0.menu--current_ancestor .menu--top_handler {
color: var(--Primary-Light-Green);
}
.menu--item_lvl0.menu--has_children.menu--current_item .menu--top_handler span::after,
.menu--item_lvl0.menu--has_children.menu--current_ancestor .menu--top_handler span::after {
background-image: var(--SVG-Light-Green-Arrow);
}
/** Divider Item */
.menu--divider {
flex: 1 1 auto;
margin-right: 18px;
}
/** Search Item */
.menu--search .menu--top_handler {
padding: 22px 12px;
font-size: 0;
}
.menu--search .menu--top_handler span {
width: 20px;
height: 20px;
}
.menu--search.menu--item_dropped .menu--search_closed,
.menu--search:not(.menu--item_dropped) .menu--search_open {
display: none;
}
.menu--search .svg-close,
.menu--search .svg-search {
stroke:var(--Neutrals-Black);
stroke-linecap:round;
}
@media (hover: hover) and (pointer: fine) {
.menu--search .menu--top_handler:hover .svg-search,
.menu--search .menu--top_handler:hover .svg-close {
stroke: var(--Primary-Light-Green);
}
}
/** Burger handler */
.menu--burger {
display: none;
}
.menu--burger button {
border: none;
cursor: pointer;
outline: none;
background-color: transparent;
}
.menu--burger .menu--top_handler {
padding: 22px 20px 22px 12px;
font-size: 0;
height: 100%;
width: 52px;
position: relative;
}
.menu--burger .menu--top_handler span {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 1.2px;
background: var(--Neutrals-Black);
transform: translateX(-50%) translateY(-50%);
}
.menu--burger .menu--top_handler span:before,
.menu--burger .menu--top_handler span:after {
content: "";
position: absolute;
right: 0;
margin: auto;
height: 1.2px;
background: var(--Neutrals-Black);
opacity: 1;
transition-property: transform, width;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.menu--burger .menu--top_handler span:before {
top: -8px;
width: 17px;
}
.menu--burger .menu--top_handler span:after {
bottom: -8px;
width: 12px;
}
.menu--burger.menu--item_dropped .menu--top_handler span {
background-color: transparent;
}
.menu--burger.menu--item_dropped .menu--top_handler span:before {
transform: rotate(-45deg);
top: 0;
width: 20px;
}
.menu--burger.menu--item_dropped .menu--top_handler span:after {
transform: rotate(45deg);
bottom: 0;
width: 20px;
}
@media (hover: hover) and (pointer: fine) {
.menu--burger .menu--top_handler:hover span:before,
.menu--burger .menu--top_handler:hover span:after {
background: var(--Primary-Light-Green);
}
.menu--burger:not(.menu--item_dropped) .menu--top_handler:hover span {
background: var(--Primary-Light-Green);
}
}
/** Drop Container */
.menu--drop_container {
display: none;
background: var(--Neutrals-White-Sand);
box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.15);
padding-left: 40px;
padding-right: 40px;
margin-left: -28px;
}
.menu--drop_container.menu--drop_open {
display: block;
position: absolute;
top: 64px;
overflow-y: auto;
overflow-x: clip;
}
.menu--drop_container .simplebar-track.simplebar-vertical {
width: 4px;
right: 4px;
top: 4px;
bottom: 8px;
background-color: var(--Neutrals-Light-Sand);
}
.menu--drop_container .simplebar-scrollbar {
background-color: var(--Neutrals-Dark-Sand);
}
.menu--drop_container .simplebar-scrollbar:before {
display: none;
}
.menu--drop_category .menu--drop_container,
.menu--drop_full_width .menu--drop_container {
left: 0;
right: 0;
padding-left: 0;
padding-right: 0;
margin-left: 0;
}
.menu--content_container {
position: relative;
display: inline-block;
opacity: 0;
padding: 28px 0;
transition: opacity 0.2s ease;
}
.menu--drop_category .menu--content_container,
.menu--drop_full_width .menu--content_container {
padding-bottom: 48px;
}
.menu--drop_full_width.menu--drop_fixed .menu--content_container::after {
position: absolute;
content: "";
top: 28px;
bottom: 48px;
left: -28px;
width: 1px;
background: var(--Neutrals-Medium-Sand);
}
.no_scroll .menu--drop_category .menu--content_container {
padding-bottom: 32px;
}
.menu--content_container .button--text {
display: block;
font-weight: 700;
padding-top: 6px;
padding-bottom: 6px;
color: var(--Neutrals-Grey);
}
.menu--drop_category .menu--content_container .button--text {
padding-top: 10px;
padding-bottom: 10px;
}
.menu--drop_category .menu--content_container .menu--category_bottom {
padding-bottom: 12px;
}
.menu--content_container .menu--item_lvl1.menu--current_item,
.menu--content_container .menu--item_lvl1.menu--current_ancestor,
.menu--content_container .menu_drop--content .menu--item_lvl1.menu--current_item,
.menu--content_container .menu_drop--content .menu--item_lvl1.menu--current_ancestor,
.menu--content_container .menu--item_lvl3.menu--current_item .menu--title {
color: var(--Primary-Light-Green);
}
@media (max-width: 768px) {
.menu--drop_category .menu--content_container .button--text {
line-height: 18px;
}
.menu--drop_category .menu--content_container .menu--category_bottom {
padding-bottom: 14px;
}
}
/** Drop with Content */
.menu--drop_category .menu--content_container {
display: flex;
}
.menu_drop--content {
position: relative;
flex: 0 0 auto;
width: 25%;
min-height: 200px;
padding-right: 42px;
padding-bottom: 0;
display: flex;
flex-direction: column;
}
.menu--drop_category .menu--category_space {
flex-grow: 1;
min-height: 54px;
}
.menu--drop_category .menu--item_lvl1 {
padding-top: 12px;
padding-bottom: 12px;
transition: color .1s ease;
}
.menu_drop--content .button--text.button--content {
position: absolute;
bottom: 0;
left: 0;
padding-top: 13px;
padding-bottom: 13px;
}
.menu_drop--content .button--item {
position: absolute;
bottom: 0;
left: -10px;
}
.menu_drop--content .button--item.button--white span {
color: var(--Neutrals-Grey);
}
.menu_drop--content .menu--item_lvl1.menu--item_selected {
color: var(--Neutrals-Black);
}
@media (hover: hover) and (pointer: fine) {
.menu_drop--content .button--item.button--white:hover span {
color: var(--Neutrals-Black);
}
.menu--content_container .menu_drop--content .menu--item_lvl1:hover {
color: var(--Primary-Light-Green);
}
}
.menu_drop--items {
flex-grow: 1;
position: relative;
padding-left: 80px;
padding-bottom: 54px;
}
.menu_drop--items::before {
position: absolute;
content: "";
top: -36px;
bottom: -48px;
left: 0;
width: 100vw;
background: rgba(255, 255, 255, 0.70);
border-top: 1px solid var(--Neutrals-White-Sand);
}
.no_scroll .menu--content_container .menu_drop--items::before {
bottom: -32px;
}
.menu_drop--item {
position: relative;
display: none;
height: 100%;
}
.menu_drop--item.menu--target_selected {
display: block;
}
.menu_drop--item .button--item {
position: absolute;
bottom: -54px;
left: 0;
}
.menu_drop--category {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
margin-left: -16px;
margin-right: -16px;
margin-bottom: 24px;
}
.menu_drop--category:last-child {
margin-bottom: 0;
}
.menu_drop--category_title {
display: block;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 24px;
letter-spacing: -0.02em;
margin-bottom: 24px;
color: var(--Neutrals-Grey);
transition: color .15s ease;
}
.menu_drop--item .menu--item_lvl3 {
width: 33.3333%;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 16px;
}
.menu_drop--item .menu--item_lvl3 .menu--title {
font-size: 16px;
font-style: normal;
line-height: 1.5;
font-weight: 600;
color: var(--Neutrals-Black);
margin-bottom: 4px;
transition: color .15s ease;
}
.menu_drop--item .menu--item_lvl3 .small {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.5em;
color: var(--Neutrals-Grey);
}
@media (hover: hover) and (pointer: fine) {
.menu_drop--item .menu--item_lvl3:hover p {
color: var(--Neutrals-Black);
}
.menu_drop--item .menu--item_lvl3:hover .menu--title {
color: var(--Primary-Light-Green);
}
}
@media (max-width: 1024px) {
.menu_drop--content {
width: 28%;
}
.menu_drop--item .menu--item_lvl3 {
width: 50%;
}
}
@media (max-width: 768px) {
.menu_drop--content {
width: 32%;
}
.menu_drop--items {
padding-left: 48px;
}
}
/** Search Drop Container */
.menu--search .menu--content_container {
display: block;
padding-bottom: 64px;
}
.menu--search_form {
display: flex;
flex-wrap: nowrap;
margin-top: 24px;
}
.menu--search_form .menu--search_input {
flex-grow: 1;
margin-right: 42px;
}
.menu--search_input {
height: 48px;
width: 100%;
padding: 16px 0 16px;
font-family: "open-sans", sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 400;
color: var(--Neutrals-Grey);
background-color: var(--Neutrals-White-Sand);
border: none;
border-bottom: 1px solid var(--Neutrals-Light-Grey);
outline: none;
}
.menu--search_input::placeholder {
color: var(--Neutrals-Light-Grey);
opacity: 0.7;
}
.menu--search_input::-webkit-input-placeholder {
color: var(--Neutrals-Light-Grey);
opacity: 0.7;
}
.menu--search_input::-moz-placeholder {
color: var(--Neutrals-Light-Grey);
opacity: 0.7;
}
.menu--search_input::-ms-input-placeholder {
color: var(--Neutrals-Light-Grey);
opacity: 0.7;
}
/* Autofill partial tuning */
.menu--search_input:autofill,
.menu--search_input:autofill::first-line,
.menu--search_input:autofill:hover,
.menu--search_input:autofill:focus,
.menu--search_input:autofill:active,
.menu--search_input:-webkit-autofill,
.menu--search_input:-webkit-autofill::first-line,
.menu--search_input:-webkit-autofill:hover,
.menu--search_input:-webkit-autofill:focus,
.menu--search_input:-webkit-autofill:active {
box-shadow: 0 0 0 50px var(--Neutrals-White-Sand) inset !important;
-webkit-box-shadow: 0 0 0 50px var(--Neutrals-White-Sand) inset !important;
color: var(--Neutrals-Grey) !important;
-webkit-text-fill-color: var(--Neutrals-Grey) !important;
font-family: "open-sans", sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
}
.menu--search_form .button--item {
flex-grow: 0;
}
@media (max-width: 530px){
.menu--search .menu--content_container {
padding-bottom: 48px;
}
.menu--search_form {
flex-wrap: wrap;
margin-top: 16px;
}
.menu--search_form .menu--search_input {
width: 100%;
margin-right: 0;
}
.menu--search_form .button--item {
width: 100%;
margin-top: 32px;
}
}
/** Burger menu dropdown */
.burger--menu {
display: block;
padding: 0;
width: 100%;
}
.menu--burger .menu--drop_container {
right: 0;
padding-left: 0;
padding-right: 0;
margin-left: 0;
background: var(--Neutrals-Medium-Sand);
}
.menu--burger .menu--drop_container .simplebar-track.simplebar-vertical {
width: 4px;
right: 2px;
top: 2px;
bottom: 2px;
background-color: var(--Neutrals-Light-Sand);
}
.menu--burger .burger--handler {
display: block;
padding: 0;
border-top: 1px solid var(--Neutrals-Light-Sand);
}
.menu--burger .burger--handler.burger_item--has_childs,
.menu--burger .burger--handler.burger--language {
display: flex;
flex-wrap: nowrap;
}
.menu--burger .burger--handler.burger--complex_handler .menu--handler {
display: flex;
flex-wrap: nowrap;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
.burger--complex_left {
flex: 1 1 auto;
padding-top: 12px;
padding-bottom: 12px;
}
.burger--complex_right {
display: block;
width: 86px;
flex: 0 0 auto;
position: relative;
cursor: pointer;
}
.burger--complex_right img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu--item_lvl0 > .burger--handler,
.burger--handler.burger--language {
background: var(--Neutrals-White-Sand);
}
.menu--burger .burger--item {
padding: 0;
}
.burger--handler .menu--handler {
display: block;
padding: 22px 24px;
flex: 1 1 auto;
}
.burger--handler.menu--item_lvl3 .menu--handler {
padding-top: 12px;
padding-bottom: 12px;
padding-right: 72px;
}
.burger--handler .menu--handler span {
display: block;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--Neutrals-Black);
transition: color .1s ease;
}
.burger--handler .menu--handler p {
font-size: 15px;
line-height: 1.2;
color: var(--Neutrals-Grey);
margin-top: 0.5em;
}
.burger--handler .burger--expand {
display: none;
width: 100px;
padding-right: 64px;
flex: 0 0 auto;
border-left: 1px solid var(--Neutrals-Light-Sand);
cursor: pointer;
}
.burger--handler.burger_item--has_childs .burger--expand {
display: block;
}
.burger--expand span {
display: block;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: var(--SVG-Black-Arrow);
transform: rotate(90deg);
transition: transform .3s ease-in-out 0s;
}
.burger--item_expanded > .burger--handler .burger--expand span {
transform: rotate(-90deg);
}
.burger--item_expanded.menu--item_lvl0 > .burger--handler {
background: var(--Neutrals-Light-Sand);
}
.burger--item_expanded.menu--item_lvl0 > .burger--handler .burger--expand {
border-left-color: var(--Neutrals-White);
}
.burger--children_container {
display: none;
background: var(--Neutrals-White);
}
.burger--item.menu--item_lvl1 > .burger--children_container {
margin-left: 24px;
}
@media (hover: hover) and (pointer: fine) {
.burger--menu .menu--handler:hover span {
color: var(--Primary-Light-Green);
}
.burger--menu .burger--expand:hover span {
background-image: var(--SVG-Light-Green-Arrow);
}
}
.burger--language {
border-bottom: 1px solid var(--Neutrals-Light-Sand);
}
.burger--language .menu--handler:not(:last-child) {
border-right: 1px solid var(--Neutrals-Light-Sand);
}
.burger--divider {
height: 52px;
background: var(--Neutrals-Medium-Sand);
border-top: 1px solid var(--Neutrals-Light-Sand);
}
.burger--item.menu--current_item > .burger--handler .menu--handler span,
.burger--item.menu--current_ancestor > .burger--handler .menu--handler span,
.burger--handler.menu--current_item > .menu--handler span,
.burger--language .menu--current_item span {
color: var(--Primary-Light-Green);
}
/* Move items to burger */
.burger--menu .menu--item_lvl0 {
display: none;
}
.header--menu_wrap {
margin-right: -12px;
}
@media (max-width: 1200px) {
.header--top_menu {
justify-content: flex-end;
}
.menu--divider {
display: none;
}
}
@media (max-width: 1100px) {
.header--menu_wrap {
margin-right: -12px;
}
.menu--company,
.menu--contacts,
.menu--language {
display: none;
}
.menu--burger {
display: block;
}
.burger--menu .menu--company,
.burger--menu .menu--contacts {
display: block;
}
.menu--burger .menu--drop_container {
width: 50vw;
}
}
@media (max-width: 1024px) {
.burger--handler .burger--expand {
width: 84px;
padding-right: 48px;
}
}
@media (max-width: 850px) {
.menu--support {
display: none;
}
.burger--menu .menu--support {
display: block;
}
}
@media (max-width: 768px) {
.burger--handler .burger--expand {
width: 70px;
padding-right: 28px;
}
.burger--complex_right {
width: 92px;
}
}
@media (max-width: 700px) {
.menu--products,
.menu--applications {
display: none;
}
.burger--menu .menu--products,
.burger--menu .menu--applications {
display: block;
}
.menu--burger .menu--drop_container {
width: 100%;
}
.burger--handler > .menu--handler {
padding-left: 32px;
}
}
@media (max-width: 450px){
.burger--handler .burger--expand {
width: 64px;
padding-right: 20px;
}
.burger--complex_right {
width: 78px;
}
.burger--handler > .menu--handler {
padding-left: var(--Mobile-Padding);
}
}
/** Content block */
.content {
width: 100%;
min-height: 100vh;
position: relative;
}
/** Content heading section */
.section--heading {
background-color: var(--Primary-Dark-Green);
background-size: cover;
background-repeat: no-repeat;
background-position-x: right;
}
.content_heading--container {
padding: 72px 0;
}
.content_heading--content {
display: inline-block;
max-width: 50%;
padding: 48px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(60px);
backdrop-filter: blur(60px);
}
.content_heading--content h1 {
color: var(--Neutrals-White-Sand);
line-height: 1.1;
}
.content_heading--content p {
margin-top: 32px;
color: var(--Neutrals-White-Sand);
}
.content_heading--content .buttons--container {
margin-top: 48px;
}
@media (max-width: 1280px) {
.content_heading--content {
max-width: 70%;
}
}
@media (max-width: 1024px) {
.content_heading--container {
padding: 48px 0;
}
.content_heading--content h1 {
font-size: 48px;
}
}
@media (max-width: 768px) {
.content_heading--container {
padding: 32px 0;
}
.content_heading--content {
padding: 32px;
max-width: 100%;
}
}
@media (max-width: 450px) {
.content_heading--content h1 {
font-size: 42px;
}
.content_heading--content .buttons--container {
margin-top: 32px;
}
.content_heading--content .button--item {
width: 100%;
}
}
.section--container {
width: 100%;
}
/** Footer block */
.footer {
position: relative;
width: 100%;
background: var(--Gradient-Electro);
padding-top: 64px;
padding-bottom: 24px;
}
.footer--container {
position: relative;
}
.footer--anchor {
position: absolute;
top: -40px;
right: -6px;
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
justify-content: flex-end;
column-gap: 16px;
min-height: 40px;
min-width: 40px;
}
.footer--logo {
display: inline-block;
}
.footer--logo img {
display: block;
height: 32px;
width: auto;
}
.footer--menu {
margin-top: 52px;
display: flex;
flex-wrap: nowrap;
margin-left: -32px;
margin-right: -32px;
}
.footer_menu--column {
flex: 1 1 auto;
padding-left: 32px;
padding-right: 32px;
}
.footer_menu--column .button--text {
display: block;
line-height: 22px;
margin-top: 8px;
padding-top: 4px;
padding-bottom: 4px;
transition: color .1s ease;
}
.footer_menu--column .button--text.menu--item_lvl0 {
font-size: 16px;
font-weight: 400;
line-height: 26px;
text-transform: none;
letter-spacing: 0.06em;
margin-bottom: 22px;
margin-top: 0;
}
.footer--address {
font-size: 16px;
font-weight: 300;
line-height: 26px;
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--Neutrals-White);
display: block;
margin-top: 12px;
}
.footer--address.menu--item_lvl0 {
margin-top: 0;
padding-top: 4px;
}
.footer--social_block {
white-space: nowrap;
margin-top: 46px;
}
.footer--social {
display: inline-block;
width: 24px;
margin-right: 18px;
}
.footer--social:last-child {
margin-right: 0;
}
.footer--social_icon {
fill: var(--Neutrals-White);
}
@media (hover: hover) and (pointer: fine) {
.footer--anchor:hover .button--text { color: var(--Hover-on-Green); }
.footer--anchor:hover .button--round {
background-color: var(--Hover-on-Green);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.footer--address.footer--email:hover { color: var(--Hover-on-Green); }
.footer--social:hover .footer--social_icon { fill: var(--Hover-on-Green); }
}
.footer_column--bottom {
display: none;
}
.footer--bottom {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
margin-top: 56px;
}
.footer--copyright {
flex-grow: 1;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 1;
letter-spacing: 0.01em;
color: var(--Neutrals-White);
opacity: 0.8;
}
.footer--bottom_links {
flex-grow: 0;
margin-left: 32px;
}
@media (max-width: 1280px) {
.footer--menu {
margin-left: -24px;
margin-right: -24px;
}
.footer_menu--column {
padding-left: 24px;
padding-right: 24px;
}
}
@media (max-width: 1100px) {
.footer--anchor { right: -3px; }
}
@media (max-width: 1024px) {
.footer--menu { flex-wrap: wrap; }
.footer_menu--column { width: 33.33333%; }
.footer_column--1 {
order: 1;
margin-bottom: 64px;
}
.footer_column--3 {
order: 2;
margin-bottom: 64px;
}
.footer_column--address {
order: 3;
margin-bottom: 64px;
}
.footer_column--2 { order: 4; }
.footer_column--4 { order: 5; }
.footer_column--bottom {
order: 6;
display: block;
}
.footer_column--bottom .button--text:first-child { margin-top: 0; }
.footer--bottom_links { display: none; }
}
@media (max-width: 768px) {
.footer_column--3, .footer_column--4 { width: 20%; }
}
@media (max-width: 650px) {
.footer_menu--column {
width: 50%;
margin-bottom: 64px;
}
.footer_column--1 { order: 1; }
.footer_column--2 { order: 2; }
.footer_column--3 { order: 4; }
.footer_column--4 { order: 3; }
.footer_column--address {
order: 5;
margin-bottom: 0;
}
.footer_column--bottom { order: 6; }
.footer_menu--column .button--text { line-height: 20px; }
.footer_menu--column .button--text.menu--item_lvl0 { margin-bottom: 16px; }
}
@media (max-width: 450px) {
.footer { padding-top: 46px; }
.footer--anchor { top: -5px; }
.footer--anchor_text { display: none; }
.footer_menu--column .button--text.menu--item_lvl0 {
margin-bottom: 10px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
}
.footer_menu--column .button--text.menu--item_lvl1 { display: none; }
.footer_menu--column { margin-bottom: 0; }
.footer_menu--column.footer_column--address {
width: 100%;
margin-top: 32px;
margin-bottom: 46px;
}
.footer--fax { margin-top: 0; }
.footer_menu--column.footer_column--bottom { width: 100%; }
.footer--bottom { margin-top: 36px; }
}
/**
* FancyBox
*/
.fancybox-caption__body > * {
font-size: 14px;
color: #FFFFFF;
}
.fancybox-caption__body h4 {
margin-bottom: 3px;
}
.fancybox-caption__body .fancy_pop--description {
font-size: 12px;
font-style: italic;
margin-top: 2px;
}
@media (max-width: 785px) {
.fancybox-caption__body > * {
font-size: 13px;
}
.fancybox-caption__body .fancy_pop--description {
font-size: 11px;
}
}
/* FancyBox: Remove background from all buttons */
.fancybox-navigation .fancybox-button {
background: transparent;
}
/* FancyBox: Navigation arrows */
.fancybox-navigation .fancybox-button div {
padding: 6px;
background: transparient;
border-radius: 16px;
transition: opacity .2s;
border: 1px solid var(--Neutrals-Medium-Grey);
opacity: .7;
}
.fancybox-navigation .fancybox-button:not([disabled]):hover div {
opacity: .9;
background: var(--Neutrals-White-Sand);
border-color: var(--Neutrals-White-Sand);
}
.fancybox-navigation .fancybox-button[disabled] {
color: var(--Neutrals-Dark-Grey);
}
.fancybox-navigation .fancybox-button:not([disabled]) {
color: var(--Neutrals-Sand);
}
.fancybox-navigation .fancybox-button:not([disabled]):hover {
color: var(--Primary-Green);
}
/* .h4 {
font-size: 24px;
font-weight: normal;
line-height: 32px;
letter-spacing: -0.02em;
color: var(--Neutrals-Black);
}
@media screen and (max-width: 767px) {
.h4 {
font-size: 20px;
line-height: 28px;
}
} */
.disabled,
[disabled]:not(.brlbs-cmpnt-list-item) {
pointer-events: none;
opacity: .3;
}
.section--page-heading {
padding-top: 72px;
padding-bottom: 72px;
background: var(--Gradient-Sand);
}
body:not(.single-news) .section--page-heading {
background: var(--Gradient-Electro);
position: relative;
}
body:not(.single-news) .section--page-heading:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
background: url("data:image/svg+xml;utf8,") no-repeat 0% 50%;
bottom: 0;
background-size: 75% 100%;
}
body:not(.single-news) .section--page-heading h1 {
color: var(--Neutrals-White);
position: relative;
z-index: 1;
}
/** Header */
.section--page_header {
background-color: var(--Neutrals-Black);
background-size: cover;
background-repeat: no-repeat;
min-height: 432px;
background-position: 50% 70%;
}
.page--header_container {
padding: 72px 0;
}
.page--header_content {
max-width: 550px;
padding: 48px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(120px);
backdrop-filter: blur(120px);
}
.page--header_content h1 {
color: var(--Neutrals-White);
}
.page--header_content p {
margin-top: 24px;
color: var(--Neutrals-Light-Sand);
}
@media screen and (max-width: 767px) {
.page--header_container {
padding: 0;
min-height: 338px;
}
.section--page_header .section--viewport {
padding: 0;
}
.page--header_content {
padding: 36px 24px 42px;
border: 0;
max-width: none;
}
.section--page-heading {
padding-top: 32px;
padding-bottom: 32px;
}
}
/** Debug screen */
.debug--screen {
position: fixed;
top: 0;
left: 0;
padding: 5px 10px;
background-color: var(--Neutrals-White-Sand);
font-size: 13px;
font-weight: 400;
color: var(--Neutrals-Dark-Grey);
z-index: 50000;
}
pre {
font-size: 15px;
line-height: 1.2;
}
/** WP Columns */
.wp-block-columns {
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
gap: 80px;
}
.wp-block-columns {
align-items: normal
}
.wp-block-columns.are-vertically-aligned-top {
align-items: flex-start
}
.wp-block-columns.are-vertically-aligned-center {
align-items: center
}
.wp-block-columns.are-vertically-aligned-bottom {
align-items: flex-end
}
.wp-block-column {
flex-basis: 30% !important;
flex-grow: 1;
min-width: 0;
overflow-wrap: break-word;
word-break: break-word;
}
.wp-block-column.is-vertically-aligned-top {
align-self: flex-start
}
.wp-block-column.is-vertically-aligned-center {
align-self: center
}
.wp-block-column.is-vertically-aligned-bottom {
align-self: flex-end
}
.wp-block-column.is-vertically-aligned-stretch {
align-self: stretch
}
.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top {
width: 100%
}
@media (max-width: 1024px) {
.wp-block-columns.columns--text_image,
.wp-block-columns.columns--image_text {
flex-wrap: wrap !important;
gap: 48px;
}
.wp-block-columns.columns--text_table,
.wp-block-columns.columns--table_table {
flex-wrap: wrap !important;
gap: 24px;
}
.columns--text_image .wp-block-column,
.columns--image_text .wp-block-column,
.columns--text_table .wp-block-column,
.columns--table_table .wp-block-column {
flex-basis: 100% !important;
}
.wp-block-columns.columns--swap .wp-block-column:last-child {
order: 1;
}
.wp-block-columns.columns--swap .wp-block-column:first-child {
order: 2;
}
}
@media (max-width: 768px) {
.wp-block-columns {
flex-wrap: wrap !important;
}
.wp-block-columns .wp-block-column {
flex-basis: 100% !important;
}
.wp-block-columns.columns--list_list {
gap: 54px;
}
.wp-block-columns.columns--text_image,
.wp-block-columns.columns--image_text {
gap: 32px;
}
.wp-block-columns.columns--double_list,
.wp-block-columns.columns--text_text {
gap: 0;
}
.wp-block-columns.columns--double_list .wp-block-column:last-child {
padding-top: 0;
}
}
@media (max-width: 450px) {
.wp-block-columns.columns--text_image,
.wp-block-columns.columns--image_text {
gap: 24px;
}
}
/** WP Video */
.wp-block-video {
box-sizing: border-box
}
.wp-block-video video {
height: auto;
vertical-align: middle;
width: 100%
}
@supports (position: sticky) {
.wp-block-video [poster] {
object-fit:cover
}
}
.wp-block-video.aligncenter {
text-align: center
}
.wp-block-video :where(figcaption) {
margin-bottom: 1em;
margin-top: .5em
}
/** WP Spacer */
.wp-block-spacer{clear:both}
/** WP Math */
.wp-block-math {
font-size: 20px;
}
/* ex-gbstyles */
/** Headings */
.gb--styles h2 {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 42px;
}
.gb--styles h3 {
margin-bottom: 24px;
}
.gb--styles h4 {
margin-bottom: 16px;
}
.gb--styles h5 {
margin-bottom: 8px;
}
@media (max-width: 768px) {
.gb--styles h2 {
margin-bottom: 36px;
}
}
/** Paragraphs */
.gb--styles p {
margin-bottom: 1em;
}
.gb--styles p.p--limited {
max-width: 1024px;
}
/** Margins for blocks */
.gb--styles .margin--1em {
margin-bottom: 1em;
}
.gb--styles .margin--1p5em {
margin-bottom: 1.5em;
}
.gb--styles .margin--2em {
margin-bottom: 2em;
}
.gb--styles .margin--3em {
margin-bottom: 3em;
}
.gb--styles .margin--4em {
margin-bottom: 4em;
}
/**
* WP BLOCKS
*/
/**
* wp-block-columns
*
* X.columns--text_text - two separate texts side by side
* .columns--table_table - two tables side by side
* .columns--list_list - two lists side by side
* .columns--text_image, .columns--image_text - text & image
* .columns--text_table, .columns--table_text - text & table
* X.columns--text_list, .columns--list_text - text & list
* .columns--double_text - continuous text in two columns
* .columns--double_list - continuous list in two columns
* .columns--swap - swap columns on mobile
*/
.gb--styles .wp-block-columns {
gap: 80px;
}
.gb--styles .wp-block-columns.columns--text_image,
.gb--styles .wp-block-columns.columns--image_text {
gap: 50px;
}
.gb--styles .wp-block-columns > .wp-block-column {
flex-basis: 30% !important;
}
@media (max-width: 1024px) {
.gb--styles .wp-block-columns.columns--text_image,
.gb--styles .wp-block-columns.columns--image_text {
flex-wrap: wrap !important;
gap: 48px;
}
.gb--styles .wp-block-columns.columns--text_table,
.gb--styles .wp-block-columns.columns--table_text,
.gb--styles .wp-block-columns.columns--table_table {
flex-wrap: wrap !important;
gap: 24px;
}
.gb--styles .columns--text_image .wp-block-column,
.gb--styles .columns--image_text .wp-block-column,
.gb--styles .columns--text_table .wp-block-column,
.gb--styles .columns--table_text .wp-block-column,
.gb--styles .columns--table_table .wp-block-column {
flex-basis: 100% !important;
}
.gb--styles .wp-block-columns.columns--text_image.columns--swap {
gap: 24px;
}
.gb--styles .wp-block-columns.columns--swap .wp-block-column:last-child {
order: 1;
}
.gb--styles .wp-block-columns.columns--swap .wp-block-column:first-child {
order: 2;
}
}
@media (max-width: 768px) {
.gb--styles .wp-block-columns {
flex-wrap: wrap !important;
gap: 0;
}
.gb--styles .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
}
.gb--styles .wp-block-columns.columns--list_list,
.gb--styles .wp-block-columns.columns--table_table {
gap: 54px;
}
.gb--styles .wp-block-columns.columns--text_image,
.gb--styles .wp-block-columns.columns--image_text {
gap: 32px;
}
.gb--styles .wp-block-columns.columns--double_list,
.gb--styles .wp-block-columns.columns--double_text {
gap: 0;
}
.gb--styles .wp-block-columns.columns--double_list .wp-block-column:last-child,
.gb--styles .wp-block-columns.columns--double_text .wp-block-column:last-child {
padding-top: 0;
}
}
@media (max-width: 450px) {
.gb--styles .wp-block-columns.columns--text_image,
.gb--styles .wp-block-columns.columns--image_text {
gap: 24px;
}
}
/**
* SECTION HEADER WITH PHOTO
* default - gradient background
* .section_header--has_image - header has image
* .section_header--m_object - image with object, horizontal and vertical, reveal on mobile
* .section_header--m_abstract - abstact image, cover with filter on mobile
* .section_header--m_gradient - use gradient on mobile
*/
.section--header {
position: relative;
background-image: linear-gradient(320deg, #006432 0%, #3882A6 100%);
background-size: cover;
background-repeat: no-repeat;
background-position: top right;
min-height: 200px;
}
.section--header::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
width: 70%;
background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23282819'/%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
background-position: center right;
}
.section_header--container {
padding: 56px 0;
}
.section_header--content {
width: 70%;
}
.section_header--content h1 {
color: var(--Neutrals-White-Sand);
line-height: 1.1;
}
.section_header--content p {
margin-top: 28px;
color: var(--Neutrals-White-Sand);
}
.section_header--content .buttons--container {
margin-top: 42px;
}
.section--header.section_header--has_image::before {
display: none;
}
.section_header--has_image .section_header--content {
display: block;
width: 50%;
padding: 32px 46px 42px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(60px);
}
@media (max-width: 1280px) {
.section_header--content {
width: 100%;
}
.section_header--has_image .section_header--content {
width: 75%;
}
.section_header--m_object .section_header--content {
width: 50%;
}
}
@media (max-width: 1024px) {
.section_header--container {
padding: 56px 0;
}
.section_header--has_image .section_header--content {
width: 100%;
padding: 28px 36px 36px;
}
.section_header--m_object .section_header--content {
width: 50%;
}
}
@media (max-width: 768px) {
.section--header .section--viewport {
padding-left: 0;
padding-right: 0;
}
.section_header--container {
padding-top: 0;
padding-bottom: 0;
}
.section_header--content,
.section_header--has_image .section_header--content {
padding: 42px 32px;
}
.section_header--content h1 {
font-size: 52px;
}
.section_header--content .buttons--container {
margin-top: 36px;
}
.section--header.section_header--m_gradient {
background-image: linear-gradient(320deg, #006432 0%, #3882A6 100%);
}
.section--header.section_header--m_gradient::before {
display: block;
}
.section--header.section_header--m_gradient .section_header--content {
background: none;
backdrop-filter: none;
}
.section_header--m_object.section--header {
background-position: center bottom;
}
.section_header--m_object .section_header--container {
padding-bottom: 320px;
}
.section_header--m_object .section_header--content {
width: 100%;
padding-bottom: 36px;
}
}
@media (max-width: 450px) {
.section_header--content,
.section_header--has_image .section_header--content {
padding: 36px 24px 42px;
}
.section_header--content h1 {
font-size: 46px;
}
.section_header--content p {
font-size: 14px;
line-height: 1.7em;
}
.section_header--m_object .section_header--container {
padding-bottom: 280px;
}
.section_header--m_object .section_header--content {
padding-bottom: 32px;
}
}
/**
* Warranty Terms
*/
.gb--warranty h3,
.gb--sale_conditions h3 {
margin-top: 1.7em;
}
.gb--warranty .wp-block-group__inner-container,
.gb--sale_conditions .wp-block-group__inner-container {
max-width: 1024px;
}
.gb--sale_conditions .group--shift {
margin-left: 2em;
}
.gb--sale_conditions ul.list--none li::before {
display: none;
}
li ul {
margin-top: 0.4em;
margin-bottom: 1em;
}
li ul li {
padding-left: 48px;
}
li ul li::before {
height: 2px;
width: 10px;
left: 24px;
top: 0.75em;
border-radius: 1px;
}
/* ex-poster */
/**
* SECTION HEADER WITH PHOTO
*/
.section--poster {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center right;
}
/** Applications */
@media (min-width: 769px) {
.single-applications .section--poster {
min-height: 320px;
}
}
@media (min-width: 1025px) {
.single-applications .section--poster {
min-height: 440px;
}
}
@media (min-width: 1281px) {
.single-applications .section--poster {
min-height: 500px;
}
}
/** Company */
@media (min-width: 769px) {
.poster--company .section--poster,
.poster--company.section--poster {
min-height: 500px;
}
}
.poster--bg_green {
background-image: linear-gradient(320deg, #006432 0%, #3882A6 100%);
}
.poster--bg_sand {
background-image: linear-gradient(140deg, #F7F6F2 0%, #E0E0D1 100%);
}
.poster--bg_image.poster--text_white {
background-color: var(--Secondary-Middle-Electro);
}
.poster--bg_image.poster--text_black,
.poster--bg_image.poster--text_green {
background-color: var(--Neutrals-Light-Sand);
}
.section--poster::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
width: 70%;
background-size: cover;
background-repeat: no-repeat;
background-position: right center;
}
.poster--bg_green::before {
background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23282819'/%3E%3C/svg%3E");
}
.poster--bg_sand::before {
background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23B4B4A2'/%3E%3C/svg%3E");
}
.poster--bg_image::before {
display: none;
}
.section--poster .poster--viewport {
position: relative;
}
.section--viewport_small .poster--viewport {
width: 1072px;
max-width: 100%;
}
.section--container_width .poster--viewport {
padding-left: 64px;
padding-right: 64px;
}
.poster--container {
padding: 56px 0 64px;
}
.poster--has_image .poster--container {
padding: 56px 0;
}
.poster--content {
width: 70%;
}
.poster--bg_image .poster--content {
width: 50%;
}
.section--viewport_small .poster--bg_image .poster--content {
width: 70%;
}
.section--viewport_small .poster_image--object .poster--content {
width: 50%;
}
.poster--textbg_white .poster--content {
padding: 32px 46px 42px;
background: var(--Neutrals-White);
}
.poster--textbg_blur .poster--content {
padding: 32px 46px 42px;
backdrop-filter: blur(60px);
}
.poster--bg_image.poster--textbg_blur .poster--content {
background: rgba(255, 255, 255, 0.05);
}
.poster--bg_green.poster--textbg_blur .poster--content {
background: rgba(255, 255, 255, 0.08);
}
.poster--bg_sand.poster--textbg_blur .poster--content {
background: rgba(255, 255, 255, 0.3);
}
.poster--content h1 {
color: var(--Neutrals-White);
line-height: 1.1;
}
.poster--content p {
margin-top: 28px;
color: var(--Neutrals-White-Sand);
}
.poster--text_black .poster--content h1 {
color: var(--Neutrals-Black);
}
.poster--text_black .poster--content p {
color: var(--Neutrals-Dark-Grey);
}
.poster--text_green .poster--content h1 {
color: var(--Primary-Green);
}
.poster--text_green .poster--content p {
color: var(--Neutrals-Dark-Grey);
}
.poster--content .buttons--container {
margin-top: 42px;
}
@media (max-width: 1512px) {
.section--viewport_small .poster--viewport {
width: 1072px;
margin: 0 auto;
}
}
@media (max-width: 1280px) {
.section--poster .poster--content {
width: 75%;
}
.poster--textbg_no .poster--content {
width: 100%;
}
.poster_image--object .poster--content {
width: 50%;
}
}
@media (max-width: 1024px) {
.section--container_width .poster--viewport {
padding-left: 48px;
padding-right: 48px;
}
.poster--content h1 br {
display: none;
}
.poster--textbg_white .poster--content,
.poster--textbg_blur .poster--content {
padding: 28px 36px 36px;
}
.section--poster .poster--content {
width: 100%;
}
.poster_image--object .poster--content {
width: 60%;
}
}
@media (max-width: 768px) {
.section--poster .poster--viewport {
padding-left: 0;
padding-right: 0;
width: 100%;
}
.section--poster .poster--container {
padding-top: 0;
padding-bottom: 0;
}
.section--poster .poster--content {
padding-top: 38px;
padding-bottom: 46px;
padding-left: 32px;
padding-right: 32px;
}
/* .section--poster:not(.poster--textbg_no) .poster--content {
padding-left: 32px;
padding-right: 32px;
} */
.poster--content h1 {
font-size: 52px;
}
.poster--content .buttons--container {
margin-top: 36px;
}
.section--poster.poster_scenario--gradient {
background-image: linear-gradient(320deg, #006432 0%, #3882A6 100%);
}
.section--poster.poster_scenario--gradient::before {
background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23282819'/%3E%3C/svg%3E");
display: block;
}
.section--poster.poster_scenario--gradient .poster--content {
background: none;
backdrop-filter: none;
}
.section--poster {
background-position: center bottom;
}
.poster--has_image .poster--content {
width: 100%;
padding-bottom: 36px;
}
.section--viewport_small .poster--has_image .poster--content {
width: 100%;
}
.poster--has_image.poster_scenario--object .poster--container {
padding-bottom: 300px;
}
}
@media (max-width: 450px) {
.section--poster .poster--content {
padding-top: 36px;
padding-bottom: 42px;
padding-left: 24px;
padding-right: 24px;
}
/* .section--poster:not(.poster--textbg_no) .poster--content {
padding-left: 24px;
padding-right: 24px;
} */
.poster--content h1 {
font-size: 46px;
}
.poster--content p {
font-size: 14px;
line-height: 1.7em;
}
.poster--has_image .poster--content {
padding-bottom: 32px;
}
.poster--has_image.poster_scenario--object .poster--container {
padding-bottom: 260px;
}
}
/** Sustainability */
.section--viewport_small .poster--viewport_large .poster--viewport {
width: 1512px;
}
/* ex-applications */
/**
* APPLICATIONS ITEM
*/
.section--app_content {
padding-top: 60px;
padding-bottom: 60px;
background: var(--Neutrals-White-Sand);
}
.section--app_content .accordition--item:not(.accordition--open) .accordition--head,
.section--app_content .accordition--item:not(.accordition--open) ~ .accordition--item.accordition--open .accordition--head {
border-top: 1px solid var(--Neutrals-Medium-Sand);
}
.section--app_content .accordition--item:not(.accordition--open):last-child .accordition--head {
border-bottom: 1px solid var(--Neutrals-Medium-Sand);
}
.section--app_content .cite--item {
background-color: var(--Neutrals-White);
}
.section--app_content .cite--item .button--white {
background-color: var(--Neutrals-White-Sand);
}
.section--app_content .cite--item .button--white::after {
background-color: var(--Neutrals-Light-Sand);
}
@media (hover: hover) {
.section--app_content .cite--item .button--white:hover:after {
background-color: var(--Neutrals-Sand);
}
}
.section--app_content a.prod_list--item {
background: var(--Neutrals-White);
}
.section--app_siblings {
padding-top: 80px;
padding-bottom: 60px;
}
/**
* APPLICATIONS PAGER
*/
.section--apps_pager {
text-align: center;
margin-bottom: 60px;
margin-top: -30px;
}
/**
* APPLICATIONS CATEGORY
*/
.section--app_category {
margin-top: 60px;
margin-bottom: 60px;
}
/**
* APPLICATIONS CATALOG
*/
.section--apps_catalog {
margin-top: 108px;
margin-bottom: 80px;
}
.section--apps_catalog.section--has_tabs {
margin-top: 60px;
}
.apps--section_spacer {
height: 80px;
}
@media (max-width: 768px) {
.section--apps_catalog {
margin-top: 80px;
margin-bottom: 80px;
}
.apps--section_spacer {
height: 60px;
}
}
@media (max-width: 450px) {
.section--apps_catalog {
margin-top: 60px;
margin-bottom: 60px;
}
.apps--section_spacer {
height: 40px;
}
}
/** Headings */
.content--product h2 {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 36px;
}
.content--product h3 {
margin-bottom: 24px;
}
.content--product h4 {
margin-bottom: 16px;
}
.content--product h5 {
margin-bottom: 8px;
}
@media (max-width: 768px) {
.content--product h2 {
margin-bottom: 36px;
}
}
/** Paragraphs */
.content--product p {
margin-bottom: 1em;
}
/** Lists */
.content--product ul {
padding: 0;
margin: 0;
list-style: none;
}
.content--product ul li {
position: relative;
padding-left: 36px;
margin-bottom: 1em;
}
.content--product ul li::before {
content: "";
height: 14px;
width: 14px;
position: absolute;
left: 0;
top: 5px;
border-radius: 4px;
background-color: var(--Neutrals-Light-Sand);
}
.content--product ul.features--bullets li::before {
background-color: var(--Primary-Middle-Green);
}
.content--product ul ul {
margin-top: 0.5em;
}
.content--product ul ul li {
margin-bottom: 0.5em;
}
.content--product ul ul li::before {
height: 3px;
top: 11px;
border-radius: 1px;
}
.content--product ol {
padding: 0;
margin: 0;
list-style: none;
counter-reset: ex-products-counter;
}
.content--product ol li {
position: relative;
padding-left: 1.8em;
margin-bottom: 0.5em;
counter-increment: ex-products-counter;
}
.content--product ol li::before {
content: counter(ex-products-counter) ". ";
position: absolute;
left: 0;
}
/** Links ========= DEPRECIATE ========== */
.content--product a {
text-decoration: underline dotted;;
/** background-color: transparent; */
}
/** Margins for blocks */
.content--product .margin--1em {
margin-bottom: 1em;
}
.content--product .margin--1p5em {
margin-bottom: 1.5em;
}
.content--product .margin--2em {
margin-bottom: 2em;
}
.content--product .margin--3em {
margin-bottom: 3em;
}
.content--product .margin--4em {
margin-bottom: 4em;
}
/** Hide content */
@media (max-width: 1024px) {
.content--product .hide--1024 {
display: none;
}
}
/** WP blocks */
.content--product .wp-block-columns {
gap: 80px;
}
.content--product .wp-block-columns > .wp-block-column {
flex-basis: 30% !important;
}
.content--product .wp-block-columns.columns--double_list .wp-block-column:last-child {
padding-top: 92px;
}
@media (max-width: 1024px) {
.content--product .wp-block-columns.columns--text_image {
flex-wrap: wrap !important;
gap: 48px;
}
.content--product .wp-block-columns.columns--text_table,
.content--product .wp-block-columns.columns--table_table {
flex-wrap: wrap !important;
gap: 24px;
}
.content--product .columns--text_image .wp-block-column,
.content--product .columns--text_table .wp-block-column,
.content--product .columns--table_table .wp-block-column {
flex-basis: 100% !important;
}
.content--product .wp-block-columns.columns--swap .wp-block-column:last-child {
order: 1;
}
.content--product .wp-block-columns.columns--swap .wp-block-column:first-child {
order: 2;
}
}
@media (max-width: 781px) {}
@media (max-width: 768px) {
.content--product .wp-block-columns {
flex-wrap: wrap !important;
gap: 0;
}
.content--product .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
}
.content--product .wp-block-columns.columns--list_list {
gap: 54px;
}
.content--product .wp-block-columns.columns--text_image {
gap: 32px;
}
.content--product .wp-block-columns.columns--double_list {
gap: 0;
}
.content--product .wp-block-columns.columns--double_list .wp-block-column:last-child {
padding-top: 0;
}
}
@media (max-width: 450px) {
.content--product .wp-block-columns.columns--text_image {
gap: 24px;
}
}
/** Features block */
.content--product .features--bullets ul li::before {
background-color: var(--Primary-Middle-Green);
}
.content--product .features--column h2,
.content--product .features--column ul li {
color: var(--Primary-Green);
}
.content--product .features--column ul li::before {
background-color: var(--Primary-Light-Green);
}
.content--product .features--block .wp-block-group {
margin: -40px;
width: calc(100% + 80px);
height: calc(100% + 80px);
border-radius: 20px;
background-color: var(--Neutrals-White-Sand);
background-image: url("https://ekspla.com/wp-content/themes/ekspla/images/apps-category-features.svg");
background-size: cover;
}
.content--product .features--block .wp-block-group__inner-container {
padding: 40px;
}
.content--product .features--block ul li::before {
background-color: var(--Neutrals-Dark-Sand);
}
/**
* Header block
*/
.section--product_head {
padding-top: 48px;
padding-bottom: 48px;
background: var(--Gradient-Product);
}
@media (max-width: 1024px) {
.section--product_head {
padding-top: 36px;
padding-bottom: 36px;
}
}
@media (max-width: 450px) {
.section--product_head {
padding-top: 24px;
padding-bottom: 24px;
}
}
.product--hero {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.product--hero_text {
width: 50%;
padding-right: 40px;
}
/** Breadthumbs */
.path--container {
display: inline-flex;
flex-wrap: wrap;
gap: 0 6px;
align-items: center;
--SVG-Breadcrumbs-Arrow: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 9L7.5 6L4.5 3' stroke='%23C6C6B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.path--container a {
text-decoration: none;
}
.path--item {
display: inline-block;
position: relative;
color: var(--Neutrals-Dark-Sand);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.2px;
white-space: nowrap;
padding-right: 20px;
}
.path--item:not(:last-child)::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 12px;
height: 24px;
background-position: center;
background-repeat: no-repeat;
background-image: var(--SVG-Breadcrumbs-Arrow);
}
.path--item:last-child {
color: var(--Neutrals-Grey);
padding-right: 0;
}
@media (hover: hover) {
.path--item:hover {
color: var(--Neutrals-Dark-Grey);
}
}
.product--hero_text h1 {
color: var(--Primary-Green);
margin-top: 36px;
margin-bottom: 16px;
line-height: 1;
}
.product--hero_text h1 small {
font-size: 85%;
letter-spacing: -0.03em;
}
.product--hero .product--subtitle {
color: var(--Neutrals-Dark-Grey);
font-size: 16px;
font-weight: 600;
margin-bottom: 48px;
}
.product--hero_buttons {
margin-top: 48px;
}
.product--hero_image {
width: 50%;
padding-left: 40px;
}
.product--hero_fancy {
display: block;
}
.product--hero_fancy img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 1280px) {
.product--hero_text {
padding-right: 25px;
}
.product--hero_image {
padding-left: 25px;
}
.product--hero_fancy {
margin-right: -64px;
}
.product--hero_buttons {
margin-right: -100px;
}
}
@media (max-width: 1024px) {
.product--hero {
flex-direction: column;
}
.product--hero_text {
width: 100%;
padding-right: 0;
margin-bottom: 60px;
}
.product--hero_image {
width: 100%;
padding-left: 0;
}
.product--hero_fancy {
margin-right: 0;
}
.product--hero_buttons {
margin-right: 0;
}
}
@media (max-width: 550px) {
.product--hero_text {
margin-bottom: 46px;
}
.product--hero_fancy {
margin-left: -32px;
margin-right: -32px;
}
.product--hero_buttons .button--item {
width: 100%;
}
}
@media (max-width: 450px) {
.product--hero_text h1 {
font-size: 56px;
}
.product--hero_buttons {
margin-top: 36px;
}
.product--hero_image {
margin-bottom: 12px;
}
}
/**
* Content block
*/
.section--product_content {
margin-bottom: 100px;
}
@media (max-width: 630px) {
.section--product_content {
margin-bottom: 80px;
}
}
/**
* Footer block
*/
.section--product_footer {
margin-top: 130px;
background: var(--Neutrals-White-Sand);
}
@media (max-width: 1024px) {
.section--product_footer {
margin-top: 100px;
}
}
@media (max-width: 630px) {
.section--product_footer {
margin-top: 80px;
}
}
/** Related section */
.section--related {
padding-top: 94px;
padding-bottom: 100px;
}
.section--related a.prod_list--item {
background: var(--Neutrals-White);
}
/**
* PRODUCTS CATALOG
*/
/** Header */
.section--catalog_header {
background-color: var(--Primary-Dark-Green);
background-size: cover;
background-repeat: no-repeat;
background-position: top right;
/* background-position: 50% center; */
}
.catalog--header_container {
padding: 72px 0;
}
.catalog--header_content {
display: inline-block;
max-width: 50%;
min-height: 200px;
padding: 48px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(60px);
}
.catalog--header_content h1 {
color: var(--Neutrals-White-Sand);
line-height: 1.1;
}
.catalog--header_content p {
margin-top: 32px;
color: var(--Neutrals-White-Sand);
}
.catalog--header_content .buttons--container {
margin-top: 48px;
}
@media (max-width: 1024px) {
.catalog--header_container {
padding: 56px 0;
}
.catalog--header_content {
padding: 36px;
}
}
@media (max-width: 768px) {
.section--catalog_header {
background-position: center bottom;
}
.section--catalog_header .section--viewport {
padding-left: 0;
padding-right: 0;
}
.catalog--header_container {
padding-top: 0;
padding-bottom: 320px;
}
.catalog--header_content {
max-width: 100%;
padding: 48px 32px 32px;
}
.catalog--header_content h1 {
font-size: 52px;
}
.catalog--header_content .buttons--container {
margin-top: 36px;
}
}
@media (max-width: 450px) {
.catalog--header_container {
padding-bottom: 280px;
}
.catalog--header_content {
padding: 36px 24px 24px;
}
.catalog--header_content h1 {
font-size: 46px;
}
}
/** Categories section */
.catalog--subtitle {
color: var(--Neutrals-Dark-Grey);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 12px;
}
.catalog--title_wrap {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.catalog--title_link {
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 2.5em;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/** Products categories */
.products_catalog--categories_list {
display: flex;
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
margin-top: 26px;
}
.products_catalog--category_box {
flex: 0 0 auto;
width: 33.33333%;
padding-left: 15px;
padding-right: 15px;
padding-top: 30px;
}
a.products_catalog--category {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 32px 32px 64px;
text-decoration: none;
font-weight: 400;
color: var(--Neutrals-Grey);
background: var(--Neutrals-White-Sand);
transition: background-color 0.2s ease 0s;
}
.products_catalog--category_icon {
width: 56px;
height: 56px;
margin-bottom: 32px;
background-size: contain;
background-repeat: no-repeat;
}
.products_catalog--category h4 {
margin-bottom: 24px;
}
.products_catalog--category p {
margin-bottom: 0.5em;
}
.products_catalog--button {
position: absolute;
bottom: 24px;
right: 24px;
opacity: 0;
}
@media (hover: hover) {
a.products_catalog--category:hover {
color: var(--Neutrals-Dark-Grey);
background: var(--Neutrals-Light-Sand);
}
a.products_catalog--category:hover h4 {
color: var(--Neutrals-Black);
}
a.products_catalog--category:hover .products_catalog--button {
opacity: 1;
}
}
/* ex-tabs-control */
/** Scroll control */
.ex_ctrl--scroll_content {
width: 100%;
overflow-x: scroll;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.ex_ctrl--scroll_content::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.ex_ctrl--scroll_arrow {
position: absolute;
display: none;
width: 40px;
top: 0;
bottom: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
background: var(--Neutrals-Light-Sand);
}
.ex_ctrl--scroll_arrow.ex_ctrl--scroll_visible {
display: block;
}
.ex_ctrl--scroll_arrow div {
content: "";
position: absolute;
width: 100%;
height: 100%;
}
.ex_ctrl--scroll_arrow > div {
left: -100%;
background: linear-gradient(to right, rgba(230,230,215,0), rgba(230,230,215,1));
}
.ex_ctrl--scroll_arrow::after {
position: absolute;
content: "";
top: 15px;
right: 0;
width: 32px;
height: 32px;
border: none;
border-radius: 16px;
background-color: var(--Neutrals-Sand);
background-position: center;
background-repeat: no-repeat;
/*
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.ex_ctrl--scroll_right {
right: 0;
}
.ex_ctrl--scroll_left {
left: 0;
transform: scaleX(-1);
}
@media (hover: hover) {
.ex_ctrl--scroll_arrow:hover::after {
background-color: var(--Neutrals-White);
}
}
/** EX Tabs Controller */
.ex_ctrl--block {
top: 64px;
position: sticky;
width: 100%;
padding-top: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
z-index: 1500;
}
.ex_ctrl--block.ex_ctrl--sticked {
padding-top: 64px;
}
.ex_ctrl--block.ex_ctrl--title_top.ex_ctrl--sticked {
padding-top: 107px;
}
.ex_ctrl--block a {
text-decoration: none;
}
.ex_ctrl--shadow {
position: fixed;
top: 117px;
width: 100%;
height: 10px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
display: none;
z-index: 1400;
}
.ex_ctrl--title_top .ex_ctrl--shadow {
top: 160px;
}
.ex_ctrl--sticked .ex_ctrl--shadow {
display: block;
}
.table_header--on_top .ex_ctrl--shadow {
display: none;
}
.ex_ctrl--container {
background: var(--Neutrals-Light-Sand);
z-index: 1500;
overflow-x: visible;
width: 100%;
top: 64px;
height: 64px;
}
.ex_ctrl--block.ex_ctrl--title_top .ex_ctrl--container {
height: 107px;
}
.ex_ctrl--sticked .ex_ctrl--container {
position: fixed;
}
.ex_ctrl--ribbon_white:not(.ex_ctrl--sticked) .ex_ctrl--container {
background: var(--Neutrals-White);
}
/* Tabs controller sections */
.ex_ctrl--wrap {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
position: relative;
}
.ex_ctrl--title_top .ex_ctrl--wrap {
flex-wrap: wrap;
}
/* Title section */
.ex_ctrl--title {
display: none;
flex: 0 0 auto;
padding-top: 17px;
padding-bottom: 21px;
padding-right: 64px;
font-size: 26px;
font-weight: 300;
font-style: normal;
line-height: 26px;
letter-spacing: -0.02em;
white-space: nowrap;
color: var(--Neutrals-Black);
visibility: hidden;
}
.ex_ctrl--title_ribbon .ex_ctrl--title {
display: block;
}
.ex_ctrl--title_top .ex_ctrl--title {
padding-bottom: 0;
width: 100%;
}
/* Tabs section, scrolled */
.ex_ctrl--tabs_container {
display: none;
flex: 1 1 auto;
position: relative;
width: 20%;
visibility: hidden;
padding-left: 40px;
padding-right: 40px;
}
.ex_ctrl--tabs_ribbon .ex_ctrl--tabs_container {
display: block;
}
.ex_ctrl--tabs_ribbon:not(.ex_ctrl--title_ribbon) .ex_ctrl--tabs_container {
padding-left: 0;
}
.ex_ctrl--tabs {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.ex_ctrl--tab_item {
display: block;
flex: 0 0 auto;
padding: 20px;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.08em;
text-decoration: none;
white-space: nowrap;
text-transform: uppercase;
transition: color 0.2s ease;
}
.ex_ctrl--tabs_ribbon:not(.ex_ctrl--title_ribbon) .ex_ctrl--tab_item.ex_ctrl--tab_first {
padding-left: 2px;
}
.ex_ctrl--block .ex_ctrl--tab_item {
color: var(--Neutrals-Light-Grey);
}
.ex_ctrl--tab_item.ex_ctrl--tab_active {
color: var(--Neutrals-Black);
}
.ex_ctrl--tab_item.ex_ctrl--link_cta {
display: none;
padding-top: 8px;
padding-bottom: 8px;
}
.ex_ctrl--cta_tabs.ex_ctrl--cta_visible .ex_ctrl--link_cta,
.ex_ctrl--cta_burger.ex_ctrl--cta_visible .ex_ctrl--link_cta {
display: block;
}
.ex_ctrl--cta_burger .ex_ctrl--link_cta .button--send_request {
margin: 0;
}
.ex_ctrl--cta_burger .ex_ctrl--tab_item.ex_ctrl--link_cta {
padding: 15px 12px 13px;
text-align: center;
}
@media (hover: hover) {
.ex_ctrl--tab_item:hover {
color: var(--Primary-Light-Green);
}
.ex_ctrl--tab_item.ex_ctrl--tab_active:hover {
color: var(--Neutrals-Black);
}
}
/* Burger section */
.ex_ctrl--burger_container {
display: none;
flex: 1 1 auto;
position: relative;
width: 10%;
cursor: pointer;
}
.ex_ctrl--burger_mode .ex_ctrl--burger_container {
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
margin-right: -3px;
}
.ex_ctrl--burger_target {
flex: 1 1 auto;
width: 100%;
}
.ex_ctrl--burger_target {
padding: 20px 0 20px 0;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.08em;
white-space: nowrap;
text-transform: uppercase;
color: var(--Neutrals-Black);
}
.ex_ctrl--title_ribbon .ex_ctrl--burger_target {
text-align: right;
}
.ex_ctrl--title_top .ex_ctrl--burger_target {
text-align: left;
}
.ex_ctrl--burger_icon {
flex: 0 0 auto;
width: 68px;
padding: 16px 0 16px 35px;
}
.ex_ctrl--burger_icon span {
display: block;
width: 32px;
height: 32px;
border: none;
border-radius: 16px;
background-color: var(--Neutrals-White);
background-position: center;
background-repeat: no-repeat;
/*
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23282819;%7D %3C/style%3E%3Ccircle class='st0' cx='3.266' cy='10' r='2'/%3E%3Ccircle class='st0' cx='10.223' cy='10' r='2'/%3E%3Ccircle class='st0' cx='16.734' cy='10' r='2'/%3E%3C/svg%3E%0A");
transition: transform .3s ease-in-out 0s;
}
.ex_ctrl--ribbon_white:not(.ex_ctrl--sticked) .ex_ctrl--burger_icon span {
background-color: var(--Neutrals-Light-Sand);
}
@media (hover: hover) {
.ex_ctrl--burger_container:hover .ex_ctrl--burger_icon span {
background-color: var(--Neutrals-Sand);
}
}
.ex_ctrl--burger_pointer {
display: none;
position: absolute;
height: 15px;
width: 15px;
top: -13px;
right: 32px;
background-position: center;
background-repeat: no-repeat;
/*
*/
background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,0L0,15h15V0z' fill='%23F7F6F2'/%3E%3C/svg%3E");
}
.ex_ctrl--burger_mode .ex_ctrl--burger_pointer {
display: block;
}
@media (max-width: 450px) {
.ex_ctrl--burger_pointer {
right: 24px;
}
}
.ex_ctrl--burger_mode .ex_ctrl--tabs_container {
display: none;
position: absolute;
width: auto;
right: -16px;
top: 64px;
background: var(--Neutrals-White-Sand);
border-radius: 16px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.ex_ctrl--burger_mode.ex_ctrl--burger_open .ex_ctrl--tabs_container {
display: block;
padding-left: 0;
padding-right: 0;
}
.ex_ctrl--title_top.ex_ctrl--burger_mode .ex_ctrl--tabs_container {
top: 107px;
}
.ex_ctrl--burger_mode .ex_ctrl--tabs_container .ex_ctrl--scroll_arrow {
display: none;
}
.ex_ctrl--burger_mode .ex_ctrl--tabs {
display: block;
}
.ex_ctrl--burger_mode .ex_ctrl--tab_item {
padding: 15px 48px 13px;
}
.ex_ctrl--burger_mode .ex_ctrl--tab_item:not(:first-child) {
border-top: 1px solid var(--Neutrals-Medium-Sand);
}
@media (max-width: 450px) {
.ex_ctrl--burger_mode .ex_ctrl--tabs_container {
right: -9px;
}
}
/* CTA section */
.ex_ctrl--cta_container {
display: none;
flex: 0 0 auto;
padding: 8px 0 8px 64px;
visibility: hidden;
margin-right: -13px;
}
.ex_ctrl--cta_ribbon.ex_ctrl--cta_visible .ex_ctrl--cta_container {
display: block;
}
@media (max-width: 1100px) {
.ex_ctrl--cta_container {
margin-right: -10px;
}
}
/** EX Tabs content */
div.ex_ctrl--item_container {
position: relative;
display: none;
padding-top: 80px;
z-index: 10;
font-weight: 400;
}
.ex_ctrl--item_mask {
display: none;
}
.ex_ctrl--item_masked .ex_ctrl--item_mask {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: var(--Neutrals-White);
opacity: 0.6;
z-index: 20;
display: block;
}
.ex_ctrl--item_container.ex_ctrl--item_active {
display: block;
}
@media (max-width: 1024px) {
div.ex_ctrl--item_container {
padding-top: 60px;
}
}
@media (max-width: 450px) {
div.ex_ctrl--item_container {
padding-top: 50px;
}
}
/* ex-prod_apps */
/* Catalog head block */
/* ================== */
.catalog--header {
margin-bottom: 48px;
}
.catalog--subtitle {
color: var(--Neutrals-Dark-Grey);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 12px;
}
.catalog--title_wrap {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.catalog--header h2 {
font-size: 56px;
line-height: 1.15;
letter-spacing: -0.05em;
}
.catalog--title_link {
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 2.5em;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.catalog--footer {
display: none;
text-align: center;
}
@media (max-width: 768px) {
.catalog--header {
margin-bottom: 38px;
}
.catalog--header h2 {
font-size: 52px;
}
}
@media (max-width: 550px) {
.catalog--title_wrap .catalog--title_link {
display: none;
}
.catalog--footer {
display: block;
}
}
@media (max-width: 450px) {
.catalog--subtitle {
margin-bottom: 6px;
}
.catalog--header h2 {
font-size: 48px;
}
}
/* Products block - default */
/* ======================== */
.prod_list--container {
display: flex;
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.prod_list--item_box {
width: 33.33333%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
flex: 0 0 auto;
}
.prod_list--item {
width: 100%;
height: 100%;
}
a.prod_list--item {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
transition: background-color .2s ease, color .2s ease;
background: var(--Neutrals-White-Sand);
}
.prod_list--data {
position: relative;
width: 100%;
flex-grow: 1;
padding: 32px 32px 42px;
color: var(--Neutrals-Dark-Grey);
}
.prod_list--data .prod_list--title {
font-size: 28px;
line-height: 1.2em;
margin-bottom: 0.6em;
color: var(--Neutrals-Black);
}
.prod_list--data .prod_list--subtitle {
font-weight: 400;
line-height: 1.4em;
margin-bottom: 1.8em;
}
.prod_list--item .prod_list--description p {
font-size: 14px;
font-weight: 400;
line-height: 1.4em;
margin-bottom: 0.5em;
color: var(--Neutrals-Dark-Grey);
}
.prod_list--item .prod_list--button {
display: none;
position: absolute;
bottom: 16px;
right: 16px;
}
.prod_list--image {
width: 100%;
padding-top: 62.5%;
background-size: cover;
flex-grow: 0;
}
@media (hover: hover) and (pointer: fine) {
a.prod_list--item:hover {
background: var(--Neutrals-Light-Sand);
}
a.prod_list--item:hover .prod_list--data > * {
color: var(---Neutrals-Dark-Grey);
}
a.prod_list--item:hover .prod_list--title {
color: var(--Neutrals-Black);
}
a.prod_list--item:hover .prod_list--button {
display: block;
}
}
/* Products lists - default */
.prod_list--container .prod_list--item ul {
padding: 0;
margin: 0;
list-style: none;
}
.prod_list--container .prod_list--item ul li {
position: relative;
font-size: 15px;
font-weight: 400;
line-height: 1.4em;
color: var(--Neutrals-Dark-Grey);
}
.prod_list--container .prod_list--item ul li::before {
position: absolute;
content: "";
left: 0;
}
/* Products lists - default + SEO title */
.prod_list--mode_seo_title .prod_list--data .prod_list--title {
margin-bottom: 0;
}
.prod_list--mode_seo_title .prod_list--data .prod_list--subtitle {
display: block;
font-size: 16px;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
line-height: 1.4em;
margin-top: 18px;
margin-bottom: 28px;
color: var(--Neutrals-Dark-Grey);
}
/* Products lists - default + bullets */
.prod_list--bullets .prod_list--item ul li {
padding-left: 32px;
margin-bottom: 1em;
}
.prod_list--bullets .prod_list--item ul li::before {
height: 14px;
width: 14px;
top: 4px;
border-radius: 4px;
background-color: var(--Neutrals-Medium-Sand);
}
@media (hover: hover) and (pointer: fine) {
.prod_list--bullets.prod_list--sand_bg .prod_list--item:hover ul li::before {
background-color: var(--Neutrals-Sand);
}
}
/* Products lists - default + point */
.prod_list--points .prod_list--item ul li {
padding-left: 20px;
margin-bottom: 0.5em;
}
.prod_list--points .prod_list--item ul li::before {
height: 8px;
width: 8px;
top: 7px;
border-radius: 2px;
background-color: var(--Neutrals-Sand);
}
@media (hover: hover) and (pointer: fine) {
.prod_list--points.prod_list--sand_bg .prod_list--item:hover ul li::before {
background-color: var(--Neutrals-Dark-Sand);
}
}
/** Products block - horizontal */
.prod_list--mode_horizontal .prod_list--item_box {
width: 100%;
}
.prod_list--mode_horizontal a.prod_list--item {
flex-direction: row;
align-items: stretch ;
flex-wrap: nowrap;
}
.prod_list--mode_horizontal .prod_list--data {
width: 10%;
flex-grow: 1;
order: 2;
padding: 32px 32px 42px 60px;
}
.prod_list--mode_horizontal .prod_list--title {
font-size: 42px;
margin-bottom: 0.2em;
}
.prod_list--mode_horizontal .prod_list--subtitle {
font-size: 18px;
margin-bottom: 1.4em;
}
.prod_list--mode_horizontal .prod_list--image {
width: auto;
height: 100%;
flex-grow: 1;
padding-top: 0;
order: 1
}
@media (max-width: 1024px) {
.prod_list--mode_horizontal .prod_list--title {
font-size: 28px;
margin-bottom: 0.4em;
}
.prod_list--mode_horizontal .prod_list--subtitle {
font-size: inherit;
margin-bottom: 1.8em;
}
}
@media (max-width: 768px) {
.prod_list--mode_horizontal .prod_list--data {
padding: 32px 32px 42px 36px;
}
}
@media (max-width: 650px) {
.prod_list--mode_horizontal a.prod_list--item {
flex-direction: column;
align-items: flex-start ;
flex-wrap: wrap;
}
.prod_list--mode_horizontal .prod_list--data {
width: 100%;
flex-grow: 1;
order: 1;
padding: 32px 32px 42px 32px;
}
.prod_list--mode_horizontal .prod_list--title {
margin-bottom: 0.6em;
}
.prod_list--mode_horizontal .prod_list--image {
width: 100%;
height: auto;
flex-grow: 0;
padding-top: 62.5%;
order: 2
}
}
/** Products block - compact */
.prod_list--mode_compact .prod_list--data {
padding: 24px 72px 24px 24px;
}
.prod_list--mode_compact .prod_list--title {
font-size: 24px;
margin-bottom: 0;
}
/** Products block - home page */
.prod_list--mode_home a.prod_list--item {
display: block;
position: relative;
}
.prod_list--mode_home .prod_list--data {
padding: 18px 24px;
position: absolute;
bottom: 0;
background: linear-gradient(320deg, #0F9129 0%, #00413C 100%);;
}
.prod_list--mode_home .prod_list--title {
font-size: 20px;
font-weight: 300;
letter-spacing: -0.01em;
margin-bottom: 0;
color: var(--Neutrals-White);
}
.prod_list--mode_home .prod_list--button {
bottom: 22px;
}
@media (hover: hover) and (pointer: fine) {
.prod_list--mode_home a.prod_list--item:hover .prod_list--title {
color: var(--Neutrals-White);
}
}
/** Products block - catalog page */
.prod_list--mode_catalog .prod_list--image {
padding-top: 38%;
background-position: center 10%;
}
@media (max-width: 1280px) {
.prod_list--mode_catalog .prod_list--title {
font-size: 24px;
}
}
@media (max-width: 1024px) {
.prod_list--item_box {
width: 50%;
}
}
@media (max-width: 650px) {
.prod_list--item_box {
width: 100%;
padding-bottom: 50px;
}
.prod_list--mode_home .prod_list--item_box {
padding-bottom: 30px;
}
}
@media (max-width: 450px) {
.prod_list--container.prod_list--mode_default,
.prod_list--container.prod_list--mode_seo_title,
.prod_list--container.prod_list--mode_compact {
margin-left: -24px;
margin-right: -24px;
}
.prod_list--item_box {
padding-left: 0;
padding-right: 0;
}
.prod_list--mode_catalog .prod_list--data {
padding: 24px 24px 42px;
}
.prod_list--item_box:last-child {
padding-bottom: 32px;
}
.prod_list--data .prod_list--button {
right: 19px;
}
.prod_list--mode_home .prod_list--title {
font-weight: 400;
}
}
/* Applications categories block */
/* ============================== */
.apps_catalog--categories_list {
display: flex;
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
margin-top: 26px;
}
.apps_catalog--category_box {
flex: 0 0 auto;
width: 50%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
.apps_catalog--category {
position: relative;
width: 100%;
height: 100%;
padding: 48px 48px 80px 48px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.apps_catalog--industrial .apps_catalog--category {
background-color: var(--Primary-Light-Green);
/*
*/
background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='industrial'%3E%3ClinearGradient id='industrial_1' gradientUnits='userSpaceOnUse' x1='719.5345' y1='856.3425' x2='80.4655' y2='-56.3426'%3E%3Cstop offset='0' style='stop-color:%23006432'/%3E%3Cstop offset='1' style='stop-color:%2319AF23'/%3E%3C/linearGradient%3E%3Crect style='fill:url(%23industrial_1);' width='800' height='800'/%3E%3ClinearGradient id='industrial_2' gradientUnits='userSpaceOnUse' x1='512.603' y1='668.639' x2='29.8042' y2='-20.8692'%3E%3Cstop offset='0' style='stop-color:%23282819;stop-opacity:0.1'/%3E%3Cstop offset='1' style='stop-color:%23282819;stop-opacity:0'/%3E%3C/linearGradient%3E%3Cpath style='fill:url(%23industrial_2);' d='M0,0v800h325L649,0H0z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.apps_catalog--scientific .apps_catalog--category {
background-color: var(--Secondary-Blue);
/*
*/
background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='scientific'%3E%3ClinearGradient id='scientific_1' gradientUnits='userSpaceOnUse' x1='719.5345' y1='856.3425' x2='80.4655' y2='-56.3426'%3E%3Cstop offset='0' style='stop-color:%23006432'/%3E%3Cstop offset='1' style='stop-color:%233882A6'/%3E%3C/linearGradient%3E%3Crect style='fill:url(%23scientific_1);' width='800' height='800'/%3E%3ClinearGradient id='scientific_2' gradientUnits='userSpaceOnUse' x1='512.603' y1='668.639' x2='29.8042' y2='-20.8692'%3E%3Cstop offset='0' style='stop-color:%23282819;stop-opacity:0.1'/%3E%3Cstop offset='1' style='stop-color:%23282819;stop-opacity:0'/%3E%3C/linearGradient%3E%3Cpath style='fill:url(%23scientific_2);' d='M0,0v800h325L649,0H0z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.apps_catalog--title {
display: block;
}
.apps_catalog--title h3 {
font-size: 32px;
line-height: 1.2em;
letter-spacing: -0.02em;
color: var(--Neutrals-White);
margin-bottom: 16px;
}
.apps_catalog--button_container {
position: absolute;
width: 80px;
height: 80px;
bottom: 0;
right: 0;
}
.apps_catalog--title .apps_catalog--button {
position: absolute;
right: 24px;
bottom: 24px;
display: none;
}
.apps_catalog--category p {
color: var(--Neutrals-White);
opacity: 0.8;
}
.apps_catalog--category ul {
margin-top: 48px;
}
.apps_catalog--category ul li {
min-height: 40px;
padding-left: 0;
margin-bottom: 0;
margin-top: 24px;
display: flex;
align-items: center;
}
.apps_catalog--category ul li:before {
display: none;
}
.apps_catalog--category li a {
padding-left: 64px;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.3em;
letter-spacing: 0.005em;
color: var(--Neutrals-White);
}
.apps_catalog--category li a:before {
position: absolute;
content: "";
height: 40px;
width: 40px;
left: 0;
top: 50%;
transform: translateY(-50%);
border: 1px solid rgba(255, 255, 255, 0.06);
background-color: rgba(255, 255, 255, 0.05);
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.0;stroke-linecap:round;%7D %3C/style%3E%3Cline class='st0' x1='12.3' y1='10' x2='18.3' y2='10'/%3E%3Cline class='st0' x1='1.7' y1='10' x2='7.7' y2='10'/%3E%3Cline class='st0' x1='10' y1='7.7' x2='10' y2='1.7'/%3E%3Cline class='st0' x1='10' y1='18.3' x2='10' y2='12.3'/%3E%3Cline class='st0' x1='11.7' y1='8.3' x2='13.6' y2='6.4'/%3E%3Cline class='st0' x1='6.5' y1='13.6' x2='8.3' y2='11.7'/%3E%3Cline class='st0' x1='8.4' y1='8.3' x2='6.4' y2='6.5'/%3E%3Cline class='st0' x1='13.6' y1='13.5' x2='11.7' y2='11.7'/%3E%3C/svg%3E");
/*
*/
backdrop-filter: blur(60px);
}
@media (hover: hover) and (pointer: fine) {
.apps_catalog--title:hover .apps_catalog--button {
display: block;
}
.apps_catalog--category li a:hover::before {
border-color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.15);
}
}
@media (max-width: 1024px) {
.apps_catalog--category {
padding: 36px 36px 64px 36px;
}
.apps_catalog--category li a {
font-size: 18px;
}
}
@media (max-width: 650px) {
.apps_catalog--category_box {
width: 100%;
padding-bottom: 30px;
}
}
@media (max-width: 450px) {
.apps_catalog--category {
padding: 32px 32px 64px;
}
}
/* Applications block */
/* =================== */
.ex_apps--container {
display: flex;
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.ex_apps--columns_2 {
margin-left: -25px;
margin-right: -25px;
}
.ex_apps--item_box {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
flex: 0 0 auto;
}
.ex_apps--columns_2 .ex_apps--item_box {
width: 50%;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 50px;
}
.ex_apps--columns_3 .ex_apps--item_box {
width: 33.333333%;
}
.ex_apps--columns_4 .ex_apps--item_box {
width: 25%;
}
.ex_apps--item {
display: block;
width: 100%;
height: 100%;
position: relative;
}
a.ex_apps--item {
text-decoration: none;
}
.ex_apps--background .ex_apps--item {
background: var(--Neutrals-White-Sand);
transition: background-color .2s ease;
}
.ex_apps--negative .ex_apps--item {
background: var(--Neutrals-White);
}
.ex_apps--border .ex_apps--item {
border: 1px solid var(--Neutrals-Light-Sand);
}
.ex_apps--image {
display: block;
width: 100%;
height: auto;
}
.ex_apps--image_border .ex_apps--image {
border: 1px solid var(--Neutrals-Light-Sand);
}
.ex_apps--text {
width: 100%;
padding: 24px 0;
}
.ex_apps--background .ex_apps--text {
padding: 32px 32px;
}
.ex_apps--columns_4.ex_apps--background .ex_apps--text {
padding: 20px 24px 24px;
}
.ex_apps--text .ex_apps--title {
font-size: 26px;
line-height: 1.2;
color: var(--Neutrals-Black);
margin-bottom: 24px;
}
.ex_apps--columns_2 .ex_apps--text .ex_apps--title {
font-size: 28px;
}
.ex_apps--text .ex_apps--description p {
margin-bottom: 1em;
}
.ex_apps--text .ex_apps--button {
display: none;
position: absolute;
bottom: 16px;
right: 16px;
}
.ex_apps--active .ex_apps--item {
cursor: default;
background: var(--Neutrals-Medium-Sand) !important;
}
.ex_apps--active .ex_apps--description p {
color: var(--Neutrals-Dark-Grey);
}
.ex_apps--active .ex_apps--text .ex_apps--button {
display: none !important;
}
@media (hover: hover) and (pointer: fine) {
.ex_apps--hover .ex_apps--item:hover {
background: var(--Neutrals-Light-Sand);
}
.ex_apps--hover.ex_apps--border .ex_apps--item:hover {
border-color: var(--Neutrals-Medium-Sand);
}
a.ex_apps--item:hover .ex_apps--title {
color: var(--Neutrals-Black);
}
a.ex_apps--item:hover .ex_apps--description p {
color: var(--Neutrals-Dark-Grey);
}
a.ex_apps--item:hover .ex_apps--button {
display: block;
}
}
@media (max-width: 1280px) {
.ex_apps--columns_4 .ex_apps--item_box {
width: 33.333333%;
}
.ex_apps--container {
margin-left: -15px;
margin-right: -15px;
}
.ex_apps--container .ex_apps--item_box {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
.ex_apps--columns_4.ex_apps--background .ex_apps--text {
padding: 32px 32px;
}
}
@media (max-width: 1024px) {
.ex_apps--container .ex_apps--item_box {
width: 50%;
}
.ex_apps--container .ex_apps--text .ex_apps--title {
font-size: 26px;
}
}
@media (max-width: 630px) {
.ex_apps--container .ex_apps--item_box {
width: 100%;
padding-bottom: 50px;
}
}
@media (max-width: 450px) {
.ex_apps--container {
margin-left: calc(-15px - var(--Mobile-Padding) );
margin-right: calc(-15px - var(--Mobile-Padding) );
}
.ex_apps--text {
padding-top: 26px;
}
.ex_apps--text .ex_apps--title {
margin-bottom: 20px;
}
.ex_apps--text .ex_apps--button {
right: 19px;
}
}
/* ex-image */
/**
* Image Block
*/
.ex_image--container {
width: 100%;
}
.ex_image--container > a {
display: block;
}
.ex_image--container img {
display: block;
width: 100%;
height: auto;
}
.ex_image--figcaption {
width: 100%;
padding: 16px 0;
text-align: center;
}
.ex_image--figcaption .ex_image--title {
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 1.2em;
letter-spacing: -0.4px;
color: var(--Neutrals-Black);
margin-top: 4px;
}
.ex_image--figcaption .ex_image--title:last-child {
margin-bottom: 16px;
}
.ex_image--figcaption .ex_image--caption {
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 1.3em;
color: var(--Neutrals-Dark-Grey);
margin-bottom: 8px;
}
.ex_image--figcaption .ex_image--caption a {
font-weight: 400;
}
.ex_image--title + .ex_image--caption {
margin-top: 12px;
}
.ex_image--figcaption .ex_image--description {
font-size: 13px;
font-style: italic;
font-weight: 400;
line-height: 1.2em;
color: var(--Neutrals-Grey);
margin-bottom: 0;
}
.ex_image--figcaption .ex_image--description a {
font-weight: 400;
}
.ex_image--title + .ex_image--description {
margin-top: 12px;
}
.ex_image--container.ex_image--dyn_desktop {
width: 70%;
margin: auto;
}
@media (max-width: 1280px){
.ex_image--container.ex_image--dyn_desktop {
width: 85%;
}
}
@media (max-width: 1150px){
.ex_image--container.ex_image--dyn_desktop {
width: 100%;
margin: 0;
}
}
@media (max-width: 1024px){
.ex_image--container.ex_image--dyn_mobile {
width: 60%;
margin: auto;
}
}
@media (max-width: 850px){
.ex_image--container.ex_image--dyn_mobile {
width: 70%;
margin: auto;
}
}
@media (max-width: 768px){
.ex_image--container.ex_image--dyn_mobile {
width: 80%;
margin: auto;
}
}
@media (max-width: 650px){
.ex_image--container.ex_image--dyn_mobile {
width: 100%;
margin: 0;
}
}
.ex_image--container.ex_image--ordering {
width: 50%;
display: block;
}
.ex_image--container.ex_image--ordering a {
display: block;
}
.ex_image--container.ex_image--ordering img {
display: block;
}
@media (max-width: 1024px){
.ex_image--container.ex_image--ordering {
width: 75%;
}
}
@media (max-width: 650px){
.ex_image--container.ex_image--ordering {
width: 100%;
}
}
.ex_image--container.ex_image--viewport {
margin-left: calc((1290px - 100%)/-2);
margin-right: calc((1290px - 100%)/-2);
width: 1290px;
}
@media (max-width: 1418px) {
.ex_image--container.ex_image--viewport {
margin-left: calc((100vw - 100% - 128px)/-2);
margin-right: calc((100vw - 100% - 128px)/-2);
width: calc(100vw - 128px);
}
}
@media (max-width: 1072px) {
.ex_image--container.ex_image--viewport {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
@media (max-width: 768px) {
.ex_image--container.ex_image--viewport {
margin-left: -32px;
margin-right: -32px;
width: calc(100% + 64px);
}
}
@media (max-width: 450px) {
.ex_image--container.ex_image--viewport {
margin-left: -24px;
margin-right: -24px;
width: calc(100% + 48px);
}
}
/* ex-accordition */
.accordition--container.accordition--shift_up {
margin-top: -20px;
}
.accordition--item:not(.accordition--open) .accordition--head,
.accordition--item:not(.accordition--open) ~ .accordition--item.accordition--open .accordition--head {
border-top: 1px solid var(--Neutrals-Light-Sand);
}
.accordition--item:not(.accordition--open):last-child .accordition--head {
border-bottom: 1px solid var(--Neutrals-Light-Sand);
}
.accordition--head a {
display: block;
padding: 27px 64px 29px 0;
position: relative;
}
.accordition--container .accordition--head a {
text-decoration: none;
}
.accordition--header_h2 .accordition--head a {
padding-top: 23px;
padding-bottom: 26px;
}
.accordition--head a::after {
position: absolute;
content: "";
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
width: 26px;
height: 26px;
background-position: center;
background-repeat: no-repeat;
/*
*/
background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .line%7Bstroke:%234E4E3E;stroke-linecap:round;%7D %3C/style%3E%3Cpath class='line' d='M13,0.5v25'/%3E%3Cpath class='line' d='M0.5,13h25'/%3E%3C/svg%3E");
}
.accordition--open .accordition--head a::after {
background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .line%7Bstroke:%234E4E3E;stroke-linecap:round;%7D %3C/style%3E%3Cpath class='line' d='M0.5,13h25'/%3E%3C/svg%3E");
}
.accordition--head h3 {
margin-bottom: 0;
line-height: 1;
}
.accordition--header_h2 .accordition--head h3 {
font-size: 40px;
letter-spacing: -0.04em;
}
.accordition--body {
display: none;
margin: 24px 0 56px;
}
@media (hover: hover) {
.accordition--head a:hover h3 {
color: var(--Primary-Light-Green);
}
}
@media (max-width: 450px) {
.accordition--head {
margin-left: -24px;
margin-right: -24px;
}
.accordition--head a {
padding-left: 24px;
padding-right: 88px;
}
.accordition--head a::after {
right: 24px;
}
}
/* bibtex-block */
/* Publications block */
.bibtex--block {
min-height: 100px;
position: relative;
}
.bibtex--block .bibtex--data .h3 {
font-size: 32px;
}
@media (max-width: 450px) {
.bibtex--block {
margin-left: calc(-1 * var(--Mobile-Padding) );
margin-right: calc(-1 * var(--Mobile-Padding) );
}
.bibtex--block .bibtex--data .h3 {
margin-left: var(--Mobile-Padding);
margin-right: var(--Mobile-Padding);
}
}
/* Citations */
.cite--item {
width: 100%;
margin-bottom: 24px;
background: var(--Neutrals-White-Sand);
position: relative;
}
.cite--toggler {
position: absolute;
top: 0;
right: 0;
width: 72px;
height: 72px;
padding: 16px;
cursor: pointer;
}
.cite--toggler span {
display: block;
width: 40px;
height: 40px;
border: none;
border-radius: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: 20px;
/** From ex-accordition.css */
background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .line%7Bstroke:%234E4E3E;stroke-linecap:round;%7D %3C/style%3E%3Cpath class='line' d='M13,0.5v25'/%3E%3Cpath class='line' d='M0.5,13h25'/%3E%3C/svg%3E");
}
.cite--expanded .cite--toggler span {
background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .line%7Bstroke:%234E4E3E;stroke-linecap:round;%7D %3C/style%3E%3Cpath class='line' d='M0.5,13h25'/%3E%3C/svg%3E");
}
@media (hover: hover) {
.cite--toggler:hover span {
background-color: var(--Neutrals-White);
}
}
.cite--item_wrap {
width: 100%;
padding: 32px;
}
@media (max-width: 450px) {
.cite--item_wrap {
padding: var(--Mobile-Padding);
}
}
.cite--tags {
line-height: 1.2em;
margin-bottom: 24px;
}
.bibtex--block .cite--tags a {
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
font-weight: 700;
text-transform: uppercase;
color: var(--Neutrals-Light-Grey);
padding: 0;
display: inline;
margin-right: 24px;
}
.cite--tags a:last-of-type {
margin-right: 0;
}
@media (hover: hover) {
.bibtex--block .cite--tags a:hover {
color: var(--Primary-Light-Green);
}
}
.cite--tags span {
position: relative;
display: inline-block;
width: 0;
height: 12px;
}
.cite--tags span::after {
content: "";
position: absolute;
bottom: 2px;
left: -12px;
display: block;
width: 4px;
height: 4px;
border-radius: 100%;
background-color: var(--Neutrals-Light-Grey);
}
.cite--tags span:last-of-type {
display: none;
}
.bibtex--block .cite--item a {
text-decoration: none;
}
.bibtex--block .cite--title {
display: inline-block;
margin-bottom: 16px;
}
.bibtex--block .cite--title .h4 {
color: var(--Neutrals-Black);
font-weight: 400;
font-size: 24px;
font-style: normal;
letter-spacing: -0.01em;
line-height: 1.25em;
margin-bottom: 0;
}
@media (hover: hover) {
.bibtex--block .cite--item a:hover .h4 {
color: var(--Primary-Light-Green);
}
}
.cite--abstract {
margin-top: 32px;
}
.cite--abstract .buttons--container {
margin-top: 28px;
}
.cite--ref a {
font-weight: 400;
}
.cite--tags {
margin-right: 72px;;
}
.cite--title, .cite--abstract, .cite--ref {
margin-right: 48px;
}
@media (max-width: 1024px) {
.cite--title, .cite--abstract, .cite--ref {
margin-right: 24px;
}
}
@media (max-width: 768px) {
.cite--title, .cite--abstract, .cite--ref {
margin-right: 0;
}
}
@media (max-width: 450px) {
.bibtex--block .cite--tags a {
font-size: 11px;
}
.bibtex--block .cite--title .h4 {
font-size: 22px;
}
.cite--ref {
font-size: 14px;
line-height: 1.3;
}
.cite--abstract .button--item {
width: 100%;
}
}
/* Spinner */
.spinner--mask {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: rgba(255,255,255,0.75);
}
.spinner--block {
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
}
.spinner {
width: 50px;
height: 50px;
display: inline-block;
}
.spinner svg {
width: 100%;
height: auto;
}
.spinner .spinner--long {
fill: var(--Neutrals-Dark-Sand);
}
.spinner .spinner--short {
fill: var(--Neutrals-Dark-Grey);
}
/* Pagination Section */
.cite--paging {
margin-top: 56px;
}
.paging--container {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.paging--container .paging--item {
display: block;
margin: 0 8px;
width: 40px;
height: 40px;
padding: 12px 0 14px;
font-weight: 400;
font-size: 14px;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
text-align: center;
color: var(--Neutrals-Dark-Sand);
border-radius: 20px;
background-color: var(--Neutrals-White-Sand);
transition: background-color 0.2s ease-in-out;
cursor: default;
}
.paging--container a.paging--item {
text-decoration: none;
cursor: pointer;
outline: none;
}
.paging--container .paging--item span {
display: inline-block;
}
.paging--container .paging--item .arrow--color {
fill: var(--Neutrals-Dark-Sand);
}
@media (hover: hover) {
.paging--container a.paging--item:hover {
background-color: var(--Neutrals-Sand);
color: var(--Neutrals-Black);
}
.paging--container a.paging--item:hover .arrow--color {
fill: var(--Neutrals-Black);
}
}
.paging--container .paging--item.paging--item_active {
background: var(--Neutrals-Light-Sand);
color: var(--Neutrals-Black);
}
.paging--container .paging--item.paging--points {
width: 32px;
letter-spacing: 2px;
color: var(--Neutrals-Dark-Sand);
background-color: transparent;
}
.paging--container .paging--previous,
.paging--container .paging--next {
padding: 13px 0 13px;
background-color: var(--Neutrals-White-Sand);
}
.paging--container .paging--item_disabled {
background-color: transparent;
}
.paging--container .paging--item_disabled .arrow--color {
fill: var(--Neutrals-Medium-Sand);
}
@media (max-width: 768px) {
.cite--paging {
flex-wrap: wrap;
row-gap: 15px;
margin-top: 48px;
}
}
/* Load More Section */
.load_more--container {
margin-top: 56px;
text-align: center;
}
.load_more--container a {
text-decoration: none;
cursor: pointer;
outline: none;
}
.load_more--container .load_more--button {
display: inline-block;
height: 44px;
min-width: 200px;
padding: 16px 20px 16px;
font-weight: 700;
font-size: 12px;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
letter-spacing: 0.5px;
text-align: center;
color: var(--Neutrals-Dark-Sand);
border-radius: 16px;
background-color: var(--Neutrals-White-Sand);
transition: background-color 0.2s ease-in-out;
cursor: pointer;
}
.load_more--container .load_more--button span {
display: inline-block;
}
@media (hover: hover) {
.load_more--container .load_more--button:hover {
background-color: var(--Neutrals-Sand);
color: var(---Neutrals-Black);
}
}
@media (max-width: 768px) {
.load_more--container {
margin-top: 48px;
}
}