﻿body,h1,h2,h3,h4,p,quote,small,form,input,nav,ul,li,ol,label,a {margin:0; padding:0; color:#222222}
p,h1,h2,h3,h4 {text-align:left}
div,p,h1,h2,h3,h4,input,button,a,img {box-sizing:border-box}
sub,sup {line-height:0}
a {text-decoration:none}
img {max-width:100%}
body {max-width:1920px; margin:auto}
p,html {line-height:1.4}
.hints {font-size:0.7rem}
.l {text-align:left}
.r {text-align:right}
.c {text-align:center}
.j {text-align:justify}
.top {vertical-align:top}
.middle {vertical-align:middle}
.bottom {vertical-align:bottom}
.w {color:white}
.red {color:red}
.black {color:black}
.dashed {text-decoration:underline; text-decoration-style:dotted; text-underline-offset:5px}
.underline {text-decoration:underline; text-underline-offset:5px}
.b {font-weight:bold}
.i {font-style:oblique}
.text_lower {text-transform:lowercase}
.text_upper {text-transform:uppercase}
.text_first {text-transform:capitalize}
.none {display:none}
.relative {position:relative}
.inline {display:inline-block}
.flex {display:flex}
.wrap {flex-wrap:wrap}
.column {flex-direction:column}
.pointer:hover {cursor:pointer}
:root {--li:40px}
@media all and (max-width:1280px) {:root {--li:30px}
 }
@media all and (max-width:1024px) {:root {--li:25px}
 }
@media all and (max-width:800px) {:root {--li:20px}
 }
@media all and (max-width:481px) {:root {--li:12px}
 }
@media all and (max-width:360px) {:root {--li:8px}
 }
@media all and (min-width:1px) {:root {--pre_ind:1px}
 }
@media all and (min-width:320px) {:root {--pre_ind:320px}
 }
@media all and (min-width:360px) {:root {--pre_ind:360px}
 }
@media all and (min-width:393px) {:root {--pre_ind:393px}
 }
@media all and (min-width:481px) {:root {--pre_ind:481px}
 }
@media all and (min-width:800px) {:root {--pre_ind:800px}
 }
@media all and (min-width:1024px) {:root {--pre_ind:1024px}
 }
@media all and (min-width:1280px) {:root {--pre_ind:1280px}
 }
@media all and (min-width:1536px) {:root {--pre_ind:1536px}
 }
:root {--ind:calc(((100vw - var(--pre_ind)) / 2) + var(--li))}
.content {max-width:1920px; width:100%; display:flex; justify-content:center; margin:0 auto}
.content > div {margin:auto; max-width:100%}
.field {padding:60px var(--ind) 80px var(--ind)}
.height_100 {min-height:100vh}
.height_80 {min-height:80vh}
div.title h2 {margin-bottom:20px}
div.title p {text-align:center; max-width:700px; margin:0 auto; margin-bottom:40px}
.quiz3 .quiz_main {max-width:100%}
.quiz3 .answer {cursor:pointer}
.quiz3 h3 {font-size:1.4rem; text-align:center; margin-bottom:20px}
.quiz3 .quiz_main > .flex {width:100%; justify-content:space-around; align-items:center}
.quiz3 a span.answer_text {font-size:1.2rem}
.quiz3 p {margin:10px 0}
@media all and (max-width:600px) {.quiz3 a span.answer_text {font-size:1rem}
}
.quiz3 .answer_small_img {display:none}
.quiz3 .answer_circle {display:none}
.quiz3 .answer_big_img {display:none}
.quiz3 .quiz_style_1 a {display:inline-block; padding:4px 10px; margin:4px 2px; border-radius:1rem; border:1px solid var(--color); color:var(--color); font-weight:bold; transition:.6s}
.quiz3 .quiz_style_1 a:hover {background-color:var(--color); color:white; transition:.6s}
.quiz3 .quiz_style_1 .answer_circle {display:inline}
.quiz_style_2 .answer_small_img {display:inline-block; max-height:40px; max-width:40px; vertical-align:middle; margin:5px 10px 5px 0; border-radius:.3rem}
.quiz3 .quiz_style_2 a {display:inline-block; padding:4px 10px; margin:4px 2px; border-radius:1rem; border:1px solid var(--color); color:var(--color); font-weight:bold; transition:.6s}
.quiz3 .quiz_style_2 a:hover {background-color:var(--color); color:white; transition:.6s}
.quiz_style_3 .answers {width:100%}
.quiz_style_3 .answer_big_img {display:block; max-height:300px; max-width:300px; margin:10px 0 10px 30px; border-radius:1rem}
.quiz3 .quiz_style_3 a {display:inline-block; padding:4px 10px; margin:4px 2px; border-radius:1rem; border:1px solid var(--color); color:var(--color); font-weight:bold; transition:.6s}
.quiz3 .quiz_style_3 a:hover {background-color:var(--color); color:white; transition:.6s}
@media all and (max-width:480px) {.quiz_style_3 .answer_big_img {max-height:200px; max-width:200px}
}
.quiz_style_42 .answers {width:100%; display:flex; flex-wrap:wrap}
.quiz_style_42 .answer {width:50%; padding:5px}
.quiz_style_42 .answer_small_img {display:block; width:90%; vertical-align:middle; margin:25px auto; border-radius:.3rem}
.quiz3 .quiz_style_42 a {display:inline-block; text-align:center; padding:4px 10px; margin:4px 2px; color:var(--color); font-weight:bold; transition:.6s}
.quiz3 .quiz_style_42 a span.answer_text {display:inline-block; padding:4px 10px; border-radius:1rem; border:1px solid var(--color)}
.quiz3 .quiz_style_42 a span.answer_text:hover {background-color:var(--color); color:white; transition:.6s}
.quiz_style_43 .answers {width:100%; display:flex; flex-wrap:wrap}
.quiz_style_43 .answer {width:33%; padding:5px; text-align:center}
.quiz_style_43 .answer_small_img {display:block; width:90%; vertical-align:middle; margin:25px auto; border-radius:.3rem}
.quiz3 .quiz_style_43 a {display:inline-block; width:100%; text-align:center; padding:4px 10px; margin:4px 2px; color:var(--color); font-weight:bold; transition:.6s}
.quiz3 .quiz_style_43 a span.answer_text {display:inline-block; padding:4px 10px; border-radius:1rem; border:1px solid var(--color)}
.quiz3 .quiz_style_43 a span.answer_text:hover {background-color:var(--color); color:white; transition:.6s}
@media all and (max-width:480px) {.quiz_style_43 .answers {flex-direction:column; width:100%}
.quiz_style_43 h3 {text-align:center}
.quiz_style_43 .answer {width:100%; text-align:center}
.quiz_style_43 .answer_small_img {margin:0 auto 10px auto; width:180px}
}
.quiz_style_44 .answers {width:100%; display:flex; flex-wrap:wrap}
.quiz_style_44 .answer {width:25%; padding:5px; text-align:center}
.quiz_style_44 .answer_small_img {display:block; width:90%; vertical-align:middle; margin:25px auto; border-radius:.3rem}
.quiz3 .quiz_style_44 a {display:inline-block; text-align:center; padding:4px 10px; margin:4px 2px; color:var(--color); font-weight:bold; transition:.6s}
.quiz3 .quiz_style_44 a span.answer_text {display:inline-block; padding:4px 10px; border-radius:1rem; border:1px solid var(--color)}
.quiz3 .quiz_style_44 a span.answer_text:hover {background-color:var(--color); color:white; transition:.6s}
@media all and (max-width:600px) {.quiz_style_44 .answer {width:50%}
}
#modal_callbuck main.modal__content {max-width:420px}
#modal_callbuck h3 {font-size:1.1rem; padding:10px 0 5px 0; text-align:center}
#modal_callbuck p.offer {text-align:center; margin-bottom:20px}
#modal_callbuck p.hints {margin-top:10px}
.messenger {padding:0 !important; background-size:cover; background-image:url('../file/_basic/messenger/fon.jpg')}
.messenger main {max-width:420px}
.messenger main > div {width:100%}
.messenger .top {padding:5px; display:flex; justify-content:space-between; align-items:center}
.messenger .top > div {display:flex; justify-content:flex-start; align-items:center}
.messenger .top > div > img {width:64px; height:64px; object-fit:cover; border-radius:32px; margin:10px 20px 10px 10px; float:left}
.messenger .top p.sitename {font-size:1.1rem; padding:3px 0}
.messenger .top > img {width:24px; height:24px; fill:white; float:right; cursor:pointer; transition:transform .4s ease; margin:10px}
.messenger .top > img:hover {transform:scale(1.1)}
.messenger .mess {padding:10px 10px 40px 10px}
.messenger .mess > p {display:block; margin:10px; background-color:#f5f5f5; max-width:calc(100% - 30px); border-radius:5px; padding:10px}
.messenger .send {padding:20px}
.messenger .send input,.messenger .send button {font-size:1.2rem; border-radius:1.1rem; height:2.2rem; line-height:1; margin:4px; border:none}
.messenger .send input {width:calc(100% - 3rem); padding:.5rem 1rem}
.messenger .send button {padding:.4rem .2rem .2rem .4rem; width:2.2rem; transition:.4s}
.messenger .send button:hover {background-color:#379155}
.messenger .send button img {height:1.4rem; width:1.4rem}
#modal_wa .top {background-color:#085b51}
#modal_wa .send button {background-color:#21c159}
#modal_tg .top {background-color:#50789e}
#modal_tg .send button {background-color:#50789e}
#change_city {display:none; opacity:0; z-index:999; position:fixed; top:calc(var(--li) / 2); left:calc(var(--li) / 2); background-color:white; box-shadow:0 0 100px black; padding:10px calc(var(--li) / 2); border-radius:10px; transition:opacity 0.3s ease,transform 0.3s ease; transform:translateY(10px); pointer-events:none}
#change_city.show {display:block; opacity:1; transform:translateY(0); pointer-events:auto}
#change_city p {font-size:.8rem; margin:10px 0}
#change_city p input {display:inline-block; padding:5px 10px; margin:4px 2px; border-radius:20px; font-size:.8rem; color:white; cursor:pointer; background-color:var(--color); border:1px solid var(--color_dark); font-weight:normal; line-height:1}
#change_city p input.butgrey {color:var(--color); font-weight:bold; background-color:white; border:none}
#modal_city .city_column {column-width:100px; column-count:3; column-gap:30px; column-rule:1px solid #ccc}
#modal_city .city_column h3 {font-size:1rem; padding:10px 0 5px 0}
#modal_city .city_column a {font-size:0.9rem}
#modal_city .city_column p {line-height:1.2}
#modal_city .city_column > div {break-inside:avoid-column}
#debug {position:fixed; top:10px; left:-2px; border-radius:0 25px 25px 0; background-color:#4b4b4b; border:2px solid #797979; padding:10px 10px 10px 5px; color:white; z-index:1000; display:flex; align-items:center; transition:all .1s ease}
#debug .free svg {height:1.2rem; transition:all .4s ease}
#debug .point {opacity:0; width:0; overflow:hidden; transition:all .4s ease; white-space:nowrap}
#debug .point svg {height:1rem; vertical-align:middle; margin:-2px 5px 2px 5px; fill:white}
#debug:hover .free {opacity:0; width:0; overflow:hidden}
#debug:hover .point {opacity:1; width:auto; padding-left:10px}
#mail_to_director main.modal__content {max-width:420px}
#mail_to_director h3 {font-size:1.1rem; padding:10px 0 5px 0; text-align:center}
#mail_to_director .form_style input,#mail_to_director .form_style textarea {width:320px; max-width:90%}
#multibut {display:flex; height:4rem; width:4rem; background-color:var(--color); position:fixed; bottom:.75rem; right:.5rem; border-radius:50%; z-index:2}
#multibut > img {width:32px; height:32px; margin:auto}
.multimenu_over {position:fixed; top:0; bottom:0; right:0; left:0; z-index:11; opacity:0; visibility:hidden; transition:.5s}
.multimenu {position:fixed; opacity:100; z-index:12; bottom:100px; right:15px}
.multimenu > a {display:block; cursor:pointer; display:flex; justify-content:flex-end}
.multimenu > a > div {background-color:rgba(0,0,0,.85); color:white; border-radius:25px; padding:10px 20px; margin:2px}
.multimenu .call,.multimenu .callbuck {height:42px; width:42px; display:flex; padding:0}
.multimenu .call {background-color:green}
.multimenu .callbuck {background-color:red}
.multimenu .call > img,.multimenu .callbuck > img {width:24px; height:24px; margin:auto}
#modal_invitation .modal__overlay {background:rgba(0,0,0,.3); backdrop-filter:blur(3px)}
#modal_invitation .modal__container {padding:0; border-radius:5px !important; background:none}
#invitation .inv_content {background-color:white; border-radius:5px 0 0 5px; display:flex}
#invitation .inv_content > div {margin:auto; padding:20px var(--li)}
#invitation .inv_content > div h3 {font-size:1.1rem; margin-bottom:15px}
#invitation .inv_content > div p {margin:10px 0}
#invitation img {max-width:200px; border-radius:0 5px 5px 0}
@media all and (max-width:600px) {#invitation img {max-width:140px; object-fit:cover}
}
@media all and (max-width:480px) {#invitation > img {display:none}
#invitation p.manager {display:inline-block; width:100%}
#invitation p.manager img {max-width:100%; width:120px; height:120px; border-radius:60px}
#invitation .inv_content {border-radius:5px}
}
.modal__container {z-index:199; background-color:#fff; padding:3%; max-width:calc(100% - var(--li)); max-height:95vh; border-radius:.4rem; overflow-y:auto; box-sizing:border-box}
.modal__overlay {z-index:198; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.85); display:flex; justify-content:center; align-items:center}
.modal__header {display:flex; justify-content:space-between; align-items:center}
.modal__close {background:transparent; border:0}
.modal__header .modal__close:before {content:"\2715"}
.modal__content {line-height:1.5; color:rgba(0,0,0,.8)}
.modal__btn-primary {background-color:#00449e; color:#fff}
@keyframes mmfadeIn {from {opacity:0}
 to {opacity:1}
}
@keyframes mmfadeOut {from {opacity:1}
 to {opacity:0}
}
@keyframes mmslideIn {from {transform:translateY(15%)}
 to {transform:translateY(0)}
}
@keyframes mmslideOut {from {transform:translateY(0)}
 to {transform:translateY(-10%)}
}
.micromodal-slide {display:none}
.micromodal-slide.is-open {display:block}
.micromodal-slide[aria-hidden="false"] .modal__overlay {animation:mmfadeIn .3s cubic-bezier(0.0,0.0,0.2,1)}
.micromodal-slide[aria-hidden="false"] .modal__container {animation:mmslideIn .3s cubic-bezier(0,0,.2,1)}
.micromodal-slide[aria-hidden="true"] .modal__overlay {animation:mmfadeOut .3s cubic-bezier(0.0,0.0,0.2,1)}
.micromodal-slide[aria-hidden="true"] .modal__container {animation:mmslideOut .3s cubic-bezier(0,0,.2,1)}
.micromodal-slide .modal__container,.micromodal-slide .modal__overlay {will-change:transform}
.modal__content img.close {position:absolute; right:2%; top:2%; width:1.6rem; height:1.6rem}
.modal__footer {text-align:right; padding:15px 0}
.fade-in-section {opacity:0; transform:translateY(20px); transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.fade-in-section.is-visible {opacity:1; transform:translateY(0)}
