/* ===================================================================
* # imports
*
* ------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Onest:wght@100..900&display=swap');
:root {
--font-1: "Inter", sans-serif;
--font-2: "Onest", sans-serif;
/* monospace
*/
--font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
/* -------------------------------------------------------------------
* ## colors
* ------------------------------------------------------------------- */
:root {
/* theme colors
*/
--color-1: hsla(358, 100%, 50%, 1); /* #e31c23 */
--color-2: hsla(208, 7%, 45%, 1);
--color-3: hsla(0, 0%, 10%, 1);
/* theme color variations
*/
--color-1-lightest: hsla(358, 100%, 80%, 1);
--color-1-lighter : hsla(358, 100%, 70%, 1);
--color-1-light : hsla(358, 100%, 60%, 1);
--color-1-dark : hsla(358, 78%, 40%, 1);
--color-1-darker : hsla(358, 78%, 30%, 1);
--color-1-darkest : hsla(358, 78%, 20%, 1);
--color-2-lightest: hsla(208, 7%, 75%, 1);
--color-2-lighter : hsla(208, 7%, 65%, 1);
--color-2-light : hsla(208, 7%, 55%, 1);
--color-2-dark : hsla(208, 7%, 35%, 1);
--color-2-darker : hsla(208, 7%, 25%, 1);
--color-3-light: hsla(0, 0%, 15%, 1);
--color-3-dark : hsla(0, 0%, 5%, 1);
/* feedback colors
* color-error(#ffd1d2), color-success(#c8e675),
* color-info(#d7ecfb), color-notice(#fff099)
*/
--color-error : hsla(359, 100%, 91%, 1);
--color-success : hsla(76, 69%, 68%, 1);
--color-info : hsla(205, 82%, 91%, 1);
--color-notice : hsla(51, 100%, 80%, 1);
--color-error-content : hsla(359, 50%, 50%, 1);
--color-success-content: hsla(76, 29%, 28%, 1);
--color-info-content : hsla(205, 32%, 31%, 1);
--color-notice-content : hsla(51, 30%, 30%, 1);
/* neutrals
* generated using
* Tint & Shade Generator
* (https://maketintsandshades.com/)
*/
--color-black : #000000;
--color-gray-19: #181819;
--color-gray-18: #2f2f30;
--color-gray-17: #474748;
--color-gray-16: #5e5e5f;
--color-gray-15: #767677;
--color-gray-14: #8e8e8f;
--color-gray-13: #a5a5a7;
--color-gray-12: #bdbdbe;
--color-gray-11: #d4d4d6;
--color-gray-10: #e2e2e3;
--color-gray-9 : #e8e8ea;
--color-gray-8 : #f0f0f1;
--color-gray-7 : #f2f2f3;
--color-gray-6 : #f4f4f5;
--color-gray-5 : #f6f6f7;
--color-gray-4 : #f7f7f8;
--color-gray-3 : #f9f9fa;
--color-gray-2 : #fbfbfc;
--color-gray-1 : #fbfbfc;
--color-white : #ffffff;
/* text
*/
--color-text : var(--color-gray-19);
--color-text-dark : var(--color-3-dark);
--color-text-light : var(--color-gray-15);
--color-placeholder: var(--color-gray-13);
/* accents
*/
--color-primary : var(--color-1);
--color-primary-light : var(--color-1-light);
--color-secondary : var(--color-2);
--color-accent-teal: #adcfd6;
/* bg
*/
--color-bg-light: var(--color-gray-7);
--color-bg-dark : #0b0a15;
--color-bg-teal : #adcfd6;
/* link
*/
--color-link : var(--color-1);
--color-link-hover : var(--color-2-lighter);
--color-link-active: var(--color-2-lighter);
/* buttons
*/
--color-btn : var(--color-gray-10);
--color-btn-text : var(--color-text);
--color-btn-hover : var(--color-gray-11);
--color-btn-hover-text : var(--color-text);
--color-btn-primary : var(--color-1);
--color-btn-primary-text : var(--color-white);
--color-btn-primary-hover : var(--color-1-light);
--color-btn-primary-hover-text: var(--color-white);
--color-btn-stroke : var(--color-text-dark);
--color-btn-stroke-text : var(--color-text-dark);
--color-btn-stroke-hover : var(--color-text-dark);
--color-btn-stroke-hover-text : var(--color-white);
/* preloader
*/
--color-preloader-bg: var(--color-gray-10);
--color-loader : var(--color-3);
--color-loader-light: var(--color-gray-14);
/* others
*/
--color-body-bg: var(--color-gray-1);
--color-border : rgba(0, 0, 0, .1);
--border-radius: 5px;
}
/* -------------------------------------------------------------------
* ## vertical spacing and typescale
* ------------------------------------------------------------------- */
:root {
/* spacing
* base font size: 18px
* vertical space unit : 32px
*/
--base-size: 62.5%;
--base-font-size: 1.8rem;
--space: 3.2rem;
/* vertical spacing
*/
--vspace-0_125: calc(0.125 * var(--space));
--vspace-0_25 : calc(0.25 * var(--space));
--vspace-0_5 : calc(0.5 * var(--space));
--vspace-0_75 : calc(0.75 * var(--space));
--vspace-0_875: calc(0.875 * var(--space));
--vspace-1 : calc(var(--space));
--vspace-1_25 : calc(1.25 * var(--space));
--vspace-1_5 : calc(1.5 * var(--space));
--vspace-1_75 : calc(1.75 * var(--space));
--vspace-2 : calc(2 * var(--space));
--vspace-2_5 : calc(2.5 * var(--space));
--vspace-3 : calc(3 * var(--space));
--vspace-3_5 : calc(3.5 * var(--space));
--vspace-4 : calc(4 * var(--space));
--vspace-4_5 : calc(4.5 * var(--space));
--vspace-5 : calc(5 * var(--space));
--text-scale-ratio: 1.2;
--text-size : var(--base-font-size);
--text-xs : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
--text-sm : calc(var(--text-xs) * var(--text-scale-ratio));
--text-md : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-lg : calc(var(--text-md) * var(--text-scale-ratio));
--text-xl : calc(var(--text-lg) * var(--text-scale-ratio));
--text-xxl : calc(var(--text-xl) * var(--text-scale-ratio));
--text-xxxl : calc(var(--text-xxl) * var(--text-scale-ratio));
/* default button height
*/
--vspace-btn: var(--vspace-2);
--header-logo-left: 8rem;
}
/* on mobile devices below 600px
*/
@media screen and (max-width: 600px) {
:root {
--base-font-size: 1.6rem;
--space: 2.8rem;
}
}
/* -------------------------------------------------------------------
* ## grid variables
* ------------------------------------------------------------------- */
:root {
/* widths for rows and containers
*/
--width-full: 100%;
--width-max: 1200px;
--width-wide: 1400px;
--width-wider: 1600px;
--width-widest: 1800px;
--width-narrow: 1000px;
--width-narrower: 800px;
--width-grid-max: var(--width-max);
/* gutters
*/
--gutter-lg: 2.4rem;
--gutter-md: 2rem;
--gutter-mob: 1rem;
}
.text-white {
color: #ffffff!important;
}
.text-light {
color: var(--color-gray-10)!important;
}
.text-black {
color: #000000!important;
}
.text-dark {
color: var(--color-text)!important;
}
a.text-dark:hover {
color: var(--color-primary)!important;
}
.text-muted {
color: var(--color-gray-13)!important;
}
.text-primary {
color: var(--color-primary)!important;
}
.text-secondary {
color: var(--color-secondary)!important;
}
.text-telegram {
color: #24A1DE !important;
}
.text-vk {
color: #0077ff !important;
}
.bg-white {
background-color: var(--color-white)!important;
}
.bg-light {
background-color: var(--color-bg-light)!important;
}
.bg-dark {
background-color: var(--color-bg-dark)!important;
}
.bg-primary {
background-color: var(--color-primary)!important;
}
.bg-secondary {
background-color: var(--color-secondary)!important;
}
.mt-basic {
margin-top: 4.8rem!important;
}
.mb-basic {
margin-bottom: 4.8rem!important;
}
.mt-lg {
margin-top: 6.4rem!important;
}
.mb-lg {
margin-bottom: 6.4rem!important;
}
.mt-huge {
margin-top: 9.6rem!important;
}
.mb-huge {
margin-bottom: 9.6rem!important;
}
.mt-sm {
margin-top: 2.4rem!important;
}
.mb-sm {
margin-bottom: 2.4rem!important;
}
.mt-0 {
margin-top: 0!important;
}
.mb-0 {
margin-bottom: 0!important;
}
/* ===================================================================
* # custom block grid STACK breakpoints
*
* ------------------------------------------------------------------- */
@media screen and (max-width:1000px) {
.block-1000-full > .column {
-ms-flex: 0 0 100%;
-webkit-box-flex: 0;
flex: 0 0 100%;
max-width: 100%;
}
}
@media screen and (max-width:900px) {
.block-900-full > .column {
-ms-flex: 0 0 100%;
-webkit-box-flex: 0;
flex: 0 0 100%;
max-width: 100%;
}
}
/* ===================================================================
* # base style overrides
*
* ------------------------------------------------------------------- */
html {
font-size: 10px;
scrollbar-color: var(--color-primary) var(--color-white);
}
@media screen and (max-width:400px) {
html {
font-size: 9.444444444444444px;
}
}
html {
height: 100%;
}
body {
background: #0b0a15;
font-family: var(--font-1);
font-size: 1.8rem;
font-style: normal;
font-weight: normal;
line-height: 1.5;
color: var(--color-text);
margin: 0;
padding: 0;
position: relative;
overflow-x: hidden;
}
/* -------------------------------------------------------------------
* ## links
* ------------------------------------------------------------------- */
a {
color: var(--color-primary);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover,
a:focus,
a:active {
color: var(--color-primary-light);
}
a:hover,
a:active {
outline: 0;
}
/* ===================================================================
* # typography & general theme styles
*
* ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-2);
font-weight: 600;
font-style: normal;
color: #000000;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
margin-top: 2rem;
margin-bottom: 2rem;
}
@media screen and (max-width:600px) {
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
margin-top: 2.4rem;
}
}
h5, .h5, h6, .h6 {
margin-top: 2.4rem;
margin-bottom: 1.2rem;
}
@media screen and (max-width:600px) {
h5, .h5, h6, .h6 {
margin-top: 2.4rem;
margin-bottom: 0.8rem;
}
}
h1, .h1 {
font-size: 3.6rem;
line-height: 1.222;
}
@media screen and (max-width:600px) {
h1, .h1 {
font-size: 3.3rem;
}
}
h2, .h2 {
font-size: 3.2rem;
font-size: clamp(2.4rem, 2.2154rem + 0.8205vw, 3.2rem);
line-height: 1.25;
}
h3, .h3 {
font-size: 2.4rem;
font-size: clamp(2rem, 1.82rem + 0.51vw, 2.8rem);
line-height: 1.25;
}
h4, .h4 {
font-size: 2.1rem;
font-size: clamp(1.8rem, 1.7308rem + 0.3077vw, 2.1rem);
line-height: 1.333;
}
h5, .h5 {
font-size: 1.8rem;
line-height: 1.333;
}
h6, .h6 {
font-size: 1.6rem;
line-height: 1.333;
}
.display-1 {
font-size: 5.6rem;
font-size: clamp(4rem, 3.63rem + 1.03vw, 5.6rem);
line-height: 1.125;
}
.display-2 {
font-size: 4.4rem;
font-size: clamp(3.2rem, 2.92rem + 0.77vw, 4.4rem) !important;
font-weight: 600;
line-height: 1.2;
margin-top: 0;
}
.display-3 {
font-size: 4rem;
font-size: clamp(3.2rem, 3.02rem + 0.51vw, 4rem) !important;
font-weight: 600;
line-height: 1.25;
margin-top: 0;
}
p img {
margin: 0;
}
.lead {
font-weight: 300;
font-size: 1.8rem;
margin-bottom: 3.2rem;
}
.text-xs {
font-size: var(--text-xs);
}
.text-sm {
font-size: 1.4rem;
}
.text-md {
font-size: 1.6rem;
}
.text-lg {
font-size: 2.1rem;
}
.fs-32 {
font-size: 3.2rem !important;
}
.text-bold {
font-weight: 700;
}
.block-marked {
padding: var(--vspace-0_25) var(--vspace-0_75);
border-left: 2px solid var(--color-primary);
position: relative;
}
.text-underlined {
border-bottom: 2px solid var(--color-primary);
}
@media screen and (max-width:1200px) {
.lead {
font-size: 1.8rem;
}
}
em,
i,
strong,
b {
font-size: inherit;
line-height: inherit;
}
em,
i {
font-family: var(--font-1);
font-style: italic;
}
strong,
b {
font-family: var(--font-1);
font-weight: 700;
}
small {
font-size: 1.2rem;
line-height: inherit;
}
blockquote {
margin: 4rem 0;
padding: 4rem 4rem;
border-left: 4px solid black;
position: relative;
}
@media screen and (max-width:600px) {
blockquote {
padding: 3.2rem 3.2rem;
}
}
@media screen and (max-width:400px) {
blockquote {
padding: 2.8rem 2.8rem;
}
}
blockquote p {
font-family: var(--font-1);
font-weight: 400;
padding: 0;
font-size: 2.8rem;
line-height: 1.857;
color: #000000;
}
@media screen and (max-width:1200px) {
blockquote p {
font-size: 2.6rem;
}
}
@media screen and (max-width:600px) {
blockquote p {
font-size: 2.2rem;
}
}
blockquote cite {
display: block;
font-family: var(--font-2);
font-size: 1.5rem;
font-style: normal;
line-height: 1.333;
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite,
blockquote cite a,
blockquote cite a:visited {
color: #7e7e7e;
border: none;
}
abbr {
font-family: var(--font-1);
font-weight: 700;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: .05rem;
color: #7e7e7e;
}
var,
kbd,
samp,
code,
pre {
font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
pre {
padding: 2.4rem 3.2rem 3.2rem;
background: #efefef;
overflow-x: auto;
}
code {
font-size: 1.4rem;
margin: 0 .2rem;
padding: .4rem .8rem;
white-space: nowrap;
background: #efefef;
border: 1px solid #d3d3d3;
color: #000000;
border-radius: 3px;
}
pre > code {
display: block;
white-space: pre;
line-height: 2;
padding: 0;
margin: 0;
}
pre.prettyprint > code {
border: none;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
background: #fff099;
color: #000000;
}
hr {
border: solid #e0e0e0;
border-width: 1px 0 0;
clear: both;
margin: 8rem 0 9.6rem;
height: 0;
}
/* -------------------------------------------------------------------
* ## Lists
* ------------------------------------------------------------------- */
ol {
list-style: decimal;
}
ul {
list-style: none;
}
li {
list-style: none;
}
ol,
ul {
margin: 0;
}
ul li {
padding: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 0;
}
ul.list-inline {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.75rem 0;
}
ul.list-disc {
margin-bottom: 2.4rem;
}
ul.list-disc li {
display: list-item;
list-style: none;
padding: 0 0 1.6rem 2.4rem;
position: relative;
}
ul.list-disc li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-1-light);
position: absolute;
left: 0;
top: 0.5em;
vertical-align: middle;
}
ul.list-number {
margin: 0;
padding: 1.5rem 0 0 0;
}
ul.list-number li {
list-style: none;
display: flex;
padding: 0 0 1.5rem;
}
ul.list-number li:last-child {
padding: 0;
}
dt {
margin: 0;
color: var(--color-primary);
}
dd {
margin: 0 0 0 2rem;
}
/* -------------------------------------------------------------------
* ## responsive video container
* ------------------------------------------------------------------- */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* -------------------------------------------------------------------
* ## floated image
* ------------------------------------------------------------------- */
img.h-pull-right {
margin: 1.2rem 0 1.2rem 2.8rem;
}
img.h-pull-left {
margin: 1.2rem 2.8rem 1.2rem 0;
}
/* -------------------------------------------------------------------
* ## tables
* ------------------------------------------------------------------- */
table {
border-width: 0;
width: 100%;
max-width: 100%;
font-family: var(--font-2);
border-collapse: collapse;
}
th,
td {
padding: 1.5rem 3.2rem;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
th {
color: #000000;
font-family: var(--font-2);
font-weight: 700;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* -------------------------------------------------------------------
* ## Spacing
* ------------------------------------------------------------------- */
.btn {
margin-bottom: 1.6rem;
}
fieldset {
margin-bottom: 1.6rem;
}
input,
textarea,
select,
pre,
blockquote,
figure,
table,
p,
form,
.video-container,
.ss-custom-select {
margin-bottom: 2.4rem;
}
div > p:last-child {
margin-bottom: 0;
}
/* ===================================================================
* # preloader
*
* ------------------------------------------------------------------- */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-3-dark);
z-index: 500;
height: 100vh;
width: 100%;
overflow: hidden;
}
.no-js #preloader,
.oldie #preloader {
display: none;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
padding: 0;
display: inline-block;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
#loader > div {
content: "";
background: #ffffff;
width: 6px;
height: 6px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
#loader > div:nth-of-type(1) {
left: 15px;
}
#loader > div:nth-of-type(3) {
left: -15px;
}
/* dots jump */
.dots-jump > div {
-webkit-animation: dots-jump 1.2s infinite ease;
animation: dots-jump 1.2s infinite ease;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.dots-jump > div:nth-of-type(1) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.dots-jump > div:nth-of-type(3) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
@-webkit-keyframes dots-jump {
0% {
top: 0;
}
40% {
top: -6px;
}
80% {
top: 0;
}
}
@keyframes dots-jump {
0% {
top: 0;
}
40% {
top: -6px;
}
80% {
top: 0;
}
}
/* dots fade */
.dots-fade > div {
-webkit-animation: dots-fade 1.6s infinite ease;
animation: dots-fade 1.6s infinite ease;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.dots-fade > div:nth-of-type(1) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.dots-fade > div:nth-of-type(3) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
@-webkit-keyframes dots-fade {
0% {
opacity: 1;
}
40% {
opacity: 0.2;
}
80% {
opacity: 1;
}
}
@keyframes dots-fade {
0% {
opacity: 1;
}
40% {
opacity: 0.2;
}
80% {
opacity: 1;
}
}
/* dots pulse */
.dots-pulse > div {
-webkit-animation: dots-pulse 1.2s infinite ease;
animation: dots-pulse 1.2s infinite ease;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.dots-pulse > div:nth-of-type(1) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.dots-pulse > div:nth-of-type(3) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
@-webkit-keyframes dots-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.1);
transform: scale(1.3);
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes dots-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.1);
transform: scale(1.3);
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* ===================================================================
* # forms
*
* ------------------------------------------------------------------- */
fieldset {
border: none;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
display: block;
padding: 1.2rem 1rem;
border: 0;
border-radius: .6rem;
outline: none;
font-family: var(--font-2);
font-size: 1.6rem;
line-height: 1.5;
max-width: 100%;
background: transparent;
border-bottom: 1px solid #d3d3d3;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.ss-custom-select {
position: relative;
}
.ss-custom-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
margin: 0;
line-height: 3rem;
vertical-align: middle;
}
.ss-custom-select select option {
padding-left: 2rem;
padding-right: 2rem;
}
.ss-custom-select select::-ms-expand {
display: none;
}
.ss-custom-select::after {
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
content: '';
display: block;
height: 8px;
width: 8px;
margin-top: -7px;
pointer-events: none;
position: absolute;
right: 2.4rem;
top: 50%;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
-webkit-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
textarea {
min-height: 8rem;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
color: #000000;
border-bottom: 1px solid #000000;
}
label,
legend {
font-family: var(--font-2);
margin-bottom: .8rem;
display: block;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-text {
display: inline-block;
margin-left: 1rem;
font-family: var(--font-2);
line-height: inherit;
}
label > input[type="checkbox"],
label > input[type="radio"] {
margin: 0;
position: relative;
top: .2rem;
}
/* -------------------------------------------------------------------
* ## Style Placeholder Text
* ------------------------------------------------------------------- */
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #8c8c8c;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #8c8c8c;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #8c8c8c;
}
::placeholder {
/* Most modern browsers support this now. */
color: #8c8c8c;
}
.placeholder {
color: #8c8c8c !important;
}
/* -------------------------------------------------------------------
* ## Change Autocomplete styles in Chrome
* ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-notice);
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
}
/* ===================================================================
* # buttons
*
* ------------------------------------------------------------------- */
.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: var(--font-2);
font-weight: 600;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: .4rem;
height: 6rem;
line-height: 5.8rem;
padding: 0 3.2rem;
margin: 0;
color: #000000;
text-decoration: none;
cursor: pointer;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--color-btn);
border: 0.1rem solid var(--color-btn);
border-radius: 4rem;
}
.btn:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
background-color: #000000;
border-color: #000000;
color: #ffffff;
outline: 0;
}
/* button primary
* ------------------------------------------------- */
.btn.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
}
.btn.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover,
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus {
background: var(--color-1-light);
border-color: var(--color-1-light);
}
/* button white
* ------------------------------------------------- */
.btn.btn--white,
input[type="submit"].btn--white,
input[type="reset"].btn--white,
input[type="button"].btn--white {
background: var(--color-white);
border-color: var(--color-white);
letter-spacing: 0.3rem;
}
.btn.btn--white:hover,
input[type="submit"].btn--white:hover,
input[type="reset"].btn--white:hover,
input[type="button"].btn--white:hover,
.btn.btn--white:focus,
button.btn--white:focus,
input[type="submit"].btn--white:focus,
input[type="reset"].btn--white:focus,
input[type="button"].btn--white:focus {
background: var(--color-1-light);
border-color: var(--color-1-light);
}
/* button black
* ------------------------------------------------- */
.btn.btn--black,
input[type="submit"].btn--black,
input[type="reset"].btn--black,
input[type="button"].btn--black {
background: var(--color-black);
border-color: var(--color-black);
color: #ffffff;
}
.btn.btn--black:hover,
input[type="submit"].btn--black:hover,
input[type="reset"].btn--black:hover,
input[type="button"].btn--black:hover,
.btn.btn--black:focus,
button.btn--black:focus,
input[type="submit"].btn--black:focus,
input[type="reset"].btn--black:focus,
input[type="button"].btn--black:focus {
background: var(--color-2);
border-color: var(--color-2);
color: #ffffff;
}
/* button modifiers
* ------------------------------------------------- */
.btn.h-full-width,
button.h-full-width {
width: 100%;
margin-right: 0;
}
.btn--small,
button.btn--small {
height: 5.6rem !important;
line-height: 5.2rem !important;
}
.btn--medium,
button.btn--medium {
height: 6.4rem !important;
line-height: 6rem !important;
}
.btn--large,
button.btn--large {
height: 6.8rem !important;
line-height: 6.4rem !important;
}
.btn--stroke,
button.btn--stroke {
background: transparent !important;
border: 0.1rem solid #000000;
color: #000000;
}
.btn--stroke:hover,
button.btn--stroke:hover {
background: #000000 !important;
border: 0.1rem solid #000000;
color: #ffffff;
}
.btn--stroke-primary,
button.btn--stroke-primary {
background: transparent;
border: 1px solid var(--color-primary);
color: var(--color-primary);
}
.btn--stroke-primary:hover,
button.btn--stroke-primary:hover {
background: #000000 !important;
border: 1px solid #000000;
color: #ffffff;
}
.btn--stroke-secondary,
button.btn--stroke-secondary {
background: transparent;
border: 1px solid var(--color-secondary);
color: var(--color-secondary);
}
.btn--stroke-secondary:hover,
button.btn--stroke-secondary:hover {
background: var(--color-secondary);
border: 1px solid var(--color-secondary);
color: #ffffff;
}
.btn--stroke-white,
button.btn--stroke-white {
background: transparent;
border: 1px solid #fff;
color: #fff;
}
.btn--stroke-white:hover,
button.btn--stroke-white:hover {
background: #fff;
border-color: #fff;
color: var(--color-primary);
}
.btn--stroke-white-opa,
button.btn--stroke-white-opa {
background: transparent;
border: 1px solid rgba(255, 255, 255, .4);
color: #fff;
}
.btn--stroke-white-opa:hover,
button.btn--stroke-white-opa:hover {
background: #fff;
border-color: #fff;
color: var(--color-primary);
}
.btn--circle,
button.btn--circle {
width: 5.2rem !important;
height: 5.2rem !important;
border-radius: 50% !important;
padding: 0;
font-size: 3.2rem;
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
margin: 0 0.5rem 0 0;
}
.btn--circle img,
button.btn--circle img {
width: 2.4rem !important;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
.icon-link {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.icon-link .icon {
width: 24px;
height: 24px;
}
.icon-link .icon-circle {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
width: 4.8rem;
height: 4.8rem;
border-radius: 8px;
background-color: var(--color-white);
color: var(--color-primary);
margin-right: 1rem;
font-size: 2.4rem;
}
.icon-link > .icon:first-child {
margin-right: var(--vspace-0_125);
}
/* ===================================================================
* # additional components
*
* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
* ## additional typo styles
* ------------------------------------------------------------------- */
.drop-cap:first-letter {
float: left;
font-family: var(--font-2);
font-weight: 700;
font-size: 5.334em;
line-height: 1;
padding: 0 0.125em 0 0;
text-transform: uppercase;
background: transparent;
color: #000000;
}
/* line definition style
* ----------------------------------------------- */
.lining dt,
.lining dd {
display: inline;
margin: 0;
}
.lining dt + dt:before,
.lining dd + dt:before {
content: "\A";
white-space: pre;
}
.lining dd + dd:before {
content: ", ";
}
.lining dd + dd:before {
content: ", ";
}
.lining dd:before {
content: ": ";
margin-left: -0.2em;
}
/* dictionary definition style
* ----------------------------------------------- */
.dictionary-style dt {
display: inline;
counter-reset: definitions;
}
.dictionary-style dt + dt:before {
content: ", ";
margin-left: -0.2em;
}
.dictionary-style dd {
display: block;
counter-increment: definitions;
}
.dictionary-style dd:before {
content: counter(definitions, decimal) ". ";
}
/**
* Pull Quotes
* -----------
* markup:
*
*
*
* --------------------------------------------------------------------- */
.pull-quote {
position: relative;
padding: 2.4rem 0;
}
.pull-quote blockquote {
background-color: #efefef;
border: none;
margin: 0;
padding-top: 9.6rem;
position: relative;
}
.pull-quote blockquote:before {
content: "";
display: block;
height: 3.2rem;
width: 3.2rem;
background-repeat: no-repeat;
background: center center;
background-size: contain;
background-image: url(../images/icons/icon-quote.svg);
position: absolute;
top: 4rem;
left: 4rem;
}
/**
* Stats Tab
* ---------
* markup:
*
*
*
* Extend this object into your markup.
*
* --------------------------------------------------------------------- */
.stats-tabs {
padding: 0;
margin: 3.2rem 0;
}
.stats-tabs li {
display: inline-block;
margin: 0 1.6rem 3.2rem 0;
padding: 0 1.5rem 0 0;
border-right: 1px solid #e0e0e0;
}
.stats-tabs li:last-child {
margin: 0;
padding: 0;
border: none;
}
.stats-tabs li a {
display: inline-block;
font-size: 2.5rem;
font-family: var(--font-2);
font-weight: 700;
border: none;
color: #000000;
}
.stats-tabs li a:hover {
color: var(--color-primary);
}
.stats-tabs li a em {
display: block;
margin: .8rem 0 0 0;
font-family: var(--font-2);
font-size: 1.5rem;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
}
/* -------------------------------------------------------------------
* ## skillbars
* ------------------------------------------------------------------- */
.skill-bars {
list-style: none;
margin: 6.8rem 0 3.2rem;
}
.skill-bars li {
height: .4rem;
background: #c3c3c3;
width: 100%;
margin-bottom: 6.8rem;
padding: 0;
position: relative;
}
.skill-bars li strong {
position: absolute;
left: 0;
top: -4rem;
font-family: var(--font-2);
font-weight: 700;
color: #000000;
text-transform: uppercase;
letter-spacing: .2rem;
font-size: 1.4rem;
line-height: 2.4rem;
}
.skill-bars li .progress {
background: #000000;
position: relative;
height: 100%;
}
.skill-bars li .progress span {
position: absolute;
right: 0;
top: -3.6rem;
display: block;
font-family: var(--font-2);
color: #ffffff;
font-size: 1.1rem;
line-height: 1;
background: #000000;
padding: .8rem .8rem;
border-radius: 3px;
}
.skill-bars li .progress span::after {
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -5px;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #000000;
content: "";
}
.skill-bars li .percent5 {
width: 5%;
}
.skill-bars li .percent10 {
width: 10%;
}
.skill-bars li .percent15 {
width: 15%;
}
.skill-bars li .percent20 {
width: 20%;
}
.skill-bars li .percent25 {
width: 25%;
}
.skill-bars li .percent30 {
width: 30%;
}
.skill-bars li .percent35 {
width: 35%;
}
.skill-bars li .percent40 {
width: 40%;
}
.skill-bars li .percent45 {
width: 45%;
}
.skill-bars li .percent50 {
width: 50%;
}
.skill-bars li .percent55 {
width: 55%;
}
.skill-bars li .percent60 {
width: 60%;
}
.skill-bars li .percent65 {
width: 65%;
}
.skill-bars li .percent70 {
width: 70%;
}
.skill-bars li .percent75 {
width: 75%;
}
.skill-bars li .percent80 {
width: 80%;
}
.skill-bars li .percent85 {
width: 85%;
}
.skill-bars li .percent90 {
width: 90%;
}
.skill-bars li .percent95 {
width: 95%;
}
.skill-bars li .percent100 {
width: 100%;
}
/* -------------------------------------------------------------------
* ## alert box
* ------------------------------------------------------------------- */
.alert-box {
padding: 2.4rem 4rem 2.4rem 3.2rem;
position: relative;
margin-bottom: 3.2rem;
border-radius: 3px;
font-family: var(--font-2);
font-weight: 600;
font-size: 1.5rem;
line-height: 1.6;
}
.alert-box__close {
position: absolute;
display: block;
right: 1.6rem;
top: 1.6rem;
cursor: pointer;
width: 12px;
height: 12px;
}
.alert-box__close::before,
.alert-box__close::after {
content: '';
position: absolute;
display: inline-block;
width: 2px;
height: 12px;
top: 0;
left: 5px;
}
.alert-box__close::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.alert-box__close::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.alert-box--error {
background-color: #ffd1d2;
color: #dd4043;
}
.alert-box--error .alert-box__close::before,
.alert-box--error .alert-box__close::after {
background-color: #dd4043;
}
.alert-box--success {
background-color: #c8e675;
color: #637533;
}
.alert-box--success .alert-box__close::before,
.alert-box--success .alert-box__close::after {
background-color: #637533;
}
.alert-box--info {
background-color: #d5ebfb;
color: #387fb2;
}
.alert-box--info .alert-box__close::before,
.alert-box--info .alert-box__close::after {
background-color: #387fb2;
}
.alert-box--notice {
background-color: #fff099;
color: #827217;
}
.alert-box--notice .alert-box__close::before,
.alert-box--notice .alert-box__close::after {
background-color: #827217;
}
/* ===================================================================
* # Common and Reusable Styles
*
* ------------------------------------------------------------------- */
.s-padding-basic {
padding-top: 8rem;
padding-bottom: 8rem;
}
.wide {
max-width: 1400px;
}
.wider {
max-width: 1600px;
}
.narrow {
max-width: 1000px;
}
.pretitle {
position: relative;
font-size: 1.3rem;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: .3em;
margin-top: 0;
margin-bottom: 6rem;
color: var(--color-primary);
}
.pretitle.with-line {
color: var(--color-2-light);
padding-left: 6rem;
}
.pretitle.with-line::before {
content: "";
display: block;
height: 1px;
width: 4rem;
background-color: var(--color-gray-11);
position: absolute;
top: 0.5em;
left: 0px;
}
.pretitle.text-primary.with-line::before,
.pretitle.text-primary.center-with-lines::before,
.pretitle.text-primary.center-with-lines::after {
background-color: rgba(255, 0, 8, 0.4);
}
.pretitle.center-with-lines {
display: inline-flex;
color: var(--color-2-light);
padding-left: 6rem;
padding-right: 6rem;
}
.pretitle.center-with-lines::before,
.pretitle.center-with-lines::after {
content: "";
display: block;
height: 1px;
width: 4rem;
background-color: rgba(0, 0, 0, .1);
position: absolute;
top: 0.5em;
left: 0px;
}
.pretitle.center-with-lines::after {
left: auto;
right: 0;
}
.section-intro {
position: relative;
margin-bottom: 0;
}
.section-intro h2 {
margin-bottom: 0;
}
.section-text {
margin-top: 4.8rem;
max-width: 56rem;
}
.h-dark-bg {
color: #ffffff;
}
.h-dark-bg .section-intro .display-1 {
color: #ffffff;
}
.h-dark-bg .section-intro::before {
color: rgba(255, 255, 255, 0.08);
}
.h-dark-bg .lead {
color: #ffffff;
}
.right-vert-line {
width: 2px;
height: 20rem;
background-color: #302c59;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
position: absolute;
top: 0;
right: 11.2rem;
}
/* -------------------------------------------------------------------
* responsive:
* common and reusable styles
* ------------------------------------------------------------------- */
@media screen and (max-width:1440px) {
.display-2 {
font-size: 4rem;
}
}
@media screen and (max-width:1200px) {
.right-vert-line {
right: 9rem;
}
.display-2 {
font-size: 3.2rem;
}
}
@media screen and (max-width:800px) {
.section-intro::before {
font-size: 24rem;
}
.right-vert-line {
height: 16rem;
right: 6.2rem;
}
}
@media screen and (max-width:600px) {
.pretitle {
font-size: 1.3rem;
}
.display-1 {
font-size: 4.2rem;
}
.section-intro::before {
font-size: 22rem;
}
.right-vert-line {
height: 12rem;
right: 5rem;
}
}
@media screen and (max-width:500px) {
.display-1 {
font-size: 4rem;
}
}
@media screen and (max-width:360px) {
.display-1 {
font-size: 3.6rem;
}
.section-intro::before {
font-size: 18rem;
}
}
/* ===================================================================
* # site header
*
* ------------------------------------------------------------------- */
.s-header {
--width-logo: 345px;
z-index: 100;
width: 100%;
position: absolute;
top: 3rem;
left: 0;
padding-left: 8rem;
padding-right: 8rem;
}
.s-header.offset {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: all .5s;
transition: all .5s;
}
.s-header.scrolling {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.s-header.sticky {
background-color: #050505;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
}
.s-header.sticky .header-logo img {
width: var(--width-logo);
}
.s-header.sticky .header-content .btn {
height: 4.8rem !important;
line-height: 4.4rem !important;
}
.s-header.sticky.scrolling {
opacity: 1;
visibility: visible;
}
.header-top {
position: relative;
padding: 1.6rem 0;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.header-top::before {
content: '';
position: absolute;
left: -20vw;
right: -20vw;
height: 0;
bottom: 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
display: none;
}
.s-header.sticky .header-top {
border-bottom: 0;
}
.s-header.sticky .header-top::before {
display: block;
}
.header-content {
position: relative;
}
/* -------------------------------------------------------------------
* ## header logo
* ------------------------------------------------------------------- */
.header-logo {
z-index: 101;
display: flex;
align-items: center;
margin: 0;
padding: 0;
-webkit-transition: all .5s;
transition: all .5s;
}
.header-logo a {
display: flex;
gap: 1rem;
border: none;
padding: 0;
outline: 0;
}
.header-logo img {
width: var(--width-logo);
height: auto;
vertical-align: bottom;
}
.header-logo-desc {
position: relative;
padding-left: 1.6rem;
font-family: var(--font-2);
font-weight: 400;
font-size: 1.6rem;
letter-spacing: .05rem;
color: var(--color-white);
opacity: 0.75;
}
/* -------------------------------------------------------------------
* ## main navigation
* ------------------------------------------------------------------- */
.header-nav-wrap {
max-width: none;
width: 100%;
}
.header-nav {
position: relative;
list-style: none;
padding-top: 1.4rem;
padding-bottom: 1.4rem;
margin-left: calc(-1*(1.5rem + 0.5vw));
}
.header-nav li {
display: inline-block;
padding-left: 0;
margin: 0 calc(1.5rem + 0.5vw);
}
.header-nav a {
color: #ffffff;
font-family: var(--font-2);
font-weight: 400;
font-size: 1.6rem;
letter-spacing: .05rem;
line-height: 4rem;
white-space: nowrap;
}
.header-nav a:hover {
color: rgba(255, 255, 255, 0.7) !important;
}
.header-nav li.current a {
color: var(--color-1) !important;
}
/* -------------------------------------------------------------------
* ## mobile menu toggle
* ------------------------------------------------------------------- */
.header-menu-toggle {
z-index: 101;
display: none;
height: 4.2rem;
width: 4.2rem;
line-height: 4.2rem;
font-family: var(--font-2);
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .2rem;
color: #ffffff;
outline: none;
-webkit-transition: all .3s;
transition: all .3s;
position: absolute;
right: 5.2rem;
top: 50%;
transform: translateY(-50%);
}
.header-menu-toggle:hover,
.header-menu-toggle:focus {
color: #ffffff;
}
.header-menu-toggle span {
display: block;
width: 2.4rem;
height: 2px;
background-color: #ffffff;
-webkit-transition: all .5s;
transition: all .5s;
font: 0/0 a;
text-shadow: none;
color: transparent;
margin-top: -1px;
position: absolute;
top: 50%;
left: .9rem;
right: auto;
bottom: auto;
}
.header-menu-toggle span::before,
.header-menu-toggle span::after {
content: '';
width: 100%;
height: 100%;
background-color: inherit;
-webkit-transition: all .5s;
transition: all .5s;
position: absolute;
left: 0;
}
.header-menu-toggle span::before {
top: -.9rem;
}
.header-menu-toggle span::after {
bottom: -.9rem;
}
.header-menu-toggle.is-clicked span {
background-color: rgba(255, 255, 255, 0);
-webkit-transition: all .1s;
transition: all .1s;
}
.header-menu-toggle.is-clicked span::before,
.header-menu-toggle.is-clicked span::after {
background-color: white;
}
.header-menu-toggle.is-clicked span::before {
top: 0;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.header-menu-toggle.is-clicked span::after {
bottom: 0;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/* -------------------------------------------------------------------
* ## download resume button
* ------------------------------------------------------------------- */
.header-contact {
display: flex;
align-items: center;
}
.header-contact .phone {
font-family: var(--font-2);
font-weight: 400;
font-size: 1.6rem;
color: rgba(255, 255, 255, 1);
margin-right: 2rem;
}
.header-content .header-contact {
display: none;
}
.header-contact .phone:hover {
color: rgba(255, 255, 255, .7);
}
.header-contact .btn--small {
height: 4.4rem;
}
.header-content .btn {
margin: 0;
padding: 0 2.4rem;
font-size: 1.2rem;
letter-spacing: .3rem;
}
/* -------------------------------------------------------------------
* responsive:
* header
* ------------------------------------------------------------------- */
@media screen and (max-width:1700px) {
.s-header {
--header-logo-left: 6rem;
}
.header-content .btn {
right: 6rem;
}
}
@media screen and (max-width: 1400px) {
.header-contact .phone {
display: none;
}
}
@media screen and (max-width:1200px) {
.s-header {
--header-logo-left: 2rem;
--width-logo: 200px;
top: 2rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
}
.header-logo-desc {
font-size: 1.2rem;
padding-left: 1.4rem;
}
.header-content {
display: block;
background-color: #050505;
height: auto;
width: 100%;
padding: 16rem 6rem 2rem;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
position: absolute;
top: -2rem;
left: 0;
}
.header-content .btn,
.header-content .phone {
margin-right: 2rem;
-webkit-transform: translate3d(0, -2rem, 0);
transform: translate3d(0, -2rem, 0);
opacity: 0;
visibility: hidden;
position: static;
order: 1;
}
.header-content .phone {
order: 2;
}
.header-contact {
display: flex;
align-items: center;
margin-top: 4.8rem;
position: static;
}
.header-contact .phone {
display: flex;
}
.header-content .header-contact {
display: flex;
}
.header-top .header-contact {
display: none;
}
.header-nav-wrap {
padding: 0;
-webkit-transform: translate3d(0, -2rem, 0);
transform: translate3d(0, -2rem, 0);
opacity: 0;
visibility: hidden;
}
.header-nav {
display: block;
width: 100%;
padding: 0;
margin-left: 0;
}
.header-nav:before {
display: none;
}
.header-nav a {
display: block;
line-height: 6rem;
}
.header-nav li {
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: block;
margin: 0;
}
.header-nav li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.header-menu-toggle {
display: block;
right: 2rem;
}
.menu-is-open .header-content {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-is-open .header-content .btn,
.menu-is-open .header-content .phone {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transition-delay: .7s;
transition-delay: .7s;
}
.menu-is-open .header-nav-wrap {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transition-delay: .6s;
transition-delay: .6s;
}
}
@media screen and (max-width:600px) {
.s-header {
--width-logo: 180px;
top: 1rem;
padding-left: 2.4rem;
padding-right: 2.4rem;
}
.s-header.sticky .header-logo img {
width: var(--width-logo);
}
.header-logo-desc {
font-size: 1.1rem;
padding-left: 1.2rem;
}
.header-menu-toggle {
right: 1.6rem;
}
.header-content {
padding: 14rem 3rem 2rem;
}
.header-content .btn {
display: block;
}
}
/* ===================================================================
* # hero
*
* ------------------------------------------------------------------- */
.s-hero {
width: 100%;
height: 100vh;
min-height: calc(25.5 * var(--space));
overflow: hidden;
background-color: var(--color-gray-19);
position: relative;
}
.no-js .s-hero {
background: #ffffff;
}
.hero-content {
height: 100%;
max-width: 1400px;
padding-top: 28vh;
padding-bottom: 8vh;
position: relative;
z-index: 5;
}
.hero-content h1 {
font-size: 5.6rem;
font-weight: 600;
line-height: 1.257;
padding-right: 3.2rem;
margin: 0 0 3.2rem;
color: #ffffff;
position: relative;
max-width: 900px;
}
.hero-content h1::before {
content: "";
display: block;
height: 2px;
width: 8rem;
background-color: var(--color-primary);
position: absolute;
left: -10.8rem;
top: .55em;
}
.hero-content .hero-text {
max-width: 600px;
font-weight: 300;
font-size: 2.4rem;
margin-bottom: 10rem;
}
/* -------------------------------------------------------------------
* ## hero features
* ------------------------------------------------------------------- */
.hero-feature {
display: flex;
flex-direction: column;
}
.hero-feature_icon {
position: relative;
width: 6.4rem;
height: 6.4rem;
/*border: 0.2rem solid var(--color-primary);
border-radius: 50%;*/
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2.4rem;
}
/*.hero-feature_icon:before {
content: '';
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
background-color: #000;
opacity: 0.3;
}*/
.hero-feature_icon img {
width: 6.4rem;
}
.hero-feature_title {
max-width: 300px;
font-weight: 300;
font-size: 1.8rem;
}
.icon-stroke-white {
fill: none;
stroke: #ffffff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
/* -------------------------------------------------------------------
* ## hero scroll
* ------------------------------------------------------------------- */
.hero-scroll {
position: absolute;
z-index: 10;
right: 8rem;
bottom: 10rem;
}
.hero-scroll::after {
content: "";
display: block;
width: 2px;
height: 7rem;
background-color: white;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
position: absolute;
right: 50%;
bottom: -10rem;
}
.hero-scroll .scroll-link,
.hero-scroll .scroll-link svg path {
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hero-scroll .scroll-link {
text-decoration: none;
border: 0 none;
display: block;
height: 6.4rem;
width: 6.4rem;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
position: relative;
}
.hero-scroll .scroll-link svg {
height: 2.4rem;
width: 2.4rem;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
left: 50%;
top: 50%;
}
.hero-scroll .scroll-link svg path {
fill: #ffffff;
}
.hero-scroll .scroll-link:hover,
.hero-scroll .scroll-link:focus {
background-color: var(--color-primary);
}
/* -------------------------------------------------------------------
* ## hero slider
* ------------------------------------------------------------------- */
.s-hero__slider {
position: relative;
}
.s-hero__slider .slick-dots {
display: block;
list-style: none;
width: 92%;
max-width: var(--width-widest);
margin-left: var(--header-logo-left);
margin-top: -10.5rem;
position: absolute;
}
.s-hero__slider .slick-dots li {
display: inline;
padding-left: 0;
margin-right: .8rem;
}
.s-hero__slider .slick-dots li::after {
content: "";
display: inline-block;
width: 0;
height: 1px;
background-color: var(--color-1-dark);
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
-webkit-transition: width 0.3s cubic-bezier(0.21, 0.97, 0.75, 0.85);
transition: width 0.3s cubic-bezier(0.21, 0.97, 0.75, 0.85);
}
.s-hero__slider .slick-dots li button {
display: inline-block;
background: transparent;
border: none;
margin: 0;
padding: .4rem;
line-height: var(--vspace-1);
height: auto;
color: white;
position: relative;
cursor: pointer;
}
.s-hero__slider .slick-dots li button::before {
content: "0";
}
.s-hero__slider .slick-dots li:nth-child(n+10) button::before {
content: none;
}
.s-hero__slider .slick-dots li.slick-active button {
color: var(--color-1);
font-weight: 500;
}
.s-hero__slider .slick-dots li.slick-active::after {
width: 32px;
margin: 0 8px 0 12px;
}
.s-hero__slider .s-hero__slide,
.s-hero__inner .s-hero__slide {
height: 100vh;
min-height: calc(25.5 * var(--space));
position: relative;
}
.s-hero__slide-bg {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.s-hero__slide-bg::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.s-hero__slide-bg::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(315deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.78) 100%);
opacity: 0.8;
}
.s-hero__slide-content {
height: 100%;
max-width: var(--width-widest);
padding-top: calc(6 * var(--space));
padding-bottom: 20vh;
position: relative;
}
.s-hero__slide-content>.column {
align-self: center;
-ms-flex: 0 0 55%;
-webkit-box-flex: 0;
flex: 0 0 55%;
max-width: 55%;
}
.s-hero__slide-meta {
line-height: var(--vspace-0_75);
color: white;
margin-bottom: var(--vspace-1);
}
.s-hero__slide-meta .cat-links,
.s-hero__slide-meta .byline {
display: inline-block;
margin: 0 .8rem;
}
.s-hero__slide-meta .cat-links a {
font-family: var(--font-2);
font-weight: 600;
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .3rem;
color: var(--color-1-dark);
}
.s-hero__slide-meta .cat-links a::after {
content: "| ";
}
.s-hero__slide-meta .cat-links a:last-child::after {
display: none;
}
.s-hero__slide-text {
font-family: var(--font-2);
font-size: 5.6rem;
font-size: clamp(3.2rem, 2.4615rem + 3.2821vw, 6.4rem);
font-weight: 500;
line-height: 1.091;
letter-spacing: -.01em;
color: white;
margin-top: 0;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
}
.s-hero__slide-text a {
color: white;
}
/*.s-hero__slide-text::before {
content: "";
display: block;
height: 2px;
width: 8rem;
background-color: var(--color-primary);
position: absolute;
left: -10.8rem;
top: .55em;
}*/
.s-hero__slide-desc {
color: white;
max-width: 720px;
font-weight: 300;
font-size: 2.1rem;
margin-top: var(--vspace-1);
margin-bottom: var(--vspace-3);
}
/* -------------------------------------------------------------------
* ## hero slider nav arrows
* ------------------------------------------------------------------- */
.s-hero__nav-arrows {
z-index: 2;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
position: absolute;
right: var(--header-logo-left);
bottom: var(--vspace-1_75);
}
.s-hero__nav-arrows button {
height: var(--vspace-2);
width: var(--vspace-2);
background-color: rgba(255, 255, 255, .2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--color-white);
padding: 0;
margin: 0 0 0 var(--vspace-0_25);
display: -ms-flexbox;
display: -webkit-box;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 0;
cursor: pointer;
transition: all .3s;
}
.s-hero__nav-arrows button svg {
height: 2rem;
width: 2rem;
}
.s-hero__nav-arrows button svg path {
fill: black;
}
.s-hero__nav-arrows button:hover,
.s-hero__nav-arrows button:focus {
background-color: black;
border-color: black;
background-color: #000000;
border-color: #000000;
color: white;
outline: 0;
}
.s-hero__nav-arrows button:hover svg path,
.s-hero__nav-arrows button:focus svg path {
fill: white;
}
/* -------------------------------------------------------------------
* responsive:
* hero
* ------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {
.s-hero__slide-content>.column {
-webkit-box-flex: 0;
flex: 0 0 55vw;
max-width: 55vw;
}
}
@media screen and (max-width: 1400px) {
.s-hero__slide-content>.column {
-webkit-box-flex: 0;
flex: 0 0 75vw;
max-width: 75vw;
}
}
@media screen and (max-width: 1200px) {
.s-hero__slider .slick-dots {
padding: 0 2.4rem;
margin-left: 0;
}
}
@media screen and (max-width: 1000px) {
.s-hero__slide-content>.column {
-ms-flex: 0 0 80vw;
flex: 0 0 80vw;
max-width: 80vw;
}
.s-hero__social-icons li {
margin-bottom: var(--vspace-0_5);
}
}
@media screen and (max-width: 800px) {
.s-hero__slider .slick-dots {
padding: 0 1rem;
}
.s-hero__nav-arrows {
right: 2.4rem;
}
}
@media screen and (max-width: 600px) {
.s-hero__slide-content>.column {
-ms-flex: 0 0 90vw;
flex: 0 0 90vw;
max-width: 90vw;
padding: 0;
}
.s-hero__slider .slick-dots {
padding: 0 2.4rem;
margin-top: -6.5rem;
}
.s-hero__slide-text {
font-size: 4rem;
}
.s-hero__slide-desc {
font-size: 1.8rem;
}
.s-hero__social {
font-size: 1.3rem;
right: 2.8rem;
}
.s-hero__nav-arrows {
display: none;
}
.s-hero__inner .s-hero__slide-content {
padding-top: 10vh;
padding-bottom: 30vh;
}
}
@media screen and (max-width: 500px) {
.s-hero__slider .slick-dots {
padding: 0 2rem;
}
.s-hero__slide-meta {
font-size: var(--text-sm);
}
.s-hero__slide-text {
font-size: 3.2rem;
}
.s-hero__social {
right: 1.6rem;
}
}
@media screen and (max-width: 400px) {
.s-hero__slide-content {
padding-bottom: 24vh;
}
.s-hero__slide-content>.column {
-ms-flex: 0 0 100%;
-webkit-box-flex: 0;
flex: 0 0 100%;
max-width: 100%;
}
.s-hero__nav-arrows button {
height: var(--vspace-1_5);
width: var(--vspace-1_75);
}
.s-hero__nav-arrows button svg {
height: 1.2rem;
width: 1.2rem;
}
}
/* -------------------------------------------------------------------
* ## animations
* ------------------------------------------------------------------- */
/* fade in */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* fade in left */
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* fade out */
@-webkit-keyframes fadeOut {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
/* -------------------------------------------------------------------
* responsive:
* hero
* ------------------------------------------------------------------- */
@media screen and (max-width:1800px) {
.hero-content h1 {
font-size: 4.8rem;
}
.hero-content h1::before {
width: 6rem;
left: -8.8rem;
}
}
@media screen and (max-width:1700px) {
.hero-content {
max-width: 1200px;
}
}
@media screen and (max-width:1300px) {
.hero-content {
max-width: 1200px;
}
.hero-content h1 {
font-size: 6rem;
padding-top: 3.2rem;
}
.hero-content h1::before {
width: 6rem;
top: 0;
left: 0;
}
}
@media screen and (max-width:1200px) {
.hero-scroll {
right: 6rem;
}
.hero-scroll::after {
height: 8rem;
}
.hero-scroll .scroll-link {
height: 6rem;
width: 6rem;
}
}
@media screen and (max-width:1000px) {
.hero-content h1 {
font-size: 5.6rem;
}
.hero-social {
font-size: 1.1rem;
}
}
@media screen and (max-width:800px) {
.hero-content h1 {
font-size: 4.8rem;
}
.hero-social {
padding-right: 7.2rem;
}
.hero-scroll {
right: 3.6rem;
}
.hero-scroll .scroll-link {
height: 5.2rem;
width: 5.2rem;
}
.hero-feature {
margin-bottom: 3.2rem;
}
}
@media screen and (max-width:600px) {
.hero-content h1 {
font-size: 4.6rem;
}
.hero-content h1 br {
display: none;
}
.hero-social {
font-size: 1rem;
}
.hero-scroll {
right: 2.4rem;
}
.s-hero::before {
right: 0;
width: 100%;
}
.hero-content .hero-text {
font-size: 1.8rem;
}
}
@media screen and (max-width:500px) {
.hero-content h1 {
font-size: 4.4rem;
padding-right: 0;
}
}
@media screen and (max-width:400px) {
.hero-content h1 {
font-size: 3.6rem;
}
}
@media screen and (max-width:360px) {
.hero-content h1 {
font-size: 3.2rem;
}
}
/* -------------------------------------------------------------------
* ## grid overlay
* ------------------------------------------------------------------- */
.grid-overlay {
display: block;
content: "";
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
max-width: var(--width-widest);
width: 100%;
height: 100%;
border-right: 1px solid rgba(255, 255, 255, 0.15);
border-left: 1px solid rgba(255, 255, 255, 0.15);
-webkit-transform: translate3d(-50%, 0, 0);
-ms-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
z-index: 3;
pointer-events: none;
mix-blend-mode: soft-light;
}
.grid-overlay > div,
.grid-overlay::before,
.grid-overlay::after {
background-color: rgba(255, 255, 255, 0.2);
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 1px;
}
.grid-overlay::before {
content: "";
left: 25%;
}
.grid-overlay::after {
content: "";
right: 25%;
}
.grid-overlay > div {
left: 50%;
background-color: rgba(255, 255, 255, 0.25);
}
/* -------------------------------------------------------------------
* responsive:
* reusable and common theme styles
* ------------------------------------------------------------------- */
@media only screen and (max-width:1440px) {
.grid-overlay {
border-right: none !important;
border-left: none !important;
}
.grid-overlay::before {
left: 22.5%;
}
.grid-overlay::after {
right: 22.5%;
}
}
/* ===================================================================
* # about section
*
* ------------------------------------------------------------------- */
.s-about {
background-color: #ffffff;
position: relative;
}
.s-about__section--profile .section-content {
display: flex;
flex-direction: column;
gap: 3rem;
}
.s-about__section--profile {
padding-top: 10rem;
padding-bottom: 8rem;
position: relative;
}
.s-about__section--profile .right-bg-decor {
background-color: var(--color-1);
top: 50%;
}
.s-about__section--profile .right-bg-decor.aos-animate {
opacity: 0.5 !important;
}
.s-about__section--profile::before {
content: "";
display: block;
background-image: url(../images/bg-gradient.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 50%;
}
@media screen and (max-width:1024px) {
.s-about__section--profile {
overflow: hidden;
}
.s-about__section--profile .right-bg-decor {
-webkit-transform: translate3d(0, -70%, 0) !important;
transform: translate3d(0, -70%, 0) !important;
}
.s-about__section--profile::before {
background-position: 50% 90%;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
}
.s-about__section--profile .row {
position: relative;
}
.s-about__section--profile .profile-gallery {
width: 100%;
margin-top: 8rem;
}
.slick-lightbox-slick .slick-slide img {
border-radius: 8px;
}
.s-about__gallery {
margin-top: 8rem;
margin-left: 4rem;
}
.s-about__gallery .slick-track {
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: center;
padding-top: 2rem;
}
.s-about__gallery .gallery-item {
position: relative;
float: none;
display: flex!important;
align-items: stretch;
justify-content: center;
text-align: center;
min-height: 0;
margin: 4rem 0 8rem;
transition: all .4s;
height: 520px;
overflow: hidden;
border-radius: 8px;
}
.s-about__gallery .gallery-item a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
border-radius: 8px;
}
.s-about__gallery .gallery-item a img {
min-width: 100%;
min-height: 100%;
object-fit: cover;
border-radius: 8px;
}
.s-about__gallery .gallery-item + .gallery-item {
transform: scale(0.9) translateX(calc(-100% + 40px));
opacity: 0.6;
}
.s-about__gallery .gallery-item.slick-current {
z-index: 5;
transform: scale(1);
box-shadow: 20px 10px 60px -20px rgba(0, 0, 0, .4);
opacity: 1;
}
@media screen and (max-width:600px) {
.s-about__section--profile {
padding-top: 8rem;
}
.s-about__gallery {
margin-top: 0;
margin-left: 0;
margin-bottom: 2rem;
}
.s-about__gallery .gallery-item {
height: 260px;
margin: 1rem 0 6rem;
}
}
/* Arrows */
.s-about__gallery .slick-prev,
.s-about__gallery .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
z-index: 10;
top: 50%;
display: block;
width: 4.8rem;
height: 4.8rem;
padding: 0;
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
border-radius: 8px;
background-color: rgba(0, 0, 0, .4);
background-position: 50%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
transition: all .3s;
}
.s-about__gallery .slick-prev:hover,
.s-about__gallery .slick-prev:focus,
.s-about__gallery .slick-next:hover,
.s-about__gallery .slick-next:focus {
color: transparent;
outline: none;
background-color: rgba(0, 0, 0, .6);
opacity: 1;
}
.s-about__gallery .slick-prev.slick-disabled,
.s-about__gallery .slick-next.slick-disabled {
opacity: .25;
}
.s-about__gallery .slick-prev {
left: 1.4rem;
background-image: url('data:image/svg+xml,');
}
.s-about__gallery .slick-next {
right: 1.4rem;
background-image: url('data:image/svg+xml,');
}
@media screen and (max-width:600px) {
.s-about__gallery .slick-prev,
.s-about__gallery .slick-next
{
display: none;
}
}
/* Dots */
.s-about__gallery .slick-dotted.slick-slider
{
margin-bottom: 3.2rem;
}
.s-about__gallery .slick-dots {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.s-about__gallery .slick-dots li {
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
margin: 0 2px;
padding: 0;
cursor: pointer;
}
.s-about__gallery .slick-dots li button {
position: relative;
display: block;
width: 6px;
height: 6px;
padding: 0;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.s-about__gallery .slick-dots li button:hover,
.s-about__gallery .slick-dots li button:focus {
outline: none;
}
.s-about__gallery .slick-dots li button:hover:before,
.s-about__gallery .slick-dots li button:focus:before {
opacity: 0.75;
}
.s-about__gallery .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
opacity: .25;
border-radius: 50%;
background-color: var(--color-gray-19);
transition: all 0.3s;
}
.s-about__gallery .slick-dots li.slick-active button {
width: 10px;
height: 10px;
}
.s-about__gallery .slick-dots li.slick-active button:before {
opacity: 1;
background-color: var(--color-black);
}
.slick-lightbox {
background: rgba(0, 0, 0, .9)!important;
}
.slick-lightbox-close {
top: 2rem!important;
right: 2rem!important;
width: 4rem!important;
height: 4rem!important;
}
.slick-lightbox-close:before {
font-size: 40px!important;
font-weight: 700!important;
color: #fff!important;
}
.slick-lightbox .slick-prev,
.slick-lightbox .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 4.8rem;
height: 4.8rem;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-image: url('data:image/svg+xml,');
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: 50% 50%;
cursor: pointer;
text-indent: -9999px;
transition: all 0.3s ease;
}
.slick-lightbox .slick-prev {
background-image: url('data:image/svg+xml,');
}
.gallery-bottom {
position: relative;
z-index: 5;
margin-top: -5.6rem;
display: flex;
justify-content: flex-end;
}
@media screen and (max-width:600px) {
.gallery-bottom {
margin-top: 4px;
}
}
/* Features */
.features-wrapper {
row-gap: 6rem;
}
.features-wrapper .column .feature-text {
margin-right: 2.4rem;
}
.feature-block {
display: flex;
}
.feature-row {
align-items: center;
color: var(--color-text);
}
.feature-col {
flex-direction: column;
}
.feature-light {
color: var(--color-gray-10);
}
.feature-light:hover {
color: #ffffff;
}
.feature-icon {
position: relative;
width: 7.2rem;
height: 7.2rem;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2.4rem;
background-color: var(--color-bg-light);
font-size: 4rem;
}
.feature-icon.bg-white {
background-color: var(--color-white);
box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.16);
}
.feature-icon img {
width: 4.8rem;
height: 4.8rem;
}
.feature-icon-big {
position: relative;
width: 9.6rem;
height: 9.6rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 2.4rem 4rem 2.4rem 0;
background-color: var(--color-bg-dark);
}
.feature-icon-big:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12.8rem;
height: 12.8rem;
border-radius: 50%;
border: 1px solid var(--color-bg-dark);
transform: translate(-50%, -50%);
opacity: .2;
}
.feature-icon-big img {
width: 6.4rem;
height: 6.4rem;
}
.feature-text .text-uppercase {
font-family: var(--font-2);
font-weight: 600;
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .4rem;
}
.feature-light .text-uppercase {
font-weight: 500;
letter-spacing: .3rem;
}
.feature-text h3,
.feature-text h4 {
margin-top: 0;
}
.features-dark {
row-gap: 40px;
}
.features-dark .feature-block {
background-color: rgba(255, 255, 255, .1);
border-radius: 8px;
padding: 2.4rem;
height: 100%;
color: var(--color-2-lighter);
}
.features-dark .feature-icon {
background-color: rgba(255, 255, 255, .12) ;
}
@media screen and (max-width:800px) {
.features-wrapper {
row-gap: 4.8rem;
}
.feature-block {
margin-bottom: 1.6rem;
}
}
/* ===================================================================
* # dealer section
*
* ------------------------------------------------------------------- */
.s-dealer {
padding-top: 12rem;
padding-bottom: 9rem;
position: relative;
background: var(--color-3-dark);
overflow: hidden;
}
@media (max-width: 768px) {
.s-dealer {
padding-top: 8rem;
padding-bottom: 6rem;
}
}
.s-dealer-banner {
position: relative;
min-height: 740px;
}
.s-dealer-banner::before {
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 50%;
transform: translateX(-40%);
width: 80rem;
height: 60rem;
border-radius: 50%;
filter: blur(150px);
background-color: var(--color-1);
opacity: 0.5;
}
.s-dealer-banner::after {
content: '';
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 775px;
height: 775px;
background-image: url(../images/bg-gradient-red.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.3;
}
.s-dealer-banner__content {
position: relative;
z-index: 2;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 960px;
}
.logo-cycle {
position: absolute;
z-index: 1;
top: 4rem;
left: 50%;
width: 100%;
max-width: 1200px;
height: 100%;
transform: translateX(-50%);
animation: 6s infinite ease-in-out;
}
.logo-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
animation: 6s infinite ease-in-out;
}
.logo-1 {
animation-name: logoFlow1;
z-index: 2;
}
.logo-2 {
animation-name: logoFlow2;
z-index: 1;
}
@keyframes logoFlow1 {
0% {
/*opacity: 1;*/
transform: scale(1.07);
}
50% {
/*opacity: 0;
filter: blur(2px);*/
transform: scale(1);
}
100% {
/*opacity: 1;*/
transform: scale(1.07);
}
}
@keyframes logoFlow2 {
0% {
opacity: 0.5;
filter: blur(5px);
transform: scale(1.08);
}
50% {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
100% {
opacity: 0.5;
filter: blur(5px);
transform: scale(1.08);
}
}
@media (max-width: 992px) {
.s-dealer-banner {
position: relative;
min-height: 520px;
}
.logo-cycle {
margin-top: 7rem;
}
}
/* cards */
.card {
background-color: var(--color-bg-light);
/*border: 1px solid rgba(0, 0, 0, .05);*/
padding: 3.2rem;
border-radius: .8rem;
}
.card.with-decor {
position: relative;
/*overflow: hidden;*/
}
.card.with-decor > *:not(.right-bg-decor) {
position: relative;
z-index: 2;
}
.card p:last-child {
margin-bottom: 0;
}
.column .card {
height: 100%;
}
.column .card .feature-block {
margin-bottom: 0;
}
.card-base {
display: grid;
min-height: 24rem;
}
.card-base__text {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
}
.card-icon {
position: absolute;
top: 0;
width: 4.8rem;
height: 4.8rem;
background-color: var(--color-primary);
color: var(--color-white);
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
font-size: 3.2rem;
}
.card-lg {
width: 6.4rem;
height: 6.4rem;
font-size: 4.4rem;
}
.right-icon .card-icon {
right: 0;
}
.right-icon .card-header__title {
padding-right: 8rem;
}
.left-icon .card-icon {
left: 0;
}
.left-icon .card-header__title {
padding-left: 8rem;
}
.card-base h2,
.card-base h3,
.card-base h4,
.card-base h5,
.card-base .h2,
.card-base .h3,
.card-base .h4,
.card-base .h5 {
margin-top: 0.5rem;
}
.card-base__header {
width: 100%;
}
.card-base__footer {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
@media screen and (max-width:600px) {
.column .card {
height: auto;
margin-bottom: 3.2rem;
}
}
/* ===================================================================
* # services section
*
* ------------------------------------------------------------------- */
.s-services {
padding-top: 6rem;
padding-bottom: 8rem;
position: relative;
}
.services-grid {
row-gap: 4rem;
}
.services-title {
margin-top: 6rem;
margin-bottom: 16rem;
}
.services-parallax {
margin-top: -6rem;
overflow: hidden;
margin-bottom: -300px;
}
.js-parallax-col {
will-change: transform;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.services-card {
margin-bottom: 8rem;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--color-gray-9);
display: flex;
flex-direction: column;
transition: box-shadow .5s ease;
}
.services-card__thumb {
position: relative;
border-radius: 8px;
overflow: hidden;
}
.services-card__thumb img {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
display: block;
}
.services-card__thumb::after {
content: "";
display: block;
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(11, 24, 40, 0.1) 0, rgba(11, 24, 40, 1) 100%);
opacity: 0.9;
}
.services-card__title {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 3.2rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.services-card__body {
display: flex;
flex-direction: column;
margin: 3.2rem;
border-radius: 8px;
}
.services-card__bottom {
padding: 2.4rem 3.2rem;
border-top: 2px solid var(--color-gray-9);
color: var(--color-2-light);
}
.services-card .features-wrapper {
row-gap: 4rem;
}
.services-card .features-wrapper .feature-block {
position: relative;
padding-top: 2.4rem;
}
.services-card .features-wrapper .feature-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4rem;
height: 2px;
background-color: var(--color-1);
}
.link-cover {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
@media (min-width: 993px) {
.services-grid {
gap: 4rem;
}
.services-grid>.column {
flex: 1 1 0;
}
}
@media (max-width: 992px) {
.services-title {
margin-top: 0;
margin-bottom: 6rem;
}
.services-parallax {
margin-top: 0;
margin-bottom: -6rem;
}
.services-grid {
row-gap: 1rem;
}
.services-grid>.column {
flex: 1 0 100%;
}
.services-card {
margin-bottom: 4rem;
}
.services-card__thumb img {
aspect-ratio: 1;
}
}
/* ===================================================================
* # stock
*
* ------------------------------------------------------------------- */
.s-stock {
padding-top: 8rem;
padding-bottom: 8rem;
border-top: 1px solid var(--color-gray-9);
}
@media screen and (max-width: 900px) {
.s-stock {
overflow: hidden;
padding-top: 6rem;
padding-bottom: 0;
}
}
.s-stock__list {
position: relative;
z-index: 10;
max-width: var(--width-widest);
padding-top: 6rem;
padding-bottom: 6rem;
row-gap: 4rem;
}
body.modal-open {
overflow: hidden;
height: 100vh;
}
.theme-jt .pswp__bg {
background-color: var(--color-3-light);
}
.theme-jt .pswp__zoom-wrap {
left: 8px;
right: 8px;
width: calc(100% - 16px);
}
.theme-jt .pswp__img {
border-radius: 8px;
}
.theme-jt .pswp__ui--fit .pswp__top-bar,
.theme-jt .pswp__ui--fit .pswp__caption {
background-color: transparent;
}
.theme-jt .pswp__button--close {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
pointer-events: auto;
transform: none !important;
}
.theme-jt .pswp__ui--idle .pswp__button--close {
opacity: 1 !important;
}
.theme-jt .pswp__button--share {
display: none;
}
.theme-jt .pswp__ui--idle .pswp__top-bar {
opacity: 1;
}
.theme-jt .pswp__ui--idle .pswp__top-bar>*:not(.pswp__button--close) {
opacity: 0;
pointer-events: none;
}
.theme-jt .pswp__caption__center {
width: 100%;
max-width: var(--width-max);
text-align: left;
}
.trailer-card {
position: relative;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--color-gray-9);
height: 100%;
display: flex;
flex-direction: column;
transition: transform .3s ease,
box-shadow .3s ease;
}
.trailer-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}
.trailer-card__thumb {
position: relative;
}
.trailer-card__thumb .hidden {
content: '';
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .6);
border-radius: 8px;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
transition: 0.6s;
}
.trailer-card:hover .trailer-card__thumb .hidden {
opacity: 1;
}
.trailer-card img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
border-radius: 8px;
}
.trailer-card__body {
display: flex;
flex-direction: column;
height: 100%;
margin: 2rem;
border-radius: 8px;
}
.trailer-card__title {
margin: 0 0 1.6rem;
}
.trailer-card__more {
margin-top: auto;
margin-bottom: 0;
}
.trailer-card__options-short {
margin-bottom: 1.6rem;
margin-top: auto;
font-size: 1.4rem;
color: var(--color-2-light);
}
.trailer-card__options-short td {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-color: var(--color-gray-9);
}
.trailer-card__options-short tr:last-child td {
border-bottom: none;
}
.trailer-card__bottom {
margin-bottom: 0;
border-top: 2px solid var(--color-1);
font-size: 1.4rem;
color: var(--color-2-light);
}
.trailer-card__bottom tr:last-child td {
padding: 1.6rem 0 0;
border-bottom: 0;
}
.trailer-card__options-short:last-child,
.trailer-card__bottom td:last-child {
text-align: right;
}
.trailer-card__price {
color: var(--color-text);
font-size: 1.8rem;
font-weight: 600;
white-space: nowrap;
}
/* =========================================
SIDEBAR
========================================= */
.product-side-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 50%;
max-width: 800px;
background: #fff;
overflow-y: auto;
z-index: 2000;
transform: translateX(100%);
transition: .35s ease;
overscroll-behavior: contain;
}
.product-side-panel.is-open {
transform: translateX(0);
}
@media (min-width:992px) {
.pswp.has-sidebar {
width: 50%;
right: auto;
}
}
@media (min-width:1600px) {
.pswp.has-sidebar {
width: calc(100% - 800px);
}
}
@media (max-width:991px) {
.pswp.has-sidebar {
height: calc(100% - 52vh) !important;
bottom: auto !important;
right: 0;
}
.product-side-panel {
height: 52vh;
width: 100%;
max-width: none;
top: auto;
transform: translateY(100%);
}
.product-side-panel.is-open {
transform: translateY(0);
}
}
.product-side-panel__inner {
padding: 4rem;
}
/* =========================================
PRODUCT CONTENT
========================================= */
.product-modal-content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2.4rem;
}
.product-modal-title {
margin: 0;
}
.product-modal-content {
font-size: 1.4rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2.4rem;
}
.product-modal-content h4,
.product-modal-content h5,
.product-modal-content p {
margin: 0 0 1.2rem;
}
.product-modal-content h6 {
margin: 0 0 0.8rem;
}
.product-modal-content ul {
margin-bottom: 2.4rem;
}
.product-modal-content li {
display: list-item;
list-style: none;
padding: 0 0 1rem 2.1rem;
position: relative;
}
.product-modal-content li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-1-light);
position: absolute;
left: 0;
top: 0.5em;
vertical-align: middle;
}
.product-modal-price {
display: flex;
flex-wrap: wrap;
}
.product-modal-price > * {
flex: 1 1 auto;
max-width: 400px;
}
.product-modal-price > *:last-child {
text-align: right;
}
.product-modal-price .trailer-card__price {
font-size: 2.1rem;
}
.trailer-specs {
width: 100%;
border-collapse: collapse;
margin: 0;
color: var(--color-2-dark);
}
.trailer-specs td {
padding: 0.8rem 0;
border-bottom: 1px solid var(--color-gray-9);
}
.trailer-specs td:last-child {
text-align: right;
font-weight: 600;
}
.trailer-gallery,
.trailer-card__modal-content {
display: none;
}
/* =========================================
MODAL BUTTONS
========================================= */
.product-modal-actions {
margin: 1rem 0;
display: flex;
gap: 1.6rem;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.product-modal-actions .is-disabled {
opacity: .3;
pointer-events: none;
cursor: default;
}
.js-prev-product,
.js-next-product {
cursor: pointer;
letter-spacing: .2rem;
}
.product-common-info {
font-size: 1.4rem;
border-top: 1px solid var(--color-gray-9);
}
.product-common-info h6,
.product-common-info p {
margin: 0 0 0.8rem;
}
.product-common-info .list-disc {
margin-bottom: 0;
}
.product-common-info .list-disc li {
padding: 0 0 1rem 2.1rem;
}
/* =========================================
THUMBS
========================================= */
.theme-jt .pswp__caption {
display: block;
bottom: 30px;
}
.pswp__caption__center {
max-width: none;
text-align: center;
}
.pswp-product-thumbs {
display: flex;
gap: 2px;
justify-content: center;
flex-wrap: wrap;
}
.pswp-thumb {
border: none;
padding: 0;
background: none;
opacity: .45;
cursor: pointer;
transition: .3s;
}
.pswp-thumb:hover,
.pswp-thumb.is-active {
opacity: 1;
transform: scale(1.1);
}
.pswp-thumb img {
width: 90px;
height: 65px;
object-fit: cover;
border-radius: 8px;
display: block;
}
@media (max-width: 991px) {
.theme-jt .pswp__caption {
bottom: 10px;
}
}
/* стрелка вправо с учетом sidebar */
.pswp__button--arrow--right {
right: calc(50% + 30px);
}
@media(min-width:1600px) {
.pswp__button--arrow--right {
right: 830px;
}
}
.theme-jt .pswp__button--arrow--left,
.theme-jt .pswp__button--arrow--right,
.theme-jt .pswp__button--arrow--left::before,
.theme-jt .pswp__button--arrow--right::before {
width: 44px;
height: 44px;
border-radius: 4px;
}
.theme-jt .pswp__button--arrow--right:before {
right: 6px;
background-position: -88px -38px;
background-color: rgba(255, 255, 255, 0.2);
}
.theme-jt .pswp__button--arrow--left:before {
right: 6px;
background-position: -130px -38px;
background-color: rgba(255, 255, 255, 0.2);
}
/* =========================================
MOBILE / TABLET
========================================= */
@media(max-width:991px) {
.product-side-panel__inner {
padding: 30px;
}
.product-modal-actions .btn {
width: 100%;
}
.product-modal-actions .js-prev-product,
.product-modal-actions .js-next-product {
width: calc(50% - 0.8rem);
line-height: 1.4 !important;
}
.pswp-thumb img {
width: 65px;
height: 50px;
}
.pswp__button--arrow--right {
right: 30px;
}
.theme-jt .pswp__img {
left: 8px;
right: 8px;
width: calc(100% - 16px) !important;
}
.product-modal-price>*:last-child {
text-align: left;
margin-top: 4px;
}
}
@media(max-width:600px) {
.pswp-product-thumbs {
gap: 4px;
}
.pswp-thumb img {
width: 45px;
height: 30px;
border-radius: 6px;
}
.product-side-panel__inner {
padding: 24px;
}
}
/* ===================================================================
* # clients
*
* ------------------------------------------------------------------- */
.s-clients {
padding-top: 8rem;
padding-bottom: 10rem;
}
/* --------------------------------------------------------------------
* ## clients-list
*/
.clients-list {
position: relative;
margin-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.clients-list__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
text-align: center;
padding: 0;
}
.clients-list__item a {
display: block;
padding: 4rem;
transition: all 0.4s;
}
.clients-list__item a:focus,
.clients-list__item a:hover {
background-color: #ffffff;
}
.clients-list__item a:focus img,
.clients-list__item a:hover img {
opacity: 1;
}
.clients-list__item img {
width: 200px;
margin: 0;
transition: all 0.4s;
opacity: .6;
}
@media screen and (max-width:600px) {
.clients-list__item a {
padding: 1.6rem;
}
}
/* avatars */
.avatars-block {
min-height: 7.2rem;
margin-top: 4.8rem;
position: relative;
display: flex;
}
.avatars-block__avatar {
width: 7.2rem;
height: 7.2rem;
border-radius: 100%;
outline: none;
border: 4px solid var(--color-3-dark);
}
.avatars-block__avatar:not(:first-child) {
margin-left: -1rem;
}
.avatars-block__text {
display: block;
margin-left: var(--vspace-1);
}
.avatars-block__text strong,
.avatars-block__text span {
font-family: var(--font-2);
font-style: normal;
}
.avatars-block__text span {
display: block;
font-size: 1.6rem;
line-height: 1.333;
color: var(--color-2-light);
margin: var(--vspace-0_25) 0;
}
/* -------------------------------------------------------------------
* responsive:
* avatars
* ------------------------------------------------------------------- */
@media screen and (max-width:600px) {
.avatars-block {
flex-wrap: wrap;
}
.avatars-block__text {
margin: 2.4rem 0;
width: 90%;
}
}
/* ===================================================================
* # CTA
*
* ------------------------------------------------------------------- */
.s-cta {
padding-top: 12rem;
background-color: #ffffff;
font-size: 2.2rem;
line-height: 1.818;
text-align: center;
}
.s-cta h2 {
margin-top: 0;
}
.cta-content {
max-width: 800px;
}
.cta-content .btn {
max-width: 600px;
}
/* -------------------------------------------------------------------
* responsive:
* cta
* ------------------------------------------------------------------- */
@media screen and (max-width:800px) {
.s-cta {
font-size: 2rem;
}
.cta-content {
max-width: 600px;
}
}
@media screen and (max-width:600px) {
.s-cta {
font-size: 1.8rem;
}
}
/* ===================================================================
* # contact
*
* ------------------------------------------------------------------- */
.s-request {
padding-top: 12rem;
padding-bottom: 8rem;
background-color: var(--color-black);
position: relative;
}
@media screen and (max-width:768px) {
.s-request {
padding-top: 8rem;
padding-bottom: 6rem;
}
}
.s-request form .form-field {
margin-bottom: 3.2rem;
}
.s-request form label {
color: var(--color-gray-12);
}
.s-request form .checkbox-label {
display: flex;
align-items: flex-start;
}
.s-request form .checkbox-label input[type="checkbox"] {
display: block;
margin-top: 2px;
}
.s-request input[type="text"],
.s-request input[type="tel"],
.s-request input[type="email"],
.s-request select,
.s-request textarea {
font-size: 1.8rem;
color: #fff;
margin-bottom: 0;
background-color: rgba(255, 255, 255, .15);
border: 1px solid transparent;
}
.s-request input[type="text"]:focus,
.s-request input[type="tel"]:focus,
.s-request input[type="email"]:focus,
.s-request select:focus,
.s-request textarea:focus {
background-color: rgba(255, 255, 255, .25);
border-color: var(--color-white);
}
.s-request select option {
line-height: 2;
background-color: var(--color-black);
}
.s-request .ss-custom-select::after {
border-color: #fff;
}
/* Floating labels */
.form-label-group {
position: relative;
margin-bottom: var(--vspace-1);
}
.form-label-group input,
.form-label-group textarea,
.form-label-group label,
.form-label-group select {
padding: var(--vspace-0_5);
}
.form-label-group label {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
margin: 0;
pointer-events: none;
color: var(--placeholder-color);
transition: all .2s ease-in-out;
transform-origin: 0 0;
transform: translateY(-50%);
text-align: left;
z-index: 5;
}
.form-label-group textarea~label {
top: var(--vspace-0_5);
transform: translateY(-30%);
}
.form-label-group input:not(:placeholder-shown),
.form-label-group input:focus,
.form-label-group textarea:not(:placeholder-shown),
.form-label-group textarea:focus,
.form-label-group select:valid,
.form-label-group select:focus {
padding-top: var(--vspace-0_75);
padding-bottom: var(--vspace-0_25);
}
.form-label-group input:not(:placeholder-shown)~label,
.form-label-group input:focus~label,
.form-label-group textarea:not(:placeholder-shown)~label,
.form-label-group textarea:focus~label,
.form-label-group select:valid~label,
.form-label-group select:focus~label {
top: var(--vspace-0_5);
transform: translateY(-50%);
font-size: 1.2rem;
visibility: visible;
opacity: 0.8;
}
.form-label-group input:focus::placeholder,
.form-label-group textarea:focus::placeholder {
visibility: hidden;
color: rgba(255, 255, 255, 0);
transition-delay: 0s;
opacity: 0;
text-shadow: none;
}
.form-label-group input::placeholder,
.form-label-group textarea::placeholder {
transition-delay: .2s;
color: rgba(255, 255, 255, 0);
opacity: 0;
}
/* Custom checkbox */
.form-check {
display: block;
min-height: 1.313em;
padding-left: 1.813em;
margin-bottom: 0.125rem;
}
.form-check .form-check-input {
float: left;
margin-left: -1.813em;
}
.form-check-input {
--bs-form-check-bg: transparent;
flex-shrink: 0;
width: 1.313em;
height: 1.313em;
margin-top: 0.0935em;
vertical-align: top;
appearance: none;
background-color: rgba(255, 255, 255, .15);
background-image: var(--bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 1px solid transparent;
print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
border-radius: 0.25em;
}
.form-check-input[type=radio] {
border-radius: 50%;
}
.form-check-input:active {
filter: brightness(90%);
}
.form-check-input:focus {
border-color: var(--color-white);
outline: 0;
background-color: rgba(255, 255, 255, .25);
}
.form-check-input:checked {
background-color: rgba(255, 255, 255, .15);
}
.form-check-input:checked[type=checkbox] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
background-color: #C1FF72;
border-color: #C1FF72;
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
pointer-events: none;
filter: none;
opacity: 0.5;
}
.form-check-input[disabled]~.form-check-label,
.form-check-input:disabled~.form-check-label {
cursor: default;
opacity: 0.5;
}
/* ===================================================================
* # footer
*
* ------------------------------------------------------------------- */
.s-footer {
padding-top: 8rem;
padding-bottom: 5.6rem;
background-color: #050505;
color: var(--color-gray-12);
position: relative;
overflow: hidden;
}
.s-footer-inner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: none;
}
.s-footer-inner .list-inline {
justify-content: center;
}
.s-footer .right-vert-line {
background-color: var(--color-primary);
}
.right-bg-decor {
position: absolute;
top: 0;
left: 50%;
width: 60rem;
height: 60rem;
border-radius: 50%;
filter: blur(150px);
background-color: #2c3159;
-webkit-transform: translate3d(0, -70%, 0);
transform: translate3d(0, -70%, 0);
opacity: 0.5;
pointer-events: none;
}
.right-bg-decor.center {
top: 100%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.bottom-bg-decor {
position: absolute;
top: 100%;
left: 50%;
width: 90rem;
height: 90rem;
border-radius: 50%;
filter: blur(200px);
background-color: #302c59;
-webkit-transform: translate3d(0, -70%, 0);
transform: translate3d(-50%, -50%, 0);
opacity: 0.3;
pointer-events: none;
}
.left-circle-decor,
.right-circle-decor {
position: absolute !important;
left: 0;
top: 50%;
width: 560px;
height: 560px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.2);
transform: translate(-50%, -50%);
pointer-events: none;
}
.center-circle-decor {
position: absolute !important;
left: 50%;
top: 50%;
width: 560px;
height: 560px;
border-radius: 50%;
border: 1px solid #fff;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0.25;
}
.center-circle-decor::after,
.center-circle-decor::before {
content: '';
position: absolute !important;
left: 50%;
top: 50%;
width: 150%;
height: 150%;
border-radius: 50%;
border: 1px solid #fff;
transform: translate(-50%, -50%);
opacity: 0.6;
}
.center-circle-decor::before {
width: 200%;
height: 200%;
opacity: 0.3;
}
.center-circle-decor.circle-right {
left: 100%;
}
.center-circle-decor.circle-left {
left: 0;
}
.center-circle-decor.circle-sm {
width: 480px;
height: 480px;
}
.center-circle-decor.circle-sm::before {
width: 250%;
height: 250%;
}
.center-circle-decor.circle-sm::after {
width: 175%;
height: 175%;
}
.right-circle-decor {
left: auto;
right: 0;
transform: translate(50%, -50%);
}
.bg-light .right-bg-decor {
opacity: 0.25;
}
.bg-light .center-circle-decor,
.bg-light .center-circle-decor::before,
.bg-light .center-circle-decor::after {
border-color: rgba(0, 0, 0, .4);
}
@media screen and (max-width: 600px) {
.center-circle-decor.circle-sm {
width: 240px;
height: 240px;
opacity: 0.15;
}
.center-circle-decor.circle-sm::after {
width: 150%;
height: 150%;
}
}
.s-footer .right-bg-decor {
background-color: var(--color-primary);
}
.s-footer__main {
justify-content: space-between;
gap: 2rem;
}
.s-footer__title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3rem;
margin-bottom: 3rem;
}
.s-footer__logo img {
width: 150px;
}
.s-footer a {
color: white;
}
.s-footer a:focus,
.s-footer a:hover {
color: var(--color-1-light);
}
.s-footer__main h4 {
margin-top: 0;
font-weight: 600;
}
.s-footer__site-links {
font-family: var(--font-2);
list-style: none;
display: flex;
flex-flow: row wrap;
margin-left: 0;
}
.s-footer__site-links li {
padding-left: 0;
margin-right: 3.2rem;
margin-bottom: 1.6rem;
}
.s-footer .footer-contacts {
margin-top: 7.2rem;
row-gap: 4rem;
}
.footer-contact-block {
font-weight: 400;
line-height: 1.2;
}
.footer-contact-block a {
color: #ffffff;
}
.footer-contact-block a:hover,
.footer-contact-block a:focus {
color: var(--color-primary);
}
.footer-contact-block__content,
.footer-contact-block__list li {
color: #fff;
padding: .8rem 0;
margin: 0 0 1.6rem;
font-weight: 600;
}
.footer-contact-block__list {
list-style: none;
margin-top: .4rem;
margin-left: 0;
}
.footer-contact-block__list li {
padding-left: 0;
}
.footer-contact-block__header {
font-size: 1.4rem;
color: var(--color-gray-14);
margin: 0;
}
/* -------------------------------------------------------------------
* ## copyright
* ------------------------------------------------------------------- */
.s-footer__bottom {
position: relative;
padding-top: 4rem;
margin-top: 4rem;
justify-content: space-between;
gap: 3rem;
color: var(--color-gray-12);
font-size: 1.4rem;
}
.s-footer__bottom:before {
top: 0;
position: absolute;
left: 15px;
right: 15px;
content: "";
height: 1px;
background: linear-gradient(90deg, var(--color-2-dark) 0, var(--color-1) 100%);
}
/* -------------------------------------------------------------------
* ## go top
* ------------------------------------------------------------------- */
.ss-go-top {
z-index: 900;
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
position: fixed;
right: var(--vspace-0_5);
bottom: var(--vspace-0_5);
}
.ss-go-top a {
text-decoration: none;
border: 0 none;
display: block;
height: 6.4rem;
width: 6.4rem;
border-radius: 8px;
background-color: var(--color-3-light);
-webkit-transition: all .3s;
transition: all .3s;
position: relative;
}
.ss-go-top a:hover,
.ss-go-top a:focus {
background-color: var(--color-primary);
}
.ss-go-top svg {
height: 2.4rem;
width: 2.4rem;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
left: 50%;
top: 50%;
}
.ss-go-top svg path {
fill: #ffffff;
}
.ss-go-top.link-is-visible {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* -------------------------------------------------------------------
* responsive:
* footer
* ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
.ss-go-top {
right: 6rem;
}
.ss-go-top a {
height: 6rem;
width: 6rem;
}
}
@media screen and (max-width:900px) {
.s-footer .footer-contacts {
margin-left: 0;
margin-top: 4rem;
}
.s-footer__main .column {
-ms-flex: 0 0 100%;
-webkit-box-flex: 0;
flex: 0 0 100%;
max-width: 100%;
}
.s-footer__site-links {
margin-top: 3rem;
}
.footer-contact-block {
padding: 0
}
}
@media screen and (max-width:800px) {
.s-footer {
padding-top: 6rem;
}
.ss-go-top {
right: 3.6rem;
}
.ss-go-top a {
height: 5.2rem;
width: 5.2rem;
}
.s-footer-inner {
font-size: 1.4rem;
}
}
@media screen and (max-width:600px) {
.ss-copyright {
padding-bottom: 0;
}
.s-footer__bottom .h-text-right {
text-align: left;
}
.ss-go-top {
right: 2.4rem;
bottom: 4rem;
}
.s-footer-inner .row {
row-gap: 2rem;
}
.s-footer-inner .list-inline.row-x-center {
justify-content: left;
}
.s-footer-inner .h-text-right {
text-align: left;
}
}
/* accordion */
.accordion {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.accordion > li {
/*padding: 15px 0;
border-bottom: 1px solid rgba(108, 117, 125, 0.1);*/
margin: 2.4rem 0;
padding: 1rem;
border-radius: .6rem;
background-color: #e9ecef;
}
.accordion-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
cursor: pointer;
color: #6c757d;
}
.accordion-title h4 {
font-weight: 600;
margin: 0.8rem 0;
}
.accordion-title > .accordion-title-text {
width: calc(100% - 70px);
}
.accordion-body {
box-sizing: border-box;
padding: 0 20px;
opacity: 0;
overflow: hidden;
max-height: 0;
transition: max-height .15s ease-in-out, opacity .15s;
}
.is-open .accordion-body {
opacity: 1;
}
.accordion-body p:last-child {
margin-bottom: 2.4rem;
}
.accordion-icon {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
transition: background 0.3s ease;
}
.accordion-icon:hover {
background: #fff;
}
.accordion-icon::before,
.accordion-icon::after {
content: '';
position: absolute;
background-color: var(--color-primary);
transition: -webkit-transform .25s ease-out;
transition: transform .25s ease-out;
}
.accordion-icon::before {
top: 15px;
left: 50%;
width: 2px;
bottom: 15px;
margin-left: -1px;
}
.accordion-icon::after {
top: 50%;
left: 15px;
right: 15px;
height: 2px;
margin-top: -1px;
}
.accordion li.is-open {
background-color: #fff;
border: 1px solid #e9ecef;
}
.accordion li.is-open .accordion-title h4 {
color: var(--color-primary);
}
.accordion li.is-open .accordion-icon {
cursor: pointer;
background-color: var(--color-primary);
}
.accordion li.is-open .accordion-icon::before {
transform: rotate(90deg);
background-color: #fff;
}
.accordion li.is-open .accordion-icon::after {
transform: rotate(180deg);
background-color: #fff;
}
@media screen and (max-width:600px) {
.accordion-title {
padding: 1.2rem;
}
.accordion-title h4 {
margin: 0;
}
}
/* --------------------------------------------------------------------
* ## circles
* -------------------------------------------------------------------- */
.s-circles-wrap {
position: relative;
/*overflow: hidden;*/
}
.s-circles-wrap .circles,
.s-circles-wrap .circles span {
position: absolute;
pointer-events: none;
z-index: 0;
}
.s-circles-wrap > div:not(.circles) {
position: relative;
z-index: 1;
}
.s-circles-wrap .circles {
--circle-width : 70vw;
width: var(--circle-width);
height: var(--circle-width);
bottom: calc(100vh - var(--circle-width));
right: calc(100% - var(--circle-width) / 2);
}
.s-circles-wrap .circles span {
display: block;
border: 1px solid var(--color-1);
border-radius: 50%;
opacity: .1;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.s-circles-wrap .circles span:nth-child(1) {
height: 100%;
width: 100%;
}
.s-circles-wrap .circles span:nth-child(2) {
height: 80%;
width: 80%;
opacity: .2;
}
.s-circles-wrap .circles span:nth-child(3) {
height: 60%;
width: 60%;
opacity: .3;
}
.s-circles-wrap .circles span:nth-child(4) {
height: 40%;
width: 40%;
opacity: .4;
}
.s-circles-wrap .circles span:nth-child(5) {
height: 20%;
width: 20%;
opacity: .5;
}
.ss-preload .s-circles-wrap {
visibility: hidden;
}
@media screen and (max-width: 800px) {
.s-circles-wrap .circles {
--circle-width: 160vw;
bottom: calc(var(--header-height) + 5vh);
}
}
/* Catalog Tabs */
.tabs {
position: relative;
width: 100%;
min-height: 1400px;
overflow: hidden;
display: flex;
}
.tabs-links-container {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 30%;
min-width: 32rem;
max-width: 64rem;
height: 100%;
padding: 3rem 0;
border-top: 1px solid var(--color-gray-9);
border-bottom: 1px solid var(--color-gray-9);
background-color: var(--color-white);
backdrop-filter: blur(16px);
overflow-y: auto;
overflow-x: hidden;
}
.tabs-links-cat {
padding: 1.2rem 4rem;
font-family: var(--font-2);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--color-2-lighter);
}
.tabs-links {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-left: auto;
margin-bottom: 2.4rem;
}
.tabs-links:not(:last-child) {
border-bottom: 1px solid var(--color-gray-9);
}
.tabs-links li {
position: relative;
cursor: pointer;
padding: 1.4rem 4rem;
font-family: var(--font-2);
font-size: calc(8px + 0.5vw);
line-height: 1.33;
font-weight: 500;
min-width: 100%;
border-right: 3px solid transparent;
transition: all 0.4s ease;
}
.tabs-links li > div {
display: flex;
justify-content: flex-start;
align-items: center;
}
.tabs-links li::after {
content: '';
position: absolute;
top: 50%;
right: 2rem;
z-index: 0;
width: 2.4rem;
height: 2.4rem;
background-image: url('data:image/svg+xml,');
background-size: cover;
transform: translateY(-50%);
opacity: 0;
transition: all 0.3s;
}
.tabs-links li:hover:after,
.tabs-links li.is-active:after {
opacity: 1;
}
.tabs-links li a {
margin-right: 3rem;
color: var(--color-2-dark);
transition: all 0.3s;
}
.tabs-links li.is-active a {
color: var(--color-text);
}
.tabs-links-icon {
position: relative;
width: 12rem;
flex-shrink: 0;
margin-right: 2rem;
transition: all 0.3s;
}
.tabs-links-icon:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 7rem;
height: 7rem;
border-radius: 50%;
background-color: var(--color-1);
filter: blur(20px);
opacity: 0;
transform: translate(-50%, -50%) scale(0.25);
transition: all 0.3s;
}
.tabs-links li:hover a {
opacity: 0.7;
transform: translateX(1.6rem);
}
.tabs-links li:hover .tabs-links-icon {
transform: scale(1.2);
}
.tabs-links li:hover .tabs-links-icon:before {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
.tabs-links-icon img {
position: relative;
z-index: 1;
width: 100%;
}
@media (max-width: 1920px) and (max-height:1200px) {
.tabs {
min-height: 1300px;
}
}
@media (max-width: 1600px) {
.tabs-links li {
padding: 1.2rem 3rem;
}
.tabs-links-icon {
position: relative;
width: 9rem;
}
.tabs-links-icon:before {
width: 6rem;
height: 6rem;
}
}
@media (max-width: 1440px) {
.tabs-links li {
padding: 1.6rem 3.2rem;
font-size: 1.8rem;
}
}
@media (max-width: 1200px) {
.tabs {
flex-direction: column;
}
.tabs-links-container {
position: relative;
width: 100%;
min-width: 320px;
max-width: 100%;
height: auto;
padding: 3.2rem 0 2.4rem;
overflow-x: auto;
}
.tabs:after {
content: '';
position: absolute;
z-index: 2;
top: 3rem;
right: 15px;
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--color-white);
background-color: rgba(0, 0, 0, .2);
background-image: url('data:image/svg+xml,');
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: .7;
}
.tabs-links-cat {
padding: 1.6rem 2.4rem 0;
}
.tabs-links {
gap: 2rem;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
max-width: 100%;
margin: 2.4rem;
border: 0 !important;
}
.tabs-links:last-child {
margin-bottom: 0;
}
.tabs-links li {
padding: 2rem;
flex: 0 1 auto;
width: fit-content;
min-width: 17rem;
max-width: 24px;
font-size: 1.6rem;
background-color: var(--color-gray-6);
border-radius: 8px;
}
.tabs-links li > div {
flex-direction: column;
align-items: center;
text-align: center;
}
.tabs-links li:hover {
opacity: 1;
}
.tabs-links li::after {
display: none;
}
.tabs-links-icon {
margin: 0;
min-height: 6.2rem;
}
.tabs-links li a {
margin: 1rem 0 0;
}
.tabs-links li:hover a {
opacity: 1;
transform: none;
}
.tabs-links li:hover .tabs-links-icon:before {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
.tabs-links li.is-active .tabs-links-icon:before {
transform: translate(-50%, -50%) scale(1);
opacity: 0.7;
filter: blur(20px);
}
}
@media (max-width: 800px) {
.tabs-links li {
padding: 1.6rem;
}
}
@media (max-width: 600px) {
.tabs-links li {
min-width: 16rem;
font-size: 1.4rem;
}
}
.tabs-content {
position: relative;
width: 100%;
overflow: hidden;
background-color: var(--color-2);
}
.tab-panel {
display: none;
position: relative;
width: 100%;
height: 100%;
background: transparent;
}
.tab-panel.is-active {
display: block;
animation: panelIn 2s ease both;
}
.tab-panel.is-hide {
display: none;
animation: panelOut 2s ease both;
}
.tab-panel:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--color-2-dark);
transition: background-color 1s cubic-bezier(.165, .84, .44, 1) 0ms;
}
.tabs-content .tab-panel:nth-of-type(3n+2).is-active .product-slide {
background: linear-gradient(225deg, #074fb0 0, #21323c 95%);
}
.tabs-content .tab-panel:nth-of-type(3n).is-active .product-slide {
background: linear-gradient(225deg, #8897aa 0, #21323c 95%);
}
.tab-panel.is-active .tab-panel-inner {
animation: panelSlide 800ms ease both;
}
@keyframes panelIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes panelOut {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes panelSlide {
0% {
opacity: 0;
transform: scale(1.05)
}
to {
opacity: 1;
transform: scale(1)
}
}
.tab-panel .tab-panel-inner {
height: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
}
.product-slide-aside {
width: 30%;
min-width: 32rem;
max-width: 64rem;
flex-shrink: 0;
flex-grow: 0;
}
.product-slide {
position: relative;
width: 100%;
display: flex;
background: linear-gradient(225deg, var(--color-1) 0, #375464 95%);
}
.product-slide-content {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
pointer-events: none;
gap: 4rem;
}
.product-slide-content,
.product-slide,
.tab-panel-inner,
.tabs {
min-width: 0;
}
.product-slide-content::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);
z-index: 0;
pointer-events: none;
mix-blend-mode: multiply;
}
.product-slide-content > * {
position: relative;
z-index: 1;
}
.product-image--bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
display: flex;
justify-content: flex-end;
align-items: center;
pointer-events: none;
}
.product-image {
position: relative;
z-index: 2;
width: 100%;
max-width: 55vw;
margin-bottom: calc(6vw * 3);
}
.product-image--bg:before {
content: '';
position: absolute;
z-index: 1;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
width: 775px;
height: 775px;
background-image: url(../images/bg-gradient-red.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.tabs-content .tab-panel:nth-of-type(3n+2).is-active .product-image--bg:before {
background-image: url(../images/bg-gradient.png);
}
.tabs-content .tab-panel:nth-of-type(3n+3).is-active .product-image--bg:before {
background-image: url(../images/bg-gradient-white.png);
}
.product-header {
margin-bottom: 5rem;
pointer-events: auto;
display: flex;
flex-direction: column;
gap: 3rem;
padding: 7rem 8rem;
}
.product-header h3 {
font-weight: 600;
margin: 0;
}
.product-header-text {
max-width: 800px;
font-weight: 300;
}
.product-header-text ul:last-of-type,
.product-header-text p:last-of-type {
margin-bottom: 0;
}
.product-content {
margin-top: auto;
pointer-events: auto;
padding: 0 8rem;
}
.product-details {
display: flex;
flex-wrap: wrap;
gap: 6.4rem;
}
.product-parameters {
display: flex;
gap: 3rem;
width: 100%;
}
.product-footer {
display: flex;
flex-wrap: wrap;
gap: 3rem;
width: 100%;
}
.product-btns {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-right: auto;
}
.product-btns .btn {
margin: 0;
}
.product-download {
display: flex;
align-items: center;
}
.product-download a {
max-width: 40rem;
font-weight: 300;
}
.product-download a.h5 {
font-weight: 500;
}
.product-download a:hover {
opacity: 0.7;
}
.product-parameter {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 200px;
}
.product-parameter--divider {
border-left: 1px solid rgba(255, 255, 255, .3);
font-size: 0;
margin-left: auto;
margin-right: auto;
}
.product-parameter--title {
font-family: var(--font-2);
font-size: 2.8rem;
font-weight: 500;
color: var(--color-white);
}
.product-parameter--description {
font-size: 1.6rem;
font-weight: 300;
color: var(--color-2-lighter);
}
@media (min-width: 1920.02px) {
.product-header {
padding: 8rem 10rem;
}
.product-content {
padding: 0 10rem;
}
.product-parameter--title {
font-size: 3.2rem;
}
.product-slide-content::after {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .7) 100%);
}
}
@media (max-width: 1440px) {
.product-header {
padding: 6rem;
}
.product-content {
padding: 0 6rem;
}
.product-parameter--title {
font-size: 2.4rem;
}
}
@media (max-width: 768px) {
.product-slide-aside {
display: none;
}
.product-content {
padding: 12.6rem 3.2rem 2rem;
}
.product-slide-image {
height: 240px;
margin-bottom: 24px;
}
.product-header {
padding: 4rem 2.4rem;
}
.product-image {
max-width: 100vw;
margin-bottom: 0;
margin-top: -44rem;
}
.product-details {
gap: 5.6rem;
}
.product-parameters {
flex-wrap: wrap;
gap: 2rem;
}
.product-parameter--divider {
width: 100%;
border: 0;
border-top: 1px solid rgba(255, 255, 255, .3);
}
}
.tabs-controls {
opacity: 0;
visibility: hidden;
position: absolute;
z-index: 10;
top: var(--vspace-0_5);
right: var(--vspace-0_5);
display: flex;
justify-content: space-between;
}
.tabs-controls button {
display: flex;
justify-content: center;
align-items: center;
height: var(--vspace-1_5);
width: var(--vspace-1_5);
border: none;
border-radius: 8px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
margin: 0 0 0 var(--vspace-0_25);
transition: all 0.3s ease;
}
/* hover */
.tabs-controls button:hover {
opacity: 0.8;
}
/* disabled */
.tabs-controls button.is-disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
@media (max-width: 1200px) {
.tabs-controls {
opacity: 1;
visibility: visible;
}
}
/* TAB GALLERY
--------------------------------------------- */
.tab-gallery--bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
.tab-gallery {
position: relative;
}
.tab-gallery::before,
.tab-gallery::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
background: linear-gradient(180deg, hsla(208, 7%, 35%, 0) 45%, var(--color-2-dark) 100%);
z-index: 2;
pointer-events: none;
}
.tab-gallery::before {
background: linear-gradient(0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);
mix-blend-mode: multiply;
}
.tab-gallery--bg .slick-list,
.tab-gallery--bg .slick-track,
.tab-gallery--bg .slick-slide,
.tab-gallery--bg .slick-slide>div {
height: 100%;
}
.tab-gallery img {
width: 100%;
aspect-ratio: 1920 / 1230;
object-fit: cover;
}
/* arrows */
.tab-gallery-prev,
.tab-gallery-next {
position: absolute;
z-index: 10;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
height: var(--vspace-2);
width: var(--vspace-2);
border: none;
border-radius: 8px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
transition: opacity 0.3s ease;
}
.tab-gallery-prev {
left: var(--vspace-0_25);
}
.tab-gallery-next {
right: var(--vspace-0_25);
}
.tab-gallery-prev:hover,
.tab-gallery-next:hover,
.tab-gallery-prev:active,
.tab-gallery-next:active {
opacity: 0.8;
}
/* disabled (slick сам добавляет) */
.slick-disabled {
opacity: 0.3;
cursor: default;
}
/* CAROUSEL GALLERY
--------------------------------------------- */
.tab-carousel {
display: flex;
width: 100%;
min-width: 0;
pointer-events: auto;
padding: 1rem 2rem 2rem;
}
.tab-gallery-carousel {
position: relative;
flex: 0 0 100%;
max-width: 100%;
overflow: hidden;
}
.tab-gallery-carousel .slick-slide {
padding: 0 1px;
border-radius: 8px;
opacity: 0.6;
transition: all 0.3s ease;
}
.tab-gallery-carousel .slick-active {
opacity: 1;
}
.tab-gallery-carousel .slick-slide > div {
height: 100%;
}
.tab-gallery-carousel .slick-slide a {
display: block;
height: 100%;
border-radius: 8px;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.tab-gallery-carousel img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ARROWS */
.tab-gallery-prev,
.tab-gallery-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 4.8rem;
height: 4.8rem;
border: none;
border-radius: 8px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
.tab-gallery-prev {
left: var(--vspace-0_5);
}
.tab-gallery-next {
right: var(--vspace-0_5);
}
.tab-gallery-prev:hover,
.tab-gallery-next:hover {
opacity: 0.8;
}
/* disabled */
.slick-disabled {
opacity: 0.3;
pointer-events: none;
}
/* ===================================================================
* # contacts
*
* ------------------------------------------------------------------- */
.s-contacts {
padding-top: 8rem;
padding-bottom: 8rem;
}
.s-contacts-map {
position: relative;
width: 100%;
height: 48rem;
}
@media (max-width: 768px) {
.s-contacts {
padding-top: 6rem;
padding-bottom: 4rem;
}
}
/* Yandex map */
#map-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#map-wrapper:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
pointer-events: none;
z-index: 2;
transition: opacity 0.4s;
}
#map-wrapper:hover:before {
opacity: 0;
}
@media (max-width: 640px) {
#map-wrapper:before {
display: none;
}
.map-container {
height: auto;
}
}
.row-cubes {
gap: 2.4rem;
margin: 1.6rem 0;
}
.row-cubes > * {
padding: 2rem;
border-radius: 8px;
}
.row-cubes .large-6 {
max-width: calc(50% - 15px);
}
@media screen and (max-width: 600px) {
.row-cubes {
padding: 0;
}
}
/* ===================================================================
* # cookie
*
* ------------------------------------------------------------------- */
.cookie-banner {
position: fixed;
bottom: 24px;
left: 24px;
width: calc(100% - 48px);
max-width: 600px;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: .3s;
z-index: 9999;
}
.cookie-banner__inner {
display: flex;
flex-direction: column;
gap: 2.4rem;
padding: 2.4rem;
background-color: #fff;
border-radius: 8px;
font-size: 1.4rem;
box-shadow: 0 16px 40px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--color-gray-9);
}
.cookie-banner__inner p {
margin-bottom: 1.6rem;
}
.cookie-banner.is-active {
opacity: 1;
visibility: visible;
transform: none;
}
@media (max-width: 600px) {
.cookie-banner__inner {
gap: 1.6rem;
font-size: 1.2rem;
}
}
/* ===================================================================
* # team
*
* ------------------------------------------------------------------- */
.s-team {
padding-top: 12rem;
padding-bottom: 0;
}
.team-slider {
position: relative;
padding: 3.2rem 0;
}
.team-slider .slick-track {
display: flex;
}
.team-slider .slick-slide {
float: none;
height: auto;
padding: 0 1rem;
box-sizing: border-box;
}
.team-card {
height: 100%;
margin: 0 1rem;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--color-gray-9);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2.4rem;
outline: none;
transition: box-shadow .5s ease;
}
.team-card__thumb {
width: 100%;
}
.team-card__thumb img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
border-radius: 24px;
}
.team-card__body {
display: flex;
flex-direction: column;
border-radius: 8px;
padding: 0 0.8rem;
}
.team-card__desc {
position: relative;
color: var(--color-2-light);
padding-top: 2.4rem;
}
.team-card__desc:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4rem;
height: 2px;
background-color: var(--color-1);
}
.team-slider .slick-dots {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin-top: 3rem;
text-align: center;
}
.team-slider .slick-dots li {
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
margin: 0 2px;
padding: 0;
cursor: pointer;
}
.team-slider .slick-dots li button {
position: relative;
display: block;
width: 6px;
height: 6px;
padding: 0;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.team-slider .slick-dots li button:hover,
.team-slider .slick-dots li button:focus {
outline: none;
}
.team-slider .slick-dots li button:hover:before,
.team-slider .slick-dots li button:focus:before {
opacity: 0.75;
}
.team-slider .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
opacity: .25;
border-radius: 50%;
background-color: var(--color-gray-9);
transition: all 0.3s;
}
.team-slider .slick-dots li.slick-active button {
width: 10px;
height: 10px;
}
.team-slider .slick-dots li.slick-active button:before {
opacity: 1;
background-color: var(--color-white);
}