*, *::before, *::after { box-sizing: border-box; -webkit-appearance: none; } body { margin: 0; background: #fff; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul[class], ol[class] { padding: 0; } body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } p { margin-bottom: 20px; } body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; font-family: 'Roboto', sans-serif; font-style: normal; font-weight: normal; font-size: 20px; color: #fff; } ul[class], ol[class] { list-style: none; } a:not([class]) { text-decoration-skip-ink: auto; } img { max-width: 100%; display: block; } article > * + * { margin-top: 1em; } input, button, textarea, select { font: inherit; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .container { max-width: 1154px; width: 100%; margin: 0 auto; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; } .row_cell { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 20px; } .row_cell_2 { -webkit-box-flex: 2 1 0; -ms-flex: 2 1 0; flex: 2 1 0; } .row_cell_1 { -webkit-box-flex: 1 1 0; -ms-flex: 1 1 0; flex: 1 1 0; } .row_cell:first-child, .example:first-child { margin-left: 0; } .row_cell:last-child, .example:last-child { margin-right: 0; } header { border: 2px solid #fff; border-radius: 20px; padding: 27px 35px; color: #fff; } section { padding: 60px 0px; background: #fff; } footer { padding: 40px 0px 20px; background: #144C8C; } .text-error { color: #ff3838; } #main { width: 100%; background: url('images/main_back.jpg'); min-height: 620px; padding: 60px 0px 20px 0px; text-align: left; background-size: cover; background-position: center; } /* меню */ header .headerInner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #ffffff; } header .headerInner .logo, .logo { text-transform: uppercase; min-width: 200px; width: 200px; height: 50px; } header .headerInner .menu { padding-left: 20px; } header .headerInner .menu .part { margin: 0 10px; width: auto; letter-spacing: .5px; } header .headerInner .menu .part:last-child { margin-right: 0; } header .headerInner .hamburger { display: none; width: 30px; height: 30px; } header .headerInner .hamburger svg { width: 30px; height: 30px; fill: #ffffff; } header.mobile .headerInner { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } header.mobile .headerInner .logo { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } header.mobile .headerInner .menu { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; width: calc(100% - 50px); background: #fff; text-align: left; color: #144C8C; margin-top: 10px; padding: 10px; position: absolute; top: 67px; } #header_blue header.mobile .headerInner .menu { top: 107px; width: calc(100% - 70px); } header.mobile .headerInner .menu .part { text-align: left; font-family: 'Roboto', sans-serif; font-size: 20px; } header.mobile .headerInner .hamburger { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; display: block; margin-right: 15px; } /* конец меню */ h1 { font-family: 'Roboto', sans-serif; font-style: normal; font-weight: bold; text-align: left; font-size: 60px; line-height: 70px; color: #FFFFFF; margin: 50px 0px 30px; } h2, #results { font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 500; font-size: 45px; line-height: 53px; color: #144C8C; text-align: center; margin-bottom: 30px; } #results { display: none; } .button { display: inline-block; padding: 8px 60px; border-radius: 10px; margin-top: 25px; margin-bottom: 30px; } .button.white { border: 2px solid #fff; } .center { text-align: center; width: 100%; } .left { text-align: left !important; width: 100%; } .right { text-align: right !important; width: 100%; } #services .row { flex-wrap: wrap; justify-content: center; } .service { background: #5BAAE2; box-shadow: 2px 8px 15px rgba(20, 76, 140, 0.2); border-radius: 10px; font-size: 24px; padding: 12px; padding-right: 5px; min-width: 300px; max-width: 372px; position: relative; } .service__desc { display: inline-block; vertical-align: middle; margin-right: 5px; } .arrow { position: absolute; right: 20px; bottom: 15px; } .grey { color: #848484; } .grey__back { background: #E3E3E3; } .dark_blue { color: #144C8C !important; } .button.grey { border: 2px solid #848484; } .block { max-width: 780px; margin: 0 auto; } .policy p { color: #144C8C !important; } .policy h3 { margin-bottom: 20px; } .light_blue { background: #D3E6F5; } .blue { color: #5BAAE2 !important; } .light_blue__block { background: #D3E6F5; border: 2px solid #FFFFFF; box-sizing: border-box; text-decoration: underline; font-size: 24px; padding: 20px 20px 50px; color: #5BAAE2; box-shadow: 2px 8px 15px rgba(20, 76, 140, 0.2); border-radius: 10px; position: relative; } .read_more .light_blue__block { background: #D3E6F5; border: 2px solid #FFFFFF; box-sizing: border-box; font-size: 24px; padding: 20px 50px 50px 20px; color: #5BAAE2; box-shadow: 2px 8px 15px rgba(20, 76, 140, 0.2); border-radius: 10px; position: relative; max-width: 370px; } .read_more .button { margin-bottom: 0px; } .light_blue__block a { text-decoration: underline; } h3 { font-size: 24px; line-height: 28px; color: #144C8C; font-style: normal; font-weight: 500; } a.contacts { font-style: normal; font-weight: 500; font-size: 45px; line-height: 53px; color: #5BAAE2; display: block; margin: 45px auto; } .form__grey { background: #E3E3E3; box-shadow: 2px 8px 15px rgba(20, 76, 140, 0.2); border-radius: 20px; padding: 40px 30px; } .form__grey h3 { font-size: 24px; line-height: 28px; font-style: normal; font-weight: 500; color: #848484; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { background: transparent; display: block; border: none; border-bottom: 2px solid #144C8C; width: 100%; margin: 10px auto; height: 50px; font-size: 24px; padding-top: 10px; color: #144C8C; } button, input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; font-family: 'Roboto', sans-serif; font-style: normal; font-weight: normal; font-size: 20px; line-height: 25px; background: #144C8C; border-radius: 10px; text-align: center; color: #fff; text-decoration: none; padding: 16px 28px; text-align: right; margin: 15px auto 5px; box-shadow: none; border: none; } ::-webkit-input-placeholder {color:#144C8C; opacity:1;}/* webkit */ ::-moz-placeholder {color:#144C8C; opacity:1;}/* Firefox 19+ */ :-moz-placeholder {color:#144C8C; opacity:1;}/* Firefox 18- */ :-ms-input-placeholder {color:#144C8C; opacity:1;}/* IE */ .politic { display: block; font-style: normal; font-weight: normal; font-size: 15px; line-height: 18px; color: #144C8C; margin-top: 15px; } #modal_form { width: 800px; height: 550px; /* Рaзмеры дoлжны быть фиксирoвaны */ border-radius: 0px; background: #5BAAE2; position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */ top: 50%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */ left: 50%; /* пoлoвинa экрaнa слевa */ margin-top: -270px; margin-left: -400px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */ display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */ opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */ z-index: 99999999; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */ padding: 20px 10px; border: none; } .modal__title { font-family: 'Roboto', sans-serif; font-style: normal; font-weight: bold; text-align: left; font-size: 60px; line-height: 65px; color: #FFFFFF; margin: 0px; } #modal_form .modal__text { padding-left: 185px; padding-right: 15px; } /* Кнoпкa зaкрыть для тех ктo в тaнке) */ #modal_form #modal_close { cursor: pointer; } /* Пoдлoжкa */ #overlay { z-index:9999999; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */ position:fixed; /* всегдa перекрывaет весь сaйт */ background-color:#000; /* чернaя */ opacity:0.8; /* нo немнoгo прoзрaчнa */ -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */ filter:alpha(opacity=80); width:100%; height:100%; /* рaзмерoм вo весь экрaн */ top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */ left:0; cursor:pointer; display:none; /* в oбычнoм сoстoянии её нет) */ } #modal_form h3 { font-weight: bold; font-size: 36px; line-height: 44px; margin-bottom: 15px; color: #FFFFFF; text-align: center; } #header_blue { background: #144C8C; padding: 40px 10px; } .shadow { background: #FFFFFF; box-shadow: 2px 8px 15px rgba(20, 76, 140, 0.2); border-radius: 20px; padding: 45px 40px; } .shadow h3 { margin-bottom: 55px; } .grey__back { text-align: left; } .grey__back p { color: #144C8C; } .grey__back h2 { font-weight: 500; font-size: 45px; line-height: 53px; color: #5BAAE2; } .number { font-style: normal; font-weight: bold; font-size: 60px; line-height: 70px; display: flex; align-items: center; color: #5BAAE2; } ol{ counter-reset: myCounter; position: relative; margin-top: 35px; } ol li{ list-style: none; color: #144C8C; margin-left: 15px; position: relative; margin-bottom: 50px; } ol li:before { counter-increment: myCounter; content:counter(myCounter); position: absolute; top: -25px; left: -45px; font-style: normal; font-weight: bold; font-size: 60px; line-height: 70px; color: #5BAAE2; } ol li.two_digits:before { left: -75px; } #services a, #info a { display: block; } /* Аккордеон */ .tabs { margin: 0 0 50px; } .tabs__caption { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; position: relative; margin: -1px 0 0 -1px; } .tabs__caption li:last-child:before { content: ''; position: absolute; bottom: -5px; left: 0; right: -2px; z-index: -1; height: 5px; background: #7DCA86; } .tabs__caption:after { content: ''; display: table; clear: both; } .tabs__caption li { padding: 9px 50px 0px 0px; margin: 1px 0 0 1px; font-weight: 500; font-size: 25px; line-height: 35px; text-decoration-line: underline; position: relative; color: #144C8C; margin-bottom: 60px; text-align: center; } .tabs__caption li:not(.active) { cursor: pointer; text-decoration-line: none; } .tabs__caption li:not(.active):hover { text-decoration-line: underline; } .tabs__caption .active { color: #5BAAE2;; } .tabs__caption .active:after { } .tabs__content { display: none; background: #FFFFFF; border: 2px solid #5BAAE2; box-sizing: border-box; color: #144C8C; box-shadow: 2px 8px 15px rgba(20, 76, 140, 0.2); border-radius: 10px; padding: 30px 30px; } .tabs__content.active { display: block; } .vertical .tabs__caption { float: left; display: block; } .vertical .tabs__caption li { float: none; border-width: 2px 0 2px 2px; border-radius: 5px 0 0 5px; } .vertical .tabs__caption li:last-child:before { display: none; } .vertical .tabs__caption .active:after { left: auto; top: 0; right: -2px; bottom: 0; width: 2px; height: auto; } .vertical .tabs__content { overflow: hidden; } .flex_end { align-items: flex-end; } .read_more .row { flex-wrap: wrap; } @media screen and (max-width: 650px) { .tabs__caption li { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; margin-bottom: 5px; padding: 9px 10px 0px; margin: 1px 0px 10px 0px; font-weight: 500; font-size: 16px; } .vertical .tabs__caption { float: none; display: -webkit-flex; display: -ms-flexbox; display: flex; } .vertical .tabs__caption li { border-width: 2px 2px 0; border-radius: 5px 5px 0 0; } .vertical .tabs__caption li:last-child:before { display: block; } .vertical .tabs__caption .active:after { top: auto; bottom: -5px; left: 0; right: 0; width: auto; height: 5px; background: #FFF; } } /* КОНЕЦ аккордеон */ @media (max-width: 800px) { #info .row { flex-wrap: wrap; justify-content: center; } #info .light_blue__block { max-width: 380px; } .row { flex-direction: column; } #services .row, footer .row { flex-wrap: wrap; justify-content: center; align-items: center; } } @media (max-width: 620px){ .shadow { padding: 30px !important; } body { font-size: 14px; } .right, .left { text-align: center !important; } .row { flex-direction: column; } .row_cell { margin: 20px 0px; } .row_cell.m0 { margin: 0 !important; } #services .row, footer .row { flex-wrap: wrap; justify-content: center; align-items: center; } br { display: none } .light_blue__block { padding: 20px; font-size: 20px; } .arrow { bottom: 25px; } .service { font-size: 20px; } .service .arrow { bottom: 5px; right: 10px; } img.service__desc { width: 50px; } .service__desc { font-size: 16px; } h1 { font-size: 25px; line-height: 30px; } h2 { font-weight: 500; font-size: 30px; line-height: 34px; } .grey__back h2 { font-weight: 500; font-size: 30px; line-height: 34px; } .visible { display: block !important; } #main { width: 100%; background: url('images/main_back.jpg'); min-height: 320px; padding: 0px 0px 20px 0px; text-align: left; background-size: cover; background-position: center; } header { border: none; border-bottom: 3px solid #fff; border-radius: 0px; padding: 12px 0px; color: #fff; } .container { padding: 0px 25px; } #about .button.grey { border: 2px solid #144C8C; } #info, #calendar { background: #fff !important; } #contacts { background: #D3E6F5; } .form__grey h3 { font-weight: 500; font-size: 25px; line-height: 30px; color: #144C8C; } .form__grey { background: #fff; } a.contacts { font-size: 20px; line-height: 30px; color: #144C8C; margin: 5px auto; } #modal_form { width: 100%; height: 430px; border-radius: 0px; background: #5BAAE2; position: fixed; top: 50%; left: 50%; margin-top: -205px; margin-left: -400px; display: none; opacity: 0; z-index: 99999999; padding: 20px 10px; border: none; } .modal__title { font-family: 'Roboto', sans-serif; font-style: normal; font-weight: bold; text-align: left; font-size: 30px; line-height:34px; color: #FFFFFF; margin: 0px; } #modal_form .modal__text { padding-left: 0; padding-right: 0px; } .read_more .light_blue__block { padding: 20px 20px 50px 20px; width: 100%; } .flex_end { justify-content: center; align-items: center; } }