/* div { border: 1px solid red !important; } */ html { overflow-x: hidden !important; } body { overflow-x: hidden !important; } /* Горизонтальную полоса прокрутки. Она может появляться когда я задаю объектам эффект выезжания-появления */ /* ===================================================================== */ .hfe-before-footer-wrap { display: none; } /* === Подпись под картинкой в модальном окне-лайтбоксе и в элементоровском плагине "Галерея" и в других ================== */ /* .elementor-slideshow__title { display: none; } */ /* === Убрать нижний отступ (Делаю это что бы в Элемонторовском виджете "Текстовой редактор" были нормальные отступы от заголовков до текста) ======== */ /* P, H1, H2, H3, H4, H5, H6 { margin-bottom: 0px !important; } */ /* === Мой попап плагина "Popup Maker" ====================================== */ .pum-container { position: relative; } /* Из-за используемого тут "display" после щелчка в попапе по кн "Закрыть" он снова на короткое время появляется */ /* --- Для обычного контента ------------------------------------------------------------------------------------ */ @media screen and (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 screen and (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: 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 { 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 - КОНЕЦ -------------------------------------------- */ /* --- 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; } /* Надпись "Это обязательное поле." */ /* === Форма обратной связи - КОНЕЦ ========================== */ /* === Скрыть стрелки-влево-вправо навигации которые появляются по мимо тех котые в слайдере сделанном из секций в плагине "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; } /* === 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; } .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: 20px bottom; background-size: 288px; } } .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_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; } /* === Модальное окно с поиском - КОНЕЦ =================== */ /* === 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 screen and (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; */ /* Курсор в виде руки для ссылки. Сейчас я ее делаю тегом */ 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; } } /* Этот код срабатывает только на открытой в Элементоровском редакторе странице */ .elementor-editor-active .prozrach_shapka { position: relative; } .elementor-editor-active .lipkaya_shapka { display: block; position: relative; top: 0px; } /* --- Поле поиска товаров в шапке (Плагин "Advanced Woo Search") -------------------------------------------------- */ .aws-search-form .aws-wrapper { border: 1px solid #CCCCCC; border-radius: 200px !important; } .aws-search-form input { padding: 20px !important; border: 0px solid red !important; } @media screen and (max-width: 767px) { .aws-search-form .aws-wrapper { border-radius: 10px !important; } } /* === Парение-плавное движение объекта вверх-вннз или влево-вправо =========================================== */ .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 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); } /* === Искажение картинки. Применить этот класс к элементоровскому виджету "Изображение" ======================== */ .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: pulse 2s infinite; } @keyframes ObjPulseZoom { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } /* === Удалить-скрыть подпись-имя-название файла в виджетах "Карусель", "Изображение" ===================== */ .elementor-slideshow__title { display: none; }