/* СБРОС */

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.8rem;}
	/* горионтальное выравнивание */
.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 {--lateral_indent: 40px;}
@media all and (max-width: 900px) { :root {--lateral_indent: 20px;} }
@media all and (max-width: 360px) { :root {--lateral_indent: 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(--lateral_indent) 80px var(--lateral_indent);}
.height_100 {min-height: 100vh;}
.height_80 {min-height: 80vh;}


	/* ОСНОВНЫЕ МОДУЛИ */
	
	/* 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 .answers {width: 100%;} /* в 2 колонки ответы */
.quiz3 .quiz_style_1 .answer {width: 49%; display: inline-block;}

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


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


	/* РЕЖИМ ТЕСТИРОВАНИЯ */

#debug {position: fixed; top: 5px; left: 5px; border-radius: 5px; background-color: red; border: 2px solid white; z-index: 1000;}
#debug p {padding: 10px; color: white; font-weight: bold;}


	/* ПИСЬМО ДИРЕКТОРУ */

#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__container{
	z-index:199;
	background-color:#fff;
	padding: 3%;
	max-width: 800px;
	max-height: 95vh;
	border-radius: .4rem;
	overflow-y:auto;
	box-sizing:border-box
}
.modal__btn{background-color:#e6e6e6; color: #222; transition: .4s;}
.modal__btn:hover{background-color:#a5a5a5; transition: .4s;}
.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}