/*!
Theme Name: Apelsin
Theme URI: https://apelsin.media/
Author: Apelsin Studio
Author URI: https://apelsin.media/
Description: Basic Development Theme
Version: 1.6.0
Requires at least: 6.2
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;
}

/*FONTS - END.*/


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

/*Main.*/
/*Palette:*/
:root {
    --cm: #474a51;
    --c1: #0095f5;
    --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: #071621;
    font: 400 20px/1.25 'Myriad', Tahoma, sans-serif;
    overflow-x: hidden;
    margin: 0;
    /*!*//*user-select: none;*/
    color: #fff;
    -webkit-font-smoothing: antialiased;
    /*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;
}

/*SVG COLORS - START.*/


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

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

.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-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;
    min-width: 0;
}

.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
}

.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 {
    margin: 0;
    font-family: 'Myriad', sans-serif;
    font-weight: 600;
    line-height: 1.25;
}

h1, .ap-p_h1 {
    font-size: 52px;
}

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

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

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

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

/*HEADINGS.*/


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

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

.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-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: inline-block;
    width: 230px;
    height: 60px;
    padding: 0 10px 5px;
    /*background-color: var(--c1);*/
    background: linear-gradient(180deg, rgba(0,129,213,1) 0%, rgba(0,149,245,1) 50%, rgba(0,129,213,1) 100%);
    color: #fff;
    text-align: center;
    border: none;
    /*border-radius: 8px;*/
    overflow: hidden;
    outline: none;
    cursor: pointer;
    transition: box-shadow .3s ease;
    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);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
    letter-spacing: .2px;
    font: 400 20px/1 'Myriad', Tahoma, sans-serif;
    /*text-transform: uppercase;*/
}


.ap-btn_flat {
    box-shadow: none;
}

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


.ap-btn:not(.ap-btn_flat):hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), 0 -2px 0 inset rgba(0, 0, 0, .2), 0 0 50px 10px rgba(255, 255, 255, .7);
}

.ap-btn.ap-btn_flat:hover {
    background: linear-gradient(280deg, rgba(0,129,213,1) 0%, rgba(0,149,245,1) 50%, rgba(0,129,213,1) 100%);
}

/*a.ap-btn {
    line-height: 78px;
}*/

/*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: */
/************************/


/*DEV SNIPPETS:*/
/*Default Grid:*/
.ap-grid.ap-r .ap-c-3 {
    height: 300px;
    width: 478px;
}

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

.ap-grid .ap-r > .ap-c-1 {
    background-color: red;
    margin-top: calc(2 * var(--column_padding_desktop));
    padding: var(--column_padding_desktop) 14px;
}

.ap-grid h3 {
    margin-bottom: 5px;
}

/*
<div class="ap-r ap-sw">
    <div class="ap-r ap-r-neg ap-f-ffrw ap-grid">
        <div class="ap-c-3">
            <div class="ap-r">
                <div class="ap-c-1">
                    <h3>Heading</h3>
                    <p>Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description.</p>
                </div>
            </div>
        </div>
        <div class="ap-c-3">
            <div class="ap-r">
                <div class="ap-c-1">

                </div>
            </div>
        </div>
        <div class="ap-c-3">
            <div class="ap-r">
                <div class="ap-c-1">

                </div>
            </div>
        </div>
        <div class="ap-c-3">
            <div class="ap-r">
                <div class="ap-c-1">

                </div>
            </div>
        </div>
    </div>
</div>
*/

/*Default Grid.*/

/*Default :*/
/*Default .*/

/*DEV SNIPPETS.*/


/*SHADOWS:*/
.ap-box-shadow {
    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: 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: calc( 100vh - var(--fh) );
    min-height: 700px;
    align-items: center;
    justify-content: center;
    padding-bottom: 10vh;
}

/*TOP SECTION.*/


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


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


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


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


