/* T_SAMPLE 1.0 */

	/* СБРОС */

body,h1,h2,h3,h4,p,quote,small,form,input,nav,ul,li,ol,label,a {margin: 0; padding: 0; color: #444444;}
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 {border-bottom: 1px dashed #222;}
.dashed_w {border-bottom: 1px dashed white;}
.dashed_color {border-bottom: 1px dashed var(--color);}
.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;} }
@media all and (min-width: 1600px) { :root {--lateral_indent: 60px;} }
@media all and (min-width: 1800px) { :root {--lateral_indent: 120px;} }

	/* базовый шаблон */
	/* 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 {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;}

	
	/* САЙТ */
	
	/* РАЗРЕШЕНИЯ для перестройки шаблона */ 
	/* ПК 1024 - ... */
	/* Планшет 900 - 1024 */
	/* Планшет 600 - 900 */
	/* Мобильный 320 - 412 */
	/* Мобильный 412 - 600 */ 

	/* фон */
#fon {z-index: -1; top: 0; bottom: 0; right: 0; left: 0; position: fixed; background-color: #dbdfea; background-repeat: no-repeat; background-size: cover; background-position: top center; background-image: url('../file/main/fon.jpeg')}
#page {z-index: 2;}
.f_black {background-color: rgba(0,0,0,.9);}
.f_white {background-color: rgba(255,255,255,.9);}
.f_grey {background-color: rgba(219,223,234,.9);}
.f_dark_grey {background-color: #6b6c6e;}
	/* шрифты */
body {font-family: 'Open Sans', sans-serif;}
p, html {font-size: 18px;}
h1 {font-size: 2rem; padding-bottom: 10px;}
h2 {display: block; font-size: 2rem; width: 100%; max-width: 100%; padding: 10px 0; margin: 15px 0; text-align: center;}
h3 {font-size: 1.2rem; padding-bottom: 10px;}
	/* адаптивы шрифтов */
@media all and (max-width: 600px) {
	p, html {font-size: 16px;}
}
@media all and (min-width: 1600px) {
	p, html {font-size: 20px;}
}
	/* формы */
input, date, datetime-local, select, textarea, button, a.button {display: inline-block; padding: 10px 20px; margin: 10px 4px; font-size: 1.2rem; box-sizing: border-box; border: 1px solid #999; border-radius: 15px;}
input[type=submit], input[type=button], button, a.button {color: white; cursor: pointer; background-color: var(--color); transition: .4s; border: none;}
input[type=submit]:hover, input[type=button]:hover, button.button:hover, a.button:hover {background-color: var(--color_dark); transition: .4s; box-shadow: 0 0 15px var(--color_light);}
	/* цвета */
:root {
	--color: #e31e24; /* красный */
	--color_dark: #940A0D;
	--color_light: #F17E81;
	--color_super_light: #f5dede;
}
.color  {color: var(--color);}

	/* для слайдера, ограничим ширину */
section {max-width: 100%;}


	/* ГЛАВНЫЙ */

#main {width: 100%; min-height: 100vh; padding: 10px var(--lateral_indent); background: linear-gradient(to right, 
rgba(255,255,255,.9) 0px,
rgba(255,255,255,.8) 450px,
rgba(255,255,255,0) 600px);}

	/* ШАПКА */
	
#top {width: 100%; display: flex; justify-content: space-between; align-items: center;}
#top .logo {height: 120px; margin-top: 20px;}
#top .right p a.wa > img {height: 2rem; vertical-align: middle; margin: -2px 10px 8px 2px;}
#top .right p {text-align: right; margin-bottom: 4px;}
#top .right p.city {max-width: 360px;}
#top .zphone {font-weight: bold; font-size: 2rem; margin-bottom: 10px;}

@media all and (max-width: 600px) {
	#top .logo {height: 100px; margin-top: 10px;}
	#top .right p {font-size: .9rem;}
	#top .zphone {font-size: 1.4rem;}
}
@media all and (max-width: 412px) {
	#top {flex-direction: column;}
	#top .logo {margin-top: 0;}
	#top .right p {text-align: center;}
}


	/* КОНТЕНТ ГЛАВНОГО ЭКРАНА */

#main_content {width: 550px; max-width: 100%; margin-left: 0; padding: 20px 0; min-height: calc(100vh - 300px);}
#main_content > div {margin-left: 0;}
#main_content .offer {padding: 15px 0; font-size: 1.6rem;}
#main_content .adv {line-height: 1.6;}
#main_content p {padding-bottom: 15px;}

