/*!
Theme Name: Apelsin
Theme URI: https://apelsin.media/
Author: Apelsin Studio
Author URI: https://apelsin.media/
Description: Basic Development Theme
Version: 1.1.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: apelsin
*/

/*

Положение элемента относительно других: position, left/right/top/bottom, float, clear, z-index.
Размеры и отступы: width, height, margin, padding.
Рамка border, которая частично относится к размерам.
Общее оформление содержимого: list-style-type, overflow.
Цветовое и стилевое оформление: background, color, font.
Общая логика сортировки — «от общего к локальному и менее важному».

*/

/*

Правила формирования имени БЭМ-сущности:

Каждая БЭМ-сущность должна иметь свой класс.
CSS-свойства для блоков, элементов и модификаторов описываются только через классы.
Для разделения слов в именах используется дефис (-).
Элемент отделяется от блока двумя подчеркиваниями (__). Модификатор — одним (_).
Имена БЭМ-сущностей записываются с помощью цифр и латинских букв в нижнем регистре.

Пример:

Имя блока — header.
Имя элемента блока — header__search-form — элемент search-form блока header.
Имя модификатора блока — header_theme_green-forest — модификатор theme в значении green-forest блока header.
Имя модификатора элемента — header__search-form_disabled — булев модификатор disabled элемента search-form блока header.

*/

/*

Autoprefixer CSS online:
https://autoprefixer.github.io/

*/


/*

##    ##     #######     ########     ##     ##       ###       ##          ####    ########    ########
###   ##    ##     ##    ##     ##    ###   ###      ## ##      ##           ##          ##     ##
####  ##    ##     ##    ##     ##    #### ####     ##   ##     ##           ##         ##      ##
## ## ##    ##     ##    ########     ## ### ##    ##     ##    ##           ##        ##       ######
##  ####    ##     ##    ##   ##      ##     ##    #########    ##           ##       ##        ##
##   ###    ##     ##    ##    ##     ##     ##    ##     ##    ##           ##      ##         ##
##    ##     #######     ##     ##    ##     ##    ##     ##    ########    ####    ########    ########

 */


/*ASCII TEXT GENERATOR:*/
/*

https://www.resourcefuldev.com/font-changer/ascii-text.html     ==> banner3

*/
/*ASCII TEXT GENERATOR.*/


/**********************/
/* START - NORMALIZE: */
/**********************/

/*https://github.com/csstools/normalize.css v12.1.1*/

/* Document
 * ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

:where(html) {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    text-size-adjust: 100%; /* 2 */
}

/* Sections
 * ========================================================================== */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