/*ANIMATIONS:*/
/*FOR GSAP EXAMPLE:*/
/*.page-id-XXX .ap-r_top .ap-i {
    background-color: lightgrey;
    padding-top: 40px;
}

.page-id-XXX .ap-logo-wrapper {
    width: 30%;
    height: auto;
}

.page-id-XXX #ap-logo-wrapper svg {
    width: 100%;
    height: auto;
}

.page-id-XXX #ap-logo-wrapper svg path.ap-u {
    stroke-dasharray: 0;
    fill: url(#ap-gear-gradient) #0081d5;
}*/
/*FOR GSAP EXAMPLE.*/
/*ANIMATIONS.*/



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

.ap-swiper_wrapper, .ap-swiper.ap-swiper_simple img {
    width: 674px!important;
}*/

/*Swiper Controls:*/
/*.ap-slider-controls {
    left: 30px;
    bottom: 20px;
    z-index: 1000;
}
.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;
}
.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;
}*/
/*Swiper Controls.*/
/*SWIPER EXAMPLE.*/





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

.ap-r-panel {
    width: 500px;
    right: -500px;
    z-index: 100000000;
    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);
    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;
    scrollbar-width: none;
    padding: 0 50px 20px 70px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
}

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

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

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

.ap-panel-inner {
    width: 100%;
    background-color: #fff;
    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-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;
    transition-duration: 0.2s;
    pointer-events: all;
}

.ap-burger .ap-icon-left {
    transition-duration: 0.2s;
    position: absolute;
    height: 2px;
    width: 15px;
    top: 20px;
    background-color: #fff;
}

.ap-burger .ap-icon-left:before {
    transition-duration: 0.2s;
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: #fff;
    content: "";
    top: -10px;
}

.ap-burger .ap-icon-left:after {
    transition-duration: 0.2s;
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: #fff;
    content: "";
    top: 10px;
}

.ap-burger .ap-icon-right {
    transition-duration: 0.2s;
    position: absolute;
    height: 2px;
    width: 15px;
    top: 20px;
    background-color: #fff;
    left: 15px;
}

.ap-burger .ap-icon-right:before {
    transition-duration: 0.2s;
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: #fff;
    content: "";
    top: -10px;
}

.ap-burger .ap-icon-right:after {
    transition-duration: 0.2s;
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: #fff;
    content: "";
    top: 10px;
}

.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-burger.open .ap-icon-left, .ap-burger.open .ap-icon-right, .ap-burger.open .ap-icon-left:before, .ap-burger.open .ap-icon-right:before, .ap-burger.open .ap-icon-left:after, .ap-burger.open .ap-icon-right:after
{
    background-color: var(--cm);
}

.ap-burger.open .ap-icon-left {
    transition-duration: 0.2s;
    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 {
    transition-duration: 0.2s;
    background: transparent;
}

.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-burger:hover .ap-icon-left:before, .ap-burger:hover .ap-icon-right::before, .ap-burger:hover .ap-icon-left::after, .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 {
    transform: rotate(45deg);
}
.ap-m-c:after {
    transform: rotate(-45deg);
}
.ap-m-m-i {
    z-index: 10000000;
    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: 30px;*/
}
.ap-m-m {
    transition: transform 150ms;
    transform: scale(0);
    border-radius: 30px;
}
/*Specific dimensions of each:*/
#ap-call-modal .ap-m-m {
    width: 900px;
    max-width: 900px;
    /*~*/
    height: 543px;
    /*Можно на auto поставить - теперь высчитывается JS...*/
}
/*Specific dimensions of each.*/

/*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 {
    border-radius: inherit;
    padding: 0 18px;
    min-height: 60px;
    color: var(--cm);
    background: #f8f8f8;
    border: none;
    outline: none;
    max-width: 100%;
    width: 100%;
    resize: none;

    font: 400 18px/1.25 'Myriad', Tahoma, sans-serif;
}

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

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




/*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;
    filter: grayscale(1);
    padding-left: 2.5px;
    padding-right: 2.5px;
    position: relative;
    top: 7px;
    transition: filter .5s;
}

.ap-apelsin-copyright:hover img {
    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.*/


/*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.*/

}