/* СБРОС */

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 !important;}
	/* горионтальное выравнивание */
.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;}


	/* ФОРМА ОБР.ЗВОНКА */

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


	/* ПРИГЛАШЕНИЕ НА КВИЗ */

#modal_invitation .modal__overlay {background: rgba(0,0,0,.25); backdrop-filter: blur(3px);}
#modal_invitation .modal__container {padding: 0; border-radius: 5px !important; background: none;}
#invitation {width: 600px; max-width: 100%; background-color: white; border-radius: 5px; justify-content: space-between;}
#invitation > div {width: calc(100% - 190px); padding: 10px 0;}
#invitation > div.flex > div {margin: auto;}
#invitation img {border-radius: 0 5px 5px 0; width: 190px; height: 100%; object-fit: cover;}

@media all and (max-width: 480px) {
	#invitation {flex-direction: column-reverse; height: auto;}
	#invitation img {border-radius: 50%; width: 96px; height: 96px; object-fit: cover; margin: 10px auto;}
	#invitation > div {width: 100%;}
}



	/* МОДАЛКА */


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