:where(h1) {
    font-size: 2em;
    margin-block-end: 0.67em;
    margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */

:where(dl, ol, ul) :where(dl, ol, ul) {
    margin-block-end: 0;
    margin-block-start: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */

:where(hr) {
    box-sizing: content-box; /* 1 */
    color: inherit; /* 2 */
    height: 0; /* 1 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Add the correct text decoration in Safari.
 */

:where(abbr[title]) {
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

:where(b, strong) {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

:where(code, kbd, pre, samp) {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

:where(small) {
    font-size: 80%;
}

/* Tabular data
 * ========================================================================== */

/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

:where(table) {
    border-color: currentColor; /* 1 */
    text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

:where(button, input, select) {
    margin: 0;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(button) {
    text-transform: none;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
    -webkit-appearance: button;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

:where(progress) {
    vertical-align: baseline;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(select) {
    text-transform: none;
}

/**
 * Remove the margin in Firefox and Safari.
 */

:where(textarea) {
    margin: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

:where(input[type="search" i]) {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:where(:-moz-ui-invalid) {
    box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct styles in Safari.
 */

:where(dialog) {
    background-color: white;
    border: solid;
    color: black;
    height: -moz-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
}

:where(dialog:not([open])) {
    display: none;
}

/*
 * Add the correct display in all browsers.
 */

:where(summary) {
    display: list-item;
}

/********************/
/* END - NORMALIZE. */
/********************/


/*

   ###       ########     ########    ##           ######     ####    ##    ##             ########     ########    ########       ###       ##     ##    ##          ########
  ## ##      ##     ##    ##          ##          ##    ##     ##     ###   ##             ##     ##    ##          ##            ## ##      ##     ##    ##             ##
 ##   ##     ##     ##    ##          ##          ##           ##     ####  ##             ##     ##    ##          ##           ##   ##     ##     ##    ##             ##
##     ##    ########     ######      ##           ######      ##     ## ## ##             ##     ##    ######      ######      ##     ##    ##     ##    ##             ##
#########    ##           ##          ##                ##     ##     ##  ####             ##     ##    ##          ##          #########    ##     ##    ##             ##
##     ##    ##           ##          ##          ##    ##     ##     ##   ###             ##     ##    ##          ##          ##     ##    ##     ##    ##             ##
##     ##    ##           ########    ########     ######     ####    ##    ##             ########     ########    ##          ##     ##     #######     ########       ##

*/


/********************************/
/* START - APELSIN DEFAULT CSS: */
/********************************/

/*Content:

FONTS
VARS
MAIN (body etc.)
COLORS
SVG COLORS
POSITION
FLEX
GRID
MARGINS
PADDINGS
OTHER
HEADINGS
TEXT
LINKS
BUTTONS

*/


/*FONTS - START:*/

@font-face {
    font-family: 'Myriad';
    src:
            url('fonts/MyriadPro_Light.woff2') format('woff2'),
            url('fonts/MyriadPro_Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad';
    src:
            url('fonts/MyriadPro_Regular.woff2') format('woff2'),
            url('fonts/MyriadPro_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad';
    src:
            url('fonts/MyriadPro_Semibold.woff2') format('woff2'),
            url('fonts/MyriadPro_Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad';
    src:
            url('fonts/MyriadPro_Bold.woff2') format('woff2'),
            url('fonts/MyriadPro_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/******************************************************************************************/

@font-face {
    font-family: 'Montserrat';
    src:
            url('fonts/Montserrat_Light.woff2') format('woff2'),
            url('fonts/Montserrat_Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:
            url('fonts/Montserrat_Regular.woff2') format('woff2'),
            url('fonts/Montserrat_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:
            url('fonts/Montserrat_SemiBold.woff2') format('woff2'),
            url('fonts/Montserrat_SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*FONTS - END.*/


/*VARS - START:*/
/*Main:*/
:root {
    --sw: 2258px; /*Site Width*/
    --hh: 100px; /*Header Height*/
    --fh: 100px; /*Footer Height*/
    --column_padding_desktop: 10px;
    --column_padding_mobile: 16px; /*Page edges (left & right)*/
    --ssw: 17px;
}

/*Main.*/
/*Palette:*/
:root {
    --cm: #353535;
    --c1: #e5493a; /*Цвет подобранный для лого JMax*/
    --c2: lightgreen;
    --c1_op: rgba(255, 0, 0, 0.3);
    --c_gray: #d1d5d8;
}

/*Palette.*/
/*Variables:*/
/*:root {
    --max_height_target_p: 1000px;
}*/

/*=>*/
/*#ap-target:hover p {
    max-height: var(--max_height_target_p);
}*/
/*.*/
/*Use in JS:*/
/*Example:*/
/*document.documentElement.style.setProperty('--max_height_target_p', ($('#ap-target p')[0].scrollHeight * 1.1 + 40) + "px");*/
/*https://stackoverflow.com/questions/41370741/how-do-i-edit-a-css-variable-using-js*/
/*Use in JS.*/
/*Variables.*/
/*VARS - END.*/


/*MAIN:*/
*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    /*box-sizing: inherit;*//*THIS DESTROY RADIOS*/
    box-sizing: border-box;
}

* {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: #0c0c0c;
    font: 400 20px/1.25 'Montserrat', Tahoma, sans-serif;
    overflow-x: hidden;
    margin: 0;
    /*user-select: none;*/
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    /*-ms-touch-action: none!important;
    touch-action: none!important;*/
}

/*MAIN.*/


/*

 ######      #######     ##           #######     ########      ######
##    ##    ##     ##    ##          ##     ##    ##     ##    ##    ##
##          ##     ##    ##          ##     ##    ##     ##    ##
##          ##     ##    ##          ##     ##    ########      ######
##          ##     ##    ##          ##     ##    ##   ##            ##
##    ##    ##     ##    ##          ##     ##    ##    ##     ##    ##
 ######      #######     ########     #######     ##     ##     ######

*/


/*COLOR CLASSES - START:*/
.ap-c_m {
    color: var(--cm) !important;
}

.ap-c_1 {
    color: var(--c1) !important;
}

.ap-c_2 {
    color: var(--c2) !important;
}

.ap-c_w {
    color: #fff !important;
}

.ap-c_gray {
    color: var(--c_gray) !important;
}

.ap-bc_w {
    background-color: #fff;
}

/*COLOR CLASSES - END.*/


/*SVG COLORS - START:*/
.ap-fill_main {
    fill: var(--cm);
}

.ap-fill_none {
    fill: none;
}

.ap-fr-nz {
    fill-rule: nonzero;
}

.ap-fill_white {
    fill: #fff;
}

.ap-fill_accent {
    fill: #ff3434;
}
/*SVG COLORS - START.*/


/*POSITION:*/
.ap-db {
    display: block;
}

.ap-dib {
    display: inline-block!important;
}

.ap-dn {
    display: none!important;
}

.ap-pr {
    position: relative;
}

.ap-ps {
    position: static;
}

.ap-abs {
    position: absolute;
}

.ap-fix {
    position: fixed;
}

.ap-fl {
    float: left;
}

.ap-uz {
    z-index: 17111977 !important;
}

.ap-uz_2 {
    z-index: 100000000 !important;
}

.ap-ofh {
    overflow: hidden;
}

/*POSITION.*/


/*

########    ##          ########    ##     ##
##          ##          ##           ##   ##
##          ##          ##            ## ##
######      ##          ######         ###
##          ##          ##            ## ##
##          ##          ##           ##   ##
##          ########    ########    ##     ##

*/


/*FLEX:*/
.ap-f-df {
    display: flex;
}

.ap-f-aic {
    align-items: center;
}

.ap-f-aife {
    align-items: flex-end;
}

.ap-f-aifs {
    align-items: flex-start;
}

.ap-f-fdc {
    flex-direction: column;
}

.ap-f-fdr {
    flex-direction: row!important;
}

.ap-f-fdrr {
    flex-direction: row-reverse;
}

.ap-f-jcc {
    justify-content: center;
}

.ap-f-jcfe {
    justify-content: flex-end;
}

.ap-f-jcsb {
    justify-content: space-between;
}

.ap-f-fww {
    flex-wrap: wrap;
}

.ap-f-ffcw {
    flex-flow: column wrap;
}

.ap-f-ffrw {
    flex-flow: row wrap;
}

.ap-f-fg0 {
    flex-grow: 0 !important;
}

.ap-f-fg1 {
    flex-grow: 1;
}

.ap-f-asfs {
    align-self: flex-start;
}

/*FLEX.*/


/*

 ######      ########     ####    ########
##    ##     ##     ##     ##     ##     ##
##           ##     ##     ##     ##     ##
##   ####    ########      ##     ##     ##
##    ##     ##   ##       ##     ##     ##
##    ##     ##    ##      ##     ##     ##
 ######      ##     ##    ####    ########

*/

/*GRID:*/
/*Site width:*/
.ap-sw {
    max-width: var(--sw, 1414px) !important;
    margin: 0 auto;
}
/*Site width.*/

/*Rows:*/
.ap-r {
    display: flex;
    flex-grow: 1;
    width: 100%;
}

.ap-r-neg {
    margin-left: calc(-1 * var(--column_padding_desktop));
    margin-right: calc(-1 * var(--column_padding_desktop));
}

.ap-r-neg_l {
    margin-left: calc(-1 * var(--column_padding_desktop));
}

.ap-r-neg_r {
    margin-right: calc(-1 * var(--column_padding_desktop));
}

.ap-i {
    width: 100%;
    height: 100%;
    display: flex;
}

.ap-w_100 {
    width: 100% !important;
    max-width: none !important;
}

/*Rows.*/

/*Columns:*/
.ap-c,
.ap-c-1,
.ap-c-2,
.ap-c-3,
.ap-c-4,
.ap-c-5,
.ap-c-6,
.ap-c-7,
.ap-c-8,
.ap-c-9,
.ap-c-10,
.ap-c-2-3,
.ap-c-3-4,
.ap-c-2-5,
.ap-c-3-5,
.ap-c-4-5 {
    display: flex;
    flex-direction: column;
}

.ap-c-1 {
    width: 100%;
}

.ap-c-2 {
    width: 50%;
}

.ap-c-3 {
    width: 33.3333%;
}

.ap-c-4 {
    width: 25%;
}

.ap-c-5 {
    width: 20%;
}

.ap-c-6 {
    width: 16.6667%;
}

.ap-c-7 {
    width: 14.2857%;
}

.ap-c-8 {
    width: 12.5%;
}

.ap-c-9 {
    width: 11.1111%;
}

.ap-c-10 {
    width: 10%;
}

.ap-c-2-3 {
    width: 66.6667%;
}

.ap-c-3-4 {
    width: 75%;
}

.ap-c-2-5 {
    width: 40%;
}

.ap-c-3-5 {
    width: 60%;
}

.ap-c-4-5 {
    width: 80%;
}

/*Columns.*/


/*Height:*/
/*.ap-h_100 {
    height: 100%;
}
.ap-h_50 {
    height: 50%;
}*/
/*Height.*/
/*GRID.*/


/*

##     ##       ###       ########      ######      ####    ##    ##     ######
###   ###      ## ##      ##     ##    ##    ##      ##     ###   ##    ##    ##
#### ####     ##   ##     ##     ##    ##            ##     ####  ##    ##
## ### ##    ##     ##    ########     ##   ####     ##     ## ## ##     ######
##     ##    #########    ##   ##      ##    ##      ##     ##  ####          ##
##     ##    ##     ##    ##    ##     ##    ##      ##     ##   ###    ##    ##
##     ##    ##     ##    ##     ##     ######      ####    ##    ##     ######

*/


/*MARGINS:*/
.ap-mb_10 {
    margin-bottom: 10px;
}

.ap-mb_20 {
    margin-bottom: 20px!important;
}

.ap-mb_30 {
    margin-bottom: 30px!important;
}

.ap-mb_40 {
    margin-bottom: 40px;
}

.ap-mb_50 {
    margin-bottom: 50px!important;
}

.ap-mb_60 {
    margin-bottom: 60px!important;
}

.ap-mb_70 {
    margin-bottom: 70px!important;
}

.ap-mb_80 {
    margin-bottom: 80px;
}

.ap-mb_90 {
    margin-bottom: 90px;
}

.ap-mb_100 {
    margin-bottom: 100px!important;
}

.ap-mb_200 {
    margin-bottom: 200px;
}

.ap-mt_10 {
    margin-top: 10px;
}

.ap-mt_20 {
    margin-top: 20px!important;
}

.ap-mt_30 {
    margin-top: 30px;
}

.ap-mt_40 {
    margin-top: 40px;
}

.ap-mt_50 {
    margin-top: 50px!important;
}

.ap-mt_60 {
    margin-top: 60px;
}

.ap-mt_70 {
    margin-top: 70px;
}

.ap-mt_80 {
    margin-top: 80px;
}

.ap-mt_90 {
    margin-top: 90px;
}

.ap-mt_100 {
    margin-top: 100px!important;
}

.ap-mr_20 {
    margin-right: 20px;
}
/*MARGINS.*/


/*PADDINGS:*/
/*Отказ от дефолтных отступов у колонок ap-c-. */
.ap-c_p_d {
    padding-left: var(--column_padding_desktop);
    padding-right: var(--column_padding_desktop);
}

.ap-c_p_m {
    padding-left: var(--column_padding_mobile);
    padding-right: var(--column_padding_mobile);
}

.ap-pb_10 {
    padding-bottom: 10px;
}

.ap-pb_20 {
    padding-bottom: 20px;
}

.ap-pb_30 {
    padding-bottom: 30px;
}

.ap-pb_40 {
    padding-bottom: 40px;
}

.ap-pb_50 {
    padding-bottom: 50px;
}

.ap-pb_60 {
    padding-bottom: 60px;
}

.ap-pb_70 {
    padding-bottom: 70px;
}

.ap-pb_80 {
    padding-bottom: 80px;
}

.ap-pb_90 {
    padding-bottom: 90px;
}

.ap-pb_100 {
    padding-bottom: 100px;
}

.ap-pt_10 {
    padding-top: 10px;
}

.ap-pt_20 {
    padding-top: 20px;
}

.ap-pt_30 {
    padding-top: 30px;
}

.ap-pt_40 {
    padding-top: 40px;
}

.ap-pt_50 {
    padding-top: 50px;
}

.ap-pt_60 {
    padding-top: 60px;
}

.ap-pt_70 {
    padding-top: 70px;
}

.ap-pt_80 {
    padding-top: 80px;
}

.ap-pt_90 {
    padding-top: 90px;
}

.ap-pt_100 {
    padding-top: 100px;
}

.ap-pl_0 {
    padding-left: 0 !important;
}

.ap-pr_0 {
    padding-right: 0 !important;
}

/*PADDINGS.*/


/*OTHER:*/
.ap-op_0 {
    opacity: 0;
}

.ap-op_1 {
    opacity: 1;
}

hr {
    border: 0;
    clear: both;
    display: block;
    width: 100%;
    background-color: var(--c_gray);
    height: 1px;
    margin: 20px 0;
}

/*Add the correct display in IE 10:*/
/*[hidden] {
    display: none;
}*/

picture {
    display: flex;
}

/*OTHER.*/


/*

##     ##    ########       ###       ########     ####    ##    ##     ######       ######
##     ##    ##            ## ##      ##     ##     ##     ###   ##    ##    ##     ##    ##
##     ##    ##           ##   ##     ##     ##     ##     ####  ##    ##           ##
#########    ######      ##     ##    ##     ##     ##     ## ## ##    ##   ####     ######
##     ##    ##          #########    ##     ##     ##     ##  ####    ##    ##           ##
##     ##    ##          ##     ##    ##     ##     ##     ##   ###    ##    ##     ##    ##
##     ##    ########    ##     ##    ########     ####    ##    ##     ######       ######

*/


/*HEADINGS:*/
/*

Golden Ratio Typography (GRT) Calculator:
https://grtcalculator.com/

*/
h1, h2, h3, h4, h5, .ap-p_h1, .ap-p_h2, .ap-p_h3, .ap-p_h4 {
    margin: 0;
    font-family: 'Myriad', sans-serif;
    font-weight: 600;
    line-height: 1.1;
}

body:not(.home) h1, body:not(.home) .ap-p_h1 {
    font-size: 52px;
}

.ap-main-page h1 { /*Typical slogan in design*/
    font-size: 100px;
}

body:not(.home) h2, body:not(.home) .ap-p_h2 {
    font-size: 41px;
}

.home h2, .home .ap-p_h2 {
    font-size: 130px;
}

h3, .ap-p_h3 {
    font-size: 58px;
}

h4, .ap-p_h4 {
    font-size: 46px;
}

/*HEADINGS.*/


/*TEXT:*/
p {
    margin: 0 0 10px;
    text-indent: 0;
}

strong, .ap-b /*deprecated*/
{
    font-weight: 600;
}

.ap-fw_300 {
    font-weight: 300;
}

.ap-fw_400 {
    font-weight: 400;
}

.ap-fw_500 {
    font-weight: 500;
}

.ap-fw_600 {
    font-weight: 600;
}

.ap-fw_700 {
    font-weight: 700;
}

small, .ap-text_small {
    font-size: 16px;
}

.ap-text_big {
    font-size: 25px;
}

.ap-lh_1 {
    line-height: 1;
}

.ap-lh_1_1 {
    line-height: 1.1;
}

.ap-lh_1_4 {
    line-height: 1.4;
}

.ap-tc {
    text-align: center;
}

.ap-tl {
    text-align: left;
}

.ap-tr {
    text-align: right;
}

.ap-ti_0 {
    text-indent: 0;
}

.ap-tt_uc {
    text-transform: uppercase;
}

.ap-td_u {
    text-decoration: underline;
}

.ap-td_lt {
    text-decoration: line-through;
}

.ap-td_n {
    text-decoration: none;
}

.ap-ws_nw {
    white-space: nowrap;
}

.ap-pre {
    font-family: monospace;
}

sup {
    line-height: .1;
    font-size: 16px;
}

/*Lists*/
ul.ap-ul {
    padding-left: 0;
    margin: 0 0 10px;
}

ul.ap-ul.ap-lst_none {
    list-style-type: none;
}

ul li,
ol li {
    text-indent: 0;
    margin: 0 0 10px;
}

/*TEXT.*/


/*LINKS & CURSOR - START:*/
a {
    color: var(--c1);
    text-decoration: none !important;
    transition: color .24s;
}

.ap-cp {
    cursor: pointer;
}

.ap-cd {
    cursor: default;
}

.ap-pe_none {
    pointer-events: none;
}

.ap-pe_all {
    pointer-events: all;
}

/*LINKS & CURSOR - END.*/


/*

########     ##     ##    ########    ########     #######     ##    ##     ######
##     ##    ##     ##       ##          ##       ##     ##    ###   ##    ##    ##
##     ##    ##     ##       ##          ##       ##     ##    ####  ##    ##
########     ##     ##       ##          ##       ##     ##    ## ## ##     ######
##     ##    ##     ##       ##          ##       ##     ##    ##  ####          ##
##     ##    ##     ##       ##          ##       ##     ##    ##   ###    ##    ##
########      #######        ##          ##        #######     ##    ##     ######

*/

/*BUTTONS:*/

.ap-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 70px;
    padding: 0 50px 5px;
    transition: background-color .5s;
    border-radius: 8px;
    background-color: var(--c1);
    color: #fff;
    text-align: center;
    border: none;
    overflow: hidden;
    outline: none;
    cursor: pointer;
    font: 300 30px/1 'Myriad', Tahoma, sans-serif;
}

.ap-btn_small {
    width: 200px;
    height: 45px;
    padding: 0 10px 2px;
    font: 400 14px/1.1 'Myriad', Tahoma, sans-serif;
}

/*BUTTONS.*/


/*AGREEMENT:*/
/*#ap-agreement.ap-fix {
    background-color: #fff;
    width: 340px;
    left: 20px;
    bottom: 30px;
    padding: 15px 10px 20px;
    font-size: 14px;
}*/
/*AGREEMENT.*/


/******************************/
/* END - APELSIN DEFAULT CSS. */
/******************************/


/*

##    ##    ########    ##      ##             ##      ##    ########    ########      ######     ####    ########    ########              ######     ########       ###       ########     ########
###   ##    ##          ##  ##  ##             ##  ##  ##    ##          ##     ##    ##    ##     ##        ##       ##                   ##    ##       ##         ## ##      ##     ##       ##
####  ##    ##          ##  ##  ##             ##  ##  ##    ##          ##     ##    ##           ##        ##       ##                   ##             ##        ##   ##     ##     ##       ##
## ## ##    ######      ##  ##  ##             ##  ##  ##    ######      ########      ######      ##        ##       ######                ######        ##       ##     ##    ########        ##
##  ####    ##          ##  ##  ##             ##  ##  ##    ##          ##     ##          ##     ##        ##       ##                         ##       ##       #########    ##   ##         ##
##   ###    ##          ##  ##  ##             ##  ##  ##    ##          ##     ##    ##    ##     ##        ##       ##                   ##    ##       ##       ##     ##    ##    ##        ##
##    ##    ########     ###  ###               ###  ###     ########    ########      ######     ####       ##       ########              ######        ##       ##     ##    ##     ##       ##

*/

/************************/
/* NEW WEBSITE - START: */
/************************/



/*МОЛНИИ:*/
/*В верхней секции:*/
#ap-neuro_1 {
    width: 100%;
    height: 100vh;
    min-height: 700px;
}

#ap-neuro_2 {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

#ap-neuro_3 {
    width: 100%;
    height: 100%;
    min-height: 700px;
    top: 0;
}

#ap-your-project {
    cursor: default;
    border: solid 1px #2f2e2c;
}

#ap-your-project .ap-btn,
.ap-cta .ap-btn
{
    height: 100px;
    max-width: 50%;
    top: calc(50% - 50px);
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 40px;
}

#ap-your-project .ap-btn:hover, .ap-cta .ap-btn:hover, .ap-bottom .ap-btn:hover {
    background-color: #a71406;
}

#ap-your-project .ap-top, #ap-your-project .ap-bottom {
    font-size: 40px;
}

#ap-your-project .ap-top {
    top: 10%;
    left: 0;
    right: 0;
    text-align: center;
}

#ap-your-project .ap-bottom {
    bottom: 10%;
    left: 0;
    right: 0;
    text-align: center;
}

#ap-your-project .ap-bottom .ap-c-2 {
    margin: 16px 0 0;
    text-transform: uppercase;
}

#ap-your-project .ap-bottom .ap-c-2 {
    z-index: 100000000000;
}

#ap-your-project .ap-bottom .ap-c-2 a {
    color: #fff;
}

#ap-your-project .ap-bottom .ap-c-2 a:hover {
    color: var(--c1);
}
/*МОЛНИИ.*/

.ap-grid.ap-r .ap-c-2 {
    margin-bottom: calc(var(--column_padding_desktop)*2 + 60px);
}

.ap-grid.ap-r .ap-c-2:nth-child(odd) {
    padding-right: 30px;
}
.ap-grid.ap-r .ap-c-2:nth-child(even) {
    padding-left: 30px;
}

.ap-grid.ap-r .ap-c-2 > .ap-r {
    padding-left: var(--column_padding_desktop);
    padding-right: var(--column_padding_desktop);
    width: auto;
}

.ap-portfolio-item {
    color: #fff;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    flex-grow: 0!important;
    max-width: 1089px;
}

.ap-portfolio-item .ap-overlay {
    position: absolute;
    top: 0;
    right: var(--column_padding_desktop);
    bottom: 0;
    left: var(--column_padding_desktop);
    z-index: 1000;
    transition: opacity .2s ease;
}

.ap-overlay picture.ap-cover-img img {
    border-radius: 12px;
}

.ap-portfolio-item .ap-overlay:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.7;
    border-radius: 12px;
    z-index: 10;
}

.ap-grid-portfolio .ap-c-1.ap-f-fdr {
    max-width: 1089px;
}

.ap-portfolio-item.ap-hovered .ap-overlay {
    display: none;
}

.ap-portfolio-item .ap-overlay .ap-cover-img {
    border-radius: 12px;
}

.ap-portfolio-item-top,
.ap-portfolio-item-bottom,
.ap-portfolio-item-logo,
.ap-portfolio-item .ap-btn {
    position: absolute;
    z-index: 100000000;
}

.ap-portfolio-item-top {
    top: 30px;
    left: 40px;
    font-size: 28px;
}

.ap-portfolio-item-bottom {
    bottom: 30px;
    left: 40px;
    max-width: 65%;
    padding: 12px 22px 16px;
    font-size: 26px;
}

.ap-portfolio-item-bottom:before {
    content: "";
    position: absolute;
    background-color: rgba(0,0,0,.65);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 8px;
}

.ap-portfolio-item-bottom .ap-u {
    margin-bottom: 10px;
    color: #737373;
}

.ap-portfolio-item-logo {
    width: 25%;
    height: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 25px;
}

.ap-portfolio-item-arrows {
    position: absolute;
    top: calc(50% - 30px);
    display: flex;
    justify-content: space-between;
    width: calc(100% - var(--column_padding_desktop)*2);
}

.ap-portfolio-item-arrow {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, .65);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    font-weight: 100;
    padding-bottom: 13px;
    cursor: pointer;
}

.ap-portfolio-item-arrow-left {
    margin-left: 30px;
}

.ap-portfolio-item-arrow-right {
    margin-right: 30px;
}

.ap-grid-portfolio .ap-c-1 span {
    color: var(--c1);
    font-weight: 700;
}
.ap-grid-portfolio .ap-c-1 span.ap-u {
    font-weight: 600;
}

.ap-portfolio-item video {
    width: 100%;
    height: 100%;
    outline: none!important;
    border: none!important;
}

.ap-portfolio-item video:focus {
    outline: none!important;;
}

/*.smooth-video {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    display: block;*/
/*    !* Принудительно выносим видео на GPU-слой – это стабилизирует алгоритм *!*/
/*    transform: translateZ(0);*/
/*    backface-visibility: hidden;*/
/*    will-change: transform;*/
/*    !* Явно задаём качественное сглаживание (значение по умолчанию) *!*/
/*    image-rendering: auto;*/
/*}*/

/*.sharp-video {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    display: block;*/
/*    !* Отключаем интерполяцию – только целочисленное масштабирование *!*/
/*    image-rendering: crisp-edges;*/
/*    !* Для Chromium-браузеров иногда нужен синоним *!*/
/*    image-rendering: pixelated;*/
/*    !* Фиксация слоя для предсказуемости *!*/
/*    transform: translateZ(0);*/
/*}*/
/**/

/*.video-container {*/
/*    width: 100%;*/
/*    max-width: 1920px; !* по желанию *!*/
/*    overflow: hidden;*/
/*    !* Высота будет управляться через JS *!*/
/*}*/

/*.video-container video {*/
/*    display: block;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    !* Стабилизируем рендеринг на GPU *!*/
/*    transform: translateZ(0);*/
/*    backface-visibility: hidden;*/
/*}*/

.canvas-wrapper {
    width: 100%;
    max-width: 1920px; /* ограничение по желанию */
    overflow: hidden;  /* обрезаем возможные артефакты */
    line-height: 0;    /* убирает лишний межстрочный зазор */
}

canvas {
    display: block;
    /* размеры будут управляться JS */
    will-change: transform;    /* помогает GPU-слою */
    transform: translateZ(0);  /* фиксация на отдельном слое */
    backface-visibility: hidden;
    /* убираем возможные субпиксельные артефакты */
    image-rendering: auto;
}

.hidden-video {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/*SHADOWS:*/
/*.ap-box-shadow {
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), 0 -3px 0 inset rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), 0 -3px 0 inset rgba(0, 0, 0, .2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), 0 -3px 0 inset rgba(0, 0, 0, .2);
}*/
/*.ap-text-shadow {

}*/
/*SHADOWS.*/

/*BORDERS:*/
/*.ap-border {

}*/
/*BORDERS.*/

/*HEADER:*/
#ap-header {
    height: var(--hh);
    background-color: #fff;
}

#ap-header .ap-r > .ap-c {
    flex: 1;
}

#ap-header .ap-r > .ap-c.ap-left {
    flex-grow: 0;
}
/*HEADER.*/


/*MAIN MENU:*/
/*Menu in header:*/
.ap-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
}

.ap-menu a {
    font-weight: 500;
    margin: 0 26px;
    color: var(--cm)!important;
    display: inline-block;
    transition: -webkit-transform .24s;
    transition: transform .24s;
    transition: transform .24s,-webkit-transform .24s;
    text-decoration: none; /*Убрать отсюда...*/
    font-size: 18px;
    white-space: nowrap;
}

body #page #ap-header .current_page_item a {
    color: var(--c1)!important;
    pointer-events: none;
    cursor: default;
}

.ap-menu a:hover {
    color: var(--c1)!important;
}
/*Menu in header.*/
/*MAIN MENU.*/


/*TOP SECTION:*/
.ap-r_top, .ap-r_fh {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background-color: #0c0c0c;
    color: #fff;
}

/*.ap-bottom.ap-r_fh {
    min-height: 800px;
}*/



.ap-r_top {
    border-bottom: solid 1px #2f2e2c;
}
/*TOP SECTION.*/

/*RUBBER:*/
.ap-r-rubber {
    width: 88%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-r-rubber.ap-u {
    justify-content: space-between;
    text-transform: uppercase;
    font-size: 120px;
}
.ap-r-rubber.ap-u div:first-child {
    text-align: left;
}
.ap-r-rubber.ap-u div:last-child {
    text-align: right;
}

.ap-r-rubber h1 {
    margin: 0;
    padding: 0;
    font-weight: 700;
    white-space: nowrap;     /* запрещаем перенос строк */
    display: inline-block;   /* чтобы ширина определялась содержимым */
    /* начальный размер не важен – скрипт перезапишет */
    font-size: 246px;
    transition: font-size 0.05s ease; /* для плавности при ресайзе (опционально) */
    text-transform: uppercase;

    font-family: Myriad, Tahoma, sans-serif;
}

.ap-r_top .ap-r_first {
    margin-top: 3vh;
    margin-bottom: 4vh;
    font-size: 20px;
}

.ap-r_first .ap-desc {
    border: 1px solid #2f2e2c;
    font-weight: 300;
    text-align: center;
    padding: 16px 26px;
    margin-right: 16px;
    border-radius: 6px;
}

.ap-r_first .ap-right {
    text-transform: uppercase; /*Повторов много...*/
    font-size: 33px;
    z-index: 30000000;
}

.ap-r_first .ap-right .ap-c {
    margin-left: 70px;
}

.ap-r_first .ap-right a {
    color: #fff;
}

.ap-r_first .ap-right a:hover {
    color: var(--c1);
}

@media (max-width: 1900px) {                /*?!*/
    .ap-r_first .ap-right {
        font-size: 30px;
    }
    .ap-r_first .ap-right .ap-c {
        margin-left: 50px;
    }
}

@media (max-width: 1360px) {
    .ap-r_top .ap-r_first {
        font-size: 18px;
    }
}
/*RUBBER.*/

/*BOTTOM MENU:*/
.ap-bottom-fixed-menu {
    position: fixed;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 200000000;
    align-items: center;
}

.ap-bottom-fixed-menu .ap-inner {
    padding: 16px;
}

.ap-bottom-fixed-menu .ap-inner:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    background-color: #2f2e2c;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 8px;
}

.ap-bottom-fixed-menu .ap-btn {
    margin-right: 16px;
    color: #fff;
    width: auto;
    height: 70px;
    padding: 0 50px 5px;
    font-size: 30px;
    font-weight: 300;
    transition: background-color .5s;
    border-radius: 8px;
}

.ap-bottom-fixed-menu .ap-btn:last-child {
    margin-right: 0;
}

.ap-bottom-fixed-menu .ap-btn:not(.ap-u) {
    background: #2f2e2c;
}

.ap-bottom-fixed-menu .ap-btn:hover {
    background-color: #0c0c0c;
}
.ap-bottom-fixed-menu .ap-btn.ap-u:hover {
    background-color: #a71406;
}

/*@media (max-width: 1360px) {
    .ap-bottom-fixed-menu {
        display: none;
    }
}*/
/*BOTTOM MENU.*/

.ap-top-logo_outer {
    margin-top: 2px;
    margin-bottom: 13px;
}

.ap-top-desc_outer {
    position: absolute;
    top: 42vh;
    color: #fff;
    text-transform: uppercase;
    font-size: 33px;
    line-height: 1.45;
}

.ap-top-about_outer {
    position: absolute;
    bottom: 17vh;
    color: #fff;
    text-transform: uppercase;
    font-size: 23.6px;  /*DEV*/
}

/*ДВИЖУЩАЯСЯ ТОЧКА ПО ЛИНИИ:*/
/* Контейнер линии – позиционирование как у вас, без фиксированной высоты */
.line-container {
    width: 50px;
    top: 1vh;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    /* Высота задаётся через JS */
}

.line-container svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Плавное исчезновение/появление круга */
#movingGroup circle {
    transition: opacity 0.15s ease;
}
/*ДВИЖУЩАЯСЯ ТОЧКА ПО ЛИНИИ.*/

/*УСЛУГИ НА ФОНЕ:*/
.ap-top-services {
    height: 50%;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
}

.ap-top-services .ap-top-service {
    position: absolute;
    opacity: .2;
}
/*УСЛУГИ НА ФОНЕ.*/


/*СЕКЦИЯ ОТЗЫВОВ:*/
#ap-reviews .ap-caption {
    font-size: 52px;
    margin-top: 24px;
    margin-bottom: 30px;
}
/*СЕКЦИЯ ОТЗЫВОВ.*/

/*СЛАЙДЕР ОТЗЫВОВ (горизонтальный):*/
/*#ap-reviews .swiper-wrapper .swiper-slide {
    height: auto!important;
}
#ap-reviews .ap-swiper {
    height: 500px;
}*/
/*СЛАЙДЕР ОТЗЫВОВ  (горизонтальный).*/

/*СЛАЙДЕР(Ы) ОТЗЫВОВ (вертикальный(ые)):*/
/*.ap-reviews_bg {*/
/*    padding-top: 30px;*/
/*    padding-bottom: 30px;*/
/*    background-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 25%, rgb(255, 235, 225) 50%, rgb(229, 245, 255) 75%, rgb(229, 245, 255) 100%);*/
/*    background-size: 65%;*/
/*    background-repeat: no-repeat;*/
/*    background-position: right;*/

/*}*/

/*.ap-reviews_outer .ap-c-2:first-child {*/
/*    padding-left: 10px;*/
/*}*/

/*.ap-reviews_outer .ap-c-2:last-child {*/
/*    -webkit-mask-image: -webkit-gradient(linear, left 8%, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));*/
/*}*/
/*.ap-reviews_outer .ap-c-2:last-child > .ap-r {*/
/*    -webkit-mask-image: -webkit-gradient(linear, left 92%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));*/
/*}*/

/*.ap-twigs {*/
/*    margin: 20px 0 50px;*/
/*}*/

/*.ap-twigs img {*/
/*    max-height: 120px;*/
/*}*/

/*.ap-twigs img:first-child {*/
/*    margin-right: 70px;*/
/*}*/

/*.vertical-loop {*/
/*    position: relative;*/
/*    width: 50%;*/
/*    height: 600px;*/
/*    overflow: hidden;*/
/*}*/

/*.loop-track {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    will-change: transform;*/
/*}*/

/*.loop-slide {*/
/*    width: 100%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    box-sizing: border-box;*/
/*    padding: 10px;*/
/*    !*!*!content-visibility: auto;*/
/*    !*!*!contain-intrinsic-size: auto 250px; !* примерная высота, можно подстроить *!*/
/*}*/

/*#ap-reviews .loop-slide .ap-review {*/
/*    background-color: #fff;*/
/*    border-radius: 16px;*/
/*    padding: 20px;*/
/*    box-shadow: rgba(145, 158, 171, 0.08) 0 0 2px 0, rgba(145, 158, 171, 0.08) 0 3px 6px -4px;*/
/*}*/

/*#ap-reviews .ap-star {*/
/*    width: 16px;*/
/*    height: 16px;*/
/*    vertical-align: bottom;*/
/*    -webkit-mask: url(/wp-content/uploads/star.svg) no-repeat center;*/
/*    mask: url(/wp-content/uploads/star.svg) no-repeat center;*/
/*    -webkit-mask-size: contain;*/
/*    mask-size: contain;*/
/*    background: #ffcc00;*/
/*    margin-left: 2px;*/
/*}*/

/*#ap-reviews .ap-geo-logo {*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    background-image: url(/wp-content/uploads/geo-icon.svg);*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    background-size: contain;*/
/*}*/

/*#ap-reviews .ap-yandex-logo {*/
/*    width: 140px;*/
/*    height: 32px;*/
/*    background-image: url(/wp-content/uploads/yandex-map-logo.svg);*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    background-size: contain;*/
/*}*/

/*#ap-reviews .ap-2gis-logo {*/
/*    width: 105px;*/
/*    height: 20.64px;*/
/*    background-image: url(/wp-content/uploads/2gis-logo.svg);*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*}*/

/*#ap-reviews .ap-from-site-review {*/
/*    width: 135.53px;*/
/*    height: 20.64px;*/
/*    background-image: url(/wp-content/uploads/from-site.svg);*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*}*/

/*#ap-reviews .ap-google-logo {*/
/*    width: 70px;*/
/*    height: 22.8px;*/
/*    background-image: url(/wp-content/uploads/google-logo.svg);*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*}*/

/*#ap-reviews .ap-text-content {*/
/*    margin: 14px 0 20px;*/
/*    font-size: 15px;*/
/*}*/

/*#ap-reviews .ap-reviewer-avatar {*/
/*    width: 50px;*/
/*    height: 50px;*/
/*    margin-right: 14px;*/
/*}*/

/*#ap-reviews .ap-reviewer-avatar img {*/
/*    border-radius: 50px;*/
/*}*/

/*#ap-reviews .ap-reviewer-name {*/
/*    font-size: 17px;*/
/*    margin-bottom: 2px;*/
/*}*/
/*СЛАЙДЕР(Ы) ОТЗЫВОВ (вертикальный(ые)).*/

/*DS-слайдер:*/
.vertical-loop,
.horizontal-loop {
    position: relative;
    overflow: hidden;
}
.loop-track {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}
.vertical-loop .loop-slide {
    width: 100%;
}
#ap-work-with-us-slider.horizontal-loop .loop-track,
#ap-techs-slider.horizontal-loop .loop-track {
    display: flex;
    flex-direction: row;
}
#ap-work-with-us-slider.horizontal-loop .loop-slide {
    flex-shrink: 0;
    width: 16%;
}