@media all and (max-width: 600px) {
	#main_content h1 {font-size: 1.6rem;}
	#main_content .offer {font-size: 1.4rem;}
	#main_content h1, #main_content p {text-align: center;}
}


	/* ПРЕИМУЩЕСТВА */

#advantages p.j {max-width: 800px; margin: 0 auto;}
#advantages .trigger > div {width: 25%; padding: 15px 10px;}
#advantages .trigger > div img {height: 64px; width: 64px; margin: 10px 0; fill: var(--color);}
#advantages .trigger h3 {max-width: 340px; margin: 0 auto;}
#advantages .trigger p {max-width: 340px; margin: 0 auto; font-size: .9rem;}

@media all and (max-width: 1024px) {
	#advantages .trigger > div {width: 50%;}
}
@media all and (max-width: 600px) {
	#advantages .trigger > div {width: 100%;}
}


	/* ЦЕНЫ */
	
#price > div {display: flex; flex-wrap: wrap; justify-content: space-around;}
#price h2 {color: white;}
#price > div div.relative {padding: 10px;}
#price > div div.relative img {border-radius: 5px; width: 100%;}
#price p {position: absolute; bottom: 20px; right: 15px; display: block; background-color: var(--color); padding: 5px 10px; border-radius: 5px; font-size: 1.8rem; color: white; font-weight: 600; line-height: 1.2;}
#price p span {font-size: 1.2rem;}


	/* КУПОН */

#coupon h2, #coupon p.f_white {padding: 10px 20px; border-radius: 15px; border: 1px solid #666;}
#coupon img {width: 260px; margin: 20px 0; border-radius: 15px; border: 1px solid #666;}
#coupon a {display: inline-block; width: 248px; padding: 20px 0; background-color: white; border-radius: 15px; border: 1px solid #666;}


	/* ПРАЗДНИЧНОЕ ОФОРМЛЕНИЕ */

.holiday_class {background-size: cover;}
#december31 {background-image: url('../file/holidays/december31.jpg'); background-position: bottom center;}
#february23 {background-image: url('../file/holidays/february23.jpg'); background-position: bottom center;}
#march8 {background-color: #00d3e7; background-image: url('../file/holidays/march8.jpg'); background-position: bottom right;}
#may1 {background-image: url('../file/holidays/may1.jpg'); background-position: bottom center;}
#may9 {background-image: url('../file/holidays/may9.jpg'); background-position: bottom center;}
#june12 {background-image: url('../file/holidays/june12.jpg'); background-position: bottom center;}
#november4 {background-image: url('../file/holidays/november4.jpg'); background-position: bottom center;}


	/* СТРАНИЦА КУПОН */

#coupon_page img {margin: 10px; max-width: calc(100% - 20px); border-radius: 10px;}
#coupon_page p {margin: 10px; font-size: 1.2rem;}


	/* УЗНАЙ ЦЕНУ ЗА 2 МИНУТЫ */

#price_of_2_minuts > div {width: 100%; display: flex; justify-content: space-around; align-items: center;} 
#price_of_2_minuts div.form {max-width: calc(100% - 260px);} 
#price_of_2_minuts div.form p {padding: 5px 0;}
#price_of_2_minuts div.form p.hints {max-width: 400px;}
#price_of_2_minuts div.form h3 {color: var(--color); font-size: 1.4rem;}
#price_of_2_minuts div.manager {margin-left: 20px; max-width: 230px; position: relative;} 
#price_of_2_minuts div.manager img {border-radius: 5px; border: 2px solid var(--color); max-height: 300px;}
#price_of_2_minuts div.manager p {max-width: 100%; position: absolute; bottom: 15px; right: -10px; display: block; background-color: white; font-size: .9rem; padding: 5px 10px; border-radius: 5px; border: 2px solid var(--color); color: var(--color); box-shadow: 1px 1px 15px white, 1px -1px 15px white;}

@media all and (max-width: 660px) {
	#price_of_2_minuts > div {flex-direction: column-reverse;}
	#price_of_2_minuts div.form {max-width: 100%;}
	#price_of_2_minuts div.manager {margin-left: 0; margin-bottom: 30px; max-width: 100%;}
	#price_of_2_minuts div.manager img {max-height: 300px;}
}


	/* ОТЗЫВЫ */

