/* CSS-стили могут быть еще в !_1.php (functions.php), koleso_fortuni, calc_1 */

html { overflow-x: hidden !important; } body { overflow-x: hidden !important; } /* Горизонтальную полоса прокрутки. Она может появляться когда я задаю объектам эффект выезжания-появления */
/* ==================================================== */












/* === Переменные цветов - НАЧАЛО ======================= */
/* Юзать так: .lalala { color: var(--c_1_1); } */
:root {
/* Цвет 1 */
--c_1_1: #ffffff; /* Светлый */
--c_1_2: #e6e6e6; /* Средний */
--c_1_3: #c3c3c3; /* Темный */

/* Цвет 2 */
--c_2_1: #ffbe6e; /* Светлый */
--c_2_2: #ff8c00; /* Средний */
--c_2_3: #d15700; /* Темный */

/* Цвет 3 */
--c_3_1: #2e2eff; /* Светлый */
--c_3_2: #00008b; /* Средний */
--c_3_3: #000066; /* Темный */

/* Цвет 4 */
--c_4_1: #ff17ff; /* Светлый */
--c_4_1: #cc00cc; /* Средний */
--c_4_2: #7d007d; /* Темный */
}
/* === Переменные цветов - КОНЕЦ ======================== */

.myBlokOtstLR { padding: 0 20px; } /* Внешние отступы слева и справа от краев окна браузера для всех моих блоков "myBlok. . ." */
/* @media (max-width: 800px) { .myBlokOtstLR { padding: 0 20px; } } */
  
/* === Подпись под картинкой в модальном окне-лайтбоксе и в элементоровском плагине "Галерея" и в других ================== */
/* .elementor-slideshow__title { display: none; } */

/* === Убрать нижний отступ (Делаю это что бы в Элемонторовском виджете "Текстовой редактор" были нормальные отступы от заголовков до текста) ======== */
/* P, H1, H2, H3, H4, H5, H6 { margin-bottom: 0px !important; } */

/* === Мой попап плагина "Popup Maker" ====================================== */
.pum-container { position: relative; } /* Из-за используемого тут "display" после щелчка в попапе по кн "Закрыть" он снова на короткое время появляется */
/* --- Для обычного контента ------------------------------------------------------------------------------------ */
@media (max-width: 800px) { .pum-container { width: 90% !important; height: 80% !important;  }  } 
.pum-content { position: absolute; top: 50%; max-height: 80% !important; padding: 0px 10px 0px 10px; margin-right: 35px; transform: translateY(-50%); overflow-y: auto !important; } 
/* --- Для ролика с YouTube -------------------------------------------------------------------------------------- */
/* @media (max-width: 800px) { .pum-container { width: 90% !important; }  } 
.pum-content { top: 50%; max-height: 80% !important; padding: 0px 10px 0px 10px; margin-right: 0px; overflow-y: auto !important; } */

/* === Сделать ширину блока как вся страница сайта (86765657 - Эта закладка для "w.txt") ============================ */
/* Вписываю по необходимости этот класс везде и в Элементоре в виджете "Внутренняя секция" / Расширенные / CSS-классы" */
.elementor_polnaya_shirina { max-width: 1180px; margin: 0 auto; padding: 0px 20px 0px 20px; } /*  Для работы этого класса надо поставить шаблон страницы "Elementor полная ширина" */ 

/* Для работы этого класса надо поставить шаблон страницы "Шаблон по умолчанию" или "Тема". Сейчас сюда вписаны стили из класса "ast-container" темы "Astra", а "max-width:" я добавил сам */ 
.shirina_sayta_po_umolch { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } 
/* ===================================================================== */

/* === Форма обратной связи - НАЧАЛО ====================== */
/* Фон в поле ввода текста изменился: Это из-за того что я выбрал из выпад списка ранее введенный текс. Набрать его вручную */ 
/* --- Contact form 7 - НАЧАЛО ------------------------------------------------------ */
/* Шаблоны самих форм в "Плагины\Contact form 7 - Форма обратной связи" */

.wpcf7-response-output { display: none; } /* Надпись "Не корректное заполнение." которая появляется при не правильном заполнении формы */