#ap-work-with-us-slider {
    height: 170px;
}

#ap-techs-slider.horizontal-loop .loop-slide {
    flex-shrink: 0;
    width: auto;
}

#ap-techs-slider {
    height: 170px;
}

#ap-techs-slider .ap-tech {
    color: lightgray;
    font-size: 50px;
    font-weight: bold;
}

/*#ap-techs-slider .loop-track  {
    align-items: center;
    justify-content: center;
}*/

#ap-techs-slider .loop-slide {
    padding-left: 20px;
    padding-right: 20px;
    /*display: flex;*/
    transform-origin: center;
    padding-top: 30px;
}
/*DS-слайдер.*/

/*FAQ:*/
.ap-qs h3:not(.ap-qs-inner),
.ap-qs h4:not(.ap-qs-inner),
.ap-qs .ap-ps_h3
{
    font-weight: 500;
    padding-left: 62px;
    position: relative;
    cursor: pointer;
    margin: 15px 0;
    line-height: 1.35;
}

.ap-qs:not(.ap-qs-inner) h4 {
    font-size: 40px;
}

.ap-qs h3:not(.ap-qs-inner),
.ap-qs .ap-ps_h3
{
    font-size: 20px;
    line-height: 1.5;
    display: flex;
}

.ap-qs h3:not(.ap-qs-inner):after,
.ap-qs h4:not(.ap-qs-inner):after,
.ap-qs .ap-ps_h3:after
{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 40px;
    height: 40px;
    background-image: url(/wp-content/uploads/cross.svg);
    background-repeat: no-repeat;
    background-size: cover;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    -o-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.ap-qs-h:before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-color: #fff;
    opacity: .2;
}

