#page-wrapper                   { display: flex; flex-direction: column; min-height: 100vh; max-width: 2560px; margin: 0 auto; justify-content: space-between; box-sizing: border-box }

header                          { background-color: #1F2324 }

/* ПЛАВАЮЩАЯ ШАПКА -------------------------------------- */

/* Когда только начинается прокрутка */
header.fixed .header                    { position: fixed; }

/* Когда прокрутка чуть пройдёт */
header .header              { transition: background-color 0.5s, box-shadow 0.5s; will-change: background-color, box-shadow }
header .contacts            { transition: height 0.5s; will-change: height }
header .logo-n-menu > div   { transition: height 0.5s, padding-top 0.5s; will-change: height, padding-top }
header .logo img            { background-color: #1F2324; transform: translateY(0); transition: height 0.5s, padding 0.5s, background-color 0.5s, transform 0.5s; will-change: height, padding-top, background-color, transform }
header .menu-mobile         { transform: translateY(0); transition: transform 0.5s }

header.minimized .header { background-color: #313435; box-shadow: 0 0 100px rgba(0, 0, 0, 0.6); }
header.minimized .contacts { height: 34px }
header.minimized .logo-n-menu > div { height: 30px; padding-top: 20px }
header.minimized .logo img { transform: translateY(-40px); height: 34px; background-color: #313435; padding: 10px; border: 1px solid #555 }

@media screen and (max-width: 1023px) {
    header.minimized .menu-mobile { transform: translateY(-11px); }
}
@media screen and (max-width: 567px) {
    header.minimized .contacts a:last-child { display: none }
}
/* /ПЛАВАЮЩАЯ ШАПКА ------------------------------------- */


/* Блок с телефонами, лого и меню ------------------------------------------- */
header .header                  { position: absolute; top: 0; z-index: 99; width: 100%; min-width: 320px; max-width: 2560px; background-color: #1F2324; color: #FFF; box-sizing: border-box }

.max-width                      { width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto }

/* Телефоны в шапке */
header .contacts                { height: 60px; display: flex; align-items: center; justify-content: flex-end }
header .contacts > div          { display: inline-flex; align-items: center }
header .contacts a              { font-size: 16px; line-height: 37px; font-weight: 600; color: #CCC }
header .contacts a:hover        { color: #FFF }
header .contacts a span         { font-weight: 300 }
header .contacts a + a          { margin-left: 20px }
header .contacts .more-contacts                { font-size: 0; line-height: 0; padding: 10px; border-radius: 10px; transform: rotate(90deg) translateY(-12px); cursor: pointer }
header .contacts .more-contacts:before         { font-family: themify; content: "\e6e2"; font-size: 16px; line-height: 16px; color: #CCC; transition: color 0.2s }
header .contacts .more-contacts:hover:before   { color: #FFF }

/* Модал. окно при клике на троеточии у телефона в шапке */
#more-contacts                      { max-width: 800px; text-align: left }

@media screen and (max-width: 767px) {
    #more-contacts                  { max-width: 400px }
    #more-contacts .adapt-blocks    { width: 260px; margin: 0 auto }
}

header .logo-n-menu > div       { position: relative; padding-top: 35px; }


/* СТИЛЬ ОБРАМЛЕНИЯ ШАПКИ ------------------------------- */
header.framed .logo-n-menu > div       {
    background-image: 
    linear-gradient(to right, transparent 20px, #555 20px, #555 calc(100% - 20px), transparent calc(100% - 20px)), /* Верхняя граница с отступом от левого и правого края */
    linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница с отступом от левого края */
    background-size: 
    100% 1px,
    1px 100%;
    background-position:
    0 0,
    20px 0;
    background-repeat: no-repeat }
header.framed .header-content .heading     { 
    background-image: 
    linear-gradient(to bottom, #555 0, #555 100%), /* Левая граница с отступом от левого края */
    linear-gradient(to right, transparent 20px, #555 20px, #555 100%); /* Нижняя граница с отступом от левого края, до половины */
    background-size: 
    1px 100%,
    100% 1px;
    background-position:
    20px 0,
    0 100%;
    background-repeat: no-repeat }
header.lined .logo-n-menu > div,
header.minimized .logo-n-menu > div  {
    background-image: 
    linear-gradient(to right, transparent 20px, #555 20px, #555 calc(100% - 20px), transparent calc(100% - 20px)); /* Верхняя граница с отступом от левого и правого края */
    background-size: 
    100% 1px;
    background-position:
    0 0;
    background-repeat: no-repeat; }
header .logo-n-menu > div:after,
header.lined .logo-n-menu > div:before,
header.minimized .logo-n-menu > div:before,
header.framed .header-content .heading:before   { content: ""; position: absolute; display: block; width: 5px; height: 5px; background: #555; border-radius: 100% }
header .logo-n-menu > div:after                 { right: 20px; top: -2px }
header.lined .logo-n-menu > div:before,
header.minimized .logo-n-menu > div:before      { left: 20px; top: -2px }
header.framed .header-content .heading:before   { right: 0; bottom: -2px }

@media screen and (min-width: 1640px) {
    header.framed .logo-n-menu > div {
        background-image:
        linear-gradient(to right, #555 0, #555 100%), /* Верхняя граница без отступов */
        linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница без отступов */
        background-position:
        0 0,
        0 0; }
    header.framed .header-content .heading { 
        background-image: 
        linear-gradient(to bottom, #555 0, #555 100%), /* Левая граница без отступов */
        linear-gradient(to right, #555 0, #555 100%); /* Нижняя граница без отступов */
        background-position:
        0 0,
        0 100%; }        
    header.lined .logo-n-menu > div,
    header.minimized .logo-n-menu > div {
        background-image:
        linear-gradient(to right, #555 0, #555 100%); /* Верхняя граница без отступов */
        background-position:
        0 0; }
    header .logo-n-menu > div:after { right: 0; top: -2px }
    header.lined .logo-n-menu > div:before,
    header.minimized .logo-n-menu > div:before { left: 0; top: -2px }
}
@media screen and (max-width: 1365px) {
    header.framed .logo-n-menu > div {
        background-image: 
        linear-gradient(to right, transparent 10px, #555 10px, #555 calc(100% - 10px), transparent calc(100% - 10px)), /* Верхняя граница с отступом от левого и правого края */
        linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница с отступом от левого края */
        background-position:
        0 0,
        10px 0; }
    header.framed .header-content .heading {
        background-image: 
        linear-gradient(to bottom, #555 0, #555 100%), /* Левая граница с отступом от левого края */
        linear-gradient(to right, transparent 10px, #555 10px, #555 100%); /* Нижняя граница с отступом от левого края */
        background-position:
        10px 0,
        0 100%; }
    header.lined .logo-n-menu > div,
    header.minimized .logo-n-menu > div {
        background-image: 
        linear-gradient(to right, transparent 10px, #555 10px, #555 calc(100% - 10px), transparent calc(100% - 10px)); /* Верхняя граница с отступом от левого и правого края */
        background-position:
        0 0; }    
    header .logo-n-menu > div:after { right: 10px; top: -2px }
    header.lined .logo-n-menu > div:before,
    header.minimized .logo-n-menu > div:before { left: 10px; top: -2px }
}
@media screen and (max-width: 479px) {
    header.framed .logo-n-menu > div {
        background-image: 
        linear-gradient(to right, transparent 5px, #555 5px, #555 calc(100% - 5px), transparent calc(100% - 5px)), /* Верхняя граница с отступом от левого и правого края */
        linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница с отступом от левого края */
        background-position:
        0 0,
        5px 0;
        background-repeat: no-repeat }
    header.framed .header-content .heading { 
        background-image: 
        linear-gradient(to bottom, #555 0, #555 100%), /* Левая граница с отступом от левого края */
        linear-gradient(to right, transparent 5px, #555 5px, #555 100%); /* Нижняя граница с отступом от левого края */
        background-position:
        5px 0,
        0 100%;
        background-repeat: no-repeat }
    header.lined .logo-n-menu > div,
    header.minimized .logo-n-menu > div {
        background-image: 
        linear-gradient(to right, transparent 5px, #555 5px, #555 calc(100% - 5px), transparent calc(100% - 5px)); /* Верхняя граница с отступом от левого и правого края */
        background-position:
        0 0 }
    header .logo-n-menu > div:after { right: 5px; top: -2px }
    header.lined .logo-n-menu > div:before,
    header.minimized .logo-n-menu > div:before { left: 5px; top: -2px }
}
/* /СТИЛЬ ОБРАМЛЕНИЯ ШАПКИ ------------------------------ */



header .logo                        { flex-grow: 1; font-size: 0; line-height: 0 }
header .logo img                    { height: 45px }

/* кнопка вызова меню каталога на мобильных экранах */ 
.menu-mobile                        { display: none; float: right; cursor: pointer }
.menu-mobile .ti-menu:before        { font-size: 40px; line-height: 30px; color: #BBB; transition: color 0.2s }
.menu-mobile:hover .ti-menu:before  { color: #FFF }

/* Слайдер в шапке главной страницы и в продукции */
header .header-content              { padding-top: 140px; display: flex; box-sizing: border-box; }
header.homepage .header-content     { background: radial-gradient(ellipse 100% 80% at 75% 65%, #575959, #1F2324 50%) }
header.prod .header-content         { background: radial-gradient(ellipse 100% 80% at 50% 70%, #575959, #1F2324 50%) }
header.homepage .header-content,
header.prod .header-content         { min-height: min(100vh, calc(2000px * 9 / 16)); }
header:not(.homepage) .header-content > div { display: grid; grid: 1fr 60px / 50% 50% }
header.homepage .header-content > div { display: grid; grid: 1fr 1fr min-content / 50% 50% }
header.prod .header-content > div   { display: flex; flex-direction: column }

header .header-content .heading     { position: relative; display: flex; align-items: flex-end; padding-top: 50px; padding-bottom: 25px; min-height: 150px }
header .header-content .heading > div,
header .header-content .heading h1   { margin: 0; padding-bottom: 0; color: #FFF; font-size: 50px; line-height: 65px; font-weight: 500; text-align: left; }
header.prod .header-content .heading { background-image: none; min-height: 100px }
header .header-content .heading > div { width: 101% }

header .header-content .subheading   { color: #CCC; font-size: 18px; line-height: 30px; text-align: left; padding-top: 15px }
header .header-content .image        { grid-column: 2 / 3; grid-row: 1 / 3; align-content: center; padding: 0 60px; box-sizing: border-box }

/* Другие свойства блока .panel и его содержимого находятся в includes/css/sliders.css */
header .header-content .panel        { grid-column: 1 / 3 } 

@media screen and (max-width: 1599px) {
    header .header-content .heading         { min-height: 120px }
    header .header-content .heading > div,
    header .header-content .heading h1      { font-size: 40px; line-height: 55px }
}

@media screen and (max-width: 1279px) {
    header .header-content .heading         { min-height: 100px }
    header .header-content .heading > div,
    header .header-content .heading h1      { font-size: 35px; line-height: 48px }
}

@media screen and (max-width: 1023px) {
    header .header-content .heading         { min-height: 90px }
    header .header-content .heading > div,
    header .header-content .heading h1      { font-size: 27px; line-height: 42px }
    header.prod .header-content .heading { min-height: 70px }
}

@media screen and (max-width: 767px) {
    header.homepage .header-content     { background: radial-gradient(ellipse 175% 50% at 50% 75%, #575959, #1F2324 50%) }
    header:not(.homepage) .header-content > div { grid: 1fr 50px / 100% }
    header.homepage .header-content > div { grid: min-content min-content 1fr min-content / 100% }
    header .header-content .heading       { min-height: 60px; width: 75%; padding-bottom: 15px; }
    header .header-content .heading > div,
    header .header-content .heading h1     { font-size: 24px; line-height: 36px; }
    header .header-content .subheading  { font-size: 16px; line-height: 27px; width: 75%; padding-top: 5px }
    header .header-content .image       { grid-column: 1 / 2; grid-row: 3 / 4; padding: 0; position: relative; overflow: hidden; min-height: 200px; margin: 0 20px; }
    header .header-content .image .slides-frame { position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; aspect-ratio: 3 / 2; width: auto; max-width: 100% }
    header .header-content .image .slides-wrapper { top: 50%; transform: translateY(-50%); }
    header .header-content .panel       { grid-column: 1 / 2 }
}

@media screen and (max-width: 639px) {
    header .header-content               { padding-top: 130px }
    header .logo-n-menu > div           { padding-top: 30px }

    header .logo img                    { height: 40px }
    .menu-mobile .ti-menu:before        { font-size: 35px }

    header .header-content .heading > div,
    header .header-content .heading h1     { font-size: 22px; line-height: 33px }
    header .header-content .subheading  { font-size: 15px; line-height: 26px }
}

@media screen and (max-width: 479px) {
    header .contacts                    { height: 50px }
    header .contacts a                  { font-size: 14px; line-height: 30px }
    header .contacts a + a              { margin-left: 15px }

    header .header-content              { padding-top: 100px }
    header:not(.homepage) .header-content > div { grid: 1fr 40px / 1fr }
    header .logo-n-menu > div           { padding-top: 20px; }

    header .logo img                    { height: 30px }
    .menu-mobile .ti-menu:before        { font-size: 30px }
    
    header .header-content .heading     { padding-top: 30px; width: 85%; min-height: 60px }
    header .header-content .heading > div,
    header .header-content .heading h1     { font-size: 18px; line-height: 27px; font-weight: bold }
    header .header-content .subheading  { font-size: 14px; line-height: 22px }
}

@media screen and (max-width: 359px) {
    header .header-content .heading,
    header .header-content .heading h1     { font-size: 16px; line-height: 22px }
    header .header-content .subheading  { font-size: 13px; line-height: 19px }
}



main                            { flex-grow: 1; margin: 0 auto; width: 100%; min-width: 320px; padding-top: 50px; padding-bottom: 60px; background-image: linear-gradient(to bottom, rgb(0 0 0 / .15), transparent 80px); background-repeat: no-repeat; }
main.homepage, 
main.prod,
main.contacts, 
main.examples                   { padding-top: 0; padding-bottom: 0 }



footer                          { width: 100% }

footer .contacts                { background: #EEE; padding: 70px 0 50px; /*background-image: linear-gradient(to top, rgb(0 0 0 / .15), transparent 80px); background-repeat: no-repeat */}

footer .footer                  { background-color: #1F2324; color: #999; padding-top: 60px }
footer .footer p                { margin: 20px 0 }
footer .copyright               { padding: 20px 0 30px 0; position: relative; 
    background-image: 
    linear-gradient(to right, transparent 20px, #555 20px, #555 50%, transparent 50%), /* Верхняя граница с отступом от левого края, до половины */
    linear-gradient(to right, transparent 20px, #555 20px, #555 calc(100% - 20px), transparent calc(100% - 20px)), /* Нижняя граница с отступом от левого и правого края */
    linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница с отступом от левого края */
    background-size: 
    100% 1px,
    100% 1px,
    1px 100%;
    background-position:
    100% 0,
    0 100%,
    20px 0;
    background-repeat: no-repeat }

/* Точки на конце линий */
footer .copyright:before,
footer .copyright:after      { content: ""; position: absolute; display: block; width: 5px; height: 5px; background: #555; border-radius: 100% }
footer .copyright:before     { left: 50%; top: -2px }
footer .copyright:after      { right: 20px; bottom: -2px }

/* Лого + линк на головной сайт */
footer .footer_bottom-line      { padding: 20px 0 }
footer .footer_bottom-line > div { display: flex; justify-content: space-between; gap: 50px; align-items: center; padding-top: 20px; padding-bottom: 20px; line-height: 0 }
footer .footer_bottom-line img  { height: 30px }
footer .footer_bottom-line .headcompany-link { padding-left: 30px; line-height: 16px !important }
footer .footer_bottom-line .headcompany-link:before { font: 16px/16px themify; content: '\e732'; position: absolute; margin-left: -30px; margin-top: -1px }

@media screen and (min-width: 1640px) {
    footer .copyright               {
        background-image:
        linear-gradient(to right, #555 0, #555 50%, transparent 50%), /* Верхняя граница без отступов, до половины */
        linear-gradient(to right, #555 0, #555 100%), /* Нижняя граница без отступов */
        linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница без отступов */
        background-position:
        100% 0,
        0 100%,
        0 0; }
    footer .copyright:after         { right: 0; bottom: -2px }
}

@media screen and (max-width: 1365px) {
    footer .contacts                { padding: 60px 0 45px }

    footer .copyright               {
        background-image: 
        linear-gradient(to right, transparent 10px, #555 10px, #555 50%, transparent 50%), /* Верхняя граница с отступом от левого края, до половины */
        linear-gradient(to right, transparent 10px, #555 10px, #555 calc(100% - 10px), transparent calc(100% - 10px)), /* Нижняя граница с отступом от левого и правого края */
        linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница с отступом от левого края */
        background-position:
        100% 0,
        0 100%,
        10px 0; }
    footer .copyright:after         { right: 10px; bottom: -2px }
}

@media screen and (max-width: 767px) {
    footer .footer                  { padding-top: 40px }

    footer .contacts                { padding: 50px 0 35px }

    footer .copyright               { padding: 5px 0 10px 0;
        background-image: 
        linear-gradient(to right, transparent 10px, #555 10px, #555 75%, transparent 75%), /* Верхняя граница с отступом от левого края, до 3/4 длины */
        linear-gradient(to right, transparent 10px, #555 10px, #555 calc(100% - 10px), transparent calc(100% - 10px)), /* Нижняя граница с отступом от левого и правого края */
        linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница с отступом от левого края */ }
    footer .copyright:before        { left: 75%; top: -2px }
    
    footer .footer_bottom-line      { padding: 5px 0 }
}

@media screen and (max-width: 479px) {    
    footer .contacts                { padding: 40px 0 25px }

    footer .copyright               {
        background-image: 
        linear-gradient(to right, transparent 5px, #555 5px, #555 75%, transparent 75%), /* Верхняя граница с отступом от левого края, до половины */
        linear-gradient(to right, transparent 5px, #555 5px, #555 calc(100% - 5px), transparent calc(100% - 5px)), /* Нижняя граница с отступом от левого и правого края */
        linear-gradient(to bottom, #555 0, #555 100%); /* Левая граница с отступом от левого края */
        background-position:
        100% 0,
        0 100%,
        5px 0; }
    footer .copyright:after         { right: 5px; bottom: -2px }
}



/* кнопка "наверх" */
#up-btn                         { position: fixed; bottom: 0; z-index: 99; left: 100%; margin-left: -90px; width: 60px; height: 60px; border-radius: 30px; background: #2B2A29; color: #FFF; cursor: pointer; visibility: hidden; opacity: 0 }
#up-btn.visible                 { bottom: 40px; visibility: visible; opacity: 0.75 }
#up-btn:hover                   { opacity: 1 }
#up-btn div                     { margin: 0 18px; font-size: 24px; line-height: 60px; font-weight: bold }
#up-btn div:before              { font-family: themify; content: "\e648" }

@media screen and (max-width: 479px) {
    #up-btn                         { width: 40px; height: 40px; border-radius: 20px; margin-left: -50px }
    #up-btn.visible                 { bottom: 10px }
    #up-btn div                     { margin: 0 10px; font-size: 20px; line-height: 40px; font-weight: normal }
}

/* хлебные крошки */
.breadcrumbs                    { font-size: 16px; line-height: 22px; margin-bottom: 45px }
.breadcrumbs .ti-home           { color: #999; font-size: 22px; vertical-align: baseline }
.breadcrumbs .delimiter:before  { font-family: themify; content: "\e649"; color: #999; margin: 0 10px; font-size: 12px }
.breadcrumbs a                  { color: #999 }
.breadcrumbs a:hover,
.breadcrumbs .homepage:hover span { color: #666 }
.no-breadcrumbs                 { height: 30px }

/* обычно в модальном окне, или в ответе об успехе отправки, если форма была не модальной */
.heading                        { font-size: 40px; line-height: 50px; color: #000; font-weight: 500; text-align: center; margin: 0 0 10px }
.subheading                     { font-size: 30px; line-height: 38px; color: #000; text-align: center; margin: 10px 0 }

@media screen and (max-width: 767px) {
    .heading                        { font-size: 32px; line-height: 40px }
    .subheading                     { font-size: 24px; line-height: 32px }
}
@media screen and (max-width: 479px) {
    .heading                        { font-size: 28px; line-height: 36px }
    .subheading                     { font-size: 22px; line-height: 30px }
}

.video                          { position: relative; margin: 30px 0; aspect-ratio: 16/9 }
.video iframe, 
.video video,
.video .video-js                { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px }
.ratio_16-9                     { aspect-ratio: 16/9 }
.ratio_1-1                      { aspect-ratio: 1/1 }




/* контакты в модал. окне, контакты в подвале ------------------------------- */
.contacts [class^="ti-"]:before, 
.contacts [class*=" ti-"]:before,
.contacts .icon:before              { text-shadow: 1px 1px 0 #FFF }

.contact-block                      { padding-left: 40px; padding-bottom: 20px; margin-top: 10px; text-align: left; line-height: 26px }
.contact-block.tel > div > div      { display: inline-block; text-align: right }
.contact-block.tel a                { font-weight: bold }
.contact-block.tel a > span         { font-weight: 500 }
.contact-block:before               { position: absolute; margin-left: -40px; margin-top: 6px }
.contact-block.small:before         { margin-top: 3px }
.contact-block.tel:before           { content: '\e621' }
.contact-block.email:before         { content: '\e75a' } 
.contact-block.work-hours:before    { content: '\e72b'; margin-top: 3px }
.contact-block.addr:before          { content: '\e693' }
.contact-block.references:before    { content: '\e699' } 
.contact-block button               { margin: 20px 0 0 0 !important }
.contact-block a                    { font-weight: 500; font-size: 20px; line-height: 33px; display: block }
.contact-block.email a              { letter-spacing: 1px }

.contact_form_wrapper               { padding-bottom: 20px; transition: min-height 0.2s }
.contact_form_wrapper .h2           { display: none }
.contact_form_wrapper button        { margin-top: 35px; float: left }
.contact_form_wrapper .privacy-note { margin-left: 280px; margin-top: 35px; max-width: 350px }

.contact_form_wrapper .adapt-blocks > * { margin-top: 0 }
    
.contact_form_success,
.contact_form_fail                  { margin: 50px 0; text-align: center }
.contact_form_success button,    
.contact_form_fail button           { float: none; margin-top: 30px }

.contact_from_last                  { padding-top: 10px }

.contact_form_wrapper .attachment-btn                     { cursor: pointer; float: left; margin-top: 30px; padding-bottom: 0 }
.contact_form_wrapper .attachment-btn:before              { content: '\e63e'; margin-top: 3px }
.contact_form_wrapper .attachment-btn + input             { position: absolute; left: -999px; z-index: -1; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0 }
.contact_form_wrapper .attachment-note                    { display: flex; gap: 0 20px; flex-wrap: wrap; margin: 30px 0 0 280px; line-height: inherit !important }
.contact_form_wrapper .attachment-size                    { color: #000; white-space: nowrap; font-weight: bold }
.contact_form_wrapper .attachment-list                    { color: #000; padding: 5px 15px; margin-top: 10px; background: #E8E8E8; border-radius: 10px }
.contact_form_wrapper .attachment-list p                  { margin: 5px 0; word-wrap: break-word; text-align: left }
.contact_form_wrapper .attachment-remove:before           { font-family: themify; font-size: 100%; line-height: inherit; padding-left: 10px; vertical-align: bottom; content: '\e646'; color: #E9323C; font-weight: bold; cursor: pointer }
.contact_form_wrapper .sending-note                       { color: #000; margin-top: 30px }

/* В случае открытия формы в модальном режиме */
.modal.contact_form_wrapper .attachment-note { flex-direction: column; margin-left: 0; text-align: right }
.modal.contact_form_wrapper button          { float: none }
.modal.contact_form_wrapper .privacy-note   { margin-left: 0; margin-top: 30px; max-width: none }

@media screen and (max-width: 1365px) {
    .contact-block.small:before         { margin-top: 1px }
}
@media screen and (max-width: 1279px) {
    .attachment-btn                     { float: none }
    .attachment-note                    { margin-left: 40px; margin-top: 8px }
    .contact_form_wrapper button        { float: none }
    .contact_form_wrapper .privacy-note { margin-left: 0px; margin-top: 15px }
}
@media screen and (max-width: 767px) {
    .contact_form_wrapper .h2           { display: block; padding-top: 30px }
    .modal.contact_form_wrapper .h2     { display: none }
}
@media screen and (max-width: 639px) {
    .contact_form_wrapper button            { margin-top: 25px; float: none }
    .contact_form_wrapper .privacy-note     { margin-left: 0; margin-top: 15px; max-width: none }
    .contact_form_wrapper .attachment-btn   { float: none; margin-top: 20px }
    .contact_form_wrapper .attachment-note  { margin: 10px 0 0 0 }
    .modal.contact_form_wrapper .attachment-note { text-align: left }
}
@media screen and (max-width: 479px) {
    .contact_form_wrapper .attachment-btn   { font-size: 20px; line-height: 20px }
}
/* контакты в модал. окне, контакты в подвале ------------------------------- */



/* уведомление 
<div class="notice">
    <div class="ti-close"></div>
    <div class="alert">[сообщение]</div>
</div> */
.notice                         { position: relative; overflow: hidden }
.notice [class="ti-close"]      { float: right; padding: 15px; color: #000; cursor: pointer }

/* накладываем полупрозрачный слой на элемент под вид его дезактивации */
.overlay                        { position: absolute; z-index: 1000; background: rgb(238 238 238 / .5) }

/* иконка загрузки */
.preload-icon                   { width: 20px; height: 20px }

/* Накладываем на страницу фон (например, под модальное окно)
   Светлый:
    background: #FFF
    opacity: 0.9 */
#page-overlay                   { display: none; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; position: fixed; z-index: 998; background: #000; transition: opacity 1s }
#page-overlay.active            { display: block; opacity: 0.65 }

/* Всплывающие подсказки 
   <span class="tooltip">Текст подсказки</span> */
.tooltip                        { display: inline-block; vertical-align: middle; font-size: 0; line-height: 0 }
.tooltip:before                 { font-family: themify; font-size: 17px; font-weight: normal; content: '\e718'; display: inline-block; width: 20px; height: 20px; color: #CCC; cursor: pointer; position: absolute; margin: 0 0 0 10px; transition: all 0.2s }
@media (hover: hover) { .tooltip:hover:before { color: #BC3F21 }}
.tooltip-popup                  { position: absolute; z-index: 999; width: 280px; background: #FFF; border-radius: 10px; box-shadow: 0 0 25px rgb(0 0 0 / .2); font-size: 14px; line-height: 18px; opacity: 0; margin-top: -10px; transition: opacity 0.2s, margin-top 0.2s }
.tooltip-popup > div            { position: relative; z-index: 1; padding: 10px 15px 10px 15px }
.tooltip-popup .close           { float: right; position: relative; z-index: 2; cursor: pointer }
.tooltip-popup .close:before    { font-family: themify; font-size: 17px; line-height: 17px; display: block; width: 17px; height: 17px; padding: 10px; color: #999; content: '\e646' }
.tooltip-popup .tail            { position: absolute; bottom: -11px; right: 0; border: 10px solid transparent; border-top: 10px solid #FFF; border-right: 10px solid #FFF }
.tooltip-popup.left .tail       { position: absolute; bottom: -11px; left: 0; right: auto; border: 10px solid transparent; border-top: 10px solid #FFF; border-left: 10px solid #FFF }
.tooltip-popup.middle .tail     { position: absolute; bottom: -4px; right: 35px; border: none; background: #FFF; display: block; width: 15px; height: 15px; transform: rotate(-45deg); transform-origin: top right; box-shadow: 0 0 10px rgb(0 0 0 / .1) }
.tooltip-popup.middle .tail:after { content: ''; display: block; position: absolute; width: 30px; height: 30px; background: #FFF; bottom: -2px; left: -2px; transform: skew(20deg, 20deg) }

.cover                          { background-size: cover; background-repeat: no-repeat; background-position: center center }
.contain                        { background-size: contain; background-repeat: no-repeat; background-position: center center }
.smooth                         { transition: all 0.2s }
.smooth-slow                    { transition: all 0.3s }
.smooth-slower                  { transition: all 0.4s }
.smooth-very-slow               { transition: all 1s }
.clear                          { clear: both }
.blur                           { filter: blur(5px) }


/* ссылки на страницы при постраничном выводе контента */
.list-page-link             { display: block; float: left; width: 40px; height: 40px; text-align: center; background: #EEE; color: #555; font: normal 22px/40px 'Roboto Condensed', sans-serif; text-decoration: none; border-radius: 20px; cursor: pointer; margin: 0 8px; transition: all 0.1s }
.list-page-link:hover       { background: #DDD; color: #000; text-decoration: none }
.list-page-link.back,       
.list-page-link.next        { color: #D8A300; background: none; margin: 0 3px }
.list-page-link.back:before,
.list-page-link.next:before { position: absolute; margin-left: -17px; background: none; font: 34px/40px themify; content: "\e64a"; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s }
.list-page-link.next:before { content: "\e649" }
.list-page-link.back:hover:before,
.list-page-link.next:hover:before { color: #EBBD43; margin-left: -22px; }
.list-page-link.next:hover:before { margin-left: -12px }
.list-page-link.disabled:hover:before { margin-left: -17px }
.list-page-link.disabled,
.list-page-link.disabled:hover,
.list-page-link.disabled:before,
.list-page-link.disabled:hover:before { color: #DDD; cursor: default }
/*.list-page-link.disabled:hover:before { margin: 0 }*/
.list-page-link.active      { background: #D8A300; color: #FFF; cursor: default }
/* /ссылки на страницы при постраничном выводе контента */