@charset "UTF-8";

body {
    z-index: 1; /*1 слой*/
}

h1 { /*ссылки меню*/
    color: #fff;
    font: normal 1.2em/1.2 Georgia, Impact; /*шрифт*/
    letter-spacing: 4px; /*расстояние между символами*/
    margin-top: 0; /*отступ сверху*/
    text-shadow: 1px 0 2px #ccc,
    2px 1px 3px #999,
    3px 2px 4px #666,
    4px 3px 5px #333,
    5px 4px 6px #000,
    1px 0 2px rgba(0, 0, 0, .9),
    2px 1px 3px rgba(0, 0, 0, .8),
    3px 2px 4px rgba(0, 0, 0, .9),
    4px 3px 5px rgba(0, 0, 0, .8),
    5px 4px 6px rgba(0, 0, 0, .9); /*свойства теней*/
    z-index: 3; /*1 слой*/
}

h1:hover { /*ссылки меню*/
    color: #fc9; /*цвет букв при наведении*/
}

h3 {
    font: bold 1em Trebuchet MS, Tahoma; /*шрифт*/
    margin-top: 0; /*внешние отступы*/
}

.nav { /*тулбар навигации*/
    background-image: linear-gradient(top, #cff 0%, #0cf 100%); /*градиент фона*/
    background-image: -moz-linear-gradient(top, #cff 0%, #0cf 100%); /*градиент для мозилы*/
    background-image: -ms-linear-gradient(top, #cff 0%, #0cf 100%); /*градиент для эксплоера*/
    background-image: -o-linear-gradient(top, #cff 0%, #0cf 100%); /*градиент для оперы*/
    background: -webkit-linear-gradient(top, #cff 0%, #0cf 100%); /*градиент сверху вниз для хрома*/
    box-shadow: 1px 1px 1px 1px rgba(0, 255, 255, 1) inset, 1px 1px 2px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 1px 2px rgba(255, 255, 255, .7);
    -moz-box-shadow: 1px 1px 1px 1px rgba(0, 255, 255, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 255, 255, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    float: top; /*примыкание сверху*/
    height: 30px; /*высота блока*/
    position: relative; /*фиксированная*/
    top: 1px; /*отступ сверху тулбара*/
    width: 99%; /*длина тулбара*/
}

.nav ul { /*свойства списка навигации*/
    float: left; /*примыкание слева*/
    list-style: none; /*маркеры списка отсутствуют*/
    margin: 0; /*внешние отступы*/
    width: 100%; /*длина блока*/
}

.nav li { /*свойства блоков меню*/
    border: 1px solid #999; /*толщина рамки цвет*/
    display: inline-block; /*отображаются в линию*/
    float: left; /*примыкание слева*/
    margin: 2px 2em 0 3em; /*внешние отступы для всех блоков*/
}

element.style {
}

h1 {
    color: #fff;
    font: normal 1.2em/1.2 Georgia, Impact;
    letter-spacing: 4px;
    margin-top: 0;
    text-shadow: 1px 0 2px #ccc, 2px 1px 3px #999, 3px 2px 4px #666, 4px 3px 5px #333, 5px 4px 6px #000, 1px 0 2px rgb(0 0 0 / 90%), 2px 1px 3px rgb(0 0 0 / 80%), 3px 2px 4px rgb(0 0 0 / 90%), 4px 3px 5px rgb(0 0 0 / 80%), 5px 4px 6px rgb(0 0 0 / 90%);
    z-index: 3;
}

h1#activ {
    color: #ff0; /*цвет букв*/
}

#ac { /*активная страница*/
    background-color: rgba(255, 255, 255, .7); /*фон*/
}

.nav a { /*свойства навигации ссылок*/
    color: #fff; /*цвет букв*/
    cursor: pointer; /*курсор как указатель*/
    display: inline-block; /*отображаются строчно со свойствами блока*/
    float: left; /*примыкание слева*/
    height: 25px; /*высота блока*/
    margin-right: 20px; /*внешние отступы*/
    padding: 0 30px; /*внутренние отступы букв*/
    position: relative; /*позиционирование варьируется*/
    text-align: center; /*выравнивание текста по центру*/
    text-decoration: none; /*у ссылок нет подчёркивания*/
    width: 200px; /*длина блока*/

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.nav a:hover { /*свойства ссылок при наведении*/
    background-color: rgba(255, 255, 255, .8); /*картинка*/
    color: #fc9; /*цвет букв при наведении*/
}

/*/конец тулбара*/

label.btn { /*Переключатель верхней панели*/
    background: #f93; /*цвет фона*/
    border-radius: 0 0 5px 5px; /*закругление границ*/
    -moz-border-radius: 0 0 5px 5px; /*закругление границ для всех браузеров*/
    -webkit-border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3), 0 2px 8px 0 rgba(0, 0, 0, .2);
    color: #fff; /*цвет текста*/
    cursor: pointer; /*курсор указатель*/
    display: block; /*блочный элемент*/
    font: 20px "Trebuchet MS", "Arial Narrow"; /*размер и тип шрифта*/
    padding: 5px; /*отступы от границ внутри блока*/
    position: absolute; /*положение абсолютное*/
    right: 10px; /*отступ справа*/
    text-align: center; /*выравнивание текста по центру*/
    top: 0; /*отступ сверху*/
    -webkit-font-smoothing: antialiased; /*среднее сглаживание шрифта*/
    width: 40px; /*ширина блока*/
    z-index: 112; /*видимость слоя*/
}

label.btn:hover { /*Переключатель при наведении*/
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2), 0 6px 15px 0 rgba(0, 0, 0, .2);
}

.top-panel { /*Базовый контейнер выдвижной панели*/
    background: radial-gradient(#ccc, #333);
    background: -moz-radial-gradient(#ccc, #333);
    background: -o-radial-gradient(#ccc, #333);
    background: -ms-radial-gradient(#ccc, #333);
    background: -webkit-radial-gradient(#ccc, #333);
    position: absolute; /*положение абсолютное*/
    top: -1600px; /*подожение сверху*/
    left: 0; /*подожение слева*/
    height: auto; /*высота блока*/
    padding: 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3), 0 2px 8px 0 rgba(0, 0, 0, .2);
    transition-timing-function: ease;
    z-index: 111; /*видимость слоя*/
}

.open:checked ~ .top-panel { /*Активация панели*/
    top: 0;
}

.open:checked ~ .main { /*Смещение контейнера контента страницы*/
    margin-top: 1600px;
}

.open:checked + label.btn { /*Цвет переключателя при клике*/
    background: #c06;
}

.main { /*центральный блок контента*/
    width: 99%; /*длина блока*/
    margin: 0 auto; /*внешние отступы*/
    transition-timing-function: ease;
    padding: .2em;
}

.myframe { /*блок фрейма*/
    border: 1px solid #00f; /*толщина рамки цвет*/
    background-color: #fff;
    float: left; /*примыкание слева*/
    margin: 2px; /*внешние отступы*/
    width: 490px; /*минимальная длина блока*/
    position: relative; /*позиционирование варьируется*/
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 1px 2px rgba(255, 255, 255, .7);
    -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
}

.web { /*панель ссылок*/
    background-color: rgba(255, 255, 255, .9); /*фон*/
    border: 1px solid #333;
    float: left; /*примыкание слева*/
    height: 150px; /*высота блока*/
    list-style: none;
    width: 100%; /*минимальная длина блока*/
    padding: 10px;
    position: relative; /*позиционирование варьируется*/
    box-shadow: 1px 1px 1px 1px rgba(255, 255, 0, 1) inset, 1px 1px 2px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 1px 2px rgba(255, 255, 255, .7);
    -moz-box-shadow: 1px 1px 1px 1px rgba(255, 255, 0, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(255, 255, 0, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
}

.web li {
    font-size: 100%;
}

.web a {
    color: #f0f;
    text-decoration: none;
}

.cl { /*колонки контента и ссылок*/
    border: 0 solid #f00; /*толщина рамки цвет*/
    float: left; /*примыкание слева*/
    position: relative; /*позиционирование варьируется*/
    box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 1) inset, 1px 1px 2px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 1px 2px rgba(255, 255, 255, .7);
    -moz-box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    margin: 2px; /*внешние отступы*/
}

section {
    display: block;
}

.ac-container { /*контейнер меню*/
    width: 99%; /*длина блока*/
    margin: 10px auto; /*по цетру*/
    text-align: left; /*текст вкладок слева*/
}

.ac-container label { /*заголовки вкладок*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #fff), color-stop(100%, #ccc));
    border-radius: 30px 10px;
    box-shadow: /*тень боксов вкладок*/ 2px 0 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 1px rgba(0, 0, 0, 0.7),
    0 2px 2px rgba(153, 153, 153, .5);
    cursor: pointer; /*указатель курсора*/
    display: block; /*видится как блоки*/
    height: 20px; /*высота блока*/
    letter-spacing: 2px;
    margin-bottom: 7px;
    position: relative; /*позиционирование варьируется*/
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); /*тень букв*/
    z-index: 2; /*видимый слой*/
}

.ac-container label:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #fff), color-stop(100%, #fcc));
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover {
    background: #6cc; /*фон открытой закладки*/
    color: #f33; /*цвет текста закладки*/
    font-weight: bolder;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.9); /*тень букв*/
    box-shadow: /*тень закладки*/ 0 1px 1px rgba(0, 0, 0, .9),
    0 2px 2px rgba(153, 153, 153, .7);
}

.ac-container label:after, /*стрелки*/
.ac-container input:checked + label:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 10px;
    top: -1px;
    background: transparent url(../img/arrow_down.png) no-repeat center center; /*стрелка вниз*/
}

.ac-container input:checked + label:after {
    background-image: url(../img/arrow_up.png); /*стрелка вверх*/
}

.ac-container input {
    display: none; /*закладки изначально не видны*/
}

.ac-container article { /*артикль закладки*/
    background: rgba(255, 255, 255, 0.5); /*фон закладки*/
    height: 0; /*закладки изначально не видны*/
    margin-top: -1px; /*отступ верх, невидно границ*/
    overflow: hidden; /*выступающее не видно*/
    position: relative; /*позиционирование варьируется*/
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear; /*анимация выдвижения*/
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.ac-container input:checked ~ article { /*анимация выдвижения закладки*/
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3);
}

.ac-container input:checked ~ article.ac-large { /*большой параграф*/
    height: 100%;
    margin-bottom: 3px; /*отступ верх, невидно границ*/
    z-index: auto; /*видимый слой*/
}

.sp { /*блок списка группы*/
    margin: 0; /*внешние отступы*/
    padding: 0; /*внутренние отступы*/
}

.sp ul { /*список группы */
    border: 1px solid #f0f; /*толщина рамки цвет*/
    float: left; /*примыкание слева*/
    list-style: none; /*маркеры списка отсутствуют*/
    margin: 0; /*внешние отступы*/
    padding: 0; /*внутренние отступы*/
}

.sp li { /*пункт списка*/
    outline: 2px outset #999; /*толщина рамки цвет*/
    display: inline; /*отображаются в линию*/
    float: left; /*примыкание слева*/
    margin: 3px; /*внешние отступы для всех блоков*/
    position: relative; /*позиционирование варьируется*/
}

.sp li a { /*свойства пункта ссылки*/
    background-color: rgba(255, 255, 255, .9); /*фон*/
    color: #336; /*цвет букв*/
    cursor: pointer; /*курсор как указатель*/
    display: inline-block; /*отображаются строчно со свойствами блока*/
    float: left; /*примыкание слева*/
    height: 1.2em; /*высота блока*/
    margin: 0; /*внешние отступы*/
    padding: 1px; /*внутренние отступы букв*/
    position: relative; /*позиционирование варьируется*/
    text-align: center; /*выравнивание текста по центру*/
    text-decoration: none; /*у ссылок нет подчёркивания*/
    width: 100%; /*длина блока*/
}

.sp li a:hover { /*свойства ссылок при наведении*/
    background-color: rgba(204, 255, 255, .7); /*фон*/
    color: #f66; /*цвет букв при наведении*/
    outline: 2px inset #999; /*толщина рамки цвет*/
    text-shadow: 1px 1px 1px rgba(204, 204, 204, .8); /*тень смещение размытие цвет прозрачность*/
}

.sp li a:hover::after { /*свойства блока контекста ссылки при наведении*/
    background: rgba(53, 53, 53, .8); /*Полупрозрачный цвет фона*/
    border: 1px solid #f60; /*толщина рамки цвет*/
    border-radius: 10px; /*радиус закругления углов*/
    box-shadow: 1px 1px 1px 1px rgba(255, 255, 204, 1) inset, 1px 1px 2px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 1px 2px rgba(255, 255, 255, .7);
    -moz-box-shadow: 1px 1px 1px 1px rgba(255, 255, 204, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(255, 255, 204, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    color: #fff; /*цвет текста*/
    content: attr(data-title); /*Выводим текст*/
    font: normal 1.4em/1.2 Trebuchet MS, Tahoma; /*Гарнитура шрифта*/
    font-size: 100%;
    left: 2%; /*Положение слева*/
    letter-spacing: 1px;
    top: 14%; /*Положение от верха*/
    padding: 10px; /*Внутренний отступ*/
    position: fixed; /*Абсолютное позиционирование*/
    z-index: 99; /*Отображаем подсказку поверх других элементов*/
}

.cn { /*Переключатель правой панели*/
    float: right; /*примыкание справа*/
    position: relative; /*позиционирование варьируется*/
    width: 2%; /*длина блока*/
}

label.but { /*Переключатель правой панели*/
    background: #f93; /*цвет фона*/
    border-radius: 5px 0 0 5px; /*закругление границ*/
    -moz-border-radius: 5px 0 0 5px; /*закругление границ для всех браузеров*/
    -webkit-border-radius: 5px 0 0 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3), 0 2px 8px 0 rgba(0, 0, 0, .2);
    color: #fff; /*цвет текста*/
    cursor: pointer; /*курсор указатель*/
    display: block; /*блочный элемент*/
    font: 20px "Trebuchet MS", "Arial Narrow"; /*размер и тип шрифта*/
    padding: 5px; /*отступы от границ внутри блока*/
    position: fixed; /*положение фиксированное*/
    right: 0; /*отступ справа*/
    text-align: center; /*выравнивание текста по центру*/
    top: 50px; /*отступ сверху*/
    -webkit-transition-duration: 0.5s; /*анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-font-smoothing: antialiased; /*среднее сглаживание шрифта*/
    width: 60px; /*ширина блока*/
    z-index: 114; /*видимость слоя*/
}

label.but:hover { /*Переключатель при наведении*/
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2), 0 6px 15px 0 rgba(0, 0, 0, .2);
}

.right-panel { /*правая панель*/
    background-color: rgba(204, 204, 204, .8); /*фон*/
    color: #333; /*цвет текста*/
    height: 90%; /*высота блока*/
    overflow: scroll; /*Добавляем полосы прокрутки*/
    padding: 10px; /*отступы от границ внутри блока*/
    position: fixed; /*положение фиксированное*/
    right: -2400px; /*отступ слева*/
    text-align: left; /*выравнивание текста*/
    top: 52px; /*отступ сверху*/
    -webkit-transition-duration: 0.5s; /*анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
    width: 80%; /*ширина блока*/
    z-index: 113; /*видимость слоя*/
}

.open:checked ~ .right-panel { /*Активация панели*/
    right: 0;
}

.open:checked ~ label.but {
    background: #c06;
    right: 80%; /*отступ справа*/
}

.c { /*панель видео*/
    background-color: rgba(255, 255, 255, 1); /*прозрачность фона*/
    border: 1px solid #000; /*толщина рамки цвет*/
    cursor: pointer;
    font: normal 1em Arial Narrow, Helvetica; /*жирность размер шрифт текста*/
    float: left; /*примыкание слева*/
    letter-spacing: 1px; /*расстояние между символами*/
    margin: 2px; /*внешние отступы*/
    padding: 2px; /*внутренние отступы букв*/
    position: relative; /*позиционирование варьируется*/
    width: 100%; /*длина блока*/
    z-index: 112; /*видимость слоя*/
}

summary:hover { /*строки названий видео*/
    background-color: rgba(51, 255, 153, 1); /*прозрачность фона*/
    color: #f39;
}

@media (min-width: 992px) {
    .container {
        max-width: 992px
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px
    }
}

body {
    font-size: 17px;
    line-height: 24px;
    font-family: sans-serif;
    color: #333
}

button {
    outline: 0;
    cursor: pointer
}

button:focus {
    outline: 0
}

input {
    outline: 0
}

input:focus {
    outline: 0
}

header .header {
    padding-top: 20px;
    padding-bottom: 18px
}

header .header .logo-block {
    width: 524px
}

header .header .logo-block img {
    margin-right: 28px
}

header .header .logo-block span {
    font-size: 19px;
    display: block;
    margin-bottom: -5px
}

header .header .contacts .tel-block {
    margin-right: 28px;
    margin-bottom: -5px
}

header .header .contacts .tel-block img {
    margin-right: 13px
}

header .header .contacts .tel-block div a {
    font-size: 28px;
    color: #003955;
    font-family: sans-serif;
    display: block
}

header .header .contacts .tel-block div a:hover {
    text-decoration: none
}

header .header .contacts .tel-block div span {
    color: #003955;
    display: block
}

header .header .contacts button {
    width: 172px;
    height: 48px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 14px;
    background: #0188cc;
    border: none;
    color: #fff;
    text-transform: uppercase
}

header .header .contacts button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#0188cc), to(#69b9e1));
    background: -webkit-linear-gradient(top, #0188cc 0, #69b9e1 100%);
    background: -o-linear-gradient(top, #0188cc 0, #69b9e1 100%);
    background: linear-gradient(180deg, #0188cc 0, #69b9e1 100%)
}

header nav {
    padding: 2px 0;
    width: 100%;

    background-image: linear-gradient(top, #cff 0%, #0cf 100%); /*градиент фона*/
    background-image: -moz-linear-gradient(top, #cff 0%, #0cf 100%); /*градиент для мозилы*/
    background-image: -ms-linear-gradient(top, #cff 0%, #0cf 100%); /*градиент для эксплоера*/
    background-image: -o-linear-gradient(top, #cff 0%, #0cf 100%); /*градиент для оперы*/
    background: -webkit-linear-gradient(top, #cff 0%, #0cf 100%); /*градиент сверху вниз для хрома*/
    box-shadow: 1px 1px 1px 1px rgba(0, 255, 255, 1) inset, 1px 1px 2px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 1px 2px rgba(255, 255, 255, .7);
    -moz-box-shadow: 1px 1px 1px 1px rgba(0, 255, 255, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 255, 255, 1) inset, 1px 1px 1px 1px rgba(0, 0, 0, .9), 1px 1px 1px 2px rgba(204, 204, 204, .8), 2px 2px 2px 2px rgba(255, 255, 255, .7);
}

header nav a {
    border: 1px solid #999; /*толщина рамки цвет*/
    padding: 2px 40px 0 40px;
    margin-right: 5px;
    margin-top: 2px;
    text-align: center;
}

header nav a:hover {
    color: #fc9; /*цвет букв при наведении*/
    background-color: rgba(255, 255, 255, .8); /*картинка*/
    text-decoration: none;
}

header nav.stickytop {
    position: fixed;
    top: 0;
    z-index: 300
}

main .first-block {
    -webkit-background-size: cover;
    background-size: cover;
    padding: 5px;
}

main .first-block .col-12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 60px
}

main .first-block .h1-block {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .8);
    width: 741px;
    height: 414px;
    padding: 49px 31px;
    text-align: center;
    position: relative
}

main .first-block .h1-block h1 {
    font-size: 60px;
    color: #0188cc;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    line-height: 1;
    margin-bottom: 15px
}

main .first-block .h1-block h2 {
    font-size: 39px;
    color: #14303e;
    line-height: 1;
    font-family: sans-serif;
    margin-bottom: 40px
}

main .first-block .h1-block p {
    color: #c00;
    font-size: 29px;
    font-family: sans-serif;
    line-height: 34px;
    margin-bottom: 0
}

main .first-block .h1-block span {
    font-family: sans-serif;
    font-size: 34px;
    color: #fff;
    display: block;
    height: 69px;
    text-transform: uppercase;
    margin-bottom: 16px
}

main .first-block .calculate {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #2d343c;
    -webkit-box-shadow: 0 0 12px 4px rgba(0, 0, 1, .05);
    box-shadow: 0 0 12px 4px rgba(0, 0, 1, .05);
    width: 369px;
    height: 414px;
    color: #fff
}

main .first-block .calculate .calculate-head {
    padding: 22px 31px 15px;
    font-size: 26px;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center
}

main .first-block .calculate .calculate-head h2 {
    margin-bottom: 0
}

main .first-block .calculate hr {
    margin: 0;
    border-color: #3f4955
}

main .first-block .calculate .calculate-body {
    padding: 22px 31px;
    justify-self: flex-end
}

main .first-block .calculate .calculate-body form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    grid-gap: 14px
}

main .first-block .calculate .calculate-body form div {
     
     
     
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

main .first-block .calculate .calculate-body form div label {
    font-size: 18px
}

main .first-block .calculate .calculate-body form div input {
    border-width: 1px;
    border-color: #d1d1d1;
    border-style: solid;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #fff;
    height: 41px;
    font-size: 20px;
    color: #033;
    text-align: center
}

main .first-block .calculate .calculate-body form div #square {
    width: 90px;
    margin-left: auto
}

main .first-block .calculate .calculate-body form div #price {
    width: 154px;
    margin-left: auto
}

main .first-block .calculate .calculate-body form div #phone {
    width: 167px;
    margin-left: auto;
    font-size: 16px;
    text-align: left;
    padding: 0 15px
}

main .first-block .calculate .calculate-body form p {
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    margin-bottom: 5px
}

main .first-block .calculate .calculate-body form button {
    width: 306px;
    height: 53px;
    background: -webkit-gradient(linear, left bottom, left top, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(360deg, #f6d30c 0, #ffe937 100%);
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    -webkit-box-shadow: 0 4px 0 0 #e7ae01;
    box-shadow: 0 4px 0 0 #e7ae01;
    font-size: 20px;
    text-transform: uppercase;
    font-family: sans-serif;
}

main .first-block .calculate .calculate-body form button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(180deg, #f6d30c 0, #ffe937 100%)
}

main .characteristics {
    padding-top: 90px;
    padding-bottom: 90px
}

main .characteristics h2 {
    font-size: 36px;
    color: #003955;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 40px
}

main .characteristics .grid {
    display: grid;
    grid-template-columns: repeat(3, 350px);
    grid-gap: 50px 50px
}

main .characteristics .grid .item {
     
     
     
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

main .characteristics .grid .item .img-block {
    width: 65px;
    height: 65px;
    border-width: 2px;
    border-color: #e8e8e8;
    border-style: solid;
    -webkit-border-radius: 3px;
    border-radius: 3px;
     
     
     
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 31px;
    margin-top: 3px
}

main .characteristics .grid .item .desc {
    width: 250px
}

main .characteristics .grid .item .desc h3 {
    font-size: 23px;
    color: #003955;
    font-family: sans-serif;
    margin-bottom: 10px
}

main .characteristics .grid .item .desc span {
    line-height: 1
}

main .kinds {
    background: #f3f2f2;
    padding-top: 90px;
    padding-bottom: 100px
}

main .kinds h2 {
    font-size: 36px;
    color: #003955;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px
}

main .kinds .grid {
     
     
     
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

main .kinds .grid .item {
    height: 521px;
    width: 370px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #fff;
    overflow: hidden
}

main .kinds .grid .item .wrap {
    padding: 18px 32px 22px
}

main .kinds .grid .item .wrap .img {
    height: 277px;
    width: 100%
}

main .kinds .grid .item .wrap h3 {
    font-size: 28px;
    font-family: sans-serif;
    color: #003955;
    text-align: center
}

main .kinds .grid .item .wrap .item-price {
    font-size: 24px;
    font-family: sans-serif;
    color: #0188cc;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px
}

main .kinds .grid .item .wrap button {
    height: 53px;
    background: -webkit-gradient(linear, left bottom, left top, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(360deg, #f6d30c 0, #ffe937 100%);
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    -webkit-box-shadow: 0 4px 0 0 #e7ae01;
    box-shadow: 0 4px 0 0 #e7ae01;
    font-size: 20px;
    text-transform: uppercase;
    font-family: sans-serif;
    width: 100%;
    margin-top: 22px
}

main .kinds .grid .item .wrap button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(180deg, #f6d30c 0, #ffe937 100%)
}

main .kinds .grid .item .wrap div span {
    display: block;
    margin-bottom: 5px
}

main .kinds .grid .item .wrap div span img {
    margin-right: 5px;
    margin-top: -3px
}

main .technology {
    padding-top: 90px;
    padding-bottom: 90px
}

main .technology .grid {
    display: grid;
    grid-template-columns: repeat(4, 250px);
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

main .technology h2 {
    font-size: 36px;
    color: #003955;
    text-transform: uppercase;
    margin-bottom: 35px;
    text-align: center
}

main .technology img {
    width: 250px;
    height: 250px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 25px
}

main .technology h3 {
    font-size: 20px;
    font-family: sans-serif;
    color: #000;
    text-transform: uppercase;
    text-align: center
}

main .zamer {
    -webkit-background-size: cover;
    background-size: cover;
    padding: 44px 0 32px
}

main .zamer .h2-block {
    width: 550px;
    color: #fff
}

main .zamer .h2-block h2 {
    font-size: 51px;
    display: block;
    margin-bottom: 30px
}

main .zamer .h2-block span {
    font-size: 26px;
     
     
     
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1.2
}

main .zamer .h2-block span.first {
    margin-bottom: 25px
}

main .zamer .h2-block span img {
    margin-right: 20px
}

main .zamer .form {
    width: 369px;
    height: 300px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 12px 4px rgba(0, 0, 1, .05);
    box-shadow: 0 0 12px 4px rgba(0, 0, 1, .05);
    padding: 28px 33px 34px;
    text-align: center
}

main .zamer .form h3 {
    font-size: 26px;
    font-family: sans-serif;
    color: #003955;
    text-transform: uppercase;
    margin-bottom: 2px
}

main .zamer .form span {
    font-size: 21px;
    font-family: sans-serif;
    color: #003955;
    text-transform: uppercase;
    margin-bottom: 13px;
    display: block
}

main .zamer .form h4 {
    font-family: sans-serif;
    display: block;
    font-size: 17px;
    text-transform: uppercase;
    color: #fff;
    width: 256px;
    height: 37px;
    margin-left: auto;
    margin-right: auto;
     
     
     
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 21px
}

main .zamer .form form button {
    height: 53px;
    background: -webkit-gradient(linear, left bottom, left top, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(360deg, #f6d30c 0, #ffe937 100%);
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    -webkit-box-shadow: 0 4px 0 0 #e7ae01;
    box-shadow: 0 4px 0 0 #e7ae01;
    font-size: 20px;
    text-transform: uppercase;
    font-family: sans-serif;
    width: 100%;
}

main .zamer .form form button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(180deg, #f6d30c 0, #ffe937 100%)
}

main .zamer .form form input {
    border-width: 1px;
    border-color: #ccc;
    border-style: solid;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
    height: 47px;
    padding: 0 16px;
    margin-bottom: 12px
}

main .potolki-for {
    padding-top: 80px;
    padding-bottom: 80px
}

main .potolki-for h2 {
    color: #003955;
    font-size: 36px;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-align: center
}

main .potolki-for .grid {
    display: grid;
    grid-template-columns: repeat(3, 370px);
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    grid-row-gap: 30px
}

main .potolki-for .item {
    text-align: center
}

main .potolki-for .item img {
    display: block;
    margin-bottom: 15px
}

main .potolki-for .item span {
    display: block;
    font-size: 24px;
    text-transform: uppercase;
    font-family: sans-serif;
}

main .ask {
    background: #e8e8e8;
    padding-top: 90px;
    padding-bottom: 100px;
    text-align: center
}

main .ask h2 {
    color: #003955;
    font-size: 36px
}

main .ask h3 {
    font-size: 24px;
    color: #121313
}

main .ask h3 a {
    color: #c00
}

main .ask .ask-blocks {
    margin-top: 20px
}

main .ask .ask-blocks .item {
    text-align: left;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    margin-bottom: 13px;
    overflow: hidden;
    border: 2px solid #0188cc
}

main .ask .ask-blocks .item h4 {
    width: 100%;
    height: 65px;
    color: #fff;
    font-size: 22px;
    padding: 0 24px;
    padding-right: 40px;
     
     
     
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #0188cc;
    margin-bottom: 0;
    position: relative;
    cursor: pointer
}

main .ask .ask-blocks .item h4:after {
    content: '+';
    font-size: 40px;
    position: absolute;
    right: 13px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    line-height: 34px;
    height: 32px
}

main .ask .ask-blocks .item h4.active:after {
    content: '–';
    font-size: 34px;
    line-height: 26px
}

main .ask .ask-blocks .item div {
    width: 100%;
    padding: 15px 24px;
    background: #fff;
    font-family: sans-serif;
    color: #1d1a1a;
    display: none
}

main .ask .ask-blocks .item div.active {
    width: 100%;
    left: -2px;
    height: auto;
    z-index: 100;
    display: block
}

main .ask button {
    width: 306px;
    height: 53px;
    background: -webkit-gradient(linear, left bottom, left top, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(360deg, #f6d30c 0, #ffe937 100%);
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    -webkit-box-shadow: 0 4px 0 0 #e7ae01;
    box-shadow: 0 4px 0 0 #e7ae01;
    font-size: 20px;
    text-transform: uppercase;
    font-family: sans-serif;
    margin-top: 20px
}

main .ask button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(180deg, #f6d30c 0, #ffe937 100%)
}

main .reviews {
    padding-top: 85px;
    padding-bottom: 65px
}

main .reviews h2 {
    font-size: 36px;
    color: #003955;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 130px
}

main .reviews .items {
    display: grid;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    grid-template-columns: repeat(3, 366px)
}

main .reviews .items .item {
    text-align: center;
    border-width: 2px;
    border-color: #e8e8e8;
    border-style: solid;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    width: 366px;
    height: 100%;
    padding: 0 30px 50px
}

main .reviews .items .item img {
    width: 186px;
    height: 187px;
    border-style: solid;
    border-width: 7px;
    border-color: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-top: -95px;
    margin-bottom: 15px
}

main .reviews .items .item h5 {
    margin-bottom: 10px
}

main .reviews .items .item span {
    color: #000;
    font-size: 16px;
    line-height: 22px;
    font-family: sans-serif
}

main .call {
    text-align: center;
    padding: 70px 0 65px;
    background: -webkit-gradient(linear, left top, right top, from(#0188cc), to(#14b0ff));
    background: -webkit-linear-gradient(left, #0188cc 0, #14b0ff 100%);
    background: -o-linear-gradient(left, #0188cc 0, #14b0ff 100%);
    background: linear-gradient(90deg, #0188cc 0, #14b0ff 100%)
}

main .call h2 {
    font-size: 40px;
    font-family: sans-serif;
    line-height: 51px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 13px
}

main .call h3 {
    font-size: 26px;
    font-family: sans-serif;
    line-height: 30px;
    margin-bottom: 30px;
    color: #fff
}

main .call button {
    width: 306px;
    height: 53px;
    background: -webkit-gradient(linear, left bottom, left top, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(360deg, #f6d30c 0, #ffe937 100%);
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    -webkit-box-shadow: 0 4px 0 0 #e7ae01;
    box-shadow: 0 4px 0 0 #e7ae01;
    font-size: 20px;
    text-transform: uppercase;
    font-family: sans-serif;
}

main .call button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(180deg, #f6d30c 0, #ffe937 100%)
}

main #map {
    width: 100%;
    height: 440px;
    position: relative
}

main #map .col-12 {
    position: relative
}

main #map .places {
    border-width: 2px;
    border-color: #c1c1c1;
    border-style: solid;
    background-color: rgba(255, 255, 255, .8);
    -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 2, .08);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 2, .08);
    position: absolute;
    width: 427px;
    height: 211px;
    z-index: 100;
    top: 100px;
    bottom: 0;
    left: 15px;
    right: 0;
    display: block;
    padding: 25px 0;
    text-align: center
}

main #map .places .places-logo {
    display: block;
    margin-left: auto;
    margin-right: auto
}

main #map .places span {
    display: block;
    font-size: 22px;
    color: #1c1d1e;
    margin-top: 20px
}

main #map .places div {
     
     
     
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 15px
}

main #map .places div img {
    margin-right: 13px
}

main #map .places div a {
    color: #c00;
    font-size: 34px;
    font-family: sans-serif;
}

main #map .places div a:hover {
    text-decoration: none
}

footer {
    background: #003955;
    padding-top: 30px;
    padding-bottom: 35px;
    color: #fff
}

footer .col-12 {
     
     
     
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

footer .copy {
    font-size: 14px
}

footer .desc {
    font-size: 20px;
    font-family: sans-serif
}

footer a {
    display: block;
    color: #fff;
    text-align: right
}

footer a:hover {
    color: #fff;
    text-decoration: none
}

footer a.link-tel {
    font-size: 18px;
    margin-bottom: 5px
}

footer a.link-mail {
    font-size: 16px
}

footer a img {
    margin-right: 13px
}

.up {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #959595;
    opacity: .62;
    position: fixed;
     
     
     
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    right: 50px;
    bottom: 50px;
    width: 55px;
    height: 55px;
    z-index: 300;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease
}

.up:hover {
    opacity: 1
}

@media (max-width: 1199px) {
    header .header .logo-block {
        width: 100%
    }

    header .header .contacts {
        width: 100%;
        margin-top: 20px
    }

    main .first-block .col-12 {
        grid-template-columns: 1fr
    }

    main .first-block .h1-block {
        margin-left: auto;
        margin-right: auto
    }

    main .first-block .calculate {
        margin-left: auto;
        margin-right: auto
    }

    main .characteristics .grid {
        grid-template-columns: repeat(2, 350px);
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    main .kinds .grid {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-evenly
    }

    main .kinds .grid .item3 {
        margin-top: 50px
    }

    main .technology .grid {
        grid-template-columns: repeat(2, 250px);
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        grid-gap: 30px 50px
    }

    main .potolki-for .grid {
        grid-template-columns: repeat(2, 370px);
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        grid-gap: 30px 50px
    }

    main .ask .ask-blocks {
        grid-template-columns: repeat(2, 455px)
    }

    main .reviews .items {
        grid-template-columns: repeat(2, 366px);
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        grid-gap: 130px 50px
    }

    main .reviews .items .item3 {
        grid-row: 2;
        grid-column: 1/3;
        justify-self: center
    }
}

@media (max-width: 991px) {
    main .first-block .h1-block {
        width: 100%
    }

    main .first-block .h1-block h1 {
        font-size: 54px
    }

    main .first-block .h1-block h2 {
        font-size: 36px;
        margin-bottom: 30px
    }

    main .first-block .h1-block span {
        margin-bottom: 20px
    }

    main .first-block .h1-block p {
        font-size: 28px;
        line-height: 40px
    }

    main .characteristics .grid {
        grid-template-columns: repeat(2, 320px);
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        grid-gap: 50px 10px
    }

    main .characteristics .grid .item .desc h3 {
        font-size: 21px
    }

    main .characteristics .grid .item .desc span {
        font-size: 16px
    }

    main .kinds .grid .item2 {
        margin-top: 50px
    }

    main .zamer .h2-block {
        margin-left: auto;
        margin-right: auto
    }

    main .zamer .form {
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px
    }

    main .potolki-for .grid {
        grid-template-columns: repeat(2, 1fr)
    }

    main .potolki-for .item img {
        width: 100%
    }

    main .ask .ask-blocks {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 13px
    }

    main .ask .ask-blocks .item h4 {
        font-size: 20px
    }

    main .reviews .items {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 130px 30px
    }

    main .reviews .items .item {
        width: 100%
    }

    main .call h2 {
        font-size: 33px
    }

    footer .copy {
        font-size: 12px
    }

    footer .desc {
        font-size: 16px
    }

    footer a.link-tel {
        font-size: 14px
    }

    footer a.link-mail {
        font-size: 14px
    }
}

@media (max-width: 767px) {
    header .header .logo-block span {
        font-size: 17px
    }

    header .header .contacts .tel-block div a {
        font-size: 26px
    }

    header .header .contacts .tel-block div span {
        font-size: 16px
    }

    main .first-block .h1-block h1 {
        font-size: 39px
    }

    main .first-block .h1-block h2 {
        font-size: 26px
    }

    main .first-block .h1-block p {
        font-size: 20px;
        line-height: 36px
    }

    main .first-block .h1-block {
        height: 360px
    }

    main .characteristics .grid {
        grid-template-columns: 1fr
    }

    main .characteristics .grid .item {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    main .technology .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px 20px
    }

    main .zamer .h2-block h2 {
        font-size: 49px;
        text-align: center
    }

    main .potolki-for .grid {
        grid-gap: 30px 20px
    }

    main .ask {
        padding-top: 70px
    }

    main .ask h3 {
        font-size: 18px;
        line-height: 24px
    }

    main .ask .ask-blocks {
        grid-template-columns: 1fr
    }

    main .ask .ask-blocks2 {
        margin-top: 0
    }

    main .reviews .items {
        grid-template-columns: 1fr
    }

    main .reviews .items .item3 {
        grid-column: 1
    }

    main .call h2 {
        font-size: 24px;
        line-height: 36px
    }

    main .call h3 {
        font-size: 20px
    }

    .up {
        right: 20px;
        bottom: 20px
    }

    footer .copy {
        width: 100%;
        font-size: 14px
    }

    footer .col-12 {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    footer .desc {
        margin-top: 10px;
        width: 100%;
        font-size: 18px;
        display: block
    }

    footer a.link-tel {
        text-align: center;
        font-size: 18px
    }

    footer a.link-mail {
        text-align: center;
        font-size: 16px
    }

    footer .footer-contacts {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 10px
    }

    main #map {
        height: 600px;
        overflow: hidden
    }

    main #map .container {
        max-width: 100%;
        padding: 0
    }

    main #map .places {
        position: static;
        width: 100%;
        border: none
    }

    nav a {
        display: block;
        text-align: center;
        padding: 10px 0
    }

    nav svg {
        width: 30px;
        height: 30px
    }
}

@media (max-width: 575px) {
    header .header .logo-block img {
        margin: 0 auto
    }

    header .header .logo-block span {
        text-align: center;
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto
    }

    header .header {
        padding-left: 0;
        padding-right: 0
    }

    header .header .contacts .tel-block {
        margin: 0;
        width: 100%
    }

    header .header .contacts .tel-block div a {
        font-size: 24px
    }

    header .header .contacts .tel-block div span {
        font-size: 15px
    }

    header .header .contacts button {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px
    }

    main .first-block .col-12 {
        grid-template-columns: 100%
    }

    main .first-block .h1-block {
        padding: 30px 20px;
        height: auto
    }

    main .first-block .h1-block span {
        font-size: 22px;
        -webkit-background-size: 100% 100%;
        background-size: 100%;
        margin-bottom: 0;
        width: 250px;
        margin-left: auto;
        margin-right: auto
    }

    main .first-block .h1-block p {
        line-height: 24px
    }

    main .first-block .h1-block h2 {
        margin-bottom: 0
    }

    main .first-block .calculate {
        max-width: 369px;
        height: auto;
        width: 100%
    }

    main .first-block .calculate .calculate-body form div {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    main .first-block .calculate .calculate-body form div label {
        width: 100%;
        text-align: center
    }

    main .first-block .calculate .calculate-body form div input {
        margin: 0 auto
    }

    main .first-block .calculate .calculate-body form {
        grid-template-columns: 100%
    }

    main .technology .grid {
        grid-template-columns: 1fr;
        text-align: center
    }

    main .characteristics .grid {
        grid-template-columns: 100%
    }

    main .characteristics .grid .item .img-block {
        margin-right: 20px
    }

    main .ask button {
        width: 100%;
        max-width: 306px
    }

    main .call button {
        width: 100%;
        max-width: 306px
    }

    main .zamer .form {
        max-width: 369px;
        width: 100%
    }

    main .first-block .calculate .calculate-body form button {
        max-width: 306px;
        width: 100%
    }

    main .characteristics h2 {
        font-size: 32px
    }

    main .characteristics .grid .item .desc {
        width: 188px
    }

    main .characteristics .grid .item .desc h3 {
        font-size: 20px;
        margin-bottom: 5px
    }

    main .characteristics .grid .item .desc span {
        font-size: 14px
    }

    main .kinds {
        padding-top: 70px
    }

    main .kinds h2 {
        font-size: 32px
    }

    main .kinds .grid .item .wrap {
        padding: 18px 20px 22px
    }

    main .kinds .grid .item .img {
        width: 100%;
        height: auto
    }

    main .kinds .grid .item .wrap h3 {
        font-size: 21px
    }

    main .kinds .grid .item .wrap .item-price {
        font-size: 20px
    }

    main .kinds .grid .item {
        height: auto
    }

    main .characteristics {
        padding-top: 70px
    }

    main .technology h2 {
        font-size: 32px
    }

    main .technology {
        padding-top: 70px;
        padding-bottom: 70px
    }

    main .zamer .h2-block h2 {
        font-size: 26px
    }

    main .zamer .h2-block span {
        font-size: 17px
    }

    main .zamer .form h4 {
        max-width: 256px;
        width: 100%;
        -webkit-background-size: 100% 100%;
        background-size: 100%
    }

    main .zamer .form {
        padding: 28px 25px 34px
    }

    main .zamer .form h3 {
        font-size: 19px
    }

    main .zamer .form span {
        font-size: 16px
    }

    main .potolki-for h2 {
        font-size: 32px
    }

    main .potolki-for .grid {
        grid-template-columns: 1fr
    }

    main .potolki-for {
        padding-top: 70px;
        padding-bottom: 70px
    }

    main .ask h2 {
        font-size: 26px
    }

    main .ask .ask-blocks .item h4 {
        font-size: 16px
    }

    main .reviews {
        padding-top: 70px
    }

    main .reviews h2 {
        font-size: 32px
    }

    main .reviews .items .item {
        padding: 0 15px 50px
    }

    main .reviews .items .item span {
        font-size: 14px
    }

    main .call h2 {
        font-size: 16px;
        line-height: 24px
    }

    main .call h3 {
        font-size: 16px;
        line-height: 22px
    }

    main #map .places span {
        font-size: 18px
    }

    main #map .places div a {
        font-size: 24px
    }
}

.success {
    width: 300px;
    height: 50px;
    font-size: 18px;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    top: 22vh;
    left: 0;
    right: 0;
    background: #fdfdfd;
    border: 2px solid #000;
    padding: 10px 20px;
    z-index: 100;
    display: none;
    -webkit-box-shadow: 0 0 10px 0;
    box-shadow: 0 0 10px 0;
    color: #000
}

@media (max-width: 1199px) {
    .success {
        top: 200px
    }
}

.modal-open .modal {
    background: rgba(0, 0, 0, .8)
}

.modal .modal-dialog {
    max-width: 370px;
    width: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 380px
}

@media (max-width: 361px) {
    .modal .modal-dialog {
        max-width: 300px
    }
}

@media (max-width: 1199px) {
    .modal .modal-dialog {
        margin-top: 50px
    }
}

.modal .modal-content {
    background: #fff;
    border: none;
    padding: 45px 32px 43px
}

@media (max-width: 361px) {
    .modal .modal-content {
        padding: 40px 20px 28px
    }
}

.modal .modal-header {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
    padding: 0
}

.modal .modal-footer {
    padding: 0
}

.modal .modal-body {
    padding: 0
}

.modal .modal-body button {
    height: 53px;
    background: -webkit-gradient(linear, left bottom, left top, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(bottom, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(360deg, #f6d30c 0, #ffe937 100%);
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: none;
    -webkit-box-shadow: 0 4px 0 0 #e7ae01;
    box-shadow: 0 4px 0 0 #e7ae01;
    font-size: 20px;
    text-transform: uppercase;
    font-family: sans-serif;
    margin-top: 18px;
    width: 100%
}

.modal .modal-body button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#f6d30c), to(#ffe937));
    background: -webkit-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: -o-linear-gradient(top, #f6d30c 0, #ffe937 100%);
    background: linear-gradient(180deg, #f6d30c 0, #ffe937 100%)
}

.modal h2 {
    font-size: 26px;
    text-align: center;
    color: #033;
    font-family: sans-serif;
    text-transform: uppercase;
    line-height: 28px;
    width: 100%;
    display: block;
    margin-bottom: 15px
}

.modal h2 span {
    font-size: 20px
}

.modal h4 {
    font-size: 17px;
    color: #033;
    width: 100%;
    display: block;
    margin-bottom: 20px;
    font-family: sans-serif
}

.modal input {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    outline: 0;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 10px 19px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    color: #333
}

.modal input:focus {
    outline: 0
}

.modal input.tel {
    margin-bottom: 0
}

.modal button {
    cursor: pointer;
    outline: 0
}

.modal button:focus {
    outline: 0
}

.modal .close {
    position: absolute;
    right: 9px;
    top: 0;
    opacity: .25;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    font-size: 46px
}

.modal .close:hover {
    opacity: .85
}

#cla { /*колонки контента и ссылок*/
    width: 100%; /*длина блока*/
}

.cl { /*колонки контента и ссылок*/
    min-width: 240px; /*минимальная длина блока*/
    width: 100%; /*длина блока*/
}

.ac-container label { /*заголовки вкладок*/
    font: normal 18px/1 'Arial Narrow', 'Arial', 'sans-serif';
    color:#333; /*шрифт заголовков*/
    padding: 0 10px; /*внутренние отступы названий*/
}

.sp li { /*пункт списка*/
    width: 96%; /*длина блока*/
}

.sp li a:hover::after { /*свойства блока контекста ссылки при наведении*/
    width: 230px;
}

header{
	position: fixed;
    width: 100%;
    z-index: 10;
}