h4:not(.ap-qs-inner).ap-qs-opened {
    color: var(--c1);
}

h4:not(.ap-qs-inner).ap-qs-opened:after,
.ap-qs .ap-ps_h3.ap-qs-opened:after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.ap-qs > div {
    height: 0;
    overflow: hidden;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    font-size: 18px;
}

div.ap-qs-opened {
    height: auto;
}

.ap-qs p {
    text-indent: 62px;
    line-height: 1.5;
    font-size: 24px;
}

.ap-qs li {
    margin-bottom: 6px;
}

.ap-qs h3.ap-qs-inner {
    margin-top: 20px;
    margin-bottom: 10px;
}

.ap-c-type_1 {
    padding: 20px 34px;
    background-color: #1b1b1b;
    border-radius: 12px;
}
/*FAQ.*/


/*КОНТАКТЫ:*/
#ap-contacts .ap-level_0 {
    font-size: 60px;
}

#ap-contacts .ap-level_1 {
    font-size: 40px;
    margin-bottom: 20px;
}
#ap-contacts .ap-level_2 {
    font-size: 26px;
    margin-bottom: 10px;
}
#ap-contacts .ap-level_3 {
    font-size: 20px;
    margin-bottom: 8px;
}

#ap-contacts .ap-contacts-logo-jmax {
    top: 20px;
    right: 30px;
}

