.in-development { position: relative; } .in-development:after { content: "В данный момент в разработке"; display: flex; align-items: center; justify-content: center; position: absolute; top: -5%; right: -4%; width: 108%; height: 113%; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(1px); border-radius: var(--default-border-radius); } /* ################################################################################### ## Основные стили ################################################################################### */ :root { --head-font: "Roboto Condensed", "Verdana", "Geneva", sans-serif; --text-font: "Tilda Sans", "Tahoma", "Geneva", sans-serif; /*-------------*/ --text-tb1: 30px; --text-b1: 20px; --text-b2: 18px; --text-b3: 16px; --text-b4: 14px; --text-t1: 96px; --text-t2: 54px; --text-t3: 48px; --text-h1: 36px; --text-h2: 30px; --text-h3: 26px; --text-h4: 24px; /*-------------*/ --color-bright: #fff; --color-constant-bright: #fff; --color-dark: #191919; --color-constant-dark: #13313A; --color-foreground: #193D47; --color-background: #fff; --color-primary: #B8A877; --color-primary-light: #FAF7EC; --color-secondary: #95875D; --color-tertiary: #191919; --color-primary-alt: #7ABDCB; --color-secondary-alt: #265E72; --color-tertiary-alt: #000; --color-gray: #EAEAEA; --color-gray-light: #FAFAFA; --color-gray-dark: #808080; --color-success: #4DC578; --color-success-bg: #E8F8EE; --color-alert: #FD9326; --color-alert-bg: #FFF5E6; --color-danger: #ff0f00; --color-warning: #3BC6F4; --color-notif: #244b5b; --color-info: #7F7F7F; --color-actions: #4d4f5a; --color-bitrix: #00aeef; /*-------------*/ --seminar-red-bg: #ffe8e8; --seminar-red-accent: #ffd6d7; --seminar-red-ico: #FC585A; --seminar-blue-bg: #e8f7ff; --seminar-blue-accent: #d3efff; --seminar-blue-ico: #0B8EDA; --seminar-orange-bg: #ffecdb; --seminar-orange-accent: #ffddbe; --seminar-orange-ico: #FF9D45; --seminar-yellow-bg: #fff6e0; --seminar-yellow-accent: #ffedc1; --seminar-yellow-ico: #FFCC50; --seminar-gold-bg: #fff6e0; --seminar-gold-accent: #ffedc1; --seminar-gold-ico: #B8A877; --seminar-purple-bg: #f0efff; --seminar-purple-accent: #dcdbff; --seminar-purple-ico: #9894FF; --seminar-green-bg: #e4f8e3; --seminar-green-accent: #cdf1cb; --seminar-green-ico: #54B972; --seminar-light-blue-bg: #e6fbff; --seminar-light-blue-accent: #c5f3fd; --seminar-light-blue-ico: #31CBED; --seminar-blue-green-bg: #e3f8f7; --seminar-blue-green-accent: #c3f0ee; --seminar-blue-green-ico: #31B8B0; --seminar-light-pink-bg: #fff0fa; --seminar-light-pink-accent: #ffe4f7; --seminar-light-pink-ico: #EF42BA; --seminar-light-green-bg: #f0f8e3; --seminar-light-green-accent: #ddf2ba; --seminar-light-green-ico: #95D927; --seminar-pink-bg: #ffebf1; --seminar-pink-accent: #ffd2e0; --seminar-pink-ico: #FF306E; --seminar-grey-bg: #f0f0f0; --seminar-grey-accent: #e5e5e5; --seminar-grey-ico: #BCBCBC; /*-------------*/ --tiny-border-radius: 10px; --small-border-radius: 30px; --default-border-radius: 60px; --big-border-radius: 100px; /*-------------*/ --box-shadow-color: rgba(200, 200, 200, 0.2); --box-shadow: 0px 0 50px 0px var(--box-shadow-color); --box-shadow-hover-color: rgba(200, 200, 200, 0.4); --box-shadow-hover: 0px 0px 30px 0 var(--box-shadow-hover-color); --box-shadow-small-color: rgba(100, 100, 100, 0.1); --box-shadow-small: 0px 0px 5px var(--box-shadow-small-color); --box-shadow-small-hover-color: rgba(100, 100, 100, 0.15); --box-shadow-small-hover: 0px 0px 10px 5px var(--box-shadow-small-hover-color); --box-shadow-inset-color: rgba(0, 0, 0, 0.15); /*-------------*/ --size-ratio: 1; /*-------------*/ --tooltip-arrow-width: 16px; --tooltip-arrow-height: 8px; --tooltip-arrow-half-width: calc(var(--tooltip-arrow-width) / 2); --tooltip-arrow-half-height: calc(var(--tooltip-arrow-height) / 2); --tooltip-arrow-border-width: 2px; --tooltip-arrow-border-height: 2px; --tooltip-arrow-half-border-width: calc( var(--tooltip-arrow-border-width) / 2 ); --tooltip-arrow-half-border-height: calc( var(--tooltip-arrow-border-height) / 2 ); --tooltip-arrow-bordered-width: calc( var(--tooltip-arrow-width) + var(--tooltip-arrow-border-width) ); --tooltip-arrow-bordered-height: calc( var(--tooltip-arrow-height) + var(--tooltip-arrow-border-height) ); --tooltip-arrow-half-bordered-width: calc( var(--tooltip-arrow-half-width) + var(--tooltip-arrow-half-border-width) ); --tooltip-arrow-half-bordered-height: calc( var(--tooltip-arrow-half-height) + var(--tooltip-arrow-half-border-height) ); } @media screen and (max-width: 991px) { :root { --text-tb1: 24px; --text-b1: 18px; --text-b2: 16px; --text-b3: 14px; --text-t1: 72px; --text-t2: 42px; --text-t3: 38px; --text-h1: 26px; --text-h2: 22px; --text-h3: 20px; --text-h4: 18px; } } @media screen and (max-width: 576px) { :root { --text-tb1: 20px; --text-b1: 18px; --text-b2: 16px; --text-b3: 14px; --text-t1: 56px; --text-t2: 28px; --text-t3: 26px; --text-h1: 24px; --text-h2: 20px; --text-h3: 18px; --text-h4: 16px; } } /* --------- Документ ------------ */ body, html { width: 100%; position: relative;} html {min-width: 260px; background: var(--color-foreground); } body {background: var(--color-background); padding-left: 0; overflow-x: hidden; padding-right: 0!important; max-width: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: var(--text-font); line-height: 1.4; min-height: 100vh; } body.dragging, body.dragging .modal, body.modal-open { overflow: hidden; } body.admin-bar{ padding-top: var(--wp-admin--admin-bar--height, 0); } body:not(.admin-bar){ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -moz-user-drag: none; -webkit-user-drag: none; -ms-user-drag: none; -o-user-drag: none; } body.dark-theme{ /*-------------*/ --color-bright: #193D47; --color-dark: #fff; --color-foreground: #1B4652; --color-background: #193D47; --color-gray: #1D4551; --color-primary-light: #1B4652; --color-tertiary: #3394b7; --color-gray-light: #20454F; --color-gray-dark: #AEAEAE; /*-------------*/ } @media print { body:not(.admin-bar) {visibility: hidden;} } @media screen and (max-width: 768px) { html { padding-top: 0; } } @media screen and (max-width: 600px) { #wpadminbar { position: fixed; } } /* --------- Картинки ------------ */ img, svg{display: inline-block; max-width: 100%;} img.lazyload, img.lazyloading { width: auto; height: 100%; position: relative; color: transparent; } img.lazyload:after, img.lazyloading:after { color: var(--color-dark); font-family: 'Talpis'; line-height: .85; font-size: 16px; content: "🖼"; animation: 1s ease-in-out none infinite alternate glow; opacity: 1; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2; } @keyframes glow { from { opacity: 1; } to { opacity: 0; } } svg use{width: 100%; height: 100%;} /* --------- Разметка ------------ */ span[itemid] { display: none; } /* ################################################################################### ## Текст ################################################################################### */ body { font-size: var(--text-b2); color: var(--color-dark); } .h1, .h2, .h3, .h4, .h5, .h6, b, h1, h2, h3, h4, h5, h6 { font-family: var(--head-font); } h1 { font-size: var(--text-h1);} h2 { font-size: var(--text-h2);} h3 { font-size: var(--text-h3);} h4 { font-size: var(--text-h4);} h1 small, h2 small, h3 small { font-family: var(--text-font); position: relative; top: -1px; font-size: 14px; font-weight: normal; } small, b{display: inline-block;} small { font-family: var(--head-font); } p:last-child { margin-bottom: 0; } /* --------- Цитата ------------ */ blockquote:not(.wp-embedded-content){position: relative; padding: .5em 0 .5em 1em; border-left: 0.2em solid var(--color-primary); font-size: 1.6em; line-height: 1em; font-weight: 100;} blockquote:not(.wp-embedded-content):before, blockquote:not(.wp-embedded-content):after{color: var(--color-primary); font-size: 1em;} blockquote:not(.wp-embedded-content):before{content: '\201e'; margin-right: 5px;} blockquote:not(.wp-embedded-content):after{content: '\201c'; margin-left: 5px;} blockquote:not(.wp-embedded-content) p{display: inline;} /* ################################################################################### ## Блоки ################################################################################### */ .page-title{text-transform: uppercase; border-left: 4px solid var(--color-primary); padding: 4px 20px; margin-bottom: 40px; } @media screen and (max-width: 1200px) { .container { max-width: 100% !important;} } /* ################################################################################### ## Утлиты ################################################################################### */ .row-vertical-aligned{ align-items: center; } .col-vertical-aligned { display: flex; flex-direction: column; justify-content: center; } .text-overflow{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .text-center{text-align: center;} .text-right{text-align: right;} /* ################################################################################### ## Ссылки ################################################################################### */ a {display: inline-block; font-size: inherit; color: var(--color-dark); cursor: pointer; transition: color 0.15s ease; } a:active, a:focus, a:hover, button:active, button:focus, button:hover { color: var(--color-primary-alt); text-decoration: none; outline: none; } a[data-gallery]{position: relative} a[data-gallery][data-youtube]:after, a[data-gallery][data-rutube]:after{content: '▹'; font-family: 'Talpis'; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; color: var(--color-constant-bright); font-size: 72px; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); transition: background-color .15s ease, color .15s ease;} a[data-gallery][data-youtube]:hover:after, a[data-gallery][data-rutube]:hover:after{color: var(--color-primary-alt); background-color: rgba(0, 0, 0, 0.4)} a[data-gallery] .gallery-caption{position: absolute; bottom: 0; left: 0; width: 600px; max-width: 100%; padding: 30px 30px 25px; color: var(--color-constant-bright); z-index: 2;} a[data-gallery] .gallery-caption b{font-size: var(--text-b1); font-weight: 300;} .dark-bg a{color: var(--color-primary)} @media screen and (max-width: 768px) { a[data-gallery] .gallery-caption{padding: 5px 10px;} a[data-gallery] .gallery-caption b{font-size: var(--text-b3); line-height: 1;} } /* ################################################################################### ## Кнопки ################################################################################### */ .btn {display: inline-block; font-family: var(--head-font); cursor: pointer; text-decoration: none; outline: none; border: 1px solid transparent; padding: 15px 40px; transition: box-shadow 0.15s ease,background-color 0.15s ease,color 0.15s ease,border 0.15s ease; background: transparent; color: var(--color-dark); border-radius: var(--big-border-radius); line-height: 1.3; font-weight: 400; font-size: var(--text-b3); } .btn:disabled { color: var(--color-dark); background: var(--color-gray-light); cursor: default;} .btn:disabled, .btn:disabled:hover, .btn:disabled:focus, .btn:disabled:active{box-shadow: none !important;} .btn.show, .btn:hover, .btn:focus, .btn:active, .btn:focus:active { background: transparent; color: var(--color-primary); box-shadow: none; border: 1px solid transparent; } .btn.btn-white { color: var(--color-tertiary); background: var(--color-bright); border: var(--color-bright) 1px solid; } .btn-white.show, .btn.btn-white:hover, .btn-white:focus { background: var(--color-secondary); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-secondary); } .btn.btn-white:active, .btn.btn-white:focus:active{ background: var(--color-tertiary); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-tertiary); } .btn.btn-white.collapsed { background: var(--color-secondary); color: var(--color-bright); border-color: var(--color-secondary); box-shadow: none; } .btn-check:checked + .btn-white { background: var(--color-primary); color: var(--color-bright); border-color: var(--color-primary); box-shadow: none; } .btn.btn-white:disabled { color: var(--color-tertiary); background: var(--color-bright); border-color: var(--color-bright); } .btn.btn-white-alt { color: var(--color-tertiary); background: var(--color-bright); border: var(--color-primary) 1px solid; } .btn-white-alt.show, .btn.btn-white-alt:hover, .btn-white-alt:focus { background: var(--color-secondary); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-secondary); } .btn.btn-white-alt:active, .btn.btn-white-alt:focus:active{ background: var(--color-tertiary); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-tertiary); } .btn.btn-white-alt.collapsed { background: var(--color-secondary); color: var(--color-bright); border-color: var(--color-secondary); box-shadow: none; } .btn-check:checked + .btn-white-alt { background: var(--color-primary); color: var(--color-bright); border-color: var(--color-primary); box-shadow: none; } .btn.btn-white-alt:disabled { color: var(--color-tertiary); background: var(--color-bright); border-color: var(--color-primary); } .btn.btn-primary { color: var(--color-constant-bright); background: var(--color-primary); border: var(--color-primary) 1px solid; } .btn-primary.show, .btn.btn-primary:hover, .btn-primary:focus { background: var(--color-secondary); color: var(--color-constant-bright); box-shadow: var(--box-shadow); border-color: var(--color-secondary); } .btn.btn-primary:active, .btn.btn-primary:focus:active{ background: var(--color-tertiary); color: var(--color-constant-bright); box-shadow: var(--box-shadow); border-color: var(--color-tertiary); } .btn.btn-primary.collapsed { background: var(--color-secondary); color: var(--color-constant-bright); border-color: var(--color-secondary); box-shadow: none; } .btn-check:checked + .btn-primary { background: var(--color-primary); color: var(--color-constant-bright); border-color: var(--color-primary); box-shadow: none; } .btn.btn-primary:disabled { color: var(--color-gray); background: var(--color-bright); } .btn.btn-secondary { color: var(--color-bright); background: var(--color-secondary); border: var(--color-secondary) 1px solid; } .btn-secondary.show, .btn-secondary:focus, .btn.btn-secondary:active, .btn.btn-secondary:focus:active, .btn.btn-secondary:hover { background: var(--color-tertiary); color: var(--color-bright); border-color: var(--color-tertiary); box-shadow: var(--box-shadow); } .btn.btn-secondary.collapsed { background: transparent; color: var(--color-bright); border-color: var(--color-secondary); box-shadow: none; } .btn-check:checked + .btn-secondary { background: var(--color-secondary); color: var(--color-bright); border-color: var(--color-secondary); box-shadow: none; } .btn.btn-secondary:disabled { color: var(--color-dark); background: var(--color-bright); } .btn.btn-tertiary { color: var(--color-bright); background: var(--color-tertiary); border: var(--color-tertiary) 1px solid; } .btn-tertiary.show, .btn-tertiary:focus, .btn.btn-tertiary:active, .btn.btn-tertiary:focus:active, .btn.btn-tertiary:hover { background: var(--color-secondary); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-secondary); } .btn.btn-tertiary.collapsed { background: var(--color-secondary); color: var(--color-bright); border-color: var(--color-secondary); box-shadow: none; } .btn-check:checked + .btn-tertiary { background: var(--color-tertiary); color: var(--color-bright); border-color: var(--color-tertiary); box-shadow: none; } .btn.btn-tertiary:disabled { color: var(--color-bright); background: var(--color-secondary); } .btn-check:checked + .btn-tertiary-alt { background: var(--color-primary); color: var(--color-bright); border-color: var(--color-primary); box-shadow: none; } .btn.btn-tertiary-alt:disabled { color: var(--color-bright); background: var(--color-secondary); } .btn.btn-danger { color: var(--color-alert); background: var(--color-bright); border: var(--color-alert) 1px solid; } .btn-danger.show, .btn-danger:focus, .btn.btn-danger:active, .btn.btn-danger:focus:active, .btn.btn-danger:hover { background: transparent; color: var(--color-alert); box-shadow: var(--box-shadow); } .btn.btn-danger.collapsed { background: var(--color-alert); color: var(--color-bright); box-shadow: none; } .btn-check:checked + .btn-danger { background: var(--color-alert); color: var(--color-bright); box-shadow: none; } .btn.btn-danger:disabled { color: var(--color-bright); background: var(--color-gray); } .btn.btn-outline-danger{background:transparent; border-color: var(--color-danger);} .btn-check:active + .btn-outline-danger, .btn-check:checked + .btn-outline-danger, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show, .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:hover:focus, .btn-outline-danger:active{color: var(--color-bright); background-color:var(--color-danger)} .btn.btn-outline-primary { color: var(--color-primary); background: transparent; border: var(--color-primary) 1px solid; } .btn-outline-primary.show, .btn.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--color-primary); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-primary); } .btn.btn-outline-primary:active, .btn.btn-outline-primary:focus:active{ background: var(--color-primary); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-primary); } .btn.btn-outline-primary.collapsed { background: transparent; color: var(--color-primary); border-color: var(--color-primary); box-shadow: none; } .btn-check:checked + .btn-outline-primary { background: var(--color-primary); color: var(--color-bright); border-color: var(--color-primary); box-shadow: none; } .btn.btn-outline-primary:disabled { color: var(--color-gray); background: var(--color-bright); } .btn.btn-outline-primary-alt { color: var(--color-primary-alt); background: transparent; border: var(--color-primary-alt) 1px solid; } .btn-outline-primary-alt.show, .btn.btn-outline-primary-alt:hover, .btn-outline-primary-alt:focus { background: var(--color-primary-alt); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-primary-alt); } .btn.btn-outline-primary-alt:active, .btn.btn-outline-primary-alt:focus:active{ background: var(--color-primary-alt); color: var(--color-bright); box-shadow: var(--box-shadow); border-color: var(--color-primary-alt); } .btn.btn-outline-primary-alt.collapsed { background: transparent; color: var(--color-primary-alt); border-color: var(--color-primary-alt); box-shadow: none; } .btn-check:checked + .btn-outline-primary-alt { background: var(--color-primary-alt); color: var(--color-bright); border-color: var(--color-primary-alt); box-shadow: none; } .btn.btn-outline-primary-alt:disabled { color: var(--color-gray); background: var(--color-bright); } .btn.btn-outline-tertiary { color: var(--color-tertiary); background: transparent; border: var(--color-tertiary) 1px solid; } .btn-btn-outline-tertiary.show, .btn-outline-tertiary:focus, .btn.btn-outline-tertiary:active, .btn.btn-outline-tertiary:focus:active, .btn.btn-outline-tertiary:hover { background: var(--color-primary); color: var(--color-bright); border-color: var(--color-primary); box-shadow: var(--box-shadow); } .btn.btn-outline-tertiary.collapsed { background: transparent; color: var(--color-primary); border-color: var(--color-primary); box-shadow: none; } .btn-check:checked + .btn-outline-tertiary { background: var(--color-primary); color: var(--color-bright); border-color: var(--color-primary); box-shadow: none; } .btn.btn-outline-tertiary:disabled { color: var(--color-gray); background: var(--color-bright); } .btn.btn-outline-gray { color: var(--color-gray-dark); background: transparent; border: var(--color-gray-dark) 1px solid; } .btn-outline-gray.show, .btn.btn-outline-gray:hover, .btn-outline-gray:focus { background: transparent; color: var(--color-primary-alt); box-shadow: var(--box-shadow); border-color: var(--color-primary-alt); } .btn.btn-outline-gray:active, .btn.btn-outline-gray:focus:active{ background: transparent; color: var(--color-primary-alt); box-shadow: var(--box-shadow); border-color: var(--color-primary-alt); } .btn.btn-outline-gray.collapsed { background: transparent; color: var(--color-primary-alt); border-color: var(--color-primary-alt); box-shadow: none; } .btn-check:checked + .btn-outline-gray { background: var(--color-primary-alt); color: var(--color-constant-bright); border-color: var(--color-primary-alt); box-shadow: none; } .btn.btn-outline-gray:disabled { color: var(--color-gray); background: var(--color-bright); } .btn-check:checked + .btn-default, .btn-default.show, .btn.btn-default:active, .btn.btn-default:focus, .btn.btn-default:focus:active, .btn.btn-default:hover { box-shadow: var(--box-shadow); } .btn-check:checked + .btn-default, .btn.btn-default.collapsed { box-shadow: none; } .btn.btn-link{ font-weight: 500; color: var(--color-primary-alt); padding: 10px 0; background: none; text-decoration: none; line-height: 1; } .btn-check:checked + .btn-link, .btn-link.show, .btn.btn-link:active, .btn.btn-link:focus:active, .btn.btn-link:hover { box-shadow: none; color: var(--color-primary-alt); text-decoration: underline; } .btn.btn-link i{font-size: .8em; margin-right: 5px;} .btn.btn-link-alt{ font-weight: 500; color: var(--color-dark); padding: 10px 0; background: none; text-decoration: none; line-height: 1; } .btn-check:checked + .btn-link-alt, .btn-link-alt.show, .btn.btn-link-alt:active, .btn.btn-link-alt:focus:active, .btn.btn-link-alt:hover { box-shadow: none; color: var(--color-primary-alt); text-decoration: none; } .btn.btn-link-alt i{font-size: .8em; margin-right: 5px;} p .btn.btn-link, p .btn.btn-link-alt { vertical-align: inherit; } /* Типы */ .btn-block { width: 100%; display: block; text-align: center;} .btn-close:focus{box-shadow: none;} .btn-clear{padding: 0; background: none; border: 0;} .btn-group > .btn-group:not(:first-child), .btn-group > .btn:not(:first-child) { margin-left: 0; } .btn-icon { padding: 10px; } .btn-icon:first-child { padding-left: 12px; padding-right: 10px; } .btn-icon i { vertical-align: middle; } .btn-sm { font-size: var(--text-b3); padding: 10px 25px; } .btn-md { font-size: var(--text-h4); padding: 15px 40px; } .btn-lg { font-size: var(--text-h3); padding: 25px 50px; } /* ################################################################################### ## Спойлер ################################################################################### */ .collapse-toggle{text-decoration: none;} .collapse-toggle i{line-height: 1.1;} .collapse-toggle:not(.collapsed) i:before{content: '⬆'; margin-top: -2px;} .menu-item-group .collapse-toggle{margin-left: auto;} /* ################################################################################### ## Выпадающее меню ################################################################################### */ .btn.dropdown-toggle { vertical-align: 0.1em; } .show > .btn.dropdown-toggle:focus { box-shadow: none; } .dropdown-menu {padding: 16px 0; background: var(--color-bright); color: var(--color-dark); border-radius: var(--tiny-border-radius); box-shadow: var(--box-shadow-small-hover); } .dropdown-menu .dropdown-item { color: var(--color-dark); padding: 8px 25px; transition: background-color .15s ease;} .dropdown-menu .dropdown-item:hover{color: var(--color-primary-alt); background-color: var(--color-gray-light);} .dropdown-menu .dropdown-item.static:hover { background: unset; } .dropdown-item.active, .dropdown-item:active { background: var(--color-bright); } .dropdown-horizontal .dropdown-menu.show { display: flex; } /*Стандартные стили*/ .dropdown-menu:after, .dropdown-menu:before { position: absolute; content: ""; border-color: transparent; border-style: solid; } .dropdown-menu[data-popper-placement="bottom-start"]:before, .dropdown-menu[data-popper-placement="top-start"]:before { left: calc(25px - var(--tooltip-arrow-half-border-width)); } .dropdown-menu[data-popper-placement="bottom-start"]:after, .dropdown-menu[data-popper-placement="top-start"]:after { left: 25px; } .dropdown-menu[data-popper-placement="bottom"]:before, .dropdown-menu[data-popper-placement="top"]:before { left: calc(50% - var(--tooltip-arrow-half-bordered-width)); } .dropdown-menu[data-popper-placement="bottom"]:after, .dropdown-menu[data-popper-placement="top"]:after { left: calc(50% - var(--tooltip-arrow-half-width)); } .dropdown-menu[data-popper-placement="bottom-end"]:before, .dropdown-menu[data-popper-placement="top-end"]:before { right: calc(25px - var(--tooltip-arrow-half-border-width)); } .dropdown-menu[data-popper-placement="bottom-end"]:after, .dropdown-menu[data-popper-placement="top-end"]:after { right: 25px; } .dropdown-menu[data-popper-placement^="top"]:after, .dropdown-menu[data-popper-placement^="top"]:before { top: 100%; } .dropdown-menu[data-popper-placement^="bottom"]:after, .dropdown-menu[data-popper-placement^="bottom"]:before { bottom: 100%; } .dropdown-menu[data-popper-placement^="top"]:before { border-width: var(--tooltip-arrow-bordered-height) calc(var(--tooltip-arrow-half-bordered-width)) 0; border-top-color: var(--color-dark); } .dropdown-menu[data-popper-placement^="top"]:after { border-width: var(--tooltip-arrow-height) calc(var(--tooltip-arrow-half-width)) 0; border-top-color: var(--color-bright); } .dropdown-menu[data-popper-placement^="bottom"]:before { border-width: 0 var(--tooltip-arrow-half-bordered-width) calc(var(--tooltip-arrow-bordered-height)); border-bottom-color: var(--color-dark); } .dropdown-menu[data-popper-placement^="bottom"]:after { border-width: 0 var(--tooltip-arrow-half-width) calc(var(--tooltip-arrow-height)); border-bottom-color: var(--color-bright); } .dropdown-menu[data-popper-placement="left-start"]:before, .dropdown-menu[data-popper-placement="right-start"]:before { top: calc(25px - var(--tooltip-arrow-half-border-width)); } .dropdown-menu[data-popper-placement="left-start"]:after, .dropdown-menu[data-popper-placement="right-start"]:after { top: 25px; } .dropdown-menu[data-popper-placement="left"]:before, .dropdown-menu[data-popper-placement="right"]:before { top: calc(50% - var(--tooltip-arrow-half-bordered-width)); } .dropdown-menu[data-popper-placement="left"]:after, .dropdown-menu[data-popper-placement="right"]:after { top: calc(50% - var(--tooltip-arrow-half-width)); } .dropdown-menu[data-popper-placement="left-end"]:before, .dropdown-menu[data-popper-placement="right-end"]:before { bottom: calc(25px - var(--tooltip-arrow-half-border-width)); } .dropdown-menu[data-popper-placement="left-end"]:after, .dropdown-menu[data-popper-placement="right-end"]:after { bottom: 25px; } .dropdown-menu[data-popper-placement^="left"]:after, .dropdown-menu[data-popper-placement^="left"]:before { left: 100%; } .dropdown-menu[data-popper-placement^="right"]:after, .dropdown-menu[data-popper-placement^="right"]:before { right: 100%; } .dropdown-menu[data-popper-placement^="left"]:before { border-width: calc(var(--tooltip-arrow-half-bordered-width)) 0 calc(var(--tooltip-arrow-half-bordered-width)) var(--tooltip-arrow-bordered-height); border-left-color: var(--color-dark); } .dropdown-menu[data-popper-placement^="left"]:after { border-width: calc(var(--tooltip-arrow-half-width)) 0 calc(var(--tooltip-arrow-half-width)) var(--tooltip-arrow-height); border-left-color: var(--color-bright); } .dropdown-menu[data-popper-placement^="right"]:before { border-width: calc(var(--tooltip-arrow-half-bordered-width)) var(--tooltip-arrow-bordered-height) calc(var(--tooltip-arrow-half-bordered-width)) 0; border-right-color: var(--color-dark); } .dropdown-menu[data-popper-placement^="right"]:after { border-width: calc(var(--tooltip-arrow-half-width)) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-half-width)) 0; border-right-color: var(--color-bright); } /* ################################################################################### ## Списки ################################################################################### */ ul.clear-list { padding: 0; margin: 0; list-style: none; line-height: 1;} /* ################################################################################### ## Аккордион ################################################################################### */ .accordion-button { border: none; outline: none; background-color: unset; text-decoration: none;} .accordion-button:focus { box-shadow: none; outline: none; color: var(--color-primary); border-color: rgba(0, 0, 0, 0.125); } .accordion-button:not(.collapsed) { background: transparent; color: var(--color-secondary); } /* ################################################################################### ## Слайдер ################################################################################### */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition-delay: 20ms; /* flicker glitch fix*/ } .slick-track { position: relative; top: 0; left: 0; display: flex; margin-left: auto; margin-right: auto; } .slick-track:after, .slick-track:before { display: table; content: ""; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; min-height: 1px; } [dir="rtl"] .slick-slide { float: right; } .slick-slide > div{height: 100%;} .slick-slide > div > div{display: flex !important; height: 100%;} .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { height: auto; } .slick-arrow.slick-hidden { display: none; } /* Slider */ .slick-loading .slick-list { background: #fff url("../img/loader.gif") center center no-repeat; } /* Arrows */ .slick-arrow { display: block; position: absolute; top: 50%; font-size: 0; line-height: 1; padding: 15px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 2; color: var(--color-gray-dark); background-color: var(--color-bright); border: 1px solid var(--color-gray); border-radius: var(--default-border-radius); transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .slick-arrow:focus, .slick-arrow:hover { outline: none; background-color: var(--color-primary); color: var(--color-bright); border-color: var(--color-primary);} .slick-arrow.slick-disabled { opacity: 0.25; } .slick-arrow.slick-disabled:hover { background: var(--color-gray);} .slick-arrow:before { font-family: "Talpis"; display: inline-block; font-size: 18px; } .slick-prev { left: 0; } .slick-prev:before { content: "⬅"; } .slick-next { right: 0; } .slick-next:before { content: "➡"; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 50px; } .slick-dots { position: absolute; bottom: -20px; display: flex; width: 100%; padding: 0; margin: 0 40px; list-style: none; text-align: center; z-index: 1; } .slick-dots li { position: relative; display: inline-block; margin: 0 5px; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; border-style:none; background-color: var(--color-gray); cursor: pointer; color: transparent; outline: none; padding: 5px; border-radius: 50%; overflow: hidden; transition: background-color 0.15s ease; } .slick-dots li.slick-active button, .slick-dots li:focus button, .slick-dots li:hover button { outline: none; background-color: var(--color-primary-alt); } /* ################################################################################### ## Модальное окно ################################################################################### */ body .modal { padding-right: 0!important; } body .modal-backdrop.show { opacity: 0.8; } .modal .form-group{margin-bottom: 20px;} /* --------- Контент ------------ */ .modal .modal-content{ box-shadow: 0 20px 15px rgba(5, 5, 24, 0.3); padding: 20px; background-color: var(--color-bright); border-radius: var(--tiny-border-radius); } .modal .modal-header { position: relative; border-radius: 0; border: none; hyphens: none; } .modal .modal-header .twoline-header { padding-right: 10px; } .modal .modal-header .twoline-header h4 { margin-bottom: 10px; } .modal .modal-header .twoline-header a { color: var(--color-primary); text-decoration: underline; } .modal .modal-header .twoline-header span { display: inline-block; font-size: 14px; line-height: 16px; } .modal .modal-header .close {position: absolute; z-index: 1; top: 0; right: 0; margin-left: auto; cursor: pointer; text-decoration: none; align-self: flex-start; } .modal .modal-header .close .i-close{font-size: var(--text-b2);} .modal .modal-title { font-weight: 600; font-size: var(--text-h4); line-height: var(--text-h4); text-transform: uppercase; border-left: 4px solid var(--color-primary); padding: 4px 20px;} .modal .modal-pre-header { padding: 0.8rem 1rem 0; } .modal .modal-pre-header + .modal-header { padding-top: 0; } .modal .modal-pre-header a { font-size: 12px; cursor: pointer; } .modal .modal-pre-header a i { font-size: 10px; vertical-align: text-bottom; } .modal .modal-pre-header a, .modal .modal-pre-header a:focus, .modal .modal-pre-header a:hover { text-decoration: none; } .modal .modal-tabs{margin-bottom: 40px;} .modal .modal-tabs .btn:not(:last-child){margin-right: 15px;} .modal .modal-tabs .btn.show{cursor: default;} .modal .recpatcha-notif{margin-bottom: 0;} .modal .modal-footer { border-radius: 0; border: none; } /* --------- Капча ------------ */ .grecaptcha-badge { visibility: hidden } .recpatcha-notif { font-size: 10px; color: var(--color-gray-dark); margin-top: 40px; } .recpatcha-notif span { color: var(--color-secondary) } /* --------- Уведомление ------------ */ #resultModal .modal-header { padding: 0; } #resultModal .modal-header a { position: absolute; top: 15px; right: 20px; margin: 0; padding: 0; } #resultModal .modal-text { width: 100%; text-align: center; margin-bottom: 30px; } #resultModal .modal-text i { font-size: 48px; color: var(--color-success); margin-bottom: 10px; } #resultModal .modal-text h4 { display: block; font-size: 24px; font-weight: 500; padding-top: 5px; text-align: center; } #resultModal .modal-text span { display: inline-block; font-size: 14px; color: var(--color-dark); } #resultModal .modal-text a { margin-top: 10px; } #resultModal .success-content { hyphens: none; } /* --------- Уведомление об ошибке ------------ */ #errorModal .modal-header { padding: 0; } #errorModal .modal-header a { position: absolute; top: 15px; right: 20px; margin: 0; padding: 0; } #errorModal .modal-text { width: 100%; text-align: center; margin-bottom: 30px; } #errorModal .modal-text i { font-size: 48px; color: var(--color-alert); margin-bottom: 10px; } #errorModal .modal-text h4 { display: block; font-size: 24px; font-weight: 500; padding-top: 5px; text-align: center; } #errorModal .modal-text span { display: inline-block; font-size: 14px; color: var(--color-dark); } #errorModal .modal-text a { margin-top: 10px; } /* --------- Уведомление об ошибке ------------ */ #failModal .modal-header { padding: 0; } #failModal .modal-header a { position: absolute; top: 15px; right: 20px; margin: 0; padding: 0; } #failModal .modal-text { width: 100%; text-align: center; margin-bottom: 30px; } #failModal .modal-text i { font-size: 48px; color: red; margin-bottom: 10px; } #failModal .modal-text h4 { display: block; font-size: 24px; font-weight: 500; padding-top: 5px; text-align: center; } #failModal .modal-text span { font-size: 14px; color: var(--color-dark); } /* --------- Диалог ------------ */ #confirmationModal .modal-header { padding: 0; } #confirmationModal .modal-header a { position: absolute; top: 15px; right: 20px; margin: 0; padding: 0; } #confirmationModal .alert { display: none; } #confirmationModal .modal-text { width: 100%; text-align: center; margin-bottom: 10px; } #confirmationModal .modal-text > i { font-size: 48px; color: var(--color-danger); margin-bottom: 10px; } #confirmationModal .confirmation-content h4 { display: block; font-size: 26px; font-weight: 600; line-height: 1; padding-top: 5px; text-align: center; margin-bottom: 5px; } #confirmationModal .confirmation-content span { font-size: 14px; line-height: 1; color: var(--color-dark); line-height: 1.2; display: inline-block; } #confirmationModal .confirmation-content { margin-bottom: 20px; } #confirmationModal .confirmation-fields { max-width: 350px; margin: 0 auto 20px; } #confirmationModal .confirmation-fields .invalid-feedback{padding-left: 0;} #confirmationModal .confirmation-actions { display: flex; align-items: center; justify-content: center; } #confirmationModal .confirmation-actions a { margin: 5px 10px; } /* --------- Связь ------------ */ #supportModal .form-text-upload { width: 100%; } #supportModal .upload-area { width: 100%; padding: 35px 10px 25px; margin-bottom: 10px; border: 2px dashed var(--color-info); color: var(--text-gray); border-radius: var(--big-border-radius); text-align: center; cursor: pointer; transition: .2s ease-in background-color; } #supportModal .upload-area:hover { background-color: var(--color-success-bg); } #supportModal .upload-area i { font-size: 42px; margin-bottom: 20px; display: block; } #supportModal .upload-area span { font-size: 16px; width: 100%; display: inline-block; } #supportModal .upload-area small {display: block; } /* --------- Вход ------------ */ #loginForm .btn.btn-primary { width: 100%; } #loginForm .form-subgroup { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 30px; } #loginForm .form-subgroup .label-checkbox { font-size: 14px; } #loginForm .form-subgroup a { font-size: 14px; color: var(--color-primary-alt); text-decoration: underline; cursor: pointer; } #loginForm .recpatcha-notif{margin-top: 10px; text-align: center;} /* --------- Регистрация ------------ */ #registerForm .modal-dialog { width: 600px; max-width: 100%; } #registerForm h4.required:after { display: inline-block; content: '*'; color: red; } #registerForm hr{margin: 40px 0; color: var(--color-gray-dark);} /* --------- Настройки ------------ */ #settingsModal h5 { margin-top: 25px; margin-bottom: 15px; } #settingsModal h5:first-of-type { margin-top: 0; } /* --------- Обратная связь ------------ */ #questionForm > div:last-child{grid-column: 1 / span 2;} /* ################################################################################### ## Формы ################################################################################### */ form h4{margin-bottom: 15px;} form .form-group + h4{margin-top: 30px;} form h5{font-size: var(--text-b2); color: var(--color-dark); min-width: 100%; margin-bottom: 12px;} form .form-group + h5{margin-top: 25px;} form .field-spacer{min-width: 100%;} .form-actions{margin-top: 30px;} /* --------- Обработчик ------------ */ .ajax-loader { display: flex; justify-content: center; align-items: center; height: 102%; width: 102%; position: absolute; background: rgba(0, 0, 0, 0.6); z-index: 10; top: -1%; left: -1%; border-radius: var(--tiny-border-radius); backdrop-filter: blur(2px); color: var(--color-constant-bright); } .ajax-loader .wrap { position: relative; display: flex; align-items: center; justify-content: center; } .ajax-loader i:after { content: ""; display: block; width: 64px; height: 64px; margin: 8px 8px 8px 25px; border-radius: 50%; border: 6px solid; border-color: var(--color-primary) transparent var(--color-primary) transparent; animation: loader-rotation 1.2s linear infinite; font-style: normal; } .ajax-loader.error { color: red; } .ajax-loader.error i:after { font-family: "Talpis"; content: "⚠"; width: auto; height: auto; color: red; border-radius: 0; border: none; animation: none; font-size: 42px; margin-top: 0 0 0 25px; } @keyframes loader-rotation { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } /* --------- Уведомление ------------ */ form .alert { background: var(--color-bright); margin-bottom: 30px;} form .alert:not(.show) { display: none; } .alert-content h4, .alert-content h6 { line-height: 1.1; margin: 0; font-size: 18px; color: var(--text-gray); } .alert-content span { font-size: 14px; margin-top: 5px; line-height: 1; display: inline-block; color: var(--color-dark); } .invalid-feedback { display: block; padding-left: 30px;} .alert.alert-primary { background: var(--color-bright); color: var(--color-dark); box-shadow: var(--box-shadow); border: 0; } .alert.alert-primary.banner { display: flex; align-items: center; justify-content: space-between; padding: 15px 25px 18px; } .alert.alert-primary.banner span { display: inline-block; margin-right: 30px; } .alert.alert-primary.banner span b { font-size: 20px; text-transform: uppercase; } .alert.alert-primary.banner .btn-sm { padding: 8px 25px 7px; font-weight: bold; margin-top: 4px; } .alert.alert-primary.banner .btn-close { position: absolute; right: -10px; top: -10px; padding: 5px; } @media screen and (max-width: 768px) { .alert.alert-primary.banner { flex-wrap: wrap; } .alert.alert-primary.banner span { margin-bottom: 7px; } .alert.alert-primary.banner span b { font-size: 28px; } .alert.alert-primary.banner .btn-sm { width: 100%; } } /* --------- Заглушки ------------ */ .notif-info { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 450px; min-height: 90%; max-height: 67vh; padding: 30px 15px; } .notif-info i { font-size: 64px; } .notif-info h2 { font-size: 32px; letter-spacing: 0.5px; } .notif-info .btn { max-width: 320px; font-size: 18px; } .notif-info .btn-actions .btn { margin: 0 5px; } @media screen and (max-width: 991px) { .notif-info { height: unset; max-height: unset; } } /* --------- Ошибка ------------ */ #error .error-info { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 450px; max-height: 65vh; } #error .error-info h1 { font-size: 68px; } #error .error-info .btn { max-width: 260px; } @media screen and (min-width: 991px) { #error .error-info { margin-left: -2.5%; } } /* --------- Вкладки------------ */ .nav-pills .nav-item{margin: 0 15px 15px 0;} .nav-pills .nav-link {cursor: pointer; font-size: var(--text-b3); padding: 12px 20px; border-radius: var(--default-border-radius); color: var(--color-gray-dark); background: none; border: 1px solid var(--color-gray)} .nav-pills .nav-link:hover{ color: var(--color-bright); background: var(--color-primary-alt); border-color: var(--color-primary-alt) } .nav-pills .nav-link.active, .nav-pills .nav-link:focus { color: var(--color-bright); background: var(--color-primary-alt); border-color: var(--color-primary-alt) } @media screen and (max-width: 768px) { .nav-pills .nav-link{padding-top: 9px; padding-bottom: 9px;} } /* --------- Группа формы------------ */ .form-group { position: relative; margin-bottom: 20px; } .form-group > label { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.25px; color: var(--color-dark); margin-bottom: 3px; width: 100%; } .form-group-wrap { margin-bottom: 20px; } .form-group.required > h5:after, .form-group.required > label:after { display: inline-block; content: '*'; color: red; } /* --------- Инпут формы------------ */ .form-control { width: 100%; border: 1px solid var(--color-gray); background: var(--color-bright); color: var(--color-dark); font-weight: 400; font-size: var(--text-b2); line-height: 20px; padding: 14px 25px; height: auto; border-radius: var(--tiny-border-radius) } .form-control:focus { box-shadow: none; color: var(--color-dark); background: var(--color-bright); } .form-control.invalid { color: var(--color-danger); } .form-control::placeholder { color: var(--color-dark); opacity: 0.5; } .dark-theme .form-control{background-color: var(--color-foreground);} /* --------- Объединенный инпут формы------------ */ .form-control-merged { position: relative; flex-grow: 1; } .form-control-merged > label { display: inline-block; position: absolute; top: 0; left: 10px; font-size: 16px; color: var(--color-dark); padding: 16px 20px 14px; width: auto; text-align: start; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transform-origin: 0 0; transition: opacity .1s ease,transform .1s ease,padding .1s ease; } .form-control-merged > label:before { position: absolute; top: 16px; left: 0; display: inline-block; content: ''; height: 3px; width: 100%; background-color: var(--color-bright); z-index: -1; } .form-control-merged > input:required ~ label:after { display: inline-block; content: '*'; color: red; } .form-control-merged > .form-control:not(:focus)::placeholder { color: transparent; } .form-control-merged > .form-control:not(:focus):-webkit-autofill, .form-control-merged > .form-control:not(:focus):autofill, .form-control-merged > .form-control:not(:focus):not(:placeholder-shown) { border-color: var(--color-gray); } .form-control-merged > .form-control:-webkit-autofill ~ label, .form-control-merged > .form-control:autofill ~ label, .form-control-merged > .form-control:focus ~ label, .form-control-merged > .form-control:not(:placeholder-shown) ~ label { max-width: 90%; padding: 4px 5px; transform: scale(.85) translate(20px, -16px); } .input-group .form-control-merged .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .dark-bg .form-control-merged > .form-control:-webkit-autofill ~ label:before, .dark-bg .form-control-merged > .form-control:autofill ~ label:before, .dark-bg .form-control-merged > .form-control:focus ~ label:before, .dark-bg .form-control-merged > .form-control:not(:placeholder-shown) ~ label:before { border-radius: 50%; box-shadow: 0 2px 15px 12px var(--color-bright); transition: box-shadow .15s linear; } .dark-theme .form-control-merged label:before{box-shadow: none !important;} /* --------- Текстовое поле ------------ */ textarea.form-control { border-radius: var(--tiny-border-radius); border: 1px solid var(--color-gray); padding: 16px 30px; resize: none; } /* --------- Селект формы Bootsrap------------ */ .bootstrap-select .dropdown-menu a { padding: 5px 25px; } .bootstrap-select .dropdown-toggle .title-tip { display: inline-block; color: var(--color-dark); position: absolute; top: 0; left: 10px; padding: 5px; transform: scale(.85) translate(20px, -18px); font-size: 16px; max-width: 90%; width: auto; text-align: start; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transform-origin: 0 0; transition: opacity .1s ease,transform .1s ease,padding .1s ease; } .bootstrap-select .dropdown-toggle .title-tip:before { position: absolute; top: 18px; left: 0; display: inline-block; content: ''; height: 2px; width: 100%; background-color: var(--color-bright); z-index: -1; } .bootstrap-select select:required + .dropdown-toggle .title-tip:after { display: inline-block; content: "*"; color: red; } .bootstrap-select .dropdown-toggle .title-tip:before { border-radius: 50%; box-shadow: 0 2px 15px 12px var(--color-bright); transition: box-shadow .15s linear; } .dark-theme .bootstrap-select .dropdown-toggle .title-tip:before{box-shadow: none !important;} .bootstrap-select > .btn-light{background: var(--color-bright); color: var(--color-dark); font-family: var(--text-font); font-weight: 400; font-size: var(--text-b3); line-height: var(--text-b1); padding: 16px 27px 14px; box-shadow:none; border: 1px solid var(--color-gray); border-radius: var(--tiny-border-radius)} .bootstrap-select > .btn-light.show, .bootstrap-select > .btn-light:focus{background-color: var(--color-bright); border-color: var(--color-primary); box-shadow:none} .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active{ color:inherit } .dark-theme .bootstrap-select > .btn-light{background-color: var(--color-foreground);} /* --------- Скрыть стрелки ------------ */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: textfield; margin: 0; } input[type="number"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } /* --------- Просмотр пароля ------------ */ .password-view-button { position: absolute; top: 0; right: 0; height: 100%; line-height: 32px; padding: 13px 20px 13px 12px; cursor: pointer; text-decoration: none; z-index: 10; border-radius: var(--big-border-radius); } .form-control-merged .password-view-button { visibility: hidden; } .form-control-merged > .form-control:not(:placeholder-shown) ~ .password-view-button { visibility: visible; } /* --------- Отображение сложности ------------ */ .password-strength-indicator { font-size: 14px; color: var(--color-info); } .password-strength-indicator.very-weak:before { color: var(--color-danger); } .password-strength-indicator.weak:before { color: var(--color-alert); } .password-strength-indicator.mediocre:before { content: '👌'; color: var(--color-accept); } .password-strength-indicator.strong:before { content: '👌'; color: var(--color-ready); } .password-strength-indicator.very-strong:before { content: '👌'; color: var(--color-success); } .password-strength-indicator:before { display: inline-block; content: '⛔'; font-family: 'talpis'; vertical-align: baseline; margin-right: 8px; vertical-align: top; color: var(--color-primary); } /* --------- Отображение соответсивя ------------ */ .password-match-indicator { font-size: 14px; color: var(--color-gray); } .password-match-indicator:before { display: inline-block; content: '⛔'; font-family: 'talpis'; vertical-align: baseline; margin-right: 8px; vertical-align: top; color: var(--color-primary); } /* --------- Чекбокс ------------ */ .form-check { line-height: 17px; padding-left: 36px; } .form-check.form-group { display: block; } .form-check .form-check-label { line-height: 1.4; font-size: var(--text-b3); font-weight: normal; width: auto; color: var(--color-dark); cursor: pointer; } .form-check .form-check-label p { display: inline; } .form-check .form-check-input[disabled] ~ .form-check-label { cursor: pointer; } .form-check .form-check-label .btn{font-family: var(--text-font); padding: 0; font-size: inherit;} .form-check .form-check-input { margin-top: 0; height: 20px; width: 20px; margin-left: -35px; border-color: var(--color-gray-dark);} .form-check .form-check-input:not(:disabled) { cursor: pointer; } .form-check .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .form-check .form-check-input:focus, .form-check .form-check-input:hover { box-shadow: none; } .dark-bg .checkbox-control-label, .dark-bg .form-check .form-check-label{color: var(--color-constant-bright);} .required input[type="radio"] ~ .form-check-label:after { display: none; } .form-check .invalid-feedback{padding-left: 0;} @media screen and (max-width: 768px) { .form-check .form-check-input{height: 17px; width: 17px;} } /* --------- Переключатель ------------ */ .form-check.form-switch{padding-left: 50px} .form-check.form-switch .form-check-input{height: 22px; width: 2em; margin-left: -50px;} /* ################################################################################### ## Подсказки ################################################################################### */ .tooltip{word-wrap:normal; max-width: 100%;} .tooltip-inner{max-width: 400px; border: 1px solid var(--color-primary-light); background-color: var(--color-primary-light); color: var(--color-dark); overflow: hidden; text-overflow: ellipsis;} /* ################################################################################### ## Выбор даты ################################################################################### */ .hasDatepicker { position: relative; } .ui-datepicker { color: #000; background: #f2f2f2; margin-top: 5px!important; padding: 15px 15px 20px; border: 1px solid var(--color-gray); box-shadow: var(--box-shadow); border-radius: var(--default-border-radius); display: none; } .ui-datepicker-inline { position: absolute; top: 100%; z-index: 10; } .ui-datepicker-header { position: relative; background: none; border: none; margin-bottom: 10px; } .ui-datepicker-header a { position: absolute; top: 0; cursor: pointer; } .ui-datepicker-header .ui-datepicker-next { right: 2px; } .ui-datepicker-header .ui-icon { font-size: 0; font-family: 'Talpis'; line-height: 1; font-weight: 400; text-indent: unset; background: none; display: block; width: 20px; line-height: 20px; color: #000; } .ui-datepicker-header .ui-icon:after { display: block; position: absolute; top: 0; font-size: 20px; } .ui-datepicker-header .ui-datepicker-prev .ui-icon:after { content: "⇐"; } .ui-datepicker-header .ui-datepicker-next .ui-icon:after { content: "⇒"; right: 0; } .ui-datepicker-header .ui-datepicker-next.ui-state-hover, .ui-datepicker-header .ui-datepicker-prev.ui-state-hover { background: none; } .ui-datepicker-header .ui-datepicker-title { color: #000; padding: 0; font-size: 14px; text-align: center; } /* --------- Таблица ------------ */ .ui-datepicker-calendar { background-color: none; border-collapse: collapse; } .ui-datepicker-calendar thead tr { border: 1px solid #444; border-left: none; border-right: none; } .ui-datepicker-calendar td, .ui-datepicker-calendar th { padding: 5px; width: 25px; text-align: center; } .ui-datepicker-calendar td { padding: 15px 0 0; } .ui-datepicker-calendar td a { text-decoration: none; text-align: center; border: none; padding: 3px 8px; background: transparent; color: #000; } .ui-datepicker-calendar .ui-datepicker-today a { color: #ffc107; } .ui-datepicker-calendar .ui-datepicker-current-day { background: transparent; } .ui-datepicker-calendar .ui-datepicker-current-day a { background-color: #e1e1e1; color: #007bff; border-radius: 4px; } /* ################################################################################### ## Фотогалерея ################################################################################### */ body:last-child .blueimp-gallery > .slides > .slide-error { background-image: url(../img/gallery/error.svg); } body:last-child .blueimp-gallery > .play-pause { width: 20px; height: 20px; background-size: 40px 20px; background-image: url(../img/gallery/play-pause.svg); } body:last-child .blueimp-gallery-playing > .play-pause { background-position: -20px 0; } .blueimp-gallery, .blueimp-gallery > .slides > .slide > .slide-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; -moz-backface-visibility: hidden; } .blueimp-gallery > .slides > .slide > .slide-content { margin: auto; width: auto; height: auto; aspect-ratio: unset; object-fit: unset; max-width: 90%; max-height: 85%; opacity: 1; } .blueimp-gallery > .slides > .slide > .slide-content.video-content{border-radius: var(--small-border-radius); overflow: hidden;} .blueimp-gallery { position: fixed; color: var(--color-bright); z-index: 999999; overflow: hidden; background: var(--color-primary); background: rgba(0, 0, 0, 0.9); opacity: 0; display: none; direction: ltr; -ms-touch-action: none; touch-action: none; } .blueimp-gallery-carousel { position: relative; z-index: auto; margin: 1em auto; padding-bottom: 56.25%; box-shadow: 0 0 10px var(--color-primary); -ms-touch-action: pan-y; touch-action: pan-y; } .blueimp-gallery-display { display: block; opacity: 1; } .blueimp-gallery > .slides { position: relative; height: 100%; overflow: hidden; z-index: 1; } .blueimp-gallery-carousel > .slides { position: absolute; } .blueimp-gallery > .slides > .slide { position: relative; float: left; height: 100%; text-align: center; -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -ms-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .blueimp-gallery, .blueimp-gallery > .slides > .slide > .slide-content { -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.1s linear; } .blueimp-gallery > .slides > .slide-loading { background: url(../img/gallery/loading.gif) center no-repeat; background-size: 64px 64px; } .blueimp-gallery > .slides > .slide-loading > .slide-content { opacity: 0; } .blueimp-gallery > .slides > .slide-error { background: url(../img/gallery/error.png) center no-repeat; } .blueimp-gallery > .slides > .slide-error > .slide-content { display: none; } .blueimp-gallery > .next, .blueimp-gallery > .prev { position: absolute; top: 0; left: 15px; width: 15%; height: 100%; font-family: inherit; font-size: 32px; font-weight: 100; line-height: 30px; color: var(--color-bright); text-decoration: none; text-shadow: 0 0 2px var(--color-primary); text-align: center; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; opacity: 0.5; cursor: pointer; display: none; z-index: 10; } .blueimp-gallery > .next { left: auto; right: 20px; } .blueimp-gallery > .close, .blueimp-gallery > .title { position: absolute; top: 15px; left: 15px; margin: 0 40px 0 0; font-size: 20px; line-height: 30px; color: var(--color-bright); text-shadow: 0 0 2px var(--color-primary); opacity: 0.8; } .blueimp-gallery > .title { display: none; } .blueimp-gallery > .close { padding: 15px 15px 30px 30px; right: 15px; left: auto; margin: -15px; font-size: 22px; text-decoration: none; cursor: pointer; z-index: 5; } .blueimp-gallery > .play-pause { position: absolute; right: 15px; bottom: 15px; width: 15px; height: 15px; background: url(../img/gallery/play-pause.png) 0 0 no-repeat; cursor: pointer; opacity: 0.5; display: none; } .blueimp-gallery-playing > .play-pause { background-position: -15px 0; } .blueimp-gallery > .close:hover, .blueimp-gallery > .next:hover, .blueimp-gallery > .play-pause:hover, .blueimp-gallery > .prev:hover, .blueimp-gallery > .title:hover { color: var(--color-bright); opacity: 1; } .blueimp-gallery-controls > .close, .blueimp-gallery-controls > .next, .blueimp-gallery-controls > .play-pause, .blueimp-gallery-controls > .prev, .blueimp-gallery-controls > .title { display: grid; z-index: 5; } .blueimp-gallery-controls > .next, .blueimp-gallery-controls > .prev { align-items: center; transition: color 0.15 ease; } .blueimp-gallery-controls > .next { text-align: right; } .blueimp-gallery-controls > .prev { text-align: left; } .blueimp-gallery-left > .prev, .blueimp-gallery-right > .next, .blueimp-gallery-single > .next, .blueimp-gallery-single > .play-pause, .blueimp-gallery-single > .prev { display: none; } .blueimp-gallery > .close, .blueimp-gallery > .next, .blueimp-gallery > .play-pause, .blueimp-gallery > .prev, .blueimp-gallery > .slides > .slide > .slide-content { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 28px; } /* Indicator */ .blueimp-gallery > .indicator { position: absolute; top: auto; right: 15px; bottom: 15px; left: 15px; margin: 0 40px; padding: 0; list-style: none; text-align: center; line-height: 10px; display: none; z-index: 100; } .blueimp-gallery > .indicator > li { display: inline-block; width: 25px; height: 25px; margin: 6px 3px 0 3px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: 1px solid transparent; background: var(--color-bright); background: rgba(255, 255, 255, 0.45) center/cover no-repeat; border-radius: 10px; box-shadow: 0 0 2px var(--color-primary); opacity: 0.5; cursor: pointer; } .blueimp-gallery > .indicator > .active, .blueimp-gallery > .indicator > li:hover { background-color: #d6f7ff; border-color: var(--color-bright); opacity: 1; } .blueimp-gallery-controls > .indicator { display: block; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .blueimp-gallery-single > .indicator { display: none; } .blueimp-gallery > .indicator { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* -------------------------------------- */ /* Extensions */ /* Text */ .blueimp-gallery > .slides > .slide > .text-content > .text-contents, .blueimp-gallery > .slides > .slide > .text-content > .text-cover, .blueimp-gallery > .slides > .slide > .text-content > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .blueimp-gallery > .slides > .slide > .text-content > .text-contents, .blueimp-gallery > .slides > .slide > .text-content > .text-cover { background: center no-repeat; background-size: contain; display: flex; align-items: center; flex-direction: column; right: 0; color: var(--color-dark); background-color: var(--color-info); width: 800px; max-width: 100%; margin: 0 auto; } .blueimp-gallery > .slides > .slide > .text-content > .text-cover { justify-content: center; } .blueimp-gallery > .slides > .slide > .text-content > .text-contents { padding: 40px 10%; overflow-y: auto; } .blueimp-gallery > .slides > .slide > .text-content > .text-contents > h3 { font-size: 36px; margin: 40px 0 30px; } .blueimp-gallery > .slides > .slide > .text-content > .text-contents > div { text-align: initial; } .blueimp-gallery > .slides > .slide > .text-iframe > .text-cover { background-color: #000; background-color: rgba(0, 0, 0, 0.7); } .blueimp-gallery > .slides > .slide > .text-content > .text-view { position: absolute; top: 50%; right: 0; left: 0; margin: 40px auto 0; padding-top: 70px; width: 150px; height: 64px; background: url(../img/gallery/view.png) center no-repeat; opacity: 0.8; cursor: pointer; text-decoration: none; line-height: 1.2; color: var(--color-dark); } .blueimp-gallery-svgasimg > .slides > .slide > .text-content > .text-view { background-image: url(../img/gallery/view.svg); } .blueimp-gallery > .slides > .slide > .text-viewing > .text-cover, .blueimp-gallery > .slides > .slide > .text-viewing > .text-view { display: none; } .blueimp-gallery > .slides > .slide > .text-loading > .text-view { background: url(../img/gallery/loading.gif) center no-repeat; background-size: 64px 64px; } .blueimp-gallery-smil > .slides > .slide > .text-loading > .text-view { background-image: url(../img/gallery/loading.svg); } * + html .blueimp-gallery > .slides > .slide > .text-content { height: 100%; } * + html .blueimp-gallery > .slides > .slide > .text-content > .text-view { left: 50%; margin-left: -64px; } .blueimp-gallery > .slides > .slide > .text-content > .text-view:hover { opacity: 1; } /* Video */ .blueimp-gallery > .slides > .slide > .video-content > .video-cover, .blueimp-gallery > .slides > .slide > .video-content > iframe, .blueimp-gallery > .slides > .slide > .video-content > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .blueimp-gallery > .slides > .slide > .video-content > video { margin: auto; left: 0; right: 0; max-width: 800px; } .blueimp-gallery > .slides > .slide > .video-content > .video-cover { background: center no-repeat; background-size: cover; } .blueimp-gallery > .slides > .slide > .video-iframe > .video-cover { background-color: #000; background-color: rgba(0, 0, 0, 0.7); } .blueimp-gallery > .slides > .slide > .video-content > .video-play { position: absolute; top: 50%; right: 0; left: 0; margin: -150px auto 0; width: 300px; height: 300px; max-width: 100%; background: url(../img/gallery/play.png) center no-repeat; opacity: 0.8; cursor: pointer; } .blueimp-gallery-svgasimg > .slides > .slide > .video-content > .video-play { background-image: url(../img/gallery/play.svg); } .blueimp-gallery > .slides > .slide > .video-playing > .video-cover, .blueimp-gallery > .slides > .slide > .video-playing > .video-play { display: none; } .blueimp-gallery > .slides > .slide > .video-loading > .video-play { background: url(../img/gallery/loading.gif) center no-repeat; background-size: 64px 64px; } .blueimp-gallery-smil > .slides > .slide > .video-loading > .video-cover { background-image: none!important; } .blueimp-gallery-smil > .slides > .slide > .video-loading > .video-play { background-image: url(../img/gallery/loading.svg); } * + html .blueimp-gallery > .slides > .slide > .video-content { height: 100%; } * + html .blueimp-gallery > .slides > .slide > .video-content > .video-play { left: 50%; margin-left: -64px; } .blueimp-gallery > .slides > .slide > .video-content > .video-play:hover { opacity: 1; } /* YouTube */ .blueimp-gallery .slide:not(.slide-active) { opacity: 0; } .blueimp-gallery .youtube-content { display: flex; justify-content: center; align-items: center; } .blueimp-gallery .youtube-content .youtube-wrap { overflow: hidden; width: 90%; height: 90%; } .blueimp-gallery .youtube-content:not(.video-playing) .video-cover { filter: blur(1px); transform: scale(1.03); } .blueimp-gallery .youtube-content .youtube-wrap iframe { width: 100%; height: 100%; } .blueimp-gallery > .slides > .slide > .video-content.youtube-content > .video-cover { background-size: 90%; width: 96%; left: 2%; } @media screen and (max-width: 768px) { .blueimp-gallery > .slides > .slide > .video-content.youtube-content > .video-cover { background-size: 80%; } } /* Rutube */ .blueimp-gallery .slide:not(.slide-active) { opacity: 0; } .blueimp-gallery .rutube-content { display: flex; justify-content: center; align-items: center; } .blueimp-gallery .rutube-content .rutube-wrap { overflow: hidden; width: 100%; height: 100%; } .blueimp-gallery .rutube-content:not(.video-playing) .video-cover { filter: blur(1px); transform: scale(1.03); } .blueimp-gallery .rutube-content .rutube-wrap iframe { width: 100%; height: 100%; } .blueimp-gallery > .slides > .slide > .video-content.rutube-content > .video-cover { background-size: 90%; width: 96%; left: 2%; } @media screen and (max-width: 768px) { .blueimp-gallery > .slides > .slide > .video-content.rutube-content > .video-cover { background-size: 80%; } } /* ======================================= КОНТЕНТ =============================================== */ #primary{padding-top: 120px;} body:not(.home) #primary{padding-top: 170px;} img.site-logo{width: 124px;} img.site-logo.lazyload, img.site-logo.lazyloading { background: transparent; height: auto; } img.site-logo.lazyload:after, img.site-logo.lazyload:before, img.site-logo.lazyloading:after, img.site-logo.lazyloading:before { display: none; } img.site-logo-mob{display: none; width: auto; margin-bottom: 10px;} img.site-logo-mob.lazyload, img.site-logo-mob.lazyloading { background: transparent; } img.site-logo-mob.lazyload:after, img.site-logo-mob.lazyload:before, img.site-logo-mob.lazyloading-mob:after, img.site-logo-mob.lazyloading:before { display: none; } @media (max-width: 1200px) { body:not(.home) #primary{padding-top: 130px;} img.site-logo{display: none;} img.site-logo-mob{display: inline-block;} img.site-logo-mob, img.site-logo-mob.lazyload, img.site-logo-mob.lazyloading{height: 35px; width: auto;} } @media (max-width: 991px) { body:not(.home) #primary{padding-top: 90px;} } /* ################################################################################### ## Цвета ################################################################################### */ .colorized-red{background-color: #ffe8e8;} .colorized-red strong {background-color: var(--seminar-red-accent);} .colorized-red svg {color: var(--seminar-red-ico);} .colorized-red .col-info{border-color: var(--seminar-red-accent);} .colorized-blue {background-color: var(--seminar-blue-bg);} .colorized-blue strong {background-color: var(--seminar-blue-accent);} .colorized-blue svg {color: var(--seminar-blue-ico);} .colorized-blue .col-info{border-color: var(--seminar-blue-accent);} .colorized-orange {background-color: var(--seminar-orange-bg);} .colorized-orange strong {background-color: var(--seminar-orange-accent);} .colorized-orange svg {color: var(--seminar-orange-ico);} .colorized-orange .col-info{border-color: var(--seminar-orange-accent);} .colorized-yellow {background-color: var(--seminar-yellow-bg);} .colorized-yellow strong {background-color: var(--seminar-yellow-accent);} .colorized-yellow svg {color: var(--seminar-yellow-ico);} .colorized-yellow .col-info{border-color: var(--seminar-yellow-accent);} .colorized-gold {background-color: var(--seminar-gold-bg);} .colorized-gold strong {background-color: var(--seminar-gold-accent);} .colorized-gold svg {color: var(--seminar-gold-ico);} .colorized-gold .col-info{border-color: var(--seminar-gold-accent);} .colorized-purple {background-color: var(--seminar-purple-bg);} .colorized-purple strong {background-color: var(--seminar-purple-accent);} .colorized-purple svg {color: var(--seminar-purple-ico);} .colorized-purple .col-info{border-color: var(--seminar-purple-accent);} .colorized-green {background-color: var(--seminar-green-bg);} .colorized-green strong {background-color: var(--seminar-green-accent);} .colorized-green svg {color: var(--seminar-green-ico);} .colorized-green .col-info{border-color: var(--seminar-green-accent);} .colorized-light-blue {background-color: var(--seminar-light-blue-bg);} .colorized-light-blue strong {background-color: var(--seminar-light-blue-accent);} .colorized-light-blue svg {color: var(--seminar-light-blue-ico);} .colorized-light .col-info{border-color: var(--seminar-light-accent);} .colorized-blue-green {background-color: var(--seminar-blue-green-bg);} .colorized-blue-green strong {background-color: var(--seminar-blue-green-accent);} .colorized-blue-green svg {color: var(--seminar-blue-green-ico);} .colorized-blue-green .col-info{border-color: var(--seminar-blue-green-accent);} .colorized-light-pink {background-color: var(--seminar-light-pink-bg);} .colorized-light-pink strong {background-color: var(--seminar-light-pink-accent);} .colorized-light-pink svg {color: var(--seminar-light-pink-ico);} .colorized-light-pink .col-info{border-color: var(--seminar-light-pink-accent);} .colorized-light-green {background-color: var(--seminar-light-green-bg);} .colorized-light-green strong {background-color: var(--seminar-light-green-accent);} .colorized-light-green svg {color: var(--seminar-light-green-ico);} .colorized-light-green .col-info{border-color: var(--seminar-light-green-accent);} .colorized-pink {background-color: var(--seminar-pink-bg);} .colorized-pink strong {background-color: var(--seminar-pink-accent);} .colorized-pink svg {color: var(--seminar-pink-ico);} .colorized-pink .col-info{border-color: var(--seminar-pink-accent);} .colorized-grey {background-color: var(--seminar-grey-bg);} .colorized-grey strong {background-color: var(--seminar-grey-accent);} .colorized-grey svg {color: var(--seminar-grey-ico);} .colorized-grey .col-info{border-color: var(--seminar-grey-accent);} /* ################################################################################### ## Соц сети ################################################################################### */ .social-list{display: inline-block; list-style: none; line-height: 1; vertical-align: middle; padding: 0; margin: 0;} .social-list li {display: inline-block; margin-right: 15px;} .social-list li a{line-height: 1; text-decoration: none; transition: color .15s ease;} .social-list li i {font-size: var(--text-h5); line-height: 1; vertical-align: text-top;} /* ------ */ #primary .i-mail, #mainMenu .i-mail { color: #0b8eda; } #primary .i-message, #mainMenu .i-message { color: #0b8eda; } #primary .i-whatsapp, #mainMenu .i-whatsapp { color: #32c84b; } #primary .i-telegram, #mainMenu .i-telegram { color: #31a5e0; } #primary .i-vkontakte, #mainMenu .i-vkontakte { color: #1477f3; } #primary .i-facebook, #mainMenu .i-facebook { color: #2176e7; } #primary .i-youtube, #mainMenu .i-youtube { color: #f40d1a; } #primary .i-rutube, #mainMenu .i-rutube { color: #1e1e1e; } #primary .i-instagram, #mainMenu .i-instagram { background-image: linear-gradient(135deg, #f8c747, #eb3679, #6733d1); color: transparent; -webkit-background-clip: text; background-clip: text; } #primary .i-tiktok, #mainMenu .i-tiktok { text-shadow: 0 1px 1px #00f2ea,0 -1px 1px #d91f4b; } .i-rutube { position: relative;} .i-rutube:after{content: ''; position: absolute; top: .18em; right: .16em; background: #f31140; border-radius: 50%; padding: .06em;} .dark-theme #primary .i-rutube, .dark-theme #mainMenu .i-rutube{color: #3e9bff;} /* ################################################################################### ## Контакты ################################################################################### */ .contact-list{display: inline-block; list-style: none; line-height: 1; padding: 0; margin: 0;} .contact-list li {display: inline-block; margin-right: 15px;} .contact-list li a{line-height: 1; font-size: 18px; text-decoration: none; transition: filter .15s ease;} /* ################################################################################### ## Навигация ################################################################################### */ .offcanvas, .offcanvas-xl, .offcanvas-lg, .offcanvas-md{background-color: var(--color-background);} .offcanvas-header{padding: 20px 25px 15px; border-bottom: 1px solid var(--color-gray);} .offcanvas-header h3{color: var(--color-dark); margin-bottom: 0;} .offcanvas-body{position: relative; overflow: unset;} @media (max-width: 1199.98px) { .offcanvas-body{padding: 10px;} .offcanvas-body .dropdown-menu{position: static; padding: 0 0 10px; border: none; box-shadow: none; border-radius: 0;} .offcanvas-body .dropdown-menu:before, .offcanvas-body .dropdown-menu:after{display: none;} .offcanvas-body .dropdown-item:hover, .offcanvas-body .dropdown-item:focus{background-color: transparent;} .offcanvas-body > .dropdown-menu{display: block;} .offcanvas-body > .dropdown-menu > li > .dropdown-item, .offcanvas-body > .dropdown-menu > li > .menu-item-group > .dropdown-item{padding: 10px 15px;} .offcanvas-body > .dropdown-menu > li > .menu-item-group:hover{background-color: unset} .offcanvas-body .menu-item-link.dropdown-item{white-space: wrap;} .offcanvas-body .menu-item-link.dropdown-item:not(:hover){ color: var(--color-gray-dark)} .offcanvas-body .menu-item-link:not(.dropdown-item){padding: 6px;} .offcanvas-body .menu-item-link.active + .dropdown-menu{display: block;} } /* ======== Контактная шапка ======== */ #contact-header{padding: 13px 0; background-color: var(--color-constant-dark); color: var(--color-constant-bright);} #contact-header p{display: inline-block; font-size: var(--text-b4); margin: 0;} #contact-header a{color: inherit;} #contact-header .social-list{margin-left: 40px;} #contact-header .contact-list-col{display: flex; align-items: center; justify-content: flex-end; text-align: right;} #contact-header .contact-list li{margin-right: 25px;} #contact-header .contact-list li a{font-size: var(--text-b4);} @media screen and (max-width: 991px) { #contact-header{padding: 10px 0;} #contact-header .contact-list-col{margin-left: auto;} #contact-header .contact-list{display: none;} } @media screen and (max-width: 768px) { #contact-header .social-list li{margin-right: 5px;} } @media screen and (max-width: 576px) { #contact-header p{font-size: 12px;} #contact-header .social-list{margin-left: 10px;} } @media screen and (max-width: 420px) { #contact-header p{vertical-align: top;} #contact-header .social-list{display: block; margin-left: 0;} } /* ======== Главная шапка ======== */ #nav-header { position: absolute; z-index: 10; width: 100%; background-color: var(--color-bright); padding: 10px 0;} #nav-header.fixed-top { position: fixed; top: var(--wp-admin--admin-bar--height, 0); background-color: var(--color-bright); } .dark-theme #nav-header.fixed-top{background-color: var(--color-gray);} /* --------- Логотип ------------ */ #nav-header.fixed-top .site-logo{width: auto; height: 60px;} /* --------- Основное меню ------------ */ .menu { display: flex; list-style: none; padding: 0; margin: 0; } .menu.menu-vertical{flex-direction: column;} .menu .menu-item .menu-item-icon i { margin-right: 8px; vertical-align: baseline; } .menu .menu-item .menu-item-link {display: inline-block; cursor: pointer; text-decoration: none; font-size: 16px; padding: 0 15px;} .menu .menu-item .menu-item-link small { font-family: var(--text-font); font-size: inherit; } .menu .menu-item .menu-item-link.dropdown-item{padding: 5px 30px;} .menu .menu-item .menu-item-link.external-item i{margin-left: 10px; vertical-align: bottom; cursor: help;} .menu .menu-item .menu-item-link.btn{padding: 8px 20px;} .menu .menu-item .menu-item-group{display: flex;} .menu .menu-item:hover > .menu-item-group > a, .menu .menu-item.current-menu-item > .menu-item-group > a{color: var(--color-primary-alt);} .menu .menu-item.menu-item-has-children > .menu-item-link:after { display: none; } .menu .menu-item.menu-item-has-children > .menu-item-link span:after { font-family: 'Talpis'; content: '⬇'; margin-left: auto; padding-left: 7px; font-size: .9em; vertical-align: bottom; } .menu .menu-item.menu-item-has-children{padding-bottom: 2px; margin-bottom: -2px;} .menu .menu-item.menu-item-has-children > .sub-menu{margin-top: 2px;} .menu .sub-menu.collapse-body{list-style: none; padding-top: 10px;} @media (min-width: 1199.98px) { .menu .menu-item.menu-item-has-children:hover > .sub-menu { display: block; } .menu .menu-item.menu-item-has-children:hover > .menu-item-link span:after{content: '⬆'; margin-top: -2px;} } @media (max-width: 1199.98px) { #header-menu .menu{flex-direction: column;} #header-menu .menu .menu-item-link.active > span:after{ content: '⬆'; margin-top: -2px; } #header-mob-menu .menu > .menu-item:first-child > .menu-item-link {font-size: var(--text-b3); color: var(--color-primary-alt); padding: 8.5px 18px; border: 1px solid var(--color-primary-alt); border-radius: 100px;} } @media (max-width: 991px) { #header-mob-menu .menu > .menu-item:first-child > .menu-item-link { padding: 7px 12px;} .menu .menu-item.menu-item-type-login .menu-item-link{padding: 8px 12px;} .menu .menu-item.menu-item-type-login .menu-item-link i{margin-right: 0;} .menu .menu-item.menu-item-type-login .menu-item-link small{display: none;} } @media (max-width: 370px) { #header-mob-menu .menu > .menu-item:first-child > .menu-item-link{padding: 5px 7px;} } /* ------ */ .menu .menu-item.menu-item-type-notification .menu-item-link { display: inline-block; position: relative; border-radius: 50%; font-size: 18px; border: 1px solid #aeaeae; padding: 7px 10px; } .menu .menu-item.menu-item-type-notification .menu-item-link i { margin: 0; vertical-align: top; } .menu .menu-item.menu-item-type-notification .menu-item-link.has_notification:before { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: #ff4749; border-radius: 50%; } .menu .menu-item.menu-item-type-profile .avatar { height: 40px; width: 40px; border-radius: 50%; } .menu .menu-item.menu-item-type-profile .menu-item-link{padding: 0;} .menu .menu-item.menu-item-type-profile .dropdown-menu .dropdown-item i{margin-right: 10px; vertical-align: text-bottom;} /* ------ */ #header-menu .menu > .menu-item > .menu-item-link { border-radius: 100px; border: 1px solid transparent; transition: color .15s ease, border-color .15s ease;} @media (min-width: 1199.98px) { #header-menu .menu > .menu-item{margin: 0 5px} #header-menu .menu > .menu-item:hover > .menu-item-link, #header-menu .menu > .menu-item.current-menu-item > .menu-item-link { color: var(--color-primary-alt); border-color: var(--color-primary-alt); } #header-menu .menu .sub-menu > .menu-item.current-menu-item > .menu-item-link{color: var(--color-primary-alt); background-color: var(--color-gray-light);} } #header-menu .menu > .menu-item .menu-item-link.dropdown-item{border-radius: 0;} #header-menu .menu > .menu-item .menu-item-link:not(.dropdown-item){padding: 10px 15px; width: 100%;} #header-menu .menu > .menu-item .menu-item-link:not(.dropdown-item) > span{display: flex; align-items: center;} @media (max-width: 1199.98px) { #header-menu .menu{flex-direction: column;} #header-menu .menu > .menu-item.current-menu-item > .menu-item-link { color: var(--color-primary-alt);} } @media (max-width: 991px) { .menu .menu-item.menu-item-type-notification .menu-item-link{font-size: 16px; padding: 4px 8px;} .menu .menu-item.menu-item-type-profile .avatar{height: 30px; width: 30px;} } /* ------ */ .navbar-toggler{font-size: 28px; text-decoration: none; padding: 0px 7px; margin-left: 7px;} #mainMenu .offcanvas-footer{padding: 20px 25px 15px; border-top: 1px solid var(--color-gray);} #mainMenu .offcanvas-footer a{font-size: var(--text-b2); text-decoration: none; margin-bottom: 10px;} #mainMenu .offcanvas-footer a i{font-size: var(--text-b1); margin-right: 10px;} @media (min-width: 1199.98px) { .navbar-toggler, .nav-header-mobile-col, .offcanvas-xl .offcanvas-header, .offcanvas-xl .offcanvas-footer { display: none; } } @media (max-width: 1199.98px) { #mainMenu{padding-top: var(--wp-admin--admin-bar--height);} } @media (max-width: 350px) { .nav-header-mobile-col{padding-right: 0;} .nav-header-locale-col{padding-left: 5px;} } /* --------- Пользовательское меню ------------ */ #nav-header .nav-header-row{align-items: center;} #nav-header .nav-header-row .col-auto{flex-grow: 1;} #nav-header .nav-header-row .nav-header-logo-col{flex-grow: 0;} #nav-header .nav-header-user-col{display: flex; align-items: center; justify-content: flex-end;} #nav-header .nav-header-user-col .menu > li{margin-left: 10px;} #nav-header .nav-header-user-col .menu-item-group{display: flex; align-items: center;} #nav-header .nav-header-user-col .menu-item-group .collapse-toggle{padding: 6px 20px 10px 10px;} #nav-header .nav-header-user-col .sub-menu{padding-left: 50px;} #nav-header .nav-header-user-col .sub-menu .menu-item{margin-bottom: 7px;} #nav-header .nav-header-row .nav-header-locale-col{display: flex; justify-content: flex-end; flex-grow: 0;} @media (min-width: 1199.98px) { #nav-header .nav-header-row{flex-wrap: nowrap;} #nav-header .nav-header-user-col{padding-right: 0;} #nav-header .nav-header-user-col .menu-item-group:hover{background-color: var(--color-gray-light);} } @media (max-width: 1199.98px) { #nav-header{padding: 15px 0;} #nav-header .nav-header-row .nav-header-user-col{margin-bottom: 5px;} #nav-header .nav-header-user-col .sub-menu{padding: 0 0 0 35px; margin: 10px 0 20px;} } /* ------ */ #userMenu .menu-item-group .dropdown-item:hover{background-color: transparent;} @media (max-width: 1199.98px) { #userMenu{padding-top: var(--wp-admin--admin-bar--height);} } /* ------ */ #langForm{display: inline-block; padding: 4px 6px; background-color: var(--color-gray); border-radius: var(--default-border-radius); margin-right: 5px;} .dark-theme #langForm{background-color: var(--color-constant-dark);} #langForm label{font-size: 12px; padding: 9px; border-radius: var(--default-border-radius); cursor: pointer;} #langForm input:checked + label{background-color: var(--color-bright);} @media (max-width: 991px) { #langForm{padding: 5px 6px;} #langForm label{padding: 5px;} } @media screen and (max-width:370px) { #langForm{padding: 4px 5px;} #langForm label{padding: 5px 4px 4px;} } /* ------ */ #currencyForm{background-color: var(--color-gray); border-radius: var(--default-border-radius); min-height: 40px; min-width: 40px;} #currencyForm .bootstrap-select{background: none;} #currencyForm .dropdown-toggle{font-size: 16px; background-color: var(--color-gray); padding: 10px 8px;} #currencyForm .dropdown-menu{padding: 4px 0;} #currencyForm .bootstrap-select .btn{color: var(--color-dark); border: none;} #currencyForm .bootstrap-select .dropdown-menu a{padding: 5px 14px;} #currencyForm .bootstrap-select .dropdown-menu a.active{color: var(--color-primary-alt);} @media screen and (max-width:991px) { #currencyForm{min-height: 35px; min-width: 35px;} #currencyForm .dropdown-toggle{padding: 10px 8px 7px;} } @media screen and (max-width:370px) { #currencyForm{min-height: 31px; min-width: 31px;} #currencyForm .dropdown-toggle{padding: 8px 8px 4px;} } /* --------- Вверх ------------ */ #arrow-up { position: fixed; bottom: 120px; right: 20px; font-size: 24px; line-height: 55px; text-align: center; width: 55px; height: 55px; cursor: pointer; background: var(--color-bitrix); z-index: 10; /*box-shadow: var(--box-shadow); */ border-radius: 50%; display: none; transition: box-shadow 0.15s ease,background-color 0.15s ease,color 0.15s ease; } #arrow-up:after { font-family: "Talpis"; display: inline-block; content: "⇑"; color: var(--color-constant-bright); } #arrow-up:hover { background: var(--color-bitrix); } /* --------- Тема ------------ */ #theme-switch{min-width: 170px;} #theme-switch a{display: flex; align-items: center; padding: 4px 4px 4px 6px; border-radius: var(--big-border-radius); background-color: var(--color-primary-alt); transition: background-color .15s ease;} #theme-switch a i{font-size: 14px; padding: 5px 9px; background-color: var(--color-constant-bright); border-radius: 50%; color: var(--color-primary-alt);} #theme-switch a span{font-size: 14px; flex-grow: 1; margin: 0; padding-left: 10px; text-align: center; text-wrap: nowrap; overflow: hidden; transition: width .5s ease, padding .5s ease;} #theme-switch a span:last-child{padding: 0; width: 0; flex-grow: 0;} /* ---- */ .dark-theme #theme-switch a{background-color: var(--color-foreground);} .dark-theme #theme-switch a i{color: var(--color-constant-dark);} .dark-theme #theme-switch a i:before{content:"🌙"} .dark-theme #theme-switch a span:first-child{width: 0; padding: 0; flex-grow: 0;} .dark-theme #theme-switch a span:last-child{width: auto; padding-right: 10px; flex-grow: 1;} @media screen and (max-width: 768px) { #theme-switch{min-width: 50px} #theme-switch a span{font-size: 0;} #theme-switch a i{font-size: 10px; padding: 3px 5px;} } /* --------- Чат ------------ */ .b24-widget-button-position-bottom-right { right: 15px!important; } .b24-widget-button-wrapper { z-index: 100!important; } .b24-widget-button-shadow { z-index: 99!important; } /* ################################################################################### ## Уведомления ################################################################################### */ #notificationDropdown { position: relative; padding: 20px 20px 30px; height: 325px; width: 600px; border-radius: var(--tiny-border-radius);} #notificationDropdown.show { display: flex; flex-direction: column; } #notificationDropdown .notif-info { padding: 30px 25px 30px; height: 250px; max-height: 90vh; } #notificationDropdown .notif-info i { font-size: 48px; } #notificationDropdown .notifications-header {position: absolute; top: 20px; padding: 0 5px; display: flex; justify-content: space-between; } #notificationDropdown .notifications-header h4 { display: inline-block; margin: 0; } #notificationDropdown .notifications-header i { font-size: 18px; padding: 2px 4px; cursor: pointer; display: inline-block; } #notificationDropdown .notifications-header i:hover { text-shadow: 0 0 15px rgba(50, 175, 155, .6); transition: text-shadow .15s ease; } #notificationDropdown.settings-shown .notifications-header i { transform: scaleX(-1); text-shadow: 0 0 15px rgba(50, 175, 155, .6); } #notificationDropdown .notifications-content{position: relative; height: 100%; padding-top: 45px;} #notificationDropdown .notification-list {list-style: none; padding: 0; height: 100%; overflow: auto;} #notificationDropdown .notification-list li{display: flex; align-items: flex-start;} #notificationDropdown .notification-list li:not(:last-child){margin-bottom: 30px;} #notificationDropdown .notification-list li strong{display: block; font-size: var(--text-b1);} #notificationDropdown .notification-list li img, #notificationDropdown .notification-list li svg{width: 40px; margin-top: 6px; margin-right: 10px;} #notificationDropdown .notification-list li span{display: block; font-size: var(--text-b3); margin-bottom: 7px;} #notificationDropdown .notification-list li .notification-actions .btn{font-size: var(--text-b4); text-transform: none;} #notificationDropdown .notification-settings { display: none; padding: 7px 10px 0; } #notificationDropdown .notification-settings .form-switch { margin-bottom: 0; } #notificationDropdown.settings-shown .notification-settings { display: block; } @media (max-width: 1199.98px) { #notificationMenu{padding-top: var(--wp-admin--admin-bar--height);} #notificationDropdown{padding: 10px 15px; height: 100%; width: unset;} #notificationDropdown .notifications-header{display: none;} #notificationDropdown .notifications-content{padding-top: 0;} } /*------------------------------*/ .user-notification { border-bottom: 1px solid var(--color-dark); margin: 5px 5px 12px; } .user-notification:last-child { border: none; margin-bottom: 0; } .user-notification .user-notification-header { display: flex; flex-wrap: nowrap; margin-bottom: 10px; } .user-notification .user-notification-header b { line-height: 1.5; flex-grow: 1; font-size: 14px; } .user-notification .user-notification-header b img { width: 20px; height: 20px; margin-right: 6px; border-radius: var(--default-border-radius); float: left; position: relative; top: 2px; } .user-notification .user-notification-header small { min-width: 60px; font-size: 12px; line-height: 24px; font-weight: 300; text-align: right; } .user-notification .user-notification-text { line-height: 1.1; margin-bottom: 10px; font-size: 13px; } .user-notification .user-notification-actions .btn { margin-bottom: 15px; padding: 6px 20px; font-size: 14px; margin-right: 10px; } /* ################################################################################### ## Автор ################################################################################### */ .avatar{border-radius: 50%; object-fit: contain; aspect-ratio: 1;} .avatar.lazyload, .avatar.lazyloading { width: 25px; height: 25px; flex-grow: 0; } .avatar.lazyload:after, .avatar.lazyloading:after { content: '🗿'; } .avatar-40.lazyload, .avatar-60.lazyloading { width: 60px; height: 60px; } .avatar-40.lazyload:after, .avatar-60.lazyloading:after { font-size: 30px; } .avatar-96.lazyload, .avatar-96.lazyloading { width: 96px; height: 96px; } .avatar-96.lazyload:after, .avatar-96.lazyloading:after { font-size: 48px; } .avatar-300.lazyload, .avatar-300.lazyloading { width: 350px; height: 350px; } .avatar-300.lazyload:after, .avatar-300.lazyloading:after { font-size: 68px; } /* ################################################################################### ## Подвал ################################################################################### */ footer{color: var(--color-gray-dark); font-size: 13px; padding: 50px 0; background-color: var(--color-constant-dark);} footer .site-logo-link{display: block;margin-bottom: 20px;} footer .site-logo{width: 164px;} footer .contact-list li a{text-decoration: underline; padding: 5px 0; color: inherit; font-size:inherit} footer .copyright-notice{display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: right;} footer .copyright-notice p{margin-bottom: 1px;} footer .copyright-notice p:first-child{font-size: 15px; margin-bottom: 3px;} @media screen and (max-width: 768px) { footer .contact-list{margin-bottom: 30px;} footer .contact-list li{width: 100%;} footer .copyright-notice{text-align: left; justify-content: flex-start;} } /* ################################################################################### ## Крошки ################################################################################### */ .breadcrumbs { font-weight: 500; color: var(--text-light-gray); margin-top: 0; margin-bottom: 25px; font-size: 14px; list-style: none; padding-left: 0; } .breadcrumbs:empty { display: none; } .breadcrumbs a { color: var(--text-light-gray); opacity: 0.6; text-decoration: none; } .breadcrumbs li { display: inline-block; } .breadcrumbs li:after { display: inline-block; font-family: 'Talpis'; content: "⇒"; font-size: 12px; color: var(--text-light-gray); margin: 0 10px; } .breadcrumbs > li:last-child a { color: var(--color-dark); } .breadcrumbs > li:last-child:after { display: none; } .breadcrumbs ol { display: inline-block; padding-left: 0; list-style: none; } .breadcrumbs ol li:not(:last-child) { margin-right: 3px; } .breadcrumbs ol li:not(:last-child):after { display: none; } @media screen and (max-width: 991px) { .breadcrumbs { margin-top: 35px; margin-bottom: 30px; } } /* ################################################################################### ## Главная ################################################################################### */ section{margin-bottom: 70px;} section .section-title {font-family: var(--head-font); font-size: var(--text-t3); line-height: 1; font-weight: bolder;} section .section-description{ width: 1000px; max-width: 100%;} section .section-description:empty{display: none;} /* --------- Общее ---------- */ #home-page h2.section-title{border-left: 4px solid var(--color-primary); padding-left: 30px; margin-bottom: 30px; text-transform: uppercase;} @media screen and (max-width: 1200px) { #home-page h2.section-title{padding-left: 15px;} } /* --------- Приветствие ---------- */ #home{position: relative; background: var(--color-primary-light) url("../img/site/home.jpg") bottom no-repeat; padding-top: 70px; margin-bottom: 70px;} .dark-theme #home {background: var(--color-foreground) url("../img/site/home-d.jpg") bottom no-repeat;} @media screen and (min-width: 1920px) { #home:before, #home:after { content: ''; position: absolute; top: 0; height: 100%; width: 256px; z-index: 0; } #home:before {left: 50%; margin-left: 750px; background-image: linear-gradient(to left, var(--color-primary-light) 40%, transparent 100%);} #home:after {right: 50%; margin-right: 750px; background-image: linear-gradient(to right, var(--color-primary-light) 40%, transparent 100%);} } #home .container .author-row{position: relative;} #home .section-title{font-size: var(--text-t1); font-weight: 600; margin-bottom: 50px; color: var(--color-primary); text-transform: uppercase;} #home .section-subtitle{font-size: var(--text-t2); font-weight: 600; text-wrap: nowrap; margin-bottom: 20px; color: var(--color-secondary-alt); text-transform: uppercase;} #home .section-description{font-size: var(--text-tb1); line-height: 1.1; margin-bottom: 80px;} #home .author-phrase{position: absolute; top: 20%; right: 0; z-index: 0; background-color: var(--color-primary-alt); background-color: color-mix(in srgb, var(--color-primary-alt), transparent 10%); padding: 40px; border-radius: var(--tiny-border-radius);} #home .author-phrase small{font-size: var(--text-tb1); color: var(--color-constant-bright); text-transform: uppercase; margin-bottom: 10px;} #home .author-phrase .author-phrase-text{color: var(--color-constant-bright); font-size: var(--text-b1);} #home .author-image-col{display: flex; align-items: flex-end; justify-content: center;} #home .author-image{position: relative; z-index: 1;} @media screen and (max-width: 1200px) { #home .author-phrase{top: unset; right: 30px; bottom: 20px; z-index: 1;} } @media screen and (min-width: 991px) { #home .author-phrase{max-width: 40%;} } @media screen and (max-width: 768px) { #home .section-title{margin-bottom: 20px;} #home .section-subtitle{margin-bottom: 5px;} #home .section-description{margin-bottom: 20px;} #home .section-description br{display: none;} #home .author-phrase{left: 20px; right: 20px; padding: 20px;} #home .author-phrase .author-phrase-text{font-size: var(--text-b2); line-height: 1.2; min-width: unset;} #home .author-image{max-height: 380px; } #home .author-image.lazyload, #home .author-image.lazyloading{min-height: 380px;} } @media screen and (max-width: 576px) { #home{margin-bottom: 20px;} #home .section-title{margin-bottom: 10px;} } /* --------- Новости ---------- */ #news .slider-wrap{padding: 20px 70px;} #news .slick-slide > div{padding: 0 10px;} #news .news-item{display: flex; align-items: center;} #news .news-item img{width: 120px; height: 100px; aspect-ratio: 1; flex-shrink: 0; object-fit: cover; border-radius: var(--tiny-border-radius); border: 1px solid var(--color-gray);} #news .news-caption{align-self: flex-start; font-size: var(--text-b3); margin-left: 15px;} #news .news-item small{display: block; color: var(--color-gray-dark); font-family: var(--text-font); margin-bottom: 5px;} #news .news-item b{font-family: var(--text-font); font-weight: normal; font-size: inherit;} @media screen and (min-width: 1200px) { #news .news-item{padding-right: 15px;} } @media screen and (max-width: 991px) { #news .slider-wrap{padding: 30px 30px} } @media screen and (max-width: 768px) { #news .slider-wrap{padding: 0} } /* --------- Метод ---------- */ #method .method-row{margin-top: 60px; --bs-gutter-x: 60px;} #method .section-description{margin-top: 10px; font-size: var(--text-b4);} #method .col-auto{margin-right: 30px;} #method .methods-wrap{color: var(--color-constant-bright); border-radius: var(--tiny-border-radius); background: var(--color-constant-dark) no-repeat center / cover url('../img/site/background.jpg'); padding: 70px;} #method .method-feature{line-height: 1.1; text-align: center;} #method .method-feature img{margin-bottom: 40px; max-width: 100px;} #method .method-feature b{display: block; font-size: var(--text-h4); font-weight: 600; margin-bottom: 10px;} #method .method-feature span{font-size: var(--text-b2); line-height: 1.2;} @media screen and (max-width: 991px) { #method .methods-wrap{padding: 30px 20px;} #method .section-description{width: auto;} #method .method-feature{margin-bottom: 40px;} #method .method-feature img{margin-bottom: 10px;} } /* --------- Семинары ---------- */ #seminars .seminar-series-row{margin-top: 20px;} #seminars .seminar-series-row > div{margin-bottom: 25px;} #seminars .seminar-series{position: relative; display: flex; flex-direction: column; padding: 30px; background-color: var(--color-primary-light); border: 1px solid var(--color-primary-light); border-radius: var(--tiny-border-radius); height: 100%; overflow: hidden; transition: border .15s ease;} #seminars .seminar-series:hover{border-color: var(--color-primary);} .dark-theme #seminars .seminar-series{background-color: var(--color-foreground)} @media screen and (max-width: 991px) { #seminars .seminar-series{padding: 20px;} } /* ------ */ #seminars .seminar-series-body{position: relative; z-index: 1;} #seminars .seminar-series-body:not(:last-child){margin-bottom: 100px;} #seminars .seminar-series-header{margin-bottom: 25px;} #seminars .seminar-series-ico{margin-bottom: 20px; background-color: transparent;} #seminars .seminar-series-ico img, #seminars .seminar-series-ico svg{max-width: 60px; border-radius: 50%; padding: 10px 10px 9px; background-color: var(--color-bright); margin-right: 15px; aspect-ratio: 1;} #seminars .seminar-series-title{font-size: var(--text-h3); line-height: 1.1;} #seminars .seminar-series-content{font-size: var(--text-b2); margin-bottom: 20px;} #seminars .seminar-series .btn{font-size: var(--text-b4); line-height: 1; color: var(--color-primary);} #seminars .seminar-series .btn:hover{color: var(--color-primary); text-decoration: none;} #seminars .seminar-series .btn i{margin-left: 10px; vertical-align: baseline;} @media screen and (max-width: 991px) { #seminars .seminar-series-body:not(:last-child){margin-bottom: 50px;} #seminars .seminar-series-header{display: flex; align-items: center;} #seminars .seminar-series-ico{margin-bottom: 0; margin-top: -2px; margin-right: 15px;} } /* ------ */ #seminars .seminar-series .seminar-series-background{position: absolute; bottom: -30px; right: -30px; height: 200px; z-index: 0;} @media screen and (max-width: 991px) { #seminars .seminar-series .seminar-series-background{height: 130px; bottom: -15px; right: -15px;} } /* --------- Видео ---------- */ #video .col-auto{margin-right: auto;} #video .nav-pills{display: flex; justify-content: flex-end; margin-top: 5px;} #video .nav-pills .nav-item{margin-right: 0; margin-left: 15px;} #video .tab-content{margin-top: 10px;} #video .tab-pane a{border-radius: var(--small-border-radius); overflow: hidden; margin-bottom: 20px; width: 100%;} #video .tab-pane a img{width: 100%;} @media screen and (max-width: 991px) { #video .nav-pills{height: 59px; overflow-x: scroll; flex-wrap: nowrap; justify-content: unset} #video .nav-pills .nav-item{flex-shrink: 0; margin-bottom: 0; margin-left: 7px;} #video .nav-pills .nav-item:first-child{margin-left: 0;} } @media screen and (max-width: 768px) { #video .nav-pills{height: 50px;} #video .tab-pane a{border-radius: var(--tiny-border-radius);} } /* --------- Фильмы ---------- */ #films{position: relative;} #films:before{content: ''; background: left center/contain no-repeat url('../img/site/films-l.png'); position: absolute; left: 0; top: 0; width: 30%; height: 90%; z-index: 0;} #films .films-row{margin-top: 20px;} #films .film-item a{border-radius: var(--small-border-radius); overflow: hidden; margin-bottom: 20px;} @media screen and (max-width: 768px) { #films .film-item a{border-radius: var(--tiny-border-radius);} } /* --------- Отзывы ---------- */ #reviews .col-auto{margin-right: auto;} #reviews .slider-wrap{margin: 20px -15px 40px;} #reviews .slick-slide > div{padding: 0 15px;} #reviews .slider-nav{display: flex; justify-content: flex-end; align-items: center; margin-top: 9px;} #reviews .slick-arrow, #reviews .slick-dots{position: static; transform: none} #reviews .slick-prev{order: 1;} #reviews .slick-dots{order: 2; width: auto;} #reviews .slick-next{order: 3;} @media screen and (max-width: 991px) { #reviews .slider-nav-col{order: 5; margin-bottom: 20px;} #reviews .slider-nav{justify-content: center;} #reviews .slider-wrap{margin-top: 0; margin-bottom: 10px;} #reviews .slick-slide > div{padding: 0 15px;} } /*---------------*/ #reviews .review-item{flex-direction: column; background-color: var(--color-primary-light); border-radius: var(--tiny-border-radius); padding: 40px; border: 1px solid var(--color-primary-light); transition: border .15s ease;} #reviews .review-item:hover{border-color: var(--color-primary);} #reviews .review-item .review-header{display: flex; align-items: center; margin-bottom: 30px;} #reviews .review-item .review-header img{width: 80px; background-color: var(--color-bright); margin-right: 20px; border-radius: 50%; aspect-ratio: 1; object-fit: cover;} #reviews .review-item .review-header b{display: block; font-size: var(--text-b1); font-weight: 300;} #reviews .review-item .review-header small{color: var(--color-gray-dark);} #reviews .review-caption{font-size: var(--text-b3);} @media screen and (max-width: 768px) { #reviews .review-item{padding: 20px;} } /* --------- Вопросы ---------- */ #accordionQnA{margin: 20px 0 40px;} #qna .accordion-item{padding: 40px 30px; color: var(--color-dark); background-color: var(--color-bright); border-radius: var(--tiny-border-radius); border: 1px solid var(--color-gray); margin-bottom: 15px; transition: box-shadow .15s ease;} #qna .accordion-item:not(.collapsed){box-shadow: var(--box-shadow-hover);} #qna .accordion-item .accordion-button{color: var(--color-dark); font-size: var(--text-h4); padding: 0; box-shadow: none;} #qna .accordion-item .accordion-button:after{font-family: 'Talpis'; content: '+'; font-size: 18px; padding: 10px 12px; width: auto; height: auto; color: var(--color-primary-alt); border: 1px solid var(--color-primary-alt); background: none; border-radius: 50%;} #qna .accordion-item .accordion-button:not(.collapsed):after{content: '❌'; color: var(--color-gray-dark); border-color: var(--color-gray-dark); transform: none} #qna .accordion-item .accordion-body{font-size: var(--text-b3); padding: 30px 0 0;} @media screen and (max-width: 768px) { #qna .accordion-item{padding: 30px 20px;} } /* --------- Связь ---------- */ #contact .section-title, #contact .section-description{color: var(--color-constant-bright);} #contact .section-title{margin-bottom: 40px; max-width: 450px;} #contact .section-description{font-size: var(--text-b2); width: 470px; margin: 0;} #contact .contact-wrap{padding: 50px; border-radius: var(--tiny-border-radius); background: var(--color-constant-dark) no-repeat center / cover url('../img/site/background.jpg');} #contact .contact-wrap .form-check-label{color: var(--color-constant-bright);} #contact .contact-wrap a:not(:hover){color: var(--color-primary)} #contact form{margin-top: 20px;} @media screen and (max-width: 768px) { #contact .contact-wrap{padding: 40px 20px;} #contact form{margin-top: 30px;} } /* ################################################################################### ## Вопросы и ответы ################################################################################### */ #qna-page .nav-pills{margin-bottom: 15px;} #qna-page #qna{margin-bottom: 70px;} @media screen and (max-width: 991px) { #qna-page .nav-pills{height: 59px; overflow-x: scroll; flex-wrap: nowrap; justify-content: unset} #qna-page .nav-pills .nav-item{flex-shrink: 0; margin-bottom: 0; margin-right: 7px;} } @media screen and (max-width: 768px) { #qna-page .nav-pills{height: 50px;} } /* ################################################################################### ## Видео ################################################################################### */ #video-page .nav-pills{margin-bottom: 25px; justify-content: unset;} #video-page #video{margin-bottom: 70px;} /* ################################################################################### ## Контакты ################################################################################### */ #contacts-page .contacts-item{margin-bottom: 40px;} #contacts-page .contacts-item b{font-size: var(--text-b1); font-weight: 500; margin-bottom: 15px;} #contacts-page .contacts-item p{font-size: var(--text-b2);} #contacts-page .contacts-item p i{font-size: var(--text-h4); line-height: var(--text-h3); vertical-align: top; margin-right: 10px;} #contacts-page .contacts-item p span{display: inline-block;} #contacts-page .social-list a{margin-right: 15px;} #contacts-page .social-list a i{font-size: 30px;} /* --------- Форма ---------- */ #contacts-page{background: left 140%/50% no-repeat url('../img/site/contacts-l.png');} #contacts-page #messageForm{margin-bottom: 100px; padding: 50px; border-radius: var(--tiny-border-radius); background: var(--color-dark) center / cover no-repeat url('../img/site/background.jpg');} #contacts-page #messageForm h2{color: var(--color-constant-bright); margin-bottom: 50px; text-transform: uppercase; font-size: var(--text-h1); border-left: 4px solid var(--color-primary); padding-left: 20px;} #contacts-page #messageForm a:not(:hover){color: var(--color-primary)} @media screen and (max-width: 768px) { #contacts-page #messageForm{padding: 20px;} } /* ################################################################################### ## Страница продукта ################################################################################### */ .product-header { display: flex; align-items: center; margin-bottom: 30px; } .product-header a.product-image { margin-right: 30px; flex-shrink: 0; } .product-header a.product-image img { border-radius: var(--big-border-radius); width: 110px; } .product-header h1 { margin-bottom: 5px; font-size: 30px; font-weight: 600; } .product-header .single-excerpt { display: -webkit-box; height: 45px; color: var(--color-info); line-height: 1.3; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-header .single-excerpt:empty { display: none; } @media screen and (max-width: 768px) { .product-header a.product-image { margin-right: 15px; } .product-header a.product-image img { width: 50px; } .product-header h1 { font-size: 20px; } .product-header .single-excerpt { height: 37px; font-size: 14px; color: var(--color-info); } } /* ################################################################################### ## Каталог ################################################################################### */ #seminars-page{margin-bottom: 70px;} #seminar-row{position: relative} #seminar-row > div:not(:last-child){margin-bottom: 30px;} /* --------- Категории ---------- */ #categoryForm{margin-bottom: 30px;} .category-list .categoty-item{display: inline-block; margin: 0 15px 15px 0;} .category-list .categoty-item .btn{font-size: var(--text-b3);} @media (max-width: 991px) { #categoryForm{display: none;} .category-list .categoty-item{ margin: 0 5px 7px 0;} .category-list .categoty-item .btn{padding: 6px 15px;} } /* --------- Сайдбар ---------- */ #seminars-page .sidebar-inner{position: sticky; top: 150px; padding-right: 40px;} #seminars-page .sidebar-subscribe, #seminars-page .footer-subscribe{display: flex; align-items: center;} #seminars-page .sidebar-subscribe i, #seminars-page .footer-subscribe i{font-size: var(--text-h4); color: var(--color-primary-alt); line-height: var(--text-h2); margin-right: 10px;} #seminars-page #footer{display: none; margin-top: 50px;} @media (max-width: 991px) { #seminars-page .page-title{margin-bottom: 15px;} #seminars-page .sidebar-inner{position: unset;} #seminars-page .sidebar-subscribe{display: none;} #seminars-page #footer{display: block;} } /* --------- Мобиьный фильтр ---------- */ .mobile-filter-col{margin-bottom: 20px;} .mobile-filter-col .btn{font-size: var(--text-b2);} .mobile-filter-col .btn i{font-size: var(--text-b1); line-height: 1;} @media (min-width: 992px) { .mobile-filter-col{display: none;} } /* --------- Фильтр ---------- */ #filterMenu .offcanvas-footer{position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px; text-align: center;} #filterMenu .offcanvas-footer .btn{display: block; max-width: 400px;} @media (min-width: 992px) { #filterMenu{margin: 0 -5px 40px;} #filterMenu .offcanvas-header{display: flex; padding: 0 5px 20px; border: none;} #filterMenu .btn-close, #filterMenu .offcanvas-footer{display: none;} } @media (max-width: 991px) { #filterMenu{padding-top: var(--wp-admin--admin-bar--height);} #filterMenu .offcanvas-body{padding: 10px 3px 0 20px; min-height: 0;} } /* --------- Группа фильтров ---------- */ #filterForm{position: relative; width: 100%; height: 100%;} #filterForm .ajax-loader{opacity: 0;} .filter-group-wrap{max-height: 50vh; padding-right: 15px; overflow-y: auto;} .filter-group-wrap .accordion-item { background: transparent; border: none;} .filter-group-wrap .accordion-header{position: sticky; top: 0; padding: 10px 5px; background-color: var(--color-background);} .filter-group-wrap .accordion-button { font-family: var(--text-font); font-size: var(--text-b2); color: var(--color-dark); padding: 0; cursor: pointer; } .filter-group-wrap .accordion-button.collapsed { background-color: transparent; } .filter-group-wrap .accordion-button:not(.collapsed) { background-color: transparent; box-shadow: none; color: var(--color-dark); } .filter-group-wrap .accordion-button:not(.collapsed):after { background-image: var(--bs-accordion-btn-icon); } .filter-group-wrap .accordion-body { padding: 20px 5px 0; } .filter-group-wrap .accordion-body .form-check{padding-bottom: 15px; margin: 0;} .filter-group-wrap .accordion-body .form-check .form-check-label{color: var(--color-gray-dark);} .filter-group-wrap .mobile-category-list{margin-bottom: 7px;} @media (min-width: 992px) { .filter-group-wrap .mobile-category-list{display: none;} } @media (max-width: 991px) { .filter-group-wrap{max-height: 100%; padding-bottom: 60px;} .filter-group-wrap .accordion-item{margin-bottom: 10px;} .filter-group-wrap .accordion-header{ padding: 10px 15px; background-color: var(--color-gray-light); border-radius: var(--tiny-border-radius);} .filter-group-wrap .accordion-body { padding: 10px 5px 0; } } .dark-theme .filter-group-wrap .accordion-button:after{filter: invert(100%)} /* --------- Семинар ---------- */ .seminar-item { padding: 30px 40px; border-radius: var(--tiny-border-radius); background-color: var(--color-primary-light); border: 1px solid var(--color-primary-light); transition: border .15s ease;} .seminar-item:hover{border-color: var(--color-primary);} @media screen and (max-width: 768px) { .seminar-item { padding: 20px;} } /* -------- */ .seminars-header{display: flex; align-items: center; margin-bottom: 30px;} .seminars-header .row > div{display: flex; align-items: center; margin-bottom: 10px;} .seminars-header .row > div:last-child{margin-bottom: 0;} .seminars-header a{width: 100px; flex-shrink: 0; margin-right: 30px; color: var(--color-bright); border-radius: 50%;} .seminars-header a img, .seminars-header a svg{padding: 15px 15px 13px; border-radius: 50%;} .seminars-header .row a{display: none; width: 60px; margin-right: 20px} .seminars-header strong{font-weight: 600; padding: 8px 20px; text-wrap: nowrap; background-color: var(--color-bright); border-radius: var(--tiny-border-radius); margin-right: 20px;} .seminars-header h3{display: inline-block; margin: 0; font-size: var(--text-h3);} .seminars-header i{margin-left: 15px; font-size: var(--text-h4); vertical-align: middle; cursor: help;} .seminars-header time{margin-right: 15px;} .seminars-header address{margin-bottom: 0;} @media screen and (max-width: 768px) { .seminars-header{margin-bottom: 20px;} .seminars-header .row > div{flex-wrap: wrap;} .seminars-header > a{display: none;} .seminars-header .row a{display: inline-block;} .seminars-header strong{width: auto;} .seminars-header h3{font-size: var(--text-h1); width: 100%; margin-top: 10px;} .seminars-header address{width: 100%;} } /* -------- */ .seminars-body{margin-bottom: 20px;} .seminars-body i{margin-right: 20px; font-size: var(--text-h4);} .seminars-price-item, .seminars-info-item{display: flex; align-items: center; margin-bottom: 10px;} .seminars-price-item i, .seminars-info-item i{margin-top: -.5px;} .seminars-price-item b{display: inline-block; font-weight: normal; width: 35%; vertical-align: bottom;} .seminars-price-item.active b{font-size: var(--text-h3); font-weight: 600;} .seminars-price-item.line-through b{text-decoration: line-through;} html:not([currency="RUB"]) .seminars-price-item b{width: 23%;} .seminars-price-item time{font-size: var(--text-b3); color: var(--color-gray-dark);} .seminars-price-item.line-through time{text-decoration: line-through;} .seminars-info-item span{font-size: var(--text-b3);} .seminars-info-item i{margin-right: 15px;} @media screen and (max-width: 768px) { .seminars-body .col-info{padding-top: 12px; border-top: 1px solid var(--color-gray);} } /* -------- */ .seminar-background{width: 100%; border-radius: var(--tiny-border-radius); background: rgb(194,211,220); background: linear-gradient(0deg, rgba(242,236,231,1) 0%, rgba(241,241,239,1) 30%, rgba(194,211,220,1) 100%);} @media screen and (max-width: 1200px) { .seminar-background{display: none;} } /* -------- */ .seminars-actions .btn{margin-bottom: 10px;} .seminars-actions .btn:not(:last-child){margin-right: 15px;} @media screen and (max-width: 576px) { .seminars-actions .btn{text-align: center; width: 100%; margin-bottom: 15px;} } /* ################################################################################### ## Поля пользователя ################################################################################### */ .completed-seminars-dates .form-group{display: flex; align-items: center; margin-bottom: 5px;} .completed-seminars-dates .form-group:last-child{margin-bottom: 0;} .completed-seminars-dates .form-group .form-control{margin-right: 15px;} .completed-seminars-dates .form-group .btn-delete{text-decoration: none;} .seminars_completed__dates .seminars_completed__date_list { margin-bottom: 0; } .seminars_completed__dates > label { display: inline-block!important; margin-bottom: 5px!important; } .seminars_completed__dates > a { text-decoration: underline; color: var(--color-primary); } .seminars_completed__dates .seminars_completed__date { display: flex; align-items: center; margin-bottom: 10px; } .seminars_completed__dates .seminars_completed__date input { margin: 0 20px 0 0; } /* ################################################################################### ## Профиль ################################################################################### */ #account-page{padding: 50px 0 100px;} @media screen and (max-width: 991px) { #account-page{padding: 20px 0 100px;} } /* ----------------------------- */ #account-nav{ position: sticky; top: 95px; background-color: var(--color-bright); border-radius: 0 20px 20px 0; padding: 40px 20px 80px 0; } #account-nav:before { position: absolute; top: 0; right: 100%; content: ''; width: 100%; height: 100%; background: var(--color-bright); } #account-nav .account-avatar{margin-bottom: 30px; text-align: center;} #account-nav .account-avatar img{border-radius: 50%; margin-bottom: 10px;} #account-nav .account-avatar h2{font-size: var(--text-h4); font-weight: 400;} #account-nav .menu{position: relative; min-height: 50vh; max-height: 60vh; overflow-y: auto; padding-right: 20px;} #account-nav .menu .menu-item{margin-bottom: 10px;} #account-nav .menu .menu-item:last-child{margin-bottom: 0;} #account-nav .menu .sub-menu.collapse-body{padding-top: 15px;} #account-nav .menu .menu-item-group{position: sticky; top: 0; background-color: var(--color-bright);} #account-nav .menu .menu-item-group{border-radius: var(--tiny-border-radius); padding: 15px 5px;} #account-nav .menu .menu-item.current-menu-item > .menu-item-group{background-color: var(--color-gray-light);} #account-nav .menu .menu-item .menu-item-link{font-size: var(--text-b2); line-height: var(--text-h3);} #account-nav .menu .menu-item .menu-item-link i{margin-right: 20px; font-size: var(--text-b1); } #account-nav .menu .menu-item.current-menu-item > .menu-item-link{color: var(--color-primary-alt);} #account-nav .menu .menu-item .menu-item-group .menu-item-link:only-child{padding-right: 20px;} #account-nav .menu .menu-item .collapse-toggle{line-height: var(--text-h3); margin-right: 15px;} #account-nav .menu .sub-menu{padding-left: 45px;} #account-nav .menu .sub-menu .menu-item{margin-bottom: 7px;} #account-nav .menu .sub-menu .menu-item:last-child{margin-bottom: 0;} #account-nav .menu .sub-menu .menu-item-link{font-size: var(--text-b3); color: var(--color-gray-dark);} @media (max-width: 1199.98px) { .menu .menu-item ul .menu-item-link{color: var(--color-gray-dark)} .menu .menu-item ul .menu-item-link:hover{color: var(--color-primary)} } @media screen and (max-width: 991px) { #account-nav{display: none;} } /* ----------------------------- */ #account-content{padding: 30px 0 0 30px;} #account-content section{padding: 40px; background: var(--color-bright); box-shadow: var(--box-shadow-small); border-radius: var(--tiny-border-radius); margin-bottom: 50px;} #account-content section.card-clear{padding: 0; background-color: transparent; box-shadow: none; border-radius: 0;} .dark-theme #account-content section:not(.card-clear){background: var(--color-constant-dark); } #account-content section .card-header{font-size: var(--text-h4); font-weight: 500; border-left: 4px solid var(--color-primary); padding: 2px 20px; margin-bottom: 30px;} #account-content section .card-description{font-size: var(--text-b2); margin-bottom: 25px;} #account-content section .card-content:not(:last-child){margin-bottom: 30px;} #account-content section .card-content:empty{display: none;} @media screen and (max-width: 991px) { #account-content{padding: 0;} #account-content section{padding: 20px;} } /* ----------------------------- */ #account-content .news-item:not(:last-child){margin-bottom: 30px;} /* ################################################################################### ## Информация в профиле ################################################################################### */ .profile-list { position: relative; border-radius: var(--default-border-radius); } .profile-list > li { display: grid; align-items: center; margin-bottom: 5px; } .profile-list > li.list-header { color: #aeaeae; font-size: var(--text-b4); margin-bottom: 10px; } .profile-list > li ol { list-style: none; } .profile-list > li > label, .profile-list > li ol { display: inline-block; padding: 5px 20px; } .profile-list > li > ol:last-child { padding: 0; margin: 0; } .profile-list > li > ol:last-child i { display: block; padding: 20px; cursor: pointer; } @media screen and (min-width: 769px) { .profile-list > li:last-child { border: 0; } .profile-list > li > ol > li:first-child { display: none; } .profile-list > li > ol > li.view-btn { display: none; } } @media screen and (max-width: 768px) { .profile-list { border: none; border-radius: 0; } .profile-list .list-header { display: none; } .profile-list > li { display: flex; flex-wrap: wrap; width: 100%; border-radius: var(--default-border-radius); margin-bottom: 20px; } .profile-list > li ol { width: 100%; padding: 0 20px; margin-bottom: 20px; } .profile-list > li ol:first-child { display: flex; flex-wrap: wrap; padding: 20px 10px 20px 20px; } .profile-list > li ol:last-child { display: none; } .profile-list > li ol:first-child li:first-child { flex-grow: 1; } .profile-list > li ol:first-child li:last-child { width: 100%; padding-right: 40px; } .profile-list > li ol li.view-btn .btn-more { position: relative; top: 10px; display: inline-block; font-size: 18px; cursor: pointer; padding: 0 10px; } .profile-list > li > ol > li:first-child { margin-bottom: 5px; font-size: 14px; color: var(#aeaeae); } .profile-list > li > ol > li:last-child { font-size: 17px; } } /* ----------------------------- */ .purchase-list > li { grid-template-columns: auto 150px 150px 160px 60px; } .purchase-list > li:not(.list-header) { background-color: #fafafa; border-radius: var(--tiny-border-radius); } .purchase-status { display: inline-block; font-size: var(--text-b3); font-weight: 300; padding: 7px 15px; color: #000; background: var(--color-alert-bg); border-radius: var(--default-border-radius); } .purchase-status-canceled { background: var(--color-gray); } .purchase-status-completed { background: var(--color-success-bg); } @media screen and (min-width: 769px) and (max-width: 991px) { .purchase-list li { grid-template-columns: auto 150px 160px 60px; } .purchase-list li > *:nth-child(3) { display: none; } } /* ----------------------------- */ #profileInfoModal .modal-dialog { max-width: 100%; width: 500px; margin-right: auto; margin-left: auto; } #profileInfoModal .modal-header { position: relative; padding: 0; z-index: 1; } #profileInfoModal .modal-header .close { position: absolute; padding: 0; top: 2px; right: 0; } #profileInfoModal .modal-body { min-height: 300px; } #profileInfoModal h5 { font-size: 22px; margin-bottom: 20px; padding-right: 30px; } #profileInfoModal .info-field { color: var(--color-dark); line-height: 1.1; margin-bottom: 7px; } #profileInfoModal .info-field > label { font-weight: 500; font-size: 13px; line-height: 20px; color: var(--color-primary); } #profileInfoModal .info-field > span { display: block; font-size: 16px; } #profileInfoModal .form-actions{display: flex; margin-top: 25px; justify-content: space-between;} #profileInfoModal .form-actions .btn:not(:last-child){margin-right: 15px;} /* ################################################################################### ## Настройки профиля ################################################################################### */ #settingsForm { position: relative; } #settingsForm .card-notification{font-size: var(--text-b3); color: var(--color-gray-dark);} #accountAvatar{display: none;} #accountAvatar + label{position: relative; cursor: pointer; color: var(--color-bright); font-size: var(--text-h4);} #accountAvatar + label i{position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; line-height: 120px; text-align: center; color: var(--color-dark); background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; opacity: 0; transition: opacity .15s ease;} #accountAvatar + label:hover i{opacity: 1;} /* --------------------- */ .certificate-source b{display: inline-block; font-size: var(--text-b1); font-weight: 400;} .certificate-source:not(:first-child) b{margin-top: 40px;} .certificate-source .btn-link{text-decoration: underline;} .certificate-source .certificate-item{margin-top: 30px; margin-bottom: 10px;} .certificate-source .certificate-item .certificate-img{position: relative; margin-bottom: 10px;} .certificate-source .certificate-item .certificate-img img{border-radius: var(--tiny-border-radius); border: 1px solid var(--color-gray); width: 100%;} .certificate-source .certificate-item .certificate-img i{position: absolute; right: -15px; top: -15px; font-size: 14px; line-height: 1; padding: 10px 9px 8px; border-radius: 50%; background-color: var(--color-bright); border: 1px solid var(--color-gray); cursor: pointer;} .sertificat-file__add{margin: 0;} #certificateModal .modal-dialog { width: 700px; } #certificateModal .form-text-upload { width: 100%; } #certificateModal .upload-area { display: block!important; width: 100%; padding: 35px 10px 25px; margin-bottom: 10px; border: 2px dashed var(--color-info); color: var(--color-dark); border-radius: var(--tiny-border-radius); text-align: center; cursor: pointer; transition: .2s ease-in background-color; } #certificateModal .upload-area:hover { background-color: var(--color-bright); } #certificateModal .upload-area i { font-size: 56px; margin-bottom: 30px; display: block; color: var(--color-primary); } #certificateModal .upload-area span { font-size: 20px; width: 100%; display: inline-block; } #certificateModal .upload-area small { display: block; color: var(--color-info); } #certificateModal .upload-area a {display: inline-block; margin: 10px auto 0; padding: 10px 16px; font-size: 14px; } #certificateModal .file-upload-group:not(.active) { display: none; } #certificateModal .file-upload-group.active + .file-edit-group { display: none; } #certificateModal .image-col { position: relative; text-align: center; } #certificateModal .image-col .image-wrap { position: relative; width: 100%; height: 135px; background-color: #e1e1e1; border: 1px solid var(--color-gray); border-radius: var(--tiny-border-radius); overflow: hidden; } #certificateModal .image-col .i-close{position: absolute; top: -15px; right: 0; font-size: 14px; line-height: 1; padding: 10px 9px 8px; background-color: var(--color-bright); border: 1px solid var(--color-info); border-radius: 50%; cursor: pointer; } #certificateModal .image-col img { width: 100%; height: 100%; max-height: 100%; object-fit: cover; } #certificateModal .form-group:first-child { margin-top: 8px; } #certificateModal .form-group:last-child, #certificateModal .form-group:last-child .form-control { margin-bottom: 0; } #certificateModal .file-edit-group .row { margin-bottom: 30px; } @media screen and (max-width: 768px) { #certificateModal .image-col .image-wrap{height: 300px;} } /* --------------------- */ #networksInfo .collapse-body { padding-top: 10px; } .networks-item { margin-bottom: 30px; } .networks-item label { display: inline-block!important; font-size: 16px; margin-bottom: 10px; } .networks-item label i { margin-right: 5px; vertical-align: text-bottom; } .networks-item .networks-item-data{display: flex;} .networks-item .form-control-merged { margin-right: 20px; } .networks-optins{margin-top: 50px;} @media screen and (max-width: 768px) { .networks-item .networks-item-data{flex-wrap: wrap;} .networks-item .form-control-merged{margin-right: 0; margin-bottom: 15px;} .networks-item .dropdown, .networks-item .dropdown button{width: 100% !important;} } /* --------------------- */ #requisites .nav-pills{margin-bottom: 10px;} #requisites .nav-pills .nav-link{padding: 8px 20px;} /* --------------------- */ #newsletter .card-content{--bs-gutter-x: 50px} #newsletter .newsletter-group{margin-bottom: 30px;} #newsletter .newsletter-group .form-check{margin-bottom: 10px;} #newsletter .newsletter-group .form-check-input{margin-right: 20px;} #newsletter .newsletter-group .form-check-label i{font-size: var(--text-b1); line-height: 1; vertical-align: text-bottom; margin-right: 10px;} #newsletter .newsletter-group .form-control-merged{margin-left: 37px;} /* ################################################################################### ## Уведомления о семинарах ################################################################################### */ #subscribeModal .recpatcha-notif{text-align: center;} /* ################################################################################### ## Лист ожидания ################################################################################### */ #waitingModal .recpatcha-notif{text-align: center;} /* ################################################################################### ## Возврат средств ################################################################################### */ #refundModal .nav-pills{margin-bottom: 10px;} #refundModal .nav-pills .nav-link{padding: 8px 20px 6px;} #refundModal .recpatcha-notif{text-align: center;} /* ################################################################################### ## Оформление заказа ################################################################################### */ #checkout-page h1 { margin-bottom: 30px; } #checkout-row { position: relative; } #checkout-row .checkout-card{background-color: var(--color-bright); padding:30px; margin-bottom: 40px; border-radius:var(--tiny-border-radius); border: 1px solid var(--color-gray);} #checkout-row .checkout-card .card-header { margin-bottom: 30px; font-size: var(--text-h4); font-weight: 500; } #checkout-row .checkout-card h5{ margin: 30px 0 15px; font-weight: 400;} @media screen and (max-width: 991px) { #checkout-row .checkout-card{padding: 20px;} } /* =============== Основное ============== */ @media screen and (min-width: 992px) { #checkout-main { padding-right: 50px; } } /*--------------------*/ #checkout-main .tab-pane > h5:first-child{margin-top: 10px;} #checkout-main .tab-pane .notif-info{align-items: flex-start; height: auto; min-height: unset;} /*--------------------*/ #checkout-main .promocode-data{display: flex;} #checkout-main .promocode-data input{margin-right: 40px;} /*--------------------*/ .gateway-list[data-gateways="0"] .gateway-group-bill{display: none;} .gateway-list[data-gateways="1"] .gateway-group:not(.gateway-group-bill){display: none;} .gateway-group .form-check{display: flex; align-items: center;} .gateway-group img{width: 50px; border-radius: 50%; margin: 0 20px 0 20px;} .gateway-group span{display: inline-block; vertical-align: middle; margin-top: 5px; font-size: var(--text-h4); font-weight: 500;} /* =============== Чек ============== */ #checkout-sidebar .checkout-card{position: sticky; top: 140px} /*--------------------*/ .checkout-product{margin-bottom: 20px; background-color: transparent} .checkout-product img, .checkout-product svg{width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 10px;} .checkout-product span{font-size: var(--text-b3); vertical-align: sub;} /*--------------------*/ .checkout-price{font-size: var(--text-h4); font-weight: 500; margin-bottom: 20px;} /*--------------------*/ .checkout-partial{margin-bottom: 20px;} .checkout-receipt-item{display: flex; font-size: var(--text-b3); margin-bottom: 10px; align-items: center; justify-content: space-between;} .checkout-receipt-item small{color: var(--color-gray-dark);} .checkout-receipt-item b{font-weight: 500;} /*--------------------*/ .checkout-receipt-item.totals b{font-size: var(--text-h3);} /*--------------------*/ .checkout-receipt-item .gateway-group img{width: 30px; margin-right: 10px;} .checkout-receipt-item .gateway-group span{font-size: var(--text-b1); margin-top: 1px;} /* =============== Результат ============== */ .order-card { display: flex; flex-wrap: nowrap; padding: 20px; list-style: none; line-height: 1; border: 1px solid var(--color-gray); border-radius: var(--default-border-radius); margin-bottom: 20px; } .order-card li { margin-right: 20px; padding-right: 20px; text-transform: uppercase; font-size: 14px; border-right: 1px dashed var(--color-gray); } .order-card li:last-child { margin-right: 0; padding-right: 0; border: 0; } .order-card li > span:after { content: ':'; } .order-card li > strong { display: block; font-size: 18px; text-transform: none; } .order-card hr { display: none; border: 0; margin: 0; width: 100%; } @media screen and (max-width: 991px) { .order-card { flex-wrap: wrap; justify-content: center; padding-bottom: 0; } .order-card li { margin-bottom: 20px; } .order-card li:first-child { width: 100%; } .order-card li:not(:nth-of-type(2n)) { margin-right: 0; padding: 0; border: none; } .order-card li:first-child > span { font-weight: bold; font-size: 18px; } .order-card li:first-child > span:after { content: none; } .order-card li:first-child > strong { display: inline-block; } .order-card hr { display: block; } } @media screen and (min-width: 768px) and (max-width: 991px) { .order-card li:nth-of-type(2), .order-card li:nth-of-type(n+4) { order: 1; } } @media screen and (max-width: 768px) { .order-card li:nth-of-type(2) { width: 100%; margin-right: 0; padding: 0; border: none; } } @media screen and (max-width: 576px) { .order-card li { width: 100%; margin-right: 0; padding: 0; border: none; } .order-card li:first-child { margin-bottom: 30px; } .order-card li:first-child > span, .order-card li:first-child > strong { font-size: 24px; } .order-card li:last-child { margin-top: 10px; } .order-card li:last-child > span { font-weight: bold; font-size: 21px; } .order-card li:last-child > strong { display: inline-block; font-size: 21px; } } /* ================================================================================= */ /* Custom seminar card improvements */ .seminars-header{display:flex;align-items:center;} .seminars-header .currency-form-wrapper{margin-left:auto;} .seminars-header time,.seminars-header address{font-size:var(--text-b2);color:var(--color-gray-dark);} .seminars-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;} @media(max-width:576px){.seminars-actions .btn{width:100%;margin-right:0;}} /* Улучшения дизайна карточки семинара */ .seminar-item{position:relative;padding-top:40px;box-shadow:var(--box-shadow-small);transition:box-shadow .2s ease,transform .2s ease} .seminar-item:hover{box-shadow:var(--box-shadow-hover);transform:translateY(-3px)} .seminar-item .currency-form-wrapper{position:absolute;top:15px;right:15px;background:var(--color-bright);padding:6px 8px;border-radius:var(--tiny-border-radius);margin:0;z-index:2} .seminars-price-item.seminars-price-main .seminars-price-value,.seminars-price-item.active .seminars-price-value{font-size:var(--text-h2);font-weight:700;color:var(--color-primary)} .seminars-price-item.line-through .seminars-price-value{opacity:.6} /* Дополнительные правки по запросу */ .seminar-item .currency-form-wrapper{padding:4px 6px !important;} .btn-outline-primary.white-text:active, .btn-outline-primary.white-text.active, .btn-outline-primary.white-text:focus{background:var(--color-primary) !important;color:var(--color-bright) !important;border-color:var(--color-primary) !important;box-shadow:none !important;} .seminar-item:hover{box-shadow:var(--box-shadow-small) !important;transform:none !important;} @media(min-width:992px){ .seminar-item .row>.col-xl-9{display:grid;grid-template-areas:"header header" "price actions";grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:15px 30px;align-items:center;} .seminar-item .row>.col-xl-9>.seminars-header{grid-area:header;} .seminar-item .row>.col-xl-9>.seminars-body{grid-area:price;margin:0;} .seminar-item .row>.col-xl-9>.seminars-actions{grid-area:actions;margin:0;} } /* Корректировки: селектор валют, outline-кнопок, компоновка цены и кнопок */ .seminar-item .currency-form-wrapper{padding:2px 4px !important;} .btn-outline-primary.white-text:hover, .btn-outline-primary.white-text:active, .btn-outline-primary.white-text.active, .btn-outline-primary.white-text:focus{background:var(--color-primary) !important;color:var(--color-bright) !important;border-color:var(--color-primary) !important;box-shadow:none !important;} @media(min-width:992px){ .seminars-body{margin-bottom:8px !important;} .seminars-actions{margin-top:-16px !important;justify-content:flex-end !important;gap:8px !important;} } /* Финальные правки: селектор валют и hover outline */ .seminar-item .currency-form-wrapper{padding:1px 3px !important;} .seminar-item .currency-form-wrapper select.form-control, .seminar-item .currency-form-wrapper .bootstrap-select .btn{padding:1px 3px !important;} .btn-outline-primary.white-text:hover, .btn-outline-primary.white-text:focus, .btn-outline-tertiary:hover, .btn-outline-tertiary:focus{ background:var(--color-bright) !important; color:var(--color-dark) !important; border-color:var(--color-bright) !important; box-shadow:none !important; } /* Пункт 3: оформление блока валюты */ .seminar-item .currency-form-wrapper{padding:2px !important;border-radius:calc(var(--tiny-border-radius) + 1px) !important;} /* Пункт 1: padding для select внутри блока валюты */ .seminar-item .currency-form-wrapper select.form-control, .seminar-item .currency-form-wrapper .bootstrap-select .btn{padding:8px 16px !important;} /* Пункт 2: кнопки в блоке действий */ .seminar-item .seminars-actions .btn{padding:8px 16px !important;border-radius:var(--tiny-border-radius) !important;} /* Скорректировать отступ кнопок от цены и gap между ними */ @media(min-width:992px){ .seminar-item .seminars-actions{margin-top:8px !important;gap:4px !important;} } /* Коррекция: padding кнопок и выравнивание влево */ .seminar-item .seminars-actions .btn{padding:12px 24px !important;} @media(min-width:992px){ .seminar-item .seminars-actions{justify-content:flex-start !important;gap:15px !important;} } /* Очищаем margin у кнопок, возвращаем padding 8×16 и border-radius */ .seminar-item .seminars-actions .btn { margin: 0 !important; padding: 8px 16px !important; border-radius: var(--tiny-border-radius) !important; } /* Устанавливаем gap для межкнопочных отступов */ .seminar-item .seminars-actions { gap: 15px !important; } /* Уменьшаем padding у карточки на 25% */ .seminar-item { padding: 23px 30px !important; } @media screen and (max-width: 768px) { .seminar-item { padding: 15px !important; } } /* Коррекция: восстановление padding кнопок */ .seminar-item .seminars-actions .btn { margin: 0 !important; padding: 12px 24px !important; border-radius: var(--tiny-border-radius) !important; } .seminar-item .currency-form-wrapper{padding:2px !important;border-radius:calc(var(--tiny-border-radius) + 1px) !important;} /* Пункт 1: padding для select внутри блока валюты */ .seminar-item .currency-form-wrapper select.form-control, .seminar-item .currency-form-wrapper .bootstrap-select .btn{padding:8px 16px !important;} /* Пункт 2: кнопки в блоке действий */ .seminar-item .seminars-actions .btn{padding:8px 16px !important;border-radius:var(--tiny-border-radius) !important;} /* Скорректировать отступ кнопок от цены и gap между ними */ @media(min-width:992px){ .seminar-item .row>.col-xl-9{display:grid;grid-template-areas:"header header" "excerpt excerpt" "price actions";grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:15px 30px;align-items:center;} .seminar-item .row>.col-xl-9>.seminars-header{grid-area:header;} .seminar-item .row>.col-xl-9>.seminars-body{grid-area:price;margin:0;} .seminar-item .row>.col-xl-9>.seminars-actions{grid-area:actions;margin:0;} .seminar-item .row>.col-xl-9>span[itemprop="description"]{grid-area:excerpt; margin-bottom: 15px;} } /* Коррекция: padding кнопок и выравнивание влево */ .seminar-item .seminars-actions .btn{padding:12px 24px !important;} @media(min-width:992px){ .seminar-item .seminars-actions{justify-content:flex-start !important;gap:15px !important;} } /* Очищаем margin у кнопок, возвращаем padding 8×16 и border-radius */ .seminar-item .seminars-actions .btn { margin: 0 !important; padding: 8px 16px !important; border-radius: var(--tiny-border-radius) !important; } /* Устанавливаем gap для межкнопочных отступов */ .seminar-item .seminars-actions { gap: 15px !important; } /* Уменьшаем padding у карточки на 25% */ .seminar-item { padding: 23px 30px !important; } @media screen and (max-width: 768px) { .seminar-item { padding: 15px !important; } } /* Коррекция: восстановление padding кнопок */ .seminar-item .seminars-actions .btn { margin: 0 !important; padding: 12px 24px !important; border-radius: var(--tiny-border-radius) !important; }