#views section div.view_block {padding: 10px 20px;}
#views section div.view_block img {width: 92px; height: 92px; margin: 0 2% 2% 0; border-radius: 5px; float: left; object-fit: cover;}
#views .name {padding: 0; font-size: 1.2rem; font-weight: 600;}
#views .text {font-size: 0.8rem;}

#new_view input, #new_view textarea {font-size: .9rem; width: 380px; max-width: 90%;}


	/* НАШИ РАБОТЫ */

#works h2, #works p {color: white;}
#works .work_block {padding: 5px; position: relative;}
#works .work_block > a > img {width: 100%; height: 320px; object-fit: cover; margin: 10px auto; border-radius: 5px;}
#works .work_block p.j {font-size: .9rem; width: 320px; max-width: calc(100% - 30px); margin: 0 auto;}
#works .ytb {position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; display: flex;}
#works .ytb img {margin: auto; width: 100px;}


	/* О НАС */

#about div.flex {align-items: center;}	
#about div.about {padding-right: 30px}
#about div.about img {height: 100px; float: left; margin: 0 30px 15px 0;}
#about div.about p {text-align: justify; max-width: 700px;}
#about div.rop img {width: 300px; border-radius: 10px;}

#about div.certificate {width: 100%; margin-top: 30px;}
#about div.certificate img {height: 200px; margin: 10px auto; border-radius: 5px; box-shadow: 2px 2px 5px grey;}

@media all and (max-width: 900px) and (min-width: 601px) {
	#about div.about p {font-size: .9rem;}
	#about div.about img {margin: 0 20px 15px 0;}
}
@media all and (max-width: 700px) and (min-width: 601px) {
	#about div.about img {height: 80px;margin: 0 15px 10px 0;}
	#about div.about {padding-right: 20px}
	#about div.about p {font-size: .85rem;}
}
@media all and (max-width: 600px) {
	#about div.flex {flex-wrap: wrap;}
	#about div.about {padding-right: 0}
	#about div.rop img {width: 90%; margin-top: 20px;}
	#about div.rop p.hints {text-align: center;}
}


	/* СКИДКИ */

#discount > div {width: 100%;}
#discount div.flex {width: 100%;}
#discount div.flex > div {margin: 10px 5px; padding-bottom: 10px; width: calc(50% - 10px); background-color: white;}
#discount div.flex > div img {width: 100%; display: block;}
#discount div.flex > div h3, #discount div.flex > div p {display: block;  padding: 4px 10px;}

@media all and (max-width: 560px) {
	#discount div.flex > div {width: 100%;}
}


	/* ОТКАЗНЫЕ */
	
#not > div {width: 100%;}
	

	/* ВОПРОС ОТВЕТ */

.faq_container {max-width: 900px;}
.faq_container .box {position: relative; margin-bottom: 20px;} /* Нижний отступ между элементами аккордеона */


.faq_container .box:last-child {
  margin-bottom: 0; /* Для последнего элемента нижний отступ убираем */
}

.faq_container .box .label {
  position: relative;
  cursor: pointer; /* Меняем курсор при наведении */
  font-size: 1.1rem;
  font-weight: bold;
  padding-right: 40px;
}

.faq_container .box .label::after {
  content: "+"; /* Задаем иконку "+" для элемента аккордеона */
  position: absolute;
  top: 50%; /* Выравнивание по центру */
  transform: translateY(-50%);
  right: 20px;
  font-size: 25px;
  font-weight: bold;
}

.faq_container .box.active .label::after {
  content: "\2012"; /* Меняем иконку на "-" при нажатии на элемент */
}

.faq_container .box .answer {
  position: relative;
  overflow: hidden;
  max-height: 0; /* Скрываем контент */
  transition: 0.3s; /* Для плавности анимации */
}

.faq_container .box .answer p {
  padding: 20px;
  font-size: .9rem;
}



	/* НЕ СТАНДАРТНАЯ СИТУАЦИЯ */

#no_standart > div {width: 100%; display: flex; justify-content: space-around; align-items: center;} 
#no_standart div.form {max-width: calc(100% - 260px);} 
#no_standart div.form p {padding: 5px 0;}
#no_standart div.form p.hints {max-width: 400px;}
#no_standart div.form h3 {color: var(--color); font-size: 1.4rem;}
#no_standart div.manager {margin-left: 20px; max-width: 230px; position: relative;} 
#no_standart div.manager img {border-radius: 5px; border: 2px solid var(--color); max-height: 300px;}
#no_standart div.manager p {max-width: 100%; position: absolute; bottom: 15px; right: -10px; display: block; background-color: white; font-size: .9rem; padding: 5px 10px; border-radius: 5px; border: 2px solid var(--color); color: var(--color); box-shadow: 1px 1px 15px white, 1px -1px 15px white;}