#ap-contacts .ap-contacts-logo-apelsin {
    top: 10px;
    left: 30px;
}

#ap-contacts .ap-contacts-logo-jmax svg {
    width: 200px;
    height: auto;
}
/*КОНТАКТЫ.*/


/*ФОРМА ЗАХВАТА ВНИЗУ:*/
.ap-bottom.ap-r_fh {
    border-top: solid 1px #2f2e2c;
    padding-bottom: 100px;
}

.ap-bottom > .ap-sw:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none; /* чтобы оверлей не перехватывал клики */
    background: radial-gradient(
            ellipse farthest-side at center,
            #0c0c0c 0%,
            #0c0c0c calc(100% - 100px),
            transparent 100%
    );
    width: 140%;
    height: 140%;
    left: -20%;
    top: -20%;
    z-index: 100000000;
}

.ap-bottom-form {
    z-index: 100000000;
    position: relative;
}

.ap-bottom .ap-btn {
    height: 100%;
    font-size: 40px;
    letter-spacing: 1px;
}

.ap-bottom .ap-c-3,
.ap-bottom .ap-c-2
{
    padding: 0 20px;
}

.ap-bottom .ap-form-element {
    width: 100%;
    height: 102px;
}

.ap-big-messes a {
    color: #fff;
    display: flex;
    padding: 30px;
    background-color: #1b1b1b;
    border-radius: 8px;
}

.ap-big-messes a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.ap-big-messes .ap-u {
    font-size: 40px;
    font-weight: 300;
}
/*ФОРМА ЗАХВАТА ВНИЗУ.*/

/*CAPTIONS:*/
/*?Deprecated*/ /*Use ap-p_h2 etc.*/
/*CAPTIONS.*/

/*HOMEPAGE:*/
/*HOMEPAGE.*/


/*BREADCRUMBS:*/
.ap-breadcrumbs {
    margin: 20px 0;
}
/*BREADCRUMBS.*/


/*INNER PAGES:*/
/*INNER PAGES.*/

/*SWIPER:*/
.ap-swiper.ap-swiper_simple {
    box-sizing: content-box;
}

.ap-swiper_wrapper, .ap-swiper.ap-swiper_simple img {
    width: 100%!important;
    border-radius: 12px;
}
/*Swiper Controls:*/
.ap-slider-controls {
    left: 30px;
    bottom: 20px;
    z-index: auto;
}
.ap-slider-control {
    border: 1px solid #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: #fff;
    fill: #fff;
    stroke: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;

    z-index: 1234;
}
.ap-slider-controls .ap-prev {
    margin-right: 10px;
}
.ap-slider-control:hover {
    transform: scale(1.08);
}
.ap-slider-control svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
}
.ap-slider-control.ap-next svg {
    transform: rotate(-45deg);
}
.ap-slider-control.ap-prev svg {
    transform: rotate(-225deg);
}
.ap-slider-controls.ap-u2 {
    left: auto;
    right: 30px;
    bottom: 26px;
}
.ap-slider-controls.ap-u3 {
    left: auto;
    right: auto;
    bottom: calc(50% - 30px);
    width: 100%;
    justify-content: space-between;
    padding: 0 30px;
}
.ap-portfolio-item.ap-hovered .ap-slider-control {
    background-color: var(--c1);
    border-color: var(--c1);
}
.fancybox__container {
    z-index: 1000000000;
}
/*Swiper Controls.*/
/*SWIPER.*/

/*PANELS:*/
.ap-panel {
    z-index: 10000000;
    height: 100vh;
    top: 0;
}

.ap-r-panel {
    width: 500px;
    right: -500px;
    z-index: 10000000000;
    height: calc(100vh + 5px);
    transition: right .35s;
}

.ap-call-panel {
    width: 800px;
    right: -800px;
}

.ap-menu-panel {
    width: 500px;
    right: -500px;
}

.ap-panel.ap-panel-opened::before {
    content: "";
    display: block;
    background: hsla(0,0%,79%,0.55);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    z-index: -1;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition: opacity .25s ease-in-out;
}

.ap-r-panel.ap-panel-opened {
    right: 0;
}

