/* СБРОС */

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%;}


	/* ШАБЛОН */

	/* общие */
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;}
	/* текст */
.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: 900px) { :root {--li: 20px;} }
@media all and (max-width: 360px) { :root {--li: 10px;} }
	/* базовый шаблон */
	/* content - выравнивает контент по центру, и задает максимальную ширину */
	/* field - внутренние отступы блока с контентом */
	/* height_100 и height_80 предполагают высоту 100 и 80% соответственно */
	/* если контент внутри имеет margin: auto - он будет отцентрован по вертикали */
	/* пример применения: */
	/*
	<div class='content filed height_100'>
		<img src='temp.jpg' style='margin: auto;' />
	</div>
	*/
.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(--li) 80px var(--li);}
.height_100 {min-height: 100vh;}
.height_80 {min-height: 80vh;}


	/* ОСНОВНЫЕ МОДУЛИ */
	
	/* TITLE */
	
div.title h2 {margin-bottom: 20px;}
div.title p {text-align: center; max-width: 700px; margin: 0 auto; margin-bottom: 40px;}

	
	/* QUIZ 3 */

.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;}

	/* стиль 1, ответы без изображений */
	
.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;}

	/* стиль 2, маленькие изображения */

.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;}

	/* стиль 3, одно большое изображение */

.quiz_style_3 .answers {width: 100%;}
.quiz_style_3 .answer_big_img {display: block; max-height: 300px; /* width: 100%; */ max-width: 300px; margin: 10px 0 10px 30px; border-radius: 1rem;/*  object-fit: contain; */}
.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;}
}
	
	/* стиль 42, большие изображения в 2 колонки */

.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;}
	
	/* стиль 43, большие изображения в 3 колонки */

.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;}
}

	/* стиль 44, большие изображения в 4 колонки */

.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 */
	
.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;}

	/* wa */
#modal_wa .top {background-color: #085b51;}
#modal_wa .send button {background-color: #21c159;}
	/* tg */
#modal_tg .top {background-color: #50789e;}
#modal_tg .send button {background-color: #50789e;}




	/* CITY */
	
#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;}


	/* РЕЖИМ ТЕСТИРОВАНИЯ */
	/* 08.07.2025 - поправил внешку */

#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; /* background-color: rgba(255,255,255,.5); */ z-index: 11; opacity:0; visibility: hidden; transition: .5s;}
.multimenu {position: fixed; opacity: 100; z-index: 12; bottom: 100px; right: 15px;}
.multimenu > div {cursor: pointer; display: flex; justify-content: flex-end;}
.multimenu > div > 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}