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

.lizag { margin-left: -30px !important; } 
p, h1, h2, h3, h4, h5, h6 { margin-bottom: 0px !important; }

/* === Мой попап плагина "Popup Maker" ====================================== */
.pum-container { position: relative; } /* Из-за используемого тут "display" после щелчка в попапе по кн "Закрыть" он снова на короткое время появляется */
/* --- Для ролика с YouTube --- */
@media screen and (max-width: 800px) { .pum-container { width: 90% !important; }  } 
.pum-content { top: 50%; max-height: 80% !important; 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: 8px 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 p { margin-bottom: 0px; } /* расстояние между текстовыми полями */ 
  .CF7_1_zag { color: #000; text-align: center; font-size: 20pt; font-weight: bold; margin-top: 20px; margin-bottom: 20px; }
  
  /* Надпись "Поле обязательно для заполнения" которая появляется при не правильном заполнении поля в форме. Как я узнал как ее изменить: Попытался отправить не правильно заполненную форму и когда появились эти надписи в браузере выбрал "Исследовать элемент" */ 
  .CF7_1 span { color: #ff0000 !important; text-align: center; }
  
  /* кн "Отправить" */
  .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: 20px 20px 20px 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: -30px !important; }
  .CF7_1_usloviya p { font-size: 9pt; }
  /* *** CF7_1 - КОНЕЦ ********************************************** */
  
/* *** CF7_2 - НАЧАЛО ******************************************************* */
@media screen and (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 { padding: 10px !important; border-radius: 50px !important; border: 2px solid #ff8c00 !important; background-color: #fff; 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 { padding: 18px; border-radius: 50px; border: 0px solid #000; width: 100%; background-color: #ff8c00; }
.CF7_2_kn input:hover { background-color: #d2691e; }
.CF7_2_kn input:focus { 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 { text-align: center; color: #000; }
.CF7_2_usloviya { margin-top: -40px; }
.CF7_2_usloviya p { font-size: 9pt; }
/* *** CF7_2 - КОНЕЦ ********************************************** */

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

/* --- Caldera Forms - НАЧАЛО ------------------------------------------ */
.caldera-form-page { padding-top: 60px; } /* Тут я прибавляю заголовку отступ сверху потому что после нажатия кнопки форма перематывается к верху сайта и верхнее липкое меню его загараживает */

.caldera-grid label { /* Заголовоки виджетов, радиопункты и т.п. */
  color: #000; 
  /* font-size: 15px; */
  /* font-weight: normal; */
  margin-bottom:10px;
} 
  
  .CF_my div { /* В этом DIV все пункты выбора */
  display: flex;
  justify-content: space-evenly;
  border-radius: 0px 0px 10px 10px;
  }
  
  .CF_my label {
  padding: 0px !important; /* Отступ между каждым пунктами выбора */
  text-align: center !important;
  }
  
  .CF_my input { position: absolute; top: 30px; right: 30px; } /* Кружки радиопунктов */
  .CF_img { border-radius: 10px !important; } /* Пункты выбора */

  @media screen and (max-width: 800px) {
    .CF_my { text-align: center; } /* Выравниваю заголовок пункта с выбором радиопунктов с картинками */
    .CF_my p { text-align: center !important; } /* Текст под пунктами выбора */
    .CF_my div { display: block; }
    .CF_kn { text-align: center !important; }
    .radio-inline, .checkbox-inline { margin-left: 0px !important; } /* Если это убрать то в телефонной версии сайта все радиопункты кроме первого будут смещены всторону */
    .caldera-grid label, .caldera-grid, .total-line { font-family: Oswald_Regular !important; }
  }
  
  .CF_my p { /* Текст под пунктами выбора */
  margin: 10px 0px 10px 0px;
  color: black;
  text-align: left;
  max-width: 800px; /* Если это убрать то если в каком-то радиопункте будет слишком много текста то этот радиопункт будет шире остальных */
  }
  
.CF_kn input { /* Кнопки */
  color: #fff !important; 
  border-radius: 100px; 
  border: 0px !important; 
  background-color: #ff8c00 !important; 
  font-weight: bold !important; 
  padding: 10px 20px 10px 20px; 
  text-align: center;
}
/* .CF_kn { text-align: center !important; } */

.CF_knVper { text-align: right; } /* Кнопка "Вперед" */

.field_required { display: none; } /* Удалить звездочку которая появляется после заголовка формы при попытке отправить форму с незаполненным обязательным полем */
.caldera_ajax_error_block { color: red !important; } /* Надпись "Обязательное поле." которое появляется при попытке отправиь форму с не заполненным обязательным полем */
.row { margin-left: 0px !important; margin-right: 0px !important; } /* Если это не делать то вся форма будет сдвинута влево на 7.5px */ 

.form-group, .CF_vesBlok { /* Весь блок на плашке */
  border-radius: 10px; 
  background-color: #f2f2f2; 
  padding: 10px 10px 10px 10px; 
  margin: 0px 0px 15px 0px !important; /* Отступы между всеми элементами (текстовыми полями, кнопками и т.п.) */
} 

.form-control { /* Текстовые поля */
  border-radius: 10px !important; 
  border: 2px solid #f2f2f2 !important; 
  box-shadow: none !important; /* Блур который появл после клика по текстовому полю */
} 

/* Заголовок раздела-страницы */
.CF_zag_razdela_1 { background-color: #00008b; text-align: center; padding-bottom: 0px; }
.CF_zag_razdela_1 label { color: #fff; font-weight: bold; }
.CF_zag_razdela_2 { background-color: #1DBBE0; text-align: center; padding-bottom: 0px; }
.CF_zag_razdela_2 label { color: #fff; font-weight: bold; }

/* Текстовые вставки */
.CF_text_1 { background-color: #fff; text-align: center; padding: 0px; }
.CF_text_1 label { color: #000; font-weight: normal; margin: 0px !important; }

/* Блоки с именем, телефоном, почтой */
.CF_vesBlok_2 { background-color: #10366B; color: #fff !important; }
.CF_vesBlok_2 label { color: #fff !important; }
.CF_vesBlok_2 h3 { color: #fff !important; }

.CF_persDan { color: #999999; text-align: center !important; margin-top: -10px; font-size: 14px; }

.CF_bezOtst { /* Весь блок без отступов */
  border-radius: 10px; 
  border: none; 
  padding: 0px; 
  background-color: #fff; /* Фон блока в котором кнопка */
} 

.trumbowyg-modal-button { padding: 0px !important; } /* Две кнопки блока "Rich Editor" (это текстовое поле с кнопками форматирования текста) в модальном окне которое появляется когда щелкаешь в этом модальном окне по кн "Insert Image" */

.alert { /* Надпись "Отправлено" которая появляется вместо формы после ее отправки */ 
  margin-top: 60px; /* Тут я прибавляю надписи "Отправлено" отступ сверху потому что после отправки формы сайт перематывается к верху и верхнее липкое меню ее загараживает */
  text-align: center; border-radius: 20px !important; 
} 

/* Соединить верхний и нижний виджеты */
.CF_soed_1 { margin-bottom: 0px !important; border-radius: 10px 10px 0px 0px; } 
.CF_soed_3 { margin-top: -10px !important; padding-top: 0px !important; border-radius: 0px 0px 10px 10px; } 
/* --- Caldera Forms - КОНЕЦ ----------------------------------------------------------- */

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

/* === Подпись внизу картинки в модальном окне-лайтбоксе Элементоровского плагина "Галерея" ================== */
/* .elementor-slideshow__title { display: none; } */

/* === Скрыть стрелки-влево-вправо навигации которые появляются по мимо тех котые в слайдере сделанном из секций в плагине "OoohBoi Steroids for Elementor" ============== */
.Slayder_iz_sekcii_OoohBoi .swiper-button-next:after, .Slayder_iz_sekcii_OoohBoi .swiper-button-prev:after { display: none; } 
/* === Скруглить фон под стрелками-влево-вправо навигации если он овальный в слайдере сделанном из секций в плагине "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; } 

/* === myBlok_schetchik_kolichestva (это виджет "Счетчик" в Элементоре) ====================== */
.myBlok_schetchik_kolichestva_1 .elementor-counter-number { width: 200px; height: 200px; min-width: 200px; min-height: 200px; display: flex; align-items: center; justify-content: center; background-image: url('../my/myBlok_schetchik_kolichestva/1.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.myBlok_schetchik_kolichestva_2 .elementor-counter-number { width: 200px; height: 200px; min-width: 200px; min-height: 200px; display: flex; align-items: center; justify-content: center; background-image: url('../my/myBlok_schetchik_kolichestva/2.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.myBlok_schetchik_kolichestva_3 .elementor-counter-number { width: 200px; height: 200px; min-width: 200px; min-height: 200px; display: flex; align-items: center; justify-content: center; background-image: url('../my/myBlok_schetchik_kolichestva/3.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.myBlok_schetchik_kolichestva_4 .elementor-counter-number { width: 200px; height: 200px; min-width: 200px; min-height: 200px; display: flex; align-items: center; justify-content: center; background-image: url('../my/myBlok_schetchik_kolichestva/4.svg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
/* =============================================================================== */

/* === Боковое меню. Плагин "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;
  	 -webkit-transition: All 0.5s ease-out 0s !important;
     -moz-transition: All 0.5s ease-out 0s !important;
     -o-transition: All 0.5s ease-out 0s !important;
     transition: All 0.5s ease-out 0s !important; 
}
.pole_poiska input:focus,
.pole_poiska input:hover { 
border-radius: 0px !important;
}
.pole_poiska button {
  border: none !important;
  outline: none !important;
}
.pole_poiska input {
  border: 2px solid #ff8c00 !important; /* Обводка у поля ввода */
  outline: none !important;
}
.pole_poiska input { /* Поле ввода */
  /* border-radius: 0px !important; */ /* Если это включить то у поля будут изначально острые углы, а они у меня появляются только при наведении */
  height: 35px !important; 
  min-height: 35px !important; 
  background: #f1f1f1 !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: 20px bottom; background-size: 288px;
  }
}

.modal_dialog2_74339856_1 { /* С помощью "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_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; 
  }
}

/* +++ Поле ввода и кн "Поиск" ++++++++++++++++++++++++++++++++++++++++++++ */
/* @media (min-width: 800px) { .modOkno_2_5 { width: 360px; } } */ /* Код сработает если экран шире этого числа */
/* .modOkno_2_5 input { background-color: #ff8c00 !important; color: white !important; border-radius: 100px 0px 0px 100px !important; border: 0px solid red !important; } */ /* Поле ввода */
/* .modOkno_2_5 input::placeholder { color: white; } */ /* Текст который введен до ввода текста в полях формы (placeholder) */
/* .modOkno_2_5 button { background-color: #00008b !important; border-radius: 0px 100px 100px 0px !important; font-size: 10pt !important; padding: 20px 40px 20px 40px !important; } */ /* кн "Поиск" */

/* кн "Поиск" */
/* .modOkno_2_5 button:focus,
.modOkno_2_5 button:hover { 
  border-radius: 0px !important;
  background-color: #ff8c00 !important;
  -webkit-transition: All 0.5s ease-out 0s;
	-moz-transition: All 0.5s ease-out 0s;
	-o-transition: All 0.5s ease-out 0s;
	transition: All 0.5s ease-out 0s;
  } */
  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

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

/* === Кн "Заказать звонок" телефонная трубка в нижнем углу экрана. Чтоб изменить размер надо поменять тут цифры в строках где написано "Размер кн" - НАЧАЛО ============ */
.callback_bt_675534_1 {
  background: #38a3fd;
  border-radius: 50%;
  box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3);
  /* 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 screen and (min-width: 800px) {
  .lipkaya_shapka {
    display: block;
  }
}

/* --- Мобильное меню ------------------------------------------------------------------------------ */
@media screen and (max-width: 1024px) {
  .mobMenu {
    position: fixed;
    top:30px;
    right: 20px;
  }
  .mobMenu_LipShap { display: none; } /* Скрыть меню в липкой шапке потому что на этой ширине меню плагина "ElementsKit Elementor addons" превращается в гамбургер */ 
}

/* === Парение-плавное движение объекта вверх-вннз или влево-вправо =========================================== */
.myParenie { /* Можно написать ".myParenie DIV" и вместо "DIV" вписать "IMG" */
	animation: float 2s infinite ease-in-out !important;
}
@keyframes float {
	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 screen and (min-width: 800px) {
.iconfix_viber_comp { display: inline-block !important; }
.iconfix_viber_smart { display: none !important; }
}
@media screen and (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); }
/* ================================================================ */

/* === Стили таблиц прайсов (Шаблон в "!Сайты - справка.docx" в "Прайсы и тп таблицы") ======================= */
.my_style_price_konteyner table { 
margin: 0px !important; padding: 0px !important; 
}
/* --- Если прайс не кодом, а картинкой ------------------ */
.my_style_price_kartin { 
/* Вариант с ограниченной высотой */
height: 300px; overflow: auto; padding-right: 10px !important; 
/* Вариант с неограниченной высотой */
/* height: 100% !important; padding: 0px 0px 0px 0px !important; overflow: auto !important;  */
}
.my_style_price_kartin img { 
min-width: 400px; /* Это нужно если прайс вставлен не кодом а картинкой */
}

/* --- Если прайс не картинкой, а кодом ------------------- */
.my_style_price_konteyner { 
/* Вариант с ограниченной высотой */
/* height: 300px; overflow: auto; padding-right: 10px !important; */
/* Вариант с неограниченной высотой */
height: 100% !important; overflow: hidden !important; padding: 0px 0px 0px 0px !important; 
}
.my_style_price { 
width: 100% !important; border: 0px solid #000 !important;
}
/* Заголовки таблиц */
.my_style_price_zag_1 td { background-color: #1DBBE0; color: #fff; font-weight: bold; } 
.my_style_price td, .my_style_price th { 
border: 1px solid #F4F6F4 !important;
padding: 10px 10px 10px 10px !important;
line-height: 1.5 !important;
word-wrap: break-word !important;
white-space: normal !important;
vertical-align: middle !important;
width: 100% !important; /* Если это убрать то ячейки с ценой не будут по ширине контента, а будут шире */
}
@media (max-width: 800px) { 
.my_style_price, .my_style_price td, .my_style_price th { 
font-family: Oswald_Regular, sans-serif !important;
padding: 3px !important;
/* font-size: 8pt !important; */
}
.my_style_price td, .my_style_price th { 
/* font-size: 8pt !important; */
word-wrap: break-word !important;
white-space: normal !important;
}
}
.my_style_price tr:nth-of-type(odd){ /* odd это обратиться ко всем не четным пунктам, а even ко всем четным */
background-color: #f9f9f9 !important;
}
.my_style_price tr:nth-of-type(even){ 
background-color: #f2f2f2 !important;
}
/* =================================================== */