.ap-panel-content {
    height: calc(100vh - 105px);
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 50px 20px 70px;
    -webkit-mask-image: -webkit-gradient(linear, left 92%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

.ap-panel .ap-u {
    height: 100%;
    /*NEED FOR SCROLL*/
    position: relative;
    background-color: #0c0c0c;
    color: #fff;
}

.ap-panel-content::-webkit-scrollbar {  /*!!!CROSS*/
    width: 0;
}

.ap-panel-header {
    height: 110px;
    padding: 0 34px;
}

.ap-panel-inner {
    width: 100%;
    opacity: 0;
    position: relative;
    left: 30px;
}

.ap-panel.ap-panel-opened .ap-panel-inner {
    opacity: 1!important;
    left: 0!important;
    transition: all .4s;
    transition-delay: .3s;
}

.ap-toggle-panel {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 24px;
    right: 24px;
    cursor: pointer;
}

/*Внутренности панелей:*/
.ap-r-panel .ap-p_h2 {
    font-size: 70px!important;
}

.ap-r-panel .ap-form-element {
    font-size: 22px;
}

.ap-form_invalid .ap-call-tel {
    background-color: #ffb8ab;
}

/*Меню:*/
.ap-panel-menu ul {
    list-style-type: none;
    margin: 0 0 50px;
    padding: 0;
}
.ap-panel-menu ul li {
    margin-bottom: 20px;
}
.ap-panel-menu ul a {
    color: var(--cm);
    text-decoration: none;
    font-size: 30px;
    transition: color .3s;
}
.ap-panel-menu ul a:hover {
    color: var(--c1);
}
.ap-panel-menu .current-menu-item a {
    cursor: default;
    color: var(--c1);
}
/*Меню.*/
/*Внутренности панелей.*/


/*ГАМБУРГЕР:*/
/* ===== Бургер-кнопка ===== */
.ap-burger {
    position: relative;
    width: 30px;
    height: 40px;
    pointer-events: all;
    transition-duration: 0.2s;
}

/* === Общие стили для левой и правой половин === */
.ap-burger .ap-icon-left,
.ap-burger .ap-icon-right {
    position: absolute;
    top: 20px;
    width: 15px;
    height: 2px;
    background-color: #fff;
    transition-duration: 0.2s;
}

.ap-burger .ap-icon-left {
    left: 0;
}

.ap-burger .ap-icon-right {
    left: 15px;
}

/* === Псевдоэлементы (верхняя и нижняя полоски) === */
.ap-burger .ap-icon-left::before,
.ap-burger .ap-icon-left::after,
.ap-burger .ap-icon-right::before,
.ap-burger .ap-icon-right::after {
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: #fff;
    content: "";
    transition-duration: 0.2s;
}

.ap-burger .ap-icon-left::before,
.ap-burger .ap-icon-right::before {
    top: -10px;
}

.ap-burger .ap-icon-left::after,
.ap-burger .ap-icon-right::after {
    top: 10px;
}

/* === Состояние «открыто» (крестик) === */
.ap-burger.open .ap-icon-left,
.ap-burger.open .ap-icon-right,
.ap-burger.open .ap-icon-left::before,
.ap-burger.open .ap-icon-left::after,
.ap-burger.open .ap-icon-right::before,
.ap-burger.open .ap-icon-right::after {
    background-color: var(--cm);
}

.ap-burger.open .ap-icon-left,
.ap-burger.open .ap-icon-right {
    background: transparent;
}

.ap-burger.open .ap-icon-left::before {
    transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
}

.ap-burger.open .ap-icon-left::after {
    transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
}

.ap-burger.open .ap-icon-right::before {
    transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
}

.ap-burger.open .ap-icon-right::after {
    transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
}

.ap-panel .ap-icon-left,
.ap-panel .ap-icon-right,
.ap-panel .ap-icon-left::before,
.ap-panel .ap-icon-right::before,
.ap-panel .ap-icon-left::after,
.ap-panel .ap-icon-right::after {
    background-color: var(--cm);
}

.ap-r-menu-opener .ap-burger:hover .ap-icon-left,
.ap-r-menu-opener .ap-burger:hover .ap-icon-right,
.ap-burger:hover .ap-icon-left::before,
.ap-burger:hover .ap-icon-left::after,
.ap-burger:hover .ap-icon-right::before,
.ap-burger:hover .ap-icon-right::after {
    background-color: var(--c1) !important;
}
/*ГАМБУРГЕР.*/
/*PANELS.*/

/*MODALS:*/
.ap-m-c {
    top: -18px;
    right: -2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: .5;
}
.ap-m-c:hover {
    opacity: 1;
}
.ap-m-c:before, .ap-m-c:after {
    position: absolute;
    left: 7px;
    width: 2px;
    height: 16px;
    content: ' ';
    background-color: var(--c1);
}
.ap-m-c:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ap-m-c:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.ap-m-m-i {
    z-index: 1000000000000;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    background-color: rgba(0, 0, 0, .87);
}
.ap-m-m {
    z-index: 100000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.ap-m-m > .ap-i {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 12px;
    justify-content: center;
}
.ap-m-m {
    -webkit-transition: -webkit-transform 150ms;
    -o-transition: transform 150ms;
    transition: transform 150ms, -webkit-transform 150ms;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    border-radius: 30px;
}
/*Specific dimensions of each:*/
#ap-call-modal .ap-m-m {
    width: 275px;
    max-width: 300px;
    height: 200px !important;
    /*Перебив подсчёта JS, который писался не под этот маленький блок*/
}
/*Specific dimensions of each.*/

#ap-call-modal {
    z-index: 1000000000000;
    color: var(--cm);
    text-align: center;

}

/*Modal States:*/
.ap-modal-open-state {
    overflow: hidden !important;
    position: relative !important;
    height: 100% !important;
}
.ap-modal-open-state.ap-narrow-screen {
    overflow-y: visible !important;
    height: auto !important;
}
.ap-modal-open-state.ap-narrow-screen .ap-m-m {
    top: 30px;
    bottom: auto;
}
.ap-modal-open-state .ap-desktop/*, .ap-modal-open-state .ap-desktop header*/ {
    padding-right: var(--ssw) !important;
}
/*@media screen and (min-width: 1900px) {
    .ap-modal-open-state-header {
        position: static;
        margin-bottom: -100px;
    }
}*/
.ap-modal-close-state {
    overflow: auto !important;
    overflow-x: hidden !important;
    height: inherit !important;
    position: inherit !important;
    margin-right: 0 !important;
}
/*Modal States.*/
/*MODALS.*/


/*ЭЛЕМЕНТЫ ФОРМ:*/
.ap-form-element {
    padding: 0 18px;
    min-height: 60px;
    color: var(--cm);
    background: #f8f8f8;
    border: none;
    outline: none;
    max-width: 100%;
    width: 100%;
    resize: none;
    font: 400 32px/1.25 'Myriad', Tahoma, sans-serif;
    border-radius: 8px;
}

textarea.ap-form-element {
    resize: vertical;
    min-height: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ap-form-element_caption {
    margin-bottom: 5px;
}
/*ЭЛЕМЕНТЫ ФОРМ.*/


/*Loader:*/
.ap-cf-send.ap-on-process {
    opacity: .7;
    pointer-events: none;
}

.ap-quiz-loader {
    color: #fff;
    font-size: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    -webkit-animation: mulShdSpin 1.3s infinite linear;
    animation: mulShdSpin 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    left: 0;
    top: 45%;
    right: 0;
    margin: 0 auto;
    z-index: 01012025;
    opacity: 0;
    -webkit-transition: opacity .1s;
    -o-transition: opacity .1s;
    transition: opacity .1s;
    display: inline-block;
}

.ap-on-process .ap-quiz-loader {
    opacity: 1;
}

@-webkit-keyframes mulShdSpin {
    0%,
    100% {
        -webkit-box-shadow: 0 -3em 0 0.2em,
        2em -2em 0 0, 3em 0 0 -1em,
        2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 0;
        box-shadow: 0 -3em 0 0.2em,
        2em -2em 0 0, 3em 0 0 -1em,
        2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 0;
    }
    12.5% {
        -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
        3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
        3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 -1em;
    }
    25% {
        -webkit-box-shadow: 0 -3em 0 -0.5em,
        2em -2em 0 0, 3em 0 0 0.2em,
        2em 2em 0 0, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 -0.5em,
        2em -2em 0 0, 3em 0 0 0.2em,
        2em 2em 0 0, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 -1em;
    }
    37.5% {
        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0,
        -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0,
        -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    50% {
        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em,
        -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em,
        -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
        -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
        -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
        -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
        box-shadow: 0 -3em 0 0, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
    }
}

@keyframes mulShdSpin {
    0%,
    100% {
        -webkit-box-shadow: 0 -3em 0 0.2em,
        2em -2em 0 0, 3em 0 0 -1em,
        2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 0;
        box-shadow: 0 -3em 0 0.2em,
        2em -2em 0 0, 3em 0 0 -1em,
        2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 0;
    }
    12.5% {
        -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
        3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
        3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 -1em;
    }
    25% {
        -webkit-box-shadow: 0 -3em 0 -0.5em,
        2em -2em 0 0, 3em 0 0 0.2em,
        2em 2em 0 0, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 -0.5em,
        2em -2em 0 0, 3em 0 0 0.2em,
        2em 2em 0 0, 0 3em 0 -1em,
        -2em 2em 0 -1em, -3em 0 0 -1em,
        -2em -2em 0 -1em;
    }
    37.5% {
        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0,
        -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0,
        -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    50% {
        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em,
        -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em,
        -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
        -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
        -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
    }
    87.5% {
        -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
        box-shadow: 0 -3em 0 0, 2em -2em 0 -1em,
        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
        -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
    }
}
/*Loader.*/

/*FOOTER:*/
#ap-footer {
    background-color: #333333;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1), 2px 2px 1px rgba(0, 0, 0, 1), 2px 2px 3px rgba(0, 0, 0, 1), 2px 2px 5px rgba(0, 0, 0, 1);
}

.ap-apelsin-copyright {
    z-index: 1977;
}

.ap-apelsin-copyright img {
    width: 31px;
    height: 26px;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    padding-left: 2.5px;
    padding-right: 2.5px;
    position: relative;
    top: 7px;
    transition: filter .5s;
}

.ap-apelsin-copyright:hover img {
    -webkit-filter: grayscale(0);
    filter: none;
}
/*FOOTER.*/


/************************/
/* NEW WEBSITE - END: */
/************************/

/**********************************************************************************************************************************************************************************************************************************************/


/*

   ###       ########        ###       ########     ########    ####    ##     ##    ########
  ## ##      ##     ##      ## ##      ##     ##       ##        ##     ##     ##    ##
 ##   ##     ##     ##     ##   ##     ##     ##       ##        ##     ##     ##    ##
##     ##    ##     ##    ##     ##    ########        ##        ##     ##     ##    ######
#########    ##     ##    #########    ##              ##        ##      ##   ##     ##
##     ##    ##     ##    ##     ##    ##              ##        ##       ## ##      ##
##     ##    ########     ##     ##    ##              ##       ####       ###       ########

*/


/*PARTICULARS AP-MOBILE & AP-DESKTOP:*/
.ap-mobile {

}

.ap-desktop {

}

.ap-dh_1453_b,
.ap-dh_1453_f,
.ap-dh_1453_ib {
    display: none;
}


/*PARTICULARS AP-MOBILE & AP-DESKTOP.*/




/*"АДАПТИВ" после очень широкого QHD-сайта (2258px):*/

@media (max-width: 2320px) {
    .ap-sw {
        max-width: 90%!important;
    }

    .home h2, .home .ap-p_h2 {
        font-size: 110px;
        line-height: 1;
    }

    h3, .ap-p_h3 {
        font-size: 40px;
    }

    h4, .ap-p_h4 {
        font-size: 38px;
    }

    /*Top Section:*/
    .ap-top-desc_outer {
        top: 46vh;
        font-size: 25px;
    }
    /*Top Section.*/


    /*Вопрос-ответ:*/
    .ap-qs:not(.ap-qs-inner) h4 {
        font-size: 32px;
    }

    .ap-qs p {
        font-size: 20px;
    }

    .ap-qs h3:not(.ap-qs-inner):after, .ap-qs h4:not(.ap-qs-inner):after, .ap-qs .ap-ps_h3:after {
        width: 30px;
        height: 30px;
    }

    .ap-qs-h:before {
        left: -8px;
        top: 1px;
        width: 46px;
        height: 46px;
    }
    /*Вопрос-ответ.*/


    /*Контакты:*/
    #ap-contacts .ap-level_2 {
        font-size: 24px;
    }
    #ap-contacts .ap-level_3 {
        font-size: 18px;
    }
    /*Контакты.*/

    .ap-form-element {
        font-size: 26px;
    }

    .ap-bottom .ap-btn {
        font-size: 36px;
    }

    .ap-big-messes .ap-u {
        font-size: 32px;
    }

    .ap-big-messes svg {
        width: 50px;
        height: 50px;
    }

    /*Fixed Menu:*/
    .ap-bottom-fixed-menu {
        transform: scale(0.842);
        transform-origin: bottom;
    }
    /*Fixed Menu.*/

    /*Buttons:*/
    #ap-your-project .ap-btn, .ap-cta .ap-btn {
        font-size: 36px;
    }
    /*Buttons.*/

    #ap-your-project .ap-top, #ap-your-project .ap-bottom {
        font-size: 30px;
    }

    /*С нами работают:*/
    #ap-work-with-us-slider.horizontal-loop .loop-slide {
        padding: 0 40px;
        width: 20%;
    }
    /*С нами работают.*/

}

@media (max-width: 1900px) {
    #ap-your-project .ap-btn, .ap-cta .ap-btn {
        font-size: 30px;
    }

    #ap-your-project .ap-top, #ap-your-project .ap-bottom {
        font-size: 26px;
    }
}


@media (max-width: 1860px) {
    #ap-contacts .ap-c-1.ap-c_inner {
        padding-top: 90px;
    }

    #ap-your-project .ap-top, #ap-your-project .ap-bottom {
        font-size: 24px;
    }

    #ap-your-project .ap-btn {
        font-size: 28px;
    }

    .ap-bottom > .ap-sw:before {
        content: none;
    }
}


@media (max-width: 1600px) {

    .ap-desc_2 {
        display: none;
    }

    .home h2, .home .ap-p_h2 {
        font-size: 100px;
    }

    h3, .ap-p_h3 {
        font-size: 36px;
    }

    h4, .ap-p_h4 {
        font-size: 30px;
        font-weight: 500;
    }

    .ap-case-features {
        font-size: 18px;
    }

    /*Top Section:*/
    .ap-top-desc_outer {
        top: 46vh;
        font-size: 25px;
    }

    #ap-slogan-center {
        display: none;
    }
    /*Top Section.*/

    /*Скрытие меню:*/
    .ap-bottom-fixed-menu {
        display: none;
    }
    /*Скрытие меню.*/

    #ap-your-project .ap-top, #ap-your-project .ap-bottom {
        font-size: 22px;
    }

    #ap-your-project .ap-btn, .ap-cta .ap-btn {
        font-size: 26px;
        height: 74px;
    }

    /*Вопрос-ответ:*/
    .ap-qs:not(.ap-qs-inner) h4 {
        font-size: 28px;
    }

    .ap-qs p {
        font-size: 18px;
        text-indent: 42px;
    }

    .ap-qs h3:not(.ap-qs-inner):after, .ap-qs h4:not(.ap-qs-inner):after, .ap-qs .ap-ps_h3:after {
        width: 20px;
        height: 20px;
    }

    .ap-qs-h:before {
        width: 35px;
        height: 35px;
    }

    .ap-qs h3:not(.ap-qs-inner), .ap-qs h4:not(.ap-qs-inner), .ap-qs .ap-ps_h3 {
        padding-left: 42px;
    }
    /*Вопрос-ответ.*/

    .ap-form-element {
        font-size: 22px;
    }

    .ap-bottom .ap-btn {
        font-size: 34px;
    }
}


@media (max-width: 1500px) {

    .ap-sw {
        width: 97%;
    }

    .ap-start-about .ap-r.ap-heading {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .ap-grid-portfolio {
        flex-direction: column;
    }

    .ap-grid-portfolio > .ap-c-2 {
        width: 100%;
        padding: 0!important;
        align-items: center;
    }

    .ap-grid-portfolio .ap-c-1.ap-f-fdr {
        text-align: center;
    }

    #ap-your-project {
        width: 100%;
    }
}

@media (max-width: 1400px) {

    .home h2, .home .ap-p_h2 {
        font-size: 80px;
    }

    h3, .ap-p_h3 {
        font-size: 32px;
        font-weight: 500;
    }

    #ap-faq .ap-c-2, #ap-contacts .ap-c-2 {
        width: 100%;
        padding: 0!important;
    }

    #ap-faq .ap-r-neg > .ap-c-1 > .ap-r,
    #ap-contacts .ap-r-neg > .ap-c-1 > .ap-r {
        flex-direction: column;
    }

    #ap-faq  .ap-grid.ap-r .ap-c-2:nth-child(odd) {
        margin-bottom: -40px!important;
    }
}

@media (max-width: 1200px) {
    .ap-r-rubber.ap-r_first .ap-right .ap-u {
        display: none;
    }

    .ap-bottom.ap-r_fh {
        height: auto;
        min-height: auto;
        padding-top: 100px;
    }

    .ap-bottom .ap-btn {
        height: 70px;
        width: 400px;
        max-width: 100%;
    }

    #ap-form_02, .ap-big-messes {
        flex-direction: column;
    }

    #ap-form_02 .ap-c-3, .ap-big-messes {
        width: 100%;
        align-items: center;
    }

    #ap-form_02 .ap-form-element {
        width: 400px;
        max-width: 100%;
        margin-bottom: 30px;
        text-align: center;
        height: 70px;
    }

    .ap-big-messes .ap-c-2 {
        width: 400px;
        max-width: 100%;
        margin-bottom: 30px;
        padding: 0!important;
    }

    .ap-big-messes .ap-u {
        font-size: 24px;
    }

}


@media (max-width: 1100px) {
    .ap-portfolio-item {
        max-width: 100%;
    }

    .ap-start-about br {
        display: none !important;
    }
}


@media (max-width: 700px) {
    .ap-top-services {
        display: none;
    }

    .ap-r_top .ap-r_first {
        margin-bottom: 10vh;
    }

    .home h2, .home .ap-p_h2 {
        font-size: 60px;
    }

    h3, .ap-p_h3 {
        font-size: 24px;
    }

    #ap-techs-slider .ap-tech {
        font-size: 32px;
    }

    #ap-techs-slider {
        margin-bottom: 0!important;
    }

    /*DEV - НЕ УСПЕЛ!!!*/
    /*#ap-your-project {
        display: none;
    }*/
    .ap-grid-portfolio .ap-c-2:last-child {
        display: none;
    }

    #ap-your-project .ap-btn, .ap-cta .ap-btn {
        max-width: 75%;
    }

    .ap-slider-controls {
        display: none;
    }
    /*DEV - НЕ УСПЕЛ!!!*/


}


@media (max-width: 600px) {

    .ap-top-logo_outer {
        max-width: 70%;
    }

    .ap-top-logo_outer svg {
        max-width: 100%;
    }

    #ap-top-about_outer .ap-tr {
        text-align: center;
    }

    #ap-top-about_outer {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .ap-r-rubber.ap-r_first .ap-left {
        display: none;
    }

    .ap-r-rubber.ap-r_first .ap-right {
        justify-content: center;
    }

    .ap-r_first .ap-right .ap-c {
        margin: 0 !important;
    }

    .ap-portfolio-item .ap-overlay {
        display: none;
    }

    .ap-portfolio-item .ap-swiper_wrapper, .ap-portfolio-item .ap-swiper.ap-swiper_simple img {
        border-radius: 0;
    }

    .ap-c-type_1 {
        background-color: transparent;
        padding-left: 0;
        padding-right: 0;
    }

    #ap-contacts .ap-c-2 {
        margin-bottom: 20px!important;
    }

    #ap-contacts, #ap-contacts .ap-tr {
        text-align: center!important;
    }

    #ap-contacts .ap-contacts-logo-jmax,
    #ap-contacts .ap-contacts-logo-apelsin
    {
        top: 20px;
        left: 0;
        right: 0;
    }

    #ap-contacts .ap-c-1.ap-c_inner {
        padding-top: 100px;
    }

    #ap-contacts .ap-level_1 {
        font-size: 30px;
    }

    #ap-contacts .ap-level_2 {
        font-size: 18px;
    }

    #ap-contacts .ap-level_0 {
        font-size: 40px;
    }

}

@media (max-width: 500px) {

    .home h2, .home .ap-p_h2 {
        font-size: 50px;
    }

    #ap-cases-title {
        margin-top: 20px!important;
        margin-bottom: 20px!important;
    }

    .ap-grid-portfolio {
        margin-top: 50px!important;
    }

    #ap-top-about_outer .ap-r:last-child {
        font-size: 18px;
    }

    #ap-contacts .ap-level_0 {
        font-size: 34px;
    }

    .ap-bottom .ap-btn {
        font-size: 26px;
    }

}

@media (max-width: 400px) {
    .home h2, .home .ap-p_h2 {
        font-size: 42px;
    }

    h4, .ap-p_h4 {
        font-size: 28px;
    }
}


@media (max-height: 800px) {
    #ap-top-about_outer {
        bottom: 6vh;
    }

    .ap-bottom.ap-r_fh {
        padding-bottom: 0!important;
        align-items: center;
    }

    .ap-bottom > .ap-sw:before {
        content: none;
    }
}
/*"АДАПТИВ" после очень широкого QHD-сайта.*/








/*FIRST BREAKPOINT:*/
/*

   ##      ##           ########    ##
 ####      ##    ##     ##          ##    ##
   ##      ##    ##     ##          ##    ##
   ##      ##    ##     #######     ##    ##
   ##      #########          ##    #########
   ##            ##     ##    ##          ##
 ######          ##      ######           ##

*/

/*Manual calc: var(--sw) + 2*2 * var(--column_padding_desktop) = 1414 + 4*10 - 1(!)= 1454*/
@media (max-width: 1453px) {


    /*Typical Hiding:*/
    .ap-mh_1453 {
        display: none !important;
    }

    .ap-dh_1453_b {
        display: block;
    }

    .ap-dh_1453_f {
        display: flex;
    }

    .ap-dh_1453_ib {
        display: inline-block;
    }

    /*Typical Hiding.*/


    /*First Grid Rebuilding:*/
    .ap-sw {
        max-width: 100% !important;
        padding-left: var(--column_padding_desktop);
        padding-right: var(--column_padding_desktop);
    }

    .ap-grid.ap-r-neg {
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
    }

    /*First Grid Rebuilding.*/

}


/*Manual calc: .ap-grid .ap-c-3 width + 2 * --column_padding_mobile = 478 + 40 - 1(!)= 517*/
@media (max-width: 517px) {

    /*Last Grid Rebuilding:*/
    .ap-sw {
        padding-left: var(--column_padding_mobile);
        padding-right: var(--column_padding_mobile);
    }

    .ap-grid.ap-r-neg {
        flex-direction: column;
        align-content: center;
    }

    .ap-grid.ap-r .ap-c-3 {
        max-width: calc(478px - 2 * var(--column_padding_desktop));
        width: inherit;
        height: auto;
        /*min-height: 200px;*/ /*Or content resize auto?*/
    }

    .ap-grid.ap-r .ap-c-3 > .ap-r {
        padding-left: 0;
        padding-right: 0;
    }

    .ap-grid .ap-r > .ap-c-1 {
        margin-top: calc(var(--column_padding_mobile));
    }

    /*Last Grid Rebuilding.*/

}