/* *** CF7_1 - НАЧАЛО ******************************************************* */
.CF7_1 select, .CF7_1 input, .CF7_1 text { padding: 0px 10px 8px 10px !important; width: 100% !important; min-width: 100%!important; 
  border-radius: 50px !important; border: 2px solid #d4d4d4 !important; }
  .CF7_1 select, .CF7_1 input, .CF7_1 text { background-color: #f6f6f6 !important; color: #000 !important; }
  .CF7_1 select { padding: 7px 10px 9px 10px !important; } /* Это для Мозилы */
  .CF7_1 input, .CF7_1 text { padding: 5px 10px 5px 10px !important; }
  .CF7_1 p { margin-bottom: 0px; } /* Расстояние между текстовыми полями */ 
  .CF7_1_zag { color: #000; text-align: center; font-size: 20pt; font-weight: bold; margin: 0px 0px 10px 0px !important; padding: 0px 0px 0px 0px !important; }
  
  /* Надпись "Поле обязательно для заполнения" которая появляется при не правильном заполнении поля в форме. Как я узнал как ее изменить: Попытался отправить не правильно заполненную форму и когда появились эти надписи в браузере выбрал "Исследовать элемент" */ 
  .CF7_1 span { color: #ff0000 !important; text-align: center; margin: 0 !important; }
  
  /* кн "Отправить" */

  .CF7_1_kn input { width: 100%; color: white !important; font-weight: bold; white-space: pre-line; 
  background-color: #000 !important; border-radius: 100px; border: none !important; font-size: 10pt; padding: 15px 20px 15px 20px; } 
  .CF7_1_kn input:focus { background-color: #6a6a6a !important; border-radius: 100px !important; } /* Если это убрать то кнопка будет цветом по умолчанию при попытке отправить не правильно заполненную форму */ 
  .CF7_1_kn input:hover { border-radius: 100px !important; background-color: #6a6a6a !important; }
  .CF7_1_kn p { margin-bottom: 0px; padding-bottom: 0px; }
  
  .CF7_1 input::placeholder, .CF7_1 textarea::placeholder { color: #b5b5b5; } /* Текст который введен до ввода текста в полях формы (placeholder) */
  .CF7_1 input:hover, .CF7_1 select:hover { background-color: #fff !important; } /* Стиль при наведении на текстовое поле */
  
  .CF7_1 select { /* Тема "Astra" скрывает стрелку в выпад. списке и грузит вместо нее картинку. Тут я возвращаю стрелку */
  /* background-position-y: calc( 100% - 15px ); */
  background: none;
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  cursor: pointer;
  }
  
  .CF7_1_usloviya { text-align: center; color: #000; margin-top: -38px !important; } /* Надпись "Нажимая на кнопку, Вы даете согласие на обработку данных." */
  .CF7_1_usloviya p { font-size: 8pt; line-height: 1.5; margin-bottom: 0px !important; }
  /* *** CF7_1 - КОНЕЦ ********************************************** */

/* *** CF7_2 - НАЧАЛО ******************************************************* */
@media (min-width: 800px) {
.CF7_2_forma { display: flex; }
.CF7_2, .CF7_2_kn { width: 25%; } /* в дробном числе ставить точку, а не запятую */ 
}
.CF7_2_forma { margin: 0px !important; }
.CF7_2 { margin: 10px; }
.CF7_2 input, .CF7_2 text { background-color: #fff; border: 2px solid #ff8c00 !important; padding: 10px !important; border-radius: 50px !important; white-space: pre-line; }
.CF7_2 input:hover, .CF7_2 text:hover { background-color: #f9fafb; }
.CF7_2_kn { margin: 9px 10px 10px 10px; }
.CF7_2_kn input { color: #fff; background-color: #ff8c00; border: 0px solid #000; padding: 18px; border-radius: 50px; width: 100%; white-space: normal; line-height: 1.3; }
.CF7_2_kn input:hover { color: #fff; background-color: #d2691e; }
.CF7_2_kn input:focus { color: #fff; background-color: #ff8c00; } /* Если это убрать то кнопка будет цветом по умолчанию при попытке отправить не правильно заполненную форму */ 
.CF7_2 input::placeholder, .CF7_2 text::placeholder { color: #b5b5b5; } /* Текст который введен до ввода текста в полях формы (placeholder) */
.CF7_2 span { color: #ff0000 !important; text-align: center; } /* Надпись "Поле обязательно для заполнения" которая появляется при не правильном заполнении поля в форме */ 
.CF7_2_usloviya { color: #000; text-align: center; line-height: 1.3; }
.CF7_2_usloviya { margin-left: 10px; margin-top: -40px; }
.CF7_2_usloviya p { font-size: 9pt; }
/* *** CF7_2 - КОНЕЦ ********************************************** */

/* --- Contact form 7 - КОНЕЦ -------------------------------------------- */

/* --- Плагин "MetForm" ------------------------------------------------------------------- */
.mf-error-message { font-size: 10pt; font-weight: 600; text-align: center; } /* Надпись "Это обязательное поле." */
/* === Форма обратной связи - КОНЕЦ ========================== */

/* === Скрыть стрелки-влево-вправо навигации которые появляются по мимо тех котые в слайдере сделанном из секций в плагине "OoohBoi Steroids for Elementor" ============== */
.Slayder_iz_sekcii_OoohBoi .swiper-button-next:after, .Slayder_iz_sekcii_OoohBoi .swiper-button-prev:after { display: none; } 
/* --- Slayder_iz_sekcii_OoohBoi_2 ---------------------------------------------------------------- */
.Slayder_iz_sekcii_OoohBoi_2 .swiper-button-next:after, .Slayder_iz_sekcii_OoohBoi_2 .swiper-button-prev:after { display: none; } 
.Slayder_iz_sekcii_OoohBoi_2 .swiper-button-prev, .Slayder_iz_sekcii_OoohBoi_2 .swiper-button-next { padding: 10px 15px 5px 15px !important; } 
/* === Скруглить фон под стрелками-влево-вправо навигации если он овальный в слайдере сделанном из секций в плагине "OoohBoi Steroids for Elementor" ============== */
.Slayder_iz_sekcii_OoohBoi .swiper-button-prev, .Slayder_iz_sekcii_OoohBoi .swiper-button-next { padding: 10px 15px 10px 15px !important; } 
/* === Отобразить-запретить скрывать объекты-контент за пределами слайдера-секции ======= */
.Slayder_iz_sekcii_OoohBoi .ob-swiper-bundle { overflow: visible; } 

/* === Боковое меню. Плагин "Bellows Accordion Menu" ===================================== */
.bellows { margin-top: -25px !important; } /* Убрать верхний отступ у всего меню */
.bellows .bellows-nav .bellows-subtoggle { width: 30px !important; } /* Ширина контейнера со стрелочкой которая разворачивает свиток подпунктов */
.bellows .bellows-nav .bellows-subtoggle .fa { text-align: left !important; } /* Выравнивание стрелочки в контейнере который разворачивает свиток подпунктов */
.bellows .bellows-nav .bellows-menu-item-has-children>.bellows-target { padding-right: 43px !important; } /* Уменьшение отступа у родительского пункта до контейнера со стрелочкой которая разворачивает свиток подменю */
.bellows .bellows-nav .bellows-submenu .bellows-item-level-2 .bellows-target { padding-left: 20px !important; } /* Уменьшение отступа у всех подпунктов. Если это убрать то у подпунктов будет больше отступ слева чем у родительских пунктов */
.bellows-target-description { display: none !important; font-size: 80% !important; /* Скрыть описания категорий под пунктами меню */ /* margin-top: 5px !important; */ /* Отодвинуть описание категории от пункта */ }

/* === Скрыть слайдер =============================================================== */
.skrit_slayder { 
display: block;
}

@media (max-width: 800px) { 
.skrit_slayder { 
display: none;
}
}

/* === Мигающая пульсирующая кнопка. Применяю этот класс к нужным кнопкам ================= */
@keyframes myPulsKnAnim {
0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }
.myPulsKn { animation: myPulsKnAnim 2s infinite; } 
/* ======================================= */

/* === Поле поиска в шапке сайта ========================= */
.pole_poiska form {
padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important;
display: inline-block !important; 
}
.widget_product_search form:before {
font-size: 0px !important; /* Скрываю таким способом лупу в поле поиска виджета поиска товаров */
}
.pole_poiska input {
  border-radius: 50px !important;
}
.pole_poiska input:focus,
.pole_poiska input:hover { 
background: #fff !important; 
}
.pole_poiska button {
  border: none !important;
  outline: none !important;
}
.pole_poiska input {
  border: 2px solid #d4d4d4 !important; /* Обводка у поля ввода */
  outline: none !important;
}
.pole_poiska input { /* Поле ввода */
  /* border-radius: 0px !important; */ /* Если это включить то у поля будут изначально острые углы, а они у меня появляются только при наведении */
  height: 35px !important; 
  min-height: 35px !important; 
  background: #f6f6f6 !important; 
  background-image: url('../my/kn_poisk.svg') !important;
  background-repeat: no-repeat !important; 
  background-position: 100% 50% !important; 
  padding-left: 10px !important; padding-right: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important;
  display: inline-block !important; 
}
.pole_poiska_kont, .pole_poiska input { /* Поле ввода */
  display: inline-block !important; 
  width: 210px !important; /* Ширину поля ввода менять тут */ 
}
.pole_poiska button { /* кн "Поиск" */
  overflow: visible !important;
  /* position: relative !important; top: -6px !important; right: -34px !important; */ /* Положение кнопки поиска для темы "Astra" */
  /* position: relative !important; top: -6px !important; left: -36px !important; */ /* Положение кнопки поиска для темы "Storefront" */
  position: relative !important; top: -5px !important; left: -35px !important; /* Положение кнопки поиска для темы "OceanWP" */
  border-radius: 20px !important;
  background: none !important; 
  /* background: #f1f1f1 !important; 
  background-image: url('../my/myShapka_2/kn_poisk.png') !important;
  background-repeat: no-repeat !important; 
  background-position: center !important; 
  background-size: 100% !important; 
  background-size: cover !important; */
  cursor: pointer !important;
  font-size: 0px !important; /* Скрываю так слово "Поиск" на кнопке виджета поиска товаров */
  display: inline-block !important; 
  padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important;
  height: 23px !important;
  width: 23px !important;
  clip: rect(0px, 23px, 23px, 0px) !important; /* Эта команда скрывает кнопку. Тут второе значение должно быть таким же как ширина кнопки, а третье как ее высота */
  -webkit-clip-path: inset(0%) !important; /* Эта команда скрывает кнопку */
  clip-path: inset(0%) !important; /* Эта команда скрывает кнопку */
  float: none !important; 
}

/* === modOkno_1 ========================== */
.modOkno_1_1 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* Фон под попапом */ 
  z-index: 99999; 
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none; /* Элемент невидим для событий мыши */
}

/* При отображении модального окна */
.modOkno_1_1:target {
  opacity: 1;
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: auto;
}

@media (min-width: 800px) { /* Код сработает если экран шире этого числа */
  .modOkno_1_2 {
    position:absolute; /* Если тут вписать "fixed" тогда если баннер не будет умещаться на экране то наверно не появится полоса прокрутки */
    margin:auto !important;
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
  .modOkno_1_4 { background-image: url('../my/chelovek.png'); background-repeat: no-repeat; background-position: 35px calc(100% + 1px); background-size: 260px; }
}

.modOkno_1_6 { /* С помощью "JavaScript" этим классом я заставляю выровниться модальное окно по верхнему краю браузера если браузер по высоте меньше определенного размера */ 
  position:relative; 
  margin:auto !important;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.modOkno_1_5 { margin: 20px; }

@media (min-width: 800px) { /* Минимальная ширина при которой сработает код */
  .modOkno_1_5 { width: 360px; margin: 0px; }
}

.modOkno_1_3 { /* кн "Закрыть" (X) */
  display: inline;
  text-align:right;
}
/* === modOkno_1 - КОНЕЦ =================== */

/* === modOkno_2 - НАЧАЛО - Модальное окно с поиском ================================= */
.modOkno_2_1 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* Фон под попапом */ 
  z-index: 99999; 
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none; /* Элемент невидим для событий мыши */
}

/* При отображении модального окна */
.modOkno_2_1:target {
  opacity: 1;
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: auto;
}

@media (min-width: 800px) { /* Код сработает если экран шире этого числа */
  .modOkno_2_2 {
    position:absolute; /* Если тут вписать "fixed" тогда если баннер не будет умещаться на экране то наверно не появится полоса прокрутки */
    margin:auto !important;
    top:0;
    left:0;
    right:0;
    bottom:0;
    max-width: 500px; 
  }
}

.modOkno_2_3 { /* кн "Закрыть" (X) */
  display: inline;
  text-align:right;
}
/* === modOkno_2 - НАЧАЛО - Модальное окно с поиском =================== */

/* === modOkno_3 ========================== */
.modOkno_3_1 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* Фон под попапом */ 
  z-index: 99999; 
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none; /* Элемент невидим для событий мыши */
}

/* При отображении модального окна */
.modOkno_3_1:target {
  opacity: 1;
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: auto;
}

@media (min-width: 800px) { /* Код сработает если экран шире этого числа */
  .modOkno_3_2 {
    position:absolute; /* Если тут вписать "fixed" тогда если баннер не будет умещаться на экране то наверно не появится полоса прокрутки */
    margin:auto !important;
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
}

.modOkno_3_6 { /* С помощью "JavaScript" этим классом я заставляю выровниться модальное окно по верхнему краю браузера если браузер по высоте меньше определенного размера */ 
  position:relative; 
  margin:auto !important;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
/* === modOkno_3 - КОНЕЦ =================== */

/* === modOkno_4 ========================== */
@media (min-width: 768px) { .modOkno_4_1 { display: none; } } 

.modOkno_4_1 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* Фон под попапом */ 
  z-index: 99999; 
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none; /* Элемент невидим для событий мыши */
}

/* При отображении модального окна */
.modOkno_4_1:target {
  opacity: 1;
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: auto;
}

@media (min-width: 800px) { /* Код сработает если экран шире этого числа */
  .modOkno_4_2 {
    position:absolute; /* Если тут вписать "fixed" тогда если баннер не будет умещаться на экране то наверно не появится полоса прокрутки */
    margin:auto !important;
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
}

.modOkno_4_6 { /* С помощью "JavaScript" этим классом я заставляю выровниться модальное окно по верхнему краю браузера если браузер по высоте меньше определенного размера */ 
  position:relative; 
  margin:auto !important;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
/* === modOkno_4 - КОНЕЦ =================== */

/* === Кн "Заказать звонок" телефонная трубка в нижнем углу экрана. Чтоб изменить размер надо поменять тут цифры в строках где написано "Размер кн" - НАЧАЛО ============ */
.callback_bt_675534_1 {
  background: #38a3fd;
  border-radius: 50%;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
  /* cursor: pointer; */ /* Курсор в виде руки для ссылки. Сейчас я ее делаю тегом <a> */
  border: 2px solid transparent;
  display: block;
  height: 70px; /* Размер кн */
  width: 70px; /* Размер кн */
  text-align: center;
  position: fixed;
  right: 8%;
  bottom: 18%;
  z-index: 999;
  /* transform: scale(0.8); */ /* Масштаб-размер всей кнопки */ 
  transition: .3s ease-in-out;
  -webkit-animation: hoverWave_675534_1 linear 1s infinite;
  animation: hoverWave_675534_1 linear 1s infinite;
}

.callback_bt_675534_1:hover {
  /* background: #fff; */
  background-image: url('../my/zakazZvonok.png'); background-repeat: no-repeat; background-position: center center; background-size: 100%;
  border: 2px solid #38a3fd; /* Обводка кнопки */
}

.callback_bt_675534_1 .text_call_675534_1 {
  height: 70px; /* Размер кн */
  width: 70px; /* Размер кн */
  border-radius: 50%;
  position: relative;
}

.callback_bt_675534_1 .text_call_675534_1:after { 
  content: "\f095"; /* Телефонная трубка "\f095". Конверт "\f0e0". Если не установить плагин "Bellows Accordion Menu" то вместо этого значка трубки-конверта будет прямоугольник */
  background-image: url('../my/zakazZvonok_trubka.svg'); background-repeat: no-repeat; background-position: center center; background-size: 60%;
  display: block;
  font-family: fontawesome;
  color: #fff;
  font-size: 0px;
  line-height: 0px; /* Меняя тут цифру можно сдвинуть трубку-конверт вверх-вниз. Для трубки пишу тут "87", а для конверта "65" */ 
  height: 70px; /* Размер кн */
  width: 70px; /* Размер кн */
  opacity: 1;
  transition: .3s ease-in-out;
  animation: 1200ms ease 0s normal none 1 running shake_675534_1;
  animation-iteration-count: infinite;
}

.callback_bt_675534_1 .text_call_675534_1:hover:after {
  opacity: 0;
}

.callback_bt_675534_1 .text_call_675534_1 span {
  color: #38a3fd;
  display: block;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-size: 11px;
  line-height: 12px;
  font-weight: 600;
  text-transform: uppercase;
  transition: .3s ease-in-out;
  font-family: Arial, Helvetica, sans-serif;
}

.callback_bt_675534_1 .text_call_675534_1:hover span {
  opacity: 1;
}

@keyframes hoverWave_675534_1 { 
  0% { /* Конвертор цвета в RGBA: https://colorscheme.ru/color-converter.html?ysclid=lrhp87k6tk532090003 */
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  }

  40% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
  }

  80% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067)
  }

  100% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0)
  }
}

/* animations icon */

@keyframes shake_675534_1 {
  0% {
      transform: rotateZ(0deg);
      -ms-transform: rotateZ(0deg);
      -webkit-transform: rotateZ(0deg);
  }

  10% {
      transform: rotateZ(-30deg);
      -ms-transform: rotateZ(-30deg);
      -webkit-transform: rotateZ(-30deg);
  }

  20% {
      transform: rotateZ(15deg);
      -ms-transform: rotateZ(15deg);
      -webkit-transform: rotateZ(15deg);
  }

  30% {
      transform: rotateZ(-10deg);
      -ms-transform: rotateZ(-10deg);
      -webkit-transform: rotateZ(-10deg);
  }

  40% {
      transform: rotateZ(7.5deg);
      -ms-transform: rotateZ(7.5deg);
      -webkit-transform: rotateZ(7.5deg);
  }

  50% {
      transform: rotateZ(-6deg);
      -ms-transform: rotateZ(-6deg);
      -webkit-transform: rotateZ(-6deg);
  }

  60% {
      transform: rotateZ(5deg);
      -ms-transform: rotateZ(5deg);
      -webkit-transform: rotateZ(5deg);
  }

  70% {
      transform: rotateZ(-4.28571deg);
      -ms-transform: rotateZ(-4.28571deg);
      -webkit-transform: rotateZ(-4.28571deg);
  }

  80% {
      transform: rotateZ(3.75deg);
      -ms-transform: rotateZ(3.75deg);
      -webkit-transform: rotateZ(3.75deg);
  }

  90% {
      transform: rotateZ(-3.33333deg);
      -ms-transform: rotateZ(-3.33333deg);
      -webkit-transform: rotateZ(-3.33333deg);
  }

  100% {
      transform: rotateZ(0deg);
      -ms-transform: rotateZ(0deg);
      -webkit-transform: rotateZ(0deg);
  }
}
/* === Кн "Заказать звонок" телефонная трубка в нижнем углу экрана. Чтоб изменить размер надо поменять тут цифры в строках где написано "Размер кн" - КОНЕЦ ============ */

/* ===  Шапка сайта и верхнее меню ================================== */
.skrit_shapku { display: none !important; } /* Этот класс добавляю в "!_1.php" чтоб на главной показать другую шапку */ 
.prozrach_shapka { position: absolute; top: 0px; width: 100%; } /* Прозрачная шапка поверх фона-баннера-слайдера вверху сайта */

/* --- Липкая шапка ----------------------------------------------------------------------------------- */
.lipkaya_shapka { width: 100%; display: none; position: fixed; top: -200px; left: 0px; }
@media (min-width: 800px) {
  .lipkaya_shapka { display: block; }
}
/* Этот код срабатывает только на открытой в Элементоровском редакторе странице */ 
.elementor-editor-active .prozrach_shapka { position: relative; } .elementor-editor-active .lipkaya_shapka { display: block; position: relative; top: 0px; } 

/* === Парение-плавное движение объекта вверх-вннз или влево-вправо =========================================== */
.myParenie { animation: myParen 2s infinite ease-in-out !important; } /* Можно написать ".myParenie DIV" и вместо "DIV" вписать "IMG" */
@keyframes myParen { 0% { transform: translate(0%, 2%); } 50% {	transform: translate(0%, -2%); } 100% { transform: translate(0%, 2%);	} } 

/* === Зафиксированные иконки на экране (WhatsApp, Telegram, E-mail и т.п.) ===================================== */
.iconfix_cont { position: fixed; bottom: 0; left: 50%; margin-bottom: 20px; transform: translateX(-50%); z-index: 99; text-align: center; /* Если в "z-index" вписать "999", то кн "Наверх" нельзя будет нажать */ }
@keyframes iconfix_pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.iconfix {
width: 40px; height:40px; margin: 0px 3px 0px 3px; 
animation: iconfix_pulse 1.5s infinite;
}
.iconfix_cont a { display: inline-block; }
.iconfix:hover { animation: iconfix_pulse 0.5s infinite; }
@media (min-width: 800px) {
.iconfix_viber_comp { display: inline-block !important; }
.iconfix_viber_smart { display: none !important; }
}
@media (max-width: 800px) {
.iconfix { width: 35px; height:35px; margin: 0px 0px 5px 0px; }
.iconfix_viber_comp { display: none !important; }
.iconfix_viber_smart { display: inline-block !important; }
}

/* === Стили для суммы количества товаров которая выводится в шапке около корзины. Если эти стили вставить в style="" тега, то после добавления товара в корзину стили перестанут действовать ======================================== */
.myCena_2 { position: relative; top: 8px !important; font-size: 12pt !important; font-weight: bold !important; color: #fff !important; padding-left: 5px; } 

/* === Эффект размытости объектов под "myShapka_3_3" ========================= */
.lip_shap_prozr { backdrop-filter: blur(10px); }

/* === Искажение картинки. Применить этот класс к элементоровскому виджету "Изображение" ======================== */
.myIskagKar img { border-radius: 50%; animation: IskagKar 10s linear infinite alternate forwards; } 
@keyframes IskagKar { 0%, to { border-radius: 63% 37% 54% 46%/55% 48% 52% 45% } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51% } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51% } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39% } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30% } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44% } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65% } }
@-webkit-keyframes IskagKar { 0%, to { border-radius: 63% 37% 54% 46%/55% 48% 52% 45% } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51% } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51% } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39% } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30% } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44% } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65% } }

/* === Пульсирующее увеличение и уменьшение объекта === */
.ObjPulseZoom {display: block; animation: ObjPulseZoom 2s infinite; } @keyframes ObjPulseZoom { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } }

/* === Удалить-скрыть подпись-имя-название файла в виджетах "Карусель", "Изображение" ===================== */
.elementor-slideshow__title { display: none; } 

/* === razmerIframe (Сделать так чтоб размер фрейма-iframe подстраивался под его содержимое) ===================== */
/* Этот CSS-класс юзает код вставленный в Элементоровский виджет "HTML-код" который выводит "calc_1" */
.razmerIframe { border: 0px solid red !important; display: block !important; margin: 0px !important; padding: 0px !important; width: 100% !important; }

/* === calc_1 - CSS - НАЧАЛО ======================== */
/* Стили в "my\calc_1\calc_1.css". 
/* === calc_1 - CSS - КОНЕЦ ========================= */

/* === poiskTov - Поле поиска товаров (Мой плагин) ======= */
/* Стили в файле плагина */