@media all and (max-width: 660px) {
	#no_standart > div {flex-direction: column-reverse;}
	#no_standart div.form {max-width: 100%;}
	#no_standart div.manager {margin-left: 0; margin-bottom: 30px; max-width: 100%;}
	#no_standart div.manager img {max-height: 300px;}
}


	/* КОНТАКТЫ */

#contacts > div {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around;}
#contacts .block_logo_menu {width: calc(66.6% - 40px); display: flex; flex-wrap: wrap; justify-content: space-around;}
#contacts .block_logo_menu > div {margin: 10px;}
#contacts .block_info {width: calc(33.3% - 20px); margin: 10px;}
#contacts img.logo {width: 200px; margin-bottom: 20px;}
#contacts p {margin-bottom: 5px;}
#contacts p.soc img {margin: 5px 5px 0 0; height: 36px; border-radius: 10px;}

@media all and (max-width: 960px) {
	#contacts .block_logo_menu {width: calc(50% - 20px);}
	#contacts .block_info {width: calc(50% - 20px);}
}
@media all and (max-width: 600px) {
	#contacts .block_logo_menu {width: 100%;}
	#contacts .block_logo_menu > div {width: 100%; margin: 10px;}
	#contacts .block_info {width: 100%;}
}







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

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


	/* ОБРАТНЫЙ ЗВОНОК */

#modal_callbuck form {margin-top: 20px;}


	/* ОПРОС */
	
#quiz .modal_question h3 {color: var(--color); font-size: 1.4rem; margin-bottom: 20px; text-align: center;}
#quiz .modal_question p {font-size: 1.1rem; margin: 2px 0;}
#step_last div.flex {margin-top: 20px;}
#quiz input {max-width: 400px;}
#quiz p.hints {max-width: 400px;}

#quiz .quest_img_block {display: flex; justify-content: space-between; align-items: center;}

#quiz .answers {display: flex; flex-wrap: wrap; justify-content: center;}
#quiz .answers > div {max-width: 210px; padding: 10px;}
#quiz .answers > div > img {height: 160px; border-radius: 10px 0 10px 0;}
#quiz .answers > div > p {text-align: center; font-weight: bold; font-size: 1.2rem;}

@media all and (max-width: 600px) {
	#quiz .answers > div > img {height: 110px; border-radius: 10px 0 10px 0;}
}

	/* без изображений */
#quiz .column > div {max-width: none; padding: 5px;}
#quiz div.column > div > p {text-align: left; margin-bottom: 10px;}
#quiz div.column > div > p > span {background-color: var(--color); border-radius: 15px; padding: 5px 10px; color: white;}

	/* общее изображение */
#quiz img.quest_img {max-width: 220px; margin: 10px; border-radius: 10px 0 10px 0;}
#quiz .quest_img_block .answers {min-width: 160px;}

@media all and (max-width: 600px) {
	#quiz .answers > div {width: 100%; max-width: 100%;}
	#quiz .modal_question img.quest_img {max-width: 180px;}
}
@media all and (max-width: 480px) {
	#quiz .quest_img_block {flex-direction: column-reverse; align-items: center;}
	#quiz .answers {min-width: 180px;}
}




	/* КНОПКА МИГАЮЩАЯ */

.but {display: inline-block;
  font-size: 1.3em;
  font-weight: 700;
  color: white;
  text-shadow: 0 -1px rgba(0,0,0,.1);
  padding: .4em .8em;
  border-radius: 3px;
  text-align: center;
  background: linear-gradient(var(--color_light), var(--color)) var(--color);
  box-shadow: var(--color) 1px 1px 10px;
  -webkit-animation: pulsate 1.6s linear infinite;
  animation: pulsate 1.6s linear infinite;
  margin: 10px 0;
}
.but:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  cursor: pointer;
  background: var(--color); transition: 0.7s;
}
@-webkit-keyframes pulsate {  50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 3px #ffd, 0 0 3px #fff;} }
@keyframes pulsate {  50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 3px #ffd, 0 0 3px #fff;} }


	/* МОДАЛКА */


.modal__container{
	z-index:199;
	background-color:#fff;
	margin: 5px;
	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;}
.modal__btn:hover{background-color:#a5a5